body {
  background-image: linear-gradient(#1d1e29, #1d1e24 70%, #1C1E1F 90%);
  background-attachment: fixed;
  background-size: cover;
}

.blank-avatar {
    width: var(--size);
    height: var(--size);
    min-width: var(--size);
    min-height: var(--size);
    background-color: #f3f6f9;
    color: #6c757d;
    font-size: var(--font-size);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.menu-item {
  display: flex;
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: var(--kt-text-gray-800) !important;
  cursor: pointer;

  background-color: transparent;
  border: 1px solid transparent;
  
  transition: all 0.2s ease-in-out;
}

.menu-item:hover {
  background-color: color-mix(in srgb, var(--theme-default-color), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--theme-default-color), rgba(255, 255, 255, 0) 80%);
  color: var(--kt-text-gray-900) !important;
}

.btn {
  border-radius: 9999px !important;
}

.blank-avatar::selection {
  background-color: transparent;
}

.bg-bluish {
  background-color: #29293a !important;
  border: 1px solid #36364a69 !important;
}

.bg-darker {
  
  background-color: #1E1E2D !important;
}

.bg-darker2 {
  background-color: #282838 !important;
}

.bg-darker3 {
  background-color: #3d3d4f !important;
  border: 1px solid #1c1c2b !important;
}

.bg-darkbit {
  background-color: #1F1F31 !important;
}

.bg-darkgray {
  background-color: #232335 !important;
}

.bg-graymost {
  background-color: #29293a !important;
}

.bg-hover-graymoster:hover {
  background-color: #303042 !important;
}

.bg-graymoster {
  background-color: #303042 !important;
  border: 1px solid #36364a !important;
}

.bg-graymax {
  background-color: #333346 !important;
  border: 1px solid #39394e !important;
}

.bg-graymedium {
  background-color: #29293a66 !important;
}

.bg-darkmost {
  background-color: #161620 !important;
}

.bg-hover-primary-10 {
  cursor: pointer;
}

.bg-hover-primary-10:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.bg-hover-darker:hover {
  background-color: #1E1E2D !important;
}

.bg-hover-darkbit:hover {
  background-color: #1F1F31 !important;
}

.bg-hover-darkgray:hover {
  background-color: #232335 !important;
}

.bg-hover-darkmost:hover {
  background-color: #161620 !important;
}

/* class="tagify__tag tagify--noAnim" */
.new-tag {
  background-color: red !important;
  background: red !important;
}

.border-opacity-1 {
  border-color: rgba(255, 255, 255, 0.01) !important;
}

/* .fold-hidden should work when .app-sidebar is not hovered and doesnt have class .drawer-on */
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-hidden {
  display: none !important;
}
/* .unfold-hidden should be visible when .drawer-on is active */
.unfold-hidden {
  display: none !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .unfold-hidden {
  display: block !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-px-1 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-mx-1 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-my-1 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover):not(.drawer-on) .fold-bg-transparent {
  background-color: transparent !important;
}

/* make .mobile-invisible */
@media (max-width: 992px) {
  .mobile-invisible {
    display: none !important;
  }
  .mobile-x-scroll {
    overflow-x: scroll !important;
  }
}
input {
  color: #ACACBF;
}
input::placeholder {
  color: #474759;
}

.app-sidebar .user {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.01);
}

.online-status {
  border: 4px solid #232335;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  transform: translate(33px, 15px);
}

.online-status.online {
  background-color: #00ff00;
}

.app-sidebar .item {
  /* color: #6c6c75 !important; */
  text-wrap: nowrap;
}
.app-sidebar .item svg {
  width: 24px;
  height: 24px;
}
.app-sidebar .item:hover, .app-sidebar .item.active, .app-sidebar .item:focus {
  background-color: color-mix(in srgb, var(--theme-default-color), transparent 90%);
}
.app-sidebar .item .notification {
  /* color: #D3D3E5; */
  background-color: #4595E5;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#kt_app_header #notifications .count {
  background-color: #D9415A;
  color: #D3D3E5;
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  transform: translate(35%, -35%);
  border: 1px solid #212133;
}

.notification {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  gap: 0.3rem;
}

.notification-warning {
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.2);
}

.notification-warning .use-color {
  color: rgb(255, 0, 0);
}

.notification-danger {
  background-color: #ff910023;
  border: 1px solid #ff55003f;
}
.notification-danger .use-color {
  color: #CC853D;
}

.notification-info {
  background-color: #0059ff2d;
  border: 1px solid #0084ff25;
}

.notification-info .use-color {
  color: #4595E5;
}

.notification-purple {
  background-color: rgba(109, 61, 204, 0.15);
  border: 1px solid rgba(109, 61, 204, 0.4);
}
.notification-purple .use-color {
  color: #894eff;
}
.notification-success {
  background-color: rgba(0, 255, 0, 0.0784313725);
  border: 1px solid rgba(0, 255, 0, 0.2666666667);
}
.notification-success .use-color {
  color: #00FF00;
}

.opacity-active-100.active {
  opacity: 1 !important;
}

.mask-to-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
  mask-image: linear-gradient(to top, transparent 0%, black 100%);
}

body {
  background-color: #212133 !important;
  color: #C3C3D9 !important;
}

a {
  text-decoration: none !important;
  color: #C3C3D9 !important;
}

#datatable_full_new {
  background-color: #1F1F31 !important;
}

.table>tbody>tr,
.table>tbody>tr {
  color: #C3C3D9 !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.table>tbody>tr>td:first-child,
.table>tbody>tr>th:first-child,
.table>thead>tr>th:first-child {
  padding-left: 1rem;
}

.table>tbody>tr>td:last-child,
.table>tbody>tr>th:last-child,
.table>thead>tr>th:last-child {
  padding-right: 1rem;
}

#datatable_full_new_filter .form-control,
#datatable_full_new_length select {
  background-color: #1F1F31 !important;
  border: none;
}

.dataTables_wrapper .paginate_button a {
  border-radius: 100% !important;
}

.dataTables_wrapper .paginate_button.active a {
  background-color: #F1416C !important;
}

.table>tbody>tr:hover,
.table>tbody>tr:hover {
  background-color: #1E1E2D !important;
  color: #C3C3D9 !important;
}

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #232335; 
}

@media (max-width: 992px) {
  .mobile-grow {
    max-width: 9999px !important;
  }
  .mobile-no-min-w {
    min-width: 0 !important;
  }
  .mobile-min-w-250px {
    min-width: 250px !important;
  }
  .mobile-flex-wrap {
    flex-wrap: wrap;
  }
}
@media (max-width: 592px) {
  .mobile-min-w-250px {
    min-width: 150px !important;
  }
}

.card {
  border-radius: 0.5rem !important;
}

.rounded-3 {
  border-radius: 0.5rem !important;
}

input.form-control {
  border-radius: 0.8rem !important;
}

@media (max-width: 980px) {
  .drawer-on {
    position: fixed;
    display: flex;
    left: 0;
    top: 0;
    height: 100vh;
  }
}

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.text-hidden {
  filter: blur(0.5rem);
  transition: filter 0.2s ease-in-out;
}

.text-hidden:hover {
  filter: blur(0);
}

.show-earnings .text-hidden {
  filter: blur(0);
}

.video-mobile-fit {
  max-width: 600px;
}

@media (max-width: 992px) {
  .video-mobile-fit {
    width: 100%;
    max-width: 100%;
  }
}

.fill { 
  min-height: 100%;
  height: 100%;
}

.iti__selected-flag {
  margin-left: 1rem !important;
}

.note-editor.fullscreen .note-editing-area {
  background-color: #1F1F31 !important;
}

.avatar-item {
  transform: translate(0, 2rem) scale(1.3);
}

@media (max-width: 992px) {
  .avatar-item {
    transform: translate(0, 0) scale(1);
  }

  .mobile-hidden {
    display: none !important;
  }
}

.starred {
  box-shadow: inset 0 0 7rem 0.05rem rgba(255, 170, 0, 0.2) !important;
}

a.btn.starred {
  border: 1px solid rgba(255, 170, 0, 0.15) !important;
}

.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-legend-text {
  filter: invert(1) !important;
}

[data-theme=dark] .swal2-container .swal2-popup {
  background: #29293a !important;
  color: white !important;    
}