:root {
	--font-family: 'Libre Franklin', 'Arial', sans-serif;
  ---animation-delay: .3s;
  --back-modal:#f0f0f0be;
  &[data-theme="dark"]{
    --color-primary: #1F1F1F;
    --back-modal:#6d6d6dbe;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

html {
	width: 100%;
	height: 100%;
	padding: 10px;
	scroll-behavior: smooth;
	background-color: var(--background-S360);
  transition: background-color var(---animation-delay);
  overflow-x: hidden;
}

body {
	overflow-x: hidden;
	height: 100%;

  /* Centrar visualmente la barra de scroll */
  &::-webkit-scrollbar {
    height: 8px; /* Altura de la barra de desplazamiento */
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--background-scroll);
    border-radius: 30px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 30px;
    cursor: pointer;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #818080; /* Color cuando se pasa el cursor */
  }
  &::-webkit-scrollbar-corner {
    background-color: transparent; /* Elimina el cuadro blanco */
  }

}

.basic-input--disabled .block-icon{
  display: none;
}

.basic-input--filled {
  #I_Fecha {
    cursor: pointer;
  }
  & label {
    cursor: pointer !important;
  }
}

.DisplayNone{
  display: none !important;
}

button:disabled {
  opacity: 0.3;
  cursor: not-allowed;

  & span {
    cursor: not-allowed !important;
  }
}

#root{
  height: 100%;
  .mainContainer{
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    /* Centrar visualmente la barra de scroll */
    &::-webkit-scrollbar {
      height: 8px; /* Altura de la barra de desplazamiento */
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background-color: var(--background-scroll);
      border-radius: 30px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #999;
      border-radius: 30px;
      cursor: pointer;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #818080; /* Color cuando se pasa el cursor */
    }
    &::-webkit-scrollbar-corner {
      background-color: transparent; /* Elimina el cuadro blanco */
    }

  }
  #tableContainer{
    width: 100%;
    height: 95%;

    thead{
      .header-check-boxes .container-checkBox-column{
        display: none;
      }
      .original-row .check-column-added{
        background-color: var(--header-cell) !important;
      }
    }

    .btn-Excluir button{
      background-color: var(--color-bnt-danger-S360) !important;
      .icon-button{
        margin-top: -4px !important;
      }
      &:hover {
        filter: brightness(0.8);
      }
      &:active {
        filter: brightness(0.5);
      }
    }

    .btn-Incluir {
      & button{
        .icon-button{
          margin-top: -4px !important;
        }
      }
      &:hover {
        filter: brightness(0.8);
      }
      &:active {
        filter: brightness(0.5);
      }
    }
  }
}

.swal2-container {
  .swal2-popup{
    background: transparent !important;
    .swal2-content, .swal2-title{
      color: var(--color-text-S360) !important;
    }
  }
  &.swal2-shown{
    background: var(--back-modal) !important;
  }
}

@media (max-width: 955px) {
  #tableContainer{
    min-width: 1104px;
    height: 94% !important;
  }
}