.app-bg-green-700 {
    background: #125963;
}
.app-border-green-700 {
    border-color: #125963;
}
.app-bg-green-600 {
    background: #007F8F;
}
.app-bg-green-500 {
    background: #069baf;
}
.app-bg-green-100 {
    background: #0F9085;
}
.app-bg-green-50 {
    background: #96e8e1;
}

.app-text-green {
    color: #0F9085;
}
.app-text-green-700 {
    color: #00626f;
}
.app-text-gray {
    color: #5898B3;
}
.app-text-black {
    color: #04374c;
}
.app-text-blue {
    color: #004E70;
}

.app-bg-green-10 {
    background-color: #dee8e9;
}

.app-border-inputs {
   border: 2px solid #A1B4D8;
}

.app-button-login {
    background: #007F8F;
    border: 1px solid #007F8F;
}

.app-course-thumbnails-bg-transparent {
    background: rgba(1, 54, 78, 7.8);
    background: linear-gradient(30deg, rgba(1, 54, 78, 0.65) 0%, rgba(33, 167, 154, 0.65) 100%);
}

* {
    font-family: 'Poppins', sans-serif;
}

#barra-progreso {
    transition: width 0.5s ease-in-out;
}


.app-glass {
  background: rgba(1, 54, 78, 7.8);
  background: linear-gradient(30deg, rgba(2, 41, 59, 0.737) 0%, rgba(0, 171, 154, 0.748) 100%);
  border-radius: 16px;                  /* Bordes redondeados */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Sombra suave */
  backdrop-filter: blur(1px);           /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(5px);   /* Compatibilidad con Safari */
  border: 1px solid rgba(33, 167, 154, 0.65); /* Borde sutil */
}

.notification-item {
    transition: background-color 0.3s ease;
}

.wis-loader-container {
    width: 100%;
    height: 105vh;
    background-color: var(--wis-color-blueLight);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1100;
}
.custom-loader {
  width: 50px;
  height: 50px;
  display: grid;
  animation: s4 4s infinite;
}
.custom-loader::before,
.custom-loader::after {    
  content:"";
  grid-area: 1/1;
  border:8px solid;
  border-radius: 50%;
  border-color:#3F4196 #3F4196 #0000 #0000;
  mix-blend-mode: darken;
  animation: s4 1s infinite linear;
}
.custom-loader::after {
  border-color:#0000 #0000 #CCDFFF #CCDFFF;
  animation-direction: reverse;
}

@keyframes s4{ 
  100%{transform: rotate(1turn)}
}

.wis-loader-container {
    width: 100%;
    height: 105vh;
    background-color: var(--wis-color-blueLight);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1100;
}

.indexBody {
    overflow: hidden;
}


.app-accordion {
    margin: auto;
    overflow: hidden;
}

.app-accordion-header {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.app-accordion-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.app-accordion-content.show {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Personalizar scrollbar vertical */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #d8e0e8;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #125963;
  border-radius: 10px;
  border: 0px solid #d8e0e8;
}

::-webkit-scrollbar-thumb:hover {
  background: #125963;
}

/* Personalizar scrollbar horizontal */
::-webkit-scrollbar:horizontal {
  height: 12px;
}


/* Estilos para el preloader */

.custom-loader {
  width: 50px;
  height: 50px;
  display: grid;
  animation: s4 4s infinite;
}
.custom-loader::before,
.custom-loader::after {    
  content:"";
  grid-area: 1/1;
  border:8px solid;
  border-radius: 50%;
  border-color:#3F4196 #3F4196 #0000 #0000;
  mix-blend-mode: darken;
  animation: s4 1s infinite linear;
}
.custom-loader::after {
  border-color:#0000 #0000 #CCDFFF #CCDFFF;
  animation-direction: reverse;
}

@keyframes s4{ 
  100%{transform: rotate(1turn)}
}

.wis-loader-container {
    width: 100%;
    height: 105vh;
    background-color: #007f8f;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1100;
}

.indexBody {
    overflow: hidden;
}