:root{
    --color_principal: #0f47af;
    --color_principal-hover: #0a327c;
    --color_secundario: #fed44b;
    --color_titulos: #000;
    --color_fondo: #fff;
  }
  
  .container__letters h1, .container__letters h2, .container__letters h3, .container__letters h4, .container__letters h5, .container__letters h6 {
    font-family: "Montserrat", sans-serif ;
  }
  
  .container__letters p, .container__letters a, .container__letters button, .container__letters span, .container__letters div {
    font-family: "Work Sans", sans-serif ;
  }
  
  button.paginador__item--inactive {
    pointer-events:none;
    cursor: not-allowed;
    background-color: rgb(229, 229, 229) !important;
    user-select: none;
    cursor: not-allowed;
  }
  
  .container__letters .letter__active {
    background-color: var(--color_principal-hover) !important;
  }

  .container__letters .letter__active[data-target="Clear"] {
    background-color: red !important;
  }


  .spinner {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 
 .spinner::before,
 .spinner::after {
    border: 6.7px solid #b3b3b3;
    border-radius: 50%;
    position: absolute;
    content: '';
    display: block;
 }
 
 .spinner::before {
    width: 33.6px;
    height: 33.6px;
    border-bottom-color: transparent;
    border-left-color: transparent;
    animation: spinner-1o3y8q 0.75s infinite linear reverse;
 }
 
 .spinner::after {
    animation: spinner-1o3y8q 0.5s infinite linear;
    height: 56px;
    width: 56px;
    border-right-color: transparent;
    border-top-color: transparent;
 }
 
 @keyframes spinner-1o3y8q {
    to {
       transform: rotate(360deg);
    }
 }



 .custom-loader {
  width: 50px;
  height: 50px;
  display: grid;
  border-radius: 50%;
  -webkit-mask:radial-gradient(farthest-side,#0000 40%,#000 41%);
  background:
    linear-gradient(0deg ,var(--color_principal) 50%,var(--color_principal-hover) 0) center/4px 100%,
    linear-gradient(90deg,var(--color_secundario) 50%,var(--color_principal) 0) center/100% 4px;
  background-repeat: no-repeat;
  animation: s3 1s infinite steps(12);
}
.custom-loader::before,
.custom-loader::after {
   content:"";
   grid-area: 1/1;
   border-radius: 50%;
   background:inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.custom-loader::after {
   opacity: 0.83;
   transform: rotate(60deg);
}

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