body{
     font-family: "Outfit", sans-serif !important;
     background: #fff !important;
     color: #000;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{color: #000;}
.login-card{padding:26px 26px ;}
.login-card.registercard{padding:55px 26px 26px ;}
.login-body h2{font-weight: 600; font-size: 2rem;line-height: 2rem;}
.login-body p{    font-size: .875rem;line-height: 1.25rem; color: #667085;}
.FlexLink-btn{padding-top: 12px;}
.FlexLink-btn a{ padding: 12px 20px; border: 1px solid #ddd; font-size: 1rem; color: #000; font-weight: 500;}
.FlexLink-btn a:hover{background-color: #f5f5f5;}
.divide_line{margin: 20px 0px 22px; text-align: center; color: #667085; position: relative; z-index: 1; }
.divide_line:after{position: absolute; top:0px; bottom: 0px; margin: auto; left: 0px; background-color: #ddd; height: 1px; width: 100%; z-index: -1; content: '';}
.divide_line span{display: inline-flex; padding: 5px 10px; background-color: #fff;}
.form-label{color: #000;}
input.form-control, select.form-select{ border: 1px solid #ddd; font-family: "Outfit", sans-serif; height: 44px; box-shadow: none; border-radius: 5px;}

.btn-primary, .btn:not(.btn-danger) {
    background-color: #3641f5 !important;
    border-color: #3641f5 !important;
    color: #fff!important;
}

.btn:not(.btn-danger):hover {
    background-color: #465fff !important;
    border-color: #465fff!important;
    color: #fff!important;
}
.createLink{font-weight: 500;}
.createLink a{color: #3641f5; text-decoration: underline !important;}

.languageOption{position: absolute; top:10px; right: 10px; z-index: 1;}
.languageOption select.form-select {
    height: 35px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 35px;
    padding-left: 35px;
}
.languageOption:after {
    background-repeat: no-repeat;
    position: absolute;
    top: 8px;
    left: 10px;
    content: '';
    height: 18px;
    width: 18px;
    background-image: url(../images/language.svg);
    background-size: 100%;
}
.otpcount{font-weight: 500;}
.logo{margin-bottom: 40px;}
.resend-otp{ font-weight: 500;}
.resend-otp {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 12px;
}
.password-input .visibility-icon{opacity: .3;}
 .resend-otp a{color: #3641f5; text-decoration: underline !important;}
 .color-primary{color: #3641f5;}
/* .login-card:has(.error) input.form-control{    border: 1px solid #F44336;} */
.otpInput input.form-control{padding: 2px 5px; height: 38px; text-align: center;}

.nav-footer{height: 60px; flex: auto;justify-content: center; padding: 0; background-color: transparent; z-index: 2;gap: 0; filter: drop-shadow(0 0 5px rgba(31, 31, 31, .1)); width: 100%; position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; margin: 0px; padding: 0px; z-index: 999;}
.nav-footer li{        border-radius: 0; background: #fff;height: 100%;text-align: center;color: grey;flex-basis: 25%;}
.nav-footer li a{display: block; position: relative; z-index: 1;   height: 100%;     padding: 4px 6px;}
.nav-footer li a span{display: block; color: #000; font-weight: 500; font-size: 13px;}
.nav-footer li.createVoice { background: transparent;flex-basis: auto; width: 85px;}

.nav-footer li.RightradiusCurve:has(+.createVoice) {
    border-top-right-radius: 15px!important;
}
.nav-footer li.RightradiusCurve:has(+.createVoice)~.LeftradiusCurve {
    border-top-left-radius: 15px!important;
}

.nav-footer li.createVoice a span{padding-top: 17px;}
.createVoice .createRound{border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;         background-color: #3641f5;
        filter: drop-shadow(0 0 5px rgba(31, 31, 31, .1)); box-shadow: 0 6px 16px rgba(39, 57, 145, .4); overflow: hidden;         left: 0;right: 0;margin: auto; margin-top: -26px; position: relative;}
        .nav-footer li.createVoice a .createRound  img{filter: brightness(0) invert(1);}
.nav-footer li a img {
    margin: auto;
    filter: grayscale(1);
    max-width: 20px;
    height: 30px;
}
.nav-footer li.active a img{        filter: grayscale(0);}
.nav-footer li.active a span {color: #3641f5;}
.nav-footer:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    height: 50px;
     background-image: url(../images/curve.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    width: 100px;
    z-index: -1;
    display: block;
    background-color: transparent;
    border-radius: 0;
}

.nav-footer li.createVoice a:before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    background: #fff;
    height: 30px;
    z-index: -1;
    display: block;
    right: auto;
    top: auto;
    border-radius: 0;
    width: 100%;
}

.sound-wave {
  display: flex;
  gap: 4px; /* Spacing between bars */
  align-items: center;
  width: 24px;
  margin: auto;
  justify-content: center;
}
.nav-footer li a.userlinkCircle .name{height: 30px; margin: auto; font-size: 16px; font-weight: 400; width: 30px; border-radius: 50%; display: flex;justify-content: center; background-color: #238727; color: #fff; align-items: center;}
.page-wrapper .body-wrapper .container-fluid {
    padding-top: 85px !important;
}
.bar {
  width: 5px;
  height: 10px;
  background-color: #fff; /* Bar color */
  animation: soundWave 1s infinite; /* Animation */
  border-radius: 6px;
}

.bar:nth-child(1) {
  animation-delay : 0s;
}

.bar:nth-child(2) {
    animation-delay :0.2s;
}

.bar:nth-child(3) {
    animation-delay :0.4s;
}

.bar:nth-child(4) {
    animation-delay :0.6s;
}

.bar:nth-child(5) {
    animation-delay :0.8s;
}

.bar:nth-child(6) {
    animation-delay :1s;
}

@keyframes soundWave {
  0%, 100% {
    transform: scaleY(0.2);
  }
  50% {
    transform: scaleY(1.0);
  }
}

body:has(.nav-footer) {
    padding-bottom: 80px;
}

.round-icon-btn {height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0px; border: 1px solid #ddd; background-color: #fff;      /* box-shadow: 0 0 30px rgba(78, 62, 182, 0.35);*/}
.questions-toggler{height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0px;    /* box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);*/ border: 1px solid #ddd; background-color: #fff;}
.questions-toggler i{font-size: 18px;}
.round-icon-btn  img{animation: rotation infinite 3s linear;}
@keyframes rotation{
  from{
    transform:rotate(0deg);
  }
  
  to{
    transform:rotate(360deg);
  }
}


aside.left-sidebar{background:#fff;}
.brand-logo img{filter: inherit;}
aside.left-sidebar .brand-logo{border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
aside.left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link, aside.left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link.active, aside.left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link.active{background-color: #ecf3ff !important; color: #004fff;}
.sidebar-nav ul .sidebar-item.selected > .sidebar-link, .sidebar-nav ul .sidebar-item.selected > .sidebar-link.active, .sidebar-nav ul .sidebar-item > .sidebar-link.active{color: #333333;}
aside.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link{color: #000;}
aside.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover{background-color: #ecf3ff !important; color: #004fff !important;}
aside.left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link.active:hover{color: #004fff !important;}
.plan-info-sidebar .planGrid{background:#3641f5;}
aside.left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link:hover .ti{color: #004fff;}
aside.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link img{filter: grayscale(1);
    opacity: 0.6;}
    aside.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover img{filter:inherit;opacity: 1;}
aside.left-sidebar .sidebar-nav ul .sidebar-item.selected .sidebar-link.active img{filter:inherit;opacity: 1;}

.tayaritheme .navbar-nav .dropdown-menu .message-body .dropdown-item img{filter: grayscale(1);
    opacity: 1;}
    .tayaritheme .navbar-nav .dropdown-menu .message-body .dropdown-item:hover img{filter:inherit;opacity: 1;}

/* .befor_login{background: #f9f9fb !important;} */
.dashboard-subtitle{color: #667085;}
.stat-card{background:#ffffff; box-shadow: none; display: flex; align-items: center; justify-content: space-between;}
/* .stat-card::before{background:linear-gradient(to right, #3641f5 0%, #004fff 100%);} */
.stat-card::before{display: none;}
.stat-header{align-items: flex-start; flex-direction: column; margin-bottom: 0;}
.stat-card figure{background:#f2f4f7; border-radius:12px; display: flex; align-items: center; justify-content:center; height: 60px; width: 60px;}
.stat-card figure .material-icons, .stat-card .stat-icon{color:#1d2939; opacity: 1;}
.chart-container{background:#ffffff; box-shadow: none; border: 1px solid #e4e7ec;}
.chart-container .chart-title{color: #1d2939;}
/* .stat-card:hover figure{background:#ffffff;} */
/* .stat-card:hover{transform: translateY(-2px); background:linear-gradient(to right, #3641f5 0%, #004fff 100%); box-shadow: none; border: 1px solid transparent;} */
/* .stat-card:hover .stat-title, .stat-card:hover .material-icons, .stat-card:hover .stat-value{color: #ffffff; opacity: 1;} */
/* .stat-card:hover figure .material-icons{color: #1d2939;}
.stat-card:hover .stat-icon{color: #1d2939;} */
.monthly-chart{height: inherit;}
.stat-card figure .material-icons{color: #1d2939;}
#progressChart{box-shadow: none;}
.stat-title{font-size:14px; color: #667085; padding-bottom: 5px;}
.stat-value{font-size:34px; margin-bottom: 0; line-height: 1; color: #1d2939;}
.sidebar-nav ul .sidebar-item .sidebar-link.active .ti{color: #004fff;}
.sidebar-nav ul .sidebar-item .sidebar-link span.hide-menu {
    padding: 4px 0px 0px;
}
.stat-card{border: 1px solid #e4e7ec;}
.dashboard-title{color: #000; margin-bottom: 0px;}
.sidebar-nav ul .sidebar-item .sidebar-link .ti {
    font-size: 24px;
    color: #979899;
}
aside.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link{    padding: 10px 14px;     gap: 10px;}

.metric-card{border-left: 4px solid #484a77;}
.analytics-section{box-shadow:none; background: #ffffff;}
.a-stat-icon{background:rgba(54,65,245,0.1);}
.a-stat-icon i{color: #3641f5;}
.overall-rating{background:rgba(54,65,245,0.1);}
.circle-chart{width: 140px; height: 140px;}
.circle-value, .overall-score p{color: #333333;}
.circle-label{color: #6c757d;}
.circle-progress{stroke: #3641f5;}
.section-header h5{color: #333333;}
.topAudioRecord{padding: 0px 15px;}
.topAudioRecord .audio-player {
    background: linear-gradient(to right, #767eff 0%, #6b99ff 100%);
}
.bot-message{    background-color: #e3e3e3;}
.chatlistingPanel li.active a, .charlistRecord .chat-item.botchat-items .bot-message{background-color: rgba(54,65,245,0.1);}
.topRecordname{border-radius: 12px 12px 0 0;}
.chatBox-container .leftChatBox{}
.searchBox{border-radius: 12px 12px 0 0;}
.navbar  .navbar-nav .dropdown-menu .dropdown-item:hover{color: #004fff !important; background-color: #ecf3ff !important; }

.navbar-nav .dropdown-menu .message-body  a{margin-bottom: 6px;}
.navbar-nav .dropdown-menu .message-body a:last-child{margin: 0px;}
.navbar-nav .dropdown-menu{padding-bottom: 0px;}
.profile-name{color: #1d2939;}
header.app-header ul.navbar-nav li a{color: #1d2939;}
.navbar-nav .dropdown-menu {
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}

.profile-head {
    max-width: 100%;
    margin: 0px auto 0px;
}

.ProfileInfohead .ProfileCircle{height: 80px; width: 80px; background-color: #ecf3ff ; font-size: 40px; font-weight: 500; line-height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; color: #296bff;}
.cardBox{background-color: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 24px; margin-bottom: 20px;}

.profileName h4{color: #1d2939; font-size: 20px; margin-bottom: 4px;}
.profileName p{color: #667085; font-size: 14px; margin: 0px;}

.btn-Border{color: #344054; font-weight: 500; font-size: 14px; padding: 8px 16px; border: 1px solid #d0d5dd; border-radius: 5px; display: inline-block;} 
.btn-Border:hover{background-color: #f9fafb; color: #344054;}
.profileDetailBox.card-body{border-radius: 16px;}

.cardbox-title, .headingTitle{    font-size: 18px;
    font-weight: 600;
    color: #1d2939;
    margin-bottom: 20px;}


    .profile-head .card-body p {
    height: auto;
    display: block;
    align-items: center;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0px;
}
.breadcrumb li a{color: #296bff;}
.profile-head input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select:not(.selectpicker){border: 1px solid #e2e8f0  !important; font-family: "Outfit", sans-serif;
    box-shadow: none;
    border-radius: 5px;}
    .profile-head label{color: #000 !important;}

    .profile-head .bootstrap-select .dropdown-toggle{border: 1px solid #e2e8f0 !important; outline: none !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;}
    .profile-head .bootstrap-select .dropdown-toggle:hover{background-color: transparent !important; box-shadow: none;}
 .profile-head  .bootstrap-select .dropdown-toggle::after{display: none;}
 
 .profile-head .bootstrap-select .dropdown-item:hover{
    background: #dddddd !important; color: #344054 !important;
}
.profile-head .bootstrap-select .dropdown-item.active {  background: #296bff !important; color: #fff !important;}
 .profile-head .bootstrap-select .dropdown-item:hover span,  .profile-head .bootstrap-select .dropdown-item.active span{color: #344054 !important;}
.profile-head .bootstrap-select .dropdown-item.active span{color: #fff !important;}

.profile-head  .cancelbtn{background-color: #fff !important;  color: #222324 !important; border: 1px solid #667085 !important;}

body:not(.befor_login){background-color: #f9fafb !important ;}



.questionOffcanvas .offcanvas .offcanvas-body ul#questionList{margin: 0px; padding: 0px;     -ms-overflow-style: none;
    scrollbar-width: none;}
.questionOffcanvas .offcanvas .offcanvas-body ul#questionList li {
    border: 1px solid #e4e7ec;
    margin-bottom: 8px;
    border-radius: 10px;
    color: #1d2939;
    font-weight: 500;
    line-height: 16px;
}

.questionOffcanvas .offcanvas .offcanvas-body ul#questionList li.completed {
    opacity: 1;
    border: 1px solid #c0d3b7;
    background: #f4ffef;
}
.questionOffcanvas .offcanvas .offcanvas-body ul#questionList li.completed i {
    color: #518d34;
}

.removeSearch{position: absolute; top:6px; right: 10px; background-color: transparent; border: none; font-size: 20px; opacity: 0.2; }
.ChatHistory .analytics-section.chatAnalyticsData {
    box-shadow: none;
    background: #ffffff;
    padding: 20px;
    margin: 0px;
    border-radius: 0px;
    border: none;
    border-left: 1px solid #e4e7ec;
}

.chatAnalyticsData  .analytics-section{border: none; padding: 0px 0px 20px; border: none; border-radius: 0px; border-bottom: 1px solid #e4e7ec; margin-bottom: 16px !important;}
.section-header h5 {
    color: #1d2939;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}
.chatAnalyticsData  .analytics-section:last-child{margin-bottom: 0px !important; padding-bottom: 0px; border: none;}

.chatAnalyticsData .section-header {
    border-bottom: 0px;
    margin-bottom: 0px;
}
.chatAnalyticsData .metric-card {
    border-left: 0px;
    padding: 0px;
    box-shadow: none;
    border-radius: 0px;
    transform: inherit !important;
}
.chatAnalyticsData .metrics-grid .a-stat-card {
    background:transparent;
    padding: 0px;
    border-radius: 0px;
    box-shadow: none;
}
.chatAnalyticsData  .metrics-grid.interviewGrid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
.chatAnalyticsData .metrics-grid.interviewGrid .a-stat-card {
    text-align: center;
    border: 1px solid #e4e7ec;
    padding: 10px;
    border-radius: 5px;
    justify-content: center;
}
.chatAnalyticsData .metrics-grid.interviewGrid .a-stat-card .a-stat-icon{display: none;}
.a-stat-card .a-stat-content h6, .metric-value {
    color: #1d2939;
    font-size: 20px;
}
.a-stat-card .a-stat-content p{line-height: 15px;}

.ratingCardGrid .rating-grid{gap: 10px;     grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}
.ratingCardGrid .circle-chart {height: auto; width: auto;}
.ratingCardGrid .circle-chart .CircleCard {
    position: relative;
    display: flex;
    justify-content: center;
}
.CircleCard .circle-svg{height: 60px; width: 60px; margin: auto; transform: inherit;}
.circle-chart .circle-label{color: #1d2939; text-align: center; font-weight: 500;}
.ratingCardGrid  .overall-rating {
    background: transparent;
    border: 1px solid #e4e7ec;
    padding: 10px;
}

.chatlistingPanel li.active a, .charlistRecord .chat-item.botchat-items .bot-message {
    background-color: #ecf3ff;
}
.chatlistingPanel li.active a:after{opacity: 0;}
.chatlistingPanel{overflow-y: auto;  -ms-overflow-style: none;
    scrollbar-width: none;}
.chatlistingPanel li a{    color: #1d2939;}
    .a-progress .a-progress-bar{height: 100%;}

    
.tayaritheme .app-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.notficationLink{background-color: #ececec; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0px !important;}
.tayaritheme .app-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.notficationLink i{color: #1d2939; font-size: 18px;}
.tayaritheme .app-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.notficationLink .notification{    top: 0px;
    right: 0px;}

    

.chatInfo-Panel{background-color: #fff;}   
.ChatHistory .analytics-section.chatAnalyticsData{width: 100%;} 

.ChatHistory .chatInfo-Panel .offcanvas {
    height: 100% !important;
}

.ChatHistory  .chatInfo-Panel {
    height: calc(100vh - 60px);
}
.ChatHistory .analytics-section.chatAnalyticsData{padding: 0px;}
.ChatHistory  .chatScrollList {
    height: calc(100% - 42px);
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 20px;
}
.ChatHistory  .headingTitle {    padding: 20px 20px 0px 20px;
    margin-bottom: 0px;}
    .ChatHistory .overall-score p{margin: 0px;}
.bot-message{font-weight: 400;}
.analysisBody{padding: 20px;}
.toast-container #liveToast {
    animation: mover 1s infinite alternate;
    background: #3641f5;
    border: 1px solid #c1cff7;
        box-shadow: 0 0 30px rgba(78, 62, 182, 0.35);
}
.toast-container .btn-close{font-size: 12px; filter: brightness(0) invert(1); opacity: 1;}
.toast-container  .toast-header{    background: #3641f5; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.toast-container  .toast-header strong{ color: #fff; font-weight: 500; font-size: 14px;}
.toast-container .toast-body{    font-size: 15px;
    line-height: 19px; color: #fff;}

@keyframes mover {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-10px)
    }
}

.voiceFlexbar .stop-btn{margin-top: 10px;}

@media (max-width:1199px){
header.app-header .navbar {
    justify-content: space-between;
    width: 100%;
}
.app-header .navbar .navbar-nav .nav-item .nav-link{padding-left: 0px; padding-right: 0px;}

}

@media (min-width:992px){
.settings-box-mobile{display: none;}
.voiceMic{display: none;}

.questionOffcanvas, .questionOffcanvas .offcanvas, .offcanvas-body{height: 100% !important;}
.questionOffcanvas #questionList{max-height: 100%;}
#agent_panel_container{height: calc(100vh - 60px);}
.charlistRecord{height: calc(100% - 155px);}
.setting-navbar-expand{height: auto !important;}
.setting-navbar-expand .offcanvas{height: auto !important;}
.chatBoxWrapper{height: calc(100% - 210px) !important;}
.chatBoxWrapper .chat-box{height: calc(100% - 30px) !important;         background: transparent;}

body:has(.nav-footer){padding-bottom: 0;}
/* aside.left-sidebar{border-radius: 0 15px 15px 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);} */
aside.left-sidebar {
    border-radius: 0px;
    box-shadow: none;
    border-right: 1px solid #e4e7ec;
}
aside.left-sidebar .brand-logo{border-bottom: none; padding: 15px 26px 15px 26px;}
header.app-header{border-bottom: 1px solid #e4e7ec; background:#fff; box-shadow: none !important;}
.login-card{ margin: auto; padding: 16px; display: flex; align-items: center; background-color: #ffffff;  padding:30px;  transition: all 0.3s ease; 
    /*max-width: 600px; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); border: 1px solid #e9ecef; border-radius: 12px;*/ }
.login-card.registercard{padding: 30px; background-color: #ffffff;}
.login-card .login-body{max-width: 450px; margin: auto; width: 100%;}
.right-col-Card{background-color: rgb(10 13 84);   background-image: url(../images/hero-bg.png);}
.right-col-Card .logo{color: #ffffff; font-weight: 500; font-size: 46px; line-height: 50px; display: flex; align-items: center; gap:12px}
.right-col-Card .logo{margin: 0px 0px 10px;}

.right-col-Card p{color: rgba(255, 255, 255, 0.7); max-width: 400px; margin: auto; line-height: 20px; font-weight: 400; font-size: 16px; margin: 0px;}
.sidebar-nav ul .sidebar-item .sidebar-link{font-size: 14px; font-weight: 500;}
.bg-fluidColor{background-color: #f9fafb;}

.agentFlexPanel{display: flex; gap: 0px 0px;}
.leftAgent, .rightAgent  {max-width: 400px;}


.questionOffcanvas .offcanvas .offcanvas-body {
    background-color: #fff;
    padding: 20px !important;
    border-right: 1px solid #e4e7ec;
    border-radius: 0px;
    flex-direction: column;
}
.container-fluid.bg-fluidColor.voiceContainer, .container-fluid.bg-fluidColor.historyChatWrapper{padding-left: 0px; padding-right: 0px; padding-top: 60px !important; padding-bottom: 0px !important;}
.middleAgent {height: calc(100vh - 60px);}
.chatModeTitleEle {
    padding: 14px 0px;
 
}

.rightAgent{background-color: #fff;   border-left: 1px solid #e4e7ec; padding: 20px;         height: 100%;}
.rightAgent .settings-box{box-shadow: none; border-bottom: 1px solid #e4e7ec; padding-bottom: 22px;}
.chatBoxWrapper .chat-box {box-shadow: none; border: none !important; padding: 0px !important;   -ms-overflow-style: none;
    scrollbar-width: none; overflow-x: hidden;}
    .charlistRecord {-ms-overflow-style: none;
    scrollbar-width: none; overflow-y: auto; overflow-x: hidden;}
.chatBoxWrapper .cardbox-title{margin-top: 10px; margin-bottom: 10px;}
.voiceFlexbar {
    height: calc(100% - 51px);
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    flex-direction: column;
    position: relative;
}
.voiceCardWrapper{height: calc(100% - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 40px 0px;
    width: 100%;     flex-direction: column; justify-content: center;}
.show_current_asking_question p {
    margin: 0px;
    color: #212529 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.show_current_asking_question {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    background-color: #fff;
    margin-bottom: 0px !important;
    border-top: 1px solid #e4e7ec;
    padding: 10px 7px;
    z-index: 9;
}

.chatBox-container .leftChatBox{border-right: 1px solid #e4e7ec;}
.chatBox-container  .searchBox{background: transparent; border-radius: 0px;}
.chatBox-container .ChatHistory{ padding: 0px;}
.ChatHistory .chatRecordList{border-radius: 0px; background: transparent;}
.chatInfo-Panel {
    padding-left: 0px;
}

.chatBox-container{height: calc(100vh - 60px);}

.ChatHistory .analytics-section.chatAnalyticsData {
    height: 100%;
}
.chatInfo-Panel .offcanvas .offcanvas-body{flex-wrap: wrap;}

.app-header .navbar .navbar-nav .nav-item .nav-link{height: 60px;}
aside.left-sidebar{z-index: 999;}
.body-scroll .overlay{z-index: 999;}
}

.overall-score h3 {
    color: #212529;
    font-size: 24px;
}

#plan-upgrade-modal .modal-dialog .modal-title{color: #212529;}
#plan-upgrade-modal .modal-header {
    background: transparent;
    border-radius: 0px;
}


 @media (min-width: 1200px) and (max-width: 1349px) { 
.leftAgent, .rightAgent {
    max-width: 320px;
}
aside.left-sidebar{width: 230px;}
#main-wrapper[data-layout=vertical][data-sidebartype=full] .body-wrapper {
    margin-left: 230px;
}
#main-wrapper[data-layout=vertical][data-header-position=fixed] .app-header {
    width: calc(100% - 230px);
}

.voiceFlexbar .mic-btn {
    width: 230px;
    height: 230px;}

 }

 @media (min-width: 1350px) and (max-width: 1500px) { 
.leftAgent, .rightAgent {
    max-width: 350px;
}

.voiceFlexbar .mic-btn {
    width: 220px;
    height: 220px;}

 }

 @media (min-width: 992px) and (max-width: 1199px) { 
.leftAgent, .rightAgent {
    max-width: 300px;
}



 }




@media (max-width:991px){



.charlistRecord {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: auto;
    overflow-x: hidden;
}

/* .toast-container{display: none;} */
    /* .app-header .navbar .navbar-nav{justify-content: space-between; width: 100%;}
    header.app-header .navbar{flex-wrap: wrap;} */
    header.app-header .navbar {
    min-height: inherit;
    padding: 10px 0px;
}
    .cardheaderFlex .btn-Border{flex: 0 0 auto;}
.ProfileInfohead .ProfileCircle{margin: 0px auto 10px;}
.cardWrapperHead .btn-Border{margin-top: 5px;}
.cardWrapperHead {text-align: center;}
    .message-body  a{color: #1d2939; margin-bottom: 6px;}
    .message-body  a:last-child{margin-bottom: 0px;}
    .flexBtnRight{flex: 0 0 auto; margin-left: 6px;}
.dashboard-subtitle {
    line-height: 16px;
    font-size: 14px;
}
    .stats-grid {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.stats-grid .stat-card {
    flex:  auto;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
}
.dashboard-title {
    font-size: 24px;
    margin-bottom: 4px;
}
.stats-grid  .stat-card figure{height: 50px; width: 50px;}
.stat-value {
    font-size: 24px;
    line-height: 20px;
}
    .app-header .navbar .navbar-nav .nav-item .nav-link.sidebartoggler{display: none;}
    .login-card .login-body{width: 100%;}
    .login-card{display: flex; align-items: center;}
#main-wrapper[data-layout="vertical"][data-header-position="fixed"] .app-header{top: 0;}

.navbar-expand-xl ul#questionList.ui-sortable {
    height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: auto;
    max-height: 100%;
}
.headingTitle{font-size: 17px; font-weight: 600;}

.voiceFlexbar .voiceCardWrapper{flex-direction: column;}
.voiceCardWrapper .show_current_asking_question.mb-2 {
    order: 2;
}
.settings-box-mobile {position: relative;}
.settings-box-mobile .settings-box{position: absolute; top:34px; right: 0px; width: 280px;}
body:has(.FlexVoiceBottom) {
    overflow: hidden;
    /* background: #fff !important; */
}
body:has(.FlexVoiceBottom) header{display: none;}
body:has(.FlexVoiceBottom) .page-wrapper .body-wrapper .container-fluid {padding-top: 0px !important;}
body:has(.FlexVoiceBottom) .nav-footer{display: none !important;}
.border-outline{height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0px; border: 1px solid #ddd; background-color: #fff;}
.FlexVoiceBottom{    height: 60px;justify-content: center;padding: 0 10px;
    background-color: #ffff; /*border-top: 1px solid #f5f5f5; filter: drop-shadow(0 0 5px rgba(31, 31, 31, .1));*/ gap: 8px;width: 100%; position: fixed; left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px;
    z-index: 999;
    filter: drop-shadow(0 0 5px rgba(31, 31, 31, .1));
}
    
 .FlexVoiceBottom .stop-btn {
    height: 30px;
    width: 30px;
    margin: 0px;
    box-shadow: none;
    background: #ff2d55;
    
}
 .FlexVoiceBottom .stop-btn:disabled{opacity: 1; border: 1px solid #ddd;   background: #ddd;}
  .FlexVoiceBottom .stop-btn:disabled i.stop-icon{color: #7c7c7c;}
.FlexVoiceBottom .stop-btn i.stop-icon {
    font-size: 14px;
     color: #fff;
}
.voiceMic .border-outline{background-color: #3641f5; border: 1px solid #3641f5; padding: 0px 10px;}

.offcanvas-bottom .settings-box {    background-color: transparent;
    box-shadow: none; margin-top: 12px; border: none!important;         padding-bottom: 16px !important;}
    .setting-navbar-expand .offcanvas.offcanvas-bottom{height: auto;}

    .voiceContainer.bg-fluidColor{position: relative; min-height: auto; padding-bottom: 0px !important; background-color: transparent; height: calc(100svh - 62px);}

    
    .chatModeTitleEle{position: relative; z-index: 2; padding-top: 14px;}
    .voiceCardWrapper {
    flex-direction: column;
    padding-top: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    height: calc(100svh - 62px);
    align-items: center;
            width: 100%;
    justify-content: center;
}


.voiceContainer.open .voiceStartSound   {display: none !important;}
.voiceContainer.open .show_current_asking_question {display: none;}
.voiceContainer.open .chatBoxWrapper{display: block;    padding-top: 12px;}
.chatBoxWrapper{display: none;}
.FlexVoiceBottom .closevoice i{color: #000; font-size: 20px;}
.chatBoxWrapper .chat-box{box-shadow: none; height: calc(100svh - 150px); overflow-y: auto; border: none !important; }
.chatBoxWrapper h5{display: none;}
.chat-box .chat-bubble{    font-weight: 500;     line-height: 18px;}


.voiceMic { display: none;}
.voiceContainer.open .voiceMic{display: block;}
.voiceMic .border-outline{height: 40px; width: 40px; margin: auto;}
.connectingText {
    font-weight: 500;
    font-size: 14px;
    color: #383838;
}
.show_current_asking_question{position: relative; bottom: 0px; left: 0px; z-index: 9; width: 100%; padding: 26px 16px 0px;}
.show_current_asking_question p span{  font-weight: 500; display: block;}
.show_current_asking_question p {
    /* background-color: #cfe2ff; */
    line-height: 15px;
    font-size: 14px;
    font-weight: 700;
    /* border: 1px solid #b6d4fe; */
    margin: 0px;
    color: #1d2939 !important;
    /* border-radius: 5px;
    padding: 5px 10px; */
    text-align: center !important;
}
.counterNumber {
    text-align: center;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 5px;
}

.questionOffcanvas .offcanvas .offcanvas-body ul#questionList{max-height: 100%;}
.body-wrapper>.container-fluid{padding-left: 16px; padding-right: 16px;}
.page-wrapper .body-wrapper .container-fluid {
    padding-top: 70px !important;
}
.chatBox-container .ChatHistory{display: block;}
.ChatHistory .chatInfo-Panel {
    visibility: visible;
    opacity: 1;
    padding: 0px;
    width: 100%;
    height: auto;
    z-index: 9999;
}

.ChatHistory .analytics-section.chatAnalyticsData{padding: 0px; border: none;}
.charlistRecord{padding: 10px 16px 80px ;}

.ChatHistory .chatScrollList{padding: 0px 0px 80px 0px;}
.searchBox {
    border-radius: 0px;
    background: transparent;
}
/* body:has(.historyChatWrapper) .page-wrapper .body-wrapper .container-fluid.bg-fluidColor {
    background: #fff;
  padding-top: 61px !important; 
} */
.leftChatBox.userLeftcollapse{top:52px;}
.topFilterInfo a.btn.btn-primary {
    font-weight: 600;
    padding: 6px 10px 6px;
    background-color: #fff !important;
    color: #2a3547!important;
    border: 1px solid #ddd !important;
    display: flex;
    align-items: center;
    gap: 0px 3px;
}
.topFilterInfo a.btn.btn-primary i {
    font-size: 18px;
}

.questions-toggler i{color: #2a3547;}
.topRecordname .chatModeTitleEle{padding: 0px;}

.ChatHistory .chatRecordList {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e4e7ec;
}

.MobileTip-card{font-size: 12px; font-weight: 500; padding-top: 4px; line-height: 18px; color: #2d3748;}
.MobileTip-card i{    color: #3641f5; font-size: 16px;}

.voiceContainer.open .chatBoxWrapper{z-index: 99; position: relative;}
.body-wrapper .voiceContainer{ padding-left: 0px !important; padding-right: 0px !important;}
body.tayaritheme:has(.voiceContainer.open) {background: #f9fafb !important;}

.voiceContainer.open .chatBoxWrapper .chat-box{background: transparent; padding: 0px 16px !important;}
.chatModeTitleEle{background-color: #fff; padding: 12px 16px; border-bottom: 1px solid #e4e7ec;}
.voiceContainer.open .FlexVoiceBottom{background-color: transparent; padding: 0px; gap: 0px; height: 50px; }
.FlexVoiceBottom:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    height: 50px;
    background-image: url(../images/curve.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    width: 100px;
    z-index: -1;
    display: block;
    background-color: transparent;
    border-radius: 0;
}
.FlexVoiceBottom .voiceMic{width: 100px;}
.FlexVoiceBottom .CloseBtnvoice {
flex: auto;
    background: #fff;
    padding: 10px 10px;
}
.FlexVoiceBottom .stopBtnVoice {
    background: #fff;
flex: auto;
    display: flex;
    padding: 10px 10px;
    justify-content: flex-end;
}
.voiceMic .border-outline{        filter: drop-shadow(0 0 5px rgba(31, 31, 31, .1));
        box-shadow: 0 6px 16px rgba(39, 57, 145, .4);
        margin-top: -16px;}


        .voiceStartSound .mic-btn {
    width: 220px;
    height: 220px;
    margin: 0px !important;
}

.voiceStartSound .mic-timer {
    display: none;
}

header.app-header ul.navbar-nav li a.logo-img {
    padding: 0px;
}
.app-header {
    padding: 0 12px !important;
}

.chatlistingPanel{padding-bottom: 70px;}
.container-fluid.bg-fluidColor.historyChatWrapper{padding-bottom: 70px  ;}
.flatpickr-calendar.open {

    left: 10px !important;
}


.loader-overlay{position: fixed;}


.chatBox-container{height: calc(100svh - 170px);}





}

.flexQuestion{display: flex; justify-content: center; gap: 0px 20px;}
.flexQuestion .btn{  font-size: 14px; 
    font-weight: 600;
   display: flex; gap: 0px 3px; align-items: center;}
    .flexQuestion .btn i{font-size: 20px;}

@media (min-width: 768px) and (max-width: 991px) { 
.stat-card{    justify-content: flex-end;}

}

@media (max-width:767px){
.stats-grid .stat-card{        flex: 0 0 auto;}
/* body:has(.flatpickr-calendar){overflow: hidden;} */
#job-detail-modal-box.modal .modal-dialog {
    padding: 10px;
}

}






@media (min-width: 1200px) {
.hamburger-menu{display: none;}
}


.flatpickr-calendar{border: 1px solid #e4e7ec !important;
    border-radius: 16px !important;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;} 


ul#questionList li.locked {
    background-color: #D6F0FF !important;
}

@media (max-width:992px){
.flexQuestion {
    gap: 0px 10px;
    margin-top: 10px;
    position: absolute;
    bottom: 8px;
    display: none;
}

.voiceContainer.open .flexQuestion {
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    width: 60%;
    bottom: 14px;
    margin: auto;
}
.voiceContainer.open .flexQuestion button span{display: none;}
.voiceContainer.open .flexQuestion button {
    padding: 0px;
    color: #1f2937 !important;
    background: transparent !important;
    border: none !important;
    flex-wrap: nowrap;
    overflow: hidden;
    display: flex;
    line-height: 20px;
}

}

.loader-overlay .centered-loader{   
    border: 5px solid #adadad;
    border-top: 5px solid #3641f5;


}