/* Fill */
.fill-blue-100 {
  fill: var(--color-blue-100) !important;
} /* Widths / Dimensiones Botones */
.btn-width-100 {
  width: 240px !important;
}
.btn-width-150 {
  width: 350px !important;
} /*BACKGROUND,BG HOVER*/
.bg-turbo-orange-100,
.bg-turbo-orange-100:hover {
  background-color: var(--color-turbo-orange-100) !important;
}
.bg-turbo-orange-20,
.bg-turbo-orange-20:hover {
  background-color: var(--color-turbo-orange-20) !important;
}
.bg-blue-secondary-100,
.bg-hover-blue-secondary-100:hover {
  background-color: var(--color-blue-secondary-100) !important;
}
.bg-hover-blue-5:hover,
.bg-blue-5 {
  background-color: var(--color-blue-5) !important;
}
.bg-blue-10,
.bg-hover-blue-10:hover {
  background-color: var(--color-blue-10) !important;
}
.bg-blue-20,
.bg-hover-blue-20:hover {
  background-color: var(--color-blue-20) !important;
}
.bg-blue-40,
.bg-hover-blue-40:hover {
  background-color: var(--color-blue-40) !important;
}
.bg-blue-60,
.bg-hover-blue-60:hover {
  background-color: var(--color-blue-60) !important;
}
.bg-blue-80,
.bg-hover-blue-80:hover {
  background-color: var(--color-blue-80) !important;
}
.bg-blue-100,
.bg-hover-blue-100:hover {
  background-color: var(--color-blue-100) !important;
}
.bg-blue-150,
.bg-hover-blue-150:hover {
  background-color: var(--color-blue-150) !important;
}
.bg-blue-180,
.bg-hover-blue-180:hover {
  background-color: var(--color-blue-180) !important;
}
.bg-alert-10,
.bg-hover-alert-10:hover {
  background-color: var(--color-alert-10) !important;
}
.bg-red-10,
.bg-hover-red-10:hover {
  background-color: var(--color-red-10) !important;
}
.bg-yellow,
.bg-hover-yellow:hover {
  background-color: var(--color-yellow) !important;
}
.bg-yellow-10,
.bg-hover-yellow-10:hover {
  background-color: var(--color-yellow-10) !important;
}
.bg-white,
.bg-hover-white:hover {
  background-color: var(--color-white) !important;
}
.bg-green,
.bg-hover-green:hover {
  background-color: var(--color-green) !important;
}
.bg-green-10,
.bg-hover-green-10:hover {
  background-color: var(--color-green-10) !important;
}
.bg-green-20,
.bg-hover-green-20:hover {
  background-color: var(--color-green-20) !important;
}
.bg-hover-black-2:hover,
.bg-black-2 {
  background-color: var(--color-black-2) !important;
}
.bg-black-5,
.bg-hover-black-5:hover {
  background-color: var(--color-black-5) !important;
}
.bg-black-10,
.bg-hover-black-10:hover {
  background-color: var(--color-black-10) !important;
}
.bg-black-50,
.bg-hover-black-50:hover {
  background-color: var(--color-black-50) !important;
}
.bg-black-100,
.bg-hover-black-100:hover {
  background-color: var(--color-black-100) !important;
}
.bg-alert-10,
.bg-hover-alert-10:hover {
  background-color: var(--color-alert-10) !important;
} /*Bg Brand Turbo*/
.bg-turbo-green-60 {
  background-color: var(--color-turbo-green-60) !important;
}
.bg-turbo-green-100 {
  background-color: var(--color-turbo-green-100) !important;
}
.bg-turbo-green-150 {
  background-color: var(--color-turbo-green-150) !important;
}
.bg-turbo-green-180 {
  background-color: var(--color-turbo-green-180) !important;
}
.bg-turbo-green-gradient-100 {
  background: -webkit-linear-gradient(90deg, var(--color-turbo-blue), var(--color-turbo-green-100));
  background: linear-gradient(90deg, var(--color-turbo-blue), var(--color-turbo-green-100));
}
.bg-turbo-green-gradient-150 {
  background: -webkit-linear-gradient(90deg, var(--color-turbo-green-100), var(--color-turbo-green-150));
  background: linear-gradient(90deg, var(--color-turbo-green-100), var(--color-turbo-green-150));
} /*TEXTS*/
.text-turbo-orange-100 {
  color: var(--color-turbo-orange-100) !important;
} /* Color Alert */
.text-alert-100,
.text-hover-red-alert:hover {
  color: var(--color-alert) !important;
} /* Color Red */
.text-red-100,
.text-hover-red-100:hover {
  color: var(--color-red) !important;
} /*Colors Blues and Hover*/
.text-turbo-100 {
  color: var(--color-turbo-green-100) !important;
}
.text-blue-secondary-100,
.text-hover-blue-secondary-100:hover {
  color: var(--color-blue-secondary-100) !important;
}
.text-blue-5,
.text-hover-blue-5:hover {
  color: var(--color-blue-5) !important;
}
.text-blue-10,
.text-hover-blue-10:hover {
  color: var(--color-blue-10) !important;
}
.text-blue-20,
.text-hover-blue-20:hover {
  color: var(--color-blue-20) !important;
}
.text-blue-40,
.text-hover-blue-40:hover {
  color: var(--color-blue-40) !important;
}
.text-blue-60,
.text-hover-blue-60:hover {
  color: var(--color-blue-60) !important;
}
.text-blue-100,
.text-hover-blue-100:hover {
  color: var(--color-blue-100) !important;
}
.text-blue-150,
.text-hover-blue-150:hover {
  color: var(--color-blue-150) !important;
}
.text-blue-180,
.text-hover-blue-180:hover {
  color: var(--color-blue-180) !important;
} /*Colors Black*/
.text-black-10,
.text-hover-black-10:hover {
  color: var(--color-black-10) !important;
}
.text-black-50,
.text-hover-black-50:hover {
  color: var(--color-black-50) !important;
}
.text-black-100,
.text-hover-black-100:hover {
  color: var(--color-black-100) !important;
} /*Color White*/
.text-white,
.text-hover-white:hover {
  color: var(--color-white) !important;
} /*Color Green*/
.text-green,
.text-hover-green:hover {
  color: var(--color-green) !important;
}
.text-green-10,
.text-hover-green-10:hover {
  color: var(--color-green-10) !important;
}
.text-yellow,
.text-hover-yellow:hover {
  color: var(--color-yellow) !important;
}
.text-yellow-10,
.text-hover-yellow-10:hover {
  color: var(--color-yellow-10) !important;
} /*Titles size*/
.title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.title-6 {
  font-weight: 700;
}
.title-1 {
  font-size: 52px !important;
}
.title-2 {
  font-size: 40px !important;
}
.title-3 {
  font-size: 36px !important;
}
.title-4 {
  font-size: 32px !important;
}
.title-5 {
  font-size: 24px !important;
}
.title-6 {
  font-size: 20px !important;
} /*Body sizes*/
.text-size-xl {
  font-size: 30px !important;
}
.text-size-lg {
  font-size: 24px !important;
}
.text-size-md {
  font-size: 18px !important;
}
.text-size-nl {
  font-size: 16px !important;
}
.text-size-sm {
  font-size: 12px !important;
}
.text-size-ty {
  font-size: 9px !important;
} /* Bordes */
.border-turbo-orange-100 {
  border-color: var(--color-turbo-orange-100) !important;
}
.border-blue-10 {
  border-color: var(--color-blue-10) !important;
}
.border-blue-20 {
  border-color: var(--color-blue-20) !important;
}
.border-blue-40 {
  border-color: var(--color-blue-40) !important;
}
.border-blue-60 {
  border-color: var(--color-blue-60) !important;
}
.border-blue-100 {
  border-color: var(--color-blue-100) !important;
}
.border-blue-150 {
  border-color: var(--color-blue-150) !important;
}
.border-blue-180 {
  border-color: var(--color-blue-180) !important;
}
.border-gray-10 {
  border-color: var(--color-black-10) !important;
}
.border-gray-20 {
  border-color: var(--color-black-20) !important;
}
.border-gray-50 {
  border-color: var(--color-black-50) !important;
}
.border-gray-100 {
  border-color: var(--color-black-100) !important;
}
.border-green-10 {
  border-color: var(--color-green-10) !important;
}
.border-green-20 {
  border-color: var(--color-green-20) !important;
}
.border-green-100 {
  border-color: var(--color-green) !important;
}
@media (max-width: 768px) {
  /* .h-100-mobile{height:100% !important;} */ /* Width / Dimesiones Botones */
  .btn-width-100,
  .btn-width-150 {
    width: 100% !important;
  } /*Titles size*/
  .title-1 {
    font-size: 40px !important;
  }
  .title-2 {
    font-size: 36px !important;
  }
  .title-3 {
    font-size: 32px !important;
  }
  .title-4 {
    font-size: 24px !important;
  }
  .title-5 {
    font-size: 20px !important;
  }
  .title-6 {
    font-size: 16px !important;
  } /*Body sizes*/
  .text-size-xl {
    font-size: 24px !important;
  }
  .text-size-lg {
    font-size: 20px !important;
  }
} /*Styles*/
.font-bold {
  font-weight: bold !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.font-regular {
  font-weight: normal !important;
}
.font-light {
  font-weight: 300 !important;
}
.font-underlined {
  text-decoration: underline !important;
}
.text-shadow-blue {
  text-shadow: 1px 1px 4px var(--color-blue-150) !important;
} /*CONTAINERS*/
.white-container-shadow,
.white-container,
.blue-container-10,
.blue-container-20 {
  border-radius: 5px;
  border: solid 1px;
} /*White containers*/
.white-container {
  border-color: var(--color-black-10);
  background-color: var(--color-white);
}
.white-container-shadow {
  border-color: var(--color-white);
  background-color: var(--color-white);
  box-shadow: 0 2px 5px 0 var(--color-black-10);
} /*Blue containers*/
.blue-container-10 {
  border-color: var(--color-blue-20);
  background-color: var(--color-blue-10);
}
.blue-container-20 {
  border-color: var(--color-blue-60);
  background-color: var(--color-blue-20);
} /*ELEMENTS*/ /*Buttons*/
.btn {
  transition: filter 0.3s ease !important;
}
.btn-lg {
  font-weight: 600 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.btn:hover {
  filter: brightness(0.9);
}
.btn.button:disabled,
.btn[disabled],
.btn-disabled {
  background-color: var(--color-black-50) !important;
  border-color: var(--color-black-50) !important;
  color: var(--color-white) !important;
  cursor: not-allowed !important;
}
.btn > i {
  margin: 5pt !important;
}
.btn-primary-green,
.btn-primary-blue,
.btn-primary-red {
  color: var(--color-white) !important;
}
.btn-primary-green {
  background-color: var(--color-green) !important;
}
.btn-primary-blue {
  background-color: var(--color-blue-100) !important;
}
.btn-primary-red {
  background-color: var(--color-red) !important;
}
.btn-outline-primary-green,
.btn-outline-primary-blue,
.btn-outline-primary-red {
  background-color: var(--color-blue-10) !important;
}
.btn-outline-primary-green {
  background-color: var(--color-white) !important;
  color: var(--color-green) !important;
  border-color: var(--color-green) !important;
}
.btn-outline-primary-blue {
  background-color: var(--color-white) !important;
  color: var(--color-blue-100) !important;
  border-color: var(--color-blue-100) !important;
}
.btn-outline-primary-red {
  background-color: var(--color-white) !important;
  color: var(--color-red) !important;
  border-color: var(--color-red) !important;
} /*Buttons Brand Turbo*/
.btn-turbo-primary-green,
.btn-turbo-primary-green-180 {
  color: var(--color-white) !important;
}
.btn-turbo-primary-green {
  background-color: var(--color-turbo-green-100) !important;
}
.btn-turbo-outline-primary-green {
  background-color: var(--color-white) !important;
  color: var(--color-turbo-green-100) !important;
  border-color: var(--color-turbo-green-100) !important;
}
.btn-turbo-primary-green-180 {
  background-color: var(--color-turbo-green-180) !important;
}
.btn-turbo-outline-primary-green-180 {
  background-color: var(--color-white) !important;
  color: var(--color-turbo-green-180) !important;
  border-color: var(--color-turbo-green-180) !important;
} /*Separator*/
hr {
  border: 1px solid var(--color-blue-40) !important;
} /* Otros */
.width-fc {
  width: fit-content;
} /* Animation clases */
.animation-brillo-green {
  /* background-size:200% 100%;*/ /* animation:brillo 4s linear infinite;*/
  font-weight: bold !important;
  color: white; /* background-image:radial-gradient(circle at 50.37% 50%,#ffffff 0%,#5ac62d 20%,#6ad13d 100%) !important;*/
  background: var(--color-green) !important;
} /* keyframes animations */
@keyframes brillo {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes fadeInDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} /* Animations Simulador */
.animation-btn-abre-cdt {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  transition-property: color;
  transition-duration: 0.3s;
  -webkit-transform: perspective(1px) translateZ(0);
  -webkit-transition-property: color;
  -webkit-transition-duration: 0.3s;
}
.animation-btn-abre-cdt:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: -100px;
  background: var(--color-blue-100);
  border-radius: 100%;
  transform: scale(0);
  transition-property: transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
  -webkit-transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  -webkit-transform: scale(0);
}
.animation-btn-abre-cdt:hover {
  color: white !important;
}
.animation-btn-abre-cdt:hover:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}
.animation-btn-abre-cdt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.animation-btn-abre-cdt .btn-icon i {
  width: 23px;
  height: 23px;
} /* .animation-btn-abre-cdt .btn-text {display:inline-block;transition:transform 0.5s cubic-bezier(.68,-0.55,.27,1.55);}.animation-btn-abre-cdt:hover .btn-text {animation:left-smooth 0.3s cubic-bezier(.4,0,.2,1) forwards;} */ /* .animation-btn-abre-cdt:not(:hover) .btn-text {animation:center-smooth 0.3s cubic-bezier(.4,0,.2,1) forwards;} */
@keyframes left-smooth {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-15px);
  }
}
@keyframes center-smooth {
  from {
    transform: translateX(-15px);
  }
  to {
    transform: translateX(0);
  }
}
.animation-btn-abre-cdt .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 18px;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.2s,
    transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  pointer-events: none;
}
.animation-btn-abre-cdt:hover .btn-icon {
  opacity: 1;
  animation: icon-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.animation-btn-abre-cdt:not(:hover) .btn-icon {
  animation: icon-down 0.18s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
@keyframes icon-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes icon-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(40px);
  }
} /* Fin animation simulador */