.bodyp {
  margin: 0;
  font-family: "Inter", sans-serif;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.fixedCenterY {
  top: 50%;
  transform: translateY(-50%);
}

.fixedCenterX {
  left: 50%;
  transform: translateX(-50%);
}

.fixedCenterXnY {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*   OTHER CLASSES */
.desktop {
}

.top {
  height: 18%;
  width: 100%;
  background-color: #0168f5;
  overflow: hidden;
}

.center {
  height: 78%;
  width: 100%;
  position: relative;
}

.card-line {
 display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
padding-top: 0.35rem /* 8px */;
padding-bottom: 0.35rem /* 8px */;
padding-left: 14px;
padding-right: 14px;
width:100%
align-items: center;
border: 1px solid #e6e6e6 ;
border-top: 0px;
align-items: center;
}

.square {
width: 18px;
aspect-ratio: 1/1;
border-radius: 5px;
border: 1px solid #d5dbe0;
cursor: pointer;
}

.letra-container {
grid-column: span 6 / span 6;
display: flex;
justify-content: space-between;
align-items: center;
}

.letra-text {
color: #697789;
}

.text-red {
      color: #D52B5F;
      background-color: #FFE6F1;
      border: 1px solid #FFC8E1;
      padding: 1px 3px;
      border-radius: 4px;
    }
    .text-green {
      color: #046C05;
      background-color: #CEF9BD;
      border: 1px solid #a6ea82;
      padding: 1px 3px;
      border-radius: 4px;
    }

.letras_checkbox{
    width: 18px;
    aspect-ratio: 1/1;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #D5DAE1;
    appearance: none; 
      -webkit-appearance: none;
}
    
    .letras_checkbox:checked {
      background-color: #D5DAE1;
    }

.bottom {
  height: 4%;
  width: 100%;
  background-color: #0168f5;
}

.cuota_container {
  height: 520px;
  width: 360px;
  overflow-y: auto;
  margin: auto;
  color: white;
  font-weight: 600;
  display: flex;
  font-size: 12px;
}

.arrow-next {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://i.imgur.com/zokjwqf.png);
  transform: rotate(180deg);
}

.arrow-back {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://i.imgur.com/zokjwqf.png);
}

.top-extra {
  height: 100px;
  width: 100%;
  position: absolute;
  top: -4px;
  background-color: #0168f5;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  z-index: 10;
}

.bottom-extra {
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: -4px;
  background-color: #0168f5;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  z-index: 10;
}

.top-content {
  width: 90%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin: auto;
  color: white;
  font-weight: 600;
}

.header {
  font-size: 2.3vw;
  position: absolute;
}

.totals-container {
  margin-top: 6px;
  display: flex;
  gap: 30px;
}

.totals-title {
  font-size: 1.1vw;
  opacity: 85%;
  margin-bottom: 5px;
}

.totals-subtitle {
  font-size: 1.5vw;
}

.yappy-desktop {
  height: 3vw;
  aspect-ratio: 8/2;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  right: 0;
  &:hover {
    opacity: 85%;
  }
}

.yappy-btn-img {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://i.imgur.com/6hILaHB.png);
}

.background-design {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-image: url(https://i.imgur.com/5INhM0k.png);
  position: relative;
}

/*   SLIDER CLASSES */

[data-myslider-container] {
  width: 100%;
  overflow: hidden;
  position: relative;
}
[data-myslider-slider] {
  display: flex;
  position: relative;
  transition: left 0.5s;
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  left: 0;
}
[data-myslider-prev],
[data-myslider-next] {
  cursor: pointer;
}

.container_slider {
  margin: auto;
  padding-left: 8vw;
  padding-right: 8vw;
  position: relative;
  height: 100%;
  align-items: center;
  display: flex;
}

.myslider {
  background-color: white;
  width: 100%;
  z-index: 40;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 2px 5px -1px rgba(50, 50, 93, 0.25),
    0 1px 3px -1px rgba(0, 0, 0, 0.3);
}

.slide {
  /*   float: left; */
  height: 100%;
  background: rgba(127, 255, 212, 0);
  margin: 0 0px;
  margin-bottom: 0px;
  display: flex;
}

.arrows_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  width: 100%;
  position: relative;
  height: 100%;
}

.slider_arrow {
  cursor: pointer;
  width: 7vw;
  aspect-ratio: 1 / 1;
  position: absolute;
  z-index: 50;
  margin-top: 5.5dvh;
  top: 50%;
  transform: translateY(-50%);
}

.l_arrow {
  left: 0.45vw;
}

.r_arrow {
  right: 0.45vw;
}

.myslider__dots {
  display: none;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.myslider__dots__button {
  background: #d9d9d9;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 3px;
  cursor: pointer;
}

.myslider__dots__button.active {
  background: #009a92;
}

.mobile {
  display: none;
}

/*   MOBILE */
@media (max-width: 1350px) {

.myslider {
  border-radius: 0px;
}

  .totals-container {
  
  justify-content: center
}

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .container_slider {
    padding-left: 0px;
    padding-right: 0px;
  }

  .slide {
    width: 100% !important;
  }

  .top {
    height: auto;
    width: 100%;
    background-color: #0168f5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }

  .top-content {
    height: auto;
    margin: auto;
    width: fit-content;
    text-align: center;
  }

  .background-design {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .center {
    padding-top: 5px;
    height: auto;
    flex: 1 1 0%;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .bottom {
    height: 100px;
    width: 100%;
    background-color: #0168f5;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: relative;
  }

  .totals-title {
    font-size: 16px;
    margin-top: 5px;
  }

  .totals-subtitle {
    font-size: 20px;
  }

  .bottom .background-design {
    padding: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slider_arrow {
    width: 7.5dvh;
    margin-top: 0;
    top: auto;
    transform: none;
    bottom: 1dvh;
  }

  .arrow-next {
    background-image: url(https://i.imgur.com/ItIiJLC.png);
    margin-top: -1.8dvh;
  }

  .arrow-back {
    background-image: url(https://i.imgur.com/ItIiJLC.png);
    margin-top: -1.5dvh;
  }

  .cuota_container{

  height: 100%;
}
}

.header-mobile {
  font-size: 22px;
}

.yappy-mobile {
  height: 50px;
  aspect-ratio: 8/2;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 85%;
  }
}