/* oxygen-regular - latin */
@font-face {
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/oxygen-v9-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Oxygen Regular'), local('Oxygen-Regular'), url('../fonts/oxygen-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/oxygen-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/oxygen-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/oxygen-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/oxygen-v9-latin-regular.svg#Oxygen') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Alatsi';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/alatsi-v2-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Alatsi Regular'), local('Alatsi-Regular'), url('../fonts/alatsi-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/alatsi-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/alatsi-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/alatsi-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/alatsi-v2-latin-regular.svg#Alatsi') format('svg'); /* Legacy iOS */
}

/* alata-regular - latin */
@font-face {
    font-family: 'Alata';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/alata-v2-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Alata Regular'), local('Alata-Regular'), url('../fonts/alata-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/alata-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/alata-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/alata-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/alata-v2-latin-regular.svg#Alata') format('svg'); /* Legacy iOS */
}


html {
}

.row {
    margin-right: 0px !important;
}

.loginbody {
    /*background: rgb(235,129,23);
    background: linear-gradient(158deg, rgba(235,129,23,1) 14%, rgba(3,108,140,1) 14%, rgba(3,108,140,1) 84%, rgba(235,129,23,1) 84%);
    background-repeat: no-repeat;
    width: 100% !important;
    background-position-y: top;
    height: 100vh !important;
    overflow: hidden !important;*/
    background: url(../Images/bg-1.png);
    font-family: Oxygen !important;
    background-repeat: no-repeat;
    background-size: 100% 100vh;
    overflow-y:scroll;
}

.d1 {
    margin-right: 0px !important;
}

.login-form-style {
    /*background: #ffffffc7;*/
    margin-top: 2%;
    border-radius: 12px;
    /*box-shadow: 10px 0px 25px 0px;*/
}

.login-bg {
    background-image: url('../Images/Common1.jpg');
    height: 100% !important;
    background-size: cover;
    background-repeat: no-repeat;
}

.logo {
    width: 65%;
    margin-top: 16%;
}


/*.form-control {
    margin:0px 50px 0px 50px;

}*/

.test {
    /*margin:10%;*/
}

#txtUsername {
    /*border-radius: 100px;*/
    font-family: Oxygen;
    border-radius: 50px !important;
}

#txtpassword {
    /*border-radius: 100px;*/
    font-family: Oxygen;
    border-radius: 50px !important;
}

.username {
    width: 85% !important;
    background-color: #fff;
    border-bottom: #e37235 solid 1px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 1px;
    border-radius: 100px;
    font-family: Oxygen;
}

.loginlabel {
    color: white;
    margin-bottom: 0px !important;
    font-family: Oxygen;
    margin-top: 7%;
}

.header-title {
    margin-top: 2%;
    margin-bottom: 8%;
    color: white;
    text-align: center;
    font-family: alata;
    font-size: 24px;
}

.title {
    color: white;
    font-weight: 500;
    margin-top: 5%;
    margin-bottom: 5px !important;
    margin-left: 37px;
    font-family: Oxygen;
    font-size: 15px;
}

.btn-log {
    color: rgb(255, 255, 255);
    border-radius: 50px !important;
    min-width: 130px !important;
    font-size: 18px;
    font-weight: 500;
    background: rgb(240,113,53);
    background: linear-gradient(90deg, rgb(142, 17, 5) 43%, rgb(183, 45, 34) 100%) !important;
    border-color: white !important;
    border-width: 1px !important;
    padding: 3px;
    margin-top: 20px;
    cursor: pointer;
    border: 1px solid white;
    font-weight: 600 !important;
}

    .btn-log:hover {
        background: linear-gradient(90deg, rgb(183, 45, 34) 43%,rgb(142, 17, 5) 100%) !important;
    }

.form-wrapper {
    height: 100%;
}

.loginform h3 {
    color: #e1f8ff;
    font-style: italic;
    font-size: 25px;
    margin-bottom: 5px;
}

.loginform hr {
    border-top: 1px solid #e1f8ff;
}

.loginform {
    /*background: linear-gradient(300deg, #000046, #1CB5E0);*/
    /*background: #BD1716;*/
    /*width: 400px !important;*/
    float: right;
    /*height: 680px;*/
    padding: 0px;
    position: relative;
}

    .loginform .general-input-wrap {
        border: 0px solid #0c3e63;
        border-radius: 3px 4px;
        position: relative;
        padding: 5px 5px 5px 45px;
        background: linear-gradient(-90deg, #1CB5E0 50%, #0a417d 100%);
        margin-bottom: 15px;
    }

    .loginform .input-types-wrapper {
        height: 235px;
        margin-top: 40%;
    }

    .loginform .general-input-wrap input {
        font-style: italic;
        background: #e1f8ff;
        color: #0a437f;
        font-size: 17px;
        border: 0;
        outline: none;
        box-shadow: none;
    }

        .loginform .general-input-wrap input:focus {
            box-shadow: none;
            border: 0;
        }

    .loginform .general-input-wrap .fa {
        font-size: 24px;
        color: #73e0ff;
        position: absolute;
        left: 13px;
        top: 10px;
    }

}

.saleforce {
    margin: auto 0 !important;
    height: 680px;
    /*width: calc(100% - 400px) !important;*/
}

.sales-force-logo {
    width: 18%;
    position: fixed;
    bottom: 35%;
    left: 16%;
}

.angled-shape {
    position: fixed;
    top: 0;
    left: -250px;
}




.logo-text {
    position: absolute;
    top: 570px !important;
    left: 21%;
    margin: 0 auto !important;
    width: 58%;
}


.clouds {
    padding: 0px !important;
    margin-left: -15px !important;
    width: 100% !important;
    position: absolute;
    bottom: 0px !important;
    top: -14px;
    opacity: 1 !important;
}

.D1 {
    padding: 0px !important;
    margin-left: -15px !important;
    width: 100% !important;
    position: absolute;
    bottom: 0px !important;
    top: 0px;
    opacity: 1 !important;
}

.D2 {
    padding: 0px !important;
    margin-left: -15px !important;
    width: 100% !important;
    position: absolute;
    bottom: 0px !important;
    top: 0px;
    opacity: 1 !important;
}

.D3 {
    padding: 0px !important;
    margin-left: -15px !important;
    width: 100% !important;
    position: absolute;
    bottom: 0px !important;
    top: 0px;
    opacity: 1 !important;
}

.D4 {
    padding: 0px !important;
    margin-left: -15px !important;
    width: 100% !important;
    position: absolute;
    bottom: 0px !important;
    top: 0px;
    opacity: 1 !important;
}

.D5 {
    padding: 0px !important;
    margin-left: -15px !important;
    width: 100% !important;
    position: absolute;
    bottom: 0px !important;
    top: 0px;
    opacity: 1 !important;
}


em {
    font-style: normal;
    color: #e4051f;
}



.button-general-login {
    background: #0a447f !important;
    color: #baf0ff !important;
    font-weight: 500;
    border: 1px solid #73e0ff !important;
    padding: 8px 23px;
    border-radius: 3px 4px;
}

    .button-general-login:hover {
        background: #168cbd !important;
        color: white !important;
        border: 1px solid white !important;
        padding: 8px 23px;
        border-radius: 3px 4px;
    }


.footer {
    text-align: center;
    bottom: 0;
    margin-top: 13%;
    margin-bottom: 10px;
    color: white !important;
    height: 30px;
    font-size: 0.8em;
    font-weight: 500;
    font-family: Oxygen;
}

    .footer a {
        color: #ffbf7a;
        font-weight: 600;
    }

        .footer a:hover {
            color: #cb7a07;
            text-decoration: none;
        }

    .footer p {
        margin-top: 0px;
        margin-bottom: 10px;
    }



.company {
    font-family: 'Segoe UI';
    font-size: 1.5em;
    color: #064884;
    text-align: center;
    clear: both;
    font-weight: 700;
}


.textshadow {
    text-shadow: 1px 1px 4px #000;
}



@media only screen and (max-device-width : 1366px) and (max-device-height:768px) {
    .angled-shape {
        left: -11%;
    }

    .sales-force-logo {
        width: 18%;
        top: 40%;
        left: 19%;
    }

    .loginform .input-types-wrapper {
        margin-top: 20%;
        width: 100% !important;
    }
}

@media only screen and (max-device-width : 1280px) and (max-device-height: 800px) {
    .angled-shape {
        left: -11.5%;
    }

    .sales-force-logo {
        width: 18%;
        top: 40%;
        left: 19%;
    }

    .loginform .input-types-wrapper {
        margin-top: 50%;
        width: 100% !important;
    }
}

@media only screen and (max-device-width : 1280px) and (max-device-height: 720px) {
    .angled-shape {
        left: -13%;
    }

    .sales-force-logo {
        width: 18%;
        top: 40%;
        left: 19%;
    }

    .loginform .input-types-wrapper {
        margin-top: 40%;
    }
}

@media only screen and (max-device-width : 1024px) and (max-device-height: 768px) {
    .angled-shape {
        left: -26%;
    }

    .sales-force-logo {
        margin: 0 auto !important;
        /*width: 19%;
        top: 40%;
        left: 16%;*/
    }

    .scroll {
        overflow-y: scroll;
    }

    .saleforce {
        height: 500px !important;
    }

    .loginform {
        width: 100% !important;
    }

    .logo {
        width: 90%;
    }

    .scroll {
        overflow-y: scroll;
    }

    .clouds {
        display: none;
    }



    .loginform .input-types-wrapper {
        margin-top: 1%;
    }
}

@media only screen and (max-device-width : 1024px) {
    .angled-shape {
        left: -28%;
    }

    .scroll {
        overflow-y: scroll;
    }

    .sales-force-logo {
        width: 20%;
        top: 40%;
        left: 16%;
    }

    .loginform {
        width: 100% !important;
    }

        .loginform .input-types-wrapper {
            margin-top: 30%;
        }
}

@media only screen and (max-device-width : 960px) and (max-device-height: 600px) {
    .angled-shape {
        left: -32%;
    }

    .saleforce {
        height: 250px !important;
    }

    .sales-force-logo {
        width: 20%;
        top: 40%;
        left: 16%;
    }

    .logo {
        width: 90%;
    }

    .scroll {
        overflow-y: scroll;
    }

    .loginform {
        width: 100% !important;
        height: 500px;
    }

        .loginform .input-types-wrapper {
            margin-top: 2%;
        }

    .copyright {
        position: relative;
    }
}

@media only screen and (max-device-width : 960px) {
    .angled-shape {
        left: -32%;
    }

    .saleforce {
        height: 630px !important;
    }

    .sales-force-logo {
        width: 20%;
        top: 40%;
        left: 16%;
    }

    .logo {
        width: 90%;
    }

    .scroll {
        overflow-y: scroll;
    }

    .loginform {
        width: 100% !important;
        height: 500px;
    }

        .loginform .input-types-wrapper {
            margin-top: 2%;
        }

    .copyright {
        position: relative;
    }
}

@media only screen and (max-width: 376px) {
    .loginbody {
        background: rgb(196,49,36);
        background: linear-gradient(45deg, rgba(196,49,36,1) 0%, rgb(26, 2, 0) 100%);
        background-repeat: no-repeat;
        background-size: 100vh 100vh;
    }

    .circle {
        display:none !important;
    }
}