/*********************************************************************************************************************
  Este arquivo customiza de forma dinâmica, e em tempo de execução, as classes nativas do Meterial UI listadas abaixo.
  Até o presente momento (11/2024), o Angular ainda não disponibiliza uma alternativa viável para o uso do ng-deep
  como forma de customização de classes nativas do Meterial UI. Então, para o projeto, convencionou-se simular o
  encapsulamento de cada classe através de um stylesheet customizado.
**********************************************************************************************************************/

/* Ajusta o background do autocomplete*/
.mdc-menu-surface {
    background-color: white !important;
}

/* Ajusta o texto exibido no autocomplete*/
.mdc-list-item__primary-text {
    font-family: 'Oxygen', 'Source Sans Pro', Helvetica, Arial, Verdana, Tahoma, sans-serif !important;
    font-size: 1rem !important;
    color: #5B5B5F !important;
}

.mat-mdc-slide-toggle.mat-accent {
  --mdc-switch-selected-track-color: var(--color-2) !important;
  --mdc-switch-unselected-track-color: #a4a4a4 !important;
  --mdc-switch-selected-hover-track-color: var(--color-2) !important;
  --mdc-switch-unselected-hover-track-color: #a4a4a4 !important;
  --mdc-switch-selected-pressed-track-color: var(--color-2) !important;
  --mdc-switch-unselected-pressed-track-color: #a4a4a4 !important;
  --mdc-switch-selected-focus-track-color: var(--color-2) !important;
  --mdc-switch-unselected-focus-track-color: #a4a4a4 !important;
  --mdc-switch-selected-handle-color: white !important;
  --mdc-switch-unselected-handle-color: white !important;
  --mdc-switch-selected-hover-handle-color: white !important;
  --mdc-switch-unselected-hover-handle-color: white !important;
  --mdc-switch-selected-pressed-handle-color: white !important;
  --mdc-switch-unselected-pressed-handle-color: white !important;
  --mdc-switch-selected-focus-handle-color: white !important;
  --mdc-switch-unselected-focus-handle-color: white !important;
}

.mat-mdc-slide-toggle .mdc-switch {
  width: var(--mdc-switch-track-width, 45px) !important;
}

.mat-mdc-slide-toggle .mdc-switch .mdc-switch__track {
  height: var(--mdc-switch-track-height, 25px) !important;
  border-radius: var(--mdc-switch-selected-track-shape, 18px) !important;
}

.mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle {
  width: var(--mdc-switch-handle-width, 20px) !important;
  height: var(--mdc-switch-handle-height, 20px) !important;
  border-radius: var(--mdc-switch-handle-shape, 18px) !important;
  margin-left: -2px !important;
}

.splide__slide {
    width: var(--custom-width-carousel-cell) !important;
    height: auto !important;
    margin-right: 1rem !important;
}

.splide__pagination__page {
    background: white !important;
    height: 15px !important;
    width: 15px !important;
    border: 2px solid var(--color-2) !important;
    opacity: 0.7 !important;
}

.splide__pagination__page.is-active {
    background: var(--color-2) !important;
    height: 13px !important;
    width: 24px !important;
    opacity: 1 !important;
    border-radius: 15px !important;
    margin: 5px !important;
}

.splide__pagination {
    bottom: -2rem !important;
}

.splide__track {
    padding-bottom: 10px !important;
}

.splide__arrow--prev {
  left: -1.7rem;
}

.splide__arrow--next {
  right: -2em;
}