// Lightbox
@import '~ngx-lightbox/lightbox.css';

// Select 2
@import '~@ng-select/ng-select/themes/default.theme.css';

// Date Picker
@import '~flatpickr/dist/flatpickr.css';

// LeafLet Chart
@import 'leaflet/dist/leaflet.css';

// Emoji Picker
// @import '~@ctrl/ngx-emoji-mart/picker';
.emoji-mart {
  position: absolute;
  bottom: 20px;
  left: -80px;
}

.emoji-mart-preview {
  display: none;
}

.pointer {
  cursor: pointer;
}

// dropdown
.dropdown-toggle {
  &:after {
    display: none;
  }
}

.modal-backdrop {
  z-index: 1002 !important;
}

.dropdown-toggle::after {
  display: none;
}

.dropzone .dz-message {
  font-size: 24px;
  min-height: 150px !important;
  border: none !important;
  // background: #fff !important;
  color: #495057 !important;
}

// ----- Advance Ui --------//
// Rating
.stars {
  font-size: 30px;
  color: var(--bs-gray-600);
}

.star {
  position: relative;
  display: inline-block;
}

.star_fill {
  color: $gray-500;
}

.full {
  color: #b0c4de;
}

.half {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  color: var(--bs-gray-600);
}

.filled {
  color: #1e90ff;
}

.bad {
  color: #deb0b0;
}

.filled.bad {
  color: #ff1e1e;
}

.halfHeart {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  color: red;
}

// Calendar
.flatpickr-calendar.open {
  z-index: 1061;
}

// Swich Btn
.switch.switch-small.checked > .switch-pane > span {
  color: #fff;
}

.switch.switch-small > .switch-pane > span {
  font-size: 14px;
}

// Ck Editer
.ck-editor__editable {
  min-height: 245px !important;
}

.custom-accordion {
  .accordion-list {
    padding: 0px;
    background-color: transparent;
    margin-bottom: 20px;
  }
}

[data-bs-theme='dark'] {
  .ng-select .ng-select-container {
    background-color: #2a3042 !important;
    color: #c3cbe4 !important;
    border-color: #353d55 !important;
  }

  .ng-dropdown-panel {
    background-color: #2a3042 !important;
    border-color: #353d55 !important;
  }

  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    background-color: #2a3042 !important;
    border-color: #353d55 !important;

    color: #c3cbe4 !important;
  }

  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: #393f55 !important;
    color: #d6dbeb !important;
  }

  // MC SINWEB-338
  input:read-only,
  input:disabled,
  select:disabled,
  textarea:disabled,
  textarea:read-only {
    background-color: #3d3d3d !important;
  }
}

//dropzone
.dropzone > .dropzone.dz-wrapper .dz-message {
  background: var(--#{$prefix}custom-white) !important;
  color: var(--#{$prefix}body-color) !important;
}

[data-bs-theme='dark'] {
  .dropzone > .dropzone.dz-wrapper .dz-message {
    background: $dark !important;
    color: $light !important;
  }

  .dropzone {
    background: $dark !important;
    border-color: $secondary !important;
  }
}

// ck editor
.ck.ck-toolbar {
  background-color: var(--#{$prefix}light) !important;
  border: 1px solid $input-border-color !important;
}

.ck-reset_all :not(.ck-reset_all-excluded *),
.ck.ck-reset_all {
  color: var(--#{$prefix}body-color) !important;
}

.ck.ck-editor__main > .ck-editor__editable {
  background-color: var(--#{$prefix}custom-white) !important;
  color: var(--#{$prefix}body-color) !important;
}

[data-bs-theme='dark'] {
  .ck.ck-editor__main > .ck-editor__editable {
    background-color: $dark !important;
    color: $light !important;
  }
}

.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
  border-color: $input-border-color !important;
}

.ck.ck-button:not(.ck-disabled):hover,
a.ck.ck-button:not(.ck-disabled):hover,
.ck.ck-button.ck-on,
a.ck.ck-button.ck-on {
  background-color: var(--#{$prefix}light) !important;
}

.ck.ck-toolbar .ck.ck-toolbar__separator {
  background: $input-border-color !important;
}

// Dark Mode Css
[data-bs-theme='dark'] {
  .bs-datepicker {
    box-shadow: none !important;
  }

  .bs-datepicker-container {
    background-color: #32394e !important;
  }

  .bs-datepicker-head button {
    color: #c3cbe4 !important;
  }

  .bs-datepicker-body {
    border: 1px solid transparent;
  }

  .auth-logo .auth-logo-light {
    display: block;
  }

  .auth-logo .auth-logo-dark {
    display: none;
  }

  // Accordion
  .accordion {
    --bs-accordion-color: #fff;
    --bs-accordion-bg: transparent;
  }

  .accordion-button {
    color: var(--bs-body-color);
  }
}

.page-link {
  display: inline-table;
}

//   vertical tab

.vertical-tab {
  ul {
    display: inline-block;
    position: relative;
    z-index: 1;
    border: 0;

    @media (max-width: 1024px) {
      display: block;
    }

    li {
      a {
        padding: 8px 50px;

        @media (max-width: 1440px) {
          padding: 8px 30px;
        }
      }
    }
  }

  .tab-content {
    position: absolute;
    top: 0;

    @media (max-width: 1024px) {
      position: inherit;
    }
  }
}

.ecommerce-checkout-tab {
  ul {
    display: inline-block;
    float: left;
    margin-right: 20px;
    border: 0;

    @media (max-width: 600px) {
      display: block;
      float: inherit;
    }
  }

  li {
    a {
      padding: 1px 80px;
    }
  }
}

.product-detai-imgs {
  ul {
    border: 0;

    a {
      border: 0 !important;
      width: 130px;

      @media (max-width: 425px) {
        width: 50px;
      }
    }
  }
}

.tooltip,
.tooltip-arrow {
  position: absolute;
}

[data-layout-size='boxed'] {
  .vertical-tab {
    ul {
      display: inline-block;
      position: relative;
      z-index: 1;
      border: 0;

      @media (max-width: 1024px) {
        display: block;
      }

      li {
        a {
          padding: 8px 50px;
        }
      }
    }
  }
}

.bs-datepicker-head {
  background-color: transparent !important;
}

.bs-datepicker-head button {
  color: black !important;
}

.owl-theme .owl-nav [class*='owl-'] {
  width: 30px;
  height: 30px;
  line-height: 28px !important;
  font-size: 30px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  color: #ffff !important;
  justify-content: center !important;
  margin: 4px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.tab-bg {
  .nav-tabs {
    background-color: var(--#{$prefix}light);
    margin-bottom: 20px;
  }
}

// popover
.bs-popover-top,
.bs-popover-bottom {
  margin-left: -8px !important;
}

.bs-popover-left .arrow,
.bs-popover-right .arrow {
  margin-top: -8px !important;
}

.custom-widget-nav {
  .nav-tabs {
    justify-content: flex-end;
    margin-top: -1.5rem;
  }
}

.custom-vertical-tabs {
  display: flex;
  align-items: flex-start;
  gap: 16px;

  .nav-tabs {
    flex-direction: column;

    @media (min-width: 992px) {
      flex-shrink: 0;
    }
  }

  .tab-content {
    @media (min-width: 992px) {
      flex-grow: 1;
    }
  }

  @media (max-width: 991px) {
    flex-direction: column;
    gap: 16px;

    .nav-tabs,
    .tab-content {
      width: 100%;
    }
  }
}

// nav-justify-center

.nav-justify-center {
  .nav-tabs {
    justify-content: center;
  }
}

.ngx-slider .ngx-slider-bar {
  background-color: var(--#{$prefix}tertiary-bg) !important;
}

#backdrop {
  &.offcanvas-backdrop {
    display: none;

    &.show {
      display: inline-block;
    }
  }
}

//SP CAMBIO CON RESPECTO DEL ORIGINAL
input[type='search']::-webkit-search-cancel-button {
  display: none;
}

input[readonly],
textarea[readonly] {
  background-color: #f8f8fb !important;
}

input:read-only,
input:disabled,
select:disabled,
textarea:disabled,
textarea:read-only {
  // background: #eff2f7 !important;
  cursor: default;
}

//P SINWEB-296 debido a un comportamiento desconocido de entre prime y boostrap css , que hacia que no funcione el style gridlines de la tabla, se agarraron todas las clases
//que define ngprime de gridlines se las migro y se agrego !important
.p-datatable.p-datatable-gridlines .p-datatable-header {
  border-width: 1px 1px 0 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines .p-datatable-footer {
  border-width: 0 1px 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines .p-paginator-top {
  border-width: 0 1px 0 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines .p-paginator-bottom {
  border-width: 0 1px 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
  border-width: 1px 0 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
  font-size: 13px !important;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
  border-width: 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
  border-width: 1px 0 0 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
  font-size: 13px !important;
}
.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
  border-width: 1px 1px 0 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
  border-width: 1px 0 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines
  .p-datatable-tbody
  > tr:last-child
  > td:last-child {
  border-width: 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
  border-width: 1px 0 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
  border-width: 1px 1px 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines
  .p-datatable-thead
  + .p-datatable-tfoot
  > tr
  > td {
  border-width: 0 0 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines
  .p-datatable-thead
  + .p-datatable-tfoot
  > tr
  > td:last-child {
  border-width: 0 1px 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(
    .p-datatable-tbody
  )
  .p-datatable-tbody
  > tr
  > td {
  border-width: 0 0 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(
    .p-datatable-tbody
  )
  .p-datatable-tbody
  > tr
  > td:last-child {
  border-width: 0 1px 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(
    .p-datatable-tfoot
  )
  .p-datatable-tbody
  > tr:last-child
  > td {
  border-width: 0 0 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(
    .p-datatable-tfoot
  )
  .p-datatable-tbody
  > tr:last-child
  > td:last-child {
  border-width: 0 1px 1px 1px !important;
  border-color: rgba(52, 58, 64, 0.25) !important;
}

//SP SINWEB DRAGULA LIB CSS INICIO
/* in-flight clone */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
  filter: alpha(opacity=80);
  pointer-events: none;
}
/* high-performance display:none; helper */
.gu-hide {
  left: -9999px !important;
}
/* added to mirrorContainer (default = body) while dragging */
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
/* added to the source element while its mirror is dragged */
.gu-transit {
  opacity: 0.2;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
  filter: alpha(opacity=20);
}

//SP SINWEB DRAGULA LIB CSS FIN

// MC SINWEB-338
.btn-dark-hover:hover,
.btn-dark-hover:focus,
.btn-dark-hover:active {
  color: #74788d;
}

// SP SINWEB-536
.back-z-index {
  z-index: 1055 !important;
}

.modal-z-index {
  z-index: 1056 !important;
}

.back-z-index-1 {
  z-index: 1057 !important;
}

.modal-z-index-1 {
  z-index: 1058 !important;
}

.back-z-index-2 {
  z-index: 1059 !important;
}

.modal-z-index-2 {
  z-index: 1060 !important;
}

.back-z-index-3 {
  z-index: 1061 !important;
}

.modal-z-index-3 {
  z-index: 1062 !important;
}

.back-z-index-4 {
  z-index: 1063 !important;
}

.modal-z-index-4 {
  z-index: 1064 !important;
}

.back-z-index-last {
  z-index: 1065 !important;
}

.modal-z-index-last {
  z-index: 1066 !important;
}
