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

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

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

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

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

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

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


:root {
    --BlueColor: #040457;
    --BlueDarkColor: #1818ad;
    --BlueDarkLightColor: #11117d;
    --BlueDarkLightBorderColor: #1c1cca;
    --BlueButtonColor: #040481;
    --whiteColor: #fff;
    --BlueColor_6: rgb(15 82 186 / 6%);
    --BlueColor_2: rgb(15 82 186 / 2%);
    --BlueColor_10: rgb(15 82 186 / 10%);
    --BlueColor_14: rgb(15 82 186 / 14%);
    --BlueColor_20: rgb(15 82 186 / 20%);
    --BlueColor_5: rgb(15 82 186 / 5%);
    --BlueColor_30: rgb(15 82 186 / 30%);
    --BlueColor_70: rgb(15 82 186 / 70%);
    --selctBGColor: #c7d6ef;
    --defaultTextColor: #000;
    --ModelBackColor: rgb(4 4 87 / 80%);
    --GrayTextColor: #333;
    --defaultFontSize: 18px;
    --primaryFont: 'Montserrat', sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
    background: var(--backgroundColor);
    background: var(--defaultBackgroundColor);
    display: grid;
}

body, input, select, textarea {
    color: var(--defaultTextColor);
    font-family: var(--primaryFont);
    font-size: var(--defaultFontSize);
    font-weight: 400;
    text-rendering: optimizelegibility;
}

body, select{
    color: #666;
    font-family: var(--primaryFont);
    font-size: 15px;
    font-weight: 400;
    text-rendering: optimizelegibility;
}

.innerpagebg {
    background-image: url('../img/SH-Portal-BG.svg');
    background-size: cover;
    background-position:center;
    height: 100%;
}

.contactSupportText {
    color: rgb(255 255 255 / 84%);
    text-align: center;
    margin-bottom: 40px;
    margin-top: 70px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

.contactSupportText a {
    color: #fff;
    font-weight: 600;
}

.contactSupportText a:hover,
.contactSupportText a:focus {
    color: #ffd646;
    text-decoration: none;
}



/*.formSubmitBox {
    background: #bdc6ff;
    width: 100%;
    height: 100%;
    position: absolute;
}*/
.formSubmitBox .box-wrapper {
    margin: auto;
    margin-top: 10%;
    margin-bottom: 60px;
    width: 700px;
}

.formSubmitBox .box-wrapper h2{
    color: var(--GrayTextColor);
    margin-top:30px;
}


/* login styles */
.outer-wrapper {
    background-image: url('../img/SH-Portal-BG.svg');
    background-size: cover;
    background-position: center;
    height: 100%;
}

.box-wrapper {
    margin: auto;
    margin-top: 5%;
    margin-bottom: 50px;
    width: 430px;
}
.box-wrapper img {width:350px;margin:auto;margin-bottom:30px;height:88px;}

.signinbox {background-color:var(--whiteColor);min-height:400px;border-radius:30px;padding:50px;box-shadow:0px 0px 0px 16px #ffffff38, 0 0 0px 8px #ffffff38, 8px 8px 40px #1b53fd91}

.signinbox h1 {
    color: var(--BlueDarkColor);
    font-family: var(--primaryFont);
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    line-height: 1.2;
    margin-top: 0px;
}

.signinbox h2 {
    color: var(--BlueDarkColor);
    font-family: var(--primaryFont);
    font-size: var(--defaultFontSize);
    text-align: center;
    line-height: 1.4;
    margin-top: 0px;
    margin-bottom: 30px;
}

.signinbox h2 a{
    color: var(--BlueDarkLightBorderColor);
}

.signinbox h2 a:hover {
    color: var(--BlueDarkColor);
    text-decoration: none;
}

.signinbox h3 {color: var(--defaultTextColor);font-family: var(--primaryFont);font-size:16px;text-align:center;margin-top:30px;text-transform:uppercase;}

.signinbox h3 a {
    color: var(--BlueDarkLightBorderColor);
    font-size: 16px;
    text-align: center;
    margin-top: 30px;
    text-transform: uppercase;
    text-decoration: none;
}

.signinbox h3 a:hover,
.signinbox h3 a:focus {
    color: var(--BlueDarkColor);
}

.signinbox .form-control {
    color: var(--GrayTextColor);
    border: 1px solid var(--BlueColor_30);
    border-radius: 20px;
    height: 36px;
    font-weight: 500;
}
.signinbox .input-group .form-control:first-child {border-top-right-radius:20px;border-bottom-right-radius:20px;}

.signinbox .input-group {display:block !important;width:100%;margin-bottom:20px;}

.signinbox .checkbox { text-align: center;}

.User-datail {display:flex;color:red;font-size:22px;}

.form-control::placeholder {color:#cbcbcb;opacity:1;}

.signin-button, .signin-button:active, .signin-button:focus {
    border-radius: 30px;
    width: 100%;
    background: var(--BlueButtonColor);
    box-shadow: none;
    padding: 12px 0px !important;
    font-size: 20px;
    color: var(--whiteColor);
    text-transform: uppercase;
    outline: none;
}
.signin-button:hover {
    border-radius: 30px;
    width: 100%;
    background: var(--BlueColor);
    box-shadow: none;
    padding: 12px 10px !important;
    font-size: 20px;
    color: var(--whiteColor);
    text-transform: uppercase;
}
.signinbox .error-label {
    text-align: center;
    width: 100%;
    display: block;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 14px;
}
.reset-password-button {
    border-radius: 30px;
    width: 100%;
    background: var(--BlueButtonColor);
    box-shadow: none;
    padding: 12px 50px !important;
    font-size: 20px;
    color: var(--whiteColor);
    text-transform: uppercase;
    outline: none;
}

/*#LoginPageContent {height: calc(100% - 53px);}*/
.fixed-bottom {/*bottom:0;position:absolute;width:100%;*/}
.fixed-bottom p {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    text-align: center;
    margin: 43px 0 0 0;
    padding: 15px 0px;
}

/* inner page */

#NavigationBar {
    height: auto;background: var(--defaultBackgroundColor);border-bottom: 1px solid var(--whiteColor);box-shadow: 0px 0px 14px #8c8c8c;}


#ForgotPasswordBox .btn-primary {
    border-radius: 30px;
    width: 100%;
    background: var(--BlueButtonColor);
    box-shadow: none;
    padding: 12px 10px !important;
    font-size: 18px;
}

#ForgotPasswordBox .btn-primary:hover {
    background: var(--BlueColor);
}

#ForgotPasswordBox .alert {
    /*color: #8a3b3b;
    border: 1px solid #faebcc;*/
    border-radius: 4px;
    margin-top: 20px;
    margin-bottom: 0;
    border-radius: 10px;
    font-weight: 500;
    text-align: center;
}

#ResetPasswordModal .close {
    color: var(--whiteColor);
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=40);
    opacity: 0.4;
    background: var(--BlueColor);
    font-size: 35px;
    width: 35px;
    height: 35px;
    border-radius: 50px;
    text-shadow: none;
    margin: 0;
    position: absolute;
    right: 15px;
    top: 15px;
}

#ResetPasswordModal .close:hover,
#ResetPasswordModal .close:focus {
    opacity: 0.6;
}

#ForgotPasswordBox .input-group {
    display: block !important;
    width: 100%;
    margin-bottom: 20px;
}

.thankyoubox {
    background-color: var(--BlueColor_14);
    height: auto;
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 0 0px 15px var(--BlueColor_5) !important;
}
    .thankyoubox h1 {
        color: var(--BlueColor);
        font-family: var(--primaryFont);
        font-size: 30px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
        margin-top: 0px;
    }

.thankyoubox h2 {color: var(--GrayTextColor);font-family: var(--primaryFont);font-size: var(--defaultFontSize);text-align:center;line-height:1.4;margin-top:0px;margin-bottom:30px;}


/*****************/

.outer-wrapper form#form1 {
    height: 100%;
    width: 100%;
    display: table;
}

.outer-wrapper form#form1 .body-content {
    display: table-row;
    height: 100%;
    width: 100%;
}

.outer-wrapper form#form1 .fixed-bottom {
    display: table-row;
    /*background: rgb(0 0 0 / 5%);*/
    position: relative;
}

.outer-wrapper form#form1 .fixed-bottom p {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    text-align: center;
    margin: 0;
    padding: 15px 0px;
}

#OperatoryScreenVideoBox {
    background-color: var(--whiteColor);
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0px 0px 0px 16px #ffffff38, 0 0 0px 8px #ffffff38, 8px 8px 40px #1b53fd91;
    margin-top: 8%;
}

#OperatoryScreenVideoBox iframe {
    border-radius: 14px;
}

#OperatoryScreenVideoBox .alert {
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 0;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
}

#SharedPEVideoBox {
    background-color: var(--whiteColor);
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0px 0px 0px 16px #ffffff38, 0 0 0px 8px #ffffff38, 8px 8px 40px #1b53fd91;
    margin-top: 8%;
}

#SharedPEVideoBox .alert {
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 0;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
}

.SharedPEVideoPlaceHolder {
    background-color: var(--whiteColor);
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0px 0px 0px 16px #ffffff38, 0 0 0px 8px #ffffff38, 8px 8px 40px #1b53fd91;
    margin-top: 8%;
}

.SharedPEVideoPlaceHolder h1 {
    text-align: center;
    margin: 0 0 30px;
    font-size: 26px;
    font-weight: 600;
    color: var(--BlueColor);
    /*background: -moz-linear-gradient(top, rgba(255,174,0,1) 0%, rgba(241,133,51,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,174,0,1) 0%,rgba(241,133,51,1) 100%);
    background: linear-gradient(to bottom, rgba(255,174,0,1) 0%,rgba(241,133,51,1) 100%);
    background-clip: border-box;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffae00', endColorstr='#f18533',GradientType=0 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
}

.SharedPEVideoPlaceHolder video {
    background: #ccc;
    border-radius: 10px;
}

.SharedPEVideoPlaceHolder .plyr__poster {
    background: url(../img/ssi-logo-video-bg.svg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    left: 0;
    opacity: 0.06;
    position: absolute;
    top: 0;
    transition: opacity .2s ease;
    width: 100%;
    z-index: 1;
}


#RaveBox {
    background-color: var(--whiteColor);
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0px 0px 0px 16px #ffffff38, 0 0 0px 8px #ffffff38, 8px 8px 40px #1b53fd91;
    margin-top: 8%;
}

#RaveBox iframe {
    border-radius: 14px;
}

#RaveBox .alert {
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 0;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
}



@media (max-width: 359.98px) {
    .container {
        width: calc(100% - 30px);
    }

    .outer-wrapper {
        background-image: url('../img/SH-Portal-BG-576.svg');
    }

    .box-wrapper {
        width: 100%;
    }


        .box-wrapper img {
            width: 260px;
            height: 65px;
        }

    .signinbox {
        padding: 20px;
    }

        .signinbox h1 {
            font-size: 28px;
        }

        .signinbox h2 {
            font-size: 16px;
        }

    .modal-dialog {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    .modal-content {
        padding: 20px;
        box-shadow: 0 0 0px 12px rgb(255 255 255 / 40%), 0px 0px 80px rgb(27 83 253 / 57%);
    }

    .modal-title {
        font-size: 33px;
    }

    .modal-header {
        padding: 0;
        padding-right: 25px;
    }

    .modal-body {
        padding: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #ForgotPasswordBox .btn-primary {
        font-size: 16px;
        white-space: pre-line;
    }

    #ResetPasswordModal .close {
        font-size: 31px;
        width: 30px;
        height: 30px;
        right: 10px;
        top: 10px;
    }

    .formSubmitBox .box-wrapper {
        width: calc(100% - 40px);
    }

    .thankyoubox {
        padding: 20px;
    }
    #OperatoryScreenVideoBox {
        margin-top: 10%;
    }

    .SharedPEVideoPlaceHolder {
        padding: 20px;
        margin-top: 20%;
    }

    .SharedPEVideoPlaceHolder h1 {
        font-size: 22px;
    }

    #RaveBox {
        padding: 10px;
        border-radius: 22px;
        margin-top: 10%;
    }
}

@media (min-width: 360px) and (max-width: 575.98px) {
    .container {
        width: 330px;
    }

    .outer-wrapper {
        background-image: url('../img/SH-Portal-BG-576.svg');
    }

    .box-wrapper {
        width: 100%;
    }

    .box-wrapper img {
        width: 300px;
        height: 75px;
    }

    .signinbox {
        padding: 20px;
    }

    .signinbox h1 {
        font-size: 28px;
    }

    .signinbox h2 {
        font-size: 16px;
    }

    .modal-dialog {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .modal-content {
        padding: 20px;
        box-shadow: 0 0 0px 15px rgb(255 255 255 / 40%), 0px 0px 80px rgb(27 83 253 / 57%);
    }

    .modal-title {
        font-size: 33px;
    }

    .modal-header {
        padding: 0;
        padding-right: 25px;
    }

    .modal-body {
        padding: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #ForgotPasswordBox .btn-primary {
        font-size: 16px;
        white-space: pre-line;
    }

    #ResetPasswordModal .close {
        font-size: 31px;
        width: 30px;
        height: 30px;
        right: 10px;
        top: 10px;
    }

    .formSubmitBox .box-wrapper {
        width: 300px;
    }

    .thankyoubox {
        padding: 20px;
    }
    #OperatoryScreenVideoBox {
        margin-top: 10%;
    }
    .SharedPEVideoPlaceHolder {
        padding: 20px;
        margin-top: 20%;
    }

    .SharedPEVideoPlaceHolder h1 {
        font-size: 22px;
    }

    #RaveBox {
        padding: 10px;
        border-radius: 22px;
        margin-top: 10%;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        width: 540px;
    }

    .outer-wrapper {
        background-image: url('../img/SH-Portal-BG-767.svg');
    }

    .modal-dialog {
        width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .modal-content {
        padding: 20px;
    }

    .modal-title {
        font-size: 36px;
    }

    .formSubmitBox .box-wrapper {
        width: 500px;
    }

    .thankyoubox {
        padding: 30px;
    }

    .SharedPEVideoPlaceHolder {
        margin-top: 10%;
    }

    .SharedPEVideoPlaceHolder h1 {
        font-size: 26px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .outer-wrapper {
        background-image: url('../img/SH-Portal-BG-991.svg');
    }

    .formSubmitBox .box-wrapper {
        width: 600px;
    }
    .SharedPEVideoPlaceHolder h1 {
        font-size: 32px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .outer-wrapper {
        background-image: url('../img/SH-Portal-BG-1199.svg');
    }
}