:root {
  --color-fondo: #1b1b21;
  --color-topbar: #292728;
  --color-fondo-secundario: #ffffff;
  --color-fondo-principal: #222222;
  --color-acento-primario: #fe5900;
  --color-acento-secundario: #cd146d;
  --color-hover: #3a5faa;
  --color-acento-terciario: #722e93;
  --color-acento-cuaternario: #50cc88;
  --color-error: #ed1a38;
  --color-texto-primario: #ffffff;
  --color-texto-secundario: #b6b6c4;
  --color-disabled: #7f7f8a;
  --color-conectado: #33a21a;
  --color-fondo-principal-select: #292728;
}

.bg-avatar-01 {
  background-color: #4ebd94 !important;
}

.bg-avatar-02 {
  background-color: #f1be03 !important;
}

.bg-avatar-03 {
  background-color: #a53df6 !important;
}

.bg-avatar-04 {
  background-color: #000000 !important;
}

.upper-custom {
  text-transform: uppercase;
}

.burger-icon:hover span,
.burger-icon:hover span::after,
.burger-icon:hover span::before {
  background-color: var(--color-acento-primario) !important;
}

.login-link {
  color: #fe5900;
}

.login-link-hover:hover {
  color: #cd146d;
}

.login-ver {
  color: var(--color-acento-primario);
}

.table-hover .table-primary:hover {
  background-color: var(--color-acento-primario);
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: var(--color-acento-primario);
}

.svg-icon rect,
.svg-icon path:last-child {
  fill: #ffffff !important;
}

td .color-texto-primario {
  color: #000 !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--color-acento-primario) !important;
  border-color: #e4e6ef #e4e6ef #ffffff;
}

.nav-vertical:active,
.nav-vertical:focus,
.nav-vertical:hover {
  border-left: solid 4px var(--color-acento-primario) !important;
  font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  border-left: solid 4px var(--color-acento-primario) !important;
  color: var(--color-texto-primario) !important;
}

.hoverable:hover a.text-hover-primary,
.hoverable:hover .text-hover-primary {
  color: var(--color-acento-primario);
}

.hoverable:hover a.text-hover-primary i,
.hoverable:hover .text-hover-primary i {
  color: var(--color-acento-primario);
}

.hoverable:hover a.text-hover-primary .svg-icon svg g [fill],
.hoverable:hover .text-hover-primary .svg-icon svg g [fill] {
  fill: var(--color-acento-primario);
}

.hoverable:hover a.text-hover-primary i,
.hoverable:hover .text-hover-primary i {
  color: var(--color-acento-primario);
}

.hoverable:hover a.text-hover-primary .svg-icon svg g [fill],
.hoverable:hover .text-hover-primary .svg-icon svg g [fill] {
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
  fill: var(--color-acento-primario);
}

.hoverable:hover a.text-hover-primary i,
.hoverable:hover .text-hover-primary i {
  color: var(--color-acento-primario);
}

.hoverable:hover a.text-hover-primary .svg-icon svg g [fill],
.hoverable:hover .text-hover-primary .svg-icon svg g [fill] {
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
  fill: var(--color-acento-primario);
}

.nav.nav-pills .nav-link {
  color: var(--color-texto-primario);
}

.checkbox > input:checked ~ span {
  background-color: var(--color-acento-primario) !important;
}

.svg-icon.svg-logo-white svg path {
  fill: var(--color-acento-primario) !important;
}

html {
  background-color: #ffffff;
}

@media (min-width: 992px) {
  .header {
    background-color: var(--color-fondo);
  }
}

@media (max-width: 991.98px) {
  .header-mobile {
    background-color: var(--color-fondo-principal);
  }

  #soporte-content.soporte-off,
  .wrapper-off .terminos-content,
  .wrapper-off .politicas-content {
    padding: 75px 0 100px 150px !important;
  }

  .menu-item p {
    display: flex;
    color: #ffffff;
    margin-bottom: 0;
  }

  .menu-item .menu-link {
    width: 100% !important;
    display: flex;
    align-items: center;
  }

  .menu-item {
    align-items: flex-start;
  }
}

.header-mobile .btn .svg-icon svg g [fill] {
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
  fill: var(--color-acento-primario);
}

a.text-hover-primary:hover,
a.text-hover-primary:focus {
  color: var(--color-acento-primario) !important;
}

.btn.btn-hover-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-hover-primary:focus:not(.btn-text),
.btn.btn-hover-primary.focus:not(.btn-text) {
  color: #ffffff !important;
  background-color: var(--color-acento-primario) !important;
  border-color: var(--color-acento-primario) !important;
}

.btn.btn-outline-primary:not(:disabled):not(.disabled):active:not(.btn-text),
.btn.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn.btn-outline-primary.dropdown-toggle,
.show .btn.btn-outline-primary.btn-dropdown {
  color: #ffffff;
  background-color: var(--color-acento-secundario) !important;
}

.svg-icon.svg-icon-primary svg g [fill] {
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
  fill: #ffffff !important;
}

.offcanvas-content .navi .navi-item:hover {
  background-color: #f6f6f6;
}

.svg-icon.svg-icon-primary svg g path [fill]:hover {
  fill: var(--color-acento-primario) !important;
}

a .svg-icon.svg-icon-primary svg g [fill]:hover {
  fill: var(--color-acento-primario) !important;
}

.navi .navi-item .navi-link .navi-text .color-acento-primario {
  color: var(--color-acento-terciario) !important;
}

.navi .navi-item .navi-link .navi-text .font-weight-bold {
  font-weight: 600 !important;
}

.navi .navi-item .navi-link:hover .navi-text {
  color: #222222;
}

.nav .nav-link:hover:not(.disabled) {
  color: var(--color-acento-primario);
}

.nav .nav-link-mobile:hover:not(.disabled) {
  color: var(--color-fondo) !important;
  background-color: #fff !important;
}

.checkbox > input:checked ~ span {
  color: var(--color-acento-primario) !important;
}

.checkbox.checkbox-primary > input:checked ~ span {
  color: var(--color-acento-primario) !important;
}

.aside,
.brand,
.aside-menu {
  background-color: var(--color-fondo-principal);
}

.v-line {
  border-left: 3px solid var(--color-acento-primario);
  margin: 0px 4px;
  height: 18px;
}

.menu-link:hover {
  background-color: var(--color-fondo-principal-select);
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link > .menu-text {
  color: var(--color-texto-primario);
}

.menu-item img {
  width: 22px !important;
  height: auto !important;
  margin-bottom: 10px;
  transition: all ease 0.3s;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:focus {
  background-color: var(--color-acento-secundario) !important;
  border-color: var(--color-acento-secundario) !important;
}

@media (min-width: 992px) {
  .header {
    background-color: var(--color-fondo);
  }
}

@media (max-width: 991.98px) {
  .header-mobile {
    background-color: var(--color-fondo-principal);
  }
}

.nav .nav-link-mobile:hover:not(.disabled) {
  color: var(--color-fondo) !important;
}

.header-mobile .btn .svg-icon svg g [fill] {
  fill: var(--color-acento-primario);
}

a.text-hover-primary:hover,
a.text-hover-primary:focus {
  color: var(--color-acento-primario) !important;
}

.svg-icon.svg-icon-primary svg g path [fill]:hover {
  fill: var(--color-acento-primario) !important;
}

.svg-icon.svg-icon-primary svg g path [fill]:hover {
  fill: var(--color-acento-secundario) !important;
}

a .svg-icon.svg-icon-primary2 svg g path [fill] {
  fill: var(--color-acento-secundario) !important;
}

a .svg-icon.svg-icon-primary2 svg g path [fill]:hover {
  fill: var(--color-acento-secundario) !important;
}

.navi .navi-item .navi-link:hover .navi-text {
  color: var(--color-acento-secundario) !important;
}

.nav .nav-link:hover:not(.disabled) {
  color: #ffffff;
}

.checkbox > input:checked ~ span {
  color: var(--color-acento-secundario) !important;
}

.checkbox.checkbox-primary > input:checked ~ span {
  color: var(--color-acento-secundario) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--color-acento-secundario) !important;
}

.aside,
.brand,
.aside-menu {
  background-color: var(--color-fondo-principal);
}

.v-line {
  border-left: 2px solid #ffffff;
  margin: 0px 4px;
  height: 18px;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
  border: 1px solid #ffffff;
  opacity: 1;
  background-color: transparent;
}

.menu-link:hover {
  background-color: var(--color-fondo-principal-select);
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link > .menu-text {
  color: var(--color-texto-primario);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: rgba(255, 255, 255, 1) !important;
  border-color: #ffffff #ffffff #ffffff;
}

.nav-vertical:active,
.nav-vertical:focus,
.nav-vertical:hover {
  border-left: solid 4px #ffffff !important;
  font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  border-left: solid 4px #ffffff !important;
  font-weight: 600;
  background-color: none;
  color: var(--color-texto-primario) !important;
}

.nav.nav-pills .nav-link {
  color: var(--color-texto-primario);
  -webkit-transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
  position: relative;
  border-left: solid 4px transparent;
}

.checkbox > input:checked ~ span {
  background-color: #ffffff !important;
}

.svg-icon.svg-logo-white svg path {
  fill: var(--color-acento-primario) !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--color-fondo-principal);
}

.spinner-primary {
  color: var(--color-texto-primario);
}

#contenedor-select-mobile a:active,
#contenedor-select-mobile a:focus,
#contenedor-select-mobile a.active,
.nav-bonus-mobile.active {
  color: var(--color-acento-primario) !important;
}

.icono-fill {
  fill: var(--color-acento-primario);
}

.bg-fondo {
  background-color: var(--color-fondo);
}

.bg-fondo-secundario {
  background-color: var(--color-fondo-secundario);
}

.bg-fondo-principal {
  background-color: #ffffff;
}

.bg-fondo-terciario {
  background-color: var(--color-acento-primario);
}

.bg-fondo-select {
  background-color: var(--color-fondo-principal-select);
}

.bg-fondo-acento {
  background-color: var(--color-acento-primario) !important;
}

.bg-acento-secundario {
  background-color: var(--color-acento-secundario) !important;
}

.bg-acento-terciario {
  background-color: var(--color-acento-terciario) !important;
}

.bg-acento-cuaternario {
  background-color: var(--color-acento-cuaternario) !important;
}

.bg-fondo-error {
  background-color: var(--color-error);
}

.color-fondo {
  color: var(--color-fondo) !important;
}

.color-fondo-secundario {
  color: var(--color-fondo-secundario) !important;
}

.color-fondo-principal {
  color: var(--color-fondo-principal) !important;
}

.color-acento-primario {
  color: var(--color-acento-primario) !important;
}

.color-acento-secundario {
  color: var(--color-acento-secundario) !important;
}

.color-acento-terciario {
  color: var(--color-acento-terciario) !important;
}

.color-acento-cuaternario {
  color: var(--color-acento-cuaternario) !important;
}

.color-texto-primario {
  color: var(--color-texto-primario) !important;
}

.text-black {
  color: #000000;
}

.color-conectado {
  color: var(--color-conectado);
}

.color-texto-secundario {
  color: #fe5900 !important;
}

.text-grey {
  color: var(--color-disabled);
}

.text-black {
  color: #000000;
}

.color-texto-disabled {
  color: var(--color-disabled);
}

.btn-primario {
  background-color: #ffffff;
  border: solid 1px var(--color-fondo-principal);
  color: var(--color-fondo-principal);
  transition: all ease 0.3s;
}

.btn-secundario {
  background-color: var(--color-fondo-principal);
  color: #ffffff;
  border: solid 1px #ffffff;
}

.btn-terciario {
  background-color: transparent;
  border: solid 1px var(--color-fondo-secundario);
  color: var(--color-texto-primario);
  padding-right: 20px;
  padding-left: 20px;
  transition: all ease 0.3s;
}

.btn-terciario-hover:hover {
  background-color: var(--color-fondo-secundario);
  color: var(--color-fondo);
}

.btn-blue {
  background-color: var(--color-acento-secundario);
  color: var(--color-texto-primario);
  padding-right: 20px;
  padding-left: 20px;
  transition: all ease 0.3s;
}

.btn-blue-hover:hover {
  background-color: var(--color-hover);
}

.bg-hover-acento:hover {
  -webkit-transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
  background-color: var(--color-texto-primario) !important;
  color: var(--color-acento-primario) !important;
}

.btn-primario-hover:hover {
  background-color: #ffffff;
  color: var(--color-acento-primario);
}

.btn-secundario-hover:hover {
  background-color: var(--color-acento-primario) !important;
  color: #ffffff;
}

.btn-cerrar {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-texto-primario) !important;
  font-size: 25px !important;
  cursor: pointer;
  position: relative;
  top: -30px;
  right: -10px;
}

.text-hover-texto-primario:hover {
  -webkit-transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
  color: var(--color-acento-primario) !important;
}

.text-hover-acento:hover {
  -webkit-transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
  color: var(--color-texto-primario) !important;
}

.btn-quitar,
.btn-rojo {
  cursor: pointer;
  color: var(--color-acento-primario);
  font-size: 11px;
  margin-left: 8px;
  text-decoration: underline;
}

.btn-quitar:hover,
.btn-rojo:hover {
  color: var(--color-disabled);
}

.border-custom {
  border: solid 1px var(--color-acento-primario);
}

.border-right {
  border-right: solid 1px var(--color-texto-primario);
}

.border-bottom-custom {
  border-bottom: solid 1px rgba(255, 255, 255, 0.4);
}

.border-top-custom {
  border-top: solid 1px rgba(255, 255, 255, 0.4);
}

.bg-vacio {
  border: 0 !important;
}

@media (max-width: 785px) {
  .soporte-content {
    background-color: var(--color-topbar) !important;
    background-image: none !important;
  }
}

.login.login-2 .content {
  background-color: #222222;
}

.login .btn.dropdown-toggle {
  background-color: var() !important;
  border-color: #f3f6f9 !important;
  color: #3f4254;
}

.error.error-6 .text-container h1:after {
  -webkit-text-stroke-color: var(--color-acento-primario);
}

.e404 {
  background-color: #00001f;
}

@media (max-width: 992px) {
  .aside .aside-menu .menu-nav > .menu-item > .menu-link {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  #kt_aside_menu {
    height: 100%;
    margin: 0 !important;
  }

  .aside .aside-menu .menu-nav > .menu-item > .menu-link {
    opacity: 1 !important;
    max-width: 100px;
    margin: 0 auto 20px;
    border-radius: 15px;
    height: 80px;
  }

  .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link img,
  .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link p {
    opacity: 0.5 !important;
  }
}

.scrolltop {
  bottom: 90px;
  background-color: #000000 !important;
}

.accordion .card .card-header.bg-fondo-principal {
  background-color: var(--color-fondo-principal);
}

.accordion .card-title .card-label {
  color: var(--color-fondo-principal);
}

.accordion .card-title.collapsed .card-label {
  color: var(--color-fondo-principal);
}

.btn.btn-outline-primary {
  border-color: var(--color-acento-secundario) !important;
  color: var(--color-texto-primario);
}

.form-control:focus {
  color: #3f4254;
  background-color: #fff;
  border-color: var(--color-disabled);
  outline: 0;
}

.svg-icon.svg-icon-white svg g [fill] {
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
  fill: #ffffff !important;
}

.politica-p {
  color: #000000;
  font-size: 13px;
}

.politica-span {
  color: var(--color-acento-secundario);
  font-weight: 800;
}

.fa-camera {
  color: var(--color-acento-secundario) !important;
}

#btn-trivia {
  margin: 8px !important;
}

.trivia-result .content-result {
  position: relative;
}

.trivia-result .content-icon {
  position: absolute;
  left: -50px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: solid 3px var(--color-acento-terciario);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trivia-result .content-icon i {
  color: #ffffff !important;
}

.trivia-result .content-icon.check-icon {
  background-color: #00de54;
}

.trivia-result .content-icon.error-icon {
  background-color: #f60000;
}

.trivia-result span {
  color: var(--color-acento-terciario);
}

#dropdownMenuButton {
  background-color: var(--color-topbar);
}

@media (max-width: 992px) {
  .svg-icon.svg-icon-primary {
    padding-right: 0 !important;
  }

  .svg-icon.svg-icon-primary svg {
    width: 24px !important;
  }
}

.lightbox-photo-tuning {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-bottom: 25px;
  border-bottom: solid 0.5px #c8c8c8;
}

.lightbox-photo-tuning h3 {
  color: #e4002b;
  font-size: 25px;
  font-weight: 700;
}

.swal2-lightbox {
  display: flex;
  justify-content: center;
}

.recuadro-linkedin {
  border: solid 2px #e0dfdc;
  border-radius: 5px;
  width: 285px;
  display: flex;
  flex-direction: column;
  padding: 5px;
}

.recuadro-linkedin p {
  margin-bottom: 0;
}

.lightbox-photo-tuning .nombre {
  font-size: 13px;
  font-weight: 700;
  color: #404040;
  line-height: 130%;
}

.lightbox-photo-tuning .puesto {
  font-size: 10px;
  color: #b3b3b3;
  line-height: 120%;
}

.lightbox-photo-tuning .tiempo {
  font-size: 10px;
  color: #b3b3b3;
  line-height: 120%;
}

.lightbox-photo-tuning .leyenda {
  font-size: 11px;
  font-weight: 700;
  color: #404040;
  line-height: 120%;
}

.lightbox-photo-tuning .circular-square {
  border-radius: 50%;
}

.lightbox-photo-tuning .aviso {
  font-size: 14px;
  font-weight: 700;
  color: #404040;
  line-height: 130%;
}

.lightbox-photo-tuning .elemento-lightbox-1,
.lightbox-photo-tuning .elemento-lightbox-2,
.lightbox-photo-tuning .elemento-lightbox-3,
.lightbox-photo-tuning .elemento-lightbox-4 {
  font-size: 10px;
  color: #404040;
  font-weight: 700;
  position: relative;
}

.lightbox-photo-tuning .elemento-lightbox-1::before {
  content: "";
  width: 20px;
  height: 3px;
  background-color: #e4002b;
  top: 30px;
  right: 0px;
  position: absolute;
}

.lightbox-photo-tuning .elemento-lightbox-2::before {
  content: "";
  width: 20px;
  height: 3px;
  background-color: #e4002b;
  top: 80px;
  right: 0px;
  position: absolute;
}

.lightbox-photo-tuning .elemento-lightbox-3::before {
  content: "";
  width: 20px;
  height: 3px;
  background-color: #e4002b;
  top: 65px;
  right: 0px;
  position: absolute;
}

.lightbox-photo-tuning .elemento-lightbox-4::before {
  content: "";
  width: 20px;
  height: 3px;
  background-color: #e4002b;
  top: 70px;
  right: 0px;
  position: absolute;
}

.btn-primary {
  background-color: var(--color-acento-primario) !important;
  border-color: var(--color-acento-primario) !important;
}

.btn-primary:hover {
  background-color: var(--color-acento-secundario) !important;
  border-color: var(--color-acento-secundario) !important;
}

@media (max-width: 800px) {
  .space-custom {
    margin-bottom: 15px;
  }
}

.svg-icon-login svg {
  width: 20px;
  fill: #ffffff;
}

.link-ayuda {
  text-decoration: none;
  color: var(--color-acento-primario) !important;
  font-size: 14px;
}

.link-ayuda:hover {
  color: var(--color-acento-secundario) !important;
  fill: var(--color-acento-secundario) !important;
}

.link-ayuda:hover .svg-icon-login svg path {
  color: var(--color-acento-secundario) !important;
  fill: var(--color-acento-secundario) !important;
}

.link-ayuda .svg-icon-login svg path {
  transition: all ease 0.3s;
  color: var(--color-acento-primario) !important;
  fill: var(--color-acento-primario) !important;
}

.contenedor-link-ayuda {
  position: relative;
  top: 0px;
}

.border-grey {
  border-color: solid 1px #ececec !important;
}

@media (max-width: 685px) {
  .duotone-card .img-wrapper-duo > img {
    -o-object-fit: scale-down;
    object-fit: scale-down;
    height: fit-content !important;
  }
}

#kt_wrapper {
  position: relative;
}

.offcanvas-header h3 {
  font-size: 1.7rem;
  color: #222222;
}

#faq-content .misce::before {
  right: -280px;
  top: 115px;
  content: url(../img/bg/misce-verde.png);
  position: absolute;
  transform: rotate(-90deg) scale(0.7);
}

.bg-grey-custom {
  padding-bottom: 10px;
  padding-right: 20px;
}

.topbar-grey .svg-icon.svg-icon-white svg g [fill] {
  fill: #5a5a5a !important;
}

#dropdownMenuButton svg {
  width: 2rem !important;
}

.dropdown-menu.dropdown-menu-right.dropdown-menu-anim-up {
  overflow: hidden;
  border-radius: 0 !important;
  background-color: var(--color-topbar) !important;
  text-align: center !important;
}

.dropdown-menu small {
  color: #ffffff;
  text-align: center;
}

.dropdown-menu div:first-child a.btn-switch {
  border: solid 2px #6e1929 !important;
}

.dropdown-menu div:nth-child(2) a.btn-switch {
  border: solid 2px #74275c !important;
}

.dropdown-menu div:last-child a.btn-switch {
  border: solid 2px #9a6730 !important;
}

.dropdown-menu a.btn-switch {
  background-color: #373737 !important;
  opacity: 0.5;
  transition: all ease 0.3s;
}

.dropdown-menu a.btn-switch:hover,
.dropdown-menu a.btn-switch.bg-danger {
  opacity: 1 !important;
}

.btn-switch.bg-danger,
.btn-switch:hover {
  opacity: 1;
}

#juegos-content .upper-custom {
  font-size: 70px;
  font-weight: 300;
  color: var(--color-acento-primario);
}

.selectpicker::placeholder {
  color: #717171 !important;
}

.card-data {
  background-color: #ffffff !important;
  border-radius: 3rem;
  box-shadow: 0px 20px 20px 5px rgb(0 0 0 / 0.1);
}

.card-red {
  background-color: var(--color-acento-primario) !important;
  border-radius: 3rem !important;
  box-shadow: 0px 20px 20px 5px rgb(0 0 0 / 0.1);
}

.btn-dropdown .svg-icon rect,
.svg-icon path:last-child {
  fill: #0e41aa !important;
}

@media (max-width: 767px) {
  .mb-custom {
    margin-bottom: 30px;
  }
}

.footer .text-left .text-white,
.footer .text-right .color-texto-primario {
  font-size: 12px;
}

.duotone-card.rounded.card .btn-primario {
  background-color: #ffffff;
  color: var(--color-acento-primario) !important;
  transition: all ease 0.3s;
  border: solid 1px #ffffff !important;
}

.duotone-card.rounded.card .btn-primario:hover {
  background-color: #ef8f9a !important;
  color: var(--color-texto-primario);
  border: solid 1px #ffffff !important;
}

.duotone-card.rounded.card {
  border-radius: 3rem !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
}

.duotone-card.rounded.card .btn-primario {
  font-weight: 600 !important;
}

.duotone-card.rounded.card .btn-primario:hover {
  color: #000214 !important;
}

.duotone-card.rounded.card .upper-custom {
  color: #000214 !important;
  font-size: 3rem !important;
  line-height: 100% !important;
}

.duotone-card.rounded.card .card-body {
  position: relative;
  padding: 3.2rem 2.5rem;
}

.duotone-card.rounded.card .card-body .info {
  font-size: 1.2rem;
}

.duotone-card.rounded.card .card-body::before {
  position: absolute;
  transform: scale(0.3);
  top: -70px;
  right: -150px;
}

.duotone-card .img-wrapper-duo img,
.duotone-card .card-body {
  transition: all ease 0.4s;
}

.duotone-card:hover .img-wrapper-duo {
  overflow: hidden;
}

.duotone-card:hover .img-wrapper-duo img {
  transform: scale(1.03);
  filter: grayscale(1);
}

.duotone-card:hover .card-body {
  filter: drop-shadow(25px 25px 40px #ffff);
}

#trivia-content .card-white {
  position: relative;
  z-index: 2;
}

#trivia-content .card-white::before {
  transform: scale(0.6);
  top: -80px;
  left: -100px;
  position: absolute;
}

#trivia-content .card-white h2 {
  font-size: 50px;
  color: #fff;
}

#trivia-content .nav-pills {
  background-color: var(--color-acento-secundario);
  border-radius: 3rem !important;
  overflow: hidden;
  padding: 0;
  box-shadow: 0px 20px 20px 5px rgb(0 0 0 / 0.1);
}

#trivia-content .nav .nav-link {
  padding: 25px;
}

#trivia-content .btn-primario {
  color: #ffffff;
  background-color: var(--color-acento-secundario);
  border: solid 1px var(--color-acento-secundario);
  transition: all ease 0.3s;
  border-radius: 25px;
  padding: 0.65rem 2.2rem;
}

#trivia-content .btn-primario:hover {
  color: var(--color-acento-secundario);
  background-color: #ffffff;
}

#trivia-content .upper-custom {
  font-size: 2.8rem;
  font-weight: 500 !important;
}

#trivia-content .btn.btn-outline-primary {
  color: #ffffff;
  background-color: var(--color-acento-secundario);
  border: solid 1px var(--color-acento-secundario);
  border-radius: 25px;
  padding: 0.65rem 2.2rem;
}

#trivia-content .btn.btn-outline-primary:hover {
  color: var(--color-acento-secundario) !important;
  background-color: #ffffff !important;
}

#trivia-content .btn.btn-outline-primary .color-acento-secundario {
  color: #ffffff !important;
  transition: all ease 0.3s;
}

#trivia-content .btn.btn-outline-primary:hover .color-acento-secundario {
  color: var(--color-acento-secundario) !important;
}

#trivia-content .font-size-h1 {
  font-size: 1.7rem !important;
}

#trivia-content .card-white.trivia-resultados {
  background-blend-mode: luminosity;
}

#trivia-content .card-white.trivia-resultados::before {
  display: none;
}

#trivia-content .card-white.trivia-resultados .color-acento-secundario {
  color: #00972c !important;
  font-size: 2.3rem;
}

#trivia-content .nav .nav-link:hover:not(.disabled),
#trivia-content .nav .nav-link.active {
  background-color: var(--color-acento-primario);
}

#trivia-content .nav .nav-link {
  transition: all ease 0.3s;
}

#trivia-content .nav .nav-link b {
  color: var(--e-grey-medium) !important;
}

#trivia-content .nav .nav-link p {
  font-size: 2.5rem;
  margin-bottom: 5px;
}

#trivia-content .nav .nav-link.completa {
  color: #ffffff !important;
}

#trivia-content .nav .nav-link.incompleta {
  color: #ffffff !important;
}

#trivia-content .nav .nav-link.cerrada,
#trivia-content .nav .nav-link.incompleta {
  color: #ffffff !important;
  opacity: 0.5;
  pointer-events: none;
}

#trivia-content a.nav-link.cerrada svg,
#trivia-content a.nav-link.incompleta svg {
  opacity: 0;
}

#trivia-content .nav .nav-link.cerrada:hover {
  background-color: #0e41aa !important;
}

#trivia-content .nav .nav-link.abierta {
  color: #ffffff !important;
}

#trivia-content .nav .nav-link.abierta span {
  animation-name: parpadeo;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: parpadeo;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes parpadeo {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes parpadeo {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#trivia-content a.nav-link {
  border: 0 !important;
  background-color: var(--e-light-grey);
  outline: none !important;
  text-align: left !important;
  border-style: solid !important;
  line-height: 125% !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#trivia-content a.nav-link svg {
  fill: #ffffff;
}

#trivia-content .tab-content > .active {
  display: block;
  min-height: 350px !important;
  display: flex;
  align-items: center;
}

.btn-primario.btn-red-custom {
  background-color: var(--color-acento-primario) !important;
  color: #ffffff !important;
}

.modal-right .upper-custom {
  color: #009639 !important;
  font-size: 4rem !important;
}

.modal-right {
  text-align: left !important;
}

.modal-right .fecha {
  color: var(--color-disabled);
  font-size: 12px;
}

.modal-right h4 {
  font-weight: 600;
  font-size: 16px;
}

@media (max-width: 576px) {
  .modal-left img {
    max-width: 120px;
    margin-bottom: 20px;
  }

  .modal-right {
    text-align: center !important;
  }

  .modal-right,
  .modal-left {
    padding: 0 !important;
  }

  #trivia-content .card-white {
    padding: 30px 20px;
  }
}

@media (max-width: 460px) {
  .modal-right .upper-custom {
    font-size: 3.5rem !important;
  }

  .modal-right h4 {
    font-size: 15px;
  }
}

.link-yellow {
  text-decoration: underline;
  color: #ffa800 !important;
}

@media (max-width: 500px) {
  .bubble-bell {
    left: 30px !important;
  }
}

.nav-link-mobile {
  border: solid 1px var(--color-acento-primario) !important;
}

.nav-mobile {
  border-left: solid 1px var(--color-acento-primario) !important;
}

.nav-link-mobile.active {
  background-color: var(--color-acento-primario) !important;
  color: #ffffff !important;
}

/* Pure Christmas Challenge 2025 */
.login-aside.bg-fondo-acento {
  background-color: #222222 !important;
}

.fondo-login .content-right {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.fondo-login .content-right .display-3 {
  font-weight: 800 !important;
}

#show-pass .fa-eye:before {
  color: var(--color-acento-primario) !important;
}

.btn-pure {
  padding: 8px 40px !important;
  border-radius: 20px !important;
}

.menu-item p {
  margin-bottom: 0;
  text-align: center;
  font-size: 11px;
  line-height: 115%;
  color: #ffffff;
}

.text-right a.color-texto-primario {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

img {
  /* max-width: 90px; */
}

#kt_footer .text-right a {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  transition: all ease 0.3s;
}

#kt_footer .col-md-6:not(.col-md-6.text-right) a:hover {
  color: var(--color-acento-primario) !important;
}

#kt_footer .text-right a img {
  max-width: 80px;
}

#kt_footer .col-md-6 {
  display: flex;
  align-items: center;
}

#kt_footer .col-md-6.text-right {
  justify-content: flex-end;
}

.alert.alert-custom.alert-outline-warning .alert-text {
  color: var(--color-fondo-principal);
}

.alert.alert-custom.alert-outline-warning .alert-icon i,
.alert.alert-custom.alert-outline-warning {
  border-color: #ffbf00;
  color: #ffbf00;
}

.alert.alert-custom.alert-outline-danger .alert-text {
  color: #ffffff;
}

.alert.alert-custom.alert-outline-danger .alert-icon i,
.alert.alert-custom.alert-outline-danger {
  border-color: #f00;
  color: #f00;
}

.alert.alert-custom.alert-outline-success .alert-text {
  color: var(--color-fondo-principal);
}

.login .alert.alert-custom.alert-outline-success .alert-text {
  color: #ffffff;
}

.alert.alert-custom.alert-outline-success .alert-icon i,
.alert.alert-custom.alert-outline-success {
  border-color: #01a401;
  color: #01a401;
}

.symbol .symbol-label {
  background-color: var(--color-acento-primario);
}

.contenedor-advent {
  background: var(--color-acento-primario) url(../img/advent/bg-advent-v2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  padding: 60px;
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  margin-top: 40px;
}

.contenedor-advent .title {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 600;
  text-align: center;
}

.contenedor-advent .title.title-mobile {
  display: none;
}

.contenedor-advent .top .fecha {
  background-color: #ffffff;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contenedor-advent .fecha p {
  margin-bottom: 6px;
  color: var(--color-acento-terciario);
  text-align: center;
  font-weight: 500;
}

.contenedor-advent .fecha span.number {
  font-weight: 700;
  font-size: 22px;
  line-height: 100%;
  margin: 5px auto;
}

.contenedor-advent .top .calendar {
  background-color: var(--color-acento-terciario);
  padding: 15px 15px 15px 10px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor-advent .top .calendar img {
  width: 30px;
}

.contenedor-advent .bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.contenedor-advent #adventTree {
  width: 470px;
  position: relative;
  z-index: 2;
}

.contenedor-advent .content-left img.img-left {
  max-width: 240px;
}

.contenedor-advent .content-left img.img-right {
  max-width: 290px;
}

.contenedor-advent .content-left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  flex-direction: column;
}

.contenedor-advent .content-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: calc(100% - 500px);
}

.contenedor-advent .content-center .circle {
  position: absolute;
  width: 600px;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-acento-primario);
  height: 500px;
  border-radius: 50%;
  bottom: -350px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 85px;
}

.contenedor-advent .content-center .circle p {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 700px !important;
}

.contenedor-advent #adventTree .item-tree.today .recuadro {
  cursor: pointer;
  pointer-events: all;
  fill: rgba(0, 0, 0, 0.05) !important;
  stroke: #ffffff;
  stroke-width: 2px;
  animation: ledStrokeGlow 1.2s ease-in-out infinite;
  transform-origin: center center;
}

.contenedor-advent #adventTree .item-tree.past .recuadro {
  cursor: pointer;
  pointer-events: all;
  fill: rgba(0, 0, 0, 0.1) !important;
  transform-origin: center center;
}

.contenedor-advent #adventTree .item-tree .recuadro {
  fill: rgba(0, 0, 0, 0.4) !important;
  transition: filter 0.4s ease;
  pointer-events: none;
}

@keyframes ledStrokeGlow {
  0% {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3))
      drop-shadow(0 0 8px rgba(254, 89, 0, 0.5));
    stroke: #ffffff;
    stroke-width: 2px;
  }

  50% {
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 1))
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 26px rgba(254, 89, 0, 1));
    stroke: #ffe89a;
    stroke-width: 3px;
  }

  100% {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3))
      drop-shadow(0 0 8px rgba(254, 89, 0, 0.5));
    stroke: #ffffff;
    stroke-width: 2px;
  }
}

.padding-bg {
  padding: 50px 80px 80px !important;
}

.login-form {
  border: solid 1px #ffffff;
  border-radius: 20px;
  padding: 25px;
}

.login-form .form-control::placeholder {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  opacity: 1 !important;
}

.advent-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 100%;
}

.advent-day {
  flex: 0 0 calc(20% - 20px);
  background-color: #ffffff;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  width: 114px !important;
  min-width: 114px !important;
  max-width: 114px !important;
}

.advent-day .fecha small {
  color: var(--color-acento-primario);
}

.contenedor-advent .recuadro-fecha {
  background-color: var(--color-acento-terciario);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 15px 30px 15px 25px;
  position: absolute;
  left: 0;
  top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor-advent .recuadro-fecha

/* test */
.advent-wrapper .advent-day {
  margin-bottom: 25px;
}

.advent-wrapper .advent-day.today {
  animation: ledStrokeGlow 1.2s ease-in-out infinite;
}

.advent-wrapper .advent-day.past {
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 26px rgba(254, 89, 0, 1));
  stroke: #ffe89a;
}

.advent-wrapper .advent-day.today .fecha p {
  color: var(--color-acento-primario);
}

.advent-wrapper .advent-day.disabled {
  /* pointer-events: none; */
  opacity: 0.5;
}

.trivia-result {
  padding: 20px 20px 20px 30px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  max-width: 700px;
}

#juegos-content {
  background: url(../img/games/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

#juegos-content .title {
  color: #ffffff;
  font-size: 2.6rem;
  text-align: center;
  margin: 50px auto !important;
}

.duotone-card.rounded.card .card-body .btn-pure {
  background-color: var(--color-acento-primario) !important;
  color: #ffffff !important;
  font-size: 1.2rem;
  font-weight: 400 !important;
  text-transform: uppercase;
  border: solid 1px var(--color-acento-primario) !important;
}

.duotone-card.rounded.card .card-body .btn-pure:hover {
  background-color: #ffffff !important;
  color: var(--color-acento-primario) !important;
}

#juegos-content .duotone-card .img-wrapper-duo {
  height: 360px !important;
}

#juegos-content .shadow {
  transition: all ease 0.3s;
}

#kt_header #kt_quick_user_toggle span {
  color: var(--color-acento-terciario);
  font-size: 1.2rem;
}

#juegos-content .shadow:hover {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
}

#kt_content.certificate-page {
  background: var(--color-acento-terciario) url(../img/certificate/bg.png) !important;
  background-position: bottom !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.certificate-page .contenedor-certificate {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 40px;
  /* max-width: 1000px; */
}

.certificate-page .contenedor-certificate .side-left {
  display: flex;
  flex-direction: column;
}

.certificate-page .contenedor-certificate .side-left h2 {
  color: var(--color-acento-terciario);
  margin-bottom: 20px;
  font-size: 2.8rem;
}

.certificate-page .contenedor-certificate .side-left .calendar {
  display: flex;
  align-items: center;
}

.certificate-page .contenedor-certificate .side-left .calendar .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-acento-primario);
  padding: 10px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin-right: 20px;
}
.certificate-page .contenedor-certificate .side-left .calendar .circle img {
  max-width: 100%;
}

.certificate-page .contenedor-certificate .side-left .calendar p {
  margin-bottom: 0;
  max-width: 400px;
  color: var(--color-acento-terciario);
  font-size: 1.1rem;
  line-height: 125%;
}

.certificate-page .contenedor-certificate .side-right img {
  max-width: 70px;
}

#kt_content.draw-page {
  background: #000000 !important;
}

.draw-page .contenedor-draws {
  background: var(--color-acento-terciario) url(../img/draws/bg.png);
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  overflow: hidden;
  /* max-width: 1000px !important; */
  height: fit-content;
  min-height: 430px;
}

.draw-page .contenedor-draws.contenedor-draws-open {
  background: var(--color-acento-terciario)
    url(../img/draws/bg-contenedor-draw.png);
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  overflow: hidden;
  height: fit-content;
  min-height: calc(100vh - 288.76px);
}

.draw-page .contenedor-draws .side-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 280px;
  align-items: flex-start;
  height: 100%;
}

.draw-page .contenedor-draws .logo {
  width: 220px;
  margin-bottom: 40px;
}

.draw-page .contenedor-draws .side-left h2 {
  font-weight: 700 !important;
  color: #ffffff;
  font-size: 2.3rem;
  margin-bottom: 15px;
}

.draw-page .contenedor-draws .side-left p {
  margin-bottom: 0;
  color: #ffffff;
  line-height: 125%;
  font-size: 1.1rem;
}

.draw-page .contenedor-draws .side-right {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.draw-page .contenedor-draws .side-right .mockup {
  width: 500px;
  position: relative;
  z-index: 2;
}

.draw-page .contenedor-draws .side-right .content-bottom {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background-color: #ffffff;
  bottom: -380px;
  display: flex;
  padding: 50px 90px;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}

.draw-page .contenedor-draws .side-right .content-bottom img {
  width: 40px;
  margin-bottom: 10px;
}

.draw-page .contenedor-draws .side-right .content-bottom p {
  margin-bottom: 0;
  color: var(--color-acento-terciario);
  font-size: 1.2rem;
  line-height: 125%;
  text-align: center;
}

.draw-page.home-page .contenedor-draws .side-right {
  padding-bottom: 0 !important;
  max-width: calc(100% - 330px);
  position: relative;
  display: flex;
  justify-content: flex-end;
  height: 100%;
}

.draw-page.home-page .contenedor-draws .side-right .mockup {
  width: 450px;
  position: relative;
  z-index: 1;
}

.draw-page.home-page .contenedor-draws .side-right .contenedor-absoluto {
  text-align: center;
  max-width: 200px;
  font-size: 1.4rem;
  position: absolute;
  right: 0;
  color: #ffffff;
  line-height: 125%;
  z-index: 3;
  pointer-events: all;
}

.draw-page.home-page .contenedor-draws .side-right .contenedor {
  text-align: center;
  font-size: 1.4rem;
  color: #ffffff;
  line-height: 125%;
}

.draw-page.home-page .contenedor-draws .side-right .contenedor p {
  max-width: 200px;
  position: absolute;
  top: 70px;
  left: 210px;
}

.draw-page.home-page
  .contenedor-draws
  .side-right
  .contenedor-absoluto
  .btn-pure {
  color: var(--color-acento-terciario);
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 20px !important;
  border: solid 1px var(--color-acento-terciario);
}

.draw-page.home-page
  .contenedor-draws
  .side-right
  .contenedor-absoluto
  .btn-pure:hover {
  background-color: var(--color-acento-terciario);
  color: #ffffff;
}

.draw-page.home-page
  .contenedor-draws
  .side-right
  .contenedor.contenedor-open
  p {
  max-width: 240px;
  width: 240px;
  top: 70px;
  left: 180px;
}

.draw-page.home-page
  .contenedor-draws
  .side-right
  .contenedor.contenedor-open
  a {
  position: absolute;
  max-width: 240px;
  top: 140px;
  left: 215px;
  z-index: 2;
}

.draw-page .contenedor-draws.contenedor-draws-open h2 {
  color: #ffffff;
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 40px;
  text-align: center;
}

.draw-page .contenedor-draws.contenedor-draws-open .contenedor-dias {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 750px;
}

.draw-page .contenedor-draws.contenedor-draws-open .contenedor-dias .card-dia {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
}

.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .top {
  background-color: #f0eaf4;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 15px;
  margin-bottom: 15px;
  width: 100%;
}

.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .top
  .dia {
  color: var(--color-acento-terciario);
  font-weight: 800;
  font-size: 2.2rem;
  margin-bottom: 0px;
}

.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .top
  .mes {
  color: var(--color-acento-terciario);
  font-weight: 400;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .winner,
.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .nombre {
  color: var(--color-acento-terciario);
  font-size: 1rem;
  margin-bottom: 0;
}

.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .nombre {
  font-weight: 700;
}

.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .empresa {
  color: #b26ae2;
  margin-bottom: 20px;
}

.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .btn.video.btn-pure {
  background-color: var(--color-acento-primario);
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  border: solid 1px var(--color-acento-primario);
  margin-bottom: 10px;
  font-size: 0.9rem;
  transition: all ease 0.3s;
  padding: 8px 30px !important;
}

.draw-page
  .contenedor-draws.contenedor-draws-open
  .contenedor-dias
  .card-dia
  .btn.video.btn-pure:hover {
  background-color: #ffffff;
  color: var(--color-acento-primario);
}

.offcanvas-content .btn-pure {
  border: solid 1px var(--color-acento-terciario);
  background-color: #fff;
  color: var(--color-acento-terciario);
}

.offcanvas-content .btn-pure:hover {
  background-color: var(--color-acento-terciario);
  color: #ffffff;
}

.btn.btn-primario.btn-pure {
  background-color: #ffffff;
  border: solid 1px var(--color-acento-terciario) !important;
  color: var(--color-acento-terciario) !important;
}

.btn.btn-primario.btn-pure:hover {
  background-color: var(--color-acento-terciario);
  color: #ffffff !important;
}

.btn.btn-primario.btn-pure#btn-perfil {
  background-color: var(--color-acento-terciario);
  color: #ffffff !important;
  border: solid 1px var(--color-acento-terciario) !important;
}

.btn.btn-primario.btn-pure#btn-perfil:hover {
  background-color: #ffffff;
  color: var(--color-acento-terciario) !important;
}

#perfil-form .svg-icon.svg-icon-primary svg g [fill] {
  fill: var(--color-acento-terciario) !important;
}

.contenedor-soporte {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 30px;
  margin-top: 40px;
}

.contenedor-soporte.contenedor-soporte-off {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 30px;
  position: relative;
}

.soporte-off {
  position: relative;
}

.soporte-off::after,
#soporte-content::after {
  content: url(../img/advent/regalos-left.png);
  position: absolute;
  right: 20px;
  bottom: 20px;
  transform: scale(0.8);
}

.fecha-gral {
  display: flex;
  align-items: center;
  background-color: var(--color-acento-terciario);
  border-radius: 10px;
  padding: 8px 15px;
  width: fit-content;
  margin-bottom: 20px;
}

.fecha-gral img {
  width: 30px;
  margin-right: 10px;
}

.fecha-gral p {
  margin-bottom: 0;
}

.soporte-off .contenedor-soporte .cont-form-soporte {
  width: 600px;
}

.contenedor-soporte.contenedor-soporte-off img {
  margin-bottom: 30px;
}

.contenedor-soporte .cont-faq-soporte,
.contenedor-soporte .cont-form-soporte {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
}
#soporte-form label {
  color: var(--color-fondo-principal) !important;
}

#btn-soporte {
  background-color: var(--color-acento-terciario);
  color: #ffffff !important;
  border: solid 1px var(--color-acento-terciario);
}

#btn-soporte:hover {
  background-color: #ffffff;
  color: var(--color-acento-terciario) !important;
  border: solid 1px var(--color-acento-terciario);
}

.contenedor-faq {
  display: flex;
  align-items: flex-end;
}

.cont-preg-frecuentes .misce h1 {
  color: #ffffff;
  margin-bottom: 30px;
  font-size: 2.2rem;
}

.cont-faq-soporte h3 {
  color: var(--color-acento-terciario) !important;
  font-weight: 600;
  font-size: 1.8rem;
}

.cont-faq-soporte p {
  color: var(--color-fondo-principal) !important;
  font-size: 1.3rem;
  font-weight: 300 !important;
}

#soporte-content {
  position: relative;
}

#game-content .card {
  border-radius: 0 !important;
}

.interno-game-result .btn-pure {
  background-color: var(--color-acento-secundario) !important;
  color: #ffffff;
  border: solid 1px var(--color-acento-secundario);
}

.interno-game-result .btn-pure:hover {
  background-color: #ffffff !important;
  color: var(--color-acento-secundario);
  border: solid 1px var(--color-acento-secundario);
}

@media (max-width: 1430px) {
  .contenedor-advent .content-left img.img-left {
    max-width: 200px;
  }

  .contenedor-advent #adventTree {
    width: 380px;
  }
}

@media (max-width: 1350px) {
  .contenedor-advent .content-left img.img-left {
    display: none;
  }

  .contenedor-advent .content-right {
    width: 600px !important;
  }
}

@media (max-width: 1200px) {
  .contenedor-advent .content-left {
    width: 300px;
  }

  .contenedor-advent .content-right {
    max-width: calc(100% - 300px);
  }
}

@media (max-width: 991.5px) {
  .contenedor-advent .bottom {
    flex-direction: column-reverse;
  }

  .contenedor-advent .content-right {
    width: 100% !important;
    max-width: 100% !important;
    align-items: center;
  }

  .contenedor-advent .content-left img.img-left {
    display: flex;
  }

  .contenedor-advent .content-left {
    width: 280px;
    margin: 0 auto;
  }

  .container.misce .accordion {
    width: 600px !important;
  }

  .container.misce .right-side {
    display: none !important;
  }

  .contenedor-advent .title.title-mobile {
    display: flex;
    text-align: center;
    margin-bottom: 40px;
  }

  .contenedor-advent .title.title-desktop {
    display: none;
  }
}

@media (max-width: 786px) {
  .draw-page .contenedor-draws {
    align-items: center;
    flex-direction: column;
  }

  .contenedor-advent .content-left {
    width: 100%;
  }

  .contenedor-trivia h2 {
    font-size: 2rem;
  }

  .interno-game-result h3 {
    font-size: 1.5rem;
  }

  .interno-game-result p {
    font-size: 1rem !important;
  }

  .draw-page .contenedor-draws .side-left,
  .draw-page .contenedor-draws .side-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100% !important;
  }

  .draw-page .contenedor-draws .side-left h2,
  .draw-page .contenedor-draws .side-left p {
    text-align: center;
  }

  .draw-page.home-page .contenedor-draws .side-right .contenedor p {
    max-width: 300px;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 40px auto;
  }

  .certificate-page .contenedor-certificate .side-left h2 {
    font-size: 2rem;
  }

  .draw-page.home-page
    .contenedor-draws
    .side-right
    .contenedor.contenedor-open
    p,
  .draw-page.home-page
    .contenedor-draws
    .side-right
    .contenedor.contenedor-open
    a {
    top: 0 !important;
    left: 0 !important;
    position: relative !important;
  }

  .draw-page.home-page .contenedor-draws .side-right .contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .certificate-page .contenedor-certificate .side-right img {
    max-width: 50px;
  }

  .certificate-page .contenedor-certificate .side-left .calendar p {
    max-width: calc(100% - 60px);
  }

  .container.misce .accordion {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  #kt_footer .col-md-6 {
    display: flex;
    align-items: center;
    justify-content: center !important;
  }

  #kt_footer .text-right a {
    align-items: center;
  }

  .contenedor-soporte {
    flex-direction: column;
    gap: 20px;
  }

  .soporte-off::after,
  #soporte-content::after {
    display: none;
  }

  .draw-page .contenedor-draws .side-right .content-bottom {
    bottom: -340px;
  }
}

@media (max-width: 530px) {
  .draw-page .contenedor-draws.contenedor-draws-open .contenedor-dias {
    max-width: 340px;
  }

  .draw-page .contenedor-draws .logo {
    width: 170px;
  }

  .draw-page.home-page .contenedor-draws .side-right .mockup {
    width: 100%;
  }

  .draw-page
    .contenedor-draws.contenedor-draws-open
    .contenedor-dias
    .card-dia {
    width: 100%;
  }

  .certificate-page .contenedor-certificate {
    padding: 30px;
  }

  .certificate-page .contenedor-certificate .side-right img {
    max-width: 40px;
  }

  .certificate-page .contenedor-certificate .side-left h2 {
    font-size: 1.8rem;
  }

  .contenedor-advent .content-left img.img-left {
    max-width: 110px;
  }

  .contenedor-advent .top .fecha p.number {
    font-size: 17px;
  }

  .card-terminos {
    padding: 30px;
  }

  .cont-terminos-y-condiciones a img {
    max-width: 170px;
  }

  .card-terminos h2 {
    font-size: 1.3rem;
  }

  .card-terminos p {
    font-size: 1rem;
  }

  .contenedor-advent .fecha span.number {
    font-size: 17px;
  }

  .advent-day {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }

  .contenedor-advent .title.title-mobile {
    margin-bottom: 40px;
    margin-top: 40px;
  }

  .contenedor-advent .recuadro-fecha {
    background-color: var(--color-acento-terciario);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 15px 20px 15px 15px;
    position: absolute;
    left: 0;
    top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
  }

  .contenedor-advent .recuadro-fecha img {
    max-width: 100%;
  }
}

@media (max-width: 401px) {
  .login-form.login-signup .btn {
    margin-bottom: 10px;
  }

  .contenedor-trivia .btn {
    margin-bottom: 10px;
  }
}

.swal2-close:hover {
  color: var(--color-acento-secundario) !important;
}

.swal2-styled.swal2-confirm {
  border-radius: 20px;
}