body{
    background-color: var(--main-bg);
    color: var(--text-color);
}
.user-link:hover{
    background-color: #7366ff2e !important; 
}

.card, .card-header{
     background: var(--card-bg) !important;
}
.table, .card .card-header>span, table th, table td, .check-chat-table {
    color: var(--text-color) !important;
}
.page-wrapper .page-header{
    background: var(--header-bg) !important;
}

.fas, .far, .fab {
    color: var(--icons-color) !important;
}
 h4,h5{
    font-weight: var(--title-weight) !important;
}
.card .card-header>span{
    color: var(--span-color) !important;
}
.card .reject-reason{
    color: var(--card-header-text-color) !important;
}
.table-bordered thead, .table-bordered tbody, .table-bordered tfoot, .table-bordered tr, .table-bordered td, .table-bordered th {
    border-color: var(--table-border-color)!important;
}

.page-wrapper .page-header .btn-primary {
    color: var(--h-btn-color) !important;
    background-color: var(--h-btn-bg)!important;
    border-color: var(--h-btn-border-color)!important;
    box-shadow: var(--h-btn-box-shadow)!important;
    
}
.btn-primary{
    color:var(--btn-primary-color) !important;
    background: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-border-color) !important;
    box-shadow: var(--btn-primary-box-shadow) !important;
}

.switch-toggle input[type="checkbox"] + label::before {
   
    background-color: var(--toggle-bg) !important;
    border-color: var(--toggle-color-border) !important;
    box-shadow: var(--togglebox-shadow) !important;
}
.input-air-primary:focus {
   border-color:var(--input-border-color)!important;
}
.btn-light{
    background: var(--btn-light-bg) !important;
}
:root{
    --main-bg:#fff;
    --card-bg: #fff;
    --text-color:#2b2b2b;
    --icons-color:  #7366ff;
    --header-bg:#fff;
    --title-weight:500;
    --span-color:#2b2b2bb3;
    --table-border-color:#f2f4ff;
    --table-row-bg:#f5f7fa80 ;
    --h-btn-color:#fff;
    --h-btn-bg:#7366ff;
    --h-btn-border-color:#7366ff ;
    --h-btn-box-shadow:inset 0 1px 0 rgb(238 238 238 / 15%), 0 1px 1px rgb(0 0 0 / 8%) ;
    --btn-primary-color:#fff;
    --btn-primary-bg:#7366ff;
    --btn-primary-border-color:#7366ff;
    --btn-primary-box-shadow:inset 0 1px 0
    rgb(238 238 238 / 15%), 0 1px 1px rgb(0 0 0 / 8%);

    


    --toggle-color: #580b98 ;
    --toggle-bg: #7366ff;
    --toggle-color-border: #580b98;
    --togglebox-shadow: inset 0 1px 0 rgb(238 238 238 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
    --input-border-color: #7366ff;
    --reg-link-size: 12px;
    --reg-link-td: underline;
    --reg--reg-link-color:#7366ff;
}
:root[data-theme="dark"]{
    --main-bg: #151515;
    --text-color: #f0f0f0;
    --card-bg: #1d1d1f;
    --icons-color:  #8d22e7;
    --header-bg:#580b98;
    --title-weight:100;
    --span-color:#fff;
    --card-header-text-color:#fff;
    --table-border-color:#6e6e6f;
    --table-row-bg:#8d22e70f ;
    --h-btn-color:#580b98;
    --h-btn-bg:#f0f0f0;
    --h-btn-border-color:#580b98 ;
    --h-btn-box-shadow:inset 0 1px 0 rgb(238 238 238 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
    --btn-primary-color:#eeeeee;
    --btn-primary-bg:#580b98;
    --btn-primary-border-color:#580b98  ;
    --btn-primary-box-shadow:inset 0 1px 0 rgb(238 238 238 / 15%), 0 1px 1px rgb(0 0 0 / 8%);

    --btn-light-bg:#ffff;


    --toggle-color: #580b98 ;
    --toggle-bg: #151515;
    --toggle-color-border: #580b98;
    --togglebox-shadow: inset 0 1px 0 rgb(238 238 238 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
    --input-border-color: #8d22e7;
    --reg-link-size: 12px;
    --reg--reg-link-color:#adadad;
    --reg-link-td: underline;
}



p,h4,h5{
    margin: 0 !important;
}
.page-header-custom, footer{
    margin: 0 !important;
    width: 100% !important;
}
.user-img > img{
    width: 20px;
    height: 20px;
}
.nav-menus li{
    margin: 5px 0px;
}
.profile-nav strong {
    margin-left: auto !important;
    margin-right: 0 !important;
}
.fa{
    color: #7366ff;
}
.title-img{
    width: 50px;
    height: 50px;
}
h5 > span{
    margin-left: 20px;
}
/* .footer{
    margin-top: auto !important;
    margin-bottom: 0 !important;
} */
.nav-menus li > p{
    margin: 5px 0 !important;
}
.check-chat-table{
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.check-chat-table .table-head {
    width: 900px;
    font-weight: bold;
    font-size: 21px !important;
}
.check-chat-table .table-col:nth-child(1){
    width: 50px;
    padding: 15px;
    border-bottom: 1px solid #f2f4ff;;
}
.check-chat-table .table-col:nth-child(2),
.check-chat-table .table-col:nth-child(7){
    width: 200px;
    padding: 15px;
    border-bottom: 1px solid #f2f4ff;
}
.check-chat-table .table-col:nth-child(3),
.check-chat-table .table-col:nth-child(4),
.check-chat-table .table-col:nth-child(5),
.check-chat-table .table-col:nth-child(6){
    width: 150px;
    padding: 15px;
    border-bottom: 1px solid #f2f4ff;
}
.table-row{
    width: 900px;
    cursor: pointer;
}
.chat-container{
    width: 900px;
    padding: 100px  25px;
    margin: 0 auto; 
    background: linear-gradient(26deg, #0088cc, #a617ffd1);
    color: #151515;
}
.message-row{
    position: relative;
    margin-bottom: 50px;
}
.client-say,.bot-say{
    padding: 15px;
    width: 350px;
    background: #fff;
   
}
.chat-name{
    position: absolute;
    top: -35px;
    color: #fff;
}
.bot-say{
    margin-left: auto;
    margin-top: 50px;
    border-radius: 50px 0px 50px 50px;
}
.bot-say .chat-name{
    right: 0;
}
.client-say .chat-name{
    left: 0;
}
.client-say{
    margin-left: 0;
    margin-right: auto;
    border-radius: 0px 50px 50px 50px;
}


.chat-avatar{
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
#chatConfirm{
    margin-right: 0;
    margin-left: auto;
}
.edited-question{
    position: relative;
    /* box-shadow: 1px -1px 48px 20px rgb(149 237 32 / 40%); */
    /* background: #e9f7c6; */
    cursor: pointer;
 
}
#adminChat .edited-question{
    position: relative;
    background: #7366ff;
    cursor: pointer;
 
}

.phrase{
    max-width: 220px;
    margin: 0 auto !important;
    
}
.edit-tools{
    position: relative;
    z-index: 99;
}

.message-confirm{
    position: relative;
    color: #fff;
    padding: 25px;
}
/* .message-confirm::after{
    position: absolute;
    content: "🗸";
    top: 20%;
    left: 5%;
    font-size: 14px;
    color: #ffb100;
    font-weight: bold;
} */
.task-done,.task-verified{
    position: relative;
    pointer-events: none;
    background-color: rgba(0, 214, 54, 0.103);
    color: #00d6361a;
    border-bottom: 1px solid #fff;
}
.task-done::after, .task-verified::after{
    position: absolute;
    content: "Задание отправлено на проверку !";
    color: #51bb25;
    top: 25%;
    left: 38%;
    font-size: 14px;
    font-weight: initial;
}
.task-verified::after{
    left: 20%;
}
.task-verified::after{
    content: "Задание проверено,сейчас вы будете перенаправлены в панель управления!";
}
.user-link{
    cursor: pointer;
}

.return-container{
    display: none;
    width: 300px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 0 !important;
    margin-right: auto !important;
    border-radius: 0px 50px 50px 50px;
    color: #f2f4ff;
}
.container__admin{
    width: 650px;
    padding: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 0 !important;
    margin-right: auto !important;
    border-radius: 0px 50px 50px 50px;
    background-color: #7366ff;
    color: #f2f4ff;
}
.admin-check{
    width: 150px;
}

.container__admin .return-container{
    display: block;
}
.container__admin .edited-phrase,
.container__admin .phrase-return{
    padding: 25px;
}

.reworked-message .return-container {
    display: block !important;
    padding: 25px;
}


.title-mess{
    text-align: left;
    padding: 15px;
    font-weight: bold;
}
.client-say:nth-child(1){
    padding-top: 0;
}
.radio label::after{
    color: #51bb25 !important;
    content: "✓";
    position: absolute !important;
    top: -1px !important;
    background: none !important;
    font-weight: bold;
}
.radio-secondary input[type="radio"]:checked+label::after{
    color: #bb2525 !important;
    content: "✘";
}
.input-air-primary{
    resize: none;
}
.form-label-colored{
    color: #f2f4ff !important;
}
.radio label::before{
    border-radius: 0;
}
.message-status span{
    width: 20px;
    height: 20px;
    display: block;
    margin: 10px;
}
.message-status  > div{
    max-width: 200px;
}
.message-status div:nth-child(1) span{
    background-color: #f0d735
}
.message-status div:nth-child(2) span{
    background-color: rgb(209, 88, 88);
}
.message-status div:nth-child(3) span{
    background-color: #2c663b;
}
.switch-toggle{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .switch-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -2;
  }
  
  .switch-toggle input[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    width:30px;
    height: 15px;
    border-radius: 20px;
    margin: 0;
    cursor: pointer;
    /* box-shadow: inset -8px -8px 15px #42407b00, inset 10px 10px 10px rgb(0 0 0 / 25%); */
    background-color: #C0BFDA;
    color: #fff;
    
  }
  
  .switch-toggle input[type="checkbox"] + label::before {
    position: absolute;
    content: '';
    font-size: 13px;
    text-align: center;
    line-height: 25px;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background-color: #7366ff;

    box-shadow: -3px -3px 5px rgb(255 255 255 / 50%), 0px 0px 20px 0px rgb(0 0 0 / 25%);
    transition: .3s ease-in-out;
  }
  
  .switch-toggle input[type="checkbox"]:checked + label::before {
    left: 50%;
    content: '';
    color: #fff;
    background-color: #7366ff;

    box-shadow: -3px -3px 5px rgb(255 255 255 / 50%), 0px 0px 20px 0px rgb(0 0 0 / 25%);
  }
  .reject-comment{
    visibility: hidden;
  }
  .footer{
    margin-bottom: 0 !important;
    margin-top: auto !important;
  }
  .reg-acc{
    font-size: var(--reg-link-size) !important;
    text-decoration: var(--reg-link-td) !important;
    color: var(--reg--reg-link-color);
  }

  /* стилизация RADIO */




.admin-check input[type="radio"],
.purpose-phrase input[type="radio"] {
    display: none;
}

.admin-check label,
.purpose-phrase label {
    width: 150px;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #DAD0FF;
    transition: 0.3s;
}



.admin-check label:hover{
    background-color: #6b5ff1;
    border: 1px solid #5548e5;
    
}
.admin-check input[type="radio"]:checked+label{
    transition: 0.6s;
    background-color: #4638e2;
    border: 1px solid #5548e5;
}
.purpose-phrase input[type="radio"]:checked+label {
    transition: 0.6s;
    background-color: #a946fb;
    border: 1px solid #a946fb;
}
.purpose-phrase label:hover{
    background-color: #a946fb;
    border: 1px solid #a946fb;
}
.table-buttons{
    width: 30px;
}
.user-status{
    width: 220px;
}
.recurring-phrase{
    position: relative;
    box-shadow: 2px 0px 20px 0px #ff00007a;
}
.recurring-phrase:after{
    position: absolute;
    content: "Ответ повторяется !";
    width: 100%;
    top: -40%;
    left: 30%;
    font-size: 10px;
    color: #780000;

}
#loader {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  top: 0;
  left: 0;
  display: none;
}

.spinner-border {
  margin-top: 35%;
}
#progress-bar {
    width: 0%;
    height: 5px;
    background: #007bff;
  }
  
  #progress-text {
    margin-top: 10px;
    text-align: center;
}
.message{
    visibility: hidden;
    height: 20px;
    margin: 10px auto;
}
.success-message{
    color: #3da759;
    font-weight: bold;
}
.err-message{
    color: #a73d3d;
    font-weight: bold;
}