/* Compiled CSS from SCSS */
:root{--bg:#F0F0F0;--panel:#ffffff;--text:#282828`;--boldtext:#000000;--ptext:#5a5a5a;--primary:#0D3F81;--secondary:#F98E00;--border:#e5e7eb;}
[data-theme=dark]{--bg:#0f172a;--panel:#020617;--text:#d3d3d3;--boldtext:#f4f4f4;--ptext:#c9c9c9; --border:#1e293b;}
body{background:var(--bg);color:var(--text);font-family:"Poppins", sans-serif;}
.main-content-wrapper{overflow-y:auto;}
.sidebar{background:var(--panel);border-right:1px solid var(--border);}
.menu-wrapper.menu{list-style:none;padding:0;margin:0;flex-grow:1}
.menu-wrapper.menu li.active,.menu li:hover{opacity:1;background:rgba(0,0,0,.05)}
@media(min-width:992px){.sidebar{position:static;transform:none!important;visibility:visible!important}.offcanvas-backdrop{display:none}}
@media(max-width:991px){.sidebar{width:260px}.search{width:200px}}

.theme-switch {
  width: 78px;
  background: #fff;
  border-radius: 30px;
  position: relative;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  padding:  10px 11px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);

  .icon {
    font-size: 17px;
    z-index: 2;
  }

  .thumb {
    width: 33px;
    height: 33px;
    transform: translateX(-8px);
    background: #111;
    border-radius: 50%;
    position: absolute;
    transition: all .3s ease;
  }
}

/* Dark mode position */
[data-theme="dark"] {
  .theme-switch {
    background: #020617;
  }
  .theme-switch .thumb {
      transform: translateX(85%);
      top: 8%;
      width: 33px;
      height: 33px;
      background: #fff;
    }
  
  .theme-switch .moon { opacity: 1; color: black; }
  .theme-switch .sun { opacity: .6; color: #b0aeae;}

  .form-control, .form-select{
    background: #0f172a;
    border: 1px solid #1e293b;
    color: var(--text);
  }
  .form-control, .form-select::placeholder{
    color: #a6a6a6;
  }
  .main-content-wrapper .topbar .top-actions .notification-wrapper .notification-dropdown-menu{
    border: 1px solid var(--border);
  }
  .sidebar .menu-wrapper .logout-modal .modal-dialog .modal-content .modal-body{
    border: 1px solid var(--border);
  }
  .main-content-wrapper .topbar .top-actions .top-user-wrapper .top-user-dropdown-menu {
    border: 1px solid var(--border);
  }
  .main-content-wrapper .content .table-box .table-dropdown-menu{
    border: 1px solid var(--border);
  }
  .main-content-wrapper .content .table-box .filter-wrapper .filter .form-control{
    background: var(--bg);
    color: #a6a6a6;
  }
  .main-content-wrapper .content .table-box .filter-wrapper .filter .custom-select{
    color: #a6a6a6;
  }
  .main-content-wrapper .content .add-modal .modal-body{
    border: 1px solid var(--border);
  }
  .add-modal .modal-content .modal-body .form-wrapper .form-control{
    background: var(--bg);
  }
  .login-page .login-wrapper{
    box-shadow:  8px 8px 16px #060911,
                -8px -8px 16px #182543;
  }
  .textarea-wrapper .textarea{
    background: var(--bg);
  }
  .custom-select{
    background-color: var(--bg);
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d3d3d3' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  }
  .main-content-wrapper .content .px-wrapper .contact-box-body .custom-table .px-table-wrapper tbody .med-warning {
    background: rgb(255 149 0 / 73%);
  }
  .main-content-wrapper .content .px-wrapper .px-modal .modal-body .tab-content .tab-pane .option-wrapper .form-select{
    background: #d2d2d214;
    border: 1px solid var(--border);
  }
  .main-content-wrapper .content .px-wrapper .px-modal .modal-body .tab-content .tab-pane .option-wrapper .form-select::placeholder{
    color: #a6a6a6;
  }
  .main-content-wrapper .content .px-wrapper .px-modal .modal-body .tab-content .tab-pane .create-new-option-content .form-group .form-control {
    background: #d2d2d214;
    border: 1px solid var(--border);
  }
  .main-content-wrapper .content .px-wrapper .px-modal .modal-body .tab-content .tab-pane .option-wrapper .form-control{
    background: #d2d2d214;
    border: 1px solid var(--border);
  }
}

[data-theme="light"] {
  .sun { opacity: 1; color: white; }
  .moon { opacity: .6; color: rgb(187, 187, 187); }
}