.signup-page{
    background-color: #f2f7ff;
}
.top-panel{
    margin-top: 96px !important;
}
.top-panel .col{
    padding-bottom: 15px;
    text-align: right;
}
.top-panel .col a{
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: 13px;
	color: #1c5af4;
 }

.top-panel .col a:link svg{
   position: relative;
	top: -2px;
	left: -5px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: #1c5af4;
	stroke-width: 2;
	transform: translateX(5px);
	transition: all .3s ease;
 }
.top-panel .col a:hover svg{
   transform: translateX(0);
 }
.signup-page .box-wrapper{
    position: relative;
    max-width: 1140px;
    margin-bottom: 14px !important ;
    margin: 0 auto;
    border-radius:8px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 21px rgba(185,185,185,0.25);
    -moz-box-shadow: 0px 0px 21px rgba(185,185,185,0.25);
    box-shadow: 0px 0px 21px rgba(185,185,185,0.25);
    padding: 0;
}
.signup-page .box-wrapper .left-panel{
    max-width: 527px;
    background: url('../images/login_bg_left.jpg') #0c0d2c no-repeat bottom left;
    border-top-left-radius:8px;
    padding: 51px 45px;
}
.signup-page .box-wrapper .left-panel .logo{
    margin-bottom: 60px;
}
.signup-page .box-wrapper .left-panel .content-block{
    padding-left: 19px;
    margin-bottom: 43px;
}
.signup-page .box-wrapper .left-panel .content-block .title{
    font-size: 16px;
    font-weight: 600;
    line-height: 14px;
    color: #fff;
    margin-bottom: 5px;
    position: relative;
}
.signup-page .box-wrapper .left-panel .content-block .title:before{
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: -20px;
    right: auto;
    top: 1px;
    bottom: 0;
    background-color: #f0883c;
}
.signup-page .box-wrapper .left-panel .content-block .content{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #96a0c7;
}
.signup-page .box-wrapper .form-panel{
   /* max-width: 613px;
    width: 45%;*/
    display: flex;
    flex-direction: column;
    flex: auto;
}


/*popup style */

    /* Enhanced Modal Styles */
    #thankYouModal .modal-content {
        border: none;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    }

    #thankYouModal .modal-header {
        background: linear-gradient(135deg, #021d71, #5e85ff);
        border: none;
        padding: 25px 30px;
        position: relative;
        overflow: hidden;
    }

    #thankYouModal .modal-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: shimmer 3s ease-in-out infinite;
    }

    @keyframes shimmer {
        0%, 100% { transform: translateX(-100%) rotate(45deg); }
        50% { transform: translateX(100%) rotate(45deg); }
    }

    #thankYouModal .modal-title {
        font-weight: 700;
        font-size: 24px;
        color: white;
        margin: 0;
        z-index: 2;
        position: relative;
    }

    #thankYouModal .btn-close {
       
        border-radius: 50%;
        width: 35px;
        height: 35px;
        opacity: 1;
        z-index: 2;
        position: relative;
        transition: all 0.3s ease;
    }

    #thankYouModal .btn-close:hover {
        /*background: rgba(255, 255, 255, 0.3);*/
        transform: rotate(90deg);
    }

    #thankYouModal .modal-body {
        padding: 40px 30px;
        text-align: center;
        background: white;
    }

    .success-animation {
        width: 120px;
        height: 120px;
        margin: 0 auto 30px;
        position: relative;
    }

    .check-circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: linear-gradient(135deg, #28a745, #20c997);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 30px rgba(40, 167, 69, 0.3);
        animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    @keyframes popIn {
        0% {
            transform: scale(0) rotate(-180deg);
            opacity: 0;
        }
        100% {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
    }

    .check-circle i {
        color: white;
        font-size: 48px;
        animation: checkPop 0.3s ease-in-out 0.6s both;
    }

    @keyframes checkPop {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .success-particles {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        pointer-events: none;
    }

    .particle {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #28a745;
        border-radius: 50%;
        animation: particleBurst 1.2s ease-out forwards;
    }

    .particle:nth-child(1) { animation-delay: 0.8s; transform: rotate(0deg) translateX(80px); }
    .particle:nth-child(2) { animation-delay: 0.9s; transform: rotate(45deg) translateX(80px); }
    .particle:nth-child(3) { animation-delay: 1.0s; transform: rotate(90deg) translateX(80px); }
    .particle:nth-child(4) { animation-delay: 1.1s; transform: rotate(135deg) translateX(80px); }
    .particle:nth-child(5) { animation-delay: 1.2s; transform: rotate(180deg) translateX(80px); }
    .particle:nth-child(6) { animation-delay: 1.3s; transform: rotate(225deg) translateX(80px); }
    .particle:nth-child(7) { animation-delay: 1.4s; transform: rotate(270deg) translateX(80px); }
    .particle:nth-child(8) { animation-delay: 1.5s; transform: rotate(315deg) translateX(80px); }

    @keyframes particleBurst {
        0% {
            opacity: 1;
            transform: rotate(var(--rotation, 0deg)) translateX(0px) scale(1);
        }
        100% {
            opacity: 0;
            transform: rotate(var(--rotation, 0deg)) translateX(100px) scale(0);
        }
    }

    .message-text {
        font-size: 18px;
        color: #495057;
        line-height: 1.6;
        margin-bottom: 25px;
        animation: slideUp 0.8s ease-out 0.4s both;
    }

    .highlight-text {
        background: linear-gradient(135deg, #28a745, #20c997);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        font-size: 20px;
    }

    @keyframes slideUp {
        0% {
            transform: translateY(30px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    #thankYouModal .modal-footer {
        border: none;
        padding: 20px 30px 30px;
        background: white;
    }

    #thankYouModal .modal-footer .btn {
        background: linear-gradient(135deg, #021d71, #5e85ff);
        border: none;
        border-radius: 12px;
        padding: 12px 40px;
        font-weight: 600;
        font-size: 16px;
        color: white;
        transition: all 0.3s ease;
        animation: slideUp 1s ease-out 0.6s both;
    }

    #thankYouModal .modal-footer .btn:hover {
        transform: translateY(-3px);
        background: linear-gradient(135deg, #021d71, #5e85ff);
    }

    #thankYouModal .modal-footer .btn:active {
        transform: translateY(-1px);
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
        #thankYouModal .modal-body {
            padding: 30px 20px;
        }
        
        .success-animation {
            width: 100px;
            height: 100px;
        }
        
        .check-circle {
            width: 100px;
            height: 100px;
        }
        
        .check-circle i {
            font-size: 38px;
        }
        
        .message-text {
            font-size: 16px;
        }
    }




.tabs-wrap {
    width: 100%;
    padding: 51px 48px 0 48px;
}
  
.tab-titles-wrap {
    display: flex;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 0;
    margin-bottom: 0;
    flex-direction: row;
}
  
.tab-title {
    background: #fff;
    transition: background 0.3s;
    border: 1px solid #0d0d2e;
    text-align: center;
}
.tab-title:nth-child(1){
    border-top-left-radius:5px ;
    border-bottom-left-radius:5px;
    border-right: 1px solid #0d0d2e;
}
.tab-title:nth-child(2){
    border-left-width: 0px;
    border-right-width: 0px;
}
.tab-title:nth-child(3){
    border-top-right-radius:5px ;
    border-bottom-right-radius:5px ;
}
.tab-title.active {
    background: #090b37;
}
.tab-title.active a{
    color: #fff;
}
.tab-title a{
    display: inline-block;
    font-size: 14px;
    line-height: 12px;
    font-weight: 500;
    color: #090b37;  
    text-align: center;
    width: 100%;    
}
.tab-title:nth-child(1) a{
    padding: 9px 25px 11px 25px;
}
.tab-title:nth-child(2) a{
    padding: 9px 25px 11px 25px; 
}
.tab-title:nth-child(3) a{
    padding: 9px 39px 11px 39px;
}
.tab-content {
    display: none;
    padding: 0px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    width: 100%;
}
  
.tab-content .tsp.active{
    margin-bottom: 20px;
}
.tab-content.active {
    display: inline-block;
    opacity: 1;
}
.tab-content form{
    display: flex;
    flex-direction: column;
    gap:20px;
}
.tab-content .title-text{
    font-size: 22px;
    font-weight: 600;
    line-height: 25px;
    color: #36364e;
    margin-top: 26px;
    margin-bottom: 37px;
}
.tab-content .title-text span{
    color: #1c5af4;
}
/*.tab-content .input-field{
    margin-bottom: 26px;
}*/
.tab-content .thankyouWraper{
    position: relative;
    margin: 12px 0 25px 0;
    display: inline-block;
    min-height: 249px;

}
.tab-content .thankyouWraper .thankyouSection{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #36364e;
}
.tab-content .thankyouWraper .thankyouSection .title{
    font-size: 21px;
    font-weight: 600;
    line-height: 53px;
}
.tab-content .input-field img{
    display: flex;
    flex-direction: column;
}
.tab-content .input-field .error-text,.tab-content .input-field .error-text .error{
    font-size: 12px;
    line-height: 18px;
    margin-top: 5px;
    color: red;
}
.tab-content .col .input-field:nth-child(1){
   padding-right: 15px;
}
.tab-content .col .input-field:nth-child(2){
    padding-left: 15px;
}
.tab-content .input-field .form-label{
    margin-bottom: 12px;
}
.tab-content .input-field .btn{
    width: 100%;
    background-color: #1c5af4;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 13px 0;
    border: none;
    border-radius: 4px;
    margin: 6px 0 5px 0;
}
.tab-content .input-field .btn:focus + .tab-content .input-field .btn, .tab-content .input-field .btn:focus{
    box-shadow: none;
}
.tab-content .input-field .form-select{
    font-size: 14px;
    font-weight: 400;
    padding: 11px 20px 12px 20px;
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden=%27true%27 focusable=%27false%27 data-prefix=%27fas%27 data-icon=%27caret-down%27 class=%27svg-inline--fa fa-caret-down fa-w-10%27 role=%27img%27 xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 320 512%27%3E%3Cpath fill=%27rgb%2873, 80, 87%29%27 d=%27M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z%27%3E%3C/path%3E%3C/svg%3E");
    background-size: 13px;
    background-position: center right 20px;
}
.tab-content .form-label{
    font-size: 14px;
    font-weight: 500;
}
.tab-content .form-label span{
    font-size: 13px;
    color: #36364e;
    font-weight: 400;
    font-style: italic;
    opacity: 0.5;
}

.tab-content .form-control{
    font-size: 14px;
    font-weight: 400;
    padding: 11px 20px 12px 20px;
}
.tab-content .form-control:focus, .tab-content .input-field .form-select:focus{
    color: rgb(33, 37, 41);
    background-color: rgb(255, 255, 255);
    border-color: rgb(2, 31, 75);
    outline: 0px;
    box-shadow: none;
}
.signup-page .form-panel .tabs-bottom{
    background-color: #f4f7fb;
    border-radius: 8px;
    padding: 18px 0 20px 0;
    font-size: 13px;
    font-weight: 500;
    color: #36364e;
    margin-bottom: 11px;
    text-align: center;
}
.tab-content .field-box {
    background-color: none;
}
.tab-content .field-box .row:nth-child(2){
    background-color: #f4f7fb;
    padding: 15px 20px;
    padding-bottom: 0px;
    margin: 0px;
    
}
.tab-content .input-field-label .form-label{
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #36364e;
}
.tab-content .field-box .input-field {
  margin-bottom: 10px;
}

.tab-content .field-box .sendTo > div {
    width: 100%;
    padding: 8px;
    background-color: #fff;
    overflow: hidden;
    margin: 0 0 10px 0;
    border: 1px solid rgb(206, 212, 218);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.tab-content .field-box .sendTo > div .commaSep{
    float: left;
    margin:0;
    border: none;
    width: auto;
    padding:2px;
}
.tab-content .field-box .sendTo > div .commaSep:focus{
    border: none;
}
.tab-content .field-box .sendTo > div .commaSep::-moz-focus-inner {
    border: 0;
}
.tab-content .field-box .sendTo > div .commaSep:focus {
    outline: 0;
}
.tab-content .field-box span {
    padding: 4px 6px;
    float: left;
    margin: 0 4px 3px 0;
    border: 1px solid rgb(206, 212, 218);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 13px;
    color: #5A6A75;
    text-shadow: 0 1px 1px #fff;
    background: #f1f5fa;
}
.tab-content .field-box span small {
    padding: 0;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    float: right;
    color: #56809B;
    font-size: 14px;
    margin: -2px 0 0 4px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
/*.form-panel .tabs-bottom a:link, .form-panel .tabs-bottom a:visited, .form-panel .tabs-bottom a:active{
  color: #1572e8;
  text-decoration: none;
}*/


/***************  LOGIN PAGE CSS *******************/
.login-page{
    background: url('../images/bg-login.jpg') no-repeat center bottom #09092f;
    font-size: 15px;
    color: #8f8fa0;
    line-height: 18px;
}
.login-page .box-wrapper{
    margin-top: 10% !important;
    margin: 0 auto;    
    max-width: 450px;
    min-height: 450px;
}
 .login-page .logo{
    text-align: center;
    margin-bottom: 36px;
    display: inline-block;
 }
.login-page .form-box{
    background-color: #ffffff;
    border-radius: 8px;
    padding: 18px 30px;
    margin-bottom: 18px;
    margin: 0 auto;
}
.login-page .box-wrapper .form-header{
    text-align: center;
    height: fit-content;
    margin-bottom: 20px;
}
.login-page .box-wrapper .form-header h1{
    text-align: center;
    margin-bottom: 25px;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-transform: uppercase;
    color: #36364e;
}

/*.login-page .box-wrapper .form-panel .input-field{
    margin-bottom: 17px;
}*/
.login-page .box-wrapper .form-panel .input-field input.button, .login-page .box-wrapper .form-panel .input-field input.button{
    width: 100%;
    background-color: #1c5af4;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 13px 0;
    border: none;
    border-radius: 4px;
}
.login-page .box-wrapper .form-panel .input-field input{
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 11px 20px 12px 20px;
    text-align: center;
}
.login-page .box-wrapper .form-panel .input-field .form-control:focus{
    color: rgb(33, 37, 41);
    background-color: rgb(255, 255, 255);
    border-color: rgb(2, 31, 75);
    outline: 0px;
    box-shadow: none;
}
.login-page .box-footer {
    text-align: center;
    margin-top: 20px;
}
.login-page .box-wrapper .box-footer > a{
    font-size: 15px;
    color: #8f8fa0;
    line-height: 18px;
}
.login-page .box-wrapper .box-footer a:hover{
    color: #fff;
    text-decoration: none;
}
.footer-wrapper{
    position: relative;
    max-width: 1140px;
    margin-bottom: 30px !important ;
    margin: 0 auto;
    padding: 0;
}
.footer-wrapper .left-panel{
    max-width: 527px;
}
.footer-wrapper .right-panel{
    font-size: 12px;
    text-align: center;
    /*max-width: 613px;*/
    width: 100%;
}

.f-error { position:relative; }
.f-error input[type=text] { background-color:#fed2d3; border:solid 1px #e3a4ab; }
.f-error label.error { position:absolute; left:5px; bottom:-49px; background-color:#555; color:#ffffff; border:solid 1px #555; width:auto; padding:5px 15px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; font-size:12px; z-index:99; float:left; margin-top:10px; min-width:120px; }
.f-error label.error::after { content:""; position:absolute; width:0; height:0; border-width:6px; border-style:solid; border-color:transparent transparent #555; bottom:100%; left:20px; margin:0 0 -1px -10px; }

.error-list { background-color:#fed2d3; border:solid 1px #e3a4ab; padding:10px; max-width:346px; position:relative; left:50%; margin:50px 0 50px -173px; text-align:left; display:none; }
.error-list li { font-size:12px; margin-left:-20px; }

.forgot-pass-success div { font-size:12px; margin:50px 0; }

@media (max-width: 575.98px) {
    .tab-title a{
        padding: 7px 15px !important;
        line-height: 22px;
    }   
    
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .signup-page .box-wrapper .form-panel{
        width: 100%;
    }
    .signup-page .box-wrapper .form-panel .logo{
        margin-top: 40px;
    }
    
     
}

/* Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (orientation: landscape) {
    .signup-page .box-wrapper .left-panel,.footer-wrapper .left-panel{
        width: 45%;
    }
    .signup-page .box-wrapper .form-panel,.footer-wrapper .right-panel{
        width: 55%;
    }
    .tab-title a{
        line-height: 20px;
        padding: 0;
    }
}
@media only screen 
  and (max-device-width: 992px) 
  and (orientation: landscape) {
    .signup-page .box-wrapper .form-panel{
        width: 100%;
    }
}
@media (max-width: 766px) {
    .tabs-wrap{
        padding: 20px 0;
    }
    .signup-page .box-wrapper .form-panel .logo{
        margin-top: 20px;
    }
    .footer-wrapper .right-panel{
        max-width: 100%;
    }
}
@media (max-width: 992px) {
    .footer-wrapper .right-panel{
        width: 100%;
    }
}
@media (width: 1024px) {
    
    .footer-wrapper .right-panel{
        max-width: 100%;
    }
}

/* ================= NEW TAG INPUT STYLES ================= */
.field-box-new {
    background-color: #f4f7fb;
    padding: 15px 20px;
    margin-bottom: 26px;
}

.field-box-new .input-field {
    margin-bottom: 15px;
}

.tag-input-container {
    width: 100%;
    min-height: 42px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    cursor: text;
    overflow: hidden;
}

.tag-input-container:focus-within {
    border-color: #021f4b;
    outline: 0;
    box-shadow: none;
}

.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    background-color: #e8eef5;
    border: 1px solid #d1d9e3;
    border-radius: 3px;
    padding: 4px 6px 4px 10px;
    font-size: 13px;
    color: #495057;
    gap: 6px;
    line-height: 1.2;
}

.tag-text {
    color: #495057;
    font-weight: 400;
}

.tag-close {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: #6c757d;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: all 0.2s;
}

.tag-close:hover {
    background-color: #d1d9e3;
    color: #495057;
}

.tag-text-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    padding: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #495057;
    background: transparent;
}

.tag-text-input:focus {
    outline: none;
}

.tag-text-input::placeholder {
    color: #6c757d;
    opacity: 0.5;
}