@font-face {
    font-family: 'Open Sans';
    src: url("fonts/Light/OpenSans-Light.eot?v=1.1.0");
    src: url("fonts/Light/OpenSans-Light.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("fonts/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"), url("./fonts/Light/OpenSans-Light.woff?v=1.1.0") format("woff"), url("./fonts/Light/OpenSans-Light.ttf?v=1.1.0") format("truetype"), url("./fonts/Light/OpenSans-Light.svg?v=1.1.0#Light") format("svg");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/LightItalic/OpenSans-LightItalic.eot?v=1.1.0");
    src: url("fonts/LightItalic/OpenSans-LightItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("fonts/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff"), url("./fonts/LightItalic/OpenSans-LightItalic.ttf?v=1.1.0") format("truetype"), url("./fonts/LightItalic/OpenSans-LightItalic.svg?v=1.1.0#LightItalic") format("svg");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/Regular/OpenSans-Regular.eot?v=1.1.0");
    src: url("fonts/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fonts/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("./fonts/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("./fonts/Regular/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/Italic/OpenSans-Italic.eot?v=1.1.0");
    src: url("fonts/Italic/OpenSans-Italic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("fonts/Italic/OpenSans-Italic.woff2?v=1.1.0") format("woff2"), url("./fonts/Italic/OpenSans-Italic.woff?v=1.1.0") format("woff"), url("./fonts/Italic/OpenSans-Italic.ttf?v=1.1.0") format("truetype"), url("./fonts/Italic/OpenSans-Italic.svg?v=1.1.0#Italic") format("svg");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/Semibold/OpenSans-Semibold.eot?v=1.1.0");
    src: url("fonts/Semibold/OpenSans-Semibold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fonts/Semibold/OpenSans-Semibold.woff?v=1.1.0") format("woff"), url("./fonts/Semibold/OpenSans-Semibold.ttf?v=1.1.0") format("truetype"), url("./fonts/Semibold/OpenSans-Semibold.svg?v=1.1.0#Semibold") format("svg");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/SemiboldItalic/OpenSans-SemiboldItalic.eot?v=1.1.0");
    src: url("fonts/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff?v=1.1.0") format("woff"), url("./fonts/SemiboldItalic/OpenSans-SemiboldItalic.ttf?v=1.1.0") format("truetype"), url("./fonts/SemiboldItalic/OpenSans-SemiboldItalic.svg?v=1.1.0#SemiboldItalic") format("svg");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/Bold/OpenSans-Bold.eot?v=1.1.0");
    src: url("fonts/Bold/OpenSans-Bold.eot?#iefix&v=1.1.0") format("embedded-opentype"),
         url("./fonts/Bold/OpenSans-Bold.woff?v=1.1.0") format("woff"), url("./fonts/Bold/OpenSans-Bold.ttf?v=1.1.0") format("truetype"), url("./fonts/Bold/OpenSans-Bold.svg?v=1.1.0#Bold") format("svg");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/BoldItalic/OpenSans-BoldItalic.eot?v=1.1.0");
    src: url("fonts/BoldItalic/OpenSans-BoldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("fonts/BoldItalic/OpenSans-BoldItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/BoldItalic/OpenSans-BoldItalic.woff?v=1.1.0") format("woff"), url("./fonts/BoldItalic/OpenSans-BoldItalic.ttf?v=1.1.0") format("truetype"), url("./fonts/BoldItalic/OpenSans-BoldItalic.svg?v=1.1.0#BoldItalic") format("svg");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/ExtraBold/OpenSans-ExtraBold.eot?v=1.1.0");
    src: url("fonts/ExtraBold/OpenSans-ExtraBold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("fonts/ExtraBold/OpenSans-ExtraBold.woff2?v=1.1.0") format("woff2"), url("fonts/ExtraBold/OpenSans-ExtraBold.woff?v=1.1.0") format("woff"), url("./fonts/ExtraBold/OpenSans-ExtraBold.ttf?v=1.1.0") format("truetype"), url("./fonts/ExtraBold/OpenSans-ExtraBold.svg?v=1.1.0#ExtraBold") format("svg");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url("fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?v=1.1.0");
    src: url("fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff?v=1.1.0") format("woff"), url("./fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf?v=1.1.0") format("truetype"), url("./fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg?v=1.1.0#ExtraBoldItalic") format("svg");
    font-weight: 800;
    font-style: italic;
}


body {
    font-family: 'Open Sans', sans-serif !important;
}

        ::-webkit-scrollbar {
            width: 8px;
        }

            ::-webkit-scrollbar:horizontal {
                height: 5px;
            }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
            border-radius: 8px;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: rgba(0,0,0,0.3);
        }

        body {
            overflow-x: hidden;
            margin: 0%;
            padding: 0%;
            width: 100vw;
            height: 100vh;
            font-family: 'Lato', Lato;
        }

        .wrapper {
            /*background: white;*/
        }

        .logoRow {
            margin-top: 5rem;
        }

        .formContentRow {
            height: 555px;
            font-family: Lato;
            background: white;
            box-shadow: -2px 5px 10px 0px #d4d1d1;
        }

        .formRow {
            margin-top: 1rem;
        }

        .logoImg {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        .loginBtn {
            width: 100%;
            background: #00334e;
            color: white;
        }

            .loginBtn:hover {
                color: white;
            }

            .loginBtn:focus {
                color: white;
            }

            .loginBtn:active {
                color: white;
            }

        .loginAsAdminHr {
            width: 100%;
            background: white;
            border: 2px solid #ccc;
            color: #203347;
        }

        .loginForm {
            height: 4.5rem;
            border-radius: 3px;
            margin-top: 2rem;
        }

        .thirdRow {
            position: absolute;
            bottom: 0rem;
            width: 100%;
        }

        .bottomRow {
            height: 5rem;
            background: #f1f1f1;
        }

        .forgotPassword {
            text-decoration: underline;
            line-height: 5rem;
        }

            .forgotPassword a {
                text-decoration: none;
            }

        .coloredPortion {
            height: 555px;
            background-image: url(../images/backLogin.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            font-family: lato !important;
            color: white;
        }

        .employeeSelfServiceRow {
            margin-top: 9rem;
        }

        .ess {
            font-weight: 600;
            font-size: 8rem;
            line-height: 9rem;
            font-family: 'lato';
        }

            .ess span {
                display: block;
            }

        @media (min-width:2000px) and (max-width:4000px) {
            .thirdRow {
                width: 100%;
            }
        }

        @media (max-width:1199px) {
            .thirdRow {
                width: 100%;
            }
        }

        #ForgotPassword {
            margin-top: 0rem;
            display: none;
        }

        #message {
            display: none;
            margin-top: 5rem;
        }

        .additionalText {
            font-size: 12px;
            font-variant: all-small-caps;
            color: #e63c3c;
        }
        /***************************************************************************************************/
        html, body {
            height: 100%;
        }

        body {
            background-image: url(../images/background.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        .jumbotron.vertical-center {
            margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */
            background: none !important;
        }

        .vertical-center {
            height: calc(100vh - 80px);
            /*min-height: 100%; 
            min-height: 100vh;*/
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 100%;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            overflow:auto;
        }

        .jumbotron p {
            color: #b71e1e;
            text-align: left;
            font-weight: normal;
            font-size: 16px;
        }

        #ForgotPassword span {
            text-align: left;
        }

        .footers {
            width: 100%;
            text-align: center;
        }

        .Copyright_Link {
            display: block;
            text-align: center;
            font-size: 11px;
            color: #9a9a9a;
            font-weight: 100;
            padding: 8px 0 2px;
        }

        .Copyright {
            display: block;
            text-align: center;
            font-size: 11px;
            color: #9a9a9a;
            font-weight: 100;
            padding: 0 0 2px;
        }

        .PoweredBy {
            display: block;
            text-align: center;
            font-size: 11px;
            color: #aab5b9;
            font-weight: 600;
            padding: 5px 0 0;
        }

            .PoweredBy img {
                height: 22px;
                vertical-align: middle;
                display: inline-block;
                margin: 0 3px;
            }

            .headingBox {
                background:#00334e;
                display:flex;
                justify-content:flex-start;
                align-items:center;
                padding:20px 15px;
            }
            .headingBox img {
                width:34px;
                border:2px #fff solid;
            }
            .headingBox h3 {
                color:#fff;
                margin:0px 0px 0px 15px;
                
            }

        @media (max-width:767px) and (min-width:320px) {
            .container {
                width: 100% !important;
            }
        }

        .backLogoImg {
            width: 100%;
            height: 100%;
            background-position: center !important;
            background-repeat: no-repeat !important;
            background-size: contain !important;
            background-image: url(Upload/ESSLogo/index.jpg);
        }
        .row.main {
                margin:0px !important
            }

        @media(max-width:768px) and (min-width:737px) {
          

            .formRow {
                margin-top: 2rem;
            }

            .logoImgImgContainer {
                height: 80px !important;
            }
        }

        @media (min-width:375px) and (max-width:414px) {
           
           
            .logoRow {
                margin-top: 2rem !important;
            }

            .formRow {
                margin-top: 2rem !important;
            }

            .jumbotron {
                padding-top:0px !important;
                padding-bottom: 0rem !important;
            }
            .row.main {
                margin:0px !important
            }
        }

        @media(min-width:768px) and (max-width:1023px) {
            .container {
                margin-left: 0px;
                margin-right: 0px;
            }

            .jumbotron.vertical-center {
                padding: 0rem;
            }
        }

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


            .container {
                margin-left: 0px;
                margin-right: 0px;
                padding: 0;
            }

            .jumbotron.vertical-center {
                padding: 0rem !important;

            }


            .main {
                margin: 0rem !important;
            }
            
        }
        @media  (max-device-width: 1280px) and (orientation: landscape){ 
            .vertical-center {
                height: calc(100vh - 80px);
                overflow:unset;
            }
            .jumbotron.vertical-center {
                padding: 0rem !important;

            }

        }
        @media  (max-device-width: 1280px) and (orientation: portrait) {
            .vertical-center {
                height: calc(100vh - 190px) !important;
                overflow:unset;
            }
        }
        @media  (max-device-width: 520px) and (orientation: portrait) {
            .vertical-center {
                height: calc(100vh - 130px) !important;
                overflow:unset;
            }
        }
        .loader1 {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 999999999999;
            background: url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
            background-position: center;
            background-size: 77px;
            background-repeat: no-repeat;
            opacity: .8;
            display: none;
        }

        @media (max-width:991px) {
            .formContentRow, .coloredPortion {
                height: auto;
            }

            .coloredPortion {
                padding-bottom: 25px;
            }

            .ess {
                font-weight: 600;
                font-size: 3rem;
                line-height: 0rem;
                font-family: 'lato';
            }

                .ess span {
                    display: inline-block;
                }
                .coloredPortion {
                display:none;
            }
                .thirdRow {
                    position:relative;
                    bottom:auto;
                        margin-top: 50px;
                }
            
        }