@import "../scss/variables";

/*---FONTS IMPORT --- */

body.transparent-theme {
  color: #eaecf3;
  background: $transparent-body;
}

body.transparent-theme.bg-img1 {
  background: url(../img/media/bg-img1.jpg) !important;
  background-blend-mode: overlay;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  position: absolute;
}

body.transparent-theme.bg-img2 {
  background: url(../img/media/bg-img2.jpg) !important;
  background-blend-mode: overlay;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  position: absolute;
}

body.transparent-theme.bg-img3 {
  background: url(../img/media/bg-img3.jpg) !important;
  background-blend-mode: overlay;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  position: absolute;
}

body.transparent-theme.bg-img4 {
  background: url(../img/media/bg-img4.jpg) !important;
  background-blend-mode: overlay;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  position: absolute;
}

@media (min-width: 1400px) {
  body.layout-boxed.transparent-theme {
    background: $transparent-body;
  }
}

@media (min-width: 1400px) {

  .transparent-theme.layout-boxed.bg-img3 .page,
  .transparent-theme.layout-boxed.bg-img1 .page,
  .transparent-theme.layout-boxed.bg-img2 .page,
  .transparent-theme.layout-boxed.bg-img4 .page {
    background: transparent;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  }
}

.transparent-theme {
  @media (max-width: 480px) {
    .border-end.bd-xs-e-0 {
      border-right: 0 !important;
    }

    .border-end.bd-xs-s-0 {
      border-left: 0 !important;
    }
  }

  @media (max-width: 991px) {
    .border-end.bd-md-e-0 {
      border-right: 0 !important;
    }
  }

  @media (max-width: 1024px) {
    .border-end.bd-lg-e-0 {
      border-right: 0 !important;
    }
  }

  @media (max-width: 1366px) {
    .border-end.bd-xl-e-0 {
      border-right: 0 !important;
    }
  }

  &.rtl {
    @media (max-width: 480px) {
      .border-end.bd-xs-e-0 {
        border-left: 0 !important;
        border-right: inherit !important;
      }

      .border-end.bd-xs-s-0 {
        border-right: 0 !important;
        border-left: inherit !important;
      }
    }

    @media (max-width: 991px) {
      .border-end.bd-md-e-0 {
        border-left: 0 !important;
        border-right: inherit !important;
      }
    }

    @media (max-width: 1024px) {
      .border-end.bd-lg-e-0 {
        border-left: 0 !important;
        border-right: inherit !important;
      }
    }

    @media (max-width: 1366px) {
      .border-end.bd-xl-e-0 {
        border-left: 0 !important;
        border-right: inherit !important;
      }
    }
  }

  @media (min-width: 992px) {

    &.hover-submenu.app.sidenav-toggled-open .slide-menu,
    &.hover-submenu1.app.sidenav-toggled-open .slide-menu {
      border-radius: 0px 5px 5px 0px !important;
    }
  }

  .sticky.sticky-pin {
    div.main-sidebar-header {
      background: $primary  !important;
    }
  }

  @media (min-width: 992px) {

    &.icontext-menu,
    &.hover-submenu,
    &.hover-submenu1 {
      .app-sidebar.sidebar-scroll .main-sidebar-header {
        background-color: $primary  !important;
      }
    }
  }

  .browser-stats .sub-text {
    color: rgba($white, 0.5);
  }

  .latest-tasks .time {
    color: $white;
  }

  .tx-gray-500 {
    color: rgba($white, 0.8);
  }

  .custom-control-input:disabled~.custom-control-label {
    color: $white;
    opacity: 0.5;
  }

  .select2-search__field::placeholder {
    color: $white;
  }

  .pricing-tabs ul.nav-price {
    background: transparent;
  }

  .main-chat-list .media-contact-name span:last-child {
    color: $white;
  }

  .main-chat-body .media-body>div:last-child {
    color: $white;
  }

  .main-chat-list .media-body p {
    color: $white;
  }

  .main-chat-msg-name small {
    color: $white;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: $white transparent transparent transparent;
    border-width: 5px 4px 0 4px !important;
  }

  .main-nav-column .nav-link span {
    color: $white;
  }

  @media (max-width: 992px) {
    .card-pay .tabs-menu li a {
      padding: 0.7rem 1rem;
      display: block;
      font-size: 10px;
      text-align: center;
    }
  }

  .card-item-desc .card-item-desc-1 dd {
    color: $white;
  }

  .theme-switch a svg {
    fill: #ffffff;
  }

  .sweet-alert p {
    color: $white;
  }

  &.rtl {
    @media (min-width: 992px) {

      &.hover-submenu.app.sidenav-toggled-open .slide-menu,
      &.hover-submenu1.app.sidenav-toggled-open .slide-menu {
        border-radius: 5px 0px 0px 5px !important;
      }
    }

    .border-end {
      border-left: 1px solid $transparent-border  !important;
    }

    .border-start {
      border-right: 1px solid $transparent-border  !important;
    }

    @media (min-width: 576px) {

      .wizard.vertical>.content,
      .wizard.vertical>.actions {
        border-right: 1px solid $transparent-border  !important;
        border-left: inherit;
      }
    }

    .select2-container--default .select2-selection--single {
      .select2-selection__rendered {
        float: right;
      }
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
      border-color: transparent transparent $white transparent;
      border-width: 0px 4px 5px 4px !important;
    }

    .notification .notification-body:before {
      border-left-color: $transparent-theme;
      right: -20px;
      left: inherit;
      border-right-color: transparent !important;
    }

    .vtimeline .timeline-wrapper.timeline-inverted .timeline-panel:after {
      border-left: 14px solid $white-05;
      border-right: 0 solid rgba(0, 0, 0, 0.2);
    }

    .vtimeline .timeline-wrapper .timeline-panel:after {
      border-right: 14px solid $white-05;
      border-left: 0 solid rgba(0, 0, 0, 0.2);
    }
  }

  .card-header:first-child {
    border-radius: 5px 5px 0 0 !important;
  }

  .tab_wrapper .content_wrapper .accordian_header {
    border-top: 1px solid $transparent-border;
    border-bottom: 1px solid $transparent-border;
  }

  .tab_wrapper .content_wrapper .accordian_header .arrow {
    background: transparent;
  }

  .tabs-style-3 .nav.panel-tabs li a.active {
    background: $white-05;
  }

  .flot-text .flot-x-axis,
  .flot-text .flot-y-axis {
    div {
      color: $white  !important;
    }
  }

  .morris-wrapper-demo text,
  .morris-donut-wrapper-demo text {
    fill: $white;
  }

  .switcher-wrapper .leftmenu-styles,
  .switcher-wrapper .header-styles {
    display: none !important;
  }

  a.text-dark:hover,
  a.text-dark:focus {
    color: $white  !important;
  }

  @media (min-width: 992px) {

    &.horizontal .main-sidemenu .slide-left,
    &.horizontal .main-sidemenu .slide-right {
      svg {
        color: $white;
        fill: $white  !important;
      }
    }
  }

  // skin-modes //
  @media (min-width: 992px) {

    &.hover-submenu,
    &.hover-submenu1 {
      &.app.sidenav-toggled .side-menu__label {
        color: $white  !important;
      }

      &.app.sidenav-toggled-open .slide-menu {
        background-color: $transparent-body;
        border: 1px solid $transparent-border;
      }
    }

    &.icontext-menu {
      &.app.sidenav-toggled .side-menu__label {
        color: $white  !important;
      }

      &.app.sidenav-toggled-open .slide-menu {
        background-color: transparent;
        border: 0;
      }
    }

    &.app.sidenav-toggled-open .side-menu__label1 {
      border-bottom: 1px solid $transparent-border;
    }
  }

  @media (min-width: 1400px) {
    &.layout-boxed .page {
      background: $transparent-body;
      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
    }
  }

  // !skin-modes //
  .intl-tel-input .flag-dropdown .country-list .country.highlight {
    background-color: $transparent-body;
  }

  .intl-tel-input .flag-dropdown .country-list .divider {
    border-bottom: 1px solid $transparent-border;
  }

  .intl-tel-input .flag-dropdown .country-list {
    background-color: $transparent-body;
  }

  .intl-tel-input .flag-dropdown .selected-flag {
    background: $transparent-body;
  }

  .main-content-app .card.custom-card {
    background-color: transparent !important;
  }

  .notification .notification-time .date {
    color: $white  !important;
  }

  .notification .notification-time .time {
    color: $white  !important;
  }

  .btn-primary {
    border-color: $primary;
  }

  .tab_wrapper.right_side>ul li.active:before {
    background: $transparent-body;
  }

  .tab_wrapper.right_side>ul li:after {
    background: $transparent-body;
  }

  .tab_wrapper>ul li {
    border: 1px solid $transparent-border;
    border-top: 3px solid $transparent-border;
  }

  .tab_wrapper.right_side>ul {
    border-bottom: 1px solid $transparent-border;
  }

  .tab_wrapper.right_side>ul li.active {
    border-color: $transparent-border  !important;
  }

  .tab_wrapper.right_side .content_wrapper {
    border: 1px solid $transparent-border;
  }

  .tabs-style-3 {
    border: 1px solid $transparent-border;
  }

  @media (min-width: 992px) {
    &.horizontal {
      .main-header {
        background: $transparent-theme  !important;
      }

      .sticky.sticky-pin {
        .app-sidebar.horizontal-main {
          background-color: $transparent-body  !important;
        }
      }

      .app-sidebar.horizontal-main {
        background-color: $transparent-theme  !important;
      }

      .horizontal-main .slide .slide-menu,
      .horizontal-main .slide .sub-slide-menu {
        background-color: $transparent-body  !important;
        border: 1px solid $transparent-border  !important;
      }

      .logo-horizontal {
        .logo-1 {
          display: none !important;
        }

        .dark-logo-1 {
          display: block !important;
        }
      }
    }
  }

  .irs-grid-text {
    color: #fff;
  }

  form[role="search"].active {
    background: $transparent-body;
  }

  .main-header form[role="search"].active input {
    color: $white  !important;
  }

  @media (max-width: 991.98px) {
    .app-sidebar {
      background: $transparent-body  !important;
    }

    &.sidenav-toggled .app-sidebar {
      background: $transparent-body  !important;
    }

    .main-sidemenu {
      margin-top: 0px !important;
    }

    &.sidenav-toggled .side-menu .slide .side-menu__item.active {
      border-right-color: $white  !important;
      border-left-color: $white  !important;
    }
  }

  .modal-backdrop.show {
    opacity: 0.6;
  }

  .theme-layout {
    display: none !important;
  }

  &.sidenav-toggled.sidenav-toggled-open {
    .app-sidebar {
      border-right: 1px solid $primary-02;
      background: $primary  !important;
    }

    .main-sidebar-header {
      background: rgba(0, 0, 0, 0.2);
    }
  }

  .app-sidebar.sidebar-scroll {
    .main-sidebar-header {
      background-color: $primary  !important;
    }
  }

  &.sidebar-mini .side-menu {
    height: 150vh !important;
    padding-top: 21px;
    background-color: $transparent-theme  !important;
  }

  .app-sidebar .slide-menu .slide-item::before {
    color: $white;
    opacity: 0.5;
  }

  .slide .sub-side-menu__item:before {
    color: $white;
    opacity: 0.5;
  }

  .slide.is-expanded .sub-slide-item2:before {
    color: $white;
    opacity: 0.5;
  }

  .pulse:before {
    background: rgb(8, 104, 88);
  }

  .breadcrumb-item.active {
    color: $white;
  }

  .main-header.side-header.sticky.nav.nav-item.fixed-header.visible-title.sticky-pin {
    background: $primary;
  }

  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: $white transparent $white transparent;
  }

  .dataTables_wrapper .dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: $white;
  }

  .table> :not(caption)>*>* {
    background-color: transparent !important;
  }

  .text-success {
    color: $success  !important;
  }

  .badge-success-transparent {
    color: $success;
    background-color: rgba(8, 104, 88, 0.15) !important;
  }

  .badge-light-transparent {
    color: $white;
    background-color: rgba(255, 255, 255, 0.1);
  }

  @media (min-width: 992px) {
    .main-header-left .btn {
      color: $white;
    }
  }

  // Plugin primary colors//

  .tree li i {
    color: $white;
  }

  .bootstrap-tagsinput .badge {
    background-color: $primary;
    border: 1px solid $primary-border;
  }

  .sweet-alert button {
    background-color: $primary  !important;
    border-color: $white-8;
  }

  // Quill editor styles //

  .ql-snow.ql-toolbar button:hover,
  .ql-snow .ql-toolbar button:hover,
  .ql-snow.ql-toolbar button:focus,
  .ql-snow .ql-toolbar button:focus,
  .ql-snow.ql-toolbar button.ql-active,
  .ql-snow .ql-toolbar button.ql-active,
  .ql-snow.ql-toolbar .ql-picker-label:hover,
  .ql-snow .ql-toolbar .ql-picker-label:hover,
  .ql-snow.ql-toolbar .ql-picker-label.ql-active,
  .ql-snow .ql-toolbar .ql-picker-label.ql-active,
  .ql-snow.ql-toolbar .ql-picker-item:hover,
  .ql-snow .ql-toolbar .ql-picker-item:hover,
  .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
  .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: $primary;
  }

  .ql-snow.ql-toolbar button:hover .ql-fill,
  .ql-snow .ql-toolbar button:hover .ql-fill,
  .ql-snow.ql-toolbar button:focus .ql-fill,
  .ql-snow .ql-toolbar button:focus .ql-fill,
  .ql-snow.ql-toolbar button.ql-active .ql-fill,
  .ql-snow .ql-toolbar button.ql-active .ql-fill,
  .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
  .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
  .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
  .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
  .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
  .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
  .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
  .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
  .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
  .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
  .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
  .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
  .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: $primary;
  }

  .ql-snow.ql-toolbar button:hover .ql-stroke,
  .ql-snow .ql-toolbar button:hover .ql-stroke,
  .ql-snow.ql-toolbar button:focus .ql-stroke,
  .ql-snow .ql-toolbar button:focus .ql-stroke,
  .ql-snow.ql-toolbar button.ql-active .ql-stroke,
  .ql-snow .ql-toolbar button.ql-active .ql-stroke,
  .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
  .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
  .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
  .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
  .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
  .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
  .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
  .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
  .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
  .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
  .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
  .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
  .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
  .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
  .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
  .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
  .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
  .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
  .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: $primary;
  }

  .ql-snow a {
    color: $primary;
  }

  // !Quill editor styles //

  // gallery //

  .lg-actions .lg-next,
  .lg-actions .lg-prev {
    background-color: $primary-05;
    border: 1px solid $primary;
  }

  .lg-toolbar {
    background-color: $primary-05;
  }

  //  !gallery //

  // Bootstrap datepicker //
  .datepicker .datepicker-switch {
    color: $white;
  }

  .datepicker .datepicker-switch:hover,
  .datepicker .prev:hover,
  .datepicker .next:hover,
  .datepicker tfoot tr th:hover {
    color: $primary  !important;
  }

  .datepicker table tr td.disabled,
  .datepicker table tr td.disabled:hover {
    color: $primary;
  }

  .datepicker table tr td.active,
  .datepicker table tr td.active:hover,
  .datepicker table tr td.active.disabled,
  .datepicker table tr td.active.disabled:hover {
    background-image: -moz-linear-gradient(to bottom, $primary, $primary);
    background-image: -ms-linear-gradient(to bottom, $primary, $primary);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($primary), to($primary));
    background-image: -webkit-linear-gradient(to bottom, $primary, $primary);
    background-image: -o-linear-gradient(to bottom, $primary, $primary);
    background-image: linear-gradient(to bottom, $primary, $primary);
    background-repeat: repeat-x;
    filter: gradient(startColorstr='$primary', endColorstr='$primary', GradientType=0);
    border-color: $primary;
  }

  .datepicker table tr td span:hover,
  .datepicker table tr td span.focused {
    background: $primary;
  }

  .datepicker table tr td span.disabled,
  .datepicker table tr td span.disabled:hover {
    background: none;
    color: $primary;
  }

  .datepicker table tr td span.active,
  .datepicker table tr td span.active:hover,
  .datepicker table tr td span.active.disabled,
  .datepicker table tr td span.active.disabled:hover {
    background-image: -moz-linear-gradient(to bottom, $primary, $primary);
    background-image: -ms-linear-gradient(to bottom, $primary, $primary);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($primary), to($primary));
    background-image: -webkit-linear-gradient(to bottom, $primary, $primary);
    background-image: -o-linear-gradient(to bottom, $primary, $primary);
    background-image: linear-gradient(to bottom, $primary, $primary);
    filter: gradient(startColorstr='$primary', endColorstr='$primary', GradientType=0);
    border-color: $primary;
  }

  .datepicker table tr td span.old,
  .datepicker table tr td span.new {
    color: $primary;
  }

  // !Bootstrap datepicker //

  // !Plugin primary colors//

  .form-control:focus {
    border-color: $primary;
  }

  .btn-white:not(:disabled):not(.disabled):active,
  .btn-white:not(:disabled):not(.disabled).active {
    color: $white;
    background-color: $transparent-theme;
    border-color: $transparent-border  !important;
  }

  .btn-white:focus {
    background-color: $transparent-theme  !important;
    color: $white;
    border-color: $transparent-border  !important;
  }

  .qty {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .card {
    background-color: $transparent-theme  !important;
    border-color: $transparent-border  !important;
    box-shadow: 0 0 10px rgba(28, 39, 60, 0.1);
  }

  .main-header {
    background: $transparent-theme;
    border-bottom: 1px solid $transparent-border;
    box-shadow: none;
  }

  .side-header {
    border-right: 0;
  }

  .header-icons .new.nav-link {
    color: $white;
  }

  .card-dashboard-audience-metrics {

    .card-header,
    .card-body {
      background-color: $transparent-theme;
    }
  }

  .card-header {
    background-color: transparent;
    border-bottom: 0;
  }

  .border-bottom {
    border-bottom: 1px solid rgba(234, 236, 241, 0.2) !important;
  }

  .border-top {
    border-top: 1px solid rgba(234, 236, 241, 0.2) !important;
  }

  .border-right {
    border-right: 1px solid rgba(234, 236, 241, 0.2) !important;
  }

  .border-left {
    border-left: 1px solid rgba(234, 236, 241, 0.2) !important;
  }

  .border {
    border: 1px solid rgba(234, 236, 241, 0.2) !important;
  }

  .table tbody tr,
  .table-bordered thead th {
    background-color: transparent;
  }
}

.table-bordered thead td {
  background-color: transparent;
}

.transparent-theme {
  .table {
    color: $white-7;
    border: 1px solid $transparent-border  !important;
  }

  .table-bordered {
    border: 1px solid rgba(234, 236, 241, 0.1) !important;

    th,
    td {
      border: 1px solid rgba(234, 236, 241, 0.1);
    }
  }

  .card-dashboard-audience-metrics .card-body h4 {
    color: #fcfcfd;
  }

  .progress {
    background-color: $white-1;
  }

  .card-dashboard-audience-metrics .flot-chart .flot-x-axis>div span:last-child {
    color: #b9c6de;
  }

  .main-footer {
    background-color: transparent;
    border-top: 0px;
  }

  .sidebar {
    &.sidebar-right {
      box-shadow: 5px 7px 26px -5px #171a21 !important;
    }

    .tabs-menu ul {
      border-bottom: 1px solid rgba(235, 234, 241, 0.1);
    }
  }

  .chat .contacts li {
    border-bottom: 1px solid rgba(227, 227, 247, 0.1);
  }

  .form-control {
    color: $white;
    background-color: transparent;
    border: 1px solid $transparent-border;
  }

  .list-group-item {
    background-color: transparent !important;
    border: 1px solid $transparent-border;
    color: $white;
  }

  .main-header-center .form-control {
    border-color: $transparent-border  !important;
    background-color: $transparent-theme  !important;
  }

  .main-header {
    form[role="search"] {
      &.active input {
        background: $transparent-body;
      }

      button[type="reset"] {
        background: transparent;
      }
    }

    .input-group-btn .btn:hover i {
      color: $white;
    }
  }

  .main-header-notification .dropdown-menu {
    background-color: $primary;
  }

  .notification-label {
    color: $white;
  }

  .main-notification-list a:hover,
  .main-message-list a:hover {
    background: $white-05;
  }

  .notification-subtext {
    color: $white-7;
  }

  .main-header-message .dropdown-footer,
  .main-header-notification .dropdown-footer {
    border-top: 1px solid rgba(220, 225, 239, 0.1);
    background: $transparent-theme;
    border-radius: 0px 0px 3px 3px;
  }

  .dropdown-menu {
    color: $white;
    background-color: $primary;
    border: 1px solid rgba(138, 153, 191, 0.125);
  }

  .main-message-list a {
    .name {
      color: $white;
    }

    .time,
    .desc {
      color: $white-7;
    }
  }

  .task-line a {
    color: $white;
  }

  .latest-tasks .nav-tabs .nav-link {
    color: #bc289a;
    background: transparent;
  }

  .chips p {
    color: $white-5;
  }

  .chip {
    color: $white;
    background-color: rgba(245, 246, 251, 0.1);
  }

  .form-select {
    color: #ffffe3;
    background-color: $transparent-theme;
    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='%23ffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    border: 1px solid $transparent-border;
  }

  .ps__thumb-y {
    background-color: transparent;
  }

  .ps__rail-y:hover>.ps__thumb-y,
  .ps__rail-y:focus>.ps__thumb-y,
  .ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: $transparent-border;
    width: 8px;
  }
}

@media (min-width: 1245px) {
  .transparent-theme .main-header-center .form-control {
    border-color: $transparent-border  !important;
    background-color: transparent;
  }
}

.chip:hover {
  background: #8485fb;
  color: $white;
}

.transparent-theme {
  &.sidebar-mini .main-sidemenu {
    margin-top: 64px;
  }

  .latest-tasks .check-box .ckbox span:before {
    border: 1px solid $transparent-border;
  }

  .table {

    th,
    td {
      border-top: 1px solid $transparent-border;
    }
  }

  #global-loader {
    background: #1a233a;
  }

  .app-sidebar {
    background: transparent !important;
    border-top: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-right: 1px solid $transparent-border;
  }

  .main-sidebar-header {
    background: transparent;
  }

  .side-menu__label,
  .side-menu .side-menu__icon {
    color: $white;
    fill: $white;
  }

  .app-sidebar__user .user-info h4 {
    color: $white  !important;
  }

  .side-menu h3 {
    color: $white-4  !important;
  }

  .main-sidebar-header {
    border-bottom: 0px solid $transparent-border;
    border-right: 0px solid $transparent-border;
  }

  &.sidenav-toggled-open {
    .main-sidebar-header {
      border-bottom: 1px solid $transparent-border;
    }
  }

  .main-sidebar-loggedin .media-body h6 {
    color: $white;
  }

  .app-sidebar .slide.active .side-menu__item {
    background: transparent;
  }

  .slide {
    a {
      color: $white-8;
    }

    &.is-expanded {
      background: transparent;

      a {
        color: $white-6;
      }
    }
  }

  .side-menu__item {
    color: $white-7;
  }

  .app-sidebar__user .user-pro-body img {
    border: 2px solid $primary;
    background: rgba(109, 110, 243, 0.2);
  }

  .slide.is-expanded:before {
    background: $transparent-border;
  }

  .slide-menu .slide-item:before {
    border-color: #6d7582;
  }

  .main-logo.transparent-theme {
    display: block;
  }

  .desktop-logo {
    margin: 0 auto;
    display: none;
  }

  .open-toggle svg g,
  .close-toggle svg g {
    fill: $white;
  }

  .angle {
    color: $white  !important;
  }

  .main-header-center {

    .btn:hover,
    .sp-container button:hover {
      color: $white;
    }
  }

  .sp-container .main-header-center button:hover {
    color: $white;
  }

  .main-header-center {

    .btn:focus,
    .sp-container button:focus {
      color: $white;
    }
  }

  .sp-container .main-header-center button:focus,
  .main-header .input-group-btn .btn i {
    color: $white;
  }

  .main-mail-item {
    &.unread {
      background-color: $transparent-theme;
    }

    border-top: 1px solid $transparent-border;
    border-bottom: 1px solid $transparent-border;
  }

  .main-content-title {
    color: $white;
  }

  .main-mail-options {
    border: 1px solid $transparent-border;
    border-bottom: 0;
  }

  .main-mail-list {
    border: 1px solid $transparent-border;
  }

  .main-mail-item {
    background-color: $transparent-theme;
  }

  .main-mail-subject strong {
    color: $white-7;
  }

  .ckbox span:before {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid $transparent-border;
  }

  .main-mail-star {
    color: $white-2;
  }

  .main-nav-column .nav-link {
    color: $white;

    &:hover,
    &:focus {
      color: $white;
    }
  }

  .btn-light {
    color: $white;
    background-color: $transparent-border;
    border-color: $transparent-border;
  }

  .main-nav-column .nav-link {

    &:hover i:not([class*=" tx-"]),
    &:focus i:not([class*=" tx-"]) {
      color: $white;
    }
  }

  .nav-search .input-group-text {
    color: $white;
    background-color: $white-2;
    border: 1px solid $white-1;
    border-left: 0;
  }

  .main-nav-column .nav-link.active {
    color: $primary  !important;

    &:hover,
    &:focus {
      color: $primary  !important;
    }
  }

  .main-mail-header .btn-group .btn {
    border-color: #555c6e;
    background-color: #555c6e;
  }

  .table> :not(:last-child)> :last-child>* {
    border-bottom-color: $transparent-border  !important;
  }

  .table.dataTable> :not(:last-child)> :last-child>* {
    border-bottom-color: transparent !important;
  }
}

/*----- Left-Sidemenu -----*/

.main-mail-header .btn-group .sp-container button,
.sp-container .main-mail-header .btn-group button {
  border-color: $transparent-border;
  background-color: #555c6e;
}

.transparent-theme {
  .main-mail-header .btn-group {

    .btn.disabled,
    .sp-container button.disabled {
      background-color: #555c6e;
      color: $border;
      border-color: $transparent-border;
    }
  }

  .sp-container .main-mail-header .btn-group button.disabled {
    background-color: #555c6e;
    color: $border;
    border-color: $transparent-border;
  }

  .main-mail-header .btn-group {

    .btn:hover,
    .sp-container button:hover {
      color: $white;
      background-color: $white-3;
      border-left: 0;
    }
  }

  .sp-container .main-mail-header .btn-group button:hover {
    color: $white;
    background-color: $white-3;
    border-left: 0;
  }

  .main-mail-header .btn-group {

    .btn:focus,
    .sp-container button:focus {
      color: $white;
      background-color: $white-3;
      border-left: 0;
    }
  }

  .sp-container .main-mail-header .btn-group button:focus {
    color: $white;
    background-color: $white-3;
    border-left: 0;
  }

  .card-header,
  .card-footer {
    position: relative;
    border-color: $transparent-border;
  }

  hr {
    border-color: $transparent-border;
  }

  .main-content-label,
  .card-table-two .card-title,
  .card-dashboard-eight .card-title {
    color: $white;
  }

  .form-label {
    color: #cfdaec;
  }

  .select2-container--default .select2-selection--single {
    background-color: transparent;
    border-color: $transparent-border  !important;

    .select2-selection__rendered {
      color: #cfdaec;
    }
  }

  .select2-dropdown {
    background-color: $transparent-body;
    border-color: $white-05;
  }

  .select2-container--default {
    .select2-results__option[aria-selected="true"] {
      background-color: $white-05;
    }

    .select2-search--dropdown .select2-search__field {
      border-color: $transparent-border;
      background: $transparent-theme;
      color: $white;
    }
  }

  .main-nav-line-chat {
    border-bottom: 0px solid $transparent-border  !important;
  }

  .main-nav-line .nav-link {
    color: $white-4;
  }

  .main-chat-msg-name h6 {
    color: $white;
  }

  .main-chat-header {
    border-bottom: 1px solid $transparent-border;
    box-shadow: none !important;
  }

  .main-nav-line-chat .nav-link.active {
    color: #ffffff !important;
    background: $primary;
  }

  .main-chat-contacts-more {
    background-color: $primary;
  }

  .main-chat-list {
    .media {
      &.new {
        background-color: $transparent-theme;

        .media-body p {
          color: $white-6;
        }

        .media-body .media-contact-name span:last-child {
          color: $white-6;
        }

        .media-contact-name span:first-child {
          color: #f3f6fb;
        }
      }

      border-bottom: 1px solid $transparent-border;
    }

    .media-contact-name span:first-child {
      color: $white  !important;
    }

    .media.selected {
      background-color: rgba(243, 246, 251, 0.1);
    }
  }

  .main-chat-contacts-wrapper {
    border-bottom: 1px solid $transparent-border;
  }

  .main-chat-list .media {

    &:hover,
    &:focus {
      background-color: rgba(252, 252, 252, 0.05);
    }

    &.selected .media-body p {
      color: $white;
    }
  }

  .main-msg-wrapper {
    background-color: $transparent-border;
    color: $white;
  }

  .main-chat-footer {
    background-color: transparent;
    z-index: 999;

    .form-control {
      background: transparent;
      border-color: transparent;
    }
  }

  .irs-line-mid,
  .irs-line-left,
  .irs-line-right {
    background-color: $transparent-border;
  }

  .irs-min,
  .irs-max {
    color: $white;
    background: $white-1;
  }

  .main-calendar .fc-header-toolbar h2 {
    color: $white;
  }

  .ui-datepicker {
    background-color: $transparent-body;
    box-shadow: 0 0 24px rgba(20, 28, 43, 0.6);
    border: 1px solid $white-1;

    .ui-datepicker-calendar td {
      border: 1px solid $white-3;
      background-color: transparent;

      span,
      a {
        color: $white;
      }
    }

    .ui-datepicker-title,
    .ui-datepicker-calendar th {
      color: $white;
    }
  }

  .main-datepicker .ui-datepicker .ui-datepicker-calendar th {
    color: $bg-active;
  }

  .card--calendar .ui-datepicker .ui-datepicker-header {
    border-bottom: 1px solid rgba(227, 227, 227, 0.1);
  }

  .ui-datepicker .ui-datepicker-calendar td a:hover {
    background-color: $primary;
    color: $white;
  }

  .main-calendar {
    .fc-view>table {
      background-color: $transparent-theme;
    }

    .fc-head-container .fc-day-header {
      color: $white;
    }

    .fc-view {
      .fc-day-number {
        color: $white;
      }

      .fc-other-month {
        background-color: rgba(40, 92, 247, 0.07);
      }
    }

    .fc-content {
      border-color: $transparent-border;
    }
  }
}

.main-calendar .fc-divider {
  border-color: $transparent-border;
}

.transparent-theme .main-calendar {

  .fc-list-heading td,
  .fc-list-view,
  .fc-popover,
  .fc-row,
  tbody,
  td {
    border-color: $transparent-border;
  }
}

.main-calendar th {
  border-color: $transparent-border;
}

.transparent-theme {
  .main-calendar {
    thead {
      border-color: $transparent-border;
    }

    .fc-view .fc-day-number {

      &:hover,
      &:focus {
        color: $white;
        background-color: transparent;
      }
    }

    td.fc-today {
      background-color: $primary;
    }

    .fc-view>table> {
      thead {

        th,
        td {
          border-color: $white-1;
        }
      }

      tbody>tr>td {
        border-color: $transparent-border;
      }
    }

    .fc-header-toolbar button {
      background-color: #384361;
      border: 1px solid $transparent-border;

      &.fc-state-active {
        background-color: $primary;
      }
    }

    .fc-view {

      &.fc-listMonth-view .fc-list-item,
      &.fc-listWeek-view .fc-list-item {
        background-color: #333d5a;
      }
    }
  }


  .fc-unthemed {

    .fc-divider,
    .fc-list-heading td,
    .fc-popover .fc-header {
      background: #384361;
    }
  }

  .main-calendar .fc-view {

    &.fc-listMonth-view .fc-list-item-title .fc-desc,
    &.fc-listWeek-view .fc-list-item-title .fc-desc {
      color: $white-6;
    }

    &.fc-listMonth-view .fc-list-item-title a,
    &.fc-listWeek-view .fc-list-item-title a,
    &.fc-listMonth-view .fc-list-heading-main span:last-child,
    &.fc-listWeek-view .fc-list-heading-main span:last-child {
      color: $white;
    }
  }

  .main-contact-info-header .media-body p,
  .tx-inverse {
    color: $white-8;
  }

  .contact-icon:hover {
    background: $white-1;
    color: $white;
  }

  .main-contact-info-header {
    border-bottom: 1px solid $transparent-border;
  }

  .main-contact-info-body {
    .media-body {
      span {
        color: $white-8;
      }

      label {
        color: $white-4;
      }
    }

    .media+.media::before {
      border-top: 1px dotted rgba(226, 232, 245, 0.2);
    }
  }

  .main-contact-body {
    span {
      color: $white-4;
    }

    h6 {
      color: $white-8;
    }
  }

  .main-contact-item {
    &.selected {
      border-left-color: $primary;
      border-top-color: $transparent-border  !important;
      border-bottom-color: $transparent-border  !important;
      background-color: $transparent-border;
    }

    +.main-contact-item {
      border-top-color: rgba(227, 231, 237, 0.19);

      &::before {
        border-top: 1px solid rgba(227, 231, 237, 0.05);
      }
    }

    &:hover,
    &:focus {
      background-color: $transparent-border  !important;
      border-top-color: $transparent-border;
      border-bottom-color: $transparent-border;
    }
  }

  .main-contact-label::after {
    border-bottom: 1px solid $transparent-border;
  }

  .notifit_confirm,
  .notifit_prompt {
    background-color: $transparent-theme;
  }

  .tree {
    li {
      a {
        text-decoration: none;
        color: $white-6;
      }

      color: $white-6;
    }

    ul {
      li:last-child:before {
        background: $transparent-body;
      }

      &:before {
        border-left-color: $white-4;
        border-right-color: $white-4;
      }

      li:before {
        border-top-color: $white-4;
      }
    }
  }

  .text-muted {
    color: $white-7  !important;
  }

  .main-icon-group {
    color: $white-8;
  }

  .table thead th {
    border-bottom: 1px solid $transparent-border;
    border-top: 0 !important;
    color: $white;
  }

  .table-hover tbody tr:hover {
    color: $white;
    background-color: rgba($white, 0.04) !important;
  }

  table.dataTable {
    border: 1px solid $transparent-border;

    thead {

      th,
      td {
        color: $white;
      }

      .sorting_asc,
      .sorting_desc {
        background-color: transparent;
      }
    }
  }

  #example-delete.table thead th {
    border-bottom: 0;
  }

  .dataTables_wrapper {

    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_processing,
    .dataTables_paginate {
      color: $white;
    }

    .dataTables_filter input {
      border: 1px solid $transparent-border;
    }

    .dataTables_paginate .paginate_button {
      background-color: transparent;
    }
  }

  .page-link {
    color: $white;
    background-color: $transparent-theme;
  }

  .dataTables_wrapper .dataTables_paginate {
    .page-item.disabled .page-link {
      background-color: $transparent-theme;
      color: $white;
    }
  }

  select option {
    background: $primary;
  }

  table.dataTable tbody tr.selected {
    background: $transparent-theme;
  }

  .example {
    padding: 1rem;
    border: 1px solid $transparent-border;
  }

  #icon-dismissalerts {
    .alert-default.alert-dismissible .close {
      color: $white;
    }
  }

  .main-table-reference> {
    thead>tr> {

      th,
      td {
        border: 1px solid $transparent-border;
      }
    }

    tbody>tr> {

      th,
      td {
        border: 1px solid $transparent-border;
      }
    }
  }

  pre {
    color: #dfe1ef;
    background-color: #141b2d;
    text-shadow: 0 1px #242266;
  }

  code.language-markup {
    background: transparent;
    border: transparent;
  }

  .token {
    color: #dc2a2a;

    &.selector,
    &.attr-name,
    &.string,
    &.char,
    &.builtin,
    &.inserted {
      color: #4e9cf1;
    }

    &.atrule,
    &.attr-value,
    &.keyword {
      color: #e40dae;
    }

    &.operator,
    &.entity,
    &.url {
      color: #ecc494;
      background: $white-1;
    }
  }

  .language-css .token.string,
  &.style .token.string {
    color: #ecc494;
    background: $white-1;
  }

  .highlight {
    border: 1px solid $transparent-border  !important;
    background: $transparent-body;
  }

  .clipboard-icon {
    background: #141b2d;
    border: 1px solid $transparent-border;
  }

  .main-table-reference {
    >thead>tr> {

      th,
      td {
        background: $transparent-theme  !important;
        border: 1px solid $transparent-border  !important;
      }
    }

    background: transparent;
  }

  .breadcrumb-style .breadcrumb-item a,
  .breadcrumb-style1 .breadcrumb-item a,
  .breadcrumb-style2 .breadcrumb-item a,
  .breadcrumb-style3 .breadcrumb-item a {
    color: $white-6;
  }

  .dropdown-item {
    color: $white;

    &:hover,
    &:focus {
      background: rgba(255, 255, 255, 0.05);
    }
  }

  .dropdown-divider {
    border-top: 1px solid $transparent-border;
  }

  .img-thumbnail {
    background-color: $white-1;
    border: 1px solid $transparent-border;

    p {
      color: $white-5;
      font-size: 13px;
    }
  }

  .bd {
    border-color: $transparent-border;
  }

  .main-nav .nav-link {

    &:hover,
    &:focus {
      color: $white;
    }
  }

  .nav-pills .nav-link {
    color: $white-4;

    &:hover,
    &:focus {
      color: $white;
    }

    &.active {
      color: $white  !important;
    }
  }

  .main-nav .nav-link {
    color: $white-4;
  }

  .bg-gray-300 {
    background-color: rgba($white, 0.3);
  }

  #tab .bg-gray-300 {
    background-color: #37415f;
    border-bottom: 1px solid $transparent-border;
  }

  .nav-tabs .nav-link {

    &.active,
    &:hover,
    &:focus {
      background-color: $primary !important;
      color: $white;
    }

    color: rgb(255, 255, 255);
  }

  .popover-static-demo {
    background-color: $transparent-theme;
  }

  .popover {
    background-color: $transparent-body;
    border-color: $transparent-border;
  }

  .popover-body {
    color: $white-7;
  }

  .popover-header {
    color: $white-7;
    background-color: $transparent-theme;
    border-color: $transparent-border;
  }

  .bs-popover-top>.arrow::before,
  .bs-popover-auto[data-popper-placement^="top"]>.arrow::before {
    border-top-color: $transparent-border;
  }

  .bs-popover-top>.arrow::after,
  .bs-popover-auto[data-popper-placement^="top"]>.arrow::after {
    border-top-color: $transparent-border;
  }

  .bs-popover-bottom>.arrow::after,
  .bs-popover-auto[data-popper-placement^="bottom"]>.arrow::after {
    border-bottom-color: $transparent-border;
  }

  .bs-popover-bottom>.arrow::before,
  .bs-popover-auto[data-popper-placement^="bottom"]>.arrow::before {
    border-bottom-color: $transparent-border;
  }

  .bs-popover-left>.arrow::after,
  .bs-popover-auto[data-popper-placement^="left"]>.arrow::after,
  .bs-popover-left>.arrow::after,
  .bs-popover-auto[data-popper-placement^="left"]>.arrow::after {
    border-left-color: $transparent-border;
  }

  .bs-popover-right>.arrow::after,
  .bs-popover-auto[data-popper-placement^="right"]>.arrow::after {
    border-right-color: $transparent-border;
  }

  .bs-popover-right>.arrow::before,
  .bs-popover-auto[data-popper-placement^="right"]>.arrow::before {
    border-right-color: $transparent-border;
  }

  .bs-popover-left>.arrow::before,
  .bs-popover-auto[data-popper-placement^="left"]>.arrow::before {
    border-left-color: $transparent-border;
  }

  .bg-gray-200 {
    background-color: rgba($white, 0.2);
  }

  .media-body {
    font-size: 13px;
    color: $white-8;
  }

  .bg-gray-100 {
    background-color: rgba($white, 0.01);
  }

  .tooltip-static-demo {
    background-color: $transparent-theme;
  }

  .toast-header {
    border-bottom-color: $transparent-border;
  }

  .toast {
    background-color: $white-1;
    border-color: $transparent-border;
  }

  .toast-header {
    color: rgba(255, 255, 255, 0.58);
    background: $primary-02;
  }

  .bootstrap-tagsinput {
    .badge {
      margin: 11px 0 12px 10px;
    }

    background-color: transparent;
  }

  .tag {
    color: $white;
    background-color: rgba(239, 239, 245, 0.1);
  }

  .accordion {
    .card-header a {
      color: $white;
      background-color: $transparent-theme;
    }

    .card-body {
      background-color: $transparent-theme;
    }

    .card-header a.collapsed {

      &:hover,
      &:focus {
        color: $white;
        background-color: $transparent-theme;
      }
    }
  }

  .modal-content {
    background-color: $transparent-body;
    border: 1px solid $transparent-border;
  }

  .modal-header {
    border-bottom: 1px solid $transparent-border;
  }

  .modal-title {
    color: $white;
  }

  .modal-footer {
    border-top: 1px solid $transparent-border;
  }

  .modal-content-demo .modal-body h6 {
    color: $white;
  }

  .vtimeline {
    .timeline-wrapper {
      .timeline-panel {
        background: rgba($white, 0.05);
        box-shadow: 0 8px 16px 0 rgba(47, 53, 84, 0.24);
      }

      &.timeline-inverted .timeline-panel:after {
        border-right: 14px solid rgba(255, 255, 255, 0.05);
        border-left: 0 solid $transparent-theme;
      }

      .timeline-panel:after {
        border-left: 14px solid rgba(255, 255, 255, 0.05);
        border-right: 0 solid $transparent-theme;
      }
    }

    &:before {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }

  .transparent-theme.bg-img1 .vtimeline {
    .timeline-wrapper {
      .timeline-panel {
        background: rgba($white, 0.05);
        box-shadow: 0 8px 16px 0 rgba(47, 53, 84, 0.24);
      }

      &.timeline-inverted .timeline-panel:after {
        border-right: 14px solid rgba(255, 255, 255, 0.05) !important;
        border-left: 0 solid $transparent-theme;
      }

      .timeline-panel:after {
        border-left: 14px solid rgba(255, 255, 255, 0.05) !important;
        border-right: 0 solid $transparent-theme;
      }
    }

    &:before {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }

  .timeline-body {
    color: $white-6;
  }

  .sweet-alert {
    background-color: transparent;
    backdrop-filter: blur(30px);
    border: 1px solid $transparent-border;
    box-shadow: 0 4px 16px $transparent-theme;

    h2 {
      color: $white;
    }
  }

  .btn-outline-light {
    border-color: $transparent-border;
    color: $white;

    &:hover,
    &:focus {
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid $transparent-border  !important;
      box-shadow: none !important;
      color: $white  !important;
    }
  }

  .dropdown .fe-more-vertical {
    color: $white-6;
  }

  .main-content-body-profile .nav {
    border-bottom: 1px solid $transparent-border;
  }

  .card-body+.card-body {
    border-top: 1px solid $transparent-border;
  }

  .rating-stars {
    input {
      color: $white;
      background-color: $transparent-theme;
      border: 1px solid $transparent-border;
    }

    .rating-stars-container .rating-star {
      color: #2e3954;

      &.is--active,
      &.is--hover {
        color: #f1c40f !important;
      }
    }
  }

  .br-theme-bars-horizontal .br-widget a {

    &.br-active,
    &.br-selected {
      background-color: $primary  !important;
    }
  }

  .br-theme-bars-pill .br-widget a {

    &.br-active,
    &.br-selected {
      background-color: $primary  !important;
      color: white;
    }
  }

  .br-theme-bars-1to10 .br-widget a,
  .br-theme-bars-movie .br-widget a,
  .br-theme-bars-horizontal .br-widget a {
    background-color: $primary-02;
  }

  .br-theme-bars-1to10 .br-widget a {

    &.br-active,
    &.br-selected {
      background-color: $primary  !important;
    }
  }

  .br-theme-bars-movie .br-widget a {

    &.br-active,
    &.br-selected {
      background-color: $primary  !important;
    }
  }

  .br-theme-bars-square .br-widget a {
    border: 2px solid #4f576f;
    background-color: $transparent-theme;
    color: #8694a5;

    &.br-active,
    &.br-selected {
      border: 2px solid $primary;
      color: $primary;
    }
  }

  .br-theme-bars-pill .br-widget a {
    background-color: $primary-02;
  }

  .custom-file-label {
    color: $white-7;
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid $transparent-border;

    &::after {
      color: $white;
      background-color: $primary;
      border: 1px solid $primary;
    }
  }

  .input-group-text {
    color: rgb(230, 226, 226);
    background-color: $primary-02;
    border: 1px solid $transparent-border;
  }

  .sp-replacer {
    border-color: $transparent-border;
    background-color: #2d3653;

    &:hover,
    &:focus {
      border-color: $white-2;
    }
  }

  .sp-container {
    background-color: $transparent-theme;
    border-color: $transparent-border;
  }

  .select2-container--default {
    &.select2-container--focus .select2-selection--multiple {
      border-color: $white-1;
      background: $white-1;
    }

    .select2-selection--multiple {
      background-color: $white-1  !important;
      border-color: $white-1;
      background-color: $white-1  !important;
      color: $white;
      border-color: $white-1;
      background-color: $white-1  !important;
      border-color: $white-1;
    }

    &.select2-container--disabled .select2-selection--multiple {
      background-color: $white-1  !important;
    }
  }

  .SumoSelect {
    > {
      .CaptionCont {
        border: 1px solid $transparent-border;
        color: #99a6b7;
        background-color: $transparent-theme;
      }

      .optWrapper {
        background: $transparent-body;
        border: 1px solid $transparent-border;
        box-shadow: 0 2px 17px 2px rgb(7, 4, 86);
      }
    }

    .select-all {
      border-bottom: 1px solid $transparent-border;
      background-color: $transparent-theme;
    }

    >.optWrapper> {
      .options li.opt {
        border-bottom: 1px solid $transparent-border;
      }

      .MultiControls {
        border-top: 1px solid $transparent-border;
        background-color: $transparent-theme;
      }
    }

    &.open>.optWrapper {
      box-shadow: 0 2px 17px 2px rgb(28, 33, 64);
    }

    >.optWrapper {
      >.options li.opt:hover {
        background-color: rgba(244, 245, 245, 0.1);
      }

      &.multiple>.options li.opt span i {
        border: 1px solid $white-1;
        background-color: $white-1;
      }
    }

    .select-all>span i {
      border: 1px solid $white-1;
      background-color: $white-1;
    }
  }

  .dropify-wrapper {
    background-color: $transparent-theme;
    border: 1px solid $transparent-border;
    color: $white;

    .dropify-preview {
      background-color: transparent;
    }

    &:hover {
      background-image: -webkit-linear-gradient(135deg,
          rgba(250, 251, 254, 0.05) 25%,
          transparent 25%,
          transparent 50%,
          rgba(250, 251, 254, 0.1) 50%,
          rgba(250, 251, 254, 0.1) 75%,
          transparent 75%,
          transparent);
      background-image: linear-gradient(-45deg,
          rgba(250, 251, 254, 0.1) 25%,
          transparent 25%,
          transparent 50%,
          rgba(250, 251, 254, 0.1) 50%,
          rgba(250, 251, 254, 0.1) 75%,
          transparent 75%,
          transparent);
      -webkit-animation: stripes 2s linear infinite;
      animation: stripes 2s linear infinite;
    }
  }

  .dropify-wrapper.touch-fallback .dropify-clear {
    color: rgba($white, 0.7);
  }

  .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p {
    color: rgba($white, 0.7);
  }

  .ff_fileupload_wrap .ff_fileupload_dropzone {
    border: 2px dashed $transparent-border;
    background-color: $transparent-theme;
    background-image: url(../plugins/fancyuploder/fancy_upload-dark.png);

    &:hover,
    &:focus,
    &:active {
      background-color: $white-1;
      border-color: $white-1;
    }
  }

  .main-form-group {
    border: 1px solid $transparent-border;

    .form-control {
      padding: 0 15px;
    }
  }

  .parsley-style-1 {

    .parsley-input.parsley-error .form-control,
    .parsley-checkbox.parsley-error,
    .parsley-select.parsley-error .select2-container--default .select2-selection--single {
      background-color: #141b2d;
    }

    .wizard>.actions .disabled a {
      background-color: #ffffff;
      border-radius: 3px;
    }
  }

  .wizard {
    border: 1px solid $transparent-border;
    background-color: $transparent-theme;
    border-radius: 5px;

    > {
      .content {
        >.title {
          color: $white;
        }

        border-top: 1px solid $transparent-border;
        border-bottom: 1px solid $transparent-border;
      }
    }
  }

  #wizard3.wizard.vertical>.content {
    border-top: 0;
    border-bottom: 0;
  }

  .ql-scrolling-demo {
    border: 1px solid $white-1;

    .ql-container .ql-editor {
      color: $white-8;
    }
  }

  .ql-snow {
    .ql-picker-label {
      border: 1px solid $transparent-border;
      background-color: rgba($white, 0.1);
    }

    .ql-stroke {
      stroke: $white-8;
    }

    .ql-editor,
    &.ql-toolbar button {
      color: $white-8;
    }

    .ql-picker {
      color: $white-5;
    }

    &.ql-toolbar {
      border: 1px solid $white-1;
    }

    &.ql-container {
      border-color: $white-1;
    }

    .ql-picker-options {
      background-color: $transparent-theme;
    }
  }

  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: $transparent-border;
  }

  #modalQuill .modal-header {
    border-bottom: 0;
  }

  .main-profile-work-list .media-body {
    h6 {
      color: $white;
    }

    p {
      color: $white-4;
    }
  }

  .main-mail-star.active {
    color: #ffbd5a;
  }

  .sub-slide-menu .sub-side-menu__item.active {
    color: $white;
  }

  .main-profile-contact-list .media-body {
    div {
      color: $white-6;
    }

    span {
      color: $white;
    }
  }

  .plan-icon {
    border: 1px solid $transparent-border;
    background: rgba(245, 246, 251, 0.1);
  }

  .bg-success-transparent {
    background-color: rgba($success, 0.17) !important;
  }

  .bg-primary-transparent {
    background-color: $primary-02  !important;
  }

  .bg-secondary-transparent {
    background-color: rgba($secondary, 0.2) !important;
  }

  .bg-warning-transparent {
    background-color: rgba($warning, 0.1) !important;
  }

  .bg-pink-transparent {
    background-color: rgba($pink, 0.1) !important;
  }

  .bg-teal-transparent {
    background-color: rgba($teal, 0.12) !important;
  }

  .bg-purple-transparent {
    background-color: rgba($purple, 0.1) !important;
  }

  .bg-danger-transparent {
    background-color: rgba($danger, 0.1) !important;
  }

  .main-profile-name,
  .main-profile-body .media-body h6 {
    color: #fbfcff;
  }

  .main-profile-social-list .media-body a {
    color: $white;
    opacity: 0.5;
  }

  .profile-footer a {
    background: #141b2d;
    color: $white;
  }

  .billed-from h6 {
    color: #f4f5f8;
  }

  .invoice-title {
    color: rgb(225, 225, 225);
  }

  .main-invoice-list {
    .media-body h6 {
      color: $white;
    }

    .selected {
      background-color: rgba(244, 245, 248, 0.1);
      border-top-color: 1px dotted $transparent-border;
      border-bottom-color: $transparent-border;
      border-left-color: $transparent-border;
    }

    .media {
      +.media::before {
        border-top: 1px dotted transparent;
      }

      border: 1px dotted $transparent-border;

      &:hover,
      &:focus {
        background-color: rgba(244, 245, 248, 0.1);
      }
    }

    .media-body p {
      color: #9da5b5;

      span {
        color: #cbcfd8;
      }
    }
  }

  .table-invoice tbody>tr>th:first-child .invoice-notes p {
    color: $white-6;
  }
}

@media (max-width: 991px) {
  .transparent-theme .vtimeline .timeline-wrapper .timeline-panel:after {
    border-right: 14px solid $transparent-border  !important;
    border-left: 0 solid $transparent-border  !important;
  }
}

@media (min-width: 576px) {
  .transparent-theme .wizard.vertical> {

    .content,
    .actions {
      border-left: 1px solid $transparent-border;
    }
  }
}

.table-invoice tbody>tr>td:first-child .invoice-notes p {
  color: $white-6;
}

.transparent-theme {
  .table-invoice tbody>tr> {

    th:first-child,
    td:first-child {
      color: $white-6;
    }
  }

  .billed-from p,
  .billed-to p {
    color: $white-5;
  }

  .card-invoice .tx-gray-600 {
    color: #eef0f3;
  }

  .billed-to h6 {
    color: #d3d8e2;
  }

  .invoice-info-row {
    +.invoice-info-row {
      border-top: 1px dotted $transparent-border;
    }

    span:first-child {
      color: $white-3;
    }
  }

  .main-invoice-list {
    border-top: 1px solid $transparent-border;
  }

  .card-category {
    background: rgba(239, 242, 246, 0.1);
  }

  .pricing-card .list-unstyled li {
    border-bottom: 1px solid $transparent-border;
  }

  .price {

    &.panel-color>.panel-body,
    .panel-footer {
      background-color: rgb(38, 50, 78);
    }
  }

  .pricing .list-unstyled li {
    border-bottom: 1px solid $transparent-border;
  }

  .card--events .list-group-item h6 {
    color: $white-6;
  }

  .rdiobox span:before {
    background-color: transparent;
    border: 1px solid $transparent-border;
  }

  .colorinput-color {
    border: 1px solid rgba(234, 240, 247, 0.2);
  }

  .nice-select {
    .list {
      background-color: $transparent-body;
      -webkit-box-shadow: 0px 0px 15px 1px rgb(4, 17, 56);
      box-shadow: 0px 0px 15px 1px rgb(4, 17, 56);
    }

    .option {

      &:hover,
      &.focus,
      &.selected.focus {
        background-color: rgba(237, 239, 245, 0.1);
      }
    }
  }

  .item-card {
    .cardtitle a {
      color: #fefefe;
    }

    .cardprice span {
      color: #dfe5ec;
    }
  }

  .bd-b {
    border-bottom: 1px solid $transparent-border;
  }

  .bd-r {
    border-right: 1px solid $transparent-border;
  }

  .bd-t {
    border-top: 1px solid $transparent-border;
  }

  .bd-l {
    border-left: 1px solid $transparent-border;
  }

  .bd-y {
    border-top: 1px solid $transparent-border;
    border-bottom: 1px solid $transparent-border;
  }

  .bd-x {
    border-left: 1px solid $transparent-border;
    border-right: 1px solid $transparent-border;
  }

  .bg-gray-500 {
    background-color: rgba(151, 163, 185, 0.2);
  }

  .bg-gray-400 {
    background-color: rgba($white, 0.4);
  }

  .main-card-signin {
    background-color: transparent;
    border: 1px solid transparent;
  }

  .main-signin-header h4 {
    color: $white;
  }

  .main-signin-footer a {
    color: $white-8;
  }

  .main-signup-footer a {
    color: $white;
  }

  .construction .btn.btn-icon {
    border: 1px solid $transparent-border;
  }
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 2px;
}

.transparent-theme {
  .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #3b4563 !important;
  }

  .horizontalMenucontainer {

    .desktop-logo,
    .desktop-logo-dark {
      display: none;
    }
  }

  .desktop-dark {
    display: block !important;
  }
}

.transparent-theme.sidenav-toggled .desktop-dark {
  display: none !important;
}

.transparent-theme.sidenav-toggled-open .desktop-dark {
  display: block !important;
}

@media (min-width: 992px) {
  .transparent-theme.sidebar-mini.sidenav-toggled {
    .main-sidebar-header {
      .icon-light .logo-icon {
        display: none;
        height: 2.5rem;
      }

      .icon-dark .logo-icon.transparent-theme {
        display: block;
        height: 2.5rem;
      }
    }

    &.sidenav-toggled1 .main-sidebar-header .logo-light .main-logo {
      display: none;
    }
  }
}

@media (max-width: 991px) and (min-width: 568px) {
  .transparent-theme .horizontalMenucontainer .desktop-dark {
    margin-left: 2rem !important;
  }
}

@media (max-width: 598px) {
  .transparent-theme {
    .horizontalMenucontainer .desktop-logo-dark {
      display: none;
      margin-left: 2.5rem;
      height: 2.5rem;
    }

    .main-header-left .header-brand {
      top: 12px;
    }
  }
}

@media (max-width: 991px) {
  .transparent-theme {
    .animated-arrow span {
      background: $white;

      &:before,
      &:after {
        background: $white;
      }
    }

    &.active .animated-arrow span {
      background-color: transparent;
    }
  }
}

.transparent-theme {
  .sidebar {
    background: $transparent-body;

    .card {
      background-color: transparent !important;
      box-shadow: none !important;
    }
  }

  .main-calendar.fc-list-empty {
    background-color: $transparent-theme;
    border: 1px solid $transparent-border;
  }
}

@media (max-width: 575px) {
  .transparent-theme .main-calendar .fc-header-toolbar button {

    &.fc-month-button::before,
    &.fc-agendaWeek-button::before,
    &.fc-agendaDay-button::before,
    &.fc-listWeek-button::before,
    &.fc-listMonth-button::before {
      color: $white;
    }
  }
}

.transparent-theme {
  .breadcrumb {
    background-color: $transparent-border;
  }

  table.dataTable {
    >tbody>tr.child ul.dtr-details>li {
      border-bottom: 1px solid $transparent-border;
    }

    &.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child::before {
      background-color: $primary;
    }
  }
}

/*----- Horizontal-menu -----*/

.transparent-theme {
  .horizontal-main.hor-menu {
    background: $transparent-theme;
    border-bottom: 1px solid $transparent-border;
    border-top: 0;
    box-shadow: 0 0.15rem 1.75rem 0 #0e0f2e;
  }

  .hor-menu .horizontalMenu>.horizontalMenu-list>li>a.active {
    color: $primary;
    background: transparent;
  }

  .horizontalMenu>.horizontalMenu-list>li>a {
    color: $white;
  }

  .hor-menu .horizontalMenu>.horizontalMenu-list>li>a:hover {
    color: $primary;
    background: transparent;
  }

  .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu {
    border: 1px solid $transparent-border;

    >li>a {
      color: $white-5;
    }
  }

  .sub-menu li a:before {
    border-color: $white-5;
  }

  .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu {
    .sub-menu-sub:after {
      color: $white-8;
    }

    >li>ul.sub-menu {
      background-color: $transparent-theme;
      box-shadow: 0 8px 16px 0 rgba(8, 13, 25, 0.4);
      border: none;

      >li>a {
        color: $white-5;

        &:hover {
          color: $primary  !important;
        }
      }
    }
  }

  .mega-menubg {
    background: $transparent-theme;
    box-shadow: 0 8px 16px 0 rgba(9, 17, 33, 0.4);
    border: 1px solid $transparent-border;
  }

  .hor-menu .horizontalMenu>.horizontalMenu-list>li>.horizontal-megamenu .link-list li a {
    background: transparent;
    color: $white-6;
  }

  .mega-menubg.hor-mega-menu h3 {
    color: $white;
  }

  .main-profile-menu .dropdown-item+.dropdown-item {
    border-top: 1px solid $transparent-border;
  }

  .rating-scroll h6 {
    color: $white;
  }

  .latest-tasks .nav-link {

    &.active,
    &:hover,
    &:focus {
      background: transparent;
      color: $primary;
    }
  }

  .main-calendar .fc-list-empty {
    background-color: $transparent-theme;
    border: 1px solid $transparent-border;
  }

  .alert-success {
    color: #125a4e;
    background-color: #1fddbd9e;
    border-color: #1fddbd9e;
  }

  .form-control::placeholder {
    color: $white-5  !important;
    opacity: 1;
  }

  .header-icon,
  .main-header-message .nav-link i,
  .main-header-notification .nav-link i,
  .nav-item.full-screen .nav-link i,
  .sales-flot .flot-chart .flot-x-axis>div span:last-child,
  .p-text .p-name {
    color: $white;
  }

  .hor-menu .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu>li>a.active {
    color: $primary;
  }

  .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu>li>a:hover {
    color: #696af1;
    color: $primary;
  }

  .hor-menu .horizontalMenu>.horizontalMenu-list>li>.horizontal-megamenu .link-list li a.active {
    color: $primary  !important;
  }

  .sidebar {
    .tab-menu-heading {
      background: rgba($black, 0.1);
    }

    .tabs-menu ul li {
      a {
        border: 1px solid $transparent-border;
        background: $primary-02;
        color: $white;
      }

      .active {
        background: $primary;
        color: $white;
        border: 1px solid $primary;
      }
    }
  }

  .datepicker> {
    .datepicker_inner_container> {

      .datepicker_calendar,
      .datepicker_timelist {
        background-color: $primary;
      }
    }

    .datepicker_header {
      background-color: transparent;
      color: $white;
    }
  }

  .main-datetimepicker {
    >.datepicker_inner_container> {
      .datepicker_calendar th {
        color: #fcfdff;
      }

      .datepicker_timelist {
        border-left: 1px solid $white-3;

        >div.timelist_item {

          &:hover,
          &:focus {
            background-color: #323850;
          }
        }
      }
    }

    border: 1px solid $white-1;
  }

  .datepicker>.datepicker_inner_container>.datepicker_timelist>div.timelist_item.hover {
    color: $white;
    background-color: #26324c;
  }

  .datetimepicker {
    .datetimepicker-days table thead tr:last-child th {
      color: $white;
    }

    table {
      th.dow {
        background: transparent;
      }

      td.old {
        color: $white;
      }
    }
  }
}

@media (max-width: 991px) {
  .transparent-theme {
    .horizontalMenu>.horizontalMenu-list {
      background: $transparent-theme;

      >li>a {
        border-bottom-color: $transparent-border;
      }
    }

    .hor-menu .horizontalMenu>.horizontalMenu-list>li {
      >a {
        border-radius: 0;
      }

      &:hover .sub-icon {
        color: $primary;
        background: $transparent-theme;
        border-bottom: 1px solid $transparent-border;
      }

      &:hover .side-menu__icon {
        fill: #7c52ca;
      }
    }

    .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu {
      li:hover>a {
        background-color: transparent;
        color: #7c52ca !important;
      }

      >li> {
        a:hover:before {
          border-color: $transparent-border;
        }

        ul.sub-menu>li>a:hover {
          color: $white  !important;
          background-color: rgba(231, 231, 231, 0.1);
        }
      }
    }

    .hor-menu .horizontalMenu>.horizontalMenu-list>li>.horizontal-megamenu .link-list li:hover a {
      &:before {
        border-color: $transparent-border  !important;
        color: $white  !important;
      }
    }

    .mega-menubg li a:before {
      border-color: $transparent-border;
    }

    .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu .sub-menu-sub:after {
      display: none;
    }

    .mega-menubg {
      background: $transparent-theme  !important;
    }

    .hor-menu .horizontalMenu>.horizontalMenu-list>li>.horizontal-megamenu .link-list li a {
      background: $transparent-theme  !important;
      color: #8291af !important;
    }
  }
}

@media (min-width: 578px) {
  .transparent-theme {
    .desktop-logo.logo-light .main-logo {
      display: none;
    }

    .logo-icon.mobile-logo.icon-light .logo-icon {
      display: none !important;

      &.transparent-theme {
        display: none !important;
      }
    }

    .desktop-logo.logo-dark .main-logo.transparent-theme {
      display: block !important;
    }
  }

  .transparent-theme.sidenav-toggled .desktop-logo.logo-dark .main-logo.transparent-theme {
    display: none !important;
  }
}

@media (max-width: 578px) {
  .transparent-theme {
    .desktop-logo.logo-light .main-logo {
      display: none;
    }

    .logo-icon.mobile-logo {
      &.icon-light {
        display: none !important;

        .logo-icon.transparent-theme {
          display: block !important;
        }
      }

      &.icon-dark {
        display: block !important;
      }
    }
  }
}

.transparent-theme.sidenav-toggled.sidenav-toggled-open .desktop-logo.logo-dark .main-logo.transparent-theme {
  display: block !important;
}

.transparent-theme.app.sidebar-mini.sidenav-toggled.sidenav-toggled-open .desktop-logo.logo-dark {
  display: block !important;
}

.datetimepicker table td.new {
  color: #7a82af;
}

.transparent-theme .datetimepicker table {
  td {
    background-color: transparent;
    color: $white;
  }

  th.prev {
    background-color: transparent;
    color: $white;
  }
}

.transparent-theme .datetimepicker table th {

  &.next,
  &.switch {
    background-color: transparent;
    color: $white;
  }
}

.transparent-theme .datetimepicker table th.prev:hover,
.datetimepicker table th.prev:focus {
  background-color: $transparent-theme;
}

.transparent-theme .datetimepicker table th {
  &.next {

    &:hover,
    &:focus {
      background-color: $transparent-theme;
    }
  }

  &.prev span::before,
  &.next span::before {
    color: $white;
  }

  &.switch:hover {
    background-color: transparent;
    color: $white;
  }
}

.datetimepicker table th.switch:focus {
  background-color: transparent;
  color: $white;
}

.transparent-theme {
  .main-datetimepicker>.datepicker_inner_container>.datepicker_calendar td.hover {
    background-color: $primary;
  }

  .iti__selected-flag {
    border-right: 1px solid $transparent-border;
  }

  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: $transparent-theme;
  }

  .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu {
    background: $transparent-theme;
  }

  .dashboard-carousel .btn-icons {
    background: rgba(239, 242, 246, 0.2) !important;
    color: $white;
  }

  .slide.dashboard-carousel:hover {
    background: transparent;
  }

  .btn-light {

    &:focus,
    &.focus {
      box-shadow: 0 0 0 0.2rem rgba(165, 175, 191, 0.5);
    }

    &:not(:disabled):not(.disabled) {

      &:active,
      &.active {
        color: $white;
        background-color: $transparent-border;
        border-color: $transparent-border;
      }
    }
  }

  .show>.btn-light.dropdown-toggle {
    color: $white;
    background-color: $transparent-border;
    border-color: $transparent-border;
  }

  .modal-dialog {
    box-shadow: none;
  }

  .email-media .media-body {
    small {
      color: rgb(255, 255, 255);
    }

    .media-title {
      color: rgb(255, 255, 255);
      font-size: 15px;
    }
  }

  .page-item.disabled .page-link {
    color: $white;
    background: #141b2d;
  }

  .demo-gallery .pagination {
    border: 0;
  }

  .chat {

    .msg_cotainer,
    .msg_cotainer_send {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .dropdown-menu li {
      &:hover {
        color: $primary;
        background: rgba(238, 238, 247, 0.06);
      }

      padding: 7px;
      color: #dde2e8;
    }
  }

  .latest-tasks .tasks .span {
    color: $white;
  }

  .list-group-item-action {
    color: $white-6;
  }

  .list-group-item.active {
    color: $white;
  }

  .list-group-item-success {
    color: #1f5c01;
    background-color: #c8e9b8;
  }

  .list-group-item-info {
    color: #0c5460;
    background-color: #bee5eb;
  }

  .list-group-item-warning {
    color: #856404;
    background-color: #ffeeba;
  }

  .list-group-item-danger {
    color: #721c24;
    background-color: #f5c6cb;
  }

  .bg-danger {
    background-color: $danger  !important;
  }

  .bg-primary {
    background-color: $primary  !important;
  }

  .bg-secondary {
    background-color: $secondary  !important;
  }

  .bg-gray-800 {
    background-color: $primary-02  !important;
  }

  .bg-success {
    background-color: $success  !important;
  }

  .bg-info {
    p.card-text {
      color: $black;
    }
  }

  .main-content-body.main-content-body-contacts .media-body h5 {
    color: $white;
  }

  .table-striped tbody tr:nth-of-type(2n + 1) {
    background-color: $transparent-theme;
  }

  .dataTables_wrapper .dataTables_filter input {
    color: $white;

    &::placeholder {
      color: rgba(212, 218, 236, 0.4) !important;
    }
  }

  .dataTables_paginate .page-link {
    background: transparent;
  }

  .iti__divider {
    border-bottom: 1px solid $transparent-border;
  }

  .iti__country.iti__highlight {
    background-color: $transparent-theme;
  }

  .iti__country-list {
    background-color: $transparent-theme;
    box-shadow: 0 8px 16px 0 rgb(44, 50, 82);
  }

  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: #414565;
  }

  .price.panel-color>.panel-body {
    background-color: transparent;
    border: 1px solid $transparent-border;
    border-bottom: 0;
    border-top: 0;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background-color: transparent;
    color: $white;

    &:hover,
    &:focus {
      background-color: transparent;
      color: $white;
    }
  }

  .main-nav-line .nav-link.active {
    color: $white;
    background-color: rgba($white, 0.05) !important;
  }

  .datetimepicker table {
    background: transparent;
  }
}

.transparent-theme .dataTables_paginate .pagination .page-link {
  border: 1px solid $transparent-border;
}

@media only screen and (max-width: 991px) {
  .transparent-theme .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu {
    background-color: $transparent-theme;
    border: none;
  }
}

@media only screen and (min-width: 992px) {
  .transparent-theme {
    .hor-menu .horizontalMenu>.horizontalMenu-list>li>a:hover {
      color: $primary;
      background: transparent;
    }

    .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu {
      background: $transparent-theme;
      box-shadow: 0 8px 16px 0 rgba(9, 17, 33, 0.4);
    }

    .main-header {
      background: $transparent-theme;
      border-bottom: 1px solid $transparent-border;
      box-shadow: none;
    }
  }
}

@media (min-width: 992px) {
  .transparent-theme .main-content-left-contacts {
    border-right: 1px solid $transparent-border;
  }
}

@media (min-width: 576px) {
  .transparent-theme .main-calendar .fc-header-toolbar button {
    color: $white;
  }
}

@media (max-width: 575px) {
  .transparent-theme .main-calendar .fc-header-toolbar .fc-left button {
    color: $white;

    &.fc-today-button {
      color: $black;
    }
  }
}

@media (max-width: 605px) {

  .transparent-theme .fc-view,
  .fc-view>table {
    border: 1px solid $transparent-border;
  }
}

.transparent-theme {
  .chat {

    abbr.timestamp,
    .msg_time,
    .msg_time_send {
      color: $white;
    }
  }

  .nav-tabs {
    border-bottom: 1px solid $transparent-border;
  }

  .nav-tabs .nav-link.active {
    border-color: $transparent-border;
  }
}

.transparent-theme {
  .page-link {
    border: 1px solid $transparent-border;
  }

  .popover-head-primary .popover-header {
    color: $white  !important;
    background-color: $primary  !important;
  }

  .popover-head-secondary {
    .popover-header {
      color: $white  !important;
      background-color: $primary  !important;
    }

    &.bs-popover-bottom .arrow::after,
    &.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
      border-bottom-color: $transparent-border  !important;
    }
  }

  .popover-primary .popover-header,
  .popover-secondary .popover-header {
    background-color: transparent !important;
    color: $white  !important;
  }

  .popover-primary {

    &.bs-popover-top .arrow::after,
    &.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
      border-top-color: $transparent-border  !important;
    }
  }

  .popover-secondary {

    &.bs-popover-bottom .arrow::after,
    &.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
      border-bottom-color: $transparent-border  !important;
    }
  }
}

.transparent-theme .gray-set {
  .bg-transparent {
    background-color: transparent !important;
  }

  .bg-gray-100 {
    background-color: $gray-100  !important;
  }

  .bg-gray-200 {
    background-color: $gray-200  !important;
  }

  .bg-gray-300 {
    background-color: $gray-300  !important;
  }

  .bg-gray-400 {
    background-color: $gray-400  !important;
  }

  .bg-gray-500 {
    background-color: $gray-500  !important;
  }

  .bg-gray-600 {
    background-color: $gray-600  !important;
  }

  .bg-gray-700 {
    background-color: $gray-700  !important;
  }

  .bg-gray-800 {
    background-color: $gray-800  !important;
  }

  .bg-gray-900 {
    background-color: $gray-900  !important;
  }
}

.transparent-theme .main-card-signin {
  box-shadow: none !important;
}

.transparent-theme .page-item.disabled .page-link {
  border-color: $transparent-border;
  background: $transparent-theme;
}

.transparent-theme .ps>.ps__rail-y {
  background-color: transparent;
}

.transparent-theme .app-sidebar .ps>.ps__rail-y {
  background-color: transparent;
}

.transparent-theme .slide.is-expanded .side-menu__icon,
.transparent-theme .slide.is-expanded .angle {
  color: $primary  !important;
}

.transparent-theme .close-toggle {
  color: $white  !important;
}

.transparent-theme .slide.is-expanded .side-menu__label,
.transparent-theme .slide.is-expanded .side-menu__icon,
.transparent-theme .slide.is-expanded .angle {
  color: $white  !important;
}

.transparent-theme .slide-item.active,
.transparent-theme .slide-item:hover,
.transparent-theme .slide-item:focus {
  color: $white  !important;
}

.transparent-theme .slide.is-expanded .slide-menu a:hover:before {
  color: $white  !important;
}

.transparent-theme .side-menu .side-menu__item.active .side-menu__label,
.transparent-theme .side-menu .side-menu__item.active .side-menu__icon {
  color: $white  !important;
}

.transparent-theme .slide:hover .side-menu__label,
.transparent-theme .slide:hover .angle,
.transparent-theme .slide:hover .side-menu__icon {
  color: $primary;
}

.transparent-theme .card.bg-primary-gradient {
  background-image: linear-gradient(to left, $primary 0%, $primary-05 100%) !important;
}

.transparent-theme .card.bg-secondary-gradient {
  background-image: linear-gradient(to right, #f714c2 0%, #b9309a 100%) !important;
}

.transparent-theme .card.bg-success-gradient {
  background-image: linear-gradient(to left, #029666 0%, #4ec752 100%) !important;
}

.transparent-theme .card.bg-warning-gradient {
  background-image: linear-gradient(to left, #f76a2d, #fb8c12ed) !important;
}

.transparent-theme .vmap-wrapper {
  background: $transparent-theme  !important;
}

.transparent-theme .card-dashboard-eight .list-group-item span {
  color: #f1f4f9;
}

.transparent-theme .card-dashboard-eight .list-group-item {
  background-color: transparent;
  border-bottom: 1px solid $transparent-border;
  border-color: $transparent-border;
}

.transparent-theme .sales-info h3,
.transparent-theme .card-table h4 {
  color: #f0f3f9;
}

.transparent-theme .total-revenue h4 {
  color: #fcfdff;
}

.transparent-theme .product-timeline ul.timeline-1:before {
  border-left: 2px dotted $transparent-border;
}

.transparent-theme .main-dashboard-header-right>div h5 {
  color: $white;
}

.transparent-theme .customers .list-group-item-action:hover,
.transparent-theme .customers .list-group-item-action:focus {
  color: #0160e4;
  background-color: $transparent-theme;
}

.transparent-theme .customers h5 {
  color: $white;
}

.transparent-theme .side-menu .slide .side-menu__item.active {
  background-color: transparent;
}

.transparent-theme nav.prod-cat li a {
  color: rgb(176, 187, 204);
}

.transparent-theme .product-sale .wishlist {
  color: $black;
}

.transparent-theme .nav-tabs.preview-thumbnail {
  border-bottom: 0;
}

.transparent-theme .select2-dropdown {
  border-color: $transparent-border;
}

.transparent-theme .bd-2 {
  border-width: 2px !important;
}

.transparent-theme .sidebar-right .list a {
  color: $white;
}

.transparent-theme .card-footer {
  background-color: transparent;
}

.transparent-theme .card.card-primary {
  border-top: 2px solid $primary  !important;
}

.transparent-theme .card.card-secondary {
  border-top: 2px solid $gray-600  !important;
}

.transparent-theme .card.card-success {
  border-top: 2px solid #22e840 !important;
}

.transparent-theme .card.card-danger {
  border-top: 2px solid #ee335e !important;
}

.transparent-theme .card.card-warning {
  border-top: 2px solid #ffb209 !important;
}

.transparent-theme .card.card-info {
  border-top: 2px solid #01b8ff !important;
}

.transparent-theme .card.card-purple {
  border-top: 2px solid #673ab7 !important;
}

.transparent-theme .card.card-dark {
  border-top: 2px solid #343a40 !important;
}

.transparent-theme .nav-tabs.html-source {
  border-bottom: 0;
}

.transparent-theme .nav-tabs.html-source .nav-link.active {
  border-color: $transparent-border;
  background-color: #141b2d;
}

.transparent-theme .toast-body {
  padding: 0.75rem;
  background: $transparent-theme;
  color: #b8bfc9;
}

.transparent-theme .tabs-style-1 .main-nav-line .nav-link {
  background: $transparent-theme;
}

.transparent-theme .tabs-style-2 .main-nav-line .nav-link {
  background: $transparent-theme  !important;
}

.transparent-theme .tabs-style-2 .main-nav-line .nav-link.active {
  background: $transparent-theme  !important;
}

.transparent-theme .tabs-style-2 .main-nav-line .nav-link {
  border: 1px solid $transparent-border;
}

.transparent-theme .tabs-style-3 .nav.panel-tabs li a {
  background: $transparent-theme;
  color: $white;
}

.transparent-theme .tabs-style-4 .nav.panel-tabs li a {
  background: $transparent-theme;
  color: $white;
}

.transparent-theme .nav-link.html-code {
  background: transparent;
}

.transparent-theme .nav-tabs .nav-link.html-code {

  &.active,
  &:hover,
  &:focus {
    background-color: #141b2d;
    color: $white;
  }
}

.transparent-theme .nav-tabs .nav-link.html-code:hover,
.transparent-theme .nav-tabs .nav-link.html-code:focus {
  border: 0;
}

.transparent-theme .card .box {
  box-shadow: 0 0 25px $transparent-theme;
  border: 0;
}

.transparent-theme .userlist-table .user-link {
  color: #fbf5f5;
}

.transparent-theme .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: $primary;
}

.transparent-theme .main-chat-body .content-inner:before {
  background: rgba(15, 26, 51, 0.93);
}

.transparent-theme .left.main-msg-wrapper:before {
  color: #343e53;
}

.transparent-theme .icons-list-item {
  border: 1px solid $transparent-border;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
  color: $white  !important;
  fill: $white  !important;
}

.transparent-theme .user-wideget-footer {
  background-color: $transparent-theme;
}

.transparent-theme .profile.navtab-custom .active a {
  background: #273350;
  border-bottom: 0;
  color: #fffafa;
}

.transparent-theme .profile.navtab-custom li a {
  color: $white-7;
  border: 1px solid $transparent-border;
}

.transparent-theme .profile.navtab-custom a.active {
  background: #273350;
}

.transparent-theme .nav.prod-cat li a {
  color: $white;
}

.transparent-theme .prod-cat li ul li.active a {
  background: none;
  color: #ee335e;
}

.transparent-theme .header-icon-svgs {
  fill: $white;
}

.transparent-theme .app-sidebar .side-item.side-item-category {
  color: $white;
}

.transparent-theme .product-pagination .page-link {
  background-color: transparent !important;
  border: 1px solid $transparent-border;
}

.transparent-theme .product-pagination .page-item.disabled .page-link {
  border-color: $transparent-border;
  background: transparent;
  color: $white  !important;
}

.transparent-theme .price span {
  color: #ebedf1;
}

.transparent-theme #list3 .media-body h6 {
  color: rgb(255, 255, 255);
}

.transparent-theme #list3 .list-group-item,
.transparent-theme #list8 .list-group-item,
.transparent-theme #list1 .list-group-item,
.transparent-theme #list8 .list-group-item {
  border: 1px solid $transparent-border;
}

.transparent-theme .bg-gray-100.nav-bg .nav-tabs {
  border-bottom: 1px solid $transparent-border;
}

.transparent-theme .bg-gray-100.nav-bg .nav-tabs .nav-link {
  background-color: $primary-02;
}

.transparent-theme .popover-static-demo .popover {
  box-shadow: -8px 12px 18px 0 #141b2d;
  border: 1px solid $transparent-border;
}

.transparent-theme .heading-inverse {
  background-color: #141b2c;
}

.transparent-theme .toast {
  box-shadow: -8px 12px 18px 0 #1820330f;
}

.transparent-theme .tabs-style-1 .transparent-theme .border {
  border: 1px solid $transparent-border  !important;
}

.transparent-theme .tabs-style-1 .transparent-theme .border-top-0 {
  border-top: 0 !important;
}

.transparent-theme .tabs-style-1 .main-nav-line .nav-link.active {
  color: #f3f5f9;
  border: 1px solid;
  border-color: $transparent-border;
  border-bottom-color: transparent !important;
}

.transparent-theme .tabs-style-1 .panel-tabs {
  border-bottom: 0;
}

.dataTables_paginate .page-item.previous a {
  width: 77px;
}

.transparent-theme.app.sidenav-toggled.sidenav-toggled-open .side-menu__label {
  color: $white;
}

.transparent-theme.app.sidenav-toggled.sidenav-toggled-open .side-menu__item.active .side-menu__label {
  color: $white;
}

@media (min-width: 992px) {
  .transparent-theme.app.sidebar-mini.sidenav-toggled.sidenav-toggled-open .desktop-logo {
    display: none !important;
  }

  .transparent-theme.leftbgimage1 .main-sidebar-header,
  .transparent-theme.leftbgimage2 .main-sidebar-header,
  .transparent-theme.leftbgimage3 .main-sidebar-header,
  .transparent-theme.leftbgimage4 .main-sidebar-header,
  .transparent-theme.leftbgimage5 .main-sidebar-header {
    border-right: 1px solid $transparent-border;
    width: 240px;
  }
}

@media (max-width: 1199px) {
  .transparent-theme .total-revenue {
    border-bottom: 1px solid rgba(227, 232, 247, 0.1) !important;
  }
}

.transparent-theme .horizontalMenucontainer .side-menu__icon {
  color: $white;
  fill: $white;
}

.transparent-theme.horizontal-light .horizontalMenucontainer .side-menu__icon {
  color: #5b6e88;
  fill: #5b6e88;
}

.transparent-theme .main-header .dropdown-menu-start {
  box-shadow: 0px 0px 15px 1px #041138;
}

.transparent-theme .main-header .dropdown.nav-itemd-none .dropdown-menu:after {
  border-bottom: 9px solid $transparent-border;
}

@media (min-width: 992px) {
  .transparent-theme .top-header .header-brand.header-brand2 .desktop-dark {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
  }
}

.transparent-theme .app-sidebar.toggle-sidemenu {
  border-top: 1px solid $transparent-border;
}

.transparent-theme .first-sidemenu {
  background: transparent;
}

.transparent-theme .second-sidemenu {
  background: transparent;
  border-right: 1px solid $transparent-border;
}

.transparent-theme .resp-vtabs .resp-tabs-list li {
  border: 1px solid $transparent-border  !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-bottom: 0;
}

.transparent-theme .first-sidemenu li.active,
.transparent-theme .resp-vtabs .resp-tab-active:hover {
  background: transparent;
  border-right: 0 !important;
}

.transparent-theme .resp-vtabs li.resp-tab-active {
  border-right: 0 !important;
}

.transparent-theme .first-sidemenu .side-menu__icon,
.transparent-theme .toggle-sidemenu .slide-item {
  color: $white;
  fill: $white;
}

.transparent-theme .second-sidemenu h5 {
  color: #dde3ea;
}

.transparent-theme.app.sidebar-mini.sidenav-toggled .first-sidemenu li.active {
  border-right: 1px solid $transparent-border  !important;
}

.transparent-theme .file-browser .btn-default {
  background: #3e405e;
  color: #fff;
  border: 1px solid $transparent-border;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.transparent-theme .card.bg-purple-gradient {
  background-image: linear-gradient(to right, #673ab7 0%, #884af1 100%) !important;
}

.transparent-theme .fc-datepicker.main-datepicker.hasDatepicker {
  border: 1px solid $transparent-border;
}

.transparent-theme .ql-snow .ql-picker:hover .ql-picker-label,
.transparent-theme .ql-snow .ql-picker:focus .ql-picker-label {
  color: #fff;
}

.transparent-theme .ql-snow .ql-picker:hover .ql-picker-label,
.transparent-theme .ql-snow .ql-picker:focus .ql-picker-label {
  color: #fff;
}

.transparent-theme .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: $transparent-border;
}

.transparent-theme.hoversubmenu .side-menu__item.active .side-menu__icon {
  fill: #106ef1;
}

@media (min-width: 992px) {
  .transparent-theme.hoversubmenu.style1-leftmenu.sidenav-toggled .app-sidebar .side-menu-label1 {
    border-bottom: 1px solid $transparent-border;
    color: #fff !important;
  }
}

@media (min-width: 992px) {
  .transparent-theme.app.sidebar-mini.sidenav-toggled-open .ps>.ps__rail-y>.ps__thumb-y {
    background-color: $black-1;
  }
}

.transparent-theme .app-sidebar__toggle {
  background: transparent;
}

.transparent-theme .header-icons .new.nav-link {
  background: transparent;
}

.transparent-theme .main-profile-menu .profile-user img {
  background: $transparent-body;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
}

.transparent-theme {
  ul.timeline:before {
    background: rgba($white, 0.1);
  }

  .apexcharts-radialbar-track.apexcharts-track path {
    stroke: $transparent-theme;
  }

  .apex-charts .apexcharts-datalabels-group text {
    fill: #fff;
  }

  .slide.is-expanded a {
    color: rgba(255, 255, 255, 0.6);
  }

  .featured_icon i {
    color: #bfbcc3;
  }

  .pro-img-box img {
    border: 1px solid $transparent-border  !important;
  }

  .carousel-inner .carousel-item .thumb {
    background: $transparent-theme;
    border: 1px solid $transparent-border;
  }

  .table-hover>tbody>tr:hover {
    --bs-table-accent-bg: $primary-02;
    color: #bfbcc3;
  }

  .handle-counter input {
    border: 1px solid $transparent-border;
    background: $transparent-theme;
    color: #e3dcdc;
  }

  .product-details .media img {
    border-color: $transparent-border;
  }

  a {
    color: #faf9fa;
  }

  .btn a {
    color: #f2eeee;
  }

  .btn-list a {
    color: #f2eeee;
  }

  .fc .fc-non-business {
    background: $transparent-theme;
  }

  .fc .fc-daygrid-day.fc-day-today {
    background-color: $transparent-theme;
  }

  .fc-theme-standard .fc-scrollgrid {
    border: 0px solid $transparent-border;
  }

  #external-events {
    border-color: $transparent-border;
    background: transparent;
  }

  .fc .fc-list-empty {
    background-color: transparent;
  }

  .main-contact-label {
    border-top: 1px solid $transparent-border;
  }

  .contact-icon {
    box-shadow: 0px 1px 6px 0px #24443f70;
  }

  bg-dark-1 {
    background: $transparent-theme;
  }

  .main-nav .nav-link+.nav-link {
    border-left: 1px solid $transparent-border;
  }

  .pagination-dark.pagination .page-link {
    background-color: $transparent-theme  !important;
    border: 1px solid $transparent-border  !important;
  }

  .bs-popover-top>.popover-arrow::after,
  .bs-popover-auto[data-popper-placement^="top"]>.popover-arrow::after {
    border-top-color: $transparent-theme;
  }

  .bs-popover-bottom>.popover-arrow::after,
  .bs-popover-auto[data-popper-placement^="bottom"]>.popover-arrow::after {
    border-bottom-color: $transparent-theme;
  }

  .bs-popover-start>.popover-arrow::after,
  .bs-popover-auto[data-popper-placement^="left"]>.popover-arrow::after {
    border-left-color: $transparent-theme;
  }

  .bs-popover-end>.popover-arrow::after,
  .bs-popover-auto[data-popper-placement^="right"]>.popover-arrow::after {
    border-right-color: $transparent-theme;
  }

  .popover-secondary.bs-popover-top .popover-arrow::after,
  .popover-secondary.bs-popover-auto[data-popper-placement^="top"] .popover-arrow::after {
    border-top-color: #bc289a;
  }

  .bd-example-row .row>.col,
  .bd-example-row .row>[class^="col-"] {
    background-color: $transparent-body;
    border: 1px solid $transparent-border;
  }

  .vtimeline .timeline-wrapper .timeline-badge {
    border: 2px solid $transparent-border;
  }

  .bg-danger-gradient {
    background-image: linear-gradient(45deg, #f93a5a, #f7778c) !important;
  }

  .table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: $transparent-theme;
    color: rgba(255, 255, 255, 0.7);
  }

  .main-nav-column .nav-link.active {
    background: $primary-02;
    color: $primary;
  }

  .main-nav-column .nav-link i:not([class*=" tx-"]) {
    color: $white;
  }

  .mail-option .chk-all,
  .mail-option .btn-group a.btn {
    border: 1px solid $transparent-border;
  }

  .inbox-pagination a.np-btn {
    border: 1px solid $transparent-border;
  }

  .main-mail-compose-header {
    background-color: $transparent-body;
    color: #fff;
  }

  .main-mail-compose-body {
    background-color: $transparent-theme;
  }

  .main-mail-compose-body .form-group .form-label {
    margin: 0;
    color: $white;
  }

  .main-mail-compose-body .form-group+.form-group {
    border-top: 1px dotted $transparent-border;
  }

  .main-chat-header .nav-link {
    color: $white;
    border: solid 1px $primary-02;
    background: $transparent-theme;
  }

  .main-chat-footer .nav-link,
  .main-chat-footer .main-msg-s end {
    color: $white;
    border: solid 1px $transparent-border;
    background: transparent;
  }

  .main-msg-wrapper.left:nth-child(1):after {
    border-right-color: rgba(255, 255, 255, 0.15);
  }

  &.rtl .main-msg-wrapper.left:nth-child(1):after {
    border-left-color: rgba(255, 255, 255, 0.15) !important
  }

  .datepicker table tr td span {
    border: 1px solid $transparent-border;
    background-color: $transparent-theme;
  }

  .datepicker td {
    border: 1px solid $white-3;
    background-color: $primary;
    color: $white;
  }

  .datepicker table tr td.day:hover,
  .datepicker table tr td.day.focused {
    background: $transparent-theme;
  }

  .datepicker {
    background-color: $transparent-body;
    border: 1px solid $transparent-border;
  }

  .ql-snow.ql-toolbar {
    border-color: $transparent-border;
    background: $transparent-theme;
  }

  .ql-scrolling-demo {
    background-color: $transparent-theme;
  }

  .ql-snow.ql-toolbar button.ql-active {
    background-color: rgba($white, 0.1);
    color: #dee4f3;
    border-color: transparent;
  }

  div.dt-button-info {
    background-color: $transparent-theme;
    border: 2px solid $transparent-border;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
    color: $white;
  }

  div.dt-button-info h2 {
    background-color: $transparent-theme;
    border: 2px solid $transparent-border;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
    color: $white;
  }

  .border-end {
    border-right: 1px solid $transparent-border  !important;
  }

  .border-start {
    border-left: 1px solid $transparent-border  !important;
  }

  .profile-cover__img>.h3 {
    color: #d6d6d7;
  }

  .profile-cover__info .nav li {
    color: #d6d6d7;
  }

  .bd-e {
    border-color: $transparent-border;
  }

  .card-sigin {
    background: $transparent-theme;
    color: #d6d6d7;
  }

  .bxl-instagram.tx-prime,
  .bxl-linkedin.tx-prime,
  .bxl-twitter.tx-prime,
  .bxl-facebook.tx-prime {
    color: $white;
    background: $white-2;
    border: 0px solid $transparent-border;
    box-shadow: 0px 1px 6px 0px #424449;
  }

  .form-control {
    color: $white;
    background-color: transparent !important;
    border: 1px solid $transparent-border;
  }

  .breadcrumb-style1 .breadcrumb-item+.breadcrumb-item::before,
  .breadcrumb-style2 .breadcrumb-item+.breadcrumb-item::before,
  .breadcrumb-style3 .breadcrumb-item+.breadcrumb-item::before {
    color: rgba($white, 0.7);
  }

  .btn:hover,
  .sp-container button:hover {
    color: #faf9fa;
  }

  .custom-control-label::before {
    background-color: $transparent-body;
    border: $transparent-border solid 1px;
  }

  .navbar-toggler {
    background: transparent;
    color: #faf9fa;
  }

  .nav-tabs .nav-link:hover,
  .nav-tabs .nav-link:focus {
    border-color: $transparent-border;
  }

  .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu {
    background-color: $transparent-theme;
    border: 1px solid $transparent-border;
  }

  .horizontalMenu>.horizontalMenu-list>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu>li>a {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .btn-close {
    box-sizing: content-box;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
    padding: 5px;
    line-height: 1;
    font-size: 24px;
    background-image: none;
    color: white;
  }

  .horizontalMenucontainer .main-header.hor-header {
    border-bottom: 1px solid $transparent-border;
  }

  .btn-light:not(:disabled):not(.disabled):active:focus,
  .btn-light:not(:disabled):not(.disabled).active:focus {
    box-shadow: 0 0 0 0.2rem #45456a;
  }

  #external-events p {
    color: #ffffff8a;
  }

  .datepicker th {
    color: $white;
  }

  .datepicker table tr td.old,
  .datepicker table tr td.new {
    opacity: 0.9;
  }

  .datepicker table tr td span.active:hover,
  .datepicker table tr td span.active:hover:hover,
  .datepicker table tr td span.active.disabled:hover,
  .datepicker table tr td span.active.disabled:hover:hover,
  .datepicker table tr td span.active:active,
  .datepicker table tr td span.active:hover:active,
  .datepicker table tr td span.active.disabled:active,
  .datepicker table tr td span.active.disabled:hover:active,
  .datepicker table tr td span.active.active,
  .datepicker table tr td span.active:hover.active,
  .datepicker table tr td span.active.disabled.active,
  .datepicker table tr td span.active.disabled:hover.active,
  .datepicker table tr td span.active.disabled,
  .datepicker table tr td span.active:hover.disabled,
  .datepicker table tr td span.active.disabled.disabled,
  .datepicker table tr td span.active.disabled:hover.disabled,
  .datepicker table tr td span.active[disabled],
  .datepicker table tr td span.active:hover[disabled],
  .datepicker table tr td span.active.disabled[disabled],
  .datepicker table tr td span.active.disabled:hover[disabled] {
    background-color: #666886;
  }

  .datepicker table tr td.active:hover,
  .datepicker table tr td.active:hover:hover,
  .datepicker table tr td.active.disabled:hover,
  .datepicker table tr td.active.disabled:hover:hover,
  .datepicker table tr td.active:active,
  .datepicker table tr td.active:hover:active,
  .datepicker table tr td.active.disabled:active,
  .datepicker table tr td.active.disabled:hover:active,
  .datepicker table tr td.active.active,
  .datepicker table tr td.active:hover.active,
  .datepicker table tr td.active.disabled.active,
  .datepicker table tr td.active.disabled:hover.active,
  .datepicker table tr td.active.disabled,
  .datepicker table tr td.active:hover.disabled,
  .datepicker table tr td.active.disabled.disabled,
  .datepicker table tr td.active.disabled:hover.disabled,
  .datepicker table tr td.active[disabled],
  .datepicker table tr td.active:hover[disabled],
  .datepicker table tr td.active.disabled[disabled],
  .datepicker table tr td.active.disabled:hover[disabled] {
    background-color: #666886;
  }

  input:focus-visible {
    outline-offset: #2e3954;
  }

  .main-nav .nav-link+.nav-link {
    border-top: 0px solid $transparent-border;
  }

  .text-dark {
    color: #fcfcfc !important;
  }

  .nav-link.icon i {
    color: $white  !important;
  }
}

@media (max-width: 991.98px) {
  .transparent-theme .responsive-navbar.navbar .navbar-collapse {
    background: $transparent-body;
    box-shadow: 5px 6px 6px -3px rgba(0, 0, 0, 0.3);
  }

  .transparent-theme .mobile-main-header form[role="search"].active input {
    background: $transparent-body;
    box-shadow: 0 1px 15px 1px rgb(58, 58, 75);
  }

  .transparent-theme .mobile-main-header form[role="search"] button[type="reset"] {
    background: $primary-02;
  }

  .transparent-theme .mobile-main-header .input-group-btn .btn i {
    color: #848597;
  }
}

@media (max-width: 991.98px) {
  .transparent-theme .btn.btn-default.nav-link.resp-btn {
    background: transparent;
  }

  .transparent-theme .responsive-logo .header-logo .mobile-logo {
    &.logo-1 {
      display: none;
    }
  }
}

.transparent-theme .light-layout {
  display: block;
}

.transparent-theme .dark-layout {
  display: none;
}

.transparent-theme .card-title {
  color: $white;
}

@media (max-width: 991.98px) {
  .transparent-theme .header-brand .desktop-dark {
    display: block !important;
    margin: 0 auto !important;
  }
}

.transparent-theme {
  .responsive-logo .mobile-logo.dark-logo-1 {
    display: block;
    margin: 0 auto;
  }

  #checkoutsteps>.steps .number {
    background-color: $primary-02;
    border: 1px solid $transparent-border;
  }

  #checkoutsteps .checkoutline {
    background-color: $transparent-border;
  }

  #checkoutsteps>.steps a {
    color: $white-6;
  }

  .custom-select {
    border: 1px solid $transparent-border;
  }

  .custom-select {
    color: #ffffff;
    background-color: rgba($white, 0.1);
    border: 1px solid $transparent-border;
  }

  #checkoutsteps .item .thumb {
    border: 0px solid $transparent-border;
  }

  #checkoutsteps .item {
    border-bottom: 1px solid $transparent-border;
  }

  .card-pay .tabs-menu.nav a {
    color: $primary;
    // background: $primary-02;
  }

  .card-pay .tabs-menu li a.active {
    background: $primary;
    color: #ffffff;
  }

  // .card-pay .tabs-menu.nav li {
  //   border-right: 1px solid $transparent-border;
  // }

  .wizard>.actions .disabled a {
    background-color: $primary-02;
  }

  .fc-theme-standard .fc-list-day-cushion {
    background-color: $transparent-theme;
  }

  .fc-theme-standard .fc-list-day-cushion .fc-list-day-text,
  .fc-theme-standard .fc-list-day-cushion .fc-list-day-side-text {
    color: #dedefd !important;
  }

  .sidebar {
    border-left: 1px solid $transparent-border;
  }

  .tree li {
    background: $transparent-body;
  }

  .bg-light {
    background-color: $transparent-theme  !important;
  }

  .page-item.active .page-link-outline {
    background-color: $transparent-theme;
    border: 1px solid $primary;
  }

  .page-link-outline {
    background-color: $transparent-theme;
  }

  .panel-body {
    border: 1px solid $transparent-border;
  }

  .accordion .card-header a {
    border: 1px solid $transparent-border;
  }

  .accordion .card-header a.collapsed {
    border-bottom-color: $transparent-border;
  }

  .bg-white {
    background-color: $transparent-theme  !important;
  }

  .fc-theme-standard .fc-list {
    border: 1px solid $transparent-border;
  }

  .fc-event,
  .fc-event-dot {
    color: #fff !important;
  }

  .fc-theme-standard td,
  .fc-theme-standard th {
    border: 1px solid $transparent-border;
  }

  .alert-dark {
    color: #ffffff;
    background-color: $primary-02;
    border-color: $transparent-border;
  }

  .alert-light {
    color: $white;
    background-color: $transparent-theme;
    border-color: $transparent-border;
  }

  .alert-primary .alert-link {
    color: $primary;
  }

  .alert-secondary .alert-link {
    color: $secondary;
  }

  .alert-success .alert-link {
    color: $success;
  }

  .alert-danger .alert-link {
    color: $danger;
  }

  .alert-warning .alert-link {
    color: $warning;
  }

  .alert-info .alert-link {
    color: $info;
  }

  .alert-light .alert-link {
    color: #bdbdef;
  }

  .alert-dark .alert-link {
    color: $white;
  }

  .alert-default {
    color: #ffffff;
    background-color: $primary-02;
    border-color: $transparent-border;
  }

  .badge.bg-white {
    background-color: #fff !important;
  }

  .badge.bg-light {
    background-color: rgba($white, 0.5) !important;
  }

  .custom-control-input:disabled~.custom-control-label::before {
    background-color: $white-3;
  }

  .custom-switch-indicator-xl {
    background: $primary-02;
    border: 1px solid $transparent-border;
  }

  .custom-switch-indicator {
    background: $primary-02;
    border: 1px solid $transparent-border;
  }

  .custom-switch-indicator-lg,
  .transparent-theme .custom-switch-indicator-xl {
    background: $primary-02;
    border: 1px solid $transparent-border;
  }

  .custom-switch-indicator:before,
  .custom-switch-indicator-md:before,
  .custom-switch-indicator-lg:before {
    background: $white;
  }

  .wizard>.steps a .number,
  .wizard>.steps a:hover .number,
  .wizard>.steps a:active .number {
    background-color: $primary-02;
  }

  .breadcrumb-item+.breadcrumb-item::before {
    color: $white;
  }

  .tree li.branch {
    background: $transparent-body;
  }

  .tree li.branch li {
    background: $transparent-body;
  }

  .tree li {
    border-color: $white-4;
  }

  .nav.panel-tabs .side-menu__icon {
    color: $white;
    fill: $white;
  }

  .panel-heading1 {
    background: $primary-02;
    color: $primary;
  }

  #accordion11 .panel-body {
    border: 1px solid $primary-02;
  }

  .accor h4 a {
    border-bottom: 1px solid $transparent-border;
    background: $primary-02  !important;
    color: $primary  !important;
  }

  .btn-dark-light {
    border-color: $transparent-border;
  }

  .main-nav-line .nav-link {
    border: 1px solid $transparent-border;
  }

  .dropdown-menu {
    box-shadow: 0px 16px 18px rgba(28, 28, 39, 0.2) !important;
  }

  .page-link-outline {
    border: 1px solid $transparent-border;
  }

  .tag {
    border: 1px solid $transparent-border;
  }

  .tag-addon {
    background: $transparent-theme;
  }

  .tabs-style-3 .nav.panel-tabs li a {
    border: 1px solid $transparent-border;
  }

  .tabs-style-4 .nav.panel-tabs li a {
    border: 1px solid $transparent-border;
  }

  .ql-snow.ql-toolbar button {
    border: 0px solid $transparent-border;
  }

  code {
    color: #c9c9c9;
  }

  .profile-cover__info .nav strong,
  .profile-tab .main-nav-line .nav-link.active {
    border: 1px solid $transparent-border;
  }

  .profile-cover__info .nav li:not(:first-child) {
    border-left: 1px solid $transparent-border;
  }

  .Choose1 {
    border: $transparent-border solid 1px;
  }

  .card-category1 {
    color: #fcfcff;
  }

  .bd-s {
    border-color: $transparent-border  !important;
  }

  .bg-dark {
    background-color: $primary-02  !important;
  }

  .fc .fc-daygrid-day-number {
    color: #fdfafa9c;
  }

  .fc-list-table td {
    border: 0;
  }

  #calendar2 .fc-scrollgrid.fc-scrollgrid-liquid thead tr th {
    border-bottom: 0;
  }

  .card-pay .tabs-menu.nav {
    background: $transparent-theme;
  }

  .list-group-item.active {
    color: #fff;
    background-color: $primary-02  !important;
    border-color: $primary-02  !important;
  }

  .bs-popover-start>.popover-arrow::before,
  .bs-popover-auto[data-popper-placement^="left"]>.popover-arrow::before {
    border-left-color: $transparent-border;
  }

  .bs-popover-top>.popover-arrow::before,
  .bs-popover-auto[data-popper-placement^="top"]>.popover-arrow::before {
    border-top-color: $transparent-border;
  }

  .bs-popover-bottom>.popover-arrow::before,
  .bs-popover-auto[data-popper-placement^="bottom"]>.popover-arrow::before {
    border-bottom-color: $transparent-border;
  }

  .bs-popover-end>.popover-arrow::before,
  .bs-popover-auto[data-popper-placement^="right"]>.popover-arrow::before {
    border-right-color: $transparent-border;
  }

  .popover {
    box-shadow: 4px 8px 16px 0 #141b2d;
  }

  a.tag-addon:hover {
    background: $transparent-theme;
  }

  .bootstrap-tagsinput input {
    color: #fff !important;
  }

  .accordion .card-body {
    border: 1px solid $transparent-border;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }

  @media (min-width: 769px) {
    .main-nav-line .nav-link+.nav-link {
      border: 1px solid $transparent-border;
    }
  }

  @media (max-width: 992px) {
    .vtimeline .timeline-wrapper .timeline-panel:after {
      border-right: 14px solid $white-1  !important;
      border-left: 0 solid $white-1  !important;
    }
  }

  @media (max-width: 991.98px) {
    .responsive-navbar.navbar .navbar-collapse {
      border-bottom: 1px solid $transparent-border;
      border-top: 1px solid $transparent-border;
    }
  }

  .btn-light svg {
    fill: rgba(255, 255, 255, 0.5);
  }

  .datepicker>.datepicker_inner_container>.datepicker_timelist::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.5) !important;
  }

  .datepicker>.datepicker_inner_container>.datepicker_timelist::-webkit-scrollbar-thumb {
    background: #00000085 !important;
  }

  .main-toggle {
    background-color: #ffffff45;
  }

  .main-toggle span {
    background-color: #000000cf;
  }

  .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename input {
    background-color: $primary-02;
    border: 0px solid $transparent-border;
    color: #ffffff;
  }

  .main-dropdown-form-demo .dropdown-title {
    color: #ffffff;
  }

  .form-check-input {
    background-color: $transparent-theme;
    border: 1px solid $transparent-border;
  }

  .profile-tab.tab-menu-heading .main-nav-line .nav-link {
    // border: 1px solid $transparent-border;
    border: 0;
  }

  @media (min-width: 1135px) {
    .main-header-left .form-control {
      width: 280px;
    }
  }

  .fc .fc-list-sticky .fc-list-day>* {
    background: #00000073;
  }

  @media (min-width: 992px) {
    .main-header-left .btn {
      background-color: transparent;
      border: 0px solid $white-1;
    }
  }

  .main-header .dropdown-menu {
    border: 1px solid $transparent-border  !important;
  }

  #country-selector .modal-header {
    border: 1px solid $transparent-border  !important;
  }

  .btn-country {
    color: $white-7;
  }

  .btn-check:checked+.btn-country,
  .btn-country.active,
  .btn-country:active {
    color: $black-5;
  }

  .btn-country:hover {
    border: 1px solid $white-5  !important;
  }

  .btn-country.active:hover {
    color: $black-5;
  }

  #country-selector .modal-body {
    background-image: none !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }

  .btn-check:checked+.btn-country {
    color: #000;
  }

  .sidebar .tabs-menu ul li .active {
    .side-menu__icon {
      color: $white;
      fill: $white;
    }
  }

  .chat .msg_cotainer {
    background-color: $primary-02;
  }

  .primary-custom-card:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: $transparent-theme  !important;
    opacity: 0.1;
    left: 0;
    right: 0;
    border-radius: 5px;
    top: 0;
    bottom: 0;
  }

  .apexcharts-legend-text {
    color: rgba($white, 0.8) !important;
  }

  .apexcharts-menu-icon {
    svg {
      fill: $white;
    }
  }

  .apexcharts-menu-icon:hover svg {
    fill: $white  !important;
  }

  .apexcharts-menu {
    background: $transparent-theme;
    border: 1px solid $transparent-border;
  }

  .apexcharts-gridlines-horizontal {
    line {
      stroke: rgba(255, 255, 255, 0.1);
    }
  }

  .apexcharts-menu-item:hover {
    background: $transparent-theme  !important;
  }

  .select2-dropdown {
    border-color: $transparent-border  !important;
  }

  @media (max-width: 991px) {
    .responsive-logo .mobile-logo {
      margin-top: 3px !important;
    }
  }

  form[role="search"].active input {
    box-shadow: 5px 6px 6px -3px rgba($black, 0.1);
  }

  .navbar-toggler-icon {
    color: $white;
  }

  .card-options a:not(.btn) {
    color: $white;
  }

  .apexcharts-yaxis {
    color: $white;
  }

  .apexcharts-yaxis-title text {
    fill: rgba($white, 0.8) !important;
  }

  .apexcharts-yaxis-texts-g text,
  .apexcharts-xaxis-texts-g text {
    fill: rgba($white, 0.8) !important;
  }

  .irs-modern .irs-slider {
    background-color: $transparent-theme;
  }

  .irs-modern .irs-slider::before {
    background-color: $transparent-theme;
  }

  .irs-outline .irs-slider {
    background-color: $transparent-theme;
  }

  .apexcharts-xaxistooltip {
    color: #ffffff;
    background: $transparent-theme;
    border: 1px solid $transparent-border;
  }

  .apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: $transparent-theme  !important;
    border-color: $transparent-border;
  }

  .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: $transparent-theme  !important;
    border-color: $transparent-border;
  }

  .twentytwenty-handle {
    border: 2px solid $transparent-border;
    background: rgba(0, 0, 0, 0.6);
  }

  .twentytwenty-left-arrow {
    border-right: 10px solid $transparent-border;
  }

  .twentytwenty-right-arrow {
    border-left: 10px solid $transparent-border;
  }

  .twentytwenty-horizontal .twentytwenty-handle:before,
  .twentytwenty-horizontal .twentytwenty-handle:after,
  .twentytwenty-vertical .twentytwenty-handle:before,
  .twentytwenty-vertical .twentytwenty-handle:after {
    background: $transparent-theme;
  }

  .twentytwenty-horizontal .twentytwenty-handle:before {
    box-shadow: 0 3px 0 $transparent-theme, 0px 0px 12px $transparent-theme;
  }

  .twentytwenty-horizontal .twentytwenty-handle:after {
    box-shadow: 0 -3px 0 $transparent-theme, 0px 0px 12px $transparent-theme;
  }

  .twentytwenty-up-arrow {
    border-bottom: 6px solid $transparent-border;
  }

  .twentytwenty-down-arrow {
    border-top: 6px solid $transparent-border;
  }

  a.option-dots {
    border: 1px solid $transparent-border;
  }

  .owl-nav button {
    background: rgba($black, 0.5) !important;
    border: 1px solid $transparent-border  !important;
  }

  .avatar-list-stacked .avatar1 {
    box-shadow: #3d4152 0px 0px 0px 2px !important;
  }

  .btn-light:focus,
  .btn-light.focus {
    background-color: $transparent-theme  !important;
    box-shadow: none;
    border-color: $transparent-border  !important;
  }

  .btn-outline-light:not(:disabled):not(.disabled):active {
    background-color: $transparent-theme;
    color: $white;
    border-color: $transparent-border;
  }

  .dropdown-item.active,
  .dropdown-item:active {
    background-color: $transparent-body;
  }

  .dropdown-menu .dropdown-header {
    border-bottom: 1px solid $transparent-border;
  }

  .tab-menu-heading {
    border-bottom: 0px solid $transparent-border  !important;
  }

  .accor div a {
    border-bottom: 0px solid $transparent-border;
    color: $white;
  }

  #user-datatable thead th {
    background-color: $transparent-theme  !important;
  }

  .background-image-blog {
    background-image: url(../../assets/img/photos/error.jpg) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: 320px;
    position: relative;
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
    border-radius: 0px;
  }

  .mail-option .dropdown-menu>li>a {
    color: $white;
  }

  .dropdown-menu>li>a:focus {
    background: #272738;
  }

  .main-chat-footer {
    border-top: 1px solid $transparent-border;
  }

  .shared-files {
    border: 1px solid $transparent-border  !important;
  }

  .nice-select .list {
    border: 1px solid $transparent-border;
  }

  .tabs-menu1 ul li a {
    color: #eaecf3;
  }

  .btn-white {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
    border-color: $transparent-border;
  }

  .theme-container button {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid $transparent-border;
  }

  .theme-container1 button {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid $transparent-border;
  }

  .theme-container2 button {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid $transparent-border;
  }

  .intl-tel-input .flag-dropdown .country-list .country .dial-code {
    color: $white;
  }

  .intl-tel-input .flag-dropdown .selected-flag .down-arrow {
    border-top: 4px solid $white;
  }

  .intl-tel-input input {
    border: 1px solid $transparent-border;
    background: transparent;
    color: #fff;
  }

  .SumoSelect>.optWrapper.multiple>.MultiControls>p.btnOk {
    border-right: 1px solid $transparent-border;
    border-radius: 0px 0px 0px 3px;
  }

  .SumoSelect>.optWrapper.multiple>.MultiControls>p:hover {
    background-color: $transparent-theme;
  }

  .notification .notification-body {
    background: $transparent-theme;
  }

  .notification .notification-body:before {
    border-right-color: $transparent-theme;
  }

  .notification .notification-icon a {
    background: rgba(255, 255, 255, 0.6);
  }

  .notification-badge {
    background-color: rgba($white, 0.4);
    color: #eaecf3;
  }

  .pricing-tabs ul.nav-price li a {
    background: $transparent-theme;
  }

  .pricing-tabs ul.nav-price {
    border: 1px solid $transparent-border;
  }

  .pricing-tabs ul.nav-price li a.active {
    color: #fff;
    background-color: $primary;
  }

  a.text-primary:hover,
  a.text-primary:focus {
    color: $primary  !important;
  }

  .panel-heading2 {
    background: $transparent-theme  !important;
    color: #eaecf3 !important;
  }

  .gray-set .bg-gray-100 {
    color: $black;
  }

  .gray-set .bg-gray-200 {
    color: $black;
  }

  .gray-set .bg-gray-300 {
    color: $black;
  }

  .gray-set .bg-gray-400 {
    color: $black;
  }

  .richText .richText-editor {
    background-color: $transparent-theme;
    border-left: transparent solid 2px;
  }

  .richText {
    border: $transparent-border solid 1px !important;
    background-color: $transparent-theme  !important;
  }

  .richText .richText-toolbar ul {
    border-bottom: $transparent-border solid 1px;
  }

  .richText .richText-toolbar ul li a {
    color: #eaecf3;
  }

  .ck.ck-editor__main>.ck-editor__editable {
    background: $transparent-theme;
  }

  .ck.ck-toolbar {
    border: 1px solid $transparent-border  !important;
    background: $transparent-theme  !important;
    color: #eaecf3 !important;
  }

  .ck.ck-editor__main>.ck-editor__editable {
    border: 1px solid $transparent-border  !important;
  }

  .ck.ck-reset_all * {
    color: #eaecf3 !important;
  }

  .ck.ck-button,
  a.ck.ck-button {
    background: transparent !important;
    border: 1px solid $transparent-border;
  }

  .richText .richText-undo,
  .richText .richText-redo {
    border-right: #efefef solid 0px;
  }

  .richText .richText-toolbar ul li a:hover {
    background-color: $transparent-theme;
  }

  .richText .richText-toolbar ul li a .richText-dropdown-outer .richText-dropdown {
    background-color: #272738;
    border: $transparent-border solid 1px;
  }

  .richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a {
    display: block;
    border-bottom: $transparent-border solid 1px;
  }

  .richText .richText-toolbar ul li a .richText-dropdown-outer .richText-dropdown .richText-dropdown-close {
    background: #fff0;
    color: #ffffff;
  }

  .richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a:hover {
    background-color: #272738;
  }

  .richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a:hover {
    background-color: #272738;
  }

  .richText .richText-form input[type="text"],
  .richText .richText-form input[type="file"],
  .richText .richText-form input[type="number"],
  .richText .richText-form select {
    border: $transparent-border solid 1px;
    background-color: #1d202c;
    color: #fff;
  }

  .ql-snow .ql-tooltip {
    background-color: $transparent-theme;
    box-shadow: 0px 0px 5px #000;
    border: 1px solid $transparent-border;
    color: #eaecf3;
  }

  .ql-snow .ql-tooltip input[type="text"] {
    border: 1px solid $transparent-border;
    background-color: $transparent-theme;
    color: #eaecf3;
  }

  .ck.ck-list {
    background: #272738;
  }

  .ck.ck-dropdown__panel,
  .ck.ck-balloon-panel {
    border: 1px solid $transparent-border  !important;
    box-shadow: 0 3px 9px 0 #000 !important;
  }

  .ck-rounded-corners .ck.ck-dropdown__panel,
  .ck.ck-dropdown__panel.ck-rounded-corners,
  .ck.ck-list {
    border-radius: 0px !important;
  }

  .ck.ck-reset,
  .ck.ck-reset_all,
  .ck.ck-reset_all * {
    background: $transparent-theme;
  }

  .ck.ck-input-text {
    border: 1px solid $transparent-border  !important;
  }

  .ck.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-label {
    background-color: $transparent-theme;
  }

  .ck.ck-balloon-panel[class*="arrow_n"]:after {
    border-bottom-color: $transparent-theme;
    margin-top: 0;
  }

  .ck .ck-fake-link-selection_collapsed {
    outline: 0px;
  }

  .main-error-wrapper h1 {
    color: #eaecf3;
  }

  .main-error-wrapper h2 {
    color: #eaecf3;
  }

  .main-signup-header label {
    color: #eaecf3;
  }

  .main-signup-header .form-control:focus {
    border-color: $transparent-border;
  }

  .main-signin-header .form-control:focus {
    border-color: $transparent-border;
  }

  .note-editor.note-frame.panel.panel-default .panel-heading {
    background-color: $transparent-theme;
    border-bottom: 1px solid $transparent-border;
  }

  .note-editor.note-airframe,
  .note-editor.note-frame {
    border: 1px solid $transparent-border;
  }

  .note-btn.btn-default {
    background-color: $transparent-theme;
    border-color: $transparent-border;
  }

  .note-btn {

    i,
    span {
      color: #eaecf3;
    }
  }

  .ql-wrapper-demo {
    background-color: $transparent-theme;
  }

  #global-loader {
    background-color: #000;
  }

  #videomodal,
  #audiomodal {
    .modal-content {
      box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.5);
    }
  }

  .file-image-1 {
    border: 1px solid $transparent-border;
  }

  .table-striped>tbody>tr:nth-of-type(2n + 1)>* {
    color: rgba(255, 255, 255, 0.7);
    background-color: #363b50;
  }
}

.transparent-theme .table-hover>tbody>tr:hover>* {
  color: #ffffff !important;
}

.transparent-theme table.table-bordered.dataTable th:last-child,
.transparent-theme table.table-bordered.dataTable th:last-child {
  border-right-width: 0px !important;
}

.rtl.transparent-theme table.table-bordered.dataTable th:last-child,
.rtl.transparent-theme table.table-bordered.dataTable th:last-child,
.rtl.transparent-theme table.table-bordered.dataTable td:last-child,
.rtl.transparent-theme table.table-bordered.dataTable td:last-child {
  border-right-width: 1px !important;
  border-left-width: 1px !important;
}

.transparent-theme.rtl .sidebar {
  border-right: 1px solid $transparent-border;
}

.transparent-theme .note-editor .btn-default:not(:disabled):not(.disabled):active {
  background-color: $transparent-theme;
}

@media (min-width: 992px) {
  .ltr.main-body.app.sidebar-mini.transparent-theme.sidenav-toggled {

    .desktop-logo,
    .desktop-dark,
    .mobile-logo {
      display: none !important;
    }

    .mobile-dark {
      display: block !important;
    }
  }
}

.ltr.main-body.app.sidebar-mini.transparent-theme.sidenav-toggled-open {

  .desktop-logo,
  .mobile-dark,
  .mobile-logo {
    display: none !important;
  }

  .desktop-dark {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .horizontal.transparent-theme .app-sidebar {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  }

  .transparent-theme.horizontal .sticky.is-expanded.sticky-pin {
    .side-menu .slide .side-menu__item.active {
      border-bottom: 3px solid $white;
    }

    .side-menu .side-menu__item.active .side-menu__icon {
      fill: $white  !important;
    }

    .side-menu .side-menu__item.active .side-menu__label {
      color: $white  !important;
    }
  }

  .transparent-theme.horizontal .sub-side-menu__item:hover {
    color: $white  !important;
  }

  .transparent-theme.horizontal .sub-slide-menu1 .sub-slide-item2:hover {
    color: $white  !important;
  }

  .transparent-theme.horizontal .horizontal-main .sub-slide2 .sub-slide-menu1 {
    background-color: $transparent-body;
    border: 1px solid $transparent-border;
  }

  .transparent-theme.horizontal-hover.horizontal .sub-slide-menu .sub-side-menu__item::before {
    color: $white;
  }

  .transparent-theme.horizontal-hover.horizontal .sub-slide-menu1 .sub-slide-item2:before {
    color: $white;
    opacity: 0.5;
  }
}

.transparent-theme #back-to-top {
  background-color: $transparent-theme;
  color: $transparent-body;
}

.transparent-theme .chart-circle .chart-circle-value.circle-style {
  background-color: transparent !important;
}

.transparent-theme .chart-circle .chart-circle-value.circle-style {
  border: 2px dotted $primary  !important;
  background: transparent !important;
}

.transparent-theme .chart-circle[data-color] {
  color: $white  !important;
}

.transparent-theme.main-body.app.sidebar-mini.sidenav-toggled.hover-submenu.sidenav-toggled-open {
  .main-logo.desktop-dark {
    display: none !important;
  }

  .main-logo.mobile-dark {
    display: block !important;
  }
}

.transparent-theme.main-body.app.sidebar-mini.sidenav-toggled.hover-submenu1.sidenav-toggled-open {
  .main-logo.desktop-dark {
    display: none !important;
  }

  .main-logo.mobile-dark {
    display: block !important;
  }
}

.transparent-theme .sub-slide-menu1 .sub-slide-item2:before {
  color: #fff;
  opacity: 0.5;
}

.transparent-theme .app-sidebar .slide-menu .slide-item .sub-side-menu__item .sub-slide-item2::before {
  color: #fff;
  opacity: 0.5;
}

.transparent-theme .main-header-right {
  .dropdown-menu:before {
    background: $primary;
    border-top: 1px solid $transparent-border;
    border-left: 1px solid $transparent-border;
  }
}

.transparent-theme {

  .main-profile-menu .dropdown-item:hover,
  .main-profile-menu .dropdown-item:focus {
    color: $white;
  }
}

.transparent-theme .side-menu__item.active .side-menu__icon {
  fill: $white  !important;
}

.transparent-theme.main-body.sidebar-gone.horizontal.sidenav-toggled {
  .main-sidemenu .side-menu {
    padding-top: 21px;
  }
}

.transparent-theme .main-footer .text-primary {
  color: $white  !important;
}

@media (min-width: 992px) {
  .transparent-theme.hover-submenu1.app.sidenav-toggled-open .side-menu__label1 a {
    color: $white  !important;
  }

  .transparent-theme.hover-submenu1.app.sidenav-toggled-open .sub-side-menu__item:hover {
    color: $white  !important;
  }
}

// .transparent-theme .vtimeline .timeline-wrapper .timeline-panel:after {
//   border-left: 14px solid rgba(255,255,255, 0.05) !important;
//   border-right: 0 solid rgba(255,255,255,0.05) !important;
// }
.transparent-theme .main-mail-subject span {
  color: $white-5;
}

.transparent-theme .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month .ui-state-default {
  color: $white-5;
}

.transparent-theme .ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.transparent-theme .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  color: $white-7;
}

.transparent-theme .main-datetimepicker>.datepicker_inner_container>.datepicker_calendar td.day_another_month {
  color: $white-8;
}

.transparent-theme .form-control {
  &::-webkit-file-upload-button {
    color: $white;
  }
}

// .transparent-theme .SumoSelect.disabled>.CaptionCont {
//   background-color: $transparent-border;
// }
.transparent-theme .dropify-wrapper .dropify-message span.file-icon {
  color: $white;
}

@media screen and (min-width: 992px) {
  .transparent-theme.main-body.app.sidebar-mini.sideicon-menu.sidenav-toggled.rtl.sidenav-toggled-open {
    .main-logo.mobile-dark {
      display: none !important;
    }
  }
}

.transparent-theme .fc-theme-standard .fc-popover-header {
  background: $transparent-body;
}

.transparent-theme .fc-theme-standard .fc-popover {
  background-color: $transparent-body;
  border-color: $transparent-border;
}

.transparent-theme .tabs-style-4 .nav.panel-tabs li a.active {
  background: $primary;
}

.transparent-theme.error-page1 {
  .main-card-signin {
    background-color: transparent !important;
  }
}

.transparent-theme .main-chat-footer .main-msg-send {
  border-color: $transparent-border;
}

.transparent-theme .note-btn.btn-default:not(:disabled):not(.disabled).active {
  background-color: transparent;
  border-color: $white-2;
}

.rtl.transparent-theme .border-end {
  border-left: 1px solid $transparent-border  !important;
  border-right: inherit !important;
}

.rtl.transparent-theme .main-sidebar-header {
  border-left: 0px solid rgba(255, 255, 255, 0.15);
  border-right: 0px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.transparent-theme {
  .tab_wrapper .content_wrapper .accordian_header.active {
    border: 1px solid $transparent-border;
  }

  .side-menu__item:hover .side-menu__icon,
  .side-menu__item:hover .side-menu__label,
  .side-menu__item:hover .angle {
    color: $white  !important;
    fill: $white  !important;
  }

  .notification:before {
    background-color: $white-2;
  }

  .main-mail-date {
    color: $white-5;
  }

  .app-sidebar .slide-menu a.active:before {
    color: $white;
    opacity: 1;
  }

  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: $white-5;
  }

  .main-cart-list .main-cart-item:hover {
    background-color: $white-05;
  }

  svg.peity {
    path:last-child {
      fill: $black-2;
    }
  }
}

.transparent-theme {

  .datetimepicker-hours span.hour:hover,
  .datetimepicker-hours span.minute:hover,
  .datetimepicker-hours span.month:hover,
  .datetimepicker-hours span.year:hover {
    background: $transparent-theme;
  }

  .datetimepicker-minutes span.hour:hover,
  .datetimepicker-minutes span.minute:hover,
  .datetimepicker-minutes span.month:hover,
  .datetimepicker-minutes span.year:hover {
    background: $transparent-theme;
  }
}

.transparent-theme {
  .form-control:disabled {
    background-color: $transparent-theme  !important;
    opacity: 0.5;
  }

  .form-control[readonly] {
    background-color: $transparent-theme  !important;
  }

  .form-control-plaintext {
    color: $white-8;

    &::placeholder {
      color: $white-5;
    }
  }

  .sub-side-menu__item:hover {
    color: $white  !important;
  }
}

.transparent-theme {

  .btn-check:checked+.btn-country,
  .btn-country.active,
  .btn-country:active {
    background-color: transparent;
  }

  .latest-tasks .time {
    color: $white-4;
  }

  .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: $transparent-body  !important;
    opacity: 0.5;
  }

  .custom-control-input:disabled~.custom-control-label {
    color: $white-6;
  }

  .card-item-desc .card-item-desc-1 dd {
    color: $white;
  }

  .main-mail-subject span {
    color: $white-6;
  }

  .datetimepicker-years span.hour:hover,
  .datetimepicker-years span.minute:hover,
  .datetimepicker-years span.month:hover,
  .datetimepicker-years span.year:hover {
    background: $transparent-theme;
  }

  .datetimepicker-months span.hour:hover,
  .datetimepicker-months span.minute:hover,
  .datetimepicker-months span.month:hover,
  .datetimepicker-months span.year:hover {
    background: $transparent-theme;
  }

  .datetimepicker table .new,
  .datetimepicker table .old {
    color: $white;
  }

  .main-mail-compose-box {
    background: $transparent-body;
  }

  .main-mail-compose-body .form-group .nav-link {
    color: $white;
  }

  .main-chat-msg-name small {
    color: $white;
  }

  .main-chat-body .media-body>div:last-child {
    color: $white-6;
  }

  .main-chat-list .media-body p {
    color: $white-6;
  }

  .pricing-tabs ul.nav-price {
    background: transparent;
  }

  .panel-heading2 {
    border-color: $white-2;
  }
  .dropdown-item.disabled,
  .dropdown-item:disabled {
    color: $white-6 !important;
  }
  .list-group-item.disabled,
  .list-group-item:disabled {
    color: $white-6;
  }
}