/* ==========================================================
   ESASD AD FS Responsive Professional Theme
   PC | Mac | Chromebook | Tablet | Mobile
   ========================================================== */


/* ==========================================================
   Global Typography
   ========================================================== */

html {
    width:100%;
    height:100%;
}


body {

    min-height:100vh;

    margin:0;

    padding:0;

    font-family:
        "Segoe UI Variable",
        "Segoe UI",
        "Inter",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-weight:400;

    color:#333333;

    letter-spacing:.1px;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}



/* ==========================================================
   Background Image
   ========================================================== */

body {

    background-image:
        url("/adfs/portal/images/background.jpg");

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;

    background-attachment:fixed;

}


/* Dark overlay for readability */

body:before {

    content:"";

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.30);

    z-index:-1;

}



/* ==========================================================
   Login Container
   ========================================================== */

#content {

    width:

        min(94vw,560px);


    margin:

        clamp(20px,8vh,70px)
        auto;


    padding:

        clamp(30px,5vw,50px);


    background:

        rgba(255,255,255,.96);


    border-radius:

        14px;


    box-shadow:

        0 8px 30px rgba(0,0,0,.35);

}



/* ==========================================================
   District Name
   ========================================================== */

#companyName {

    color:#003B71;

    font-size:

        clamp(22px,3vw,32px);


    font-weight:700;

    letter-spacing:-.4px;

    line-height:1.2;

    text-align:center;

    margin-bottom:12px;

}



/* ==========================================================
   Instructions
   ========================================================== */

#loginMessage {

    color:#505050;

    font-size:

        clamp(14px,2vw,16px);


    line-height:1.6;

    text-align:center;

    max-width:360px;

    margin:

        0 auto 28px auto;

}



/* ==========================================================
   Form Labels
   ========================================================== */

label {

    display:block;

    color:#003B71;

    font-size:17px;

    font-weight:600;

    letter-spacing:.2px;

    line-height:1.4;

    margin-bottom:10px;

}



/* ==========================================================
   Username / Password Fields
   ========================================================== */


input[type="text"],
input[type="password"] {


    width:85%;


    height:56px;


    padding:

        12px 16px;


    color:#222;


    background:#fff;


    font-family:inherit;


    font-size:

        clamp(16px,2vw,18px);


    font-weight:400;


    border:

        1px solid #c8c8c8;


    border-radius:8px;


    margin-bottom:18px;


    transition:

        border-color .2s ease,
        box-shadow .2s ease;


}



input[type="text"]:focus,
input[type="password"]:focus {


    outline:none;


    border-color:#005A9C;


    box-shadow:

        0 0 0 4px rgba(0,90,156,.15);

}



/* Placeholder */

input::placeholder {

    color:#888888;

}

#userNameInput {
    height:56px !important;
    font-size:18px !important;
    width:90% !important;
}

/* ==========================================================
   Login Button
   ========================================================== */


.submit,
#submitButton {


    width:92%;


    min-height:52px;


    background:#005A9C;


    color:white;


    border:none;


    border-radius:8px;


    font-family:inherit;


    font-size:17px;


    font-weight:600;


    letter-spacing:.2px;


    cursor:pointer;


    transition:.2s ease;

}



.submit:hover,
#submitButton:hover {

    background:#0078D4;

}


.submit:active,
#submitButton:active {

    transform:scale(.98);

}

/* ==========================================================
   AD FS Cancel Button - Professional Secondary Style
   ========================================================== */


/* Cancel button */

input[type="button"],
button[type="button"],
.cancel,
#cancelButton {

    width:92%;

    min-height:52px;

    margin-top:14px;


    background:#f3f4f6;


    color:#003B71;


    border:

        1px solid #c8d2dc;


    border-radius:8px;


    font-family:inherit;


    font-size:16px;


    font-weight:600;


    letter-spacing:.2px;


    cursor:pointer;


    transition:

        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;


}


/* Cancel Hover */

input[type="button"]:hover,
button[type="button"]:hover,
.cancel:hover,
#cancelButton:hover {


    background:#e7eef5;


    border-color:#005A9C;


    box-shadow:

        0 2px 8px rgba(0,0,0,.15);


}



/* Cancel Pressed */

input[type="button"]:active,
button[type="button"]:active,
.cancel:active,
#cancelButton:active {


    transform:scale(.98);

}

/* ==========================================================
   Links
   ========================================================== */


a {

    color:#005A9C;

    font-weight:500;

    text-decoration:none;

}


a:hover {

    text-decoration:underline;

}



/* ==========================================================
   Error Messages
   ========================================================== */


.error {

    color:#B71C1C;

    font-size:14px;

    font-weight:600;

    line-height:1.5;

}



/* ==========================================================
   Footer
   ========================================================== */


#footer {

    color:white;

    text-align:center;

    font-size:13px;

    opacity:.95;

    margin-top:20px;

}



/* ==========================================================
   Chromebook / Tablet Optimization
   600px - 1024px
   ========================================================== */

@media screen and (max-width:1024px) {


    body {

        background-attachment:scroll;

    }


    #content {

        width:

            min(85vw,430px);

    }

}



/* ==========================================================
   Mobile Phones
   ========================================================== */


@media screen and (max-width:600px) {


    #content {


        width:

            calc(100vw - 30px);


        margin:

            15px auto;


        padding:

            25px 20px;


        border-radius:10px;


    }



    #companyName {

        font-size:22px;

    }



    input[type="text"],
    input[type="password"] {


        height:60px;


        font-size:18px;


    }



    .submit,
    #submitButton {


        min-height:56px;


        font-size:18px;


    }


}



/* ==========================================================
   Small Phones
   ========================================================== */

@media screen and (max-width:380px) {


    #content {

        padding:

            20px 15px;

    }


    #companyName {

        font-size:20px;

    }

}