:root{
    --theme: #F0EEE6;
    --light-theme: #eff7f8;
    --theme-text: #1E1E1E;
    --light-dark: #2b2b28;
  }
  @font-face {
    font-family: 'alegreya-black';
  src: url('../fonts/Alegreya/Alegreya-VariableFont_wght.ttf');
  }
 
  .bg-theme{
    background-color: var(--theme);
  }
  .bg-lightt{
    background-color: var(--light-theme);
  }
  
  .bg-dark{
    background-color: var(--theme-text) !important;
  }
  .bg-light-dark{
    background-color: var(--light-dark);
  }
  .text-theme{
    color: var(--theme-text) !important;
  }
  /* -Header-css */
  .topbar-user{
    background-color: white;
  }



  /* -Loader-2-css- */

  /* .circle-border {
    width: 50px;
    height: 50px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgb(0 0 0);
    background: linear-gradient(0deg, rgb(0 0 0 / 10%) 33%, rgb(0 0 0) 100%);
    animation: spin .8s linear 0s infinite;
  }
  .circle-core {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
  }
  .spinner-box {
    width: 50px;
    height: 100vh;
    display: flex;
    justify-self: center;
    align-items: center;
    background-color: transparent;
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
} */

/* ---- */

  
  .navbar-header{
    box-shadow: 1px 0px 2px rgb(213 211 200);
  }
  .form-control:focus{
    border-color: var(--theme-text);
  }
  .app-search .form-control{
    border: 1px solid #f0eee6;
    background-color: #E9E9E9;
  }
  .agora-main-content{
    background-color: var(--theme);
    /* font-family:'alegreya-black' ; */
  }

  .agora-logo-title{
    font-size: 18px;
    padding: 0px;
    margin: 0px;
    color: black;
    font-family: 'algeriya-black';
    display: inline-block;
  }
  /* -Side-menu-css- */
  .navbar-menu{
    background-color:var(--light-dark);
    border-right: none; 
    box-shadow: none;
    /* transition: none !important; */
  }
  .navbar-brand-box{
    background-color: white;
    height: 70px !important;
    /* width: 251px !important; */
  }
  :is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-brand-box{
    background-color:white ;
  }

  :is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .nav-item .nav-link:hover{
    position: relative;
    width: calc(180px + 70px);
    -webkit-transition: none;
    transition: none;
    background: var(--light-dark);
    color: white;
    gap: 0px;
  }
  :is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>a.menu-link{
    background-color:var(--light-dark) ;
    width: calc(180px + 70px);
  }
  :is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown{
    background-color:var(--light-dark) ;
    width: 180px;
  }

  /* Side-menu: -nav-links- */
  .simplebar-content{
    padding: 12px 0px !important;
  }
  .navbar-menu .navbar-nav .nav-link{
    color:#cac6c6;
    font-weight: 500;
  }
  .navbar-menu .navbar-nav .nav-link.active{
    color: white;
  }
  .nav-link.drop-down-link:hover{
    width: 200px !important;
  }
  :is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>a.menu-link span{
    padding-left: 30px;
  }
  :is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link span{
    padding-left: 30px;
  }

  .navbar-menu .navbar-nav .nav-link:hover{
    color: white;
  }
  .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]{
    color: white;
  }
  .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after{
    color:rgb(218, 212, 212);
  }
  /* -Side-menu: -nav-links-:sub-nav-sm- */
  .navbar-menu .navbar-nav .nav-sm .nav-link{
    color: #cac6c6;
    padding: 10px !important;
  }
  .navbar-menu .navbar-nav .nav-sm .nav-link:hover{
    color: white;
  }
  .navbar-menu .navbar-nav .nav-sm .nav-link:before{
    background-color: white;
  }
  .navbar-menu .navbar-nav .nav-link svg{
    color: white;
  }

  .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse]:after{
    content:url(../images/arrow-right.svg);
    width: 30px;
  }

  .auth-bg-cover{
    background-color: var(--theme);
  }
  .auth-bg-cover>.bg-overlay{
    background-image: none;
    background-color: var(--theme);
  }

  .page-content{
    background-color: var(--theme);
    /* padding: calc(70px + 1.5rem - 6px) calc((1.5rem * 0.5) - 6px) 60px calc((1.5rem * 0.5) - 6px); */
  }
  .page-title-box{
    margin: -17px -1.5rem 1.5rem -1.5rem;
  }
  /* -Login-page-css- */
  .auth-one-bg .bg-overlay{
    background: linear-gradient(to right, #646365, #9a9a9a) !important;
  }
  .shape>svg{
    fill: var(--theme);
  }

  .login-btn{
    background-color: #333;
    color: white;
    border: none;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
  }
  .login-btn:hover{
    background-color: #4f4e4e;
    color: white;
  }
  /* .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    background-color: #2b2b28de !important;
    color: white !important;
  } */
   .login-btn:active, .send-reset-btn:active{
    background-color: var(--light-dark) !important;
    color: white !important;
   }
   .login-btn:focus-visible, .send-reset-btn:focus-visible{
    background-color: var(--light-dark) !important;
    color: white !important;
   }
   .btn.disabled, .btn:disabled, fieldset:disabled .btn.login-btn{
    background-color: var(--light-dark) !important;
    color: white !important;
   }
  .send-reset-btn{
    background-color: #333;
    color: white;
    border: none;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
  }
  .send-reset-btn:hover{
    background-color: #4f4e4e;
    color: white;
  }
  .btn.cancel-btn:hover{
    background-color: #dce5e7;
  }
  .edit-profile-btn{
    position: absolute;
    left: auto;
    top: 2px;
    right: 2px;
    bottom: auto;
  }
  .user-card{
    background-color: #faf7f7;
    border-radius: 4px;
    border: 1px solid #f2f2f2;
  }

  /* -Select-2-css- */
  .select2-selection.select2-selection--single{
    height: 37.5px !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered{
    height: 37.5px !important;
    display: flex !important;
    align-items: center;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow{
    top: 3px !important;
  }
  .select2-container--open .select2-dropdown--above{
    border: 1px solid #ced4da;
    border-bottom: none;
  }
  .select2-container--default .select2-results__option[aria-selected=true]:hover{
    background-color: #1e1e1ed9;
  }
  .select2-container--default .select2-results__option--selected{
    background-color: #D0CDC7;
  }
  /* ---- */

  .profile-wid-bg::before{
    /* background: linear-gradient(to right, #646365, #9a9a9a) !important; */
    background: linear-gradient(to right, #3b3b3b, #9a9a9a) !important;
    /* #a69d8b */
  }
  .user-profile .card-header-tabs .nav-link.active{
    border-bottom-color: #1E1E1E;
  }
  .user-profile-section{
    border-bottom: 1px dashed #bcbcbc;
  }
  /* .btn.profile-drop-down.show{
    background-color: #efede5 !important;
  } */
   .profile-drop-down:active{
    background-color:var(--theme) !important ;
   }

  /* -DataTable-5-css- */
  .data-table thead tr th{
    background-color: #caa20073;
    color: #000000;
  }
  
  .data-table .dt-column-title{
    font-weight: 600;
  }
  div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end{
    margin-left: 0px;
    /* padding: 0px 20px; */
  }
  div.dt-container div.dt-layout-row{
    padding: 10px 20px 0px;
  }

  table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date{
    text-align: left;
  }
  table.dataTable tbody tr:hover{
    background-color: var(--theme);
  }
  table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-footer, table.dataTable td.dt-type-numeric div.dt-column-header, table.dataTable td.dt-type-numeric div.dt-column-footer, table.dataTable td.dt-type-date div.dt-column-header, table.dataTable td.dt-type-date div.dt-column-footer{
    flex-direction: row;
  }
  div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover{
    background-color: black;
    color: white !important; 
  }

  .dt-search {
      position: relative;
  }
  .dt-search .dt-input {
      width: 220px;
      height: 36px;
      background: #ffffff;
      border: 1px solid #aaa;
      border-radius: 4px !important;
      text-indent: 10px;
      padding-left: 12px !important;
  }
  .dt-length .dt-input:focus-visible, .dt-search .dt-input:focus-visible {
    outline:var(--theme-text) auto 1px;
  }
  .dt-search .ri-search-line {
      position: absolute;
      top: 08px;
      left: 10px;
      right: auto;
  }
  @media (max-width: 767px) {
    div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell{
      text-align: left;
    }
    div.dt-container div.dt-layout-row:not(.dt-layout-table){
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
  }     
  div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active{
    padding: 4px 6px;
    font-size: 18px;
  }    

  .dt-paging-button.next{
    padding: 4px 6px !important;
    font-size: 18px;
  }

  table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td{
    border-bottom: none !important;
    padding: 12px;
  }
  .table-card td:first-child,.table-card th:first-child{
    padding-left: 18px;
  }
  .table-card td:last-child,.table-card th:last-child{
    padding-right: 18px;
  }
  table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover, table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover{
    outline: none !important;
  }
  div.dt-container select.dt-input{
    padding: 4px 8px;
    margin-right: 6px;
    height: 36px;
    border-radius: 6px !important;
  }
   table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1{
    box-shadow: none !important;
  }
  table.dataTable.order-column > tbody tr > .sorting_1, table.dataTable.order-column > tbody tr > .sorting_2, table.dataTable.order-column > tbody tr > .sorting_3, table.dataTable.display > tbody tr > .sorting_1, table.dataTable.display > tbody tr > .sorting_2, table.dataTable.display > tbody tr > .sorting_3{
    box-shadow: none !important;
  } 
   table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > *{
    box-shadow: none !important;
  } 
  table.dataTable.stripe > tbody > tr:nth-child(odd) > *, table.dataTable.display > tbody > tr:nth-child(odd) > *{
    box-shadow: none !important;
  }
  .dataTable thead tr th,.dataTable tbody tr td{
    font-size: 14px;
  }
  table.dataTable tbody tr td a{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  table.dataTable tbody tr td a img{
    width: 100%;
    height: auto;
    border-radius: 50%;
    aspect-ratio: 1/1;
  }
  div.dt-container .dt-processing, div.dt-container .dt-length{
    margin-bottom: 16px;
  }
  div.dt-container .dt-processing, div.dt-container .dt-info{
    margin-top:16px;
    float: left;
  }
  div.dt-container .dt-processing, div.dt-container .dt-paging{
    margin-top:12px;
    float: right;
  }
  @media (max-width:767px) {
    div.dt-container .dt-processing, div.dt-container .dt-info{
      text-align: center;
      float: none;
    }
    div.dt-container .dt-processing, div.dt-container .dt-paging{
      margin-top: 16px;
      text-align: center;
      float: none;
    }
  }


  .status-toggle label {
    width: 48px;
    height: 26px;
    background-color: #a8a8a8;
    display: inline-block;
    cursor: pointer;
    transition: 0.3s;
  }
  .status-toggle label:before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: white;
    display: inline-block;
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    transition: 0.3s;
  }
  .status-toggle input:checked+label:before {
    left: 26px;
  }
  .status-toggle input:checked+label {
    background-color: var(--theme-text);
  }
  /* ---- */