.circle {
    width: 20px;
    height: 20px;
    background-color: red;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.nav-tabs .nav-link {
    background-color: #eff1f9;
}
#sar_symbol{
    width: 20px;
    fill: #6c6c6c;
}
.select2 {
    width: 100% !important;
}

.main-profile-menu {
    border-radius: 50%;
    background-color: #FCFBF7;
}

.bg-custom {
    background-color: #FCFBF7 !important;
}
.swal2-cancel {
    color: black !important;
    border: 2px solid #00000069 !important;
    border-radius: 30px !important;
}
.swal2-popup {
    border-radius: 30px !important;
}
.swal2-confirm {
    border-radius: 30px !important;
}

.translate-btn {
    color: #299c8c !important;
    cursor: pointer;
    text-decoration: underline !important;
}

.form-group .d-flex label {
    padding: 0px !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: #43cdbd !important;
    color: white;
}
.help-center-icon {
    background-color: #299c8c;
    color: white;
    font-size: 12px;
    border-radius: 50px;
    padding: 2px 11px;
    position: relative;
    bottom: 5px;
}
.sidebar-help-center {
    right: 0px;
    display: none;
    width: 400px;
}


    .scene{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;height:100vh;gap:32px;
    background:var(--color-background-primary);
    }

    .logo-stage{
    display:flex;align-items:center;gap:28px;
    }

    .icon-wrap{
    position:relative;width:90px;height:90px;
    animation:floatIcon 3.2s ease-in-out infinite;
    }

    .sq-teal{
    position:absolute;top:0;left:0;
    width:62px;height:62px;border-radius:14px;
    background:#2BBFA0;
    animation:slideTeal 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.1s both, pulseTeal 3s ease-in-out 1s infinite;
    transform-origin:top left;
    }
    .sq-amber{
    position:absolute;bottom:0;right:0;
    width:44px;height:44px;border-radius:10px;
    background:#F5A623;
    animation:slideAmber 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.35s both, pulseAmber 3s ease-in-out 1.4s infinite;
    transform-origin:bottom right;
    }

    .sq-teal::after{
    content:'';position:absolute;inset:0;border-radius:inherit;
    border:2.5px solid rgba(255,255,255,0.3);
    animation:scanLine 2.4s linear 1.5s infinite;
    clip-path:inset(0 100% 0 0);
    }

    .wordmark{
    display:flex;flex-direction:column;gap:0;
    animation:fadeUp 0.8s ease-out 0.6s both;
    }
    .wm-sq{font-size:48px;font-weight:700;color:#2BBFA0;letter-spacing:-1px;line-height:1;}
    .wm-ai{font-size:48px;font-weight:700;color:#F5A623;letter-spacing:-1px;line-height:1;display:inline;}

    .tagline{
    font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--color-text-secondary);margin-top:4px;
    animation:fadeUp 0.8s ease-out 0.9s both;
    }

    .check-row{
    display:flex;gap:16px;
    animation:fadeUp 0.8s ease-out 1.1s both;
    }
    .check-item{
    display:flex;align-items:center;gap:6px;
    font-size:12px;color:var(--color-text-secondary);
    }
    .check-dot{
    width:18px;height:18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;color:white;font-weight:700;
    animation:dotPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .check-dot.t{background:#2BBFA0;animation-delay:1.3s;}
    .check-dot.a{background:#F5A623;animation-delay:1.5s;}
    .check-dot.b{background:#2BBFA0;animation-delay:1.7s;}

    .progress-wrap{
    width:220px;height:3px;
    background:var(--color-border-tertiary);border-radius:99px;overflow:hidden;
    animation:fadeUp 0.6s ease-out 1.2s both;
    }
    .progress-bar{
    height:100%;width:0%;border-radius:99px;
    background:linear-gradient(90deg,#2BBFA0,#F5A623,#2BBFA0);
    background-size:200% 100%;
    animation:load 2.6s ease-in-out 1.4s infinite, shimmer 1.8s linear 1.4s infinite;
    }

    .status-text{
    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--color-text-secondary);
    animation:fadeUp 0.6s ease-out 1.3s both;
    }
    .dot{display:inline-block;animation:blink 1.2s ease-in-out infinite;}
    .dot:nth-child(2){animation-delay:0.2s;}
    .dot:nth-child(3){animation-delay:0.4s;}

    @keyframes slideTeal{
    from{transform:scale(0.3) translate(-20px,-20px);opacity:0}
    to{transform:scale(1) translate(0,0);opacity:1}
    }
    @keyframes slideAmber{
    from{transform:scale(0.3) translate(20px,20px);opacity:0}
    to{transform:scale(1) translate(0,0);opacity:1}
    }
    @keyframes floatIcon{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
    }
    @keyframes pulseTeal{
    0%,100%{box-shadow:0 0 0 0 rgba(43,191,160,0.35)}
    50%{box-shadow:0 0 0 10px rgba(43,191,160,0)}
    }
    @keyframes pulseAmber{
    0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,0.35)}
    50%{box-shadow:0 0 0 8px rgba(245,166,35,0)}
    }
    @keyframes scanLine{
    0%{clip-path:inset(0 100% 0 0)}
    60%{clip-path:inset(0 0% 0 0)}
    100%{clip-path:inset(0 0 0 100%)}
    }
    @keyframes fadeUp{
    from{transform:translateY(14px);opacity:0}
    to{transform:translateY(0);opacity:1}
    }
    @keyframes dotPop{
    from{transform:scale(0);opacity:0}
    to{transform:scale(1);opacity:1}
    }
    @keyframes load{
    0%{width:0%;opacity:1}
    80%{width:100%;opacity:1}
    100%{width:100%;opacity:0}
    }
    @keyframes shimmer{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
    }
    @keyframes blink{
    0%,80%,100%{opacity:0.2}40%{opacity:1}
    }
    
.select2-results__option {
    display: flex;
    align-items: center;
    gap: 8px;
}
.select2-results__option input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.select2-results__option.select2-results__option--selected {
    background-color: transparent;
    color: inherit;
}
.select2-results__option--highlighted {
    background-color: #e8f4f8 !important;
    color: #000 !important;
}
.task-container {
    height: 160px;
    overflow-y: scroll;
}
.modal .card-body.task-container{
    height: auto;
    overflow-y: auto;
}
.task-container .task-list li small {
    float: inline-end;
}

.task-container .task-list li a {
    color: black !important;
}

.task-container .task-list li:hover {
    background-color: #1abc9c29;
}

.border-b {
    border-bottom: 1px solid #99a6b7;
}

/*.notifi-count {*/
/*    float: inline-end;*/
/*    padding: 5px 9px;*/
/*    background-color: #2a998d;*/
/*    color: white;*/
/*    border-radius: 50px;*/
/*}*/
.notifi-count {
    color: #2a998d;
    font-weight: 700;
}
.no-notifi.notifi-count {
    background-color: #1c2a39;

}