/*
 * ==============================
 * ===     Introduction       ===
 * ==============================
 * This file affects The User Interface (email settings, etc):
 *
 * Change here *do not* affect these interface areas:
 *  - The Admininistration Interface
 *  - Webmail Lite
 *  - Tuxedo
 *
 * Each section has a number of CSS rules to affect a section of the
 * interface. Section comments include a description of the affected part
 * of the interface, and a list of what the changes in the example do.
 *
 * The code for each block is commented out so that the changes will not take
 * effect by default. To try out a rule, uncomment its section, and the
 * changes will take effect upon the next refresh of the affected web page.
 */


/*
 * ==============================
 * ===    User Interface      ===
 * ==============================
 *
 * The following settings only apply to the User Interface.
 */

/* Part 1: Customize the Login Form Title */
#login-form-table h4 {
    visibility: hidden;
    position: relative;
}
#login-form-table h4::after {
    content: 'Login to Webmail';
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 10px; /* Adjust spacing */
}

/* Part 2: Reset the main page background to plain white */
body {
    background: #FFFFFF !important;
}

/* Part 3: Remove the default background swoosh and borders */
#login-page-content-wrapper {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Part 4: Force a single-column, centered layout */
#login-page-content {
    display: block !important;
    width: 100% !important;
    max-width: 450px; /* A good width for a login form */
    margin: 40px auto !important;
    float: none !important;
    padding: 0 !important;
}

/* Part 5: Explicitly hide the left column's container */
.login-column-left {
    display: none !important;
}

/* Part 6: Make the right column (with the form) fill our container */
.login-column-right {
    width: 100% !important;
    float: none !important;
    position: static !important;
}

/* Part 7: Style the Login Form Box */
#login-form-table {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    border: 1px solid #dddddd !important;
    border: none!important;
    box-shadow: none!important;
    h4, #recover-pass-td a {
        color: #dd3333!important;
    }
}


#login-form-wrapper {
    margin: 0px auto!important;
}
.poweredBy {
    display: none!important;
}
.MagicContentTable {
    background: none;
}
#loginContentCell {
    display: none;
}
.MagicOuterTable {
    border: none;
}
.MagicCopyRight {
    display: none;
}
#company-footer, #company-footer a {
    color: #dd3333!important;
    line-height: 24px;
}

/* Adding specific styles to the login page and the authenticated page */
.magic-unauthenticated {
    display: flex!important;
    margin: auto!important;
    height: 100%!important;
    #logo_company {
        margin-bottom: 4px!important;
        img {
            width: 184px;
        }
    }
    .MagicOuterTable {
        height: 74%!important;
        margin: auto!important;
        #page_contents_row {
            height: 78%!important;
        }
    }
}
.magic-authenticated {
    #logo_company {
        position: relative;
        text-align: initial!important;
        padding-left: 76px!important;
        img {
            width: 106px;
        }
        .MagicNavTab {
            position: relative;
            bottom: -62px;
        }
    }
    .MagicOuterTable {
        #page_contents_row {
            .MagicContentTable {
                border: 1px solid #d0d0d0;
                border-bottom: 0px;
                .MagicMenuCell {
                    background: none;
                    background-color: #f3f3f4;
                }
            }
        }
    }
}