:root {
    --LogoHeight:1.5rem;
    --hambugerWidth:25px;
    --yellow_100: #FFC000;
    --green_100:#00935C;
    --white:#fff;
    --black: #000;
    --gray_100: #34414C;
    --gray_75: #495A66;
    --gray_50: #747F8A;
     --gray_35: #CCCFD4;
    --gray_25: #ECEEF0;
    --inputBorder: 1px solid #A2AAAD;
    --pageHeading: 40px;
     --titleHeading: 28px;
    --font14:13px;
    --font14Color: #000;
    --allHeadingColor:#fff;
    --blue_100:#0581BF;
    --blue_75:#29AAE1;
    --blue_50:#00C0F3;
    --blue_25:#8CD5F6;
    --blue_light:#C5E7F9;
    --font18:16px;
    --btnTableText:13px;
    --fontWeight:bold;
    --semiFontWeight:semibold;
    --radius5: 5px; 
    --blueBtnPadding: 6px 28px;
    --headerText: 14px;
    --headerIconsSize:18px;
    --card_radius:10px;
    --input_placeholder_color: #737F8B;
    --font16: 14px;
    --font12: 12px;
    --btnIcon: 16px;
    --blackBtnBorder: 1px solid var(--gray_100);
    --blue_gradient: linear-gradient(110deg, var(--blue_50), var(--blue_100));
    --blue_btn_shodow : 0 8px 15px rgba(0,192,243,0.4);
    --black_btn_shodow : 0 8px 15px rgba(0,0,0,0.3);
    
}
@font-face {
    font-family: 'EBGaramond-Regular';
    src: url('../fonts/EB_Garamond/EBGaramond-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'EBGaramond-SemiBold';
    src: url('../fonts/EB_Garamond/EBGaramond-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'EBGaramond-Bold';
    src: url('../fonts/EB_Garamond/EBGaramond-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Sarabun-Regular';
    src: url('../fonts/Sarabun/Sarabun-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Sarabun-SemiBold';
    src: url('../fonts/Sarabun/Sarabun-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Sarabun-Bold';
    src: url('../fonts/Sarabun/Sarabun-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Sarabun-MediumItalic';
    src: url('../fonts/Sara bun/Sarabun-MediumItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'Sarabun-Medium';
    src: url('../fonts/Sarabun/Sarabun-Medium.ttf') format('truetype');
}
body{
    font-size:var(--font14);
    color: var(--black);
    font-family: Sarabun-Regular;
   
}
 .mainContent{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}
.setContent{
    flex:1;
}
html, body{
    height:100%;
}

.custom-tooltip{
    --bs-tooltip-bg: var(--white);
    --bs-tooltip-color: var(--black);
    opacity:1 !important;
}
.toast{
    opacity:1 !important;
}
label sup{
    color: rgb(203, 51, 59);
    font-size:16px;
    position:absolute;
    top:10%;
}
.blueBtn{
    font-size:var(--font18);
    color: var(--white);
    padding:var(--blueBtnPadding);
    background-image: var(--blue_gradient);
    border-radius: var(--radius5);
   display:flex;
   justify-content:center;
   align-items:center;
   font-family:Sarabun-Medium;
    transition:0.2s ease;
    -webkit-transition: 0.2s ease;
    -moz-transition:0.2s ease;
}
.blueBtn:hover{
 box-shadow: var(--blue_btn_shodow);

}
.blueBtn span, .blackBtn span{
    padding-bottom:2px;
}
.blackBtn{
    font-size:var(--font18);
    color: var(--gray_100);
    padding:var(--blueBtnPadding);
    background-color: var(--white);
    border-radius: var(--radius5);
    border: var(--blackBtnBorder);
    display:flex;
   justify-content:center;
   align-items:center;
   font-family:Sarabun-Medium;
    transition:0.2s ease;
    -webkit-transition: 0.2s ease;
    -moz-transition:0.2s ease;
}
    .blackBtn:hover {
        box-shadow: var(--black_btn_shodow);
    }
    .blackBtn2:hover {
        box-shadow:  0 8px 15px rgba(255,255,255,0.3) ;
    }


.backgroundBlack{
    background-color:var(--black);
    color:var(--white)
}
.btnIcon{
    height:var(--btnIcon);
    width:auto;
    margin-left:0.5rem;
}
.btnIconBack{
    height:var(--btnIcon);
    width:auto;
    margin-right:0.5rem;
}
.text-white{
   color:var(-white);
}
.container-fluid{
    padding: 0 1.5rem;
}
.backBtn{
    font-family:Sarabun-Medium;
    border-radius:0 0 5px 5px;
    background:var(--white);
   padding:5px 12px;
   cursor:pointer;
}

::placeholder{
    color: var(--input_placeholder_color);
}
::-ms-input-placeholder{
    color:var(--input_placeholder_color);
}
.backBtnArrow{
    height:10px;
    fill:var(--black);
    margin-right:5px;
}

.pageHeading{
    font-family:EBGaramond-SemiBold;
    font-size: var(--pageHeading);
    color:var(--white);
}
.headingLine {
    height: 3px;
    width: 80px;
    background-color: var(--blue_75);
    margin: 0.8rem auto auto;
}
.backgroundWhite{
    background-color:var(--white);
}
.cardStyle{
    padding:1.5rem;
    border-radius:var(--card_radius);
}

.defaultLabel{
    font-family:Sarabun-SemiBold;
    display:grid;
    font-size:var(--font16);
}
.defaultInputBox{
    padding:8px;
    border-radius:var(--radius5);
    border:var(--inputBorder);
    margin-top:5px;
    font-family: Sarabun-Regular;
    font-size:var(--font14)
}
.defaultInputBox:focus {
    border-color: var(--gray_100);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(52, 65, 76, .25);
}
.flexClass{
    display:flex;
    justify-content:center;
    align-items:center;
}
.cardPadding{
   padding:1.5rem;
}
/*Login Page CSS started*/
.loginBg{
    background: url(../images/login_bg.jpg) no-repeat;
     background-size: cover;
     min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.loginContainer{
    width:480px;
    background-color:#000;
    border-radius:10px;
    text-align:center;
    padding:1.75rem 2.5rem;
}
.loginLogo{
    height:3.5rem;
    width:auto;
}
.welcomeText{
    color:var(--blue_75);
    font-family:EBGaramond-SemiBold;
    font-size:26px;
}
.loginLabel{
    font-family:Sarabun-SemiBold;
    display:grid;
    font-size:var(--font16);
    color:var(--white);
    position:relative;
}
.fpOtp label{
     font-family:Sarabun-SemiBold;
    display:grid;
    font-size:var(--font16);
    color:var(--white);
    margin-bottom:1rem;
    text-align:left;
    position:relative;
}
.loginInputBox{
     padding:8px;
    border-radius:var(--radius5);
    border:var(--inputBorder);
    margin-top:5px;
    font-family: Sarabun-Regular;
    font-size:var(--font14)
}
.loginInputBox:focus{
     border-color: var(--white);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255,255,255, .25);
}
.eyeBtn{
    position:absolute;
    height: 14px;
    right: 4%;
    bottom: 18%;
    cursor:pointer;
}
#liEmpDOB{
    position:relative;
}
.absoluteIcons{
     position:absolute;
    height: 16px;
    right: 4%;
    bottom: 15%;
}
.loginLinks{
    font-family:Sarabun-SemiBold;
    font-size:var(--font16);
    color:var(--blue_75);
    text-decoration:underline;
    margin-top:1rem;
}
.loginLinksShow{
     font-family:Sarabun-SemiBold;
    font-size:var(--font16);
    color:var(--blue_75);
    text-decoration:underline;
    margin-top:0.3rem;
}
.resendOTP{
     font-family:Sarabun-SemiBold;
    font-size:var(--font16);
    color:var(--blue_75) !important;
    text-decoration:underline;
    margin-top:0.3rem;
    /*color:var(--white);*/

}
.loginLinks2{
    color:var(--blue_75);
    text-decoration:underline;
}
a{
    text-decoration:none;
}
.labelValue{
    font-size:var(--font14);
    color:var(--gray_50);
    word-break:break-word;
    font-family:Sarabun-Medium;
}
.loginInfoBtn{
    height:20px;
    width:auto;
    cursor:pointer;
}
.policyText{
    color:var(--gray_35);
}
.linksParent{
    display:flex;
    justify-content:space-between;
}
/*custom checkbox css start*/
.customCheckbox{
    position:relative;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    padding-left:25px;
    display:block;
}
.customCheckbox input{
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0;
}
.checkmark{
    position:absolute;
    top:1px;
    left:0;
    height:18px;
    width:18px;
    border:1px solid var(--blue_75);
    border-radius:3px;
}
.customCheckbox:hover input~ .checkmark{
    background-color:var(--gray_75);
}
.customCheckbox input:checked ~ .checkmark{
background-color:var(--blue_75);
}
.checkmark:after{
    content:"";
    position:absolute;
    display:none;
}
.customCheckbox input:checked ~ .checkmark:after{
    display:block;
}
.customCheckbox .checkmark:after{
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid var(--white);
    border-width: 0 2px 2px 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
   transform:rotate(45deg);
}
/*custom checkbox css end*/
@media screen and (max-width:575px){
    .loginContainer{
        width:auto;
        padding:1rem 1.5rem;
        margin:1rem;
        
    }
    .loginBg{
        background-position:center;
    }
}
@media screen and (max-width:950px) and (max-height:450px){
   footer{
    position:initial !important;
    transform:none !important ;
    -webkit-transform:none !important;
    -moz-transform:none !important;
    margin:1rem 0;
}
   .loginContainer{
       margin-top:1rem;
   }
}
/*Login Page CSS ended*/
/*Header Control and Breadcrumbs CSS Started*/
.headerControl{
    background-color:var(--black);   
    border-bottom:1px solid var(--gray_50);
    transition:0.2s ease;
    -webkit-transition: 0.2s ease;
    -moz-transition:0.2s ease;
    color:var(--white)
}
.headerIcons{
     height:var(--headerIconsSize);
      fill:var(--blue_100);
}

.headerIconBg{
    height:30px;
    width:30px;
    padding:5px;
    display:block;
    border-radius:50%;
    background-color:var(--white);
    display:flex;
    justify-content:center;
    align-items:center;
}
.headerOptions{
    font-size:var(--font14);
    color:var(--white);
    font-family: Sarabun-Medium;
    border:none;
    background:none;
    outline:none;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}
.headerArrow{
    height:8px;
    width:auto;
    margin-left:5px;
}
.headerMenuOptions{
    background-color:var(--white);
    border-radius:var(--radius5);
    position:absolute;
    top: 111%;
    left:0;
    padding:0;
    width:max-content;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    display:none;
}
.headerLinks:hover .headerMenuOptions{
    display:block;
}
.headerMenuOptions li{
    list-style:none;
    padding:0.5rem 1rem;
    font-family:Sarabun-Medium;
      transition:0.1s ease;
    -webkit-transition: 0.1s ease;
    -moz-transition:0.1s ease;
    border-bottom: 1px solid #CCCFD4;
}
.headerMenuOptions li a{
    color:var(--black);
}
.headerMenuOptions li:first-child{
   border-radius:5px 5px 0 0;
}
.headerMenuOptions li:last-child{
   border-radius:0 0 5px 5px;
   border-bottom:none;
}
.headerMenuOptions li:hover{
   background-color:rgba(236,237,238, 1) !important;  
}
.headerLinks{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.hamStyle{
    cursor:pointer;
    height:16px;
}
.headerLogo{
    height:45px;
    width:auto;
    margin:auto;
    display:block;
}
.headerLogo2{
    height:45px;
    width:auto;
   
}
.headerRight{
    gap:1.5rem;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
.breadCrumbs{
    background-color:var(--gray_75);
    border-radius: 0 0 5px 5px;
    padding:5px 12px;
    display:flex;
    color:var(--white);
}
.breadCrumbs a{
    margin:0 7px;
    color:var(--white);
}
.breadCrumbs a:last-child{
    pointer-events:none;
}
.homeParent svg{
    vertical-align:text-top;
}
.homeIcon{
    height:var(--font14);
    width:auto;
    fill:var(--white);
}
.topHeader{
    display:flex;
    justify-content:space-between;

}
.msgDot{
    height:10px;
    width:10px;
    border-radius:50%;
    background-color:rgb(203, 51, 59);
    position:absolute;
    top:0;
    right:0%;
}
.stickyheader{
    position:sticky;
    top:0;
    left:0;
    z-index:998;
}
.backdropFilter{
    backdrop-filter:blur(15px);
    background-color:rgba(0,0,0,0.7);
}
@media screen and (max-width:1199px){
    .headerOptions{
        display:none;
    }
   
    .headerLogo{
        margin-right:0;
    }
}
@media screen and (max-width:767px){
    .headerRight{
          justify-content:center;
        background-color:var(--gray_100);
        border-radius:var(--radius5)
    }
}
@media screen and (max-width:950px) and (max-height:450px){
    .hamScroll{
        height:52vh;
    }
}
/*Header Control and Breadcrumbs CSS ended*/

/*Change Password Page CSS started*/
.changePassBg{
    background: url(../images/change_pass_bg.png) no-repeat;
     background-size: cover;
}
.commonHeading{
    padding-bottom:1.5rem;
}
.tickMark{
     height :16px;
    width:16px; 
    margin-right:10px; 
    background-color:var(--blue_75);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.tickImg{

}
.changePassGuide{ 
    margin-bottom:0.8rem;
    display:flex; 
}
.guidelineHeading{
    font-family:EBGaramond-SemiBold;
    font-size:22px;
    margin-bottom:1rem;
}
.changePassRight{
    background:url(../images/chang_pass_right.jpg) no-repeat;
    background-size:cover;
    border-radius: var(--card_radius);
}
/*Change Password Page CSS Ended*/
/*Login Footer CSS Start*/
.footer-logo {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    /*'Added by shubham P And prakash on 14/05/2025*/
    font-size: 12px;
    flex-direction: column;
    align-items: center;
    color: var(--white);
    /*'Added by shubham P And prakash on 14/05/2025*/
}
.footer-logo img{
    height:35px;
    width:auto;
}
/*Login Footer CSS Ended*/
/*Privacy Policy page css start*/
.prPolicyBg{
    background: url(../images/pri_policy_bg.png) no-repeat;
    background-size:cover;
    padding:1.5rem;
}
.prHeadingText {
            font-size: 22px;
            font-family:EBGaramond-SemiBold;
            color: var(--blue_100);
        }

        .prHeadingText2 {
            font-family:Sarabun-SemiBold;
        }

        .privacyContent ul li {
            list-style: inside;
            margin-bottom: 10px;
        }
        .prImgCard{
            display:flex;
            justify-content:flex-end;
            align-items:center;
        }
        .prContent{
            padding:0 1rem; 
        }
        .prImg{
             height:auto;
             max-width:100%;
             width:96%;
        }
        .prloginBtn{
            font-size:var(--font16);
            font-family:Sarabun-SemiBold;
            color:var(--black);
            background-color:var(--white);
            padding:0.5rem 1rem;
            border-radius:25px;
             display:flex;
            justify-content:center;
            align-items:center;
             transition:0.2s ease;
    -webkit-transition: 0.2s ease;
    -moz-transition:0.2s ease;
        }
        .prloginBtn:hover .prLogin{
            fill:var(--white);
        }
        .prloginBtn:hover{
             color:var(--white);
            background-color:var(--blue_75);
        }
        .prLogin{
            height:16px;
            width:auto;
            fill:var(--blue_75);
             transition:0.2s ease all;
    -webkit-transition: 0.2s ease all;
    -moz-transition:0.2s ease all;
        }
          @media screen and (max-width:767px){ 
            .loginBtn{
                display:none;
            }
        }
        
 /*Privacy Policy page css End*/
 /*Footer CSS Start*/
.footer{
    background-color:var(--black);
    padding: 0.5rem 2.5rem;
    border-top:1px solid var(--gray_50);
}
.footerLogo{
    height:80px;
    width:auto;
}
.footerLinks{
    display:flex;
    justify-content:flex-start;
    align-items:center;
}
.footerLinks a{
    color:var(--blue_25);
    font-size:var(--font14);
    font-family:Sarabun-Medium;

}
.footerLinks a span{
    text-decoration:underline;
    margin-right:5px;
}
.footerVrLine{
    height:80%;
    border-right:1px solid var(--white);
    margin:1rem 2rem;

}
.footerLogoText{
    font-size:var(--font18);
    font-family:Sarabun-SemiBold;
    color:var(--white);
}
.footer address{
    color:var(--white);
    font-size:var(--font12);
    word-break:break-word;
}
.footer p{
    margin-bottom:0;
}
.footerAnchor, .footerLinkArrow{
    transition:0.2s ease all;
    -webkit-transition: 0.2s ease all;
    -moz-transition:0.2s ease all;
}
.footerAnchor:hover .footerLinkArrow{
    transform: translate(3px, -3px);
    -webkit-transform: translate(3px, -3px);
    -moz-transform: translate(3px, -3px);
}
.footerAnchor:hover{
    color:var(--blue_50);
}

/*Footer CSS Ended*/
/*Forgot Password css start*/
.forgotPassBg{
     background: url(../images/forgot_pass_bg.jpg) no-repeat;
   background-size: cover;
     min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.forgotPassCard{
     width:450px;
    background-color:#000;
    text-align:center;
    margin:auto;
    padding:1rem 0;
}
.subHeading{
    font-family:Sarabun-SemiBold;
    font-size:20px;
    margin:0.75rem 0;
    color:var(--white)
}
/*Forgot Password css end*/
.toast-success {
    background-color: var(--blue_50) !important;
}
.toast-error {
    background-color: var(--blue_100) !important;
}
/*toastr css start*/   
.toast-top-center{    /*'added for Lockton contents-prerequisites 202 point toaster center by aditya  on 30/11/2024*/
   /* top:10px !important;*/
    margin-left:auto;
    margin-right:auto;
}
/*toast css end*/
.titleHead {
    font-family: Sarabun-SemiBold;
    font-size: 16px;
    margin-bottom: 0.5rem;
}

.titleHead2 {
    font-family: Sarabun-SemiBold;
    margin-bottom: 0;
}

.aboutImg {
    max-width: 100%;
    height: auto;
}
/*Added by prakash on 19-03-2025 for user story 9213*/
.toast {
    width: 380px !important;
    pointer-events: none !important;
}

.toast-message {
    padding: 5px 0;
}

.toast-top-center > .toast-error, .toast-top-center > .toast-success{
    background-position: 1rem 1.2rem !important;
}

.toast-close-button {
    pointer-events: auto;
}

.toast-message a {
    pointer-events: auto;
}
.toast-top-center .toast {
top:10px !important;
}
@media screen and (min-width: 241px) and (max-width: 480px) {
    .toast-message {
        padding: 10px 0;
        margin-right: 14px;
    }

    .toast {
        margin: 0 0.5rem !important;
        width: auto !important;
    }

    .toast-top-center .toast-close-button {
        right: 0.1em !important;
    }
}

.toast-top-center {
    height: 100%;
    background: rgba(0,0,0,0.5);
    pointer-events: auto !important;
}
/*Ended by prakash on 19-03-2025 for user story 9213*/