/* =========================================================
   C&B LOGISTICS — SECURE WEBMAIL PORTAL
   ========================================================= */

html,
body.task-login {
    margin: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
}

body.task-login {
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 50% 20%, rgba(23,104,212,.12), transparent 35%),
        linear-gradient(135deg,#07162f 0%,#0b2349 55%,#07172e 100%) !important;
    color: #0b1f3a !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Hide Elastic login wrapper styling */

.task-login #layout,
.task-login #layout-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Main page */

.cb-page {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 40px 20px !important;
}

/* =========================================================
   C&B BRAND
   ========================================================= */

.cb-brand {
    text-align: center !important;
    margin-bottom: 28px !important;
}

.cb-logo-text {
    font-size: 68px !important;
    line-height: .9 !important;
    font-weight: 900 !important;
    letter-spacing: -8px !important;
    font-style: italic !important;
    color: #fff !important;
}

.cb-logo-text .cb-amp {
    color: #1687dc !important;
    margin: 0 5px !important;
}

.cb-logistics {
    margin-top: 14px !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 9px !important;
}

.cb-tagline {
    margin-top: 10px !important;
    color: #7db6e6 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
}

/* =========================================================
   LOGIN CARD
   ========================================================= */

.cb-login-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 440px !important;

    padding: 38px 42px 32px !important;

    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 18px !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.32),
        0 8px 24px rgba(0,0,0,.16) !important;
}

.cb-panel-header {
    text-align: center !important;
    margin-bottom: 28px !important;
}

.cb-security-icon {
    width: 46px !important;
    height: 46px !important;
    line-height: 46px !important;

    margin: 0 auto 14px !important;

    background: #eef5fc !important;
    border-radius: 50% !important;

    font-size: 20px !important;
}

.cb-title {
    color: #082b63 !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    margin-bottom: 7px !important;
}

.cb-subtitle {
    color: #718096 !important;
    font-size: 14px !important;
}

/* =========================================================
   ROUNDCUBE FORM
   ========================================================= */

.cb-login-panel #login-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cb-login-panel .form-control {
    min-height: 54px !important;
    border-radius: 9px !important;
    border: 1px solid #cbd7e6 !important;
    background: #f8fafc !important;
    color: #172b4d !important;
    font-size: 15px !important;
}

.cb-login-panel .form-control:focus {
    background: #fff !important;
    border-color: #1768d4 !important;
    box-shadow: 0 0 0 3px rgba(23,104,212,.12) !important;
}

.cb-login-panel button[type="submit"],
.cb-login-panel input[type="submit"] {
    width: 100% !important;
    min-height: 54px !important;

    margin-top: 10px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: linear-gradient(90deg,#1269d3,#0782d6) !important;

    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;

    box-shadow: 0 8px 20px rgba(8,67,153,.20) !important;

    cursor: pointer !important;
}

.cb-login-panel button[type="submit"]:hover,
.cb-login-panel input[type="submit"]:hover {
    filter: brightness(1.08) !important;
}

/* Secure message */

.cb-secure {
    margin-top: 25px !important;
    padding-top: 20px !important;

    border-top: 1px solid #e7edf5 !important;

    color: #718096 !important;
    text-align: center !important;
    font-size: 12px !important;
}

/* Footer */

.cb-footer {
    margin-top: 25px !important;
    color: #7894b5 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* Hide unwanted Roundcube product information */

.cb-login-panel #login-footer {
    text-align: center !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
}

/* Mobile */

@media (max-width: 600px) {

    .cb-page {
        justify-content: flex-start !important;
        padding-top: 70px !important;
    }

    .cb-logo-text {
        font-size: 54px !important;
    }

    .cb-logistics {
        font-size: 16px !important;
        letter-spacing: 7px !important;
    }

    .cb-login-panel {
        max-width: 390px !important;
        padding: 30px 24px !important;
    }
}


/* =========================================================
   C&B LOGISTICS — LOGIN PORTAL FINAL LAYOUT OVERRIDE
   ========================================================= */

body.task-login #layout-content {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 35px 20px !important;
    box-sizing: border-box !important;
}

/* C&B branding */
body.task-login #layout-content::before {
    margin: 0 0 26px 0 !important;
}

/* Login card */
body.task-login #login-form {
    width: 100% !important;
    max-width: 440px !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 38px 42px 34px !important;

    background: #ffffff !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    box-shadow: 0 22px 55px rgba(0,0,0,.24) !important;
}

/* Remove unwanted stretching */
body.task-login #login-form .box-inner,
body.task-login #login-form .boxcontent,
body.task-login #login-form .formcontent {
    min-height: 0 !important;
    height: auto !important;
}

/* Fields */
body.task-login #login-form .form-control {
    min-height: 54px !important;
    border-radius: 8px !important;
}

/* Login button */
body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"] {
    min-height: 54px !important;
    margin-top: 18px !important;
    border-radius: 8px !important;
}

/* Footer / encrypted connection */
body.task-login #login-footer {
    margin-top: 20px !important;
    padding-top: 18px !important;
    border-top: 1px solid #d8e0ea !important;
    text-align: center !important;
}

/* Mobile */
@media (max-width: 600px) {
    body.task-login #layout-content {
        padding: 24px 16px !important;
    }

    body.task-login #login-form {
        max-width: 100% !important;
        padding: 32px 24px 28px !important;
    }
}


/* =========================================================
   C&B LOGIN — COMPACT SINGLE CARD FIX
   ========================================================= */

body.task-login #login-form {
    width: 440px !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 38px 40px 34px !important;
    overflow: visible !important;
}

/* Kill Elastic internal card / positioning */
body.task-login #login-form .box-inner,
body.task-login #login-form .boxcontent,
body.task-login #login-form .formcontent,
body.task-login #login-form .content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Force actual form content into normal document flow */
body.task-login #login-form .propform {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Prevent Elastic from pushing fields downward */
body.task-login #login-form table,
body.task-login #login-form fieldset {
    position: static !important;
    margin: 0 !important;
}

/* Footer belongs to same card */
body.task-login #login-footer {
    position: static !important;
    width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid #dce4ed !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Overall portal spacing */
body.task-login #layout-content {
    min-height: 100vh !important;
    height: auto !important;
    padding: 40px 20px !important;
    justify-content: center !important;
}

/* Mobile */
@media (max-width: 600px) {
    body.task-login #login-form {
        width: 100% !important;
        padding: 32px 24px !important;
    }
}


/* =========================================================
   C&B FINAL LOGIN LAYOUT
   Single-card authoritative override
   ========================================================= */

body.task-login #layout-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 100vh !important;
    padding: 45px 20px 35px !important;
    box-sizing: border-box !important;
}

/* Login becomes ONE card */
body.task-login #login-form {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 440px !important;
    min-height: 0 !important;

    margin: 25px auto 0 !important;
    padding: 38px 42px 32px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
    border: 1px solid rgba(8,43,99,.08) !important;
    border-radius: 18px !important;

    box-shadow:
        0 22px 55px rgba(2,20,48,.22) !important;
}

/* Kill Roundcube internal card/wrapper behaviour */
body.task-login #login-form .box-inner,
body.task-login #login-form .boxcontent,
body.task-login #login-form .formcontent,
body.task-login #login-form .content,
body.task-login #login-form .propform,
body.task-login #login-form fieldset,
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
}

/* Remove the second white floating panel */
body.task-login #login-form .box-inner,
body.task-login #login-form .boxcontent,
body.task-login #login-form .formcontent,
body.task-login #login-form .content {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Form fields */
body.task-login #login-form .form-control {
    min-height: 54px !important;
    box-sizing: border-box !important;
}

/* Button */
body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"] {
    width: 100% !important;
    min-height: 54px !important;
    margin-top: 18px !important;
}

/* Footer/security text */
body.task-login #login-footer {
    position: static !important;
    width: 100% !important;
    margin: 22px auto 0 !important;
    padding-top: 18px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* No gigantic inherited spacing */
body.task-login #login-form .propform,
body.task-login #login-form fieldset {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

/* Desktop */
@media (min-width: 901px) {
    body.task-login #login-form {
        max-width: 440px !important;
    }
}

/* Mobile */
@media (max-width: 900px) {
    body.task-login #layout-content {
        padding: 25px 16px !important;
    }

    body.task-login #login-form {
        max-width: 420px !important;
        margin-top: 20px !important;
        padding: 32px 24px 28px !important;
    }
}


/* =========================================================
   C&B LOGIN FINAL ALIGNMENT FIX
   ========================================================= */

/* Main white portal card */
body.task-login #login-form {
    min-height: 0 !important;
    height: auto !important;
    padding: 38px 42px 34px !important;
    overflow: visible !important;
}

/* Remove ALL secondary white containers */
body.task-login #login-form .box-inner,
body.task-login #login-form .boxcontent,
body.task-login #login-form .formcontent,
body.task-login #login-form .content,
body.task-login #login-form .propform,
body.task-login #login-form fieldset {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    width: 100% !important;
    max-width: none !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Pull actual form controls upward */
body.task-login #login-form .propform,
body.task-login #login-form fieldset {
    margin: 38px 0 0 !important;
    padding: 0 !important;
}

/* Prevent inherited giant spacing */
body.task-login #login-form table {
    width: 100% !important;
    margin: 0 !important;
}

body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Fields */
body.task-login #login-form .form-control {
    width: 100% !important;
    min-height: 54px !important;
}

/* Login button */
body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"] {
    width: 100% !important;
    margin: 18px 0 0 !important;
}

/* Footer belongs inside visual flow */
body.task-login #login-footer {
    position: static !important;
    margin: 22px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid #e7edf5 !important;
}

/* Make entire portal compact */
body.task-login #layout-content {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
}


/* ==========================================================
   C&B FINAL DESKTOP POSITION FIX
   ========================================================== */

body.task-login #layout-content {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 42px 20px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* C&B branding */
body.task-login .cb-brand {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 28px auto !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
}

/* Complete white login card */
body.task-login #login-form {
    position: static !important;
    display: block !important;

    width: 100% !important;
    max-width: 440px !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 38px 40px 34px !important;

    box-sizing: border-box !important;
    transform: none !important;
}

/* Kill old nested floating/absolute positioning */
body.task-login #login-form .box-inner,
body.task-login #login-form .boxcontent,
body.task-login #login-form .formcontent,
body.task-login #login-form .content,
body.task-login #login-form fieldset,
body.task-login #login-form .propform,
body.task-login #login-form .cb-fields {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Mobile */
@media (max-width: 600px) {
    body.task-login #layout-content {
        padding: 28px 16px !important;
    }

    body.task-login #login-form {
        padding: 30px 24px !important;
    }

    body.task-login .cb-brand {
        margin-bottom: 20px !important;
    }
}


/* ==========================================================
   C&B LOGIN — MASTER LAYOUT FIX
   Actual wrapper: .cb-login-page
   ========================================================== */

html,
body.task-login {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
}

body.task-login #layout-content {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* REAL LOGIN PAGE WRAPPER */
body.task-login .cb-login-page {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 38px 20px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

/* C&B BRAND */
body.task-login .cb-login-page .cb-brand {
    position: static !important;

    display: block !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 430px !important;

    margin: 0 auto 28px auto !important;
    padding: 0 !important;

    text-align: center !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

/* LOGIN CARD — ONE WHITE BLOCK */
body.task-login .cb-login-page #login-form {
    position: static !important;

    display: block !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 38px 40px 34px !important;
    box-sizing: border-box !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    overflow: visible !important;
}

/* REMOVE ALL OLD FLOATING INNER BOX BEHAVIOUR */
body.task-login .cb-login-page #login-form .box-inner,
body.task-login .cb-login-page #login-form .boxcontent,
body.task-login .cb-login-page #login-form .formcontent,
body.task-login .cb-login-page #login-form .content,
body.task-login .cb-login-page #login-form .propform,
body.task-login .cb-login-page #login-form fieldset,
body.task-login .cb-login-page #login-form table,
body.task-login .cb-login-page #login-form tbody,
body.task-login .cb-login-page #login-form tr,
body.task-login .cb-login-page #login-form td,
body.task-login .cb-login-page #login-form .cb-fields {
    position: static !important;
    transform: none !important;
    float: none !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

/* MOBILE */
@media (max-width: 600px) {

    body.task-login .cb-login-page {
        padding: 25px 16px !important;
    }

    body.task-login .cb-login-page .cb-brand {
        margin-bottom: 20px !important;
    }

    body.task-login .cb-login-page #login-form {
        max-width: 400px !important;
        padding: 30px 24px !important;
    }
}


/* ==========================================================
   C&B LOGO VISIBILITY FIX
   ========================================================== */

body.task-login .cb-brand .cb-logo {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 8px auto !important;
    text-align: center !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 52px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    font-style: italic !important;

    opacity: 1 !important;
    visibility: visible !important;
}

body.task-login .cb-brand .cb-logo-white {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.task-login .cb-brand .cb-logo-blue {
    color: #168eea !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.task-login .cb-brand .cb-logistics {
    color: #ffffff !important;
    margin-top: 10px !important;
}

body.task-login .cb-brand .cb-tagline {
    color: #69baff !important;
}