/* --- Custom Theme Overrides --- */
    
    /* Set the main accent color variable */
    :root {
        --brand-primary: #E53935;
    }
    
    /* --- Body Styling --- */
    body.task-login {
        background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://heartbeatacic.org/img/junior1.jpg')!important;
        background-color: transparent !important;
        
        background-position: center center;
        background-attachment: fixed;
        font-family: 'Roboto', sans-serif;
    }
    
    /* --- Login Form Card Styling (Glassmorphism) --- */
    #login-form {
        margin: 0 auto;
        top: 7vh;
        background: rgba(30, 30, 30, 0.5);
        max-width: 480px; /* Increase card width */
        position: relative;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(44, 44, 44, 0.8);
        border-radius: 12px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        padding: 2.5rem;
    }
    
    
    /* --- Logo and Title Styling --- */
    .form-header {
        display: flex;
        align-items: end;
        justify-content: center;
        gap: 1rem;
       margin-top: 2rem;
    }
    .form-header #logo {
        max-width: 100px;
        max-height: 100px;
    }
    .form-header .title {
        text-align: left;
    }
    .form-header .title .product-name {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.75rem;
        font-weight: 700;
        color: #EAEAEA;
    }
    .form-header .title .subtitle {
        font-size: 1.5rem;
        color: #B3B3B3;
    }
    
    
    /* --- Input Field Styling --- */
    .form-group input.form-control {
        background-color: var(--bg-color, #121212);
        border: 1px solid #2c2c2c;
        color: #EAEAEA;
    }
    
    /* Use the CSS variable for the focus color */
    .form-group input.form-control:focus {
        outline: none !important; /* Remove default browser outline */
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
    }
    .task-login #logo {
        top: 2vh;
    }
    
    /* Override the default blue link color with our brand color */
    a {
        color: var(--brand-primary);
    }
    
    
    
    /* --- Glassmorphism Button Styling --- */
.form-group .button.mainaction,
.form-group .button.mainaction:hover {
    background: rgba(255, 255, 255, 0.1) !important; /* Semi-transparent white background */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Subtle light border */
    color: #EAEAEA !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}


.form-group .button.mainaction:hover {
    background: rgba(229, 57, 53, 0.3) !important; /* Red glow on hover */
    border-color: rgba(229, 57, 53, 0.5) !important;
}
    
    /* Hide the default watermark/logo in the email preview pane */
    #mail-content.empty::after {
        background-image: none !important;
        content: none !important;
    }
    
/* --- New Glassmorphism Button Styling --- */
html.dark-mode .btn-primary,
        .btn-primary {
            background: rgb(44 48 50 / 15%);
            border: 1px solid rgba(44, 48, 50, 0.50);
            color: #EAEAEA;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            transition: all 0.2s ease-in-out;
        }

        html.dark-mode .btn-primary,
        .btn-primary:hover {
            background: rgb(84 85 85 / 15%)!important; /* Brighter blue on hover */
            border-color: rgba(84, 85, 85, 0.4)!important;
            color: #ffffff;
            transform: translateY(-2px); /* Subtle lift effect */
        }

       
        .btn-primary:active {
            background: rgb(229 57 53)!important; /* Slightly darker when clicked */
            border-color: rgba(229, 57, 53, 0.2)!important;
            transform: translateY(0); /* Remove lift effect on click */
        }
        
        .input-group-text {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding: .375rem .75rem;
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            text-align: center;
            white-space: nowrap;
            background-color: unset;
            border: 1px solid #2d2d2e;
        }
        
        input.form-control:focus {
            background-color: #000 !important;
            outline: #000 !important;
            /*border: 1px solid #2c2c2c;*/
            /*color: #EAEAEA;*/
        }
        
        input:focus,
            select:focus,
            textarea:focus,
            button:focus {
                outline: none !important;
                
            }
        
        html.dark-mode .custom-file-label:not(.is-invalid), html.dark-mode .form-control:not(.is-invalid) {
         border-color: #2e2e2e;
        }
        
        html.dark-mode .input-group-text {
            color: #c5d1d3;
            background-color: #21292c;
            border-color: #706d6d;
        }
        
        /*html.dark-mode .btn-primary {*/
        /*    background-color: unset;*/
        /*    color: #e2e8e9;*/
        /*}*/
        
        html.dark-mode > body {
            background-color: #000 !mportant;
            background-blend-mode: soft-light;
        }

html.dark-mode #layout-content {
    background-color: #21292c !important;
}

html.dark-mode #layout-content, html.dark-mode #layout-list, html.dark-mode #layout-sidebar, html.dark-mode #layout>div>.footer, html.dark-mode #layout>div>.header, html.dark-mode .menu.pagenav.pagenav-list, html.dark-mode .menu.pagenav.pagenav-list+.navlist, html.dark-mode .menu.pagenav.pagenav-list.expanded+.navlist, html.dark-mode .popup .listbox .footer {
    background-color: #000 !important;
    border-color: #4d6066;
}

html.dark-mode .listing li.selected, html.dark-mode .listing li.selected>a, html.dark-mode .listing li.selected>div>a, html.dark-mode .listing tr.selected td {
    color: #b72d2a;
    background-color: #21292c;
    font-weight: 600;
}

html.dark-mode #layout-menu {
    background: #000;
}

#taskmenu a.selected, html.dark-mode .menu.toolbar a.selected {
    background-color: #21292c !important;
}

#taskmenu a.selected:hover {
    background-color: #b72d2a; !important;
}

#layout-menu .special-buttons a:not(:focus) {
    background: #21292c !important;
}

html.dark-mode > body {
    background: #21292c !important;
    background-blend-mode: soft-light;
}

html.dark-mode {
    scrollbar-color: #21292c #000;
}

html.dark-mode .custom-file-label:not(.is-invalid), html.dark-mode .form-control:not(.is-invalid) {
    border-color: #686d6f
    background: #21292c !important;
}

html.dark-mode .html-editor .editor-toolbar {
    background-color: #000;
    border-color: #686d6f;
}

#composebodycontainer html.dark-mode .custom-file-label:not(.is-invalid), html.dark-mode .form-control:not(.is-invalid) {
    border-color:#6c6b6b;
    background: #21292c;
}


#composebodycontainer input:focus,
            select:focus,
            textarea:focus,
            button:focus {
                outline: none !important;
                background-colour: #21292c !important;
            }
input#compose-subject.form-control:focus {
    outline: none !important;;
}

.input-group .icon.input-group-text {
    min-width: 2.4rem;
    background: #141414;
}

.message-htmlpart div.rcmBody, .message-part div.rcmBody {
    margin: 0 auto !important;
    overflow: auto hidden;
    padding: 1rem;
    
}

html.dark-mode body {
    background-color: #000 !important;
}

html.dark-mode .ui-widget-content, html.dark-mode .ui-widget-header {
    background-color: #000 !important;
}

html.dark-mode .message-part {
    border-color: #4d6066;
    border: 1px solid;
    padding: 1rem;
    border-radius: 4px;
}

#message-content .attachmentslist:not(:empty),
html.dark-mode .message-partheaders {
    background-color: #000;
    border: 0;
    margin-bottom: 0.5rem;
}

html.dark-mode #message-header>.header {
    display: flex;
    background-color: #000;
    padding: 1rem;
}
html.dark-mode .message-htmlpart div.rcmBody, .message-part div.rcmBody {
    margin: 0 auto !important;
    overflow: auto hidden;
    padding: 1rem;
    background-color: #000;
    color: #fff;
}

html.dark-mode #v1elementToProof,
html.dark-mode #v1divRplyFwdMsg font {
    color: #fff !important;
}

/* Override Virtru element text color for better visibility in dark mode */
html.dark-mode .v1elementToProof {
    color: #fff !important;
}

html.dark-mode #message-htmlpart1 table td {
    color: #000;
    width: 100%;
}



#print-layout .propform.grouped .row.input-group .input-group-text {
    padding: 0;
    min-width: 12rem;
    background: unset;
    border: 0;
    color: #fff;
}

html.dark-mode #taskmenu .action-buttons a {
    color: unset;

#print-layout .formcontent .row .form-control-plaintext {
    padding: .1rem;
    color: #fff;
}

html.dark-mode .ui-widget-content, html.dark-mode .ui-widget-header {
    background-color: #000 !important;
}

html.dark-mode .floating-action-buttons a.button {
    box-shadow: none;
    background: #red!important;
}

html.dark-mode.layout-phone #layout-menu {
    background: #000 !important;
}

@media (max-width: 768px) {
    html.dark-mode.layout-phone #layout-menu {
    background: #000;
    padding: 0.5rem;
}
    #taskmenu a.selected, html.dark-mode .menu.toolbar a.selected {
    background-color: #000 !important;
    color: #fff;
}







}