@charset "UTF-8";
:root {
  --nav-width: 43px;
  --first-color: #0038FF;
  --first-color-light: #AFA5D9;
  --white-color: #F7F6FB;
  --body-font: 'PrologueMedium';
  --normal-font-size: 1rem;
  --z-fixed: 100;
}

.zGemelos {
  --first-color: #ffae00;
}

@font-face {
  font-family: "PrologueMedium";
  src: url("/fonts/PrologueMedium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "PrologueRegular";
  src: url("/fonts/PrologueRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "PrologueSemiBold";
  src: url("/fonts/PrologueSemiBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
*, html {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #707070;
  font: 0.8em Arial, Sans-serif;
  background: #fbfbfb;
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

footer {
  margin-top: 2em;
}

h1, h2, h3, h4 {
  color: #000;
  font-family: "PrologueRegular", Arial, Sans-serif;
  font-size: 1.5em;
}

h2 {
  margin: 0 0 1em 0;
}

h3 {
  font-size: 1.3em;
  margin: 0 0 1em 0;
}

h4 {
  font-size: 1.1em;
  margin: 0 0 1em 0;
  font-weight: 600;
}

p {
  margin-bottom: 0.5em;
}

a {
  color: #0038FF;
  text-decoration: none;
}

a:hover, a:active {
  color: #000;
}

a.linkFalso:link, a.linkFalso:visited, .linkFalso {
  color: #0038FF;
}

a.linkFalso:hover, a.linkFalso:active, .linkFalso:hover, .linkFalso:active {
  color: #000;
  cursor: pointer;
}

.noWrap {
  text-wrap: nowrap;
}

.h3Icon {
  display: flex;
  align-items: center;
}

.listNone {
  margin: 0;
  padding: 0;
  list-style: none;
}
.listNone li {
  padding: 0.3em 0;
}

.fontX1_5 {
  font-size: 1.5em;
}

.fontX2 {
  font-size: 2em;
}

.txtCenter {
  text-align: center;
}

.break, .breakXl {
  width: 100%;
  height: 1em;
  display: flex;
}

.breakXl {
  height: 2em;
}

.breakLine, .breakLineSm, .breakLineXl {
  width: 100%;
  height: 1px;
  display: flex;
  margin: 1em 0;
  border-top: solid 1px #e2e2e2;
}

.breakDotted, .breakDottedSm, .breakDottedXl {
  width: 100%;
  height: 1px;
  display: flex;
  margin: 1em 0;
  border-top: dashed 1px #e2e2e2;
}

.breakLineSm, .breakDottedSm {
  margin: 0em 0;
}

.breakLineXl, .breakDottedXl {
  margin: 2em 0;
}

.breakMin {
  margin: 0.2rem 0;
  border: none;
  background: none;
}

.bgPatron1 {
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
}

.bgPatron2 {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  opacity: 1;
}

.bgPatron2 {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0) 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  opacity: 1;
}

.bgDanger {
  background: repeating-linear-gradient(135deg, rgba(228, 90, 92, 0.1) 0, rgba(144, 65, 67, 0) 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  opacity: 1;
}

.footerFx {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(#0038ff 0%, #001c80 100%);
  z-index: 10;
}

.noHoverBg:hover {
  background: none;
}

.marcaDestacada {
  padding: 0.5em;
  background: rgb(232, 232, 232);
  border: solid 1px rgb(225, 225, 225);
}

.alertaIcon {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: auto 1fr;
  display: block;
  padding: 1em;
  line-height: 1.3em;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
  border-radius: 0.5em;
}
.alertaIcon p:last-child {
  margin-bottom: 0;
}

.alertaDefecto {
  display: block;
  padding: 1em;
  line-height: 1.3em;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
  border-radius: 0.5em;
}
.alertaDefecto p:last-child {
  margin-bottom: 0;
}
.alertaDefecto {
  margin-trim: inline-end;
  color: #707070;
  background: #F2F2F2;
}

.alertaOk {
  display: block;
  padding: 1em;
  line-height: 1.3em;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
  border-radius: 0.5em;
}
.alertaOk p:last-child {
  margin-bottom: 0;
}
.alertaOk {
  color: #64A762;
  background: #E5F9E7;
}

.alertaKo {
  display: block;
  padding: 1em;
  line-height: 1.3em;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
  border-radius: 0.5em;
}
.alertaKo p:last-child {
  margin-bottom: 0;
}
.alertaKo {
  color: #8A4040;
  background: #F2AAAA;
}

.alertaPasivo {
  display: block;
  padding: 1em;
  line-height: 1.3em;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
  border-radius: 0.5em;
}
.alertaPasivo p:last-child {
  margin-bottom: 0;
}
.alertaPasivo {
  color: #B5913A;
  background: #FFF6BB;
}

.alertaNeutro {
  display: block;
  padding: 1em;
  line-height: 1.3em;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
  border-radius: 0.5em;
}
.alertaNeutro p:last-child {
  margin-bottom: 0;
}
.alertaNeutro {
  background: #E5F4F9;
}

.iconXtra, .iconXtraSm {
  display: inline-block;
  margin-right: 0.5em;
  padding: 0.7em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
}

.iconXtraSm {
  padding: 0.5em;
  border-radius: 0.3em;
}

.bumpInfo {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  padding: 0.5em;
  color: #B5913A;
  border-radius: 100%;
  background-color: #FFF6BB;
}

.img100, .img100 img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.imgFx {
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.icon-menu {
  color: #0038FF !important;
  display: none;
}

.bx-menu {
  display: block;
  color: #fff;
}

.btnMin {
  padding: 0.5em;
  font-size: 0.8em;
  border: none;
}

.btn-primary, .btn-primary:visited {
  color: #fff;
  border-color: #0038FF;
  background: #0038FF;
}
.btn-primary:hover, .btn-primary:visited:hover {
  border-color: #000;
  background: #000;
}

.btn-outline-primary {
  color: #0038FF;
  border-color: #0038FF;
}
.btn-outline-primary:hover {
  color: #fff;
  border-color: #000;
  background: #000;
}

.btnDesactivado {
  color: #a3a3a3;
  background: #ebebeb;
}

.btn_crearlink {
  background-color: #46A849;
  border-color: #46A849;
}

.btn_creator {
  border: 1px solid #0038FF;
  background-color: #fff;
  border-radius: 5px;
  color: #0038FF;
}
.btn_creator:hover {
  background-color: #46A849;
}
.btn_creator:hover i {
  color: #fff !important;
}

.btnTxtNone span {
  display: none;
}

.btnNeutro, button.btnNeutro {
  color: #fff;
  border-color: #1C98F0;
  background: #1C98F0;
}
.btnNeutro:visited, .btnNeutro:link, button.btnNeutro:visited, button.btnNeutro:link {
  color: #fff;
  border-color: #1C98F0;
  background: #1C98F0;
}
.btnNeutro:active, .btnNeutro:hover, button.btnNeutro:active, button.btnNeutro:hover {
  color: #fff;
  border-color: #000;
  background: #000;
}

.boxContainer {
  display: grid;
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
}

.boxEnd {
  display: flex;
  flex-flow: column;
  gap: 1em;
  margin-top: 1em;
  padding-top: 1em;
  border-top: solid 1px #e2e2e2;
}

.boxEndDotted {
  display: block;
  margin-top: 1em;
  padding-top: 1em;
  border-top: dashed 1px #e2e2e2;
}

.boxPrevioImg {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 0;
  grid-gap: 1em;
}
.boxPrevioImg .txt h1 i {
  margin-right: 0.5em;
}
.boxPrevioImg .txt p:last-child {
  margin: 0;
}
.boxPrevioImg .img img {
  width: 100%;
}

.boxPrevioBtnX1 {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: grid;
  grid-template-rows: auto auto;
  grid-gap: 1em;
}
.boxPrevioBtnX1 .txt h1 i {
  margin-right: 0.5em;
}
.boxPrevioBtnX1 .txt p:last-child {
  margin: 0;
}
.boxPrevioBtnX1 .btns {
  align-items: flex-end;
}

.boxPrevioBtns {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: grid;
  grid-template-rows: auto auto;
  grid-gap: 1em;
}
.boxPrevioBtns .txt h1 i {
  margin-right: 0.5em;
}
.boxPrevioBtns .txt p:last-child {
  margin: 0;
}
.boxPrevioBtns .btns {
  display: grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  align-items: flex-start;
}

.boxPrevioimporte {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: grid;
  grid-template-rows: auto auto;
  grid-gap: 1em;
}
.boxPrevioimporte .txt p:last-child {
  margin: 0;
}
.boxPrevioAviso {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: grid;
  grid-template-rows: auto auto;
  grid-gap: 1em;
}
.boxPrevioAviso .txt p:last-child {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .btnTxtNone span {
    display: inline-block;
  }
  .boxPrevioAviso {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
  }
}
@media screen and (min-width: 1000px) {
  body {
    font-size: 0.8em;
  }
  .footerFx {
    display: none;
  }
  .containerIn {
    padding: 0 0;
  }
  .containerX2 {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em;
  }
  .boxPrevioImg {
    margin: 0 0 1em 0;
    padding: 1em;
    border: solid 1px #e2e2e2;
    border-radius: 0.5em;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr 70px;
    grid-gap: 1em;
  }
  .boxPrevioImg .txt p:last-child {
    margin: 0;
  }
  .boxPrevioImg .img img {
    width: 100%;
  }
  .boxEnd {
    flex-flow: wrap;
  }
  .boxPrevioBtnX1 {
    grid-template-columns: 2fr 1fr;
  }
  .boxPrevioBtnX1 .btns {
    text-align: end;
  }
  .boxPrevioBtns {
    grid-template-columns: 2fr 1fr;
  }
  .boxPrevioimporte {
    grid-template-columns: 2fr 1fr;
  }
}
@media screen and (max-width: 1000px) {
  .icon-menu {
    display: block;
  }
  .bx-menu {
    display: none;
  }
}
.boxPrevioImgMIn {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 70px;
  grid-gap: 1em;
}

.infoDatos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5em;
  margin: 1em 0;
}
.infoDatos .item {
  display: grid;
  grid-gap: 1em;
  padding: 0.5em;
  text-align: center;
  border: 1px solid #BFD6EB;
  border-radius: 0.5em;
  background: #E2F0FC;
}
.infoDatos .item i {
  color: #0038FF;
  font-size: 2.5em;
}
.infoDatos .item .txt {
  display: grid;
  grid-gap: 0.5em;
}
.infoDatos .item .dato {
  font-size: 1.5em;
}

/* Main */
.main {
  padding: 1em;
  padding-left: calc(var(--nav-width) + 1rem);
}

.body-pd .main {
  padding: 1em;
  padding-left: 15px;
}

/*box info alert*/
.box-info {
  background-color: #E5F9E7;
  text-align: center;
  color: #64A762;
  font-size: 11px;
  text-transform: uppercase;
}
.box-info strong {
  font-size: 14px;
  margin-left: 1rem;
}

/*caja grey*/
.caja {
  border: 1px solid #ececec;
  border-radius: 5px;
}

/*box*/
.box {
  display: inline-block;
  border: 1px solid #0038FF;
  border-radius: 5px;
  padding: 1.5em;
  text-align: center;
  font-size: 10px;
  margin-right: 6px;
  color: #0038FF;
  width: 30%;
  cursor: pointer;
}
.box:hover, .box:active, .box:link {
  color: #fff !important;
  background-color: #0038FF !important;
}
.box p {
  margin: 0px;
}
.box .number {
  font-size: 14px;
}

/*tabla gráficos*/
.tabla_graficos {
  font-size: 11px;
  color: #000;
  padding: 0.5em;
  background: #fff;
}
.tabla_graficos h2 {
  font-size: 14px;
  padding: 0.5em;
  margin: 0px;
}
.tabla_graficos .tabla_contenido {
  border-top: 1px solid #ececec;
  padding: 0.5em;
  margin: 0px;
  padding: 15px 0px;
}
.tabla_graficos .tabla_contenido h3 {
  font-weight: normal;
  font-size: 14px;
  margin: 8px 0px;
}

.dotted {
  border-bottom: 1px dashed #ececec;
  margin: 15px 0px 0px 0px;
  height: 1px;
  display: block;
}

.box_busqueda {
  position: relative;
}
.box_busqueda input {
  margin-bottom: 8px;
}
.box_busqueda .icon-calendario {
  display: block;
  width: 20px;
  height: 20px;
  color: #0038FF;
  position: absolute;
  right: 6px;
  top: 38px;
}
.box_busqueda .icon-calendario2 {
  top: 84px;
}

.btn_azul {
  font-size: 12px;
  background-color: #0038FF;
  border-color: #0038FF;
  width: 100%;
  margin-bottom: 12px;
}
.btn_azul:hover, .btn_azul:visited {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.separador {
  border-right: 1px solid #ececec;
}

.box_infodates {
  padding: 1em;
  display: inline-block;
}
.box_infodates .alert {
  width: 32.6%;
  display: inline-block;
  float: left;
  margin: 0px;
  border: 1px solid #BFD6EB;
  background-color: #E2F0FC;
  font-size: 11px;
  color: #707070;
}
.box_infodates .alert i {
  margin-right: 12px;
  font-size: 32px;
  color: #0038FF;
  display: inline-block;
  float: left;
}
.box_infodates .alert span {
  display: inline-block;
  float: left;
}
.box_infodates .alert span a {
  margin-top: 4px;
  display: block;
}
.box_infodates .alert p {
  display: inline-block;
  float: right;
  font-weight: bold;
  font-size: 13px;
}
.box_infodates .sepmd {
  margin: 0px 8px;
  width: 33%;
}

/*Notificaciones*/
.box_notificaciones {
  padding: 0px 1em 0em 1em;
  display: inline-block;
  width: 100%;
}
.box_notificaciones .alert-info {
  background: #fff !important;
  padding: 1em;
}
.box_notificaciones .alert-info span {
  display: inline-block;
  float: left;
}
.box_notificaciones .alert-info span p {
  margin-top: 6px;
  color: #707070;
  margin-bottom: 0.5em;
}
.box_notificaciones .alert-info img {
  display: inline-block;
  float: right;
}

.notificaciones section {
  border: 1px solid #ececec;
  margin-bottom: 8px;
  display: grid;
  border-left: 3px solid #ececec;
  border-radius: 0px 5px 5px 0px;
}
.notificaciones section:hover, .notificaciones section:active {
  border-radius: 0px 5px 5px 0px;
  border-left: 3px solid #0038FF;
}
.notificaciones .accordion-item {
  background-color: #fff;
  border: 0px solid rgba(0, 0, 0, 0.125);
}
.notificaciones .accordion-item .card-body {
  position: relative;
}
.notificaciones .accordion-item .card-body p {
  display: block;
  float: left;
  color: #707070;
}
.notificaciones .accordion-item .card-body i {
  display: block;
  float: right;
  font-size: 22px;
  color: #ccc;
  margin-right: -5px;
  text-align: right;
}
.notificaciones h2 {
  margin: 0px;
}
.notificaciones h2 .accordion-button {
  width: 100%;
  color: #0038FF;
  font-size: 12px;
  width: 100%;
  float: left;
  padding-bottom: 0px;
  padding-left: 15px;
  background: #fff;
  display: grid;
  box-shadow: inset 0 -1px 0 rgba(35, 35, 35, 0);
}
.notificaciones h2 .accordion-button span.date {
  color: #c6c6c6;
  font-size: 9px;
  width: 100%;
}
.notificaciones h2 .accordion-button p {
  width: 100%;
  margin-bottom: 6px;
  display: block;
  float: left;
  color: #707070;
}
.notificaciones h2 .noselected::after {
  color: #707070 !important;
  border: 1px solid #707070;
}
.notificaciones .show {
  width: 100%;
}
.notificaciones .accordion-collapse {
  font-size: 10px;
  color: #707070;
  line-height: 14px;
  position: relative;
}
.notificaciones .icon-menu-mas {
  cursor: pointer;
  color: #0038FF;
  font-size: 16px;
  width: auto;
  padding-right: 16px;
}

.icon-email {
  color: #37BE4E !important;
}

/*toogle home*/
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  transform: scale(0.7) !important;
  position: absolute;
  right: 8px;
  color: #0038FF !important;
  border: 1px solid #0038FF;
  border-radius: 6px;
  padding: 6px;
  background-repeat: no-repeat;
  background-size: 0.9rem;
  transition: transform 0.2s ease-in-out;
  background-position: center;
  width: 28px;
  height: 28px;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  color: #0038FF !important;
}

@media screen and (min-width: 1000px) {
  .infoDatos {
    grid-gap: 1em;
  }
  .infoDatos .item {
    padding: 1em;
    grid-template-columns: auto 1fr auto;
    text-align: left;
  }
}
@media screen and (max-width: 1000px) {
  .box_infodates .alert {
    width: 32.5% !important;
    display: inline-block;
    float: left;
  }
  .sepmd {
    margin: 0px 3px !important;
    width: 33%;
  }
  .box_infodates .alert i {
    text-align: center;
    width: 100%;
    margin-right: 0px;
  }
  .box_infodates .alert span {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box_infodates .alert p {
    float: none;
    text-align: center;
    width: 100%;
  }
  .box_infodates .alert a {
    position: absolute;
    bottom: 8px;
    left: 25%;
  }
  .notificaciones section {
    border: 1px solid #ececec;
    margin-bottom: 8px;
    display: grid;
    border-radius: 5px;
  }
  .notificaciones .accordion-item {
    background-color: #fff;
    border: 0px solid rgba(0, 0, 0, 0.125);
  }
  .notificaciones .accordion-item .card-body {
    position: relative;
  }
  .notificaciones .accordion-item .card-body p {
    display: block;
    float: left;
    color: #707070;
    width: 90%;
  }
  .notificaciones .accordion-item .card-body i {
    display: block;
    float: right;
    font-size: 24px;
    color: #ccc;
    margin-right: -5px;
  }
  .notificaciones h2 {
    margin: 0px;
  }
  .notificaciones h2 .accordion-button {
    width: 100%;
    color: #0038FF;
    font-size: 12px;
    width: 100%;
    float: left;
    padding-bottom: 0px;
    padding-left: 15px;
    background: #fff;
    display: grid;
    box-shadow: inset 0 -1px 0 rgba(35, 35, 35, 0);
  }
  .notificaciones h2 .accordion-button span.date {
    color: #c6c6c6;
    font-size: 9px;
    width: 100%;
  }
  .notificaciones h2 .accordion-button p {
    width: 90%;
    margin-bottom: 6px;
    display: block;
    float: left;
    color: #707070;
  }
  .notificaciones h2 .noselected::after {
    color: #707070 !important;
    border: 1px solid #707070;
  }
  .notificaciones .show {
    width: 100%;
  }
  .notificaciones .accordion-collapse {
    font-size: 10px;
    color: #707070;
    line-height: 14px;
  }
  .notificaciones .icon-menu-mas {
    cursor: pointer;
    color: #0038FF;
    font-size: 16px;
    width: auto;
    padding-right: 16px;
  }
}
/* Noticias */
.notiItem {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: grid;
  grid-gap: 1em;
  border-top: solid 1px #e2e2e2 !important;
  border-left: 3px solid #e2e2e2;
}
.notiItem .accordion-header .accordion-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 32px 0 0;
  background: none;
}
.notiItem .accordion-header .accordion-button small {
  display: block;
  color: #9f9f9f;
  font-size: 0.6em;
}
.notiItem .accordion-header .accordion-button p {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 0.8em;
}
.notiItem .accordion-header h4 {
  font-size: 0.8em;
}
.notiItem .notiItemCont {
  display: grid;
  grid-template-columns: 1fr 32px;
  grid-gap: 1em;
}
.notiItem .card-body {
  padding: 0;
}
.notiItem .show {
  width: 100%;
}
.notiItem .xtras {
  padding: 0 5px 0 0;
  text-align: right;
  font-size: 1.5em;
}
.notiItem .accordion-button::after {
  right: 0;
  padding: 0;
}
.notiItem .accordion-button:not(.collapsed) {
  color: #000;
  background-color: #fff;
  box-shadow: none;
}
.notiItem .accordion-item:first-of-type .accordion-button {
  border: 0;
}
.notiItem .accordion-button:focus {
  box-shadow: none;
}

.notiItemNew {
  border-left: 3px solid #0038FF;
}
.notiItemNew button {
  color: #0038FF;
}

.preguntaItem {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: grid;
  grid-gap: 1em;
  border-top: solid 1px #e2e2e2 !important;
}
.preguntaItem h4 {
  font-size: 1em;
}
.preguntaItem .card-body {
  padding: 0;
}
.preguntaItem .show {
  width: 100%;
}
.preguntaItem button {
  padding: 0 32px 0 0;
  background: none;
}
.preguntaItem button:focus {
  outline: none;
}
.preguntaItem .accordion-button::after {
  right: 0;
  padding: 0;
}
.preguntaItem .accordion-button:not(.collapsed) {
  color: #000;
  background-color: #fff;
  box-shadow: none;
}
.preguntaItem .accordion-item:first-of-type .accordion-button {
  border: 0;
}
.preguntaItem .accordion-button:focus {
  box-shadow: none;
}

/*.preguntaItem{@include boxContainer;display:grid;grid-gap:1em;border-top:$bordeGenerico!important;
    .accordion-header{display:grid;grid-template-columns:1fr 1em;grid-template-rows:1fr;grid-gap:1em;}
    .card-body{padding:0;}
    .show{width:100%;}
    button{width:30px;padding:0;background:none;
        &:focus{outline: none;border-color:red;}
    }
    .accordion-button:not(.collapsed){box-shadow:none;background:none;}
    .accordion-button, .accordion-button:focus{outline: none;border:0;background:none;}
}
*/
.tablaCont {
  display: block;
  padding: 0 0 0 0;
  overflow-x: auto;
  overflow-y: visible !important;
}
.tablaCont .tablaBtns {
  display: inline-flex;
  gap: 0.5em;
  margin-top: 0.5em;
}

.tablaComun {
  width: 100%;
  border-radius: 0.3em;
  overflow: visible;
}
.tablaComun th {
  text-wrap-mode: nowrap;
}
.tablaComun th, .tablaComun td {
  padding: 1em;
  text-align: center;
}
.tablaComun th:first-child {
  text-align: left;
}
.tablaComun th:last-child {
  text-align: right;
}
.tablaComun thead {
  color: #fff;
  background: #0038FF;
}
.tablaComun thead tr th.alingLeft {
  text-align: left;
}
.tablaComun thead tr th.alingRight {
  text-align: right !important;
}
.tablaComun thead tr th {
  text-align: center;
}
.tablaComun tbody {
  border: solid 1px #e2e2e2;
  background: #fff;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
.tablaComun tbody tr {
  border-bottom: solid 1px #e2e2e2;
}
.tablaComun tbody tr td.alingLeft {
  text-align: left !important;
}
.tablaComun tbody tr td.alingRight {
  text-align: right !important;
}
.tablaComun tbody tr td:first-child {
  text-align: left;
}
.tablaComun tbody tr td:last-child {
  text-align: right;
  opacity: 1;
}

tbody .percent35 {
  width: 100%;
  max-width: 35% !important;
  overflow: hidden;
}
tbody .percent35 p {
  margin-bottom: 0;
}
tbody p.lineClamp2 {
  margin-bottom: 0;
  text-wrap-mode: wrap;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
}
tbody span.textIcon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
tbody span.pColumn {
  display: flex;
  flex-direction: column;
}
tbody span.pColumn p {
  margin-bottom: 0;
}

td.tbMarca {
  text-align: left;
}
td.tbMarca img {
  width: 70px;
  border-radius: 0.3em;
}

.tbPais img {
  margin-right: 5px;
}
.tbPais i {
  white-space: nowrap;
}

.tbImporte {
  text-wrap: nowrap;
}

.tbCondiciones {
  white-space: nowrap;
}

.tbTipoPago {
  align-items: start;
}
.tbTipoPago .align {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.tbBtns button {
  margin: 0 0 0.3em 0.5em;
}

.tbAcciones {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}

td.tbInfo {
  text-align: right;
}

.tablaTotalDestacado {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1em;
  padding: 1em;
  color: #64A762;
  border-radius: 0.5em;
  background: #E5F9E7;
}
.tablaTotalDestacado strong {
  margin-left: 0.5em;
  font-size: 1.5em;
}

.tdNoDatos td {
  padding: 2em;
  text-align: center !important;
}

.manejadorTD {
  max-width: 30px;
}

td .manejadorIMG {
  display: inline-block;
  padding: 3px;
  margin-right: 0.5em;
}
td .manejadorIMG:hover {
  background: #E2F0FC;
  cursor: pointer;
}
td .manejadorIMG:active {
  background: #E2F0FC;
  cursor: move;
}
.thIcon {
  position: relative;
  padding-right: 30px;
}

.iconOrden {
  position: absolute;
  top: 10px;
  right: 0;
  width: 12px;
}

.iconOrden:hover {
  cursor: pointer;
}

@media screen and (max-width: 1000px) {
  .capaIconos {
    position: relative;
    display: flex;
    justify-content: end;
    flex: 1;
  }
  .capaIconos .toggle {
    color: #0038FF;
  }
  .capaIconos .toggle:hover, .capaIconos .toggle:active {
    color: #000;
    cursor: pointer;
  }
  .capaIconos .capa, .capaIconos .capaVisible {
    position: absolute;
    top: -0.3em;
    right: 0em;
    display: none;
    grid-gap: 1em;
    padding: 0.5em;
    background: #fff;
    border-radius: 0.5em;
    z-index: 1;
  }
  .capaIconos .capa .capaHead, .capaIconos .capaVisible .capaHead {
    display: flex;
    justify-content: space-between;
  }
  .capaIconos .capa .capaHead .cerrar, .capaIconos .capaVisible .capaHead .cerrar {
    color: #0038FF;
  }
  .capaIconos .capa .capaHead .cerrar:hover, .capaIconos .capa .capaHead .cerrar:active, .capaIconos .capaVisible .capaHead .cerrar:hover, .capaIconos .capaVisible .capaHead .cerrar:active {
    color: #000;
    cursor: pointer;
  }
  .capaIconos .capa .capaBody, .capaIconos .capaVisible .capaBody {
    display: flex;
    gap: 1em;
  }
  .capaIconos .capaVisible {
    display: grid;
  }
  .capaIconos .capaOculta {
    display: none;
  }
}
@media screen and (min-width: 1000px) {
  .tablaTotalDestacado {
    float: right;
  }
  .capaIconos .toggle {
    display: none;
  }
  .capaIconos .capa {
    position: relative;
    top: 0;
    z-index: 0;
    display: flex;
    padding: 0;
    background: none;
  }
  .capaIconos .capa .capaHead {
    display: none;
  }
  .capaIconos .capa .capaBody {
    display: flex;
    gap: 0.5em;
  }
}
table .btnComandos {
  color: #0038FF;
  cursor: pointer;
  align-items: center;
  display: flex;
  gap: 0.6rem;
  width: fit-content;
  position: relative;
}
table .btnComandos .textCopy {
  position: absolute;
  font-size: 6px;
  right: -8px;
  top: -8px;
  opacity: 0;
}
table tr.trDesActivo td {
  opacity: 0.3;
}
table tr.trDesActivo td:has(.btn),
table tr.trDesActivo td:has(> .menuXtra) {
  opacity: 1;
}

table tr.errorCancelado,
table tr.valido,
table tr.programado,
table tr.enProceso {
  position: relative;
}
table tr.errorCancelado > td:first-child:after,
table tr.valido > td:first-child:after,
table tr.programado > td:first-child:after,
table tr.enProceso > td:first-child:after {
  content: "";
  position: absolute;
  width: 3px;
  left: 7px;
  top: 8px;
  bottom: 8px;
}
table tr.valido > td:first-child:after {
  background-color: #57E200;
}
table tr.programado > td:first-child:after {
  background-color: #0038FF;
}
table tr.enProceso > td:first-child:after {
  background-color: #FFB134;
}
table tr.errorCancelado > td:first-child:after {
  background-color: #ff0000;
}
table td > p:has(+ p) {
  font-weight: 600;
  margin-bottom: 0px;
}
table td p:only-child {
  margin-bottom: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}
table td > span {
  overflow: hidden;
}
table td > span > p + p,
table td > p + p {
  margin-bottom: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}
table td.imgTwoP,
table td:has(> p + p) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

table.alingLeft * {
  text-align: left !important;
}

.limit {
  max-width: 250px;
}

.limitMin {
  min-width: 250px;
}

.iconTipo {
  font-size: 18px;
  font-weight: 900;
  margin-left: 0.3rem;
  cursor: pointer;
}

tr.hRow:has(+ tr.subRow) {
  border-bottom: none;
}

tr.subRow:has(+ tr.subRow) {
  border-bottom: solid 1px #e2e2e2;
}

img.imgSquare {
  border-radius: 3px;
  object-fit: cover;
  object-position: center;
  width: 35px;
  height: 35px;
  display: inline;
}

.imgTwoP {
  display: flex;
  overflow: hidden;
  align-items: center;
  vertical-align: middle;
  gap: 0.5rem;
}
.imgTwoP span {
  overflow: hidden;
  width: 100%;
}
.imgTwoP span p {
  text-wrap-mode: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  margin-bottom: 0;
}

.btnsAcciones {
  display: flex;
  gap: 0.4rem;
  width: fit-content;
}
.btnsAcciones span {
  padding: 2px;
  cursor: pointer;
  width: fit-content;
}
.btnsAcciones span i {
  color: #0038FF;
  font-size: 14px;
  transition: color 200ms ease;
}
.btnsAcciones span:hover i {
  color: black;
}
.btnsAcciones.alignRight {
  text-align: right !important;
}

table.actionsA th:last-child,
table.actionsA td:last-child {
  display: none;
}
@media screen and (min-width: 1000px) {
  table.actionsA th:first-child,
  table.actionsA td:first-child {
    display: none;
  }
  table.actionsA th:last-child,
  table.actionsA td:last-child {
    display: table-cell;
  }
  table.actionsA th:last-child span,
  table.actionsA td:last-child span {
    overflow: visible;
  }
}

/* opciones para menuXtra  en tabla con javascript */
table.tableMenuXtra .menuXtra > .opciones {
  display: none;
}
table.tableMenuXtra .menuXtra > .opciones.active {
  display: flex;
  flex-direction: column;
}

.ulOpciones ul {
  width: 100%;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.ulOpciones ul li {
  text-align: center;
  padding: 0.5em;
}
.ulOpciones ul li i {
  font-size: 1.5em;
}
.ulOpciones ul li a {
  display: grid;
  grid-gap: 0.5em;
}
.ulOpciones ul .seleccionado {
  border-radius: 0.5em;
  color: #fff !important;
  background: #0038ff;
}
.ulOpciones ul .seleccionado a {
  color: #fff;
}

.escritorio {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .escritorio {
    display: flex !important;
  }
}

.cargaDniCont {
  display: grid;
  grid-gap: 1em;
}

.cargaDniItem {
  display: flex;
  flex-direction: column;
  grid-gap: 1em;
}

.cargaDni {
  min-height: 100px;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
  z-index: 0;
}
.cargaDni .btn {
  position: absolute;
  top: 1em;
  left: 1em;
}
.cargaDni .contBtn {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}
.cargaDni img {
  max-width: 100%;
  max-height: 300px;
  margin: 2em;
}

/*.btnCargaimg::-webkit-file-upload-button {visibility: hidden;}
.btnCargaimg{appearance:none;width:32px;height:32px;border-radius:$radiusSm;background:url("/img/iconos/img-invert.svg") no-repeat center center $color;background-size:22px;}
.btnCargaimg:hover{background:url("/img/iconos/img-invert.svg") no-repeat center center #000;background-size:22px;cursor:pointer;}*/
.btnCargaimg {
  position: relative;
  appearance: none;
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 0.3em;
}
.btnCargaimg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: url("/img/iconos/img-invert.svg") no-repeat center center #0038FF;
  background-size: 22px;
  z-index: 5;
}

.btnCargaimg:hover {
  background: url("/img/iconos/img-invert.svg") no-repeat center center #000;
  background-size: 22px;
  cursor: pointer;
}

.boxSaldo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  color: #64A762;
  line-height: 1.3em;
  text-align: center;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
  border-radius: 0.5em;
  background: #E5F9E7;
}
.boxSaldo i, .boxSaldo strong {
  font-size: 1.8em;
}
.boxSaldo strong {
  margin: 0 0.5em;
}

.boxFacturaCrear {
  display: grid;
  grid-gap: 1em;
}

.usuarioPago {
  display: grid;
  grid-template-areas: "usuario cantidad" "accion accion";
  grid-template-columns: 1fr auto;
  grid-gap: 1em;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fcfcfc;
}
.usuarioPago .usuario {
  grid-area: usuario;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5em;
}
.usuarioPago .usuario .img {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2e2e2;
  font-size: 18px;
  border: solid 1px #e2e2e2;
  border-radius: 50%;
}
.usuarioPago .usuario .txt {
  position: relative;
  display: inline-grid;
  grid-gap: 0.5em;
  padding: 0 0 0 0.5em;
  border-left: solid 1px #e2e2e2;
  overflow-x: hidden;
}
.usuarioPago .usuario .txt::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  z-index: 1;
}
.usuarioPago .cantidad {
  grid-area: cantidad;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 1em;
  border-left: solid 1px #e2e2e2;
}
.usuarioPago .accion {
  grid-area: accion;
}
.usuarioPago .accion button {
  width: 100%;
}

.comision {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1em;
  align-items: center;
  margin-bottom: 1em;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fcfcfc;
}
.comision i {
  font-size: 1.5em;
  padding-right: 0.5em;
  border-right: solid 1px #e2e2e2;
}

.perfilFiscalListado {
  display: grid;
  grid-gap: 1em;
}

.perfilFiscalItem {
  display: grid;
  grid-template-rows: 1fr;
  grid-gap: 1em;
  padding: 0.5em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
}
.perfilFiscalItem .detalle {
  display: flex;
  gap: 0.5em;
}
.perfilFiscalItem .detalle .txt {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.perfilFiscalItem .opciones {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
  padding-top: 1em;
  border-top: dashed 1px #e2e2e2;
}

.txtAprobada {
  color: #2EAA32;
}

.txtDenegada {
  color: #AA2E3B;
}

.txtPendiente {
  color: #d5a206;
}

.perfilFiscalBtns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  margin-top: 1em;
}
.perfilFiscalBtns .btn {
  display: grid;
  grid-gap: 0.5em;
}

.listIconos {
  display: grid;
  grid-gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.listIconos li {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}
.listIconos li .iconXtraSm {
  font-size: 1.5em;
}
.listIconos li .iconMin {
  font-size: 1.5em;
  margin: 3px 0.5em 0 0;
}
@media screen and (min-width: 768px) {
  .perfilFiscalListado {
    grid-template-columns: repeat(3, 1fr);
  }
  .perfilFiscalBtns {
    display: inline-grid;
    grid-template-columns: auto auto;
  }
  .perfilFiscalBtns .btn {
    display: inline-flex;
    align-items: center;
  }
  .comision {
    display: inline-grid;
  }
  .usuarioPago {
    grid-template-areas: "usuario cantidad accion";
    grid-template-columns: 1fr auto auto;
  }
  .cargaDniCont {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1000px) {
  .perfilFiscalListado {
    grid-template-columns: repeat(4, 1fr);
  }
}
.opciones ul {
  list-style: none;
  margin-left: 0px;
  padding-left: 0px;
}
.opciones ul li {
  text-align: center;
  display: block;
  float: left;
  padding: 0.5em 1em;
  margin-right: 1em;
  border: 1px solid #0038FF;
  border-radius: 5px;
}
.opciones ul li:hover {
  background-color: #f8f8f8;
  border-radius: 5px;
}
.opciones ul li i {
  display: block;
  margin-bottom: 0.5em;
}
.opciones .seleccionado {
  background-color: #f8f8f8;
  border-radius: 5px;
  font-weight: bold;
}
.opciones .seleccionado a {
  color: #000;
}
.opciones .seleccionado i {
  color: #000;
}

/*.cajero{
    .boxContainer{
         background-color:#fff;
         margin-bottom: 16px;
         .tablaCont{
             color:$txtcolor1;
             thead{
                 background-color:$background3;
                 th:first-child {
                     text-align: left;
                     width: 5%;
                     border: 0px;
                 }
                 th:nth-child(2) {
                     text-align: left;
                     width: 10%;
                     border: 0px;
                 }
                 th:nth-child(3) {
                     text-align: left;
                     width: 80%;
                     border: 0px;
                 }
             }
             tbody{
                 tr{
                     border-bottom: 1px solid $bordercolor;
                     padding-bottom: 5px;
                      td:first-child {
                         text-align: left;
                         width: 15%;
                     }
                     td:nth-child(2) {
                         text-align: left;
                         width: 15%;
                     }
                     td:nth-child(3) {
                         text-align: left;
                         width: 70%;
                     }
                     td{
                         padding:10px 10px;
                         a{
                             width: auto;
                             margin-bottom:0px;
                                 i.icon-factura{
                                     margin-right: 6px;
                                 }
                                 i.red{
                                     margin-right:0px;
                                 }
                                 span{

                                 }
                         }
                         .green{color:$green;}
                     }
                 }

             }
         }
         .tabUltimosMov{
             tbody{
                 tr{
                     td{
                         padding: 15px 10px!important;
                     }

                 }
             }
         }
    }

 }*/
.alert-warning {
  color: #B5913A;
  background-color: #FFF6BB !important;
  border-color: #F2DDA8 !important;
}
.alert-warning i {
  color: #B5913A;
  background-color: transparent;
  margin-right: 8px;
}

/* facturas */
.cont_facturas .box_generar {
  border-right: 1px solid #f0f0f0;
}
.cont_facturas .box_generar aside {
  margin-bottom: 8px;
}
.cont_facturas .box_generar aside .icon-ticket {
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 8px;
}
.cont_facturas .box_generar aside .icon-ticket:hover {
  background-color: #f8f8f8;
  border-radius: 5px;
}
.cont_facturas .box_generar .factura_metodos {
  margin-top: 12px;
  display: block;
  float: left;
  width: 100%;
}
.cont_facturas .box_generar .factura_metodos strong {
  color: #707070;
}
.cont_facturas .box_generar .factura_metodos .input p {
  margin-top: 8px;
  border-bottom: 0px;
}
.cont_facturas .box_generar .factura_metodos .tarjeta {
  margin-top: 12px;
}
.cont_facturas .box_generar .factura_metodos .tarjeta input {
  margin-right: 6px;
}
.cont_facturas .box_generar .factura_metodos button {
  margin-top: 16px;
  width: 25%;
}

/* datos físcales */
.cajero .opciones .separador {
  display: block;
  float: left;
  width: 100%;
  border-top: 1px solid #e2e2e2;
  margin: 8px 0px;
}

.cont_enviar .factura_metodos {
  margin-top: 0px !important;
}
.cont_enviar .factura_metodos strong {
  margin-bottom: 8px;
  display: block;
}
.cont_enviar .comi {
  border: 1px solid #ececec;
  border-radius: 5px;
  display: block;
  float: left;
  width: 160px;
  padding: 8px;
  background-color: #fcfcfc;
  margin-bottom: 8px;
}
.cont_enviar .comi i {
  color: #707070;
  border-right: 1px solid #ececec;
  display: block;
  float: left;
  height: 30px;
  padding: 6px 16px 6px 8px;
}
.cont_enviar .comi span {
  display: block;
  float: left;
  width: auto;
  margin-top: 0px;
  padding: 6px 0px 6px 16px;
}
.cont_enviar .factura_metodos2 .form-outline {
  height: 25px;
  width: 93%;
}
.cont_enviar .factura_metodos2 button {
  background-color: #E8F2FB !important;
  border-color: #E8F2FB !important;
}
.cont_enviar .factura_metodos2 input {
  border: 1px solid #f0f0f0;
}
.cont_enviar .factura_metodos2 .comi {
  width: 100%;
}
.cont_enviar .factura_metodos2 .comi i {
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  font-size: 22px;
  color: #e2e2e2;
  height: 35px;
  padding: 5px 0px 0px 0px;
  width: 35px;
  text-align: center;
  margin-right: 8px;
  display: block;
  float: left;
}
.cont_enviar .factura_metodos2 .comi aside {
  border-left: 1px solid #e2e2e2;
  display: block;
  float: left;
}
.cont_enviar .factura_metodos2 .comi aside small {
  margin-left: 16px;
}
.cont_enviar .factura_metodos2 .comi aside span {
  padding-top: 0px;
}
.cont_enviar .factura_metodos2 .comi .factura_user {
  float: right;
}
.cont_enviar .factura_metodos2 .comi .factura_user p {
  display: inline-block;
  width: auto;
  padding: 10px 18px 0px 18px;
  border-left: 1px solid #e2e2e2;
}
.cont_enviar .factura_metodos2 .comi .factura_user button {
  display: inline-block;
}
.cont_enviar .factura_metodos2 .comi .factura_user .btnenviar1 {
  display: block;
}
.cont_enviar .factura_metodos2 .comi .btnenviar2 {
  display: none;
}

.cont_datos .head_datos {
  display: block;
  float: left;
  width: 100%;
  margin: 8px 0px;
}
.cont_datos .head_datos i {
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  padding: 8px;
  margin-right: 8px;
}
.cont_datos .separadordatos {
  border-top: 1px solid #e2e2e2;
  padding: 24px 0px;
}
.cont_datos aside {
  margin-top: 8px;
}
.cont_datos .g-3 {
  margin-bottom: 8px;
}
.cont_datos .dni {
  margin: 8px 0px;
}
.cont_datos .dni input {
  margin-bottom: 8px;
}
.cont_datos {
  /*.icon-info{
      position: relative;
      top: -16px;
  }*/
}

.cajero .globo {
  display: block;
  float: left;
  width: 100%;
  padding: 1em 0;
  margin-top: 8px;
  border-top: 1px dashed #e2e2e2;
}
.cajero .form-check {
  margin-top: 16px;
}
.cajero .form-check label {
  margin-top: 2px;
}
.cajero .btnpagos ul {
  display: flex;
  gap: 0.5em;
  color: #0038FF;
}
.cajero .btnpagos ul li {
  position: relative;
  display: grid;
  grid-gap: 0.5em;
  border: 1px solid #0038FF !important;
  border-radius: 5px;
  margin-right: 6px;
  padding: 0.5em;
}
.cajero .btnpagos ul li i {
  margin: 0;
  font-size: 1.5em;
}
.cajero .btnpagos ul li p {
  margin: 0;
  border-bottom: 0px;
}
.cajero .btnpagos ul li {
  /*button{width:100%;}*/
}

@media screen and (max-width: 768px) {
  .opciones ul li {
    text-align: center;
    display: block;
    float: left;
    padding: 0.5em 0.5em;
    width: 20%;
    border: 1px solid #0038FF;
  }
  /*.tablaCont{
      color:$txtcolor1;
      thead{
          //background-color:$background3;
          th:first-child {
              text-align: left;
              width: 25%!important;
          }
          th:nth-child(2) {
              text-align: left;
              width: 25%!important;
          }
          th:nth-child(3) {
              text-align:right!important;
              width: 50%!important;
          }
      }
      tbody{
          tr{
              border-bottom: 1px solid $bordercolor;
              padding: 5px;
               td:first-child {
                  text-align: left;
                  width: 15%;
              }
              td:nth-child(2) {
                  text-align: left;
                  width: 15%;
              }
              td:nth-child(3) {
                  width: 70%;
                  text-align:right!important;
              }
              td{
                  a{
                      width: auto;
                          i.icon-factura{
                              margin-right: 0px!important;
                          }
                          i.red{
                              margin-right:0px;
                          }
                          span{
                              display:none;
                          }
                  }
                  .green{color:$green;}
              }
          }

      }
  }*/
  .tabUltimosMov thead th:nth-child(3) {
    text-align: left !important;
    width: 50% !important;
  }
  .tabUltimosMov tbody tr td:nth-child(3) {
    width: 70%;
    text-align: left !important;
  }
  .tabUltimosMov tbody tr td a {
    width: auto;
  }
  .tabUltimosMov tbody tr td a i.icon-factura {
    margin-right: 0px !important;
  }
  .tabUltimosMov tbody tr td a i.red {
    margin-right: 0px;
  }
  .tabUltimosMov tbody tr td a span {
    display: none;
  }
  .tabUltimosMov tbody tr td .green {
    color: #2EAA32;
  }
  /* facturas */
  .cont_facturas .box_generar {
    border-right: 0px solid #f0f0f0;
  }
  .cont_facturas .box_generar .factura_metodos {
    margin-top: 12px;
    display: block;
    float: left;
    width: 100%;
  }
  .cont_facturas .box_generar .factura_metodos strong {
    color: #707070;
  }
  .cont_facturas .box_generar .factura_metodos .input p {
    margin-top: 8px;
    border-bottom: 0px;
  }
  .cont_facturas .box_generar .factura_metodos .tarjeta {
    margin-top: 12px;
  }
  .cont_facturas .box_generar .factura_metodos .tarjeta input {
    margin-right: 6px;
  }
  .cont_facturas .box_generar .factura_metodos button {
    margin-top: 16px;
    /*width:100%;*/
  }
  .comi {
    width: 100% !important;
  }
  .factura_metodos2 .form-outline {
    height: 25px;
    width: 87% !important;
  }
  .factura_metodos2 aside span {
    padding-top: 0px;
    padding-right: 0px;
  }
  .factura_user {
    float: right;
  }
  .factura_user p {
    display: inline-block;
    width: auto;
    float: right;
  }
  .factura_user .btnenviar1 {
    display: none !important;
  }
  .btnenviar2 {
    display: block !important;
    margin-top: 8px;
    width: 100%;
    float: left;
  }
  .cont_datos {
    /*. button{
         width:100%!important;
     }
    icon-info{
         position: relative;
         top: -30px;
     }*/
  }
  .btnpagos {
    display: block;
    float: left;
    width: 100%;
  }
  .btnpagos ul li {
    border: 1px solid #0038FF;
    border-radius: 5px;
    margin-right: 8px !important;
    padding: 0.5em;
    width: 31% !important;
  }
  .btnpagos ul li i {
    color: #0038FF;
  }
  .btnpagos ul li p {
    border-bottom: 0px;
    padding-bottom: 0px;
    margin-bottom: 6px;
    color: #0038FF;
  }
  .btnpagos ul li button {
    padding: 3px 16px;
  }
}
.preFiltroSelect {
  width: 100%;
  display: block;
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: dashed 1px #e2e2e2;
}

.preFiltro {
  display: flex;
  gap: 1em;
  margin-bottom: 1em;
}
.preFiltro .current {
  border-color: #000;
  background: #000;
}

.listadoFiltro {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.listadoFiltro .filtrado1 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1em;
  align-items: end;
}
.listadoFiltro .filtrado1 .item3 .btn {
  width: 100%;
}
.listadoFiltro .filtrado1 .item4 .btn {
  width: 100%;
}
.listadoFiltro .filtrado2 {
  padding: 1em 0 0 0;
  border-top: solid 1px #e2e2e2;
}

.listadoFiltroBuscador {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.listadoFiltroBuscador .filtrado1 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1em;
  align-items: end;
}
.listadoFiltroBuscador .filtrado1 .item3 .btn {
  width: 100%;
}
.listadoFiltroBuscador .filtrado1 .item4 .btn {
  width: 100%;
}
.listadoFiltroBuscador .filtrado2 {
  padding: 1em 0 0 0;
  border-top: solid 1px #e2e2e2;
}

.listadoFiltroActivas {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.listadoFiltroActivas .filtrado1 {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1em;
  align-items: end;
}
.listadoFiltroActivas .filtrado1 .item3 .btn {
  width: 100%;
}
.listadoFiltroActivas .filtrado1 .item4 .btn {
  width: 100%;
}
.listadoFiltroActivas .filtrado2 {
  padding: 1em 0 0 0;
  border-top: solid 1px #e2e2e2;
}

.filtroListado {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-gap: 1em;
  align-items: end;
}
.filtroListado .btn {
  width: 100%;
}

.selectBtn {
  width: 100%;
  background-color: #ffffff;
  background-image: url("/img/iconos/boot-dir-down.svg");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-sizing: border-box;
  color: #212529;
  display: block;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: normal;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.selectDesplegable {
  width: 300px;
  height: 300px;
  overflow: hidden;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}
.selectDesplegable .selectBuscador {
  margin: -0.5em 0 1em 0;
  padding: 0.5em;
  border-bottom: solid 1px #e2e2e2;
  background: #E2F0FC;
}

.filtroPais {
  width: 100%;
  height: 250px;
  display: block;
  overflow-y: auto;
}
.filtroPais ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.filtroPais ul li {
  display: flex;
  padding: 0.3em;
}
.filtroPais .selected {
  background: #E2F0FC;
}
.filtroPais .selected .chekMark {
  display: inline-block;
}
.filtroPais .bandera {
  margin: 0 0.5em 0 0;
}
.filtroPais .text {
  flex: 1;
}
.filtroPais .chekMark {
  display: none;
  margin: 0 0.5em 0;
}

.modalPromoPrev {
  display: flex;
}
.modalPromoPrev .img {
  width: 200px;
}
.modalPromoPrev .img img {
  width: 100%;
  border-radius: 0.5em;
}
.modalPromoPrev .paises span {
  display: inline-block;
  margin: 0 0.5em 0.5em 0.5em;
}
.modalPromoPrev .paises span img {
  margin-right: 0.5em;
}

.modalPromoPaisesPrev {
  display: grid;
  grid-template-columns: 150px auto;
  grid-gap: 1em;
}
.modalPromoPaisesPrev .img img {
  width: 100%;
  border-radius: 0.5em;
}
.modalPromoPaisesPrev .paises span {
  display: inline-block;
  margin: 0 0.5em 0.5em 0.5em;
}
.modalPromoPaisesPrev .paises span img {
  margin-right: 0.5em;
}

.modalPromoPaisesDetalle {
  margin: 1em 0 0 0;
}

.modalPromoInfoPrev {
  display: flex;
  padding: 1em;
  border-bottom: solid 1px #e2e2e2;
}
.modalPromoInfoPrev .img {
  width: 100px;
  margin: 0 auto;
}
.modalPromoInfoPrev .img img {
  width: 100%;
  border-radius: 0.5em;
}

.modalPromoInfoDetalle {
  margin: 1em 0 0 0;
}

.modalPromoEnlacesPrev {
  display: flex;
  margin: 0;
  padding: 1em;
  border-bottom: solid 1px #e2e2e2;
}
.modalPromoEnlacesPrev .img {
  width: 100px;
  margin: 0 auto;
}
.modalPromoEnlacesPrev .img img {
  width: 100%;
  border-radius: 0.5em;
}

.modalPromoEnlacesList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.modalPromoEnlacesList li {
  position: relative;
  padding: 1em 0 0.5em 0;
  border-bottom: dashed 1px #e2e2e2;
}
.modalPromoEnlacesList li .enlaceCont {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5em;
  margin-top: 0.5em;
  padding: 0.5em 0;
}
.modalPromoEnlacesList li .enlaceCont .url {
  padding: 0.5em;
  border: solid 1px #90EF99;
  background: #E5F9E7;
}
.modalPromoEnlacesList li:last-child {
  padding-bottom: 0;
  border: 0;
}
.modalPromoEnlacesList li .newLink {
  position: absolute;
  top: 1em;
  right: 0;
  z-index: 1;
}
.modalPromoEnlacesList .endOptions {
  display: flex;
  justify-content: end;
  border-top: dashed 1px #e2e2e2;
}

.modalNuevoEnlace {
  display: flex;
  justify-content: end;
  margin-top: 1em;
  padding-top: 1em;
  border-top: dashed 1px #e2e2e2;
}

.modalEnlacesList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.modalEnlacesList li {
  padding: 0.5em 0;
  border-bottom: dashed 1px #e2e2e2;
}
.modalEnlacesList li .enlaceEdicion {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5em;
  align-items: center;
  padding: 0.5em 0;
}
.modalEnlacesList li .enlaceUrl {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5em;
  padding: 0.5em 0;
}
.modalEnlacesList li .enlaceUrl .url {
  padding: 0.5em;
  border: solid 1px #90EF99;
  background: #E5F9E7;
}
.modalEnlacesList li:last-child {
  padding-bottom: 0;
  border: 0;
}

.list1 {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list1 li {
  padding: 0.5em 0 0.5em 2em;
  background: url("/img/iconos/li-min.svg") no-repeat 0 0;
  background-size: 2em;
}

@media screen and (min-width: 768px) {
  .preFiltroSelect select {
    max-width: 285px;
  }
  .listadoFiltroBuscador {
    display: grid;
    grid-template-columns: 4fr auto;
  }
  .listadoFiltroBuscador .filtrado1 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1em;
  }
  .listadoFiltroBuscador .filtrado1 .item3 .btn {
    width: auto;
  }
  .listadoFiltroBuscador .filtrado2 {
    padding: 0 0 0 1em;
    border-top: none;
    border-left: solid 1px #e2e2e2;
  }
  .listadoFiltro {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
  .listadoFiltro .filtrado1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1em;
  }
  .listadoFiltro .filtrado1 .item3 .btn {
    width: auto;
  }
  .listadoFiltro .filtrado2 {
    padding: 0 0 0 1em;
    border-top: none;
    border-left: solid 1px #e2e2e2;
  }
  .listadoFiltroActivas {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
  .listadoFiltroActivas .filtrado1 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1em;
  }
  .listadoFiltroActivas .filtrado1 .item3 .btn {
    width: auto;
  }
  .listadoFiltroActivas .filtrado2 {
    padding: 0 0 0 1em;
    border-top: none;
    border-left: solid 1px #e2e2e2;
  }
  .filtroListado {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr auto;
  }
}
.modal-header {
  color: #fff;
  background: #0038FF;
}
.modal-header button.btn-close {
  color: #fff;
}

.formList,
.modalFormList {
  display: grid;
  grid-gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.formList li,
.modalFormList li {
  display: grid;
  grid-gap: 0.5em;
}
.formList label,
.modalFormList label {
  margin-bottom: 0.5em;
}
.formList .formX2,
.modalFormList .formX2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}
.formList .formX3auto,
.modalFormList .formX3auto {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-gap: 1em;
}
.formList .formX3auto input[type=date],
.modalFormList .formX3auto input[type=date] {
  min-width: 100px;
}
.formList,
.modalFormList {
  /* .formX3auto:has( .is-invalid){background-color: #0038FF;} */
}
.formList .inputBtns,
.modalFormList .inputBtns {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1em;
}
.formList .formX2auto,
.modalFormList .formX2auto {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1em;
}
.formList .formXIconCenter,
.modalFormList .formXIconCenter {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  gap: 0.3rem;
}
.formList .formXIconCenter > .iconC,
.modalFormList .formXIconCenter > .iconC {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.formList .formXIconCenter > .iconC i,
.modalFormList .formXIconCenter > .iconC i {
  font-size: 14px;
}
.formList .save,
.modalFormList .save {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1em;
}

.formList .autocompleteSelect,
.modalFormList .autocompleteSelect {
  width: 100%;
  position: relative;
}
.formList .input-wrapper,
.modalFormList .input-wrapper {
  position: relative;
}
.formList .input-wrapper input,
.modalFormList .input-wrapper input {
  width: 100%;
  padding: 10px 12px;
  padding-left: 39px;
  padding-right: 32px;
  border: 1px solid #CED4DB;
  border-radius: 4px;
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-sizing: border-box;
  height: 33.19px;
}
.formList .input-wrapper input:focus,
.modalFormList .input-wrapper input:focus {
  color: #212529;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.formList .input-flag,
.modalFormList .input-flag {
  width: 18px;
  height: 13px;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  object-fit: cover;
  border-radius: 2px;
}
.formList .input-flag[alt=Buscar],
.modalFormList .input-flag[alt=Buscar] {
  height: 16px;
  object-fit: contain;
}
.formList .input-icon,
.modalFormList .input-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  cursor: pointer;
  font-size: 14px;
  color: #777;
  height: fit-content;
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 1px;
}
.formList .input-icon i,
.modalFormList .input-icon i {
  width: 14px;
  height: 14px;
}
.formList .input-icon i.icon-cerrar,
.modalFormList .input-icon i.icon-cerrar {
  font-size: 10px;
  width: unset;
  height: unset;
}
.formList .input-icon.rotated,
.modalFormList .input-icon.rotated {
  transform: translateY(-50%) rotate(180deg);
  margin-top: 0;
}
.formList .options,
.modalFormList .options {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  border-radius: 4px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid #eee;
  display: none;
  z-index: 1000;
  padding: 4px;
  background-color: white;
}
.formList .options.show,
.modalFormList .options.show {
  display: block;
}
.formList .options .txtMasUsados,
.modalFormList .options .txtMasUsados {
  pointer-events: none;
  display: flex;
  height: 20px;
  font-size: 12px;
  color: #646464;
  align-items: center;
  padding: 3px;
  font-size: 11px;
}
.formList .options .txtTodos,
.modalFormList .options .txtTodos {
  pointer-events: none;
  display: flex;
  height: 20px;
  font-size: 12px;
  color: #646464;
  border-top: 1px solid #eee;
  padding: 8px 3px;
  margin-top: 10px;
  height: 30px;
  font-size: 11px;
}
.formList .option,
.modalFormList .option {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
}
.formList .option .flag,
.modalFormList .option .flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}
.formList .option .label,
.modalFormList .option .label {
  font-size: 13px;
  color: #111;
}
.formList .option:hover,
.modalFormList .option:hover {
  background: #ebebeb;
}

.modalFormList .formX2 .select {
  position: relative;
}
.modalFormList .formX2 .select .groupSelect {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
}
.modalFormList .formX2 .select .groupSelect.active .bOptions {
  display: flex;
  opacity: 0;
  z-index: 10;
  animation: fadeInUp 0.2s both;
}
.modalFormList .formX2 .select .groupSelect .bSelect {
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  background-color: #fff;
  width: 100px;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  width: 56px;
  margin-bottom: 0;
  border-radius: 0.25rem;
}
.modalFormList .formX2 .select .groupSelect .bSelect .bBtnText {
  text-wrap-mode: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  flex: 1;
  overflow: hidden;
  line-height: 100%;
  margin-bottom: 0;
  padding: 8px;
  gap: 8px;
  display: flex;
  align-items: center;
}
.modalFormList .formX2 .select .groupSelect .bSelect .bBtnText img {
  width: 15px;
  height: 12px;
}
.modalFormList .formX2 .select .groupSelect .bSelect > i {
  font-size: 12px;
  transition: 0.1s;
  transform-origin: center;
  flex: 0;
  padding-left: 8px;
  padding-right: 10px;
  border-right: 1px solid lightgrey;
  height: 15px;
  padding-top: 1px;
}
.modalFormList .formX2 .select .groupSelect .bSelect > span.btnCloseOptions {
  display: none;
  padding-right: 10px;
  height: 15px;
  border-right: 1px solid lightgrey;
}
.modalFormList .formX2 .select .groupSelect .bSelect > span.btnCloseOptions > i {
  font-size: 8px;
  padding-bottom: 1px;
  font-weight: 600;
  padding-left: 8px;
  padding-top: 4px;
  padding-right: 2px;
}
.modalFormList .formX2 .select .groupSelect .bOptions {
  display: none;
  position: absolute;
  top: 34px;
  left: 0;
  border-radius: 0.2rem;
  animation: fadeInDown 0.35s both;
  background-color: white;
  border: 1px solid #ebebeb;
}
.modalFormList .formX2 .select .groupSelect .bOptions > ul {
  gap: 4px;
  display: flex;
  max-height: 144px;
  flex-direction: column;
  padding: 8px 4px;
  overflow-y: auto;
  padding: 4px;
  margin: 4px 4px 4px 0;
}
.modalFormList .formX2 .select .groupSelect .bOptions ul .bOption {
  display: flex;
  height: 24px;
  cursor: pointer;
  border-radius: 0.25em;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  flex: 0 0 24px;
  min-width: 110px;
}
.modalFormList .formX2 .select .groupSelect .bOptions ul .bOption.active {
  background: #ebebeb;
}
.modalFormList .formX2 .select .groupSelect .bOptions ul .bOption.active i {
  opacity: 1;
  font-size: 12px;
  padding-right: 4px;
}
.modalFormList .formX2 .select .groupSelect .bOptions ul .bOption:hover {
  background: #ebebeb;
}
.modalFormList .formX2 .select .groupSelect .bOptions ul .bOption .bOptionText {
  display: flex;
  align-items: center;
  text-overflow: hidden;
  text-wrap-mode: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  z-index: 0;
  border: 1px solid transparent;
  height: 100%;
  cursor: pointer;
  gap: 8px;
  padding: 0 4px;
}
.modalFormList .formX2 .select .groupSelect .bOptions ul .bOption .bOptionText img {
  width: 15px;
  height: 12px;
}
.modalFormList .formX2 .select .groupSelect .bOptions ul .bOption i {
  opacity: 0;
  font-size: 16px;
  flex: 0;
}
.modalFormList .formX2 .select .groupSelect > input {
  text-align: right;
  padding-left: 62px;
}

.formList .formX2auto .groupSelected,
.modalFormList .formX2auto .groupSelected {
  position: relative;
}
.formList .formX2auto .groupSelected .selectedFlag,
.modalFormList .formX2auto .groupSelected .selectedFlag {
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 8px 0 8px 12px;
  display: inline-flex;
  align-items: center;
}
.formList .formX2auto .groupSelected .selectedFlag img,
.modalFormList .formX2auto .groupSelected .selectedFlag img {
  height: 12px;
  border-right: 1px solid grey;
  width: 28px;
  padding-right: 10px;
}
.formList .formX2auto .groupSelected .iconLeft,
.modalFormList .formX2auto .groupSelected .iconLeft {
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 8px 0 8px 12px;
  display: inline-flex;
  align-items: center;
  z-index: 1;
}
.formList .formX2auto .groupSelected > input,
.modalFormList .formX2auto .groupSelected > input {
  padding-left: 50px;
}
.formList .formX2auto .groupSelected input.dropdown-toggle,
.modalFormList .formX2auto .groupSelected input.dropdown-toggle {
  padding-left: 34px;
  padding-right: 40px;
}
.formList .formX2auto .groupSelected .dropdown-menu,
.modalFormList .formX2auto .groupSelected .dropdown-menu {
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 1px solid rgba(0, 0, 0, 0.15);
}
.formList .formX2auto .groupSelected .dropdown-item.active,
.modalFormList .formX2auto .groupSelected .dropdown-item.active {
  background-color: #0d6efd;
  color: #fff;
}
.formList .formX2auto .groupSelected .input-icon,
.modalFormList .formX2auto .groupSelected .input-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
  font-size: 1rem;
  z-index: 5;
}

.listProductEdicion {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
}

.labelInline {
  display: flex !important;
  align-items: flex-start;
  gap: 0.5em;
}
.labelInline input {
  width: auto;
}

.modal-body .nav-pills {
  flex-direction: row;
  justify-content: start;
}

.modal {
  background-color: rgba(0, 0, 0, 0) !important;
}

body:has(.modal.show)::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: block;
}

body:has(.modal.show#chatVendedor)::before,
body:has(.modal.show#chatComprador)::before,
body:has(.modal.show#disputasVendedor)::before,
body:has(.modal.show#disputasComprador)::before {
  content: "";
  display: none;
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0, -15px, 0);
    z-index: -1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    z-index: 1;
  }
}
@keyframes fadeInDown {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    z-index: 1;
  }
  to {
    transform: translate3d(0, -15px, 0);
    opacity: 0;
    z-index: -1;
  }
}
.bienvenidaCanales {
  max-width: 425px;
}
.bienvenidaCanales .modal-content {
  border-radius: 5px;
  border: 1px solid #0038FF;
  background: #FFF;
  box-shadow: 0 0 5px 0 #0038FF;
}
.bienvenidaCanales .modal-body {
  padding-top: 0;
  padding-bottom: 0;
}
.bienvenidaCanales .modal-body p {
  font-size: 14px;
  line-height: 1.3;
}
.bienvenidaCanales .modal-body p:last-child {
  margin-bottom: 0;
}

.modal-header.notStyles {
  background-color: transparent;
  border-bottom: none;
}
.modal-header.notStyles h1 {
  color: #0a0a0a;
  font-weight: 600;
  line-height: 1.2;
  font-size: 16px;
}
.modal-header.notStyles i.icon-atencion {
  color: #FEA45B;
  height: fit-content;
}

.modal-footer.notStyles {
  border-top: none;
}

.etiquetaMencion {
  background-color: #F8F8F8;
  border: 1px solid #EFEFEF;
  border-radius: 5px;
  padding: 6px 10px;
}
.etiquetaMencion p {
  margin-bottom: 0;
  line-height: 1.2;
}
.etiquetaMencion p span {
  color: #0038FF;
  cursor: pointer;
}

.tagUsuarios {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin: 0;
  cursor: pointer;
  margin-bottom: 0.8rem;
  overflow: hidden;
  padding-right: 2px;
  background-color: #F2F5FF;
  border: 1px solid #DEE6FF;
  border-radius: 5px;
  padding-right: 0.5rem;
  height: 40px;
}
.tagUsuarios > .tag {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  justify-content: center;
}
.tagUsuarios > .tag i {
  color: #0038FF;
  background-color: #F2F5FF;
  font-size: 24px;
  border-radius: 100px;
  overflow: hidden;
  padding: 2px;
  flex: 0 0 28px;
  box-sizing: content-box;
}
.tagUsuarios > .tag p {
  margin-bottom: 0;
  font-size: 11px;
}
.tagUsuarios > .tag p .num {
  color: #0038FF;
  font-size: 22px;
  font-weight: 600;
  line-height: 0.8;
  margin-right: 0.3rem;
}
.tagUsuarios > .textLink {
  font-size: 11px;
}

/*   options dentrode modales Mensaje de Bienvenida
 Mensaje de Salida*/
.form-select.limit10 {
  max-height: 150px; /* Ajusta el valor de la altura máxima a tu necesidad */
  overflow-y: scroll;
}

.innerModalBody {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.boxButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border-radius: 3px;
  transform: all 0.15s ease-in-out;
  padding: 1rem;
  gap: 0.7rem;
  flex: 1 1 50%;
}
.boxButton:hover, .boxButton:active {
  background-color: rgba(196, 209, 255, 0.1019607843);
  outline: 1px solid #0038FF;
}
.boxButton.active {
  background-color: rgba(196, 209, 255, 0.1019607843);
  outline: 1px solid #0038FF;
}
.boxButton i {
  color: #0038FF;
  font-size: 36px;
  font-weight: 400;
}

.innerModalBody .btnManual {
  cursor: pointer;
  display: inline-flex;
  height: 20px;
  width: fit-content;
  padding: 0 0.5rem;
  align-self: center;
  align-items: center;
  transition: color 200ms ease;
  font-size: 0.875em;
  color: rgb(112, 112, 112);
}
.innerModalBody .btnManual:hover {
  color: #0038FF;
}

.nCanales {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  background-color: white;
  padding-left: 0.5rem;
}

/*  los inputs que tenga en su interio nCanales (cuant ade digitos), se le tiene que poner esta clase */
input.iCanales {
  padding-right: 2.5rem;
}

/* modales ciclo compartir servicio "pp-pasarelas-servicios-compartir-servicios.html" dentro BOOTSTRAP*/
.modal-header {
  overflow: hidden;
}
.modal-header .iconAnt,
.modal-header .btnAnterior {
  cursor: pointer;
  padding: 5px;
  margin-right: 0.3rem;
}
.modal-header .iconAnt i,
.modal-header .btnAnterior i {
  font-weight: 500;
}
.modal-header > .twoText {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-right: 0.5rem;
}
.modal-header > .twoText {
  display: block;
  overflow: hidden;
  width: 100%;
}
.modal-header > .twoText > * {
  overflow: hidden;
  word-wrap: none;
  text-wrap-mode: nowrap;
  text-overflow: ellipsis;
}

.modal-body:has(.ulSectioned) {
  padding: 0 10px 10px 10px;
}

.modal-body .ulSectioned {
  height: 100%;
  max-height: 73vh;
  overflow-y: auto;
  padding: 0;
  margin-bottom: 0;
}
@media (min-height: 760px) {
  .modal-body .ulSectioned {
    max-height: 80vh;
  }
}
@media (min-height: 760px) and (min-width: 600px) {
  .modal-body .ulSectioned {
    max-height: 76vh;
  }
}
.modal-body .ulSectioned li {
  border-top: 1px solid rgb(228, 228, 228);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  overflow: hidden;
  padding: 0.5rem 10px;
  gap: 0.5rem;
  height: 89px;
}
.modal-body .ulSectioned li > span {
  padding: 0.5rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
  align-items: center;
  /*      width: 56px; */
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: all 300ms ease;
}
.modal-body .ulSectioned li > span:hover, .modal-body .ulSectioned li > span:active {
  background-color: #f0f0f0;
}
.modal-body .ulSectioned li > span:hover p, .modal-body .ulSectioned li > span:active p {
  color: #000;
  font-weight: 600;
}
.modal-body .ulSectioned li > span.descargar i, .modal-body .ulSectioned li > span.copiarEnlace i {
  font-size: 29px;
  width: fit-content;
  margin-top: 2px;
}
.modal-body .ulSectioned li > span.descargar > p, .modal-body .ulSectioned li > span.copiarEnlace > p {
  color: #616161;
  font-size: 10px;
  line-height: 1.1;
  margin-bottom: 0;
}
.modal-body .ulSectioned li > span.descargar:hover p, .modal-body .ulSectioned li > span.descargar:active p, .modal-body .ulSectioned li > span.copiarEnlace:hover p, .modal-body .ulSectioned li > span.copiarEnlace:active p {
  color: #000;
}
.modal-body .ulSectioned li > span.copiarEnlace {
  justify-content: space-between;
}
.modal-body .ulSectioned li > span.descargar i {
  font-size: 26px;
}
.modal-body .ulSectioned li > span.aspectR .vertical,
.modal-body .ulSectioned li > span.aspectR .unoUno {
  border: dotted 2px grey;
  border-radius: 3px;
  width: 40px;
  height: 40px;
}
.modal-body .ulSectioned li > span.aspectR .vertical {
  aspect-ratio: 9/16;
  height: 40px;
  width: unset;
}
.modal-body .ulSectioned li > span.aspectR > p {
  color: #616161;
  font-size: 10px;
  margin-bottom: 0;
}
.modal-body .ulSectioned li > span.aspectR:hover p, .modal-body .ulSectioned li > span.aspectR:active p {
  color: #000;
}
.modal-body .ulSectioned li.text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 10px;
  padding-right: 10px;
}
.modal-body .ulSectioned li.text > p:last-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-body .ulSectioned > li > .descargar {
  grid-column: 1/2;
  /*     @media (width > 480px) {
          grid-column: 5 / 6;

      } */
}

.modal-body .ulSectioned li:has(.contentImgVertical),
.modal-body .ulSectioned li:has(.contentImgUnoUno) {
  height: unset;
}

.modal-body .ulSectioned li .contentImgVertical,
.modal-body .ulSectioned li .contentImgUnoUno {
  display: block;
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.modal-body .ulSectioned li .contentImgVertical::before,
.modal-body .ulSectioned li .contentImgUnoUno::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(79.05% 79.05% at 50% 0%, rgba(0, 56, 255, 0.1) 0%, #000 100%);
}
.modal-body .ulSectioned li .contentImgVertical > img,
.modal-body .ulSectioned li .contentImgUnoUno > img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  height: 100%;
}
.modal-body .ulSectioned li .contentImgVertical .contentSpinner,
.modal-body .ulSectioned li .contentImgUnoUno .contentSpinner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(79.05% 79.05% at 50% 0%, rgb(0, 56, 255) 0%, #000 100%);
  display: grid;
  place-content: center;
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div {
  display: flex;
  flex-direction: column;
  gap: 1.9vw;
  justify-content: center;
  align-items: center;
  max-width: 86%;
  overflow: hidden;
}
@media (width > 480px) {
  .modal-body .ulSectioned li .contentImgVertical .contentInfo > div,
  .modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div {
    gap: 0.5rem;
  }
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > img.avatar,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > img.avatar {
  width: 60px;
  height: 60px;
  object-fit: center;
  object-position: center;
  overflow: hideen;
  border-radius: 100px;
  /*     border: 1px solid white; */
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .nomTipster,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .nomTipster {
  font-size: 9px;
  font-style: italic;
  color: white;
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .servicio,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .servicio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  line-height: normal;
  color: white;
  text-align: center;
  text-shadow: 0 0 6.8px #0038FF;
  font-size: 4vw;
}
@media (width > 480px) {
  .modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .servicio,
  .modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .servicio {
    font-size: 22px;
  }
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .descripcion > p, .modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .descripcion,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .descripcion > p,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .descripcion {
  color: #fff;
  line-height: 1.4;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 3.5vw;
  margin-bottom: 0;
}
@media (width > 480px) {
  .modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .descripcion > p, .modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .descripcion,
  .modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .descripcion > p,
  .modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .descripcion {
    font-size: 14px;
  }
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .descripcion,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .descripcion {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 20vw;
  height: 100%;
  padding-bottom: 0.4rem;
  font-size: 3.5vw;
}
@media (width > 480px) {
  .modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .descripcion,
  .modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .descripcion {
    -webkit-line-clamp: 6;
    line-clamp: 6;
    font-size: 14px;
    max-height: 118px;
  }
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .blockOfertaPrecio,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .blockOfertaPrecio {
  padding: 2vw;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: rgba(128, 128, 128, 0.1);
}
@media (width > 480px) {
  .modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .blockOfertaPrecio,
  .modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .blockOfertaPrecio {
    padding: 10px;
  }
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .blockOfertaPrecio > p.pAntes,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .blockOfertaPrecio > p.pAntes {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.54);
  font-style: italic;
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .blockOfertaPrecio > p.pAntes span,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .blockOfertaPrecio > p.pAntes span {
  text-decoration: line-through;
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .blockOfertaPrecio > .precio,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .blockOfertaPrecio > .precio {
  color: white;
  font-size: 7vw;
  text-shadow: 0 0 10.8px #0038FF;
  /*           -webkit-text-stroke-width: 0.5px;
            -webkit-text-stroke-color: #0038FF; */
  font-weight: 600;
}
@media (width > 480px) {
  .modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .blockOfertaPrecio > .precio,
  .modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .blockOfertaPrecio > .precio {
    font-size: 32px;
  }
}
.modal-body .ulSectioned li .contentImgVertical .contentInfo > div > .blockOfertaPrecio > .precio > span,
.modal-body .ulSectioned li .contentImgUnoUno .contentInfo > div > .blockOfertaPrecio > .precio > span {
  font-size: 9px;
  padding-right: 0.5rem;
}

.modal-body .ulSectioned li .contentImgVertical {
  display: block;
  aspect-ratio: 9/16;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.modal-body .ulSectioned li:has(> .contentImgUnoUno),
.modal-body .ulSectioned li:has(> .contentImgVertical) {
  display: block;
  padding: 10px;
}

.modal-body .ulSectioned li.redes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.modal-body .ulSectioned li.redes > span {
  display: flex;
  flex: 1 1 76px;
}
.modal-body .ulSectioned li.redes > span > p {
  color: #616161;
  font-size: 10px;
  margin-bottom: 0;
}
.modal-body .ulSectioned li.redes > span:hover p, .modal-body .ulSectioned li.redes > span:active p {
  color: #000;
}
.modal-body .ulSectioned li.redes span.red {
  padding: 0.1rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.modal-body .ulSectioned li.redes span.red i {
  color: white;
  font-size: 26px;
}
.modal-body .ulSectioned li.redes span.red.telegram {
  background-color: #2AABEE;
  padding-bottom: 8px;
}
.modal-body .ulSectioned li.redes span.red.whatsapp {
  background-color: #60D669;
}
.modal-body .ulSectioned li.redes span.red.x {
  background-color: #000;
}
.modal-body .ulSectioned li.redes span.red.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.modal-body .ulSectioned li.redes span.red.mas i {
  color: #000;
}

/* modal pais */
.modal-body > .textPasos,
.modal-body > .textPais {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 10px 16px 14px 16px;
  border-bottom: 1px solid rgb(228, 228, 228);
}
.modal-body > .textPasos small,
.modal-body > .textPais small {
  color: #A6A6A6;
}
.modal-body > .textPasos p,
.modal-body > .textPais p {
  margin-bottom: 0;
}

.modal-body > .textPasos {
  border-bottom: unset;
}

.modal-body .ulSectioned.pais > li {
  border: none;
}
.modal-body .ulSectioned.pais > li > span.pais div {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}
.modal-body .ulSectioned.pais > li > span.pais div img {
  border-radius: 3px;
  width: 100%;
  height: 30px;
  object-position: center;
  object-fit: cover;
}
.modal-body .ulSectioned.pais > li > span.pais p {
  color: #616161;
  font-size: 10px;
  line-height: 1.1;
  margin-bottom: 0;
  margin-bottom: 0;
}

/* select filter bootstrap */
/* .groupSelected{
    & > .iconLeft{
        z-index: 4;
    }
    select.selectpicker {

        & + button{

            padding-left: 38px;
            height: 33.67px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            background-color: white;
            & + .dropdown-menu > .inner{
                overflow-y: auto!important;
                max-height: 150px!important;
            }
            &:focus,
            &:focus-visible{
              outline: none!important;
            border: none!important;

            }
        }
        .bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle{
            outline: none!important;
        }


    }
} */
.innerModalBody .crmTags {
  margin-top: -4px;
}
.innerModalBody .crmTags .listadoTags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.innerModalBody .crmTags .listadoTags li {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1em;
  border: solid 1px #D8D8D8;
  border-radius: 0.3em;
  background: #D8D8D8;
  gap: 0.5rem;
}
.innerModalBody .crmTags .listadoTags li i {
  margin-left: 0.5em;
  padding-left: 0.5em;
  font-size: 0.7em;
  cursor: pointer;
}
.innerModalBody .crmTags .listadoTags li.tagReset {
  background: none;
}
.innerModalBody .crmTags .listadoTags li.tagReset:hover {
  color: white;
  background-color: #0038FF;
}

.blockContent {
  padding: 0.5rem;
  border-radius: 0.5em;
  border: solid 1px #e2e2e2;
  gap: 0.5rem;
  overflow: hidden;
}

.btnCont {
  border-radius: 5px;
  border: 1px solid #D9D9D9;
  height: 40px;
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: all 200ms ease;
}
.btnCont p {
  text-wrap: nowrap;
  margin-bottom: 0;
  color: #000;
  text-overflow: ellipsis;
  padding: 0.3rem;
  overflow: hidden;
  font-size: 11px;
}
@media (min-width: 600px) {
  .btnCont p {
    font-size: 12px;
  }
}
.btnCont.active, .btnCont:hover, .btnCont:active {
  border: 1px solid #0038FF;
  background: rgba(196, 209, 255, 0.1);
}

.modal-footer.acordionFot {
  border-radius: 0.5rem 0.5rem 0 0;
  box-shadow: 0px -4px 8px #ced4da;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.modal-footer.acordionFot .titleClick {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin: 0;
  cursor: pointer;
  margin-bottom: 0.8rem;
  overflow: hidden;
  padding-right: 2px;
}
.modal-footer.acordionFot .titleClick .tag {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
}
.modal-footer.acordionFot .titleClick .tag i {
  color: #0038FF;
  background-color: #F2F5FF;
  font-size: 36px;
  border-radius: 100px;
  overflow: hidden;
  padding: 4px;
  flex: 0 0 36px;
  box-sizing: content-box;
}
.modal-footer.acordionFot .titleClick .tag p {
  margin-bottom: 0;
}
.modal-footer.acordionFot .titleClick .tag p .num {
  color: #0038FF;
  font-size: 25px;
  font-weight: 600;
  line-height: 0.8;
  margin-right: 0.3rem;
}
.modal-footer.acordionFot .titleClick .openClose {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.modal-footer.acordionFot .titleClick .openClose > i {
  font-size: 12px;
  color: #000;
  margin-top: 2px;
}
.modal-footer.acordionFot .titleClick .openClose > p {
  font-size: 10px;
  margin-bottom: 0;
}
.modal-footer.acordionFot .titleClick .openClose > p.pOcultar {
  display: none;
}

.modal-footer.acordionFot .dropDownFot {
  overflow: hidden;
  display: grid;
  transition: grid-template-rows 200ms ease;
  grid-template-rows: 0fr;
  width: 100%;
  position: relative;
  margin: 0;
}
.modal-footer.acordionFot .dropDownFot.active {
  grid-template-rows: 1fr;
}

.modal-footer.acordionFot .dropDownFot .inner {
  overflow: hidden;
}
.modal-footer.acordionFot .dropDownFot .inner .tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.8rem;
}
.modal-footer.acordionFot .dropDownFot .inner .tags .tag {
  border-radius: 3px;
  background: rgba(0, 56, 255, 0.05);
  height: 28px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  gap: 0.4rem;
  color: #0038FF;
  padding: 0 0.5rem;
  text-wrap-mode: nowrap;
}
.modal-footer.acordionFot .dropDownFot .inner .tags .tag i {
  margin-top: 3px;
}
.modal-footer.acordionFot .dropDownFot .inner .tags .tag p {
  margin-bottom: 0;
  color: #0038FF;
}

.scrollBody .modal-content {
  max-height: 95vh;
}
@media (min-width: 600px) {
  .scrollBody .modal-content {
    max-height: 90vh;
  }
}
.scrollBody .modal-content {
  /*    @media (min-width:$tamMd){
          max-height: 70vh;
     } */
}
.scrollBody .modal-content .modal-body {
  overflow-y: auto;
  flex: 1;
}
.scrollBody .modal-content .modal-footer {
  flex: 0;
}

.modalBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background: rgba(0, 0, 0, 0.54);
  z-index: 999; /*pointer-events:none;*/
}

.modalInfo {
  max-width: 600px;
  display: grid;
  grid-gap: 0.5em;
  padding: 0.5em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}
.modalInfo strong {
  font-size: 1.2em;
}
.modalInfo .titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modalInfo .titulo .btns {
  display: flex;
  gap: 0.5em;
  font-size: 0.7em;
}
.modalInfo .txt {
  display: block;
}
.modalInfo .contenido {
  display: block;
  border: solid 1px #e2e2e2;
}
.modalInfo .contenido img, .modalInfo .contenido video {
  width: 100%;
}

.modalXtra {
  position: relative;
  display: inline-block;
}
.modalXtra .mxCont {
  position: absolute;
  bottom: 0;
  right: 100%;
  min-width: 200px;
  display: block;
  padding: 0.7em;
  font-size: 11px;
  text-align: left;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  z-index: 5;
}
.modalXtra .mxCont .mxClose {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #0038FF;
  font-size: 0.7em;
}

.ballAviso {
  position: relative;
}

.ball {
  position: absolute;
  top: -10px;
  right: -5px;
  min-width: 18px;
  min-height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  line-height: 0;
  border-radius: 50%;
  background: rgb(51, 184, 41);
}

.pagination {
  margin: 0;
  gap: 0.5em;
}
.pagination a {
  border-radius: 0.3em;
}

.page-item.active .page-link {
  background: #0038FF;
}

.btn, .btn-primary, button.btn-primary {
  border-radius: 0.3em;
}

/* Link Creator */
.header_linkcreator {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1em 70px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}
.header_linkcreator .options_creator {
  text-align: right;
}
.header_linkcreator .options_creator .btn_crearlink i {
  background-color: #38873A;
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
}
.header_linkcreator .options_creator .btn_creator i {
  color: #0038FF;
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
}

.linkcreator .enlace .icon-link-creator {
  border: 1px solid #e2e2e2;
  padding: 6px;
  border-radius: 5px;
  display: inline-block;
  float: left;
  margin-right: 8px;
}
.linkcreator .enlace p {
  display: inline-block;
  float: left;
  margin-bottom: 0px;
}
.linkcreator .enlace .ico_enlace {
  display: block;
  float: right;
  right: 2.5%;
}
.linkcreator .enlace .ico_enlace i {
  border: 1px solid #e2e2e2;
  background-color: #e2e2e2;
  padding: 8px;
  border-radius: 5px;
  margin-top: 0px;
  display: inline-block;
  cursor: pointer;
}
.linkcreator .enlace .ico_enlace i:hover {
  color: #fff;
  border-color: #0038FF;
  background: #0038FF;
  padding: 8px;
  border-radius: 5px;
  margin-top: 0px;
  display: inline-block;
  cursor: pointer;
}
.linkcreator .enlace .ico_enlace i.selected {
  color: #fff;
  border-color: #0038FF;
  background: #0038FF;
  padding: 8px;
  border-radius: 5px;
  margin-top: 0px;
  display: inline-block;
  cursor: pointer;
}
.linkcreator .cont_datos {
  display: block;
  width: 100%;
  float: left;
}
.linkcreator .cont_datos .separadordatos {
  margin-top: 16px;
  padding: 0px;
}
.linkcreator .cont_datos small {
  margin-top: 12px;
  display: inline-block;
}
.linkcreator .table_creator {
  margin-top: 16px;
  display: block;
}

@media (max-width: 600px) {
  .header_linkcreator {
    grid-template-columns: 1fr !important;
  }
  .header_linkcreator .txt {
    width: 100%;
    display: block;
    float: left;
  }
  .header_linkcreator .options_creator .btn_crearlink {
    display: inline-block;
    float: left;
    width: 49%;
    padding: 0.375rem 0.2rem;
  }
  .header_linkcreator .options_creator .btn_creator {
    display: inline-block;
    float: right;
    width: 49%;
    padding: 0.375rem 0.2rem;
  }
  .txt_enlace a {
    width: 220px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
  }
  .linkcreator .enlace .ico_enlace {
    position: absolute;
    right: 6%;
    background-color: #fff;
  }
}
.linkcreator small {
  margin-top: 12px;
  display: inline-block;
  margin-bottom: 16px;
}

.linkCreatorItem {
  display: grid;
  grid-gap: 1em;
}

.linkCreatorItemPrevio {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1em;
}
.linkCreatorItemPrevio .icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  border: solid 1px #ced4da;
  border-radius: 0.3em;
}
.linkCreatorItemPrevio .enlace {
  position: relative;
  display: grid;
  overflow-x: hidden;
}
.linkCreatorItemPrevio .enlace::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  z-index: 1;
}
.linkCreatorItemPrevio .btns {
  display: flex;
  gap: 0.5em;
}

.linkCreatorItemDetalle {
  display: grid;
}
.linkCreatorItemDetalle form {
  display: grid;
}

.siteCreatorItem {
  display: grid;
  grid-gap: 1em;
}

.siteCreatorItemPrevio {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1em;
}
.siteCreatorItemPrevio .manejador {
  display: inline-flex;
  align-items: center;
}
.siteCreatorItemPrevio .manejador:hover {
  background: #E2F0FC;
  cursor: pointer;
}
.siteCreatorItemPrevio .manejador:active {
  background: #E2F0FC;
  cursor: move;
}
.siteCreatorItemPrevio .manejador img {
  width: 100%;
}
.siteCreatorItemPrevio .img {
  width: 40px;
  height: 40px;
  display: block;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
  object-fit: cover;
  overflow: hidden;
}
.siteCreatorItemPrevio .img img {
  width: 100%;
  display: block;
}
.siteCreatorItemPrevio .enlace {
  position: relative;
  display: grid;
  overflow-x: hidden;
}
.siteCreatorItemPrevio .enlace::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  z-index: 1;
}
.siteCreatorItemPrevio .btns {
  display: flex;
  gap: 0.5em;
}

.siteCreatorItemDetalle {
  display: grid;
  margin-top: 1em;
}
.siteCreatorUsuario {
  position: relative;
  display: grid;
  grid-gap: 1em;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
}
.siteCreatorUsuario .xtraBtn {
  position: absolute;
  top: 1em;
  right: 1em;
}
.siteCreatorUsuario .img {
  position: relative;
  width: 140px;
  height: 140px;
  display: block;
  margin: auto;
  object-fit: cover;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: #fff;
  overflow: hidden;
}
.siteCreatorUsuario .img button {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  z-index: 10;
}
.siteCreatorUsuario .img img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  object-position: center;
}
.siteCreatorUsuario .form {
  display: grid;
  grid-gap: 1em;
  justify-content: flex-start;
}

.bgText {
  padding: 3px;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.8);
}

.siteCreatorFiltro {
  display: grid;
  grid-gap: 1em;
}
.siteCreatorFiltro .btn {
  width: 100%;
}

.nogeo, .geo {
  display: grid;
}

@media screen and (min-width: 768px) {
  .siteCreatorUsuario {
    grid-template-columns: auto 1fr;
  }
  .siteCreatorFiltro {
    grid-template-columns: 1fr 1fr auto;
    align-items: flex-end;
  }
}
/* Site Creator */
.sitecreator .tablaCont .tbPais {
  text-align: right;
}
.sitecreator .tablaCont .tbPais img {
  margin-bottom: 8px;
}

.vermas {
  display: inline-block;
  border: 1px solid #0038FF;
  border-radius: 0.3em;
  margin: 8px;
  padding: 2px 0px 1px 6px;
  font-style: normal;
}
.vermas .icon-mas {
  background-color: #0038FF;
  color: #fff;
  padding: 3px 4px;
  border-radius: 0px 3px 3px 0px;
}
.vermas:hover {
  color: #000;
  border-color: #000;
}
.vermas:hover .icon-mas {
  background-color: #000;
}

.btnsColRow {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 1em;
}
@media screen and (min-width: 600px) {
  .btnsColRow {
    flex-direction: row;
  }
}

.max500 {
  width: 100%;
  max-width: 500px;
}

.btnBorderGrey {
  height: 40px;
  border: 1px solid #D8D8D8;
  width: 100%;
  border-radius: 5px;
  position: relative;
  background-color: #fff;
  transition: background-color 400ms ease;
}
.btnBorderGrey > .imgRight {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  width: 16px;
  height: 16px;
}
.btnBorderGrey > span:has(.imgLeft), .btnBorderGrey > .imgLeft {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  width: 16px;
  height: 16px;
  height: fit-content;
}
.btnBorderGrey > span:has(.imgLeft) {
  width: max-content;
}
.btnBorderGrey > .telegram {
  background-color: #229ED9;
  width: 16px;
  height: 16px;
  border-radius: 100px;
  padding: 2px 4px 3px 2px;
}
.btnBorderGrey > .link {
  width: 22px;
  height: 22px;
}
.btnBorderGrey:active, .btnBorderGrey:hover {
  background-color: #f5f5f5;
}

.redesList {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.redesList li {
  position: relative;
  padding: 0.5em;
  text-align: center;
}
.redesList li i {
  display: block;
  font-size: 2.3em;
}
.redesList li i:active, .redesList li i:hover {
  color: #000;
  cursor: pointer;
}
.redesList li small {
  font-size: 0.7em;
}
.redesList li .num {
  position: absolute;
  top: -2px;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #478845;
  border-radius: 2em;
  background: #E5F9E7;
}

.redTelegram {
  color: #4195D5;
}

.redFacebook {
  color: #4287C3;
}

.redInstagram {
  color: #B55C9E;
}

.redTwitter {
  color: #1E1E1E;
}

.redWeb {
  color: #F3A544;
}

.redOtro {
  color: #7D7D7D;
}

.traficoNuevo {
  display: block;
  margin: 1em 0;
}
.traficoNuevo .campo {
  position: relative;
}
.traficoNuevo .campo i {
  position: absolute;
  top: 5px;
  left: 0.5em;
  font-size: 22px;
}
.traficoNuevo .campo input {
  width: 100%;
  margin-bottom: 1em;
  padding-left: 40px;
}

.traficoActivo {
  display: block;
}
.traficoActivo .traficoActivoItem {
  display: flex;
  gap: 1em;
  margin: 1em 0;
}
.traficoActivo .traficoActivoItem .campo {
  position: relative;
  flex: 1;
}
.traficoActivo .traficoActivoItem .campo i {
  position: absolute;
  top: 5px;
  left: 0.5em;
  font-size: 22px;
}
.traficoActivo .traficoActivoItem .campo input {
  width: 100%;
  padding-left: 40px;
  background: #fff;
}
.traficoActivo .traficoActivoItem .btn {
  width: auto !important;
}
.traficoActivo .traficoActivoItem:last-child {
  margin: 0 0;
}

.UsuarioSub {
  display: grid;
  grid-gap: 0.5em;
  margin-top: 1em;
}
.UsuarioSub .UsuarioSubItem {
  display: flex;
  gap: 1em;
  margin: 0 0 1em 0;
}
.UsuarioSub .UsuarioSubItem .campo {
  position: relative;
  flex: 1;
  align-content: center;
  padding: 0.5em;
  background: #ECECEC;
}
.UsuarioSub .UsuarioSubItem .btn {
  width: auto !important;
}
.UsuarioSub .UsuarioSubItem:last-child {
  margin: 0 0;
}

label {
  margin-bottom: 0.5em;
}

.formUp {
  display: grid;
  grid-gap: 0.5em;
}
.formUp input {
  display: block;
  padding: 0.5em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
}

button:disabled,
button[disabled] {
  color: #fff;
  border: none;
  background: rgb(163, 163, 163) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

input[type=date] {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

.boxBuscadorMd {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1em;
}
.boxBuscadorMd input {
  flex: 1;
}

.error, .errorBox {
  color: #C86D6D;
  border: solid 1px #FF8A8A;
  background: #FFD1D1;
  border-radius: 5px;
}

.errorBox {
  display: block;
  margin: 0 0 0.5em 0;
  padding: 0.5em;
}

.okBox {
  display: block;
  padding: 0.5em;
  color: #64A76A;
  border: solid 1px #90EF99;
  background: #E5F9E7;
  border-radius: 5px;
}

.listCheck {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: solid 1px #e2e2e2;
}
.listCheck li {
  display: flex;
  gap: 0.5em;
  align-items: center;
  padding: 0.3em 0;
  border-bottom: solid 1px #e2e2e2;
}
.listCheck li label {
  margin-top: 5px;
}

input.checkBg[type=checkbox] {
  appearance: none;
  position: relative;
  width: 22px;
  height: 22px;
  cursor: pointer;
  background: url("/img/iconos/checkOFF.svg") no-repeat left center;
}

input.checkBg[type=checkbox]:checked {
  background: url("/img/iconos/checkON.svg") no-repeat left center;
}

input.radioBg[type=radio], input.radioBg[type=checkbox] {
  appearance: none;
  position: relative;
  width: 40px;
  height: 22px;
  cursor: pointer;
  background: url("/img/iconos/checkOFF.svg") no-repeat left center;
}

input.radioBg[type=radio]:checked, input.radioBg[type=checkbox]:checked {
  background: url("/img/iconos/checkON.svg") no-repeat left center;
}

/* group input con icono Right */
.inputIconRight {
  position: relative;
}
.inputIconRight > span {
  padding: 4px;
  cursor: pointer;
}
.inputIconRight > span, .inputIconRight > i {
  position: absolute;
  top: 4px;
  right: 10px;
  font-size: 12px;
}

/* select/option js vanilla */
/* /label form texto// */
.groupSelectBasic .labelForm .textLabelForm {
  margin-bottom: 5px;
  line-height: 2em;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.maxH200 {
  max-height: 200px;
  overflow-y: auto;
}

.groupSelectBasic {
  position: relative;
  z-index: 5;
}
.groupSelectBasic.active .bSelect i {
  transform: rotate(-180deg);
}
.groupSelectBasic.active .bOptions {
  display: flex;
  opacity: 0;
  z-index: 10;
  animation: fadeInUp 0.2s both;
  border-radius: 0.25rem;
}
.groupSelectBasic .bSelect {
  display: flex;
  align-items: center;
  padding-right: 15px;
  cursor: pointer;
  justify-content: space-between;
  width: 100%;
  border: 1px solid #e9e9e9;
  height: 33px;
  border-radius: 3px;
  padding: 0.375rem 0.75rem;
  gap: 0.4rem;
}
.groupSelectBasic .bSelect .bBtnText {
  text-wrap-mode: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  flex: 1;
  overflow: hidden;
  line-height: 100%;
  line-height: 33px;
  margin-bottom: 0;
}
.groupSelectBasic .bSelect > i {
  font-size: 12px;
  transition: 0.1s;
  transform-origin: center;
  flex: 0;
  color: #1C1B1F;
}
.groupSelectBasic .bSelect > span.btnCloseOptions {
  display: none;
}
.groupSelectBasic .bSelect > span.btnCloseOptions i {
  font-size: 10px;
  font-weight: 600;
}
.groupSelectBasic .bOptions {
  border: 1px solid #e9e9e9;
  border-radius: 0.25rem;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 8px;
  border-radius: 8px;
  background: #fff;
  animation: fadeInDown 0.25s both;
  flex-direction: column;
  z-index: -1;
  padding: 0.4rem 0;
}
.groupSelectBasic .bOptions ul {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 4px;
  padding: 0 8px;
  margin-bottom: 0;
}
.groupSelectBasic .bOptions ul .bOption {
  display: flex;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 24px;
  z-index: 1;
  cursor: pointer;
  gap: 0.5em;
  overflow: hidden;
}
.groupSelectBasic .bOptions ul .bOption.active {
  background-color: #ebebeb;
}
.groupSelectBasic .bOptions ul .bOption.active i {
  opacity: 1;
  font-size: 12px;
  padding-right: 4px;
}
.groupSelectBasic .bOptions ul .bOption:hover {
  background-color: #ebebeb;
}
.groupSelectBasic .bOptions ul .bOption .bOptionText {
  display: block;
  align-items: center;
  text-wrap-mode: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  color: black;
  z-index: 0;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
}
.groupSelectBasic .bOptions ul .bOption i {
  opacity: 0;
  font-size: 16px;
  color: black;
  flex: 0;
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0, -15px, 0);
    z-index: -1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    z-index: 1;
  }
}
@media screen and (min-width: 768px) {
  .boxBuscadorMd {
    max-width: 50%;
  }
}
.otp-input {
  width: 50px;
  height: 50px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  border: 2px solid #e9e9e9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.otp-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.otp-input.filled {
  border-color: #0d6efd;
  background-color: #f8f9fa;
}

/*   input file customizado con icono  a la derecha */
.formFileIcon {
  position: relative;
  overflow: hidden;
  background-color: white;
  border-radius: 4px;
}
.formFileIcon label {
  position: absolute;
  right: 0;
  top: 0px;
  bottom: 0px;
  right: 0;
  cursor: pointer;
  margin: 0;
}
.formFileIcon label > span {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 8px 0.8rem 8px 0;
}
.formFileIcon label > span i {
  border-left: 1px solid #E2E8F0;
  padding-left: 0.7rem;
  font-size: 14px;
}
.formFileIcon label > span:hover i {
  color: #0038FF;
}
.formFileIcon input[type=file]::file-selector-button {
  opacity: 0;
  display: none;
}
.formFileIcon input {
  height: 33px;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 10.5px 44px 10.5px 12px;
  width: 100%;
  font-size: 9px;
}

/* tags de archivos seleccionados */
.fileSelect {
  display: flex;
  justify-content: space-between;
  background-color: #D9D9D9;
  color: #303437;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  align-items: center;
  flex: 1;
  margin-bottom: 0;
  height: 33px;
  border-radius: 4px;
  padding: 6px 12px;
  flex: 0 0 33px;
}
.fileSelect p {
  width: calc(100% - 20px);
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowtap;
  margin-bottom: 0;
  font-size: 9px;
  text-wrap: nowrap;
}
.fileSelect i {
  cursor: pointer;
}

/*   FIN input file customizado con icono  a la derecha */
.contScroll::-webkit-scrollbar {
  height: 5px;
}

.contScroll::-webkit-scrollbar-thumb {
  background: #0038FF;
  border-radius: 4px;
}

.contScroll::-webkit-scrollbar-thumb:active {
  background-color: #000;
}

.contScroll::-webkit-scrollbar-thumb:hover {
  background: #000;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.contScroll::-webkit-scrollbar-track {
  background: #e1e1e1;
  border-radius: 4px;
}

.contScroll::-webkit-scrollbar-track:hover,
.contScroll::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

.contScrollV::-webkit-scrollbar {
  width: 5px;
}

.contScrollV::-webkit-scrollbar-thumb {
  background: #0038FF;
  border-radius: 4px;
}

.contScrollV::-webkit-scrollbar-thumb:active {
  background-color: #000;
}

.contScrollV::-webkit-scrollbar-thumb:hover {
  background: #000;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.contScrollV::-webkit-scrollbar-track {
  background: #e1e1e1;
  border-radius: 4px;
}

.contScrollV::-webkit-scrollbar-track:hover,
.contScrollV::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

.pageErrorCont {
  max-width: 450px;
  display: grid;
  grid-gap: 1em;
  margin: 2em auto;
}
.pageErrorCont .errorImg {
  width: 100%;
}

.scInicio {
  display: flex;
}

.scInicioItems {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

.scInicioItem {
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.scInicioItem .titulo {
  margin: 0;
  padding: 0;
  font-size: 1em;
}
.scInicioItem .img img {
  width: 100%;
}
.scInicioItem .txt {
  height: 100%;
}
.scInicioItem .txt p {
  margin: 0;
}
.scInicioItem .btns {
  display: flex;
  align-items: flex-end;
  text-align: center;
}
.scInicioItem .btns .btn {
  width: 100%;
}

.filtroProvincias {
  display: flex;
  gap: 1em;
}

.scLogoCarga {
  display: flex;
  gap: 1em;
  align-items: center;
}

.scLogo {
  width: 150px;
  height: 150px;
  padding: 5px;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
  overflow: hidden;
}
.scLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.scBgCarga {
  display: grid;
  grid-gap: 1em;
  align-items: center;
}

.scBg {
  width: 100%;
  height: 150px;
  padding: 5px;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
  overflow: hidden;
}
.scBg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.casasSelect {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}
.casasSelect .casaItem {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
  color: #0038FF;
  text-align: center;
  border: solid 1px #0038FF;
  border-radius: 0.3em;
}
.casasSelect .casaItem:hover, .casasSelect .casaItem:active {
  color: #000;
  border-color: #000;
  cursor: pointer;
}
.casasSelect .active {
  color: #fff;
  border-color: #000;
  background: #000;
}
.casasSelect .active:hover, .casasSelect .active:active {
  color: #fff;
  border-color: #0038FF;
  background: #0038FF; /*cursor:not-allowed;*/
}

.scList {
  display: grid;
  padding-top: 1em;
  border-top: solid 1px #e2e2e2;
}

.scItem {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1em;
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
}
.scItem .manejador {
  display: inline-flex;
  align-items: center;
}
.scItem .manejador:hover {
  background: #E2F0FC;
  cursor: pointer;
}
.scItem .manejador:active {
  background: #E2F0FC;
  cursor: move;
}
.scItem .manejador img {
  width: 100%;
}
.scItem .img {
  width: 40px;
  height: 40px;
  display: block;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
  object-fit: cover;
  overflow: hidden;
}
.scItem .img img {
  width: 100%;
  height: 100%;
  display: block;
}
.scItem .site {
  position: relative;
  display: grid;
  overflow-x: hidden;
}
.scItem .site::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  z-index: 1;
}
.scItem .btns {
  display: flex;
  gap: 0.5em;
}
.scItem .btns form {
  display: flex;
}

.scTop, .scTopNuevo {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}
.scTop::before, .scTopNuevo::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 22px;
  height: 22px;
  background: url("/img/entorno/scTop.svg") no-repeat left top;
  background-size: cover;
  z-index: 1;
}

.scTopNuevo .datos {
  display: grid;
  grid-gap: 1em;
}
.scItemNuevo {
  display: flex;
  justify-content: center;
  padding: 1em;
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
}

.colorSelect {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1em;
  align-items: center;
}
.colorSelect .scColorList {
  display: flex;
  gap: 1em;
  margin: 1em 0;
  padding: 0;
  list-style: none;
}
.colorSelect .scColorList li {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.16));
}
.colorSelect .scColorList .activo {
  filter: drop-shadow(0px 1px 5px #848484);
}
.colorSelect .scColorList .scColor1 {
  background: rgb(78, 78, 255);
}
.colorSelect .scColorList .scColor2 {
  background: rgb(255, 78, 78);
}
.colorSelect .scColorList .scColor3 {
  background: rgb(255, 220, 78);
}
.colorSelect .scColorList .scColor4 {
  background: rgb(126, 226, 126);
}
.colorSelect .scColorList .scColor5 {
  background: rgb(159, 126, 226);
}
.colorSelect .scColorList .scColor6 {
  background: rgb(255, 255, 255);
}
.colorSelect .scColorList .scColor7 {
  background: rgb(0, 0, 0);
}
.colorSelect .colorPick {
  position: relative;
}

.minSC {
  width: 300px;
  display: grid;
  grid-gap: 1em;
  color: #fff;
  font-size: 0.9em;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 1em;
  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.16));
  overflow: hidden;
}
.minSC .minSChead {
  position: relative;
  display: grid;
  grid-gap: 1em;
  padding: 1em;
  box-shadow: 0 2px 4px rgba(189, 189, 189, 0.1);
}
.minSC .minSChead::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(0, 0, 0, 0.75);
}
.minSC .minSChead::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 1;
}
.minSC .minSChead .minSCheadCont {
  display: grid;
  grid-gap: 0.5em;
  z-index: 5;
}
.minSC .minSChead .minSCheadCont .minSCavatar {
  width: 50px;
  height: 50px;
  display: flex;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}
.minSC .minSChead .minSCheadCont .minSCavatar img {
  width: 100%;
  height: 100%;
  display: block;
}
.minSC .minSChead .minSCheadCont .minSCtxt {
  font-size: 0.85em;
}
.minSC .minSCbody {
  display: grid;
  grid-gap: 0.5em;
  padding: 1em;
}
.minSC .minSCbody .minSClist {
  display: grid;
  grid-gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.minSC .minSCbody .minSClist li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 1em 0;
  text-align: center;
  color: #000;
  border-bottom: solid 1px rgb(225, 225, 225);
}
.minSC .minSCbody .minSClist li .minSClogo {
  width: 60px;
  height: 30px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid rgb(225, 225, 225);
}
.minSC .minSCbody .minSClist li .minSCbtn {
  padding: 0.5em 1em;
  border-radius: 10px;
  color: #fff;
  background: #ff4e4e;
}
.minSC .minSCfooter {
  display: block;
  margin: 0 auto 1em auto;
  color: #000;
  font-size: 0.8em;
  text-align: center;
}

.minColorBlack {
  background: #000 !important;
}
.minColorBlack .minSCbtn {
  color: #fff !important;
}
.minColorBlack li {
  color: #fff !important;
  border-bottom: solid 1px rgba(255, 255, 255, 0.44) !important;
}
.minColorBlack .minSClogo {
  border: 1px solid #707070 !important;
}
.minColorBlack .minSCfooter {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .scInicio {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }
  .scInicioItems {
    display: grid;
    grid-template-columns: 300px 300px;
    grid-gap: 1em;
  }
  .scInicioItem .titulo {
    font-size: 1.3em;
  }
  .scTopNuevo .datos {
    display: flex;
    gap: 1em;
  }
  .scTopNuevo .datos .site {
    flex: 1;
  }
  .scTopNuevo .datos .btn {
    align-items: center;
  }
  .casasSelect {
    grid-template-columns: repeat(auto-fill, 100px);
  }
}
.wizard {
  position: sticky;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin: 0 -1em;
  padding: 1em;
  background: rgba(255, 255, 255, 0.95);
  z-index: 10;
}

.wizardNav {
  display: flex;
  padding: 0.52em;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: #fff;
}
.wizardNav ul {
  display: flex;
  gap: 1em;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  list-style: none;
}
.wizardNav ul li {
  display: grid;
  justify-items: center;
  align-content: flex-start;
  gap: 0.5em;
  padding-bottom: 0.5em;
  color: #7E7E7E;
}
.wizardNav ul li .num {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #7E7E7E;
  border-radius: 2em;
}
.wizardNav ul li:hover, .wizardNav ul li:active {
  cursor: not-allowed;
}
.wizardNav ul .current {
  font-weight: bold;
  border-bottom: solid 2px #000;
}
.wizardNav ul .current .num {
  color: #fff;
  border: solid 1px #000;
  background: #000;
}
.wizardNav ul .active {
  color: #0038FF;
}
.wizardNav ul .active .num {
  color: #0038FF;
  border-color: #0038FF;
}
.wizardNav ul .active:hover, .wizardNav ul .active:active {
  color: #000;
  cursor: pointer;
}
.wizardNav ul .active:hover .num, .wizardNav ul .active:active .num {
  color: #fff;
  border-color: #000;
  background: #000;
}

.wizardEnd {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin-top: 2em;
  padding: 1em;
  border-top: solid 1px #e2e2e2;
}

.notificacion {
  display: grid;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-left: solid 3px #e2e2e2;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
.notificacion .previo {
  color: #C6C6C6;
  font-size: 0.8em;
}
.notificacion .header {
  display: flex;
  gap: 1em;
  align-items: start;
}
.notificacion .header .titulo {
  flex: 1;
}
.notificacion .header .xtras {
  display: flex;
  justify-content: end;
  gap: 0;
  font-size: 0.7em;
}
.notificacion .header .xtras i {
  padding: 0 0.5em;
  border-right: solid 1px #e2e2e2;
}
.notificacion .header .xtras i:last-child {
  padding-right: 0;
  border: none;
}
.notificacion .body {
  margin-top: 0.5em;
}

.notNueva {
  border-color: #0038FF;
}
.notNueva .icon-email {
  color: #009E0D !important;
}

.notificaciones {
  display: grid;
  grid-gap: 1em;
}
.notificaciones .notificacion .header .xtras {
  font-size: 1em;
}

.promoModalBg {
  position: fixed;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border-radius: 0.5em;
  background: rgba(0, 0, 0, 0.75);
  z-index: 101;
}

.promoModal {
  max-width: 400px;
  min-width: 300px;
  display: grid;
  grid-gap: 0.5em;
  padding: 1em;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0 0px 15px #2200FF;
}
.promoModal .header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.promoModal .body {
  display: grid;
  grid-gap: 1em;
}
.promoModal .body .img img {
  width: 100%;
}
.promoModal .footer .btn {
  width: 100%;
  padding: 1em;
}

.awardLi {
  column-count: 2;
}

.awardItem {
  display: grid;
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
}
.awardItem .header {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: auto 1fr auto;
}
.awardItem .header .icono {
  display: flex;
  align-items: center;
  padding-right: 0.5em;
  font-size: 2em;
  border-right: solid 1px #e2e2e2;
}
.awardItem .header .contenido {
  display: grid;
  grid-gap: 0.3em;
}
.awardItem .header .contenido strong {
  font-size: 1em;
}
.awardItem .header .contenido .votoOK {
  color: #2EAA32;
}
.awardItem .header .toggle {
  display: flex;
  align-items: center;
}
.awardItem .contenedor {
  display: grid;
  padding: 1em 0 0 0;
}
.awardItem .contenedor .awardLiTipsters {
  display: grid;
  margin: 1em 0 0 0;
  padding: 0;
  list-style: none;
}
.awardItem .contenedor .awardLiTipsters li {
  display: flex;
  justify-content: space-between;
  padding: 0.7em 0;
  border-bottom: dashed 1px #e2e2e2;
}
.awardItem .contenedor .awardLiTipsters li:first-child {
  padding-top: 0;
}
.awardItem .contenedor .awardLiTipsters li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.awardItem .contenedor .awardLiTipsters .votoOK {
  color: #2EAA32;
}
.awardItem .visible {
  display: grid;
}
.awardItem .oculto {
  display: none;
}

@media screen and (min-width: 768px) {
  .awardLi {
    column-count: 3;
  }
}
@media screen and (min-width: 1000px) {
  .awardLi {
    column-count: 4;
  }
}
.contVideo {
  display: flex;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  overflow: auto;
}
.contVideo video {
  width: 100%;
}

.ayudaBG {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background: rgba(2, 30, 99, 0.61);
  z-index: 999;
}

.ayudaMain {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  z-index: 9999;
}

.ayudaCurrent, .ayudaCurrentEnd {
  z-index: 999;
  border: solid 2px rgb(0, 22, 227);
  background: #fff;
}
.ayudaCurrent::after, .ayudaCurrentEnd::after {
  position: relative;
}

.ayudaCurrentEnd {
  margin-bottom: 150px;
}

div.ayudaCurrent, div.ayudaCurrentEnd {
  position: relative;
}

.ayudaItem {
  position: sticky;
  top: 80vh;
  max-width: 450px;
  display: grid;
  margin: 1em auto;
  padding: 1em;
  color: #989898;
  border-radius: 0.5em;
  background: #000;
  z-index: 9999;
}

.ayudaItemHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: solid 1px #353535;
}

.ayudaItemHeader i {
  color: #fff;
  font-size: 0.7em;
}

.ayudaItemHeader i:active, .ayudaItemHeader i:hover {
  color: #989898;
  cursor: pointer;
}

.btnCancelar {
  color: #989898;
}

.btnCancelar:active, .btnCancelar:hover {
  color: #fff;
  cursor: pointer;
}

.ayudaItemBody {
  line-height: 1.5em;
}

.ayudaItemFooter {
  display: grid;
  grid-gap: 1em;
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: solid 1px #353535;
}

.ayudaMigas {
  display: flex;
  justify-content: space-between;
}

.ayudaEnd {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}

.btnAyuda {
  padding: 0.5em;
  color: #fff;
  font-size: 0.8em;
  border: solid 1px #989898;
  border-radius: 0.3em;
  background: none;
}

.btnAyuda:active, .btnAyuda:hover {
  color: #000;
  background: #989898;
}

.itemNone {
  display: none;
}

.ql-editor {
  height: 100px !important;
  overflow-y: auto;
}

.countTxt {
  position: relative;
}

.countTxtItem {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  background: #ececec;
}

.countError {
  background: #ff8888;
  color: #fff;
}

.bannerBienvenida {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  padding: 15px;
}
.bannerBienvenida > .banner {
  background-color: #0038FF;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 20px 20px 0 20px;
  align-items: center;
}
@media screen and (min-width: 600px) {
  .bannerBienvenida > .banner {
    width: inherit;
    padding: 20px 20px 0 20px;
    gap: 3rem;
    flex-direction: row;
  }
}
.bannerBienvenida > .banner > .txt {
  font-size: 24px;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .bannerBienvenida > .banner > .txt {
    text-align: inherit;
    margin-top: -20px;
  }
}
.bannerBienvenida > .banner > .txt > p, .bannerBienvenida > .banner > .txt > h1 {
  color: white;
}
.bannerBienvenida > .banner > .txt > h1 {
  font-size: 24px;
  margin-bottom: 0.1rem;
}
.bannerBienvenida > .banner > .txt > p {
  font-size: 12px;
  font-weight: 100;
  font-family: "PrologueRegular";
  margin-bottom: 0.1rem;
}
.bannerBienvenida > .banner > .txt > p:last-child {
  margin-bottom: 0;
}
.bannerBienvenida > .banner > img {
  width: 100%;
  max-width: 158px;
}
@media screen and (min-width: 600px) {
  .bannerBienvenida > .banner > img {
    max-width: 158px;
  }
}

.boxPrevioFlex {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 1em 0;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  padding: 1em;
  align-items: flex-start;
  gap: 1em;
}
@media screen and (min-width: 600px) {
  .boxPrevioFlex {
    flex-direction: row;
    justify-content: space-between;
  }
}
.boxPrevioFlex p:last-of-type {
  margin-bottom: 0;
}

.boxPrevioFlex .usuarioSubafiliado {
  display: inline-flex;
  width: 100%;
  gap: 1em;
  align-items: center;
  border-top: solid 1px #e2e2e2;
  padding-top: 1em;
}
.boxPrevioFlex .usuarioSubafiliado > span {
  display: inline-flex;
  flex-direction: column;
  gap: 0.4em;
  order: 2;
}
@media screen and (min-width: 600px) {
  .boxPrevioFlex .usuarioSubafiliado > span {
    order: unset;
  }
}
.boxPrevioFlex .usuarioSubafiliado > p {
  margin-bottom: 0;
}
.boxPrevioFlex .usuarioSubafiliado img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50px;
  border: 1px solid #E2E2E2;
}
@media screen and (min-width: 600px) {
  .boxPrevioFlex .usuarioSubafiliado {
    width: fit-content;
    border-top: none;
    padding-top: 0;
  }
}

.boxColumnRow {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
@media screen and (min-width: 600px) {
  .boxColumnRow {
    gap: 1em;
    flex-direction: row;
  }
}
.boxColumnRow .contForms {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1.2em;
}
@media screen and (min-width: 600px) {
  .boxColumnRow .contForms {
    gap: 2.2em;
  }
}
.boxColumnRow .contForms > .block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media screen and (min-width: 600px) {
  .boxColumnRow .contForms > .block {
    width: 100%;
    flex-direction: row;
    gap: 1em;
    max-width: 800px;
  }
}
.boxColumnRow .contForms > .block > span {
  width: 100%;
}
.boxColumnRow .contForms > .block > span.contentButton {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .boxColumnRow .contForms > .block > span.contentButton {
    margin-right: calc(50% + 0.5em);
  }
}

.cargaItem {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 140px;
  margin: 0 auto;
}
@media screen and (min-width: 600px) {
  .cargaItem {
    margin: 0;
  }
}

.cargaImg {
  height: 140px;
  width: 140px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, #DFDFDF 0, #ccc 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: #ffffff;
  opacity: 1;
  z-index: 0;
  margin: 0 auto;
}
.cargaImg .btn {
  position: absolute;
  top: 1em;
  left: 1em;
}
.cargaImg .contBtnRight {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
}
.cargaImg .contBtnLeft {
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
}
.cargaImg img {
  max-width: 140px;
  max-height: 140px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btnCargaimg {
  position: relative;
  appearance: none;
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 0.3em;
}
.btnCargaimg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: url("/img/iconos/img-invert.svg") no-repeat center center #0038FF;
  background-size: 22px;
  z-index: 5;
}

.btnCargaimg:hover::before {
  content: "";
  background: url("/img/iconos/img-invert.svg") no-repeat center center #000;
  background-size: 22px;
  cursor: pointer;
}

.btnBorrarimg {
  position: relative;
  appearance: none;
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 0.3em;
  overflow: hidden;
}
.btnBorrarimg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: url("/img/iconos/eliminar-blanco.svg") no-repeat center center #dc3545;
  background-size: 19px;
  z-index: 5;
  font-weight: 900;
}

.btnBorrarimg:hover::before {
  content: "";
  background: url("/img/iconos/eliminar-blanco.svg") no-repeat center center #000;
  background-size: 19px;
  cursor: pointer;
}

section.sectionList > ul {
  display: grid;
  padding: 0;
  gap: 1em;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(237px, 1fr));
}
@media screen and (min-width: 506px) {
  section.sectionList > ul {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}
section.sectionList > ul li {
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  position: relative;
  padding: 1em;
  gap: 1em;
}
section.sectionList > ul li > span.editar {
  position: absolute;
  top: 1em;
  right: 1em;
  cursor: pointer;
}
section.sectionList > ul li > span.editar i {
  color: #0038FF;
  font-size: 16px;
}
section.sectionList > ul li > span.editar:hover i {
  color: #000;
}
section.sectionList > ul li > .dataUsuario {
  display: flex;
  gap: 1em;
  align-items: center;
}
@media screen and (min-width: 506px) {
  section.sectionList > ul li > .dataUsuario {
    flex-direction: column;
  }
}
section.sectionList > ul li > .dataUsuario > img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 100px;
  border: 1px solid #E2E2E2;
}
@media screen and (min-width: 506px) {
  section.sectionList > ul li > .dataUsuario > img {
    margin: 0 auto;
  }
}
section.sectionList > ul li > .dataUsuario > p {
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap-mode: nowrap;
  max-width: calc(100% - 85px);
}
@media screen and (min-width: 506px) {
  section.sectionList > ul li > .dataUsuario > p {
    max-width: calc(100% - 40px);
    text-align: center;
  }
}
section.sectionList > ul li > .btnsRowCol {
  display: flex;
  gap: 1em;
}
@media screen and (min-width: 506px) {
  section.sectionList > ul li > .btnsRowCol {
    flex-direction: column;
  }
}

.modal-body.comisiones {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.modal-body.comisiones .contForms {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.indent {
  padding-left: 1.1rem;
  position: relative;
}
.indent .bullet {
  left: 0;
  position: absolute;
}

.separatorTxt {
  display: grid;
  width: 100%;
  height: 27px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
  grid-template-areas: "separatorTxt";
}
.separatorTxt > .line {
  display: grid;
  height: 1px;
  width: 100%;
  background-color: #e0e3e7;
  grid-area: separatorTxt;
}
.separatorTxt > .txt {
  display: grid;
  grid-area: separatorTxt;
  color: #B0B6BE;
  font-weight: 300;
  font-size: 12px;
  width: fit-content;
  background-color: white;
  padding: 5px 8px;
}

.pBold {
  font-weight: 600;
}

.btnBase {
  height: 33.19px;
  border-radius: 3.84px;
  color: white;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 12.8px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  gap: 0.5rem;
  position: relative;
  outline: 0;
  border: none;
  cursor: pointer;
  background-color: #0038FF;
  padding: 0 1rem;
}
.btnBase.btnO {
  background-color: #EA993E;
  color: white;
}
.btnBase.btnO:hover, .btnBase.btnO:active {
  background-color: #9d5b0f;
}
.btnBase.cTelegram {
  background-color: #2AABEE;
}
.btnBase.cTelegram:hover, .btnBase.cTelegram:active {
  background-color: #1E8ABD;
}
.btnBase.cVinculada {
  background-color: #4FDB7E;
}
.btnBase.cVinculada:hover, .btnBase.cVinculada:active {
  background-color: #0c6d2c !important;
}
.btnBase > .iconR {
  position: absolute;
  right: 1rem;
  width: 18px;
  height: 18px;
}
.btnBase:hover, .btnBase:active {
  background-color: black;
  color: white;
}

.btnLineBase {
  height: 33.19px;
  border-radius: 3.84px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 12.8px;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
  gap: 0.5rem;
  position: relative;
  outline: 0;
  border: none;
  cursor: pointer;
  background-color: white;
  border: 1px solid #0038FF;
  color: #0038FF;
}
.btnLineBase:hover, .btnLineBase:active {
  color: black;
  border-color: black;
}

.btnTextLinkBlack,
.btnTextLinkDanger,
.btnTextLinkPrimary {
  height: 33.19px;
  border-radius: 3.84px;
  color: #0038FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.8px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  gap: 0.5rem;
  position: relative;
  outline: 0;
  border: none;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  width: fit-content;
  text-wrap-mode: nowrap;
}
.btnTextLinkBlack:hover,
.btnTextLinkDanger:hover,
.btnTextLinkPrimary:hover {
  color: #000;
}

.btnTextLinkDanger {
  color: #CA0000;
}

.btnTextLinkBlack:hover {
  color: #000;
}

.btnInputFile {
  display: inline-flex;
}
.btnInputFile input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.btnInputFile label {
  height: 33.19px;
  border-radius: 3.84px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.8px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  gap: 0.5rem;
  position: relative;
  outline: 0;
  border: none;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  width: fit-content;
  text-wrap-mode: nowrap;
  margin-bottom: 0;
}
.btnInputFile label:hover {
  color: #0038FF;
}

button.inActive,
span.inActive,
a.inActive,
.btn.inActive {
  pointer-events: none;
  opacity: 0.2;
}

.btnCopiarInput {
  position: absolute;
  color: #0038FF;
  height: fit-content;
  right: 0.7rem;
  top: 9px;
  cursor: pointer;
}
.btnCopiarInput i {
  font-size: 16px;
}
.btnCopiarInput .textCopy {
  position: absolute;
  top: -7px;
  right: -4px;
  font-size: 6px;
  opacity: 0;
}

.btnBase.cTelegram > .iconR {
  width: 18px;
  height: 18px;
  border-radius: 100px;
  border: 1px solid white;
}
.btnBase.cTelegram > .iconR img {
  padding: 0 4px 2px 2px;
  width: 100%;
}

/* botones de 23px de alto */
.btnLineSmall,
.btnSmall {
  height: 23px;
  border-radius: 3px;
  background-color: #0038FF;
  color: #fff;
  cursor: pointer;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 0.8;
  font-size: 10px;
  transition: all 200ms ease;
  text-wrap-mode: nowrap;
  justify-content: center;
}
.btnLineSmall i,
.btnSmall i {
  font-size: 10px;
  height: fit-content;
  line-height: 0.8;
}
.btnLineSmall:hover,
.btnSmall:hover {
  background-color: #000;
}

.btnLineSmall {
  background-color: transparent;
  border: 1px solid #0038FF;
  color: #0038FF;
}
.btnLineSmall:hover {
  border: 1px solid #000;
  color: #000;
  background-color: transparent;
}

/* border circular iconos red-... redes sociales */
.iCircle {
  border: 1px solid white;
  border-radius: 100px;
}

.icon-red-telegram.iCircle {
  border: 1px solid white;
  border-radius: 100px;
  padding: 4px 5px 4px 3px;
}

.btnText {
  font-size: 12px;
  font-weight: 400;
  color: #3A29F5;
  line-height: 2.2;
  font-family: "SoraVariable", sans-serif;
  background-color: transparent;
  height: fit-content;
  cursor: pointer;
  text-wrap-mode: nowrap;
}
.btnText:hover {
  color: #0B0D80;
}

/* ZONA CONSTRUCTOR WEB */
.navSteps {
  width: 100%;
}
.navSteps ul {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
}
.navSteps ul li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  align-items: center;
  min-width: 114px;
  max-width: 120px;
}
.navSteps ul li span {
  width: 25px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(214, 214, 214);
}
.navSteps ul li small {
  text-align: center;
}
.navSteps ul li.current span {
  color: white;
  background-color: #0038FF;
}

.contentBox {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 4px 0 rgba(209, 209, 209, 0.25);
  padding: 1rem 0.5rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.contentBox > h3 {
  display: inline-flex;
  gap: 0.3rem;
  font-weight: 600;
  margin-bottom: 0;
  align-items: center;
}
.contentBox > h3 i {
  font-weight: 400;
  height: fit-content;
}
.contentBox > .line {
  width: 100%;
  height: 1px;
  background-color: #E8E8E8;
}

.contentGroups {
  display: flex;
  flex-direction: column;
}
.contentGroups .pSmall,
.contentGroups .pDominio {
  font-size: 11px;
  color: #828790;
}

/* ZONA CONSTRUCTOR WEB */
/* grupo para formularios parasu level o texto */
.contGInput {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /*  //// */
  display: grid;
  grid-template-areas: "gLabel" "gInput" "pError";
}
.contGInput > .gLabel {
  grid-area: gLabel;
  margin-bottom: 0;
  font-weight: 400;
  margin-bottom: 0;
  height: 17px;
}
.contGInput > .divInput {
  grid-area: gInput;
  border-radius: 0.3rem;
  position: relative;
  background: rgba(130, 130, 130, 0.1);
  border: none;
  width: 100%;
  height: 33.19px;
  padding: 0 0.5rem;
  line-height: 33.19px;
  text-align: end;
}
.contGInput > .divInput P {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0038FF;
  margin-bottom: 0;
}
.contGInput .introClick.bColor {
  background: rgba(130, 130, 130, 0.1);
}
.contGInput > .gInput {
  grid-area: gInput;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}
.contGInput > .gInput select.bColor,
.contGInput > .gInput input.bColor {
  border-radius: 0.3rem;
  position: relative;
  background: rgba(130, 130, 130, 0.1);
  border: none;
  width: 100%;
  height: 33.19px;
  padding: 0.3rem 0.5rem;
}
.contGInput > .gInput select.bColor:focus-visible,
.contGInput > .gInput input.bColor:focus-visible {
  outline: 0;
}
.contGInput > .gInput select.bColor:focus,
.contGInput > .gInput input.bColor:focus {
  outline: 1px solid rgb(118, 163, 215);
}
.contGInput > .gInput input.bColor {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contGInput > .gInput select.bColor {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 1.8rem;
  background-image: none;
  appearance: none;
  /*               &:after{
                  font-family: 'icomoon';
                  content: "\e900";
                  speak: none;
                  font-style: normal;
                  font-weight: normal;
                  font-variant: normal;
                  text-transform: none;
                  line-height: 1;
                  -webkit-font-smoothing: antialiased;
              } */
}
.contGInput > .gInput select.bColor option {
  appearance: none;
  background-color: white;
  border: none;
  outline: none;
}
.contGInput > .gInput select.bColor {
  /*  &:open{
       background-color: red;
   } */
}
.contGInput > .gInput .iconArrow {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #0038FF;
  font-size: 14px;
}
.contGInput > .gInput .iconValidate {
  color: #2EAA32;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
.contGInput > .pError {
  grid-area: pError;
  color: #AA2E3B;
  display: inline-flex;
  line-height: 1.3;
  font-size: 0.6rem;
  font-size: 0.6rem;
  gap: 0.2rem;
  align-items: center;
  margin-bottom: 0;
  display: none;
}
.contGInput > .pError i {
  font-size: inherit;
  line-height: inherit;
  font-size: 12.8px;
}
.contGInput > .pError i::before {
  line-height: inherit;
}

.contentBox:has(select:open) .btnBase {
  pointer-events: none;
}

.contGInput .gInput.valid .iconValidate {
  display: block;
}

.contGInput:has(.gInput.invalid) input {
  outline: 1px solid #AA2E3B;
}
.contGInput:has(.gInput.invalid) .pError {
  display: inline-flex;
}

/* grupo para input y option en paralelo */
.gInputSelect {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  grid-template-columns: 1fr auto;
}
.gInputSelect input.print {
  text-align: end;
}
.gInputSelect input,
.gInputSelect select {
  color: #0038FF !important;
}

/* autocompletedSelect sin bootstrap */
.autocompleteSelect {
  width: 100%;
  position: relative;
}
.autocompleteSelect .input-wrapper {
  position: relative;
}
.autocompleteSelect .input-wrapper input {
  width: 100%;
  padding: 10px 12px;
  padding-left: 39px;
  padding-right: 32px;
  border: 1px solid #CED4DB;
  border-radius: 4px;
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-sizing: border-box;
  height: 33.19px;
}
.autocompleteSelect .input-wrapper input:focus {
  color: #212529;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.autocompleteSelect .input-flag {
  width: 18px;
  height: 13px;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  object-fit: cover;
  border-radius: 2px;
}
.autocompleteSelect .input-flag[alt=Buscar] {
  height: 16px;
  object-fit: contain;
}
.autocompleteSelect .input-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  cursor: pointer;
  font-size: 14px;
  color: #777;
  height: fit-content;
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 1px;
}
.autocompleteSelect .input-icon i {
  width: 14px;
  height: 14px;
}
.autocompleteSelect .input-icon i.icon-cerrar {
  font-size: 10px;
  width: unset;
  height: unset;
}
.autocompleteSelect .input-icon.rotated {
  transform: translateY(-50%) rotate(180deg);
  margin-top: 0;
}
.autocompleteSelect .options {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  border-radius: 4px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid #eee;
  display: none;
  z-index: 1000;
  padding: 4px;
  background-color: white;
}
.autocompleteSelect .options.show {
  display: block;
}
.autocompleteSelect .options .txtMasUsados {
  pointer-events: none;
  display: flex;
  height: 20px;
  font-size: 12px;
  color: #646464;
  align-items: center;
  padding: 3px;
  font-size: 11px;
}
.autocompleteSelect .options .txtTodos {
  pointer-events: none;
  display: flex;
  height: 20px;
  font-size: 12px;
  color: #646464;
  border-top: 1px solid #eee;
  padding: 8px 3px;
  margin-top: 10px;
  height: 30px;
  font-size: 11px;
}
.autocompleteSelect .option {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
}
.autocompleteSelect .option .flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}
.autocompleteSelect .option .label {
  font-size: 13px;
  color: #111;
}
.autocompleteSelect .option:hover {
  background: #ebebeb;
}

.autocompleteSelect.editable .input-wrapper input {
  background: rgba(130, 130, 130, 0.1);
  border: none;
  outline: 1px solid #CED4DB;
}
.autocompleteSelect.editable .input-wrapper input:focus {
  outline: 1px solid rgb(118, 163, 215);
  box-shadow: none;
}

@media screen and (max-width: 600px) {
  .autocompleteSelect.modalTeleg .options {
    max-height: 15dvh;
  }
}

/*
en pantalla pp-sw-2.1.html */
.artCampanyas2 .modulCheck .btns {
  display: flex;
  gap: 1rem;
}

#verificar-uno .iti {
  width: 100%;
}

#verificar-uno .iti input {
  width: 100%;
}

.mainBet {
  width: 100%;
  overflow: hidden;
  margin: 45.78px auto 0 auto;
}

.artChallenge {
  padding: 0.9rem 0;
  font-size: 0.8rem;
}
@media (min-width: 867px) {
  .artChallenge {
    padding: 0.9rem;
  }
}
.artChallenge span.fwBold {
  font-weight: 800;
}
.artChallenge p {
  margin-bottom: 0;
}

section.topChallenge {
  color: #707070;
  row-gap: 0.8rem;
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
}
@media (min-width: 867px) {
  section.topChallenge {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "top sync" "season season" "info info" "prizes prizes" "performance performance";
    column-gap: 1rem;
  }
  section.topChallenge .btnBase {
    grid-column: 1/-1;
  }
}
section.topChallenge .challengeTopRow {
  height: 48px;
}
@media (min-width: 867px) {
  section.topChallenge .challengeTopRow {
    grid-area: top;
  }
}
section.topChallenge .challengeTopRow .brandLogo {
  height: 100%;
  border-radius: 5px;
  display: block;
  overflow: hidden;
}
section.topChallenge .seasonText {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #707070;
  font-size: 1rem;
  line-height: 1.2;
}
@media (min-width: 867px) {
  section.topChallenge .seasonText {
    grid-area: season;
    font-size: 1rem;
  }
}
section.topChallenge .seasonText i {
  color: #0038FF;
  font-size: 1.25rem;
}
section.topChallenge .seasonText p {
  display: inline-block;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #707070;
  font-size: 1rem;
  line-height: 1.2;
}
section.topChallenge .seasonText p .vert {
  font-size: 18px;
}
section.topChallenge .infoBanner {
  background-color: rgba(0, 56, 255, 0.1);
  color: #0038FF;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.35;
}
@media (min-width: 867px) {
  section.topChallenge .infoBanner {
    grid-area: info;
    margin-top: 0;
    font-size: 0.85rem;
    padding: 0.8rem 1rem;
  }
}
section.topChallenge .syncBadge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 1px solid #CED4DA;
  border-radius: 10px;
  padding: 0 1rem;
  height: 33px;
}
@media (min-width: 867px) {
  section.topChallenge .syncBadge {
    height: 48px;
    grid-area: sync;
    margin-top: 0;
    align-self: start;
    justify-self: end;
    padding: 0.6rem 0.8rem;
    background-color: white;
  }
}
section.topChallenge .syncBadge .syncIcon {
  color: #0038FF;
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 867px) {
  section.topChallenge .syncBadge .syncIcon {
    font-size: 1.8rem;
  }
}
section.topChallenge .syncBadge .syncText {
  color: #000;
  font-size: 0.8rem;
  display: inline-flex;
  gap: 0.2rem;
}
@media (min-width: 867px) {
  section.topChallenge .syncBadge .syncText {
    flex-direction: column;
    /*     font-size: 1.2rem; */
  }
}
section.topChallenge .syncBadge .syncText .syncLabel {
  color: #707070;
}
section.topChallenge .challengeSection {
  margin-top: 1rem;
}
@media (min-width: 867px) {
  section.topChallenge .challengeSection:nth-of-type(1) {
    grid-area: prizes;
  }
  section.topChallenge .challengeSection:nth-of-type(2) {
    grid-area: performance;
  }
}
section.topChallenge .challengeSection .sectionTitle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.8rem;
  color: #707070;
  font-size: 2rem;
  font-weight: 500;
  line-height: unset;
}
section.topChallenge .challengeSection .sectionTitle i {
  color: #FFB80C;
  font-size: 19px;
}
section.topChallenge .challengeSection .sectionTitle span {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
@media (min-width: 867px) {
  section.topChallenge .challengeSection .sectionTitle span {
    font-size: 1.05rem;
  }
}
section.topChallenge .challengeSection .sectionTitleBlue i {
  color: #0038FF;
}
section.topChallenge .challengeSection .prizesGrid,
section.topChallenge .challengeSection .performanceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (min-width: 867px) {
  section.topChallenge .challengeSection .prizesGrid,
  section.topChallenge .challengeSection .performanceGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
section.topChallenge .challengeSection .prizesGrid .challengeCard,
section.topChallenge .challengeSection .performanceGrid .challengeCard {
  border: 1px solid #CED4DA;
  border-radius: 10px;
  background-color: white;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
section.topChallenge .challengeSection .prizesGrid .challengeCardWide,
section.topChallenge .challengeSection .performanceGrid .challengeCardWide {
  grid-column: 1/-1;
}
@media (min-width: 867px) {
  section.topChallenge .challengeSection .prizesGrid .challengeCardWide,
  section.topChallenge .challengeSection .performanceGrid .challengeCardWide {
    grid-column: auto;
  }
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardIconBox,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardIconBox {
  width: fit-content;
  min-width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding: 0.7rem;
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardIconBox.cardIconGold,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardIconBox.cardIconGold {
  color: white;
  background-color: #FFB80C;
  outline: 1px solid #DFB312;
  filter: drop-shadow(0 0 8.8px #FFCF1C);
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardIconBox.cardIconSilver,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardIconBox.cardIconSilver {
  color: white;
  background-color: #B7B7B7;
  filter: drop-shadow(0 0 4px rgba(173, 173, 173, 0.25));
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardIconBox.cardIconBronze,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardIconBox.cardIconBronze {
  color: white;
  background-color: #FF850C;
  filter: drop-shadow(0 0 4px rgba(173, 173, 173, 0.25));
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardIconBox.cardIconSoft,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardIconBox.cardIconSoft {
  color: #8C8C8C;
  background-color: #E2E8F0;
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardIconBox.cardIconGreen,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardIconBox.cardIconGreen {
  color: #3CC864;
  background-color: #D8FFE3;
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardIconBox .rankValue,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardIconBox .rankValue {
  font-size: 1.6rem;
  color: #000;
  line-height: 1;
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardContent,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardContent {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardContent .cardTitle,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardContent .cardTitle {
  margin: 0;
  color: #707070;
  font-size: 0.8rem;
  line-height: 1.1;
}
@media (min-width: 867px) {
  section.topChallenge .challengeSection .prizesGrid .challengeCard .cardContent .cardTitle,
  section.topChallenge .challengeSection .performanceGrid .challengeCard .cardContent .cardTitle {
    font-size: 0.9rem;
  }
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardContent .cardValue,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardContent .cardValue {
  /*  margin: 0.2rem 0 0; */
  color: #000;
  font-size: 0.8rem;
  line-height: 1.1;
  font-weight: 400;
}
section.topChallenge .challengeSection .prizesGrid .challengeCard .cardContent .cardValue.cardValueGreen,
section.topChallenge .challengeSection .performanceGrid .challengeCard .cardContent .cardValue.cardValueGreen {
  color: #3CC864;
}

.rankingChallenge {
  margin-top: 1.8rem;
  padding: 1rem 0.8rem;
  border: 1px solid #CED4DA;
  border-radius: 10px;
}

.rankingTitle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  color: #000;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (min-width: 867px) {
  .rankingTitle {
    font-size: 1.5rem;
  }
}
.rankingTitle i {
  color: #0038FF;
  font-size: 19px;
}
.rankingTitle span {
  font-size: 1.1rem;
}
@media (min-width: 867px) {
  .rankingTitle span {
    font-size: 1.2rem;
  }
}

.rankingSubtitle {
  margin: 0 0 1rem !important;
  color: #707070;
  font-size: 0.8rem;
  line-height: 1.2;
}
@media (min-width: 867px) {
  .rankingSubtitle {
    font-size: 0.8rem;
    margin-bottom: 1.2rem;
  }
}

.rankingTable {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.rankingHeader {
  display: grid;
  grid-template-columns: 60px 1fr 110px;
  gap: 0.8rem;
  padding: 0 0.8rem 0.5rem;
  color: #707070;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rankingHeader .colResult {
  display: none;
}
@media (min-width: 867px) {
  .rankingHeader {
    grid-template-columns: 80px 1fr 0 410px;
    padding: 0.6rem 1rem;
  }
  .rankingHeader .colResult {
    display: block;
  }
}

.rankingRow {
  display: grid;
  /*  grid-template-columns: 60px 1fr auto; */
  grid-template-columns: 60px 1fr 110px;
  gap: 0.8rem;
  align-items: center;
  border: 1px solid #CED4DA;
  border-radius: 10px;
  padding: 0.8rem;
  background-color: white;
  min-height: 60px;
}
.rankingRow .rankPosition {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
  background-color: white;
}
.rankingRow .rankPosition i {
  font-size: 1.4rem;
}
.rankingRow .rankResult {
  display: none;
}
@media (min-width: 867px) {
  .rankingRow {
    grid-template-columns: 80px 1fr 0 410px;
    min-height: auto;
  }
  .rankingRow .rankPosition {
    width: 48px;
    height: 48px;
  }
  .rankingRow .rankResult {
    display: block;
  }
  .rankingRow .rankFtds {
    display: block;
  }
  .rankingRow .rankUser {
    font-size: 0.9rem;
  }
}

/*     .rankPosition{
        width: 44px;
        height: 44px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        font-weight: 600;
        color: $chcolor-text1;
        background-color: white;

        i{
            font-size: 1.4rem;
        }
        @media (min-width: 867px){
          width: 48px;
          height: 48px;
        }
    } */
.rankingRowGold .rankPosition {
  background-color: #FFB80C;
  color: white;
  outline: 1px solid #DFB312;
  filter: drop-shadow(0 0 8.8px #FFCF1C);
}
.rankingRowGold .rankPosition i {
  color: white;
}

.rankingRowSilver .rankPosition {
  background-color: #B7B7B7;
  color: white;
  filter: drop-shadow(0 0 4px rgba(173, 173, 173, 0.25));
}
.rankingRowSilver .rankPosition i {
  color: white;
}

.rankingRowBronze .rankPosition {
  background-color: #FF850C;
  color: white;
  filter: drop-shadow(0 0 4px rgba(173, 173, 173, 0.25));
}
.rankingRowBronze .rankPosition i {
  color: white;
}

.rankUser.line {
  display: flex;
  align-items: baseline;
  overflow: hidden;
}
.rankUser.line p {
  color: #000;
  font-size: 0.85rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  display: block;
  margin: 0;
  overflow: hidden;
}
.rankUser.line small {
  color: #707070;
  font-size: 0.75rem;
  margin-left: 0.3rem;
}

.rankUser {
  color: #000;
  font-size: 0.85rem;
  line-height: 1.3;
}
.rankUser small {
  color: #707070;
  font-size: 0.75rem;
  /*   margin-left: 0.3rem; */
}

.rankFtds {
  /*     text-align: right; */
  color: #CED4DA;
  font-size: 0.9rem;
}

.rankingDots {
  /*   margin:.2rem 0; */
  place-items: center;
  height: 8px;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  padding: 0;
  display: grid;
  grid-template-areas: "lineL dots lineR";
}
.rankingDots > [class|=line] {
  height: 1px;
  width: 100%;
  background-color: #CED4DA;
}
.rankingDots > .line-L {
  grid-area: lineL;
}
.rankingDots > .line-R {
  grid-area: lineR;
}
.rankingDots > .dots {
  color: #CED4DA;
  grid-area: dots;
  font-weight: 600;
  padding: 0 0.3rem;
  margin-top: -0.9rem;
  /*  color: red; */
  font-size: 30px;
  line-height: 0.1;
}

.rankingRowGoldActive,
.rankingRowSilverActive,
.rankingRowBronzeActive,
.rankingRowActive {
  grid-template-columns: 60px 1fr;
  background-color: rgba(0, 56, 255, 0.1);
  border-color: #0038FF;
  padding: 0.9rem;
}
.rankingRowGoldActive .rankPosition,
.rankingRowSilverActive .rankPosition,
.rankingRowBronzeActive .rankPosition,
.rankingRowActive .rankPosition {
  background-color: #0038FF;
  color: white;
  align-self: start;
}
.rankingRowGoldActive .rankFtds,
.rankingRowSilverActive .rankFtds,
.rankingRowBronzeActive .rankFtds,
.rankingRowActive .rankFtds {
  display: none;
}

.rankingRowGoldActive,
.rankingRowSilverActive,
.rankingRowBronzeActive,
.rankingRowActive {
  grid-template-columns: 60px 1fr;
  background-color: rgba(0, 56, 255, 0.1);
  border-color: #0038FF;
  padding: 0.9rem;
  row-gap: 0.8rem;
  grid-template-areas: "pos user" "stats stats" "btn btn";
}
@media (min-width: 867px) {
  .rankingRowGoldActive,
  .rankingRowSilverActive,
  .rankingRowBronzeActive,
  .rankingRowActive {
    grid-template-areas: unset;
    border-radius: 10px;
    padding: 0.8rem;
    grid-template-columns: 80px 1fr;
  }
}
.rankingRowGoldActive .rankFtds,
.rankingRowSilverActive .rankFtds,
.rankingRowBronzeActive .rankFtds,
.rankingRowActive .rankFtds {
  display: none;
}
.rankingRowGoldActive .rankPosition,
.rankingRowSilverActive .rankPosition,
.rankingRowBronzeActive .rankPosition,
.rankingRowActive .rankPosition {
  background-color: #0038FF;
  color: white;
  align-self: start;
  grid-area: pos;
}
@media (min-width: 867px) {
  .rankingRowGoldActive .rankPosition,
  .rankingRowSilverActive .rankPosition,
  .rankingRowBronzeActive .rankPosition,
  .rankingRowActive .rankPosition {
    grid-area: unset;
  }
}
.rankingRowGoldActive .rankUserExpanded,
.rankingRowSilverActive .rankUserExpanded,
.rankingRowBronzeActive .rankUserExpanded,
.rankingRowActive .rankUserExpanded {
  display: contents;
}
@media (min-width: 867px) {
  .rankingRowGoldActive .rankUserExpanded,
  .rankingRowSilverActive .rankUserExpanded,
  .rankingRowBronzeActive .rankUserExpanded,
  .rankingRowActive .rankUserExpanded {
    display: unset;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    display: grid;
    /*   grid-template-columns: 1fr 300px 45px;   229px es de quitarle 71px, los que mide de mas el boton*/
    grid-template-columns: 1fr 278px 116px;
  }
}
.rankingRowGoldActive .rankUserExpanded .rankUser,
.rankingRowSilverActive .rankUserExpanded .rankUser,
.rankingRowBronzeActive .rankUserExpanded .rankUser,
.rankingRowActive .rankUserExpanded .rankUser {
  grid-area: user;
  align-self: center;
}
@media (min-width: 867px) {
  .rankingRowGoldActive .rankUserExpanded .rankUser,
  .rankingRowSilverActive .rankUserExpanded .rankUser,
  .rankingRowBronzeActive .rankUserExpanded .rankUser,
  .rankingRowActive .rankUserExpanded .rankUser {
    grid-area: unset;
    align-self: unset;
    flex: 1;
    display: flex;
    align-items: baseline;
  }
}
.rankingRowGoldActive .rankUserExpanded .rankStats,
.rankingRowSilverActive .rankUserExpanded .rankStats,
.rankingRowBronzeActive .rankUserExpanded .rankStats,
.rankingRowActive .rankUserExpanded .rankStats {
  grid-area: stats;
  margin-left: auto;
}
@media (min-width: 867px) {
  .rankingRowGoldActive .rankUserExpanded .rankStats,
  .rankingRowSilverActive .rankUserExpanded .rankStats,
  .rankingRowBronzeActive .rankUserExpanded .rankStats,
  .rankingRowActive .rankUserExpanded .rankStats {
    margin-left: unset;
    grid-area: unset;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
  }
  .rankingRowGoldActive .rankUserExpanded .rankStats span,
  .rankingRowSilverActive .rankUserExpanded .rankStats span,
  .rankingRowBronzeActive .rankUserExpanded .rankStats span,
  .rankingRowActive .rankUserExpanded .rankStats span {
    font-size: 0.7rem;
  }
  .rankingRowGoldActive .rankUserExpanded .rankStats span strong,
  .rankingRowSilverActive .rankUserExpanded .rankStats span strong,
  .rankingRowBronzeActive .rankUserExpanded .rankStats span strong,
  .rankingRowActive .rankUserExpanded .rankStats span strong {
    display: inline;
    font-size: 1rem;
    margin-bottom: 0;
    margin-right: 0.3rem;
  }
  .rankingRowGoldActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowSilverActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowBronzeActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowActive .rankUserExpanded .rankStats .rankFtdsLarge {
    font-size: 17px;
  }
  .rankingRowGoldActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowGoldActive .rankUserExpanded .rankStats .rankCommission,
  .rankingRowSilverActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowSilverActive .rankUserExpanded .rankStats .rankCommission,
  .rankingRowBronzeActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowBronzeActive .rankUserExpanded .rankStats .rankCommission,
  .rankingRowActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowActive .rankUserExpanded .rankStats .rankCommission {
    display: inline-flex;
    align-items: center;
  }
  .rankingRowGoldActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowSilverActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowBronzeActive .rankUserExpanded .rankStats .rankFtdsLarge,
  .rankingRowActive .rankUserExpanded .rankStats .rankFtdsLarge {
    font-size: 17px;
  }
  .rankingRowGoldActive .rankUserExpanded .rankStats .rankFtdsLarge strong,
  .rankingRowSilverActive .rankUserExpanded .rankStats .rankFtdsLarge strong,
  .rankingRowBronzeActive .rankUserExpanded .rankStats .rankFtdsLarge strong,
  .rankingRowActive .rankUserExpanded .rankStats .rankFtdsLarge strong {
    font-size: 31px;
  }
}
.rankingRowGoldActive .rankUserExpanded .btnRanking,
.rankingRowSilverActive .rankUserExpanded .btnRanking,
.rankingRowBronzeActive .rankUserExpanded .btnRanking,
.rankingRowActive .rankUserExpanded .btnRanking {
  grid-area: btn;
  width: 100%;
}
@media (min-width: 867px) {
  .rankingRowGoldActive .rankUserExpanded .btnRanking,
  .rankingRowSilverActive .rankUserExpanded .btnRanking,
  .rankingRowBronzeActive .rankUserExpanded .btnRanking,
  .rankingRowActive .rankUserExpanded .btnRanking {
    grid-area: unset;
    /* width: unset; */
  }
}

.rankingRowGoldActive {
  background-color: rgba(255, 184, 12, 0.1);
  border-color: #FFB80C;
}
.rankingRowGoldActive .rankPosition {
  background-color: #FFB80C;
  outline: 1px solid #DFB312;
  filter: drop-shadow(0 0 8.8px #FFCF1C);
}
.rankingRowGoldActive .rankUserExpanded .rankStats .rankCommission strong,
.rankingRowGoldActive .rankUserExpanded .rankStats .rankFtdsLarge strong {
  color: #FFB80C;
}
.rankingRowGoldActive .rankUserExpanded .btnRanking {
  background-color: #FFB80C;
}
.rankingRowGoldActive .rankUserExpanded .btnRanking:active,
.rankingRowGoldActive .rankUserExpanded .btnRanking:hover {
  background-color: #d59b0f;
}

.rankingRowSilverActive {
  background-color: rgba(183, 183, 183, 0.1);
  border-color: #B7B7B7;
  filter: drop-shadow(0 0 4px rgba(173, 173, 173, 0.25));
}
.rankingRowSilverActive .rankPosition {
  background-color: #B7B7B7;
}
.rankingRowSilverActive .rankUserExpanded .rankStats .rankCommission strong,
.rankingRowSilverActive .rankUserExpanded .rankStats .rankFtdsLarge strong {
  color: #B7B7B7;
}
.rankingRowSilverActive .rankUserExpanded .btnRanking {
  background-color: #B7B7B7;
}
.rankingRowSilverActive .rankUserExpanded .btnRanking:active,
.rankingRowSilverActive .rankUserExpanded .btnRanking:hover {
  background-color: #858585;
}

.rankingRowBronzeActive {
  background-color: rgba(255, 133, 12, 0.1);
  border-color: #FF850C;
}
.rankingRowBronzeActive .rankPosition {
  background-color: #FF850C;
  filter: drop-shadow(0 0 4px rgba(173, 173, 173, 0.25));
}
.rankingRowBronzeActive .rankUserExpanded .rankStats .rankCommission strong,
.rankingRowBronzeActive .rankUserExpanded .rankStats .rankFtdsLarge strong {
  color: #FF850C;
}
.rankingRowBronzeActive .rankUserExpanded .btnRanking {
  background-color: #FF850C;
}
.rankingRowBronzeActive .rankUserExpanded .btnRanking:active,
.rankingRowBronzeActive .rankUserExpanded .btnRanking:hover {
  background-color: #cb6c0d;
}

.rankUserExpanded {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.rankUserExpanded .rankUser {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
}
@media (min-width: 867px) {
  .rankUserExpanded .rankUser {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}
.rankUserExpanded .rankUser small {
  font-size: 0.8rem;
  line-height: 1.3;
  font-size: 0.75rem;
  color: #707070;
}
@media (min-width: 867px) {
  .rankUserExpanded .rankUser small {
    margin-left: 0.5rem;
  }
}
.rankUserExpanded .rankUser p {
  margin: 0;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem;
  color: #000;
  line-height: 1.1;
}
@media (min-width: 867px) {
  .rankUserExpanded .rankUser p {
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    display: block;
    width: fit-content;
  }
}

.rankStats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.rankStats span {
  color: #707070;
  font-size: 0.75rem;
  line-height: 1.2;
}
.rankStats span strong {
  display: block;
  color: #0038FF;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}
.rankStats .rankFtdsLarge {
  text-align: end;
  font-size: 17px;
}
.rankStats .rankFtdsLarge strong {
  font-size: 31px;
}

.rankCommission strong {
  color: #0038FF;
}

.rankFtdsLarge strong {
  color: #000;
}

.btnRanking {
  display: block;
  width: 100%;
  background-color: #0038FF;
  color: white;
  text-align: center;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.2s;
  text-wrap: nowrap;
}
.btnRanking:hover {
  background-color: rgb(0, 44.8, 204);
  color: white;
}

@media (min-width: 867px) {
  .rankingRowGoldActive,
  .rankingRowSilverActive,
  .rankingRowBronzeActive,
  .rankingRowActive {
    border-radius: 10px;
    padding: 0.8rem;
    grid-template-columns: 80px 1fr;
  }
  .rankingRowGoldActive .rankUserExpanded,
  .rankingRowSilverActive .rankUserExpanded,
  .rankingRowBronzeActive .rankUserExpanded,
  .rankingRowActive .rankUserExpanded {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    display: grid;
    grid-template-columns: 1fr 250px 150px;
  }
  .rankingRowGoldActive .rankUserExpanded .rankUser,
  .rankingRowSilverActive .rankUserExpanded .rankUser,
  .rankingRowBronzeActive .rankUserExpanded .rankUser,
  .rankingRowActive .rankUserExpanded .rankUser {
    flex: 1;
    display: flex;
    align-items: baseline;
  }
  .rankingRowGoldActive .rankStats,
  .rankingRowSilverActive .rankStats,
  .rankingRowBronzeActive .rankStats,
  .rankingRowActive .rankStats {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
  }
  .rankingRowGoldActive .rankStats span,
  .rankingRowSilverActive .rankStats span,
  .rankingRowBronzeActive .rankStats span,
  .rankingRowActive .rankStats span {
    font-size: 0.7rem;
  }
  .rankingRowGoldActive .rankStats span strong,
  .rankingRowSilverActive .rankStats span strong,
  .rankingRowBronzeActive .rankStats span strong,
  .rankingRowActive .rankStats span strong {
    display: inline;
    font-size: 1rem;
    margin-bottom: 0;
    margin-right: 0.3rem;
  }
  .rankingRowGoldActive .rankStats .rankFtdsLarge,
  .rankingRowSilverActive .rankStats .rankFtdsLarge,
  .rankingRowBronzeActive .rankStats .rankFtdsLarge,
  .rankingRowActive .rankStats .rankFtdsLarge {
    font-size: 17px;
  }
  .rankingRowGoldActive .rankStats .rankFtdsLarge,
  .rankingRowGoldActive .rankStats .rankCommission,
  .rankingRowSilverActive .rankStats .rankFtdsLarge,
  .rankingRowSilverActive .rankStats .rankCommission,
  .rankingRowBronzeActive .rankStats .rankFtdsLarge,
  .rankingRowBronzeActive .rankStats .rankCommission,
  .rankingRowActive .rankStats .rankFtdsLarge,
  .rankingRowActive .rankStats .rankCommission {
    display: inline-flex;
    align-items: center;
  }
  .rankingRowGoldActive .rankStats .rankFtdsLarge,
  .rankingRowSilverActive .rankStats .rankFtdsLarge,
  .rankingRowBronzeActive .rankStats .rankFtdsLarge,
  .rankingRowActive .rankStats .rankFtdsLarge {
    font-size: 17px;
  }
  .rankingRowGoldActive .rankStats .rankFtdsLarge strong,
  .rankingRowSilverActive .rankStats .rankFtdsLarge strong,
  .rankingRowBronzeActive .rankStats .rankFtdsLarge strong,
  .rankingRowActive .rankStats .rankFtdsLarge strong {
    font-size: 31px;
  }
}
.rankingChallenge.bloqued .rankingRow:not(.visible) > .rankUserExpanded > *, .rankingChallenge.bloqued .rankingRow:not(.visible) > *:not(.rankPosition) {
  filter: blur(3px);
}

.navInferior {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 4;
  overflow: hidden;
  position: absolute;
  top: 0;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .navInferior {
    display: none;
  }
}

.navInferior .navFijo {
  list-style: none;
  display: flex;
  background-color: #F3F4F6;
  justify-content: center;
  height: 73px;
  padding: 0;
  margin: 0;
  align-items: center;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  position: fixed;
  border-radius: 6.4px;
  box-sizing: border-box;
  border: 1px solid #fff;
  bottom: 10px;
  left: 10px;
  right: 10px;
  pointer-events: all;
}
.navInferior .navFijo li {
  width: 100%;
  padding: 0 0.3rem;
}
.navInferior .navFijo li a,
.navInferior .navFijo li span {
  display: flex;
  flex-direction: column;
  color: #1C1B1F;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: rgb(112, 112, 112);
}
.navInferior .navFijo li a i,
.navInferior .navFijo li span i {
  font-size: 26px;
  width: fit-content;
  display: block;
  padding: 0;
}
.navInferior .navFijo li a p,
.navInferior .navFijo li span p {
  font-size: 8px;
  text-wrap-mode: nowrap;
  margin-bottom: 0;
}
.navInferior .navFijo li a:hover p, .navInferior .navFijo li a:active p, .navInferior .navFijo li a:hover i, .navInferior .navFijo li a:active i,
.navInferior .navFijo li span:hover p,
.navInferior .navFijo li span:active p,
.navInferior .navFijo li span:hover i,
.navInferior .navFijo li span:active i {
  color: #0038FF;
  transition: color 200ms ease;
}
.navInferior .navFijo li a.seleccionado p, .navInferior .navFijo li a.seleccionado i, .navInferior .navFijo li a.selecionado p, .navInferior .navFijo li a.selecionado i,
.navInferior .navFijo li span.seleccionado p,
.navInferior .navFijo li span.seleccionado i,
.navInferior .navFijo li span.selecionado p,
.navInferior .navFijo li span.selecionado i {
  color: #0038FF;
}
.navInferior .navFijo li a.btnCloseNavInferior i, .navInferior .navFijo li a.btnOpenNavInferior i,
.navInferior .navFijo li span.btnCloseNavInferior i,
.navInferior .navFijo li span.btnOpenNavInferior i {
  font-size: 18px;
  padding: 4px;
}

.navInferior .navModalBack {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
  position: absolute;
  pointer-events: all !important;
}

.navInferior .navModalBack .navModal {
  position: fixed;
  left: 20px;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 20px 10px;
  background-color: #fff;
  border-radius: 5px 5px 0px 0px;
  border-bottom: 1px solid #D4D4D4;
  margin: 0;
  list-style: none;
  pointer-events: all;
  width: calc(100% - 40px);
  top: unset;
  bottom: 83px;
}
.navInferior .navModalBack .navModal li {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navInferior .navModalBack .navModal li a,
.navInferior .navModalBack .navModal li span {
  aspect-ratio: 1/1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  max-width: 50px;
  gap: 0.5rem;
  cursor: pointer;
  color: rgb(112, 112, 112);
  height: 78px;
}
.navInferior .navModalBack .navModal li a i,
.navInferior .navModalBack .navModal li span i {
  font-size: 26px;
}
.navInferior .navModalBack .navModal li a p,
.navInferior .navModalBack .navModal li span p {
  height: 20px;
  text-align: center;
  font-size: 8px;
}
.navInferior .navModalBack .navModal li a:hover i, .navInferior .navModalBack .navModal li a:active i, .navInferior .navModalBack .navModal li a:hover p, .navInferior .navModalBack .navModal li a:active p,
.navInferior .navModalBack .navModal li span:hover i,
.navInferior .navModalBack .navModal li span:active i,
.navInferior .navModalBack .navModal li span:hover p,
.navInferior .navModalBack .navModal li span:active p {
  color: #0038FF;
  transition: color 200ms ease;
}
.navInferior .navModalBack .navModal li a.seleccionado p, .navInferior .navModalBack .navModal li a.seleccionado i, .navInferior .navModalBack .navModal li a.selecionado p, .navInferior .navModalBack .navModal li a.selecionado i,
.navInferior .navModalBack .navModal li span.seleccionado p,
.navInferior .navModalBack .navModal li span.seleccionado i,
.navInferior .navModalBack .navModal li span.selecionado p,
.navInferior .navModalBack .navModal li span.selecionado i {
  color: #0038FF;
}

.ulOpcionesV2 ul {
  width: 100%;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.ulOpcionesV2 ul li {
  text-align: center;
  padding: 0.5em;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
}
.ulOpcionesV2 ul li i {
  font-size: 1.5em;
}
.ulOpcionesV2 ul li a {
  display: grid;
  grid-gap: 0.5em;
}
.ulOpcionesV2 ul .seleccionado {
  border-radius: 0.5em;
  background: #0038FF;
}
.ulOpcionesV2 ul .seleccionado a {
  color: #fff;
}

.usAvatar {
  width: 40px;
  height: 40px;
  padding: 1px;
  border: solid 1px #e2e2e2;
  border-radius: 50%;
}
.usAvatar .img {
  border: solid 1px #e2e2e2;
  border-radius: 100%;
  overflow: hidden;
}
.usAvatar .img img {
  width: 100%;
  height: 100%;
}

.productoItem {
  position: relative;
  display: grid;
  grid-gap: 1em;
  margin-bottom: 1em;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
}
.productoItem .header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1em;
  padding-bottom: 1em;
  border-bottom: solid 1px #e2e2e2;
}
.productoItem .header .img {
  width: 40px;
  height: 40px;
  padding: 1px;
  border: solid 1px #e2e2e2;
  border-radius: 50%;
}
.productoItem .header .img img {
  width: 100%;
  height: 100%;
  border: solid 1px #e2e2e2;
  border-radius: 100%;
}
.productoItem .header .txt {
  display: grid;
}
.productoItem .header .xtra {
  display: grid;
  text-align: center;
}
.productoItem .header .menuXtraRight .opciones {
  z-index: 2;
}
.productoItem .body {
  position: relative;
  overflow-x: hidden;
}
.productoItem .body::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  z-index: 1;
}
.productoItem .body.alertaDefecto::before {
  background: none;
}
.productoItem .body .listUrl {
  display: grid;
  grid-gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.productoItem .body .listUrl li {
  position: relative;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.productoItem .body .listUrl li a {
  overflow: hidden;
  text-overflow: ellipsis;
}
.productoItem .body .listUrl li .remove {
  position: absolute;
  top: -0.5em;
  right: 0%;
  padding: 0.5em 0.3em 0em 0.5em;
  color: red;
  background: #fff;
  cursor: pointer;
  z-index: 1;
}
.productoItem .body .listUrl li .remove::before {
  position: absolute;
  top: 0;
  left: -2.5em;
  content: "";
  width: 32px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
  z-index: 1;
}
.productoItem .footer {
  display: grid;
  gap: 1em;
  padding-top: 1em;
  border-top: dashed 1px #e2e2e2;
}
.productoItem .footer .btns {
  display: flex;
  gap: 0.5em;
  grid-auto-flow: column;
  display: none;
}
.productoItem .footer .btns .btn {
  width: 100%;
}
.productoItem .footer .btns i {
  display: none;
}
.productoItem .footer .btnsEscritorio {
  gap: 0.5em;
  grid-auto-flow: column;
  display: none;
}
.productoItem .footer .xtra {
  text-align: center;
}
.productoItem .mostrar {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  word-break: keep-all;
}
.productoItem .mostrar::before, .productoItem .mostrar::after {
  content: "";
  border-top: solid 1px #e2e2e2;
}

.subProducto {
  position: relative;
  display: grid;
  padding: 1em;
  border-radius: 0.3em;
  background: #EEF2FF;
}
.subProducto .item {
  display: flex;
  padding: 1em 0;
  border-bottom: dashed 1px #e2e2e2;
}
.subProducto .item .dato {
  display: grid;
  grid-gap: 0.5em;
  flex: 1;
}
.subProducto .item .btns {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}
.subProducto .item > .twoBtns {
  display: flex;
  gap: 0.24rem;
  margin-left: 0.5rem;
}
.subProducto .item > .twoBtns > .btn {
  padding: 0 4px 4px 4px;
  /*      border: 1px solid red; */
  height: fit-content;
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
}
.subProducto .item > .twoBtns > .btn i {
  align-self: self-start;
  font-size: 12px;
  color: #0038FF;
}
.subProducto .item > .twoBtns > .btn:hover i, .subProducto .item > .twoBtns > .btn:active i {
  color: #000;
}
.subProducto .item > .twoBtns > .btn.tool {
  padding: 4px;
  margin-top: -4px;
}
.subProducto .item:first-child {
  padding-top: 0;
}
.subProducto .item:last-child {
  border: none;
  padding-bottom: 0;
}
.subProducto .xtras {
  padding-top: 1em;
}
.subProducto .itemNulo {
  padding: 0.5em;
  background: rgb(237, 237, 237);
  cursor: not-allowed;
}
.subProducto .itemNulo .info {
  width: fit-content;
  padding: 0.5em;
  border: solid 1px rgb(167, 167, 167);
  background: solid 1px rgb(193, 193, 193);
}
.subProducto .itemNulo .btns {
  opacity: 0.3;
}
.subProducto .itemNulo .btns .btn {
  cursor: not-allowed;
}

.botInfoIniciado {
  padding: 0.3em;
  color: rgb(66, 145, 65);
  border: solid 1px rgb(66, 145, 65);
}

.botInfoCaducado {
  padding: 0.3em;
  color: #E5E5E5;
  background: rgb(136, 136, 136);
}

.botInfoUrl {
  padding: 0.3em;
  color: #0038FF;
  border: solid 1px #0038FF;
  background: none;
}
.botInfoUrl:hover {
  color: #fff;
  background: #0038FF;
}

.tablaProducto thead tr th {
  padding: 0.5em 0.3em;
  text-align: center;
}
.tablaProducto tr td {
  padding: 0.3em;
  text-align: center;
}
.tablaProducto input {
  width: 100%;
  height: 100%;
  padding: 0.5em 0.3em;
  border: solid 1px #ced4da;
  border-radius: 0.3em;
}

.bloqueDescuento {
  display: grid;
  grid-gap: 1em;
}
.bloqueDescuento .previo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.bloqueDescuento .edicion {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: end;
  padding: 1em 0;
  border-top: dashed 1px #e2e2e2;
}
.bloqueDescuento .consulta {
  max-height: 250px;
  display: grid;
  grid-gap: 0.5em;
  overflow-y: auto;
}
.bloqueDescuento .consulta .item {
  display: grid;
  grid-gap: 1em;
  padding: 0.5em;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
}
.bloqueDescuento .consulta .item .intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bloqueDescuento .consulta .item .intro div {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.bloqueDescuento .consulta .item .resumen {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
}
.bloqueDescuento .consulta .item .resumen ul {
  display: grid;
  grid-gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 768px) {
  .ulOpcionesV2 ul {
    display: flex;
    gap: 1em;
  }
  .ulOpcionesV2 ul li {
    border: none;
  }
  .productoItem .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .productoItem .footer .btns {
    display: flex;
  }
  .productoItem .footer .btn {
    width: auto !important;
  }
  .productoItem .footer .btn i {
    display: inline-block;
  }
}
.transaccionesFiltro {
  display: grid;
  grid-gap: 1em;
}
.transaccionesFiltro .item5 .btn {
  width: 100%;
}

.transaccionesEstadistica {
  max-width: 500px;
  display: flex;
  margin: 0 auto;
}
.transaccionesEstadistica img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .transaccionesFiltro {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: flex-end;
  }
}
.suscripcionesFiltro {
  display: grid;
  grid-gap: 1em;
}
.suscripcionesFiltro .item6 .btn {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .suscripcionesFiltro {
    grid-template-columns: repeat(4, 1fr);
    align-items: flex-end;
  }
  .suscripcionesFiltro .item6 .btn {
    width: auto;
  }
}
.reembolsablesFiltro {
  display: grid;
  grid-gap: 1em;
}
.reembolsablesFiltro .item3 .btn {
  width: 100%;
}

.noTablaSub {
  display: grid;
  padding-top: 1em;
  border-top: solid 1px #e2e2e2;
}
.noTablaSub .noTablaHeader {
  display: none;
}
.noTablaSub .noTablaItem {
  margin-bottom: 1em;
  padding: 0 0 1em 0;
  border-bottom: solid 1px #e2e2e2;
}
.noTablaSub .noTablaItem .itemDatos {
  display: flex;
}
.noTablaSub .noTablaItem .itemDatos .datos1 {
  flex: 1;
  display: grid;
  grid-gap: 0.5em;
}
.noTablaSub .noTablaItem .itemDatos .datos1 .titulo {
  font-weight: bold;
}
.noTablaSub .noTablaItem .itemDatos .datos2 {
  display: grid;
  grid-gap: 0.5em;
  padding-left: 0.5em;
  border-left: solid 1px #e2e2e2;
}
.noTablaSub .noTablaItem:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.subItemDatos {
  display: grid;
  margin-top: 1em;
  border-radius: 0.5em;
  overflow: hidden;
}
.subItemDatos .subHeader {
  display: none;
}
.subItemDatos .subItem {
  display: flex;
  padding: 0.5em;
  align-items: flex-start;
  border-bottom: solid 1px #e2e2e2;
  background: #F0F0F0;
}
.subItemDatos .subItem .datos1 {
  flex: 1;
  display: grid;
  grid-gap: 0.5em;
}
.subItemDatos .subItem .datos1 .titulo {
  font-weight: bold;
}
.subItemDatos .subItem .datos2 {
  display: grid;
  grid-gap: 0.5em;
  padding-left: 0.5em;
}
.subItemDatos:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media screen and (min-width: 768px) {
  .reembolsablesFiltro {
    grid-template-columns: repeat(4, 1fr);
    align-items: flex-end;
  }
  .reembolsablesFiltro .item3 .btn {
    width: auto;
  }
  .noTablaSub {
    padding-top: 0;
    border-top: none;
  }
  .noTablaSub .noTablaHeader {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: flex-end;
    color: #fff;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    background: #0038FF;
  }
  .noTablaSub .noTablaHeader .td {
    padding: 1em;
    text-align: center;
  }
  .noTablaSub .noTablaHeader .td:first-child {
    text-align: left;
  }
  .noTablaSub .noTablaHeader .td:last-child {
    text-align: right;
  }
  .noTablaSub .noTablaItem {
    margin-bottom: 0;
    padding: 1em;
    border-bottom: solid 1px #e2e2e2;
    border-top: none;
  }
  .noTablaSub .noTablaItem .itemDatos {
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
  .noTablaSub .noTablaItem .itemDatos .datos1 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    text-align: center;
  }
  .noTablaSub .noTablaItem .itemDatos .datos1 .td {
    text-align: center;
  }
  .noTablaSub .noTablaItem .itemDatos .datos1 .td:first-child {
    text-align: left;
  }
  .noTablaSub .noTablaItem .itemDatos .datos1 .td .none {
    display: none;
  }
  .noTablaSub .noTablaItem .itemDatos .datos1 .titulo {
    font-weight: normal;
  }
  .noTablaSub .noTablaItem .itemDatos .datos2 {
    display: flex;
    gap: 0.5em;
    padding-left: 0;
    justify-content: right;
    border-left: none;
  }
  .subItemDatos .subHeader {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.5em;
    text-align: center;
    background: #E1E1E1;
  }
  .subItemDatos .subHeader .td {
    padding: 0.5em;
    text-align: center;
  }
  .subItemDatos .subHeader .td:first-child {
    text-align: left;
  }
  .subItemDatos .subHeader .td:last-child {
    text-align: right;
  }
  .subItemDatos .subItem {
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
  }
  .subItemDatos .subItem .datos1 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
  }
  .subItemDatos .subItem .datos1 .td {
    text-align: center;
  }
  .subItemDatos .subItem .datos1 .td:first-child {
    text-align: left;
  }
  .subItemDatos .subItem .datos1 .td .none {
    display: none;
  }
  .subItemDatos .subItem .datos1 .titulo {
    font-weight: normal;
  }
  .subItemDatos .subItem .datos2 {
    display: flex;
    gap: 0.5em;
    padding-left: 0;
    justify-content: right;
    border-left: none;
  }
}
.canalPrevio {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1em;
  padding: 1em 0;
  border-top: dashed 1px #e2e2e2;
  border-bottom: dashed 1px #e2e2e2;
}

.canalItemHead {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.canalItemHead h3 {
  margin: 0;
}
.canalItemHead .infoEnlaces {
  width: auto;
  display: flex;
  align-items: center;
  margin-left: 1em;
  padding-left: 1em;
  border-left: solid 1px #e2e2e2;
}
.canalItemHead .infoEnlaces strong {
  margin-right: 0.5em;
}
.canalItemHead .usuariosF {
  grid-column: 2;
  font-size: 10px;
  color: #747474;
}

.canalItemHead:has(.usuariosF) {
  row-gap: 0.3rem;
}

.canalItemBody {
  display: grid;
  grid-gap: 1em;
  padding: 1em 0;
  border-top: solid 1px #e2e2e2;
  border-bottom: dashed 1px #e2e2e2;
}

.canalItemFooter {
  display: flex;
  align-items: center;
  align-content: stretch;
}
.canalItemFooter .none {
  display: none;
}

.canalItemHeadF {
  display: flex;
  width: 100%;
  gap: 1em;
  justify-content: space-between;
  align-items: center;
}
.canalItemHeadF .navNom {
  display: flex;
  column-gap: 1em;
}
.canalItemHeadF .navNom .menuXtra, .canalItemHeadF .navNom .menuXtraRight {
  display: inline-flex;
  align-items: center;
}
.canalItemHeadF .navNom > h3 {
  margin-bottom: 0;
  text-wrap: nowrap;
}

.canalItemHeadF:has(.avisos) {
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (min-width: 768px) {
  .canalItemHeadF:has(.avisos) {
    align-items: center;
    flex-direction: row;
    /* .avisos{
      margin: 0 auto;
    } */
  }
}

.canalItem {
  display: grid;
  grid-gap: 1em;
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
}
.canalItem .itemDetalle {
  display: grid;
  grid-gap: 1em;
}
.canalItem .itemDetalle .datos {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1em;
}
.canalItem .itemDetalle .datos .nombre {
  display: grid;
  grid-gap: 0.5em;
}
.canalItem .itemDetalle .datos .nombre .enlace {
  position: relative;
  overflow-x: hidden;
}
.canalItem .itemDetalle .datos .nombre .enlace::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  content: "";
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}
.canalItem .info {
  display: flex;
  overflow-x: auto;
}
.canalItem .info ul {
  margin: 0;
  padding: 0;
  display: flex;
  font-size: 0.9em;
  list-style: none;
}
.canalItem .info ul li {
  display: grid;
  padding: 0.5em;
  text-align: center;
  border-left: solid 1px #e2e2e2;
}
.canalItem .info ul li:first-child {
  border: none;
}
.canalItem .zonaBtns {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5em;
}
.canalItem .canalItemBtns {
  display: grid;
  grid-gap: 1em;
  grid-auto-flow: column;
}
.canalItem .mostrar {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  word-break: keep-all;
}
.canalItem .mostrar::before, .canalItem .mostrar::after {
  content: "";
  border-top: solid 1px #e2e2e2;
}
.canalItem .mostrar > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.canalItem .mostrar > span i {
  height: fit-content;
  margin-top: 2px;
}
.canalItem .mostrar > span p {
  margin-bottom: 0;
}

.canalEnlaces {
  display: grid;
  grid-gap: 1em;
  padding: 1em;
  border: solid 1px #EBEBEB;
  border-radius: 0.5em;
  background: #F2F2F2;
  overflow-x: auto;
}

.canalSub {
  display: grid;
  padding: 1em;
  border: solid 1px #EBEBEB;
  border-radius: 0.5em;
  background: #F2F2F2;
  overflow-x: auto;
}

.canalSubHead {
  display: flex;
}

.canalSubBody {
  display: grid;
  grid-gap: 1em;
  margin: 1em 0;
  padding: 1em 0;
  border-top: solid 1px #e2e2e2;
  border-bottom: solid 1px #e2e2e2;
}

.canalSubFooter {
  display: flex;
  justify-content: right;
  padding-bottom: 1em;
}

.canalSubItem {
  display: grid;
  grid-gap: 1em;
  padding-bottom: 1em;
  border-bottom: dashed 1px #e2e2e2;
}
.canalSubItem:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.textLink {
  color: #0038FF;
  transition: color;
  cursor: pointer;
}
.textLink:active, .textLink:hover {
  color: #000;
}

.textLinkAdd {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.textLinkAdd > span {
  display: inline-flex;
  color: #0038FF;
  transition: color;
  cursor: pointer;
  align-items: center;
  gap: 0.2rem;
}
.textLinkAdd > span p {
  margin-bottom: 0;
}
.textLinkAdd > span i {
  height: fit-content;
}
.textLinkAdd > span:active, .textLinkAdd > span:hover {
  color: #000;
}

.modal {
  background-color: rgba(0, 0, 0, 0);
}

@media screen and (min-width: 768px) {
  .canalItem .canalItemBtns {
    display: flex;
    gap: 1em;
  }
  .canalSubItem {
    grid-template-columns: 1fr 1fr auto;
  }
  .canalFooter .none {
    display: inline-block;
  }
}
/* nuevo item con Flex*/
.canalItemF {
  display: flex;
  grid-gap: 1em;
  margin: 0 0 1em 0;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background-color: #fff;
  flex-direction: column;
  width: 100%;
}
.canalItemF .mostrar {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  word-break: keep-all;
}
.canalItemF .mostrar::before, .canalItemF .mostrar::after {
  content: "";
  border-top: solid 1px #e2e2e2;
}
.canalItemF .mostrar > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.canalItemF .mostrar > span i {
  height: fit-content;
  margin-top: 4px;
}
.canalItemF .mostrar > span p {
  margin-bottom: 0;
}

.canalItemHeadF {
  display: flex;
  width: 100%;
  gap: 1em;
  justify-content: space-between;
  align-items: center;
}
.canalItemHeadF .navNom {
  display: flex;
  column-gap: 1em;
  position: relative;
}
.canalItemHeadF .navNom .menuXtra, .canalItemHeadF .navNom .menuXtraRight {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.canalItemHeadF .navNom > h3 {
  margin-bottom: 0;
  text-wrap: nowrap;
}

.canalItemHeadF:has(.avisos) {
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (min-width: 768px) {
  .canalItemHeadF:has(.avisos) {
    /*      align-items: center;
         flex-direction: row; */
    /*  .avisos{
       margin: 0 auto;
     } */
  }
}

.canalEnlacesF {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  overflow: hidden;
}
.canalEnlacesF .canalEnlacesHead {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: space-between;
}
.canalEnlacesF .canalEnlacesHead .consulta {
  display: flex;
  width: 100%;
  max-width: 490px;
  gap: 0.5rem;
  flex-direction: column;
}
@media screen and (min-width: 600px) {
  .canalEnlacesF .canalEnlacesHead .consulta {
    flex-direction: row;
  }
}
@media screen and (min-width: 768px) {
  .canalEnlacesF .canalEnlacesHead .consulta {
    gap: 1rem;
  }
}
.canalEnlacesF .canalEnlacesHead .consulta .inputs {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .canalEnlacesF .canalEnlacesHead .consulta .inputs {
    gap: 1rem;
  }
}
.canalEnlacesF .canalEnlacesHead .consulta .groupInput {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
}
.canalEnlacesF .canalEnlacesHead .consulta > .btn {
  align-self: flex-end;
}
@media screen and (min-width: 768px) {
  .canalEnlacesF .canalEnlacesHead .consulta > .btn {
    align-self: flex-end;
  }
}
.canalEnlacesF .canalEnlacesBody {
  /*  display: flex; */
  /*   flex-direction: column; */
  overflow: hidden;
  width: 100%;
}
.canalEnlacesF .canalEnlacesBody > .section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  overflow: hidden;
  padding: 3px;
}
.canalEnlacesF .canalEnlacesBody .selects,
.canalEnlacesF .canalEnlacesBody .section .selects {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .canalEnlacesF .canalEnlacesBody .selects,
  .canalEnlacesF .canalEnlacesBody .section .selects {
    justify-content: flex-end;
    gap: 1rem;
  }
}
.canalEnlacesF .canalEnlacesBody .selects > .formSearch,
.canalEnlacesF .canalEnlacesBody .section .selects > .formSearch {
  flex: 1 1 60%;
}
@media screen and (min-width: 768px) {
  .canalEnlacesF .canalEnlacesBody .selects > .formSearch,
  .canalEnlacesF .canalEnlacesBody .section .selects > .formSearch {
    max-width: 320px;
  }
}
.canalEnlacesF .canalEnlacesBody .selects > .wrappSelectFormat,
.canalEnlacesF .canalEnlacesBody .section .selects > .wrappSelectFormat {
  flex: 1 1 40%;
}
@media screen and (min-width: 768px) {
  .canalEnlacesF .canalEnlacesBody .selects > .wrappSelectFormat,
  .canalEnlacesF .canalEnlacesBody .section .selects > .wrappSelectFormat {
    max-width: 220px;
  }
}

.friendlies {
  display: flex;
  row-gap: 0.8rem;
  column-gap: 1.3rem;
  flex-direction: column;
}
@media screen and (min-width: 600px) {
  .friendlies {
    flex-direction: row;
    align-items: center;
  }
}
.friendlies span.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
}
.friendlies span.tag > i {
  color: #0038FF;
  background-color: #F2F5FF;
  font-size: 36px;
  border-radius: 100px;
  overflow: hidden;
  padding: 4px;
  flex: 0 0 36px;
  box-sizing: content-box;
}
.friendlies span.tag > p {
  font-size: 11px;
  margin-bottom: 0;
  line-height: 0.8;
}
.friendlies span.tag > p > .num {
  color: #0038FF;
  font-size: 25px;
  font-weight: 600;
  line-height: 0.8;
}
.friendlies .btns {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}
@media screen and (min-width: 600px) {
  .friendlies .btns {
    display: inline-flex;
    max-width: fit-content;
  }
}
.friendlies .btns .btnLineSmall,
.friendlies .btns .btnSmall {
  height: 23px;
  border-radius: 3px;
  background-color: #0038FF;
  color: #fff;
  cursor: pointer;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 0.8;
  font-size: 10px;
  transition: all 200ms ease;
  text-wrap-mode: nowrap;
  width: 100%;
  justify-content: center;
}
.friendlies .btns .btnLineSmall i,
.friendlies .btns .btnSmall i {
  font-size: 10px;
  height: fit-content;
  line-height: 0.8;
}
.friendlies .btns .btnLineSmall:hover,
.friendlies .btns .btnSmall:hover {
  background-color: #000;
}
@media screen and (min-width: 600px) {
  .friendlies .btns .btnLineSmall,
  .friendlies .btns .btnSmall {
    min-width: 140px;
  }
}
.friendlies .btns .btnLineSmall {
  background-color: transparent;
  border: 1px solid #0038FF;
  color: #0038FF;
}
.friendlies .btns .btnLineSmall:hover {
  border: 1px solid #000;
  color: #000;
  background-color: transparent;
}

/* estilos compartidos en banner */
.banner .colorB {
  font-weight: 600;
  display: inline-flex;
  gap: 0.1em;
  color: #0038FF;
}
.banner .colorB i {
  font-weight: 900;
  height: fit-content;
}
.banner P {
  line-height: 1.2;
}
.banner .cPendiente {
  color: #ffab19;
}
.banner .cActivo {
  color: #2EAA32;
}

.banner.stepC,
.banner.stepD,
.banner.stepA {
  display: flex;
  gap: 0.5rem;
}
.banner.stepC > picture,
.banner.stepD > picture,
.banner.stepA > picture {
  height: fit-content;
}
.banner.stepC > picture img,
.banner.stepD > picture img,
.banner.stepA > picture img {
  width: 70px;
  object-fit: contain;
  object-position: center top;
  align-self: flex-start;
}
@media screen and (min-width: 768px) {
  .banner.stepC > picture img,
  .banner.stepD > picture img,
  .banner.stepA > picture img {
    width: 75px;
  }
}
.banner.stepC .content,
.banner.stepD .content,
.banner.stepA .content {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.banner.stepC .content .txt > ul,
.banner.stepD .content .txt > ul,
.banner.stepA .content .txt > ul {
  list-style-type: circle !important;
  margin-block-start: 0.5rem;
  padding-left: 1.1rem;
}
.banner.stepC .content .txt > ul li::marker,
.banner.stepD .content .txt > ul li::marker,
.banner.stepA .content .txt > ul li::marker {
  color: #0038FF;
}
.banner.stepC .content .btns,
.banner.stepD .content .btns,
.banner.stepA .content .btns {
  display: flex;
  flex-direction: row;
  height: fit-content;
  gap: 0.5rem;
}
@media screen and (min-width: 768px) {
  .banner.stepC .content,
  .banner.stepD .content,
  .banner.stepA .content {
    flex-direction: row;
    justify-content: space-between;
  }
}
.banner.stepC .content .panelVideo,
.banner.stepD .content .panelVideo,
.banner.stepA .content .panelVideo {
  margin-left: auto;
  background-color: #fcfcfc;
  cursor: pointer;
  border-radius: 0.5em;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  height: 100%;
  min-height: 75px;
  width: 100%;
  transition: all 200ms ease;
}
.banner.stepC .content .panelVideo > img,
.banner.stepD .content .panelVideo > img,
.banner.stepA .content .panelVideo > img {
  margin-top: auto;
  margin-bottom: -0.6rem;
  object-position: bottom;
  width: 42px;
}
.banner.stepC .content .panelVideo > div,
.banner.stepD .content .panelVideo > div,
.banner.stepA .content .panelVideo > div {
  width: 100%;
  margin: 0.4rem 0;
}
.banner.stepC .content .panelVideo .play,
.banner.stepD .content .panelVideo .play,
.banner.stepA .content .panelVideo .play {
  align-self: flex-end;
}
@media screen and (min-width: 768px) {
  .banner.stepC .content .panelVideo .play,
  .banner.stepD .content .panelVideo .play,
  .banner.stepA .content .panelVideo .play {
    margin-top: 0.3rem;
  }
}
.banner.stepC .content .panelVideo:hover,
.banner.stepD .content .panelVideo:hover,
.banner.stepA .content .panelVideo:hover {
  border-color: #cfcfcf;
}
.banner.stepC .content .panelVideo:hover h3, .banner.stepC .content .panelVideo:hover p,
.banner.stepD .content .panelVideo:hover h3,
.banner.stepD .content .panelVideo:hover p,
.banner.stepA .content .panelVideo:hover h3,
.banner.stepA .content .panelVideo:hover p {
  color: #000;
}
@media screen and (min-width: 768px) {
  .banner.stepC .content .panelVideo,
  .banner.stepD .content .panelVideo,
  .banner.stepA .content .panelVideo {
    height: 103px;
    width: 215px;
  }
}

.banner .block {
  width: 100%;
}
.banner .listNumber {
  font-size: 10px;
  position: relative;
  padding-left: 1.5rem;
  font-size: 12.8px;
}
.banner .listNumber::after {
  content: attr(data-number);
  font-weight: 600;
  position: absolute;
  left: 0;
  top: -2px;
  color: #4421FF;
  border-radius: 50px;
  border: 1px solid #4421FF;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  aspect-ratio: 1/1;
  height: fit-content;
}

.zonaForms {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
}
@media screen and (min-width: 1000px) {
  .zonaForms {
    flex-direction: row;
  }
}
.zonaForms > div {
  width: 100%;
}

.banner.stepB {
  display: grid;
  grid-template-columns: 70px auto;
  grid-template-rows: auto;
  column-gap: 1rem;
  row-gap: 0;
}
.banner.stepB > picture {
  grid-column: 1/2;
}
.banner.stepB > .pOut {
  grid-column: 1/3;
}
.banner.stepB > .blockB {
  border-top: 1px;
  grid-column: 1/3;
  border-top: 1px dashed #efefef;
  padding-top: 1rem;
  margin-top: 1rem;
}
.banner.stepB > .blockB > .btns .btn {
  height: fit-content;
  width: 100%;
  margin-top: 1rem;
}
@media screen and (min-width: 576px) {
  .banner.stepB > .blockB > .btns .btn {
    width: fit-content;
  }
}
@media screen and (min-width: 768px) {
  .banner.stepB {
    grid-template-columns: 75px 0.8fr 1.2fr;
  }
  .banner.stepB > picture {
    grid-column: 1/2;
    grid-row: 1/2;
    height: fit-content;
  }
  .banner.stepB > .blockA {
    grid-column: 2/3;
    grid-row: 1/2;
    height: fit-content;
  }
  .banner.stepB > .pOut {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .banner.stepB > .blockB {
    grid-column: 3/4;
    grid-row: 1/3;
    border-top: none;
    border-left: 1px dashed #efefef;
    padding-top: 0;
    padding-left: 1rem;
    display: grid;
    margin-top: 0;
  }
}

.linkPlay {
  display: flex;
  gap: 0.2rem;
  cursor: pointer;
  align-items: center;
}
.linkPlay p {
  color: #0038FF;
  transition: color 200ms ease;
  margin-bottom: 0;
  font-size: 12px;
}
.linkPlay:hover p {
  color: #000;
}

ul.listado {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: unset;
  overflow-x: hidden;
  list-style: none;
  margin-bottom: 0;
}

li.itemList {
  border-bottom: 1px solid #efefef;
}
li.itemList:last-child {
  border: none;
}

.itemHeader {
  display: grid;
  width: 100%;
  grid-template-columns: 1.1fr 0.8fr 1.1fr;
  padding: 0.5rem 0.5rem 0 0.5rem;
}
.itemHeader span {
  width: 100%;
  text-align: center;
  padding: 0;
}

.itemLink {
  display: grid;
  width: 100%;
  grid-template-columns: 1.1fr 0.8fr 1.1fr;
  padding: 0.8rem 0.5rem;
}
.itemLink > span {
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  gap: 0.2rem;
}
.itemLink > span i {
  font-size: 20px;
}
.itemLink > span i.icon-check-ok {
  color: #2EAA32;
  font-size: 19px;
}
.itemLink > span i.icon-check-ko {
  color: #c9c9c9;
}
.itemLink > span i.itemInfo {
  height: fit-content;
  cursor: pointer;
  color: #0038FF;
  font-size: 16px;
  font-weight: 400;
  padding-left: 1px;
  transition: color 200ms ease;
}
.itemLink > span i.itemInfo:hover {
  color: #000;
}
.itemLink > span.txt {
  justify-content: flex-start;
  gap: 0.5rem;
}
.itemLink > span.txt span {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  text-align: start;
}
.itemLink > span.txt p {
  margin-bottom: 0;
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.itemLink:hover {
  background: #e8f4ff;
}

.dropdownB {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.3s ease-out;
}
.dropdownB.active {
  grid-template-rows: 1fr;
}
.dropdownB .hiddenB {
  overflow: hidden;
}
.dropdownB .hiddenB > .contentB {
  padding-top: 6px;
}

.dropdownB .hiddenB .contentB .descripcionB {
  padding: 0.5rem;
}

.ppListadoPerfil {
  display: grid;
  grid-gap: 1em;
}

.ppPerfil {
  display: grid;
  grid-template-rows: 1fr;
  grid-gap: 1em;
  margin-bottom: 1em;
  padding: 0.5em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
}
.ppPerfil .detalle {
  display: flex;
  gap: 0.5em;
}
.ppPerfil .detalle .txt {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.ppPerfil .avisos {
  display: grid;
  grid-gap: 1em;
  padding-top: 1em;
  border-top: dashed 1px #e2e2e2;
}
.ppPerfil .opciones {
  display: block;
  padding-top: 1em;
  border-top: dashed 1px #e2e2e2;
}
.ppPerfil .xtraForm {
  display: grid;
  grid-gap: 1em;
  padding-top: 1em;
  border-top: dashed 1px #e2e2e2;
}

@media screen and (min-width: 768px) {
  .ppPerfil .xtraForm {
    display: flex;
    align-items: flex-end;
    gap: 1em;
  }
  .ppPerfil .xtraForm select {
    min-width: 250px;
  }
}
/*
@media screen and (min-width:$tamMd) {
$padding:1em;
$padding-xl:1.5em;
$padding-md:0.5em;
$padding-sm:0.3em;
$padding-especial:0.8em;


} */
.blockSelect {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5em;
  flex-direction: column;
  gap: 1.5em;
}
@media screen and (min-width: 900px) {
  .blockSelect {
    flex-direction: row;
  }
}
.blockSelect .tabsMensajes {
  width: 100%;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  column-gap: 3px;
}
@media screen and (min-width: 768px) {
  .blockSelect .tabsMensajes {
    max-width: 320px;
  }
}
.blockSelect .selects {
  display: flex;
  gap: 0.5em;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .blockSelect .selects {
    justify-content: flex-end;
  }
}
.blockSelect .selects > .formSearch {
  flex: 1 1 60%;
}
@media screen and (min-width: 768px) {
  .blockSelect .selects > .formSearch {
    max-width: 320px;
  }
}
.blockSelect .selects > .wrappSelectFormat {
  flex: 1 1 40%;
}
@media screen and (min-width: 768px) {
  .blockSelect .selects > .wrappSelectFormat {
    max-width: 220px;
  }
}

.tabsMensajes li {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  border-radius: 5px;
  overflow: hidden;
  text-wrap-mode: nowrap;
}
.tabsMensajes li span,
.tabsMensajes li a {
  color: black;
  width: fit-content;
  padding: 9px 12px;
}
.tabsMensajes li:hover a, .tabsMensajes li:hover span {
  color: #0038FF;
}
.tabsMensajes li.active span, .tabsMensajes li.active a {
  color: #0038FF;
  background-color: rgba(216, 216, 216, 0.2509803922);
}

.form-select.selectFormat {
  padding-left: 2rem !important;
  position: relative;
}

.wrappSelectFormat {
  position: relative;
}

.wrappSelectFormat::after {
  content: "\e9bf";
  font-family: "icomoon" !important;
  position: absolute;
  transform: translateY(-50%);
  left: 10px;
  top: 50%;
  color: black;
}

.bodyBase {
  background-color: white;
  display: flex;
  width: 100%;
  /*   &.ventaVideo{
      min-height: 100vh;
    } */
}

.headerBase {
  background-color: white;
  height: 45.78px;
  box-shadow: 0px 4px 4px 0px rgba(219, 219, 219, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 5;
}
@media (width > 600px) {
  .headerBase {
    padding: 0;
  }
}
.headerBase > .inner {
  width: 100%;
  max-width: 1550px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.headerBase > .inner > .logo {
  width: 127px;
  display: flex;
  padding-left: 24px;
}
.headerBase > .inner > .logo img {
  width: 100%;
  aspect-ratio: 32/5;
}
.headerBase > .inner > .navHeaderP {
  display: flex;
  padding: 15px 24px;
  background-color: transparent;
}
.headerBase > .inner > .navHeaderP img {
  aspect-ratio: 25/16;
  height: 12px;
}
.headerBase > .inner > .navHeaderP.hideP {
  display: none;
}
.headerBase > .inner > .btnText {
  padding-right: 24px;
}

.mainBase {
  width: 100%;
  overflow: hidden;
  max-width: 1554px;
  margin: 45.78px auto 0 auto;
  /*   @media screen and (min-width:$tamSm) {
      padding: 0 20px;
    } */
}

.mainBase .secProfesional {
  position: relative;
  display: flex;
  border: 1px solid #e2e2e2;
  overflow: hidden;
  height: 192px;
  width: 100%;
  margin-top: 12.8px;
  border-radius: 0.5em;
}
@media screen and (min-width: 600px) {
  .mainBase .secProfesional {
    height: 187px;
    margin-top: 12.8px;
  }
}
.mainBase .secProfesional {
  /*  & > picture{
      overflow: hidden;
      width: 100%;
      position: absolute; */
}
.mainBase .secProfesional > img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 192px;
  filter: blur(0px);
}
@media screen and (min-width: 600px) {
  .mainBase .secProfesional > img {
    height: 187px;
  }
}
.mainBase .secProfesional:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 56, 255, 0.44) 100%);
}
.mainBase .secProfesional {
  /* } */
}
.mainBase .secProfesional .glass {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  webkit-backdrop-filter: blur(5px) saturate(0.5);
  backdrop-filter: blur(5px) saturate(0.5);
}
.mainBase .secProfesional .glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(219, 219, 219, 0.22);
  pointer-events: none;
}

.secProfesional .innerInfo {
  z-index: 1;
  color: #F7F9FD;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 1rem;
  gap: 0.5rem;
  position: absolute;
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}
.secProfesional .innerInfo > .wrapp {
  display: flex;
  align-items: center;
  width: calc(100% - 65px);
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo > .wrapp {
    width: unset;
  }
}
.secProfesional .innerInfo > .wrapp > .contentImg {
  position: relative;
  outline: 2px solid white;
  border-radius: 100px;
  overflow: hidden;
  width: 65px;
  height: 65px;
  flex: 0 0 65px;
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo > .wrapp > .contentImg {
    width: 75px;
    height: 75px;
    flex: 0 0 75px;
  }
}
.secProfesional .innerInfo > .wrapp > .contentImg > .img {
  width: 65px;
  height: 65px;
  object-fit: cover;
  object-position: center;
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo > .wrapp > .contentImg > .img {
    width: 75px;
    height: 75px;
  }
}
.secProfesional .innerInfo > .wrapp > .contentImg > .maskPhoto {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(1px);
  display: grid;
  place-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100px;
  cursor: pointer;
}
.secProfesional .innerInfo > .wrapp > .contentImg > .maskPhoto img {
  width: 24px;
}
.secProfesional .innerInfo > .wrapp > .btnImgPort {
  display: flex;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo > .wrapp > .btnImgPort {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 1100px) {
  .secProfesional .innerInfo > .wrapp > .btnImgPort {
    transform: none;
    top: unset;
    left: unset;
    bottom: 1rem;
    right: 1rem;
  }
}
.secProfesional .innerInfo > .wrapp > .btnImgPort span {
  border-radius: 100px;
  transition: all 200ms ease;
  background-color: rgba(0, 0, 0, 0);
  padding: 6px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}
.secProfesional .innerInfo > .wrapp > .btnImgPort span > i {
  font-size: 12px;
}
.secProfesional .innerInfo > .wrapp > .btnImgPort span > p {
  font-size: 12px;
  margin-bottom: 0;
  color: white;
  font-weight: 100;
}
.secProfesional .innerInfo > .wrapp > .btnImgPort span:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.secProfesional .innerInfo .contentInfo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: fit-content;
  width: 100%;
  max-height: 100%;
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo .contentInfo {
    width: 70%;
    max-height: 95px;
    max-width: 500px;
  }
}
@media screen and (min-width: 1000px) {
  .secProfesional .innerInfo .contentInfo {
    max-width: 500px;
  }
}
.secProfesional .innerInfo .contentInfo > .title {
  color: white;
  margin-bottom: 0;
  font-family: "PrologueSemiBold", Arial, sans-serif;
  font-size: 16px;
}
.secProfesional .innerInfo .contentInfo .text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 100;
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo .contentInfo .text {
    -webkit-line-clamp: 4;
  }
}

.secProfesional .innerInfo .contentInfoInput {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  max-height: 100%;
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo .contentInfoInput {
    margin-top: 37px;
    width: 70%;
    max-width: 500px;
  }
}
@media screen and (min-width: 1000px) {
  .secProfesional .innerInfo .contentInfoInput {
    max-width: 500px;
  }
}
@media screen and (min-width: 1100px) {
  .secProfesional .innerInfo .contentInfoInput {
    margin-top: 0;
  }
}
.secProfesional .innerInfo .contentInfoInput .ventaVideo {
  width: 100%;
}
.secProfesional .innerInfo .contentInfoInput .ventaVideo input,
.secProfesional .innerInfo .contentInfoInput .ventaVideo textarea {
  background-color: transparent;
  color: white;
  border: 1px solid rgba(150, 182, 214, 0.5);
  background: rgba(150, 182, 214, 0.17);
  width: 100%;
}
.secProfesional .innerInfo .contentInfoInput .ventaVideo input::placeholder,
.secProfesional .innerInfo .contentInfoInput .ventaVideo textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.secProfesional .innerInfo .contentInfoInput .wrappTextArea.ventaVideo {
  flex: 1;
}
.secProfesional .innerInfo .contentInfoInput .wrappTextArea.ventaVideo textarea {
  width: 100%;
  border-radius: 3px;
  resize: none;
  height: 100%;
  padding: 4px 8px;
}
.secProfesional .innerInfo .contentInfoInput .wrappTextArea.ventaVideo textarea:focus-visible {
  border: 1px solid rgba(150, 182, 214, 0.5);
}
.secProfesional .innerInfo .contentInfoInput .wrappTextArea.ventaVideo textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
@media screen and (min-width: 600px) {
  .secProfesional .innerInfo .contentInfoInput .wrappTextArea.ventaVideo textarea {
    height: 74px;
  }
}
.secProfesional .innerInfo .contentInfoInput .ventaVideo.inputIconRight {
  position: relative;
}
.secProfesional .innerInfo .contentInfoInput .ventaVideo.inputIconRight > input {
  padding-right: 30px;
}
.secProfesional .innerInfo .contentInfoInput .ventaVideo.inputIconRight > span, .secProfesional .innerInfo .contentInfoInput .ventaVideo.inputIconRight > i {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
}

.secProfesional .innerInfo .tagEvents {
  display: flex;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  gap: 0.3rem;
  padding: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: fit-content;
}
.secProfesional .innerInfo .tagEvents span {
  border-radius: 100px;
  transition: all 200ms ease;
  background-color: rgba(0, 0, 0, 0);
  padding: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.secProfesional .innerInfo .tagEvents span > i {
  font-size: 12px;
}
.secProfesional .innerInfo .tagEvents span.cloud {
  padding: 0;
}
.secProfesional .innerInfo .tagEvents span.cloud > i {
  font-size: 16px;
}
.secProfesional .innerInfo .tagEvents span:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.boxContainerB {
  display: flex;
  border-radius: 0.5em;
  overflow: hidden;
  width: 100%;
}

.contentData {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
  flex: 1;
  padding: 0 0.5rem;
}
@media screen and (min-width: 600px) {
  .contentData {
    padding: unset;
  }
}

.secSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media screen and (min-width: 600px) {
  .secSummary {
    flex-wrap: nowrap;
  }
}
.secSummary .block {
  border-radius: 5px;
  border: 1px solid #D9D9D9;
  width: 100%;
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: 1rem;
  padding: 0.7rem;
  background-color: white;
}
.secSummary .block:nth-of-type(2), .secSummary .block:nth-of-type(1) {
  flex: 1 1 40%;
}
@media screen and (min-width: 600px) {
  .secSummary .block:nth-of-type(2), .secSummary .block:nth-of-type(1) {
    flex: 1 1 100%;
  }
}
.secSummary .block > .title {
  align-items: center;
  display: flex;
}
.secSummary .block > .title > i {
  font-size: 22px;
}
.secSummary .block > .title > p {
  margin-bottom: 0;
  font-size: 14px;
  margin-left: 0.5rem;
}
.secSummary .block > .number {
  font-size: 28px;
  line-height: 0.8;
}

.secCourses {
  border-radius: 5px;
  border: 1px solid #D9D9D9;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.7rem;
  gap: 1rem;
  flex: 1;
  background-color: white;
}
.secCourses > .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.secCourses > .header > .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
}
.secCourses > .boxSelect {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.secCourses > .boxSelect > nav {
  width: fit content;
}
.secCourses > .boxSelect > nav .tabs {
  width: 100%;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  column-gap: 3px;
}
.secCourses > .boxSelect > nav .tabs .tab {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  border-radius: 5px;
  overflow: hidden;
  text-wrap-mode: nowrap;
}
.secCourses > .boxSelect > nav .tabs .tab.active a, .secCourses > .boxSelect > nav .tabs .tab.active span {
  color: #0038FF;
  background-color: rgba(216, 216, 216, 0.2509803922);
}
.secCourses > .boxSelect > nav .tabs .tab:hover span, .secCourses > .boxSelect > nav .tabs .tab:hover a {
  color: #0038FF;
}
.secCourses > .boxSelect > nav .tabs .tab span, .secCourses > .boxSelect > nav .tabs .tab a {
  width: fit-content;
  padding: 9px 12px;
  font-size: 12px;
}
@media screen and (min-width: 600px) {
  .secCourses > .boxSelect > .input-group {
    max-width: 240px;
  }
}

.secCourses .contentInit {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
}
.secCourses .contentInit > .start {
  display: inline-flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
  margin: 2rem auto;
  justify-content: center;
  gap: 0.8rem;
}
.secCourses .contentInit > .start i {
  font-size: 100px;
  color: #96B6D6;
}
@media screen and (min-width: 600px) {
  .secCourses .contentInit > .start i {
    font-size: 124px;
  }
}
.secCourses .contentInit > .start p {
  color: #96B6D6;
  text-align: center;
  margin-bottom: 0;
  font-weight: 600;
}

.secCourses .contentTable {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.setupVideo {
  padding: 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
  display: flex;
  margin-top: 1rem;
  flex: 1;
}

.setupVideo .processNav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
  width: 100%;
}
.setupVideo .processNav > span {
  display: inline-flex;
  height: 35px;
  border-radius: 5px;
  outline: 1px solid #E2E8F0;
  display: flex;
  width: 100%;
  flex: 1 1 100%;
  color: #c9c9c9;
  align-items: center;
  justify-content: center;
  position: relative;
  text-wrap-mode: nowrap;
  padding: 0 0.6rem;
  transition: color 200ms ease;
  background-color: white;
}
.setupVideo .processNav > span.active {
  background-color: #F8fafc;
  background-color: white;
  color: #0038FF;
  outline-width: 2px;
}
@media screen and (min-width: 600px) {
  .setupVideo .processNav > span {
    flex: 0 0 170px;
  }
}
.setupVideo .processNav > span:nth-last-of-type(1)::after {
  content: "";
  height: 1px;
  top: 50%;
  width: 1rem;
  position: absolute;
  background-color: #E2E8F0;
  left: -1rem;
  position: absolute;
  transition: all 200ms ease;
}
.setupVideo .processNav > span:nth-last-of-type(1).active::after {
  height: 2px;
}

.setupVideo .processNav:has(span:nth-last-of-type(1).active) span {
  background-color: #F8fafc;
  background-color: white;
  color: #0038FF;
  outline-width: 2px;
}

.setupVideo .secSetup {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #E2E8F0;
  padding: 0.5rem;
  gap: 1rem;
  border-radius: 5px;
  background-color: white;
}
@media screen and (min-width: 1000px) {
  .setupVideo .secSetup {
    flex-direction: row;
  }
}

/* .setupVideo textarea */
.setupVideo .form-control {
  border-color: #E2E8F0;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
  border-color: #dc3545;
}

.form-control.is-valid, .was-validated .form-control:valid {
  border-color: #198754;
}

.setupVideo .secSetup .block {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.groupFileInputImg,
.groupFileInput {
  outline: 2px dashed #c9c9c9;
  outline-offset: -2px;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  height: 90px;
  position: relative;
  box-sizing: border-box;
}
.groupFileInputImg input,
.groupFileInput input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.groupFileInputImg label,
.groupFileInput label {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F8FAFC;
  transition: background-color 200ms ease;
  margin-bottom: 0;
  cursor: pointer;
  gap: 0.5rem;
}
.groupFileInputImg label p,
.groupFileInput label p {
  margin-bottom: 0;
}

.groupFileInputImg .selected,
.groupFileInput .selected {
  display: flex;
  padding: 12px;
  border: 2px dashed #27A923;
  background-color: #E5FFED;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;
  bottom: 0;
  box-sizing: border-box;
  gap: 0.5rem;
}
.groupFileInputImg .selected > img,
.groupFileInput .selected > img {
  border-radius: 5px;
  width: 114px;
  object-fit: cover;
  overflow: hidden;
  flex: 0 0 114px;
}
.groupFileInputImg .selected > .text,
.groupFileInput .selected > .text {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  gap: 0.3rem;
}
.groupFileInputImg .selected > .text p,
.groupFileInput .selected > .text p {
  margin-bottom: 0;
}
.groupFileInputImg .selected > .text p.ok,
.groupFileInput .selected > .text p.ok {
  color: #27A923;
}
.groupFileInputImg .selected span.icon,
.groupFileInput .selected span.icon {
  display: inline-flex;
  align-self: center;
  cursor: pointer;
  padding: 3px 0 3px 3px;
}
.groupFileInputImg .selected span.icon:active, .groupFileInputImg .selected span.icon:hover,
.groupFileInput .selected span.icon:active,
.groupFileInput .selected span.icon:hover {
  color: #27A923;
  font-weight: 900;
}

.groupFileInputImg {
  height: 109px;
}
@media screen and (min-width: 1000px) {
  .groupFileInputImg {
    height: 109px;
  }
}

.groupFileInput {
  height: 55px;
}
@media screen and (min-width: 1000px) {
  .groupFileInput {
    height: 109px;
  }
}

.fileInputIcon {
  overflow: hidden;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  border: 5px;
  height: 33.87px;
}
.fileInputIcon input {
  width: 100%;
  height: 33.87px;
  overflow: hidden;
  z-index: -1;
  border: 5px;
  border: 1px solid #E2E8F0;
  padding: 6px 12px;
}
.fileInputIcon label {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  transition: background-color 200ms ease;
  padding-left: 0.5rem;
  border-left: 1px solid #E2E8F0;
  cursor: pointer;
  position: absolute;
  right: 0;
}
.fileInputIcon label i {
  font-size: 14px;
}
.fileInputIcon label {
  /*  p{
     margin-bottom: 0;
   } */
}

.secSetup .label {
  margin-bottom: 6.4px;
}

.secSetup .separator {
  height: 1px;
  width: 100%;
  background-color: #E2E8F0;
}
@media screen and (min-width: 1000px) {
  .secSetup .separator {
    width: 1px;
    height: 100%;
  }
}

.secSetup .btns {
  display: flex;
  gap: 1rem;
  width: 100%;
}
.secSetup .btns .btn {
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  flex: 1 1 50%;
  width: 100%;
  color: #303437;
  height: 33px;
  padding: 0.3rem;
  align-items: center;
  text-wrap: nowrap;
  cursor: pointer;
  transition: all 200ms ease;
}
.secSetup .btns .btn:active, .secSetup .btns .btn:hover, .secSetup .btns .btn.active {
  border: 1px solid #0038FF;
}

.btnsFooter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 600px) {
  .btnsFooter {
    flex-direction: row-reverse;
    display: inline-flex;
  }
}
.btnsFooter .btn {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .btnsFooter .btn {
    width: fit-content;
    min-width: 124px;
  }
}
.btnsFooter .line::after {
  position: absolute;
  top: -0.25rem;
  content: "";
  background-color: #E2E8F0;
  width: 100%;
  height: 1px;
}
@media screen and (min-width: 600px) {
  .btnsFooter .line::after {
    top: unset;
    right: 0;
    height: 33.19px;
    width: 1px;
  }
}

.secState {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #E2E8F0;
  padding: 0.5rem;
  gap: 1rem;
  border-radius: 5px;
  background-color: white;
}
.secState .tagState {
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
  display: inline-flex;
  padding: 0.2rem 0.7rem;
  border: 1px solid;
  align-items: center;
  gap: 0.4rem;
}
.secState .tagState > i {
  font-size: 16px;
}
.secState .tagState.published {
  background-color: #E5FFED;
  color: #006A1E;
  border-color: #27A923;
}
.secState .tagState.draft {
  background-color: #FEF9EF;
  color: #EA993E;
  border-color: #EA993E;
}
.secState .tagState.disabled {
  background-color: #D9D9D9;
  color: #747474;
  border-color: #707070;
}

.secModulLessons {
  border: 1px solid #E2E8F0;
  padding: 0.5rem;
  gap: 1rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.secModulLessons:has(.contentInit) {
  flex: 1;
}

.secModulLessons .contentInit {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  background-color: #F8FAFC;
  border-radius: 5px;
  border: 1px dashed #C9C9C9;
}
.secModulLessons .contentInit > .start {
  display: inline-flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
  margin: 2rem auto;
  justify-content: center;
  gap: 0.8rem;
}
.secModulLessons .contentInit > .start i {
  font-size: 100px;
  color: #96B6D6;
}
@media screen and (min-width: 600px) {
  .secModulLessons .contentInit > .start i {
    font-size: 124px;
  }
}
.secModulLessons .contentInit > .start p {
  color: #96B6D6;
  text-align: center;
  margin-bottom: 0;
  font-weight: 600;
}

.secModulLessons .newModul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.secModulLessons .newModul p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 33.19px;
}
.secModulLessons .newModul p i {
  font-size: 18px;
}
.secModulLessons .newModul .btn {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .secModulLessons .newModul {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .secModulLessons .newModul .btn {
    width: fit-content;
  }
}

.secModulLessons ul.lessons,
.secModulLessons ul.moduls {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
  gap: 0.5rem;
}

.secModulLessons ul.lessons {
  padding-top: 1rem;
}

.secModulLessons ul.lessons > li,
.secModulLessons ul.moduls > li {
  border: 1px solid #E2E8F0;
  padding: 0.5rem;
  border-radius: 5px;
  display: flex;
  width: 100%;
  flex-direction: column;
  transition: background-color 200ms ease;
  background-color: white;
}
.secModulLessons ul.lessons > li.editable,
.secModulLessons ul.moduls > li.editable {
  background-color: #F8FAFC;
}
.secModulLessons ul.lessons > li > .title,
.secModulLessons ul.moduls > li > .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 33.19px;
}
.secModulLessons ul.lessons > li > .title > .info,
.secModulLessons ul.moduls > li > .title > .info {
  display: flex;
  gap: 0.4rem;
  width: fit-content;
  align-items: center;
  text-wrap-mode: nowrap;
}
.secModulLessons ul.lessons > li > .title > .info > .arrowOpen,
.secModulLessons ul.moduls > li > .title > .info > .arrowOpen {
  padding: 4px;
  cursor: pointer;
}
.secModulLessons ul.lessons > li > .title > .info > .arrowOpen:hover,
.secModulLessons ul.moduls > li > .title > .info > .arrowOpen:hover {
  color: #000;
}
.secModulLessons ul.lessons > li > .title > .info > p,
.secModulLessons ul.moduls > li > .title > .info > p {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 200;
  cursor: context-menu;
  line-height: 22px;
  border-radius: 3px;
}
.secModulLessons ul.lessons > li > .title > .info > p.editable,
.secModulLessons ul.moduls > li > .title > .info > p.editable {
  white-space: pre;
  padding: 0 0.3rem;
  margin-left: -0.3rem;
}
.secModulLessons ul.lessons > li > .title > .info > p.editable.pointer,
.secModulLessons ul.moduls > li > .title > .info > p.editable.pointer {
  cursor: pointer !important;
  background-color: #f7f7f7;
}
.secModulLessons ul.lessons > li > .title > .info > p.editable.hidden,
.secModulLessons ul.moduls > li > .title > .info > p.editable.hidden {
  display: none;
}
.secModulLessons ul.lessons > li > .title > .info > input.editable,
.secModulLessons ul.moduls > li > .title > .info > input.editable {
  display: none;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 200;
  cursor: context-menu;
  line-height: 22px;
  border-radius: 3px;
}
.secModulLessons ul.lessons > li > .title > .info > input.editable.show,
.secModulLessons ul.moduls > li > .title > .info > input.editable.show {
  display: block;
}
.secModulLessons ul.lessons > li > .title > .info > input.editable::placeholder,
.secModulLessons ul.moduls > li > .title > .info > input.editable::placeholder {
  display: none;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 200;
  cursor: context-menu;
}
.secModulLessons ul.lessons > li > .title > .delete,
.secModulLessons ul.moduls > li > .title > .delete {
  cursor: pointer;
  padding: 3px;
}
.secModulLessons ul.lessons > li > .title > .delete i,
.secModulLessons ul.moduls > li > .title > .delete i {
  font-size: 14px;
}
.secModulLessons ul.lessons > li.transparent,
.secModulLessons ul.moduls > li.transparent {
  background-color: transparent;
}

.secModulLessons ul.lessons > li > .content,
.secModulLessons ul.moduls > li > .content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}

.secModulLessons ul.lessons > li.active > .content,
.secModulLessons ul.moduls > li.active > .content {
  grid-template-rows: 1fr;
}

.secModulLessons ul.lessons > li .content > .hidden,
.secModulLessons ul.moduls > li .content > .hidden {
  overflow: hidden;
  display: flex;
}

.secModulLessons ul.moduls > li.active {
  background-color: #F8FAFC;
}

.secModulLessons .blocks {
  display: flex;
  flex-direction: column;
  width: 100%;
  /*   border: $borderVideo; */
  padding: 0.5rem;
  gap: 1rem;
  /*   border-radius: 5px; */
}
@media screen and (min-width: 1000px) {
  .secModulLessons .blocks {
    flex-direction: row;
    flex: 1 1 100%;
  }
}
.secModulLessons .blocks .block {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.secModulLessons ul.lessons .formList {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}
.secModulLessons ul.lessons .formList li div {
  width: 100%;
}
.secModulLessons ul.lessons .formList li:first-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}
.secModulLessons ul.lessons .formList li:last-child {
  width: 100%;
  display: flex;
}

.bodyCW {
  background-color: #F7F9FD;
  display: flex;
  width: 100%;
  /*   &.ventaVideo{
      min-height: 100vh;
    } */
}

.headerBase {
  background-color: white;
  height: 45.78px;
  box-shadow: 0px 4px 4px 0px rgba(219, 219, 219, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 5;
}
@media (width > 600px) {
  .headerBase {
    padding: 0;
  }
}
.headerBase > .inner {
  width: 100%;
  max-width: 1550px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.headerBase > .inner > .logo {
  width: 127px;
  display: flex;
  padding-left: 24px;
}
.headerBase > .inner > .logo img {
  width: 100%;
  aspect-ratio: 32/5;
}
.headerBase > .inner > .navHeaderP {
  display: flex;
  padding: 15px 24px;
  background-color: transparent;
}
.headerBase > .inner > .navHeaderP img {
  aspect-ratio: 25/16;
  height: 12px;
}
.headerBase > .inner > .navHeaderP.hideP {
  display: none;
}
.headerBase > .inner > .btnText {
  padding-right: 24px;
}

.mainBase {
  width: 100%;
  overflow: hidden;
  max-width: 1554px;
  margin: 45.78px auto 0 auto;
  /*   @media screen and (min-width:$tamSm) {
      padding: 0 20px;
    } */
}

/* estructura step1 y step 2.1*/
.mainBase article.artCampanyas2,
.mainBase article.artMarca {
  max-width: 600px;
  padding: 0 0.5rem;
  margin: 1rem auto;
  width: 100%;
}
.mainBase article.artCampanyas2 > .contentBox .set h3,
.mainBase article.artMarca > .contentBox .set h3 {
  display: inline-flex;
  margin-bottom: 0.3rem;
  gap: 0.3rem;
  font-weight: 600;
  align-items: center;
}
.mainBase article.artCampanyas2 > .contentBox .set h3 i,
.mainBase article.artMarca > .contentBox .set h3 i {
  align-self: flex-start;
}
.mainBase article.artCampanyas2 > .contentBox .set p,
.mainBase article.artMarca > .contentBox .set p {
  font-size: 14px;
  color: black;
}

/* estructura step2 //////////*/
.mainBase article.artCampanyas {
  max-width: 1550px;
  padding: 0 0.5rem;
  margin: 1rem auto;
  width: 100%;
}
.mainBase article.artCampanyas > .contentBox > .contentTitle {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mainBase article.artCampanyas > .contentBox > .contentTitle .btnBase {
  display: none;
}
.mainBase article.artCampanyas > .contentBox > .contentTitle .btnBase.visible {
  display: flex;
}
@media screen and (min-width: 600px) {
  .mainBase article.artCampanyas > .contentBox > .contentTitle {
    flex-direction: row;
    justify-content: space-between;
  }
  .mainBase article.artCampanyas > .contentBox > .contentTitle .btnBase {
    width: fit-content;
  }
}
.mainBase article.artCampanyas > .contentBox h3 {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  font-weight: 600;
  gap: 0.5rem;
}
.mainBase article.artCampanyas > .contentBox h3 > i:first-child {
  font-size: 22px;
}
.mainBase article.artCampanyas > .contentBox h4 {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  font-weight: 400;
  gap: 0.5rem;
}
.mainBase article.artCampanyas > .contentBox h4 > i:first-child {
  font-size: 18px;
}
.mainBase article.artCampanyas > .contentBox .line.hide {
  display: none !important;
}

.h3Campanyas.hide {
  display: none !important;
}

.pGeo {
  display: none;
}
.pGeo.visible {
  display: block;
}

/* Toggle Icon Styles */
.iconToggle {
  cursor: pointer;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  font-size: 28px;
}
.iconToggle.icon-toggle-on-fill-200 {
  color: #0038FF;
}

ul.moduls {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
  gap: 1rem;
  padding-top: 1rem;
}

ul.moduls > li {
  border: 1px solid #E2E8F0;
  padding: 0.5rem;
  border-radius: 5px;
  display: flex;
  width: 100%;
  flex-direction: column;
  transition: background-color 200ms ease;
  background-color: white;
}
ul.moduls > li.editable {
  background-color: #F8FAFC;
}
ul.moduls > li > .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 33.19px;
}
ul.moduls > li > .title > .info {
  display: flex;
  gap: 0.4rem;
  width: fit-content;
  align-items: center;
  text-wrap-mode: nowrap;
}
ul.moduls > li > .title > .info > .arrowOpen {
  padding: 4px;
  font-weight: bold;
  cursor: pointer;
}
ul.moduls > li > .title > .info > .arrowOpen:hover {
  color: #000;
}
ul.moduls > li > .title > .info > p {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 200;
  cursor: context-menu;
  line-height: 22px;
  border-radius: 3px;
}
ul.moduls > li > .title > .info > p.editable {
  white-space: pre;
  padding: 0 0.3rem;
  margin-left: -0.3rem;
  font-weight: bold;
  font-size: 12px;
  color: black;
  margin-bottom: 0;
}
ul.moduls > li > .title > .info > p.editable.pointer {
  cursor: pointer !important;
  background-color: #f7f7f7;
}
ul.moduls > li > .title > .info > p.editable.hidden {
  display: none;
}
ul.moduls > li > .title > .info > div.editable {
  display: none;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 200;
  cursor: context-menu;
  line-height: 22px;
  border-radius: 3px;
}
ul.moduls > li > .title > .info > div.editable.show {
  display: block;
}
ul.moduls > li > .title > .info > div.editable::placeholder {
  display: none;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 200;
  cursor: context-menu;
}
ul.moduls > li > .title > .delete {
  cursor: pointer;
  color: #dc3545;
  padding: 3px;
}
ul.moduls > li > .title > .delete i {
  font-size: 14px;
  font-weight: bold;
}
ul.moduls > li.transparent {
  background-color: transparent;
}

ul.moduls > li > .content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}

ul.moduls > li.active > .content {
  grid-template-rows: 1fr;
}

ul.moduls > li .content > .hidden {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

ul.moduls > li.active {
  background-color: #F8FAFC;
}

.gInput {
  grid-area: gInput;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}
.gInput select.bColor {
  border-radius: 0.3rem;
  position: relative;
  background: rgba(130, 130, 130, 0.1);
  border: none;
  width: 100%;
  height: 33.19px;
  padding: 0.3rem 0.5rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 1.8rem;
  background-image: none;
  appearance: none;
}
.gInput select.bColor option {
  appearance: none;
  background-color: white;
  border: none;
  outline: none;
}
.gInput select.bColor:focus-visible {
  outline: 0;
}
.gInput select.bColor:focus {
  outline: 1px solid rgb(118, 163, 215);
}
.gInput .iconArrow {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #0038FF;
  font-size: 14px;
}

.contentGroups,
section.secOptCountry {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms linear;
}
.contentGroups.active,
section.secOptCountry.active {
  /*  height: auto; */
  grid-template-rows: 1fr;
}
.contentGroups > .hidden,
section.secOptCountry > .hidden {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contentGroups > .hidden.visible,
section.secOptCountry > .hidden.visible {
  overflow: visible;
}
.contentGroups > .hidden > *:first-child,
section.secOptCountry > .hidden > *:first-child {
  margin-top: 1rem;
}
.contentGroups p,
section.secOptCountry p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}
.contentGroups .info,
section.secOptCountry .info {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 0.5rem;
}
.contentGroups .info i,
section.secOptCountry .info i {
  font-size: 14px;
}
.contentGroups .selectors,
section.secOptCountry .selectors {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.contentGroups .selectors .btnIntro,
section.secOptCountry .selectors .btnIntro {
  display: inline-flex;
  padding: 0.5rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  user-select: none;
}
.contentGroups .selectors .btnIntro:hover,
section.secOptCountry .selectors .btnIntro:hover {
  background-color: #f8fafc;
}
.contentGroups .selectors .btnIntro.active,
section.secOptCountry .selectors .btnIntro.active {
  border-color: #0038FF;
}
.contentGroups .selectors .optionSelectCheck,
section.secOptCountry .selectors .optionSelectCheck {
  position: relative;
  width: 250px;
}
.contentGroups .selectors .optionSelectCheck > .introClick,
section.secOptCountry .selectors .optionSelectCheck > .introClick {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.contentGroups .selectors .optionSelectCheck > .introClick.active,
section.secOptCountry .selectors .optionSelectCheck > .introClick.active {
  border-color: #0038FF;
}
.contentGroups .selectors .optionSelectCheck > .introClick > p,
section.secOptCountry .selectors .optionSelectCheck > .introClick > p {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
  text-wrap: nowrap;
}
.contentGroups .selectors .optionSelectCheck > .introClick > .iconCheck,
section.secOptCountry .selectors .optionSelectCheck > .introClick > .iconCheck {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  color: #64748b;
}
.contentGroups .selectors .optionSelectCheck > .introClick > .iconCheck i,
section.secOptCountry .selectors .optionSelectCheck > .introClick > .iconCheck i {
  font-size: 14px;
}
.contentGroups .selectors .optionSelectCheck > .introClick > .iconCheck.rotated,
section.secOptCountry .selectors .optionSelectCheck > .introClick > .iconCheck.rotated {
  transform: rotate(180deg);
}
.contentGroups .selectors .optionSelectCheck .optionsCheck,
section.secOptCountry .selectors .optionSelectCheck .optionsCheck {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background-color: white;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 10;
  max-height: 150px;
  overflow-y: auto;
  z-index: -2;
  min-width: 250px;
}
@media screen and (min-width: 520px) {
  .contentGroups .selectors .optionSelectCheck .optionsCheck,
  section.secOptCountry .selectors .optionSelectCheck .optionsCheck {
    max-width: 250px;
  }
}
@media screen and (min-width: 780px) {
  .contentGroups .selectors .optionSelectCheck .optionsCheck,
  section.secOptCountry .selectors .optionSelectCheck .optionsCheck {
    width: 100%;
    max-height: 350px;
    min-width: 350px;
  }
}
.contentGroups .selectors .optionSelectCheck .optionsCheck.show,
section.secOptCountry .selectors .optionSelectCheck .optionsCheck.show {
  z-index: 1;
  opacity: 1;
}
.contentGroups .selectors .optionSelectCheck .optionsCheck .optionCheck,
section.secOptCountry .selectors .optionSelectCheck .optionsCheck .optionCheck {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s ease;
  user-select: none;
}
.contentGroups .selectors .optionSelectCheck .optionsCheck .optionCheck:hover,
section.secOptCountry .selectors .optionSelectCheck .optionsCheck .optionCheck:hover {
  background-color: #f8fafc;
}
.contentGroups .selectors .optionSelectCheck .optionsCheck .optionCheck p.label,
section.secOptCountry .selectors .optionSelectCheck .optionsCheck .optionCheck p.label {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contentGroups .selectors .optionSelectCheck .optionsCheck .optionCheck i,
section.secOptCountry .selectors .optionSelectCheck .optionsCheck .optionCheck i {
  font-size: 18px;
  color: #cbd5e1;
  transition: color 0.2s ease;
}
.contentGroups .selectors .optionSelectCheck .optionsCheck .optionCheck i.icon-check-box-fill-200,
section.secOptCountry .selectors .optionSelectCheck .optionsCheck .optionCheck i.icon-check-box-fill-200 {
  color: #0038FF;
}
.contentGroups .selectors .optionSelectCheck .optionsCheck .optionCheck .label,
section.secOptCountry .selectors .optionSelectCheck .optionsCheck .optionCheck .label {
  font-size: 14px;
  color: #1e293b;
}

section.addedBlocks,
section.addedCampaigns {
  padding: 1rem 0 0 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
section.addedBlocks .contScroll,
section.addedCampaigns .contScroll {
  overflow-x: auto;
}

.areaBlocks,
.areaCampaign {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
  min-width: 780px;
  margin-bottom: 1rem;
}
.areaBlocks .header,
.areaCampaign .header {
  background-color: #0038FF;
  color: white;
  display: grid;
  grid-template-columns: 1.8fr 1fr 2fr 1fr 0.5fr;
  padding: 0.8rem 1rem;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
}
.areaBlocks .noSelect,
.areaBlocks .noCampaigns,
.areaCampaign .noSelect,
.areaCampaign .noCampaigns {
  display: block;
  padding: 1rem;
  width: calc(100vw - 48px);
  position: sticky;
  left: 0;
}
.areaBlocks .noSelect.hide,
.areaBlocks .noCampaigns.hide,
.areaCampaign .noSelect.hide,
.areaCampaign .noCampaigns.hide {
  display: none;
}
@media screen and (min-width: 780px) {
  .areaBlocks .noSelect,
  .areaBlocks .noCampaigns,
  .areaCampaign .noSelect,
  .areaCampaign .noCampaigns {
    width: 100%;
  }
}
.areaBlocks .noSelect p,
.areaBlocks .noCampaigns p,
.areaCampaign .noSelect p,
.areaCampaign .noCampaigns p {
  text-align: center;
  margin-bottom: 0;
}
.areaBlocks .block,
.areaCampaign .block {
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  display: none;
}
.areaBlocks .block.show,
.areaCampaign .block.show {
  display: flex;
}
.areaBlocks .selectRow,
.areaCampaign .selectRow {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  background-color: white;
  align-items: center;
  font-size: 14px;
  background-color: white;
  width: 100%;
  gap: 1rem;
}
.areaBlocks .selectRow span,
.areaCampaign .selectRow span {
  text-wrap-mode: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.areaBlocks .selectRow .actions,
.areaCampaign .selectRow .actions {
  display: flex;
  justify-content: flex-end;
  overflow: visible;
}
.areaBlocks .selectRow .actions .delete,
.areaCampaign .selectRow .actions .delete {
  overflow: visible;
  cursor: pointer;
  color: #dc3545;
  padding: 3px;
}
.areaBlocks .selectRow .actions .delete i,
.areaCampaign .selectRow .actions .delete i {
  font-size: 14px;
  font-weight: 600;
}
.areaBlocks .selectRow .campaignRow,
.areaCampaign .selectRow .campaignRow {
  display: grid;
  grid-template-columns: 1.8fr 1fr 2fr 1fr 0.5fr;
  padding: 1rem;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  background-color: white;
  align-items: center;
  font-size: 14px;
  background-color: white;
  width: 100%;
  gap: 1rem;
}
.areaBlocks .selectRow .campaignRow span,
.areaCampaign .selectRow .campaignRow span {
  text-wrap-mode: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.areaBlocks .selectRow .campaignRow .campaign,
.areaCampaign .selectRow .campaignRow .campaign {
  font-weight: 600;
  flex: 0;
}
.areaBlocks .selectRow .campaignRow .actions,
.areaCampaign .selectRow .campaignRow .actions {
  display: flex;
  justify-content: flex-end;
  padding-right: 1rem;
  overflow: visible;
}
.areaBlocks .selectRow .campaignRow .actions .delete,
.areaCampaign .selectRow .campaignRow .actions .delete {
  overflow: visible;
  cursor: pointer;
  color: #dc3545;
  padding: 3px;
}
.areaBlocks .selectRow .campaignRow .actions .delete i,
.areaCampaign .selectRow .campaignRow .actions .delete i {
  font-size: 14px;
  font-weight: 600;
}

.areaBlocks {
  min-width: unset;
}

/* replica componente optionsCheck en pantalla 2.1  */
.optionSelectCheck {
  position: relative;
  width: 100%;
}
.optionSelectCheck > .introClick {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.optionSelectCheck > .introClick.active {
  border-color: #0038FF;
}
.optionSelectCheck > .introClick > p {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
  text-wrap: nowrap;
}
.optionSelectCheck > .introClick > .iconCheck {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  color: #64748b;
}
.optionSelectCheck > .introClick > .iconCheck i {
  font-size: 14px;
}
.optionSelectCheck > .introClick > .iconCheck.rotated {
  transform: rotate(180deg);
}
.optionSelectCheck .optionsCheck {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.2s ease;
  max-height: 150px;
  overflow-y: auto;
  z-index: -2;
}
.optionSelectCheck .optionsCheck.show {
  z-index: 1;
  opacity: 1;
}
.optionSelectCheck .optionsCheck .optionCheck {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s ease;
  user-select: none;
}
.optionSelectCheck .optionsCheck .optionCheck:hover {
  background-color: #f8fafc;
}
.optionSelectCheck .optionsCheck .optionCheck p.label {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.optionSelectCheck .optionsCheck .optionCheck i {
  font-size: 18px;
  color: #cbd5e1;
  transition: color 0.2s ease;
}
.optionSelectCheck .optionsCheck .optionCheck i.icon-check-box-fill-200 {
  color: #0038FF;
}
.optionSelectCheck .optionsCheck .optionCheck .label {
  font-size: 14px;
  color: #1e293b;
}

.artCampanyas .moduls .btns {
  display: inline-flex;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}
@media screen and (min-width: 480px) {
  .artCampanyas .moduls .btns {
    max-width: 300px;
    align-self: flex-end;
  }
}

.mainBase article.artCampanyas2 .set i:first-child {
  padding-top: 2px;
}
.mainBase article.artCampanyas2 .set p:last-child {
  margin-bottom: 0;
  margin-top: 0.3rem;
}
.mainBase article.artCampanyas2 .addedBlocks {
  padding-top: 0;
}

.ms-parent {
  padding: 0.2em;
}
.ms-parent button {
  border: 0;
  background: none;
}
.ms-parent button .open {
  display: none;
}
.ms-parent .ms-choice div {
  display: none;
}
.ms-parent .ms-choice span {
  padding: 3px 8px;
}
.ms-parent .ms-drop {
  margin-left: -0.3em;
  border-radius: 0 0 4px 4px;
  border: solid 1px #e2e2e2;
}
.ms-parent .ms-drop .ms-search {
  padding: 0.5em;
  border-bottom: solid 1px #e2e2e2;
  background-color: #f8f9fa;
}
.ms-parent .ms-drop .ms-search input {
  padding: 0.5em;
  border: solid 1px #e2e2e2;
  border-radius: 0.3em;
  background: url("/img/iconos/buscar-right.svg") no-repeat right 0.5em center #fff;
  background-size: 1em;
}
.ms-parent .ms-drop ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ms-parent .ms-drop ul li {
  position: relative;
  display: flex;
  padding: 1em;
  border-bottom: solid 1px #e2e2e2;
}
.ms-parent .ms-drop ul li label {
  position: relative;
  width: 100%;
  display: block;
}
.ms-parent .ms-drop ul li input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  z-index: 1;
}
.ms-parent .ms-drop ul li input:hover, .ms-parent .ms-drop ul li input:active {
  cursor: pointer;
}
.ms-parent .ms-drop ul li input:checked {
  border: none;
  background: url("/img/iconos/ok.svg") no-repeat right 0.5em center;
}

.dataTables_paginate a {
  margin: 0 0.3em;
  color: #0038FF;
  border: solid 1px #0038FF !important;
  border-radius: 0.3em !important;
}
.dataTables_paginate a .disabled {
  border: solid 1px #e2e2e2;
}
.dataTables_paginate .current {
  color: #fff !important;
  background: #0038FF !important;
}

.dataTables_paginate span a.current {
  color: #fff !important;
}

#comisionesChart2 {
  width: 100% !important;
  height: 300px !important;
}

.l-navbar {
  transition: 0s;
}

.body-pd header {
  transition: 0s;
}

.form-check .form-check-input {
  margin: 0px auto 0 -1.5em;
}

a.text-danger:hover, a.text-danger:active {
  color: #000 !important;
}

.fs-7 {
  font-size: 0.9rem;
}

.noWordOverflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width: 1000px) {
  #comisionesChart2 {
    width: 100% !important;
    height: 400px !important;
  }
}
/* AÑADIDO PARA HACER AJUSTES DEL MENÚ EN MÓVIL */
@media (max-width: 600px) {
  /* Quita paddings en los desplegables */
  #flush-collapseOne {
    padding-top: 0px !important;
  }
  #flush-collapseOne-gainblers {
    padding-top: 0px !important;
  }
  /* Quita hover de menú e iconos*/
  .body-pd .show .nav .nav_link:hover {
    color: #0038FF !important;
    background-color: none !important;
  }
  .body-pd .show .nav .nav_link:hover .nav_icon {
    font-size: 17px;
    color: #0038FF !important;
    background: #f3f3f3 !important;
    border-radius: 5px;
    padding: 5px;
    margin-left: 4px;
    margin-right: 1px;
  }
}
.fs-8 {
  font-size: 12px !important;
}

.fs-9 {
  font-size: 10px !important;
}

/* button disabled */
button.disabled,
span.disabled,
.btn.disabled {
  opacity: 0.25;
  pointer-events: none;
}

.entornoBody {
  position: relative;
  display: grid;
  background: #D3DDF1;
}

.entornoCont {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-gap: 1em;
  padding: 0 1em;
  background: #fcfcfc;
}

.entornoHeader {
  position: fixed;
  left: 1em;
  width: calc(100% - 2em);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1em;
  padding: 0.5em 0;
  border-bottom: solid 1px #e2e2e2;
  background: #fff;
  z-index: 3;
}
.entornoHeader button {
  border: 0;
  padding: 0;
}
.entornoHeader i {
  font-size: 1.5em;
}
.entornoHeader .icoMenuLeft {
  display: block;
}
.entornoHeader .icoMenuLeft button {
  background: none;
}
.entornoHeader .logo {
  margin: auto;
}
.entornoHeader .logo img {
  height: 16px;
}
.entornoHeader .icoUsuario {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #e2e2e2;
  border-radius: 100%;
  overflow: hidden;
}
.entornoHeader .icoUsuario:hover, .entornoHeader .icoUsuario:active {
  cursor: pointer;
}
.entornoHeader .icoUsuario img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entornoHeader .icoMenuRight:hover, .entornoHeader .icoMenuRight:active {
  cursor: pointer;
}
.entornoHeader .xtras {
  position: relative;
  display: flex;
  gap: 1em;
  align-items: center;
}
.entornoHeader .xtras .icoNotificacion {
  position: relative;
  padding: 0.5em;
  display: flex;
  align-items: center;
  border-right: solid 1px #e2e2e2;
}
.entornoHeader .xtras .icoNotificacion:hover, .entornoHeader .xtras .icoNotificacion:active {
  cursor: pointer;
}
.entornoHeader .xtras .icoNotificacion .ball {
  position: absolute;
  top: 0em;
  left: -3px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: Arial, Sans-serif;
  font-size: 12px;
  line-height: 0;
  border-radius: 50%;
  background: rgb(51, 184, 41);
}
.entornoHeader .xtras .icoUsuario {
  width: 32px;
  height: 32px;
  border: solid 1px #e2e2e2;
  border-radius: 100%;
  overflow: hidden;
}
.entornoHeader .xtras .icoUsuario:hover, .entornoHeader .xtras .icoUsuario:active {
  cursor: pointer;
}
.entornoHeader .xtras .icoUsuario img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entornoMain {
  display: grid;
  align-content: baseline;
  margin-top: 4.5em;
}

.entornoMain:has(~ .navInferior) {
  margin-bottom: 85px;
}

.entornoFooter {
  display: grid;
  justify-content: center;
  padding: 1em;
  bottom: 0 !important;
}
.entornoFooter .logo {
  height: 12px;
}

.cursor {
  cursor: pointer;
}

.cursorEnlace {
  color: #0038FF;
}
.cursorEnlace:hover, .cursorEnlace:active {
  color: #000;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .entornoBody {
    grid-template-columns: auto 1fr;
  }
  .entornoHeader {
    width: -webkit-fill-available;
    margin: 0 1em 0 0em;
  }
  .entornoHeader .icoMenuLeft {
    display: none;
  }
  .entornoMain:has(~ .navInferior) {
    margin-bottom: 0;
  }
}
.entornoMenu {
  position: sticky;
  top: 0;
  left: 0;
  height: 100%;
  width: 230px;
  display: none;
  color: #fff;
  background: #0038FF;
  overflow: hidden;
  z-index: 5;
  height: 100dvh;
  top: 10px;
  height: calc(100dvh - 20px);
  border-radius: 0 10px 10px 0;
  overflow: hidden;
}
.entornoMenu i {
  font-size: 1.5em;
}

.zonaMenu {
  flex: 1;
  overflow: hidden auto;
}

.zonaToggle {
  display: none;
  padding: 0.5em;
  border-bottom: solid 1px rgba(253, 253, 253, 0.2);
}
.zonaToggle .miga {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.zonaToggle .miga li {
  display: inline-flex;
  align-items: center;
}
.zonaToggle .miga li span {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.zonaToggle .miga li span img {
  object-fit: contain;
  object-position: center;
  width: 100%;
}
.zonaToggle .miga li span:only-child {
  max-width: 126px;
}
.zonaToggle .miga li span.premium:only-child {
  max-width: 107px;
}
.zonaToggle .miga li:has(~ li) {
  opacity: 1;
  max-width: 56px;
  opacity: 0.6;
  transition: opacity 200ms ease;
  cursor: pointer;
  position: relative;
  margin-right: 1.4rem;
}
.zonaToggle .miga li:has(~ li)::after {
  content: "\e90b";
  font-family: "icomoon";
  font-size: 14px;
  right: -16px;
  position: absolute;
  opacity: 0.6;
}
.zonaToggle .miga li:has(~ li):hover {
  opacity: 1;
}
.zonaToggle .miga li:has(~ li):hover::after {
  opacity: 0.6;
}
.zonaToggle .miga li + li {
  max-width: 107px;
}
.zonaToggle button {
  position: relative;
  padding: 0.3em;
  color: #fff;
  border: none;
  border-radius: 0.3em;
  background: rgba(0, 0, 0, 0.15);
}

.zonaLogo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7em 1em;
  /*     margin: 10px 0 0 10px;
      border-radius: 6.5px 0 0 6.5px;
      overflow: hidden; */
}
.zonaLogo button {
  position: relative;
  padding: 0.3em;
  color: #fff;
  border: none;
  border-radius: 0.3em;
  background: rgba(0, 0, 0, 0.15);
}
.zonaLogo i {
  font-size: 1em;
}
.zonaLogo > img {
  height: 16px;
  margin: 0 auto;
}
.zonaLogo .miga {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  margin-left: 0.5rem;
}
.zonaLogo .miga li {
  display: inline-flex;
  align-items: center;
}
.zonaLogo .miga li span {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.zonaLogo .miga li span img {
  object-fit: contain;
  object-position: center;
  width: 100%;
}
.zonaLogo .miga li span:only-child {
  max-width: 126px;
}
.zonaLogo .miga li span.premium:only-child {
  max-width: 107px;
}
.zonaLogo .miga li:has(~ li) {
  opacity: 1;
  max-width: 56px;
  opacity: 0.6;
  transition: opacity 200ms ease;
  cursor: pointer;
  position: relative;
  margin-right: 1.4rem;
}
.zonaLogo .miga li:has(~ li)::after {
  content: "\e90b";
  font-family: "icomoon";
  font-size: 14px;
  right: -16px;
  position: absolute;
  opacity: 0.6;
}
.zonaLogo .miga li:has(~ li):hover {
  opacity: 1;
}
.zonaLogo .miga li:has(~ li):hover::after {
  opacity: 0.6;
}
.zonaLogo .miga li + li {
  max-width: 107px;
}

.menuLateralIcon {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menuLateralIcon li {
  position: relative;
  padding: 0.5em 0.3em;
  border-bottom: dashed 1px rgba(253, 253, 253, 0.2);
}
.menuLateralIcon li:hover, .menuLateralIcon li:active {
  background: rgba(0, 0, 0, 0.2);
}
.menuLateralIcon li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1em;
  align-items: center;
  color: #fff;
}
.menuLateralIcon li a i {
  position: relative;
  padding: 0.3em;
  border-radius: 0.3em;
  background: rgba(0, 0, 0, 0.15);
}
.menuLateralIcon li a i .ball {
  position: absolute;
  top: 0;
  right: -5px;
  min-width: 18px;
  min-height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: Arial, Sans-serif;
  font-size: 12px;
  line-height: 0;
  border-radius: 50%;
  background: rgb(51, 184, 41);
}
.menuLateralIcon li ul {
  margin: 0.3em 0 0 0;
  padding: 0;
  list-style: none;
}
.menuLateralIcon li ul li {
  padding-left: 1.5em;
}
.menuLateralIcon li ul li:last-child {
  border-bottom: 0;
}
.menuLateralIcon .menuInfo {
  padding: 0.5em 0.3em 0.3em 0.3em;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8em;
  border-bottom: none;
}
.menuLateralIcon .menuInfo:hover, .menuLateralIcon .menuInfo:active {
  background: #0038FF;
}
.menuLateralIcon .selected {
  background: rgba(0, 0, 0, 0.15);
}

.zonaSalir {
  background: #0433D9;
}
.zonaSalir li {
  border: none;
}

.zonaBtnXtra {
  display: grid;
  grid-gap: 0.5em;
  padding: 0.3em;
}

.btnMenuXtra {
  display: flex;
  align-items: center;
  padding: 0.5em;
  color: #fff;
  border: solid 1px rgba(0, 0, 0, 0.3);
  border-radius: 0.3em;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  opacity: 1;
}
.btnMenuXtra .txt {
  padding: 0 0 0 1em;
  font-size: 10px;
  line-height: 1.5em;
}
.btnMenuXtra:hover, .btnMenuXtra:active {
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
}

.menuSubAction {
  position: absolute;
  top: 5px;
  right: 0;
  padding: 0.3em;
}
.menuSubAction:hover, .menuSubAction:active {
  cursor: pointer;
}
.menuSubAction i {
  height: 32px;
}

.menuSubVisible .menuSub {
  display: grid;
}
.menuSubVisible .ctrlDown {
  display: none;
}
.menuSubVisible .ctrlUp {
  display: block;
}

.menuSubOculto .menuSub {
  display: none;
}
.menuSubOculto .ctrlDown {
  display: block;
}
.menuSubOculto .ctrlUp {
  display: none;
}

.entornoBody:has(> nav.entornoMenu.menuVisible)::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: block;
}
@media screen and (min-width: 768px) {
  .entornoBody:has(> nav.entornoMenu.menuVisible)::before {
    display: none;
  }
}

.menuDesplegado .bgOutMenu {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  height: 100dvh;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  /*     @media screen and (min-width:$tamMd) {
             display: none;
         } */
}
.menuDesplegado .controlBtnDesplegado {
  display: none;
}
.menuDesplegado .controlBtnAcoplado {
  display: block;
}

.menuAcoplado {
  display: none;
}
.menuAcoplado .btnMenuXtra {
  display: inline-grid;
}
.menuAcoplado .btnMenuXtra i {
  font-size: 1.2em;
}
.menuAcoplado .controlBtnDesplegado {
  display: block;
}
.menuAcoplado .controlBtnAcoplado {
  display: none;
}
.menuAcoplado .menuSubAction {
  display: none;
}

/* condicionales.. te abre bgOutMenu al abrir menu móvil (menuVisible) Tanto si te viene del escritorio colapsado (.menuAcoplado) o despelgado (menuDesplegado) /*/
.menuAcoplado.menuOculto .bgOutMenu {
  display: none;
}

.menuAcoplado.menuVisible .bgOutMenu {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  height: 100dvh;
  background: rgba(0, 0, 0, 0);
  width: 100%;
}
@media screen and (min-width: 768px) {
  .menuAcoplado.menuVisible .bgOutMenu {
    display: none;
  }
}

/* ////////////////////////////////////////////////////////// */
.menuVisible {
  position: fixed;
  width: 250px;
  /*   display:grid;grid-template-rows:auto auto 1fr auto; */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  left: 0;
  top: 10px;
  bottom: 10px;
}
.menuVisible .zonaMenu, .menuVisible .zonaSalir {
  padding: 0 0.5em;
}

.entornoBody:has(> .entornoMenu.menuVisible) {
  overflow-y: hidden;
}
@media screen and (min-width: 768px) {
  .entornoBody:has(> .entornoMenu.menuVisible) {
    overflow-y: auto;
  }
}

.menuOculto {
  display: none;
}

.menuScrollV::-webkit-scrollbar {
  width: 5px;
}

.menuScrollV::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 4px;
}

.menuScrollV::-webkit-scrollbar-thumb:active {
  background-color: #fff;
}

.menuScrollV::-webkit-scrollbar-thumb:hover {
  background: #fff;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.menuScrollV::-webkit-scrollbar-track {
  background: #e1e1e1;
  border-radius: 4px;
}

.menuScrollV::-webkit-scrollbar-track:hover,
.menuScrollV::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

@media screen and (min-width: 768px) {
  .entornoMenu {
    height: 100vh;
    display: flex;
    flex-direction: column;
    outline: 1em solid #fcfcfc;
    border-radius: unset;
    top: 0;
  }
  .zonaToggle {
    display: flex;
    justify-content: flex-end;
  }
  .zonaLogo {
    display: none;
  }
  .menuDesplegado .bgOutMenu {
    display: none;
  }
  .menuDesplegado .controlBtnDesplegado {
    display: block;
  }
  .menuDesplegado .controlBtnAcoplado {
    display: none;
  }
  .menuAcoplado {
    width: 40px;
  }
  .menuAcoplado .menuSub {
    position: fixed;
    top: auto;
    left: 40px;
    margin-top: -50px;
    padding: 0.5em;
    border-radius: 0.3em;
    border: solid 1px #e2e2e2;
    background: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    z-index: 5;
  }
  .menuAcoplado .menuSub li {
    padding: 0.5em 1em 0.5em 0.5em;
    border-bottom: dashed 1px rgba(0, 0, 0, 0.2);
  }
  .menuAcoplado .menuSub li:hover, .menuAcoplado .menuSub li:active {
    background: #0038FF;
  }
  .menuAcoplado .menuSub li:hover a, .menuAcoplado .menuSub li:active a {
    color: #fff;
  }
  .menuAcoplado .menuSub li a {
    color: #0038FF;
  }
  .menuAcoplado .menuSub li .txt {
    display: blocK;
  }
  .menuAcoplado .menuSub li:last-child {
    border-bottom: 0;
  }
  .menuAcoplado .menuSub .selected {
    background: #0038FF;
  }
  .menuAcoplado .menuSub .selected a {
    color: #fff;
  }
  .menuAcoplado .menuSub .selected:hover, .menuAcoplado .menuSub .selected:active {
    color: #fff;
    background: #000;
  }
  .menuAcoplado .menuSub::before {
    position: absolute;
    top: 2em;
    left: -5px;
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    background: #fff;
    transform: rotate(45deg);
  }
  .menuAcoplado .menuInfo {
    display: none;
  }
  .menuAcoplado .btnMenuXtra .txt {
    display: none;
  }
  .menuAcoplado .controlBtnDesplegado {
    display: none;
  }
  .menuAcoplado .controlBtnAcoplado {
    display: block;
  }
  .menuAcoplado .menuSubAction {
    width: 16px;
    height: 16px;
    position: fixed;
    top: auto;
    left: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -26px;
    padding: 0.5em;
    font-size: 6px;
    border-radius: 100%;
    border: solid 1px #e2e2e2;
    background: #0038ff;
    /* box-shadow: 0px 3px 6px rgb(0 0 0 / 69%); */
    z-index: 10;
  }
  .menuAcoplado .menuSubAction i {
    height: auto;
    transform: rotate(270deg);
  }
}
.iconMenuFx {
  position: relative;
  padding: 0.3em;
  border-radius: 0.3em;
  background: rgba(0, 0, 0, 0.07);
}

.menuUsuario {
  width: 100%;
  max-width: 300px;
  max-height: 98dvh;
  position: absolute;
  top: 0.5em;
  right: 0em;
  display: inline-flex;
  flex-direction: column;
  grid-gap: 1em;
  align-content: flex-start;
  padding: 1em;
  border-radius: 0.5em;
  background: #fff;
  overflow-y: auto;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  z-index: 100;
}
.menuUsuario .zonaCierre {
  display: flex;
  justify-content: flex-end;
  font-size: 0.7em;
}
.menuUsuario .zonaCierre button {
  background: none;
}
.menuUsuario .zonaPrevio {
  display: flex;
  gap: 1em;
  align-items: center;
  padding: 1em;
  background: #F3F3F3;
}
.menuUsuario .zonaPrevio .prev {
  display: inline-grid;
  grid-gap: 5px;
  text-align: center;
}
.menuUsuario .zonaPrevio .prev .icoUsuario {
  width: 50px;
  height: 50px;
  border: solid 1px #e2e2e2;
  border-radius: 100%;
  overflow: hidden;
}
.menuUsuario .zonaPrevio .prev .icoUsuario img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menuUsuario .zonaPrevio .prev .idUser {
  font-size: 0.7em;
}
.menuUsuario .zonaPrevio .txt {
  display: grid;
  grid-gap: 0.5em;
  align-content: start;
}
.menuUsuario .zonaCambioUsuario {
  max-height: 60vh;
  display: grid;
  align-items: center;
  overflow-y: auto;
}
.menuUsuario .zonaCambioUsuario .listUser {
  width: 100%;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menuUsuario .zonaCambioUsuario .listUser li {
  display: flex;
  gap: 1em;
  align-items: center;
  padding: 1em;
  color: #0038FF;
  border-bottom: solid 1px #dfdfdf;
}
.menuUsuario .zonaCambioUsuario .listUser li .icoUsuario {
  width: 32px;
  height: 32px;
  border: solid 1px #e2e2e2;
  border-radius: 100%;
  overflow: hidden;
}
.menuUsuario .zonaCambioUsuario .listUser li .icoUsuario img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menuUsuario .zonaCambioUsuario .listUser li:active, .menuUsuario .zonaCambioUsuario .listUser li:hover {
  background: rgb(233, 233, 233);
  cursor: pointer;
}
.menuUsuario .zonaCambioUsuario .listUser li:last-child {
  border-bottom: none;
}
.menuUsuario .zonaCambioUsuario .txt {
  display: grid;
  grid-gap: 0.5em;
  align-content: start;
}
.menuUsuario .zonaListado {
  flex: 1;
}
.menuUsuario .zonaListado h4 {
  margin: 0;
  padding: 1em 0 0 0;
  font-size: 0.8em;
}
.menuUsuario .zonaExtras {
  display: grid;
  grid-gap: 1em;
}
.menuUsuario .zonaExtras .btnMenuXtra {
  color: #0038FF;
  border-color: #E5E5E5;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0) 10%, transparent 0, transparent 50%);
  background-size: 5px 5px;
  opacity: 1;
}
.menuUsuario .zonaExtras .btnMenuXtra:hover, .menuUsuario .zonaExtras .btnMenuXtra:active {
  color: #fff;
  border-color: #0038FF;
  background: #0038FF;
}

.menuDudas, .menuUsuarioIcon {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menuDudas li, .menuUsuarioIcon li {
  position: relative;
  padding: 0.5em 0.3em;
  border-bottom: dashed 1px rgba(0, 0, 0, 0.2);
}
.menuDudas li:hover, .menuDudas li:active, .menuUsuarioIcon li:hover, .menuUsuarioIcon li:active {
  background: #0038FF;
}
.menuDudas li:hover a, .menuDudas li:active a, .menuUsuarioIcon li:hover a, .menuUsuarioIcon li:active a {
  color: #fff !important;
}
.menuDudas li a, .menuUsuarioIcon li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1em;
  align-items: center;
}
.menuDudas li a i, .menuUsuarioIcon li a i {
  position: relative;
  padding: 0.3em;
  border-radius: 0.3em;
  color: #fff;
  background: #0038FF;
}
.menuDudas li a i .ball, .menuUsuarioIcon li a i .ball {
  position: absolute;
  top: 0;
  right: -5px;
  min-width: 18px;
  min-height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  line-height: 0;
  border-radius: 50%;
  background: rgb(51, 184, 41);
}
.menuDudas li ul, .menuUsuarioIcon li ul {
  margin: 0.3em 0 0 0;
  padding: 0;
  list-style: none;
}
.menuDudas li ul li, .menuUsuarioIcon li ul li {
  padding-left: 1.5em;
}
.menuDudas li ul li:last-child, .menuUsuarioIcon li ul li:last-child {
  border-bottom: 0;
}
.menuDudas li:last-child, .menuUsuarioIcon li:last-child {
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
.menuDudas .breakList, .menuUsuarioIcon .breakList {
  height: 0px;
  margin: 0.5em 0;
  padding: 0;
  border-top: solid 1px #e2e2e2;
}
.menuDudas .breakList:hover, .menuDudas .breakList:active, .menuUsuarioIcon .breakList:hover, .menuUsuarioIcon .breakList:active {
  background: none;
}
.menuDudas .menuInfo, .menuUsuarioIcon .menuInfo {
  padding: 0.5em 0.3em 0.3em 0.3em;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8em;
  border-bottom: none;
}
.menuDudas .selected, .menuUsuarioIcon .selected {
  background: rgba(0, 0, 0, 0.15);
}

.menuUsuarioSimple {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menuUsuarioSimple li {
  position: relative;
  padding: 1em 0.3em;
  border-bottom: dashed 1px rgba(0, 0, 0, 0.2);
}

.subIdioma {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1em;
  align-items: center;
}
.subIdioma:hover, .subIdioma:active {
  background: #fff !important;
}
.subIdioma i {
  color: #fff;
  background: #0038FF;
}

.subIdiomaMenu {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.subIdiomaMenu li {
  display: grid;
  grid-gap: 0.3em;
  align-items: center;
  margin-left: 0.3em;
  padding: 0.5em !important;
  font-size: 0.7em;
  text-align: center;
  border: none;
  border-radius: 0.3em;
}
.subIdiomaMenu li:hover, .subIdiomaMenu li:active {
  color: #fff;
  background: #0038FF;
  cursor: pointer;
}
.subIdiomaMenu .activo {
  color: #fff;
  background: #0038FF;
}
.subIdiomaMenu .activo:hover, .subIdiomaMenu .activo:active {
  background: #000;
}

.menuUsuarioVisible {
  display: inline-flex;
}

.menuUsuarioOculto {
  display: none;
}

@media screen and (min-width: 768px) {
  .menuUsuario {
    max-width: 300px;
    min-height: auto;
    padding: 0.5em;
    border-radius: 0.5em;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  }
}
nav.vNueva .zonaListado {
  overflow-y: auto;
}
nav.vNueva .ball {
  min-width: 14px;
  min-height: 14px;
}
nav.vNueva .ball p {
  font-size: 10px;
  margin-bottom: 0;
}
nav.vNueva ul.menuDudas {
  list-style: none;
  color: #0038FF;
}
nav.vNueva ul.menuDudas i {
  color: #0038FF;
  background-color: transparent;
}
nav.vNueva ul.menuDudas li:hover i,
nav.vNueva ul.menuDudas li:active i {
  color: white;
}
nav.vNueva ul.menuDudas li a .txt {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
nav.vNueva ul.menuDudas li a .txt p {
  margin-bottom: 0;
}
nav.vNueva ul.menuDudas li a .txt small {
  opacity: 0.7;
  font-weight: 100;
}
nav.vNueva li:last-child,
nav.vNueva li {
  border-bottom: dashed 1px #0038FF;
}
nav.vNueva .zonaFooter {
  display: flex;
  justify-content: flex-end;
  padding-top: 38px;
}
nav.vNueva .zonaFooter span {
  display: inline-flex;
  align-items: center;
  color: #dc3545;
  font-weight: 100;
  gap: 0.5rem;
  transition: color 200ms ease;
  cursor: pointer;
  margin-bottom: 1rem;
}
nav.vNueva .zonaFooter span i {
  font-size: 24px;
}
nav.vNueva .zonaFooter span p {
  margin-bottom: 0;
}
nav.vNueva .zonaFooter span:hover {
  color: #000;
}

.menuNotificaciones {
  width: 80%;
  position: absolute;
  top: 0.5em;
  right: 0em;
  display: grid;
  grid-gap: 1em;
  align-content: flex-start;
  padding: 0;
  border-radius: 0.5em;
  background: #fff;
  overflow-y: auto;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  z-index: 100;
}
.menuNotificaciones h4 {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin: 0;
  padding: 0;
}
.menuNotificaciones .zonaPrevio {
  position: relative;
  display: grid;
  grid-gap: 1em;
  padding: 1em;
}
.menuNotificaciones .zonaPrevio .cierre {
  position: absolute;
  top: 1em;
  right: 1em;
  font-size: 1em;
}
.menuNotificaciones .zonaPrevio .filtradoUX {
  font-size: 0.9em;
}
.menuNotificaciones .zonaListado {
  max-height: 400px;
  display: grid;
  grid-gap: 1em;
  padding: 0 1em 1em 1em;
  overflow-y: auto;
}

.filtradoUX {
  display: flex;
  gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.filtradoUX li {
  display: flex;
  align-items: center;
}
.filtradoUX .neutro {
  padding: 0.5em;
  color: #0038FF;
  border-radius: 1.5em;
  border: solid 1px #0038FF;
}
.filtradoUX .neutro:hover, .filtradoUX .neutro:active {
  color: #000;
  border-color: #000;
  cursor: pointer;
}
.filtradoUX .seleccionado {
  padding: 0.5em;
  color: #fff;
  border-radius: 1.5em;
  border-color: #000;
  background: #000;
}
.filtradoUX .seleccionado:hover, .filtradoUX .seleccionado:active {
  border-color: #0038FF;
  background: #0038FF;
  cursor: pointer;
}
.filtradoUX .fin {
  flex: 1;
  justify-content: end;
}
.filtradoUX .finLeft {
  flex: 1;
  justify-content: start;
}

@media screen and (min-width: 600px) {
  .menuNotificaciones {
    width: 400px;
  }
}
.menuXtra, .menuXtraRight {
  position: relative;
}
.menuXtra .opciones, .menuXtraRight .opciones {
  position: absolute;
  top: -1em;
  left: 1.5em;
  min-width: 150px;
  display: grid;
  grid-gap: 0.5em;
  flex-wrap: nowrap;
  margin: 0;
  padding: 1em;
  list-style: none;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
.menuXtra .opciones li, .menuXtraRight .opciones li {
  font-size: 0.9em;
  line-height: 1.2em;
}

.menuXtraRight .opciones {
  left: inherit;
  right: 1.5em !important;
}

.tableMenuXtra {
  min-height: 150px !important;
}
.tableMenuXtra tr {
  position: relative;
}
.tableMenuXtra tr td:first-child {
  position: sticky;
  top: 0;
  left: -2px;
  width: 0;
  z-index: 1;
  background: #fff;
}
.tableMenuXtra tr .menuXtra {
  position: relative;
}
.tableMenuXtra tr .menuXtra .opciones {
  position: absolute;
  left: 2em;
}
.tableMenuXtra tr .menuXtraRight {
  position: relative;
}
.tableMenuXtra tr .menuXtraRight .opciones {
  position: absolute;
  left: inherit;
  right: 1.5em !important;
}
.tableMenuXtra tr:nth-last-of-type(2) .menuXtra .opciones, .tableMenuXtra tr:nth-last-of-type(1) .menuXtra .opciones {
  top: unset;
  bottom: -11px;
}

.comSelect {
  position: relative;
  width: 100%;
  display: inline-flex;
}

.comSelectGrupo {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1em;
  align-items: center;
  padding: 0.7em;
  border: solid 1px #ced4da;
  border-radius: 0.3em;
  cursor: pointer;
}

.comSelectDetalle {
  position: absolute;
  top: 2.7em;
  left: 0;
  width: 100%;
  max-height: 240px;
  display: block;
  padding: 0.5em;
  border-radius: 0.3em;
  border: solid 1px #ced4da;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  z-index: 10;
}

.comSelectList {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
}
.comSelectList li {
  position: relative;
  display: flex;
  padding: 1em;
  border-bottom: solid 1px #e2e2e2;
}
.comSelectList li:hover {
  background: #E2F0FC;
  cursor: pointer;
}
.comSelectList li:last-child {
  border-bottom: 0;
}
.comSelectList .active {
  color: #fff;
  background: #0038FF;
}
.comSelectList .active a {
  color: #fff;
}

.comSelectVisible .comSelectDetalle {
  display: block;
}

.comSelectOculto {
  display: inline-flex;
}
.comSelectOculto .comSelectDetalle {
  display: none;
}

.cargaEspera {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.78);
  z-index: 999;
}

.animItem {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border: solid 1px rgb(10, 24, 131);
  border-radius: 100%;
  overflow: hidden;
}

.animLogo {
  width: 50%;
}

.animBg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 200%;
  display: flex;
  background: url("/img/entorno/carga-bg.png") no-repeat center center;
  z-index: -1;
}

.element {
  animation: rotacion 10s linear infinite;
}

@keyframes rotacion {
  0% {
    rotate: 0deg;
    transform: scale(1.5);
  }
  100% {
    /*scale:120%;*/
    rotate: 360deg;
    transform: scale(1.5);
  }
}
.spinner {
  position: absolute;
  left: 0;
  top: 0;
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border-left-color: rgba(0, 153, 255, 0.54);
  z-index: 2;
  animation: spin 1.3s ease infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cargaBox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
  background: #F0F0F0;
}
.cargaBox i {
  font-size: 2em;
  margin-right: 0.5em;
  animation: iconRotation 1.25s infinite;
  animation-delay: 0s;
}

.cargaBoxError {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  justify-content: center;
  align-items: center;
  padding: 2em;
  color: #8A4040;
  background: #FFE2E2;
}
.cargaBoxError i {
  font-size: 2em;
  margin-right: 0.3em;
}

@keyframes iconRotation {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 180deg;
  }
}
.screenSpinner {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  z-index: 5;
}
.screenSpinner > div {
  display: flex;
  width: fit-content;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.screenSpinner > div .img {
  width: 120px;
  height: 120px;
}

.dashResumen {
  width: 100%;
  margin: 0 auto 1em auto;
  display: grid;
  grid-row-gap: 1em;
  grid-template-areas: "datos datos datos datos" "text1 text1 text2 text2";
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: start;
}
.dashResumen .itemText1 {
  width: 100%;
  grid-area: text1;
  display: grid;
  grid-gap: 0.5em;
  align-content: start;
}
.dashResumen .itemText1 em {
  font-size: 1.5em;
  color: #828790;
  font-style: normal;
}
.dashResumen .ItemDatos {
  grid-area: datos;
  display: grid;
  text-align: center;
}
.dashResumen .ItemDatos .grafica {
  position: relative;
  display: grid;
  align-content: start;
}
.dashResumen .ItemDatos .grafica .img {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: baseline;
  padding: 20px 10px 0 10px;
  overflow: hidden;
}
.dashResumen .ItemDatos .grafica .img .marca {
  width: 12px;
  height: 150px;
  position: absolute;
  bottom: -80px;
  display: flex;
  z-index: 1; /*border:solid 1px #C9C9C9;*/
}
.dashResumen .ItemDatos .grafica .img .bg {
  width: 150px;
  height: 100%;
  display: block;
  padding: 0 1em;
}
.dashResumen .ItemDatos .grafica .dato {
  position: absolute;
  bottom: 0em;
  width: 100%;
  display: grid;
  z-index: 1;
}
.dashResumen .ItemDatos .grafica .dato strong {
  font-size: 2em;
  color: #828790;
  font-style: normal;
  font-weight: normal;
}
.dashResumen .itemText2 {
  width: 100%;
  grid-area: text2;
  display: grid;
  grid-gap: 0.5em;
  font-size: 0.9em;
  align-content: start;
  text-align: right;
}
.dashResumen .itemText2 em {
  font-size: 1.5em;
  color: #828790;
  font-style: normal;
}

.infoItem, .infoItemOK {
  position: relative;
  top: -0.3em;
  display: inline-flex;
}
.infoItem:active, .infoItem:hover, .infoItemOK:active, .infoItemOK:hover {
  color: #0038FF;
  cursor: pointer;
}
.infoItem .infoIcon, .infoItemOK .infoIcon {
  margin: 0 0 0 0.5em;
  font-size: 12px;
}
.infoItem .infoIcon img, .infoItemOK .infoIcon img {
  width: 16px;
}
.infoItem .infoCont, .infoItemOK .infoCont {
  display: none;
}

.infoItemOK .infoCont {
  position: absolute;
  width: 180px;
  display: block;
  padding: 0.3em;
  color: #444DB3;
  font-size: 0.9em;
  line-height: 1.5em;
  text-align: left;
  border-radius: 0.3em;
  background: #E2F0FC;
  box-shadow: 0px 3px 6px rgba(0, 56, 255, 0.3);
  z-index: 1;
}
.infoItemOK .infoCont.rightLeft {
  right: -10px;
}
@media screen and (min-width: 600px) {
  .infoItemOK .infoCont.rightLeft {
    right: unset;
  }
}

.dashPrevFiltro {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-bottom: 0.5em;
}
.dashPrevFiltro h4 {
  margin: 0.2em 0 0 0;
  padding: 0;
}
.dashPrevFiltro .typeRadio {
  display: flex;
  align-items: center;
  gap: 1em;
}

.dashFiltro {
  position: relative;
  display: grid;
  grid-gap: 1em;
}

.dashFiltroFijo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}
.dashFiltroFijo .dashFiltroToggle {
  display: flex;
  gap: 1em;
  margin-left: 1em;
  padding: 0.7em 0 0.7em 1em;
  border-left: solid 1px #e2e2e2;
}

.dashFiltroXtra {
  display: none;
}
.dashFiltroXtra .dashFiltroList {
  display: grid;
  grid-gap: 1.5em;
  margin-top: 0.5em;
}
.dashFiltroToggle .toggleOculto {
  display: none;
}

#controlFiltro.filtroVisible .dashFiltroXtra {
  display: grid;
}
#controlFiltro.filtroVisible .dashFiltroXtra .dashFiltroList {
  display: grid;
}
#controlFiltro.filtroVisible .dashFiltroToggle .toggleAbierto {
  display: none;
}
#controlFiltro.filtroVisible .dashFiltroToggle .toggleOculto {
  display: block;
}

.dashDatos {
  display: grid;
  grid-gap: 1em;
  margin: 1em 0;
}
.dashDatos .item, .dashDatos .itemPositivo, .dashDatos .itemNegativo {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  border: solid 1px #e2e2e2;
  border-radius: 0.5em;
}
.dashDatos .item .dato1, .dashDatos .itemPositivo .dato1, .dashDatos .itemNegativo .dato1 {
  display: grid;
  grid-gap: 1em;
}
.dashDatos .item .dato1 .cantidad, .dashDatos .itemPositivo .dato1 .cantidad, .dashDatos .itemNegativo .dato1 .cantidad {
  font-size: 2.3em;
}
.dashDatos .item .dato2, .dashDatos .itemPositivo .dato2, .dashDatos .itemNegativo .dato2 {
  display: grid;
  grid-gap: 1em;
  text-align: right;
}
.dashDatos .item .dato2 .consulta strong, .dashDatos .itemPositivo .dato2 .consulta strong, .dashDatos .itemNegativo .dato2 .consulta strong {
  font-size: 1.3em;
  font-weight: normal;
}
.dashDatos .itemPositivo {
  color: #27a923;
  border-color: #E5F9E7;
  background: #E5F9E7;
}
.dashDatos .itemNegativo .dato2 .metrica {
  color: #dc3545;
}

.dashTags {
  margin-top: 1em;
}
.dashTags .listadoTags {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.dashTags .listadoTags li {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1em;
  border: solid 1px #D8D8D8;
  border-radius: 0.3em;
  background: #D8D8D8;
}
.dashTags .listadoTags li i {
  margin-left: 0.5em;
  padding-left: 0.5em;
  font-size: 0.7em;
}
.dashTags .listadoTags li i:active, .dashTags .listadoTags li i:hover {
  cursor: pointer;
}
.dashTags .listadoTags .tagReset {
  background: none;
}
.dashTags .listadoTags .tagReset:active, .dashTags .listadoTags .tagReset:hover {
  color: #fff;
  background: #0038FF;
  cursor: pointer;
}
.dashTags .listadoTags .tagReset i {
  font-size: 1em;
}
.dashTags .zonaBtn {
  display: flex;
  margin-top: 1em;
}
.dashTags .zonaBtn button {
  width: 100%;
}

.dashGrafico {
  width: 100%;
  display: flex;
  overflow-x: auto;
}
.dashGrafico img {
  max-width: 100%;
}
.dashGrafico canvas {
  min-width: 700px;
  margin: 0 auto;
}

.dashGrid {
  display: grid;
}

@media screen and (min-width: 600px) {
  .dashResumen {
    max-width: 600px;
    display: flex;
  }
  .dashResumen .ItemDatos {
    width: 450px;
  }
  .dashFiltro {
    grid-template-columns: 1fr 3fr;
  }
  .dashFiltroFijo {
    grid-template-columns: 1fr 0;
  }
  .dashFiltroXtra {
    display: grid;
  }
  .dashFiltroXtra .dashFiltroToggle {
    display: none;
  }
  .dashFiltroXtra .dashFiltroList {
    position: relative;
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 0em;
  }
  .dashDatos {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .dashPrevFiltro {
    justify-content: start;
    gap: 1em;
  }
  .dashTags .zonaBtn button {
    width: auto;
  }
}
.modal.bot .lineButtons {
  border-bottom: 1px dashed rgb(204, 204, 204);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  gap: 0.5rem;
}
@media screen and (min-width: 576px) {
  .modal.bot .lineButtons {
    gap: 0.5rem;
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

.btnTextIconR {
  color: #0038FF;
  transition: color 200ms ease;
  cursor: pointer;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 14px;
}
.btnTextIconR:hover, .btnTextIconR:active {
  color: #000;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0);
}

.ulMensajes {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ulMensajes li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed gainsboro;
}
.ulMensajes li:last-child {
  border-bottom: none;
}
.ulMensajes li span {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  gap: 0.5rem;
  padding: 0.5rem;
}
.ulMensajes li span:hover > * {
  font-weight: 400;
  color: #000;
}
.ulMensajes li span i {
  font-size: 20px;
}
.ulMensajes li span p {
  margin-bottom: 0;
}
.ulMensajes li span .icon-dir-right {
  position: absolute;
  top: 50%;
  right: 0rem;
  transform: translateY(-50%);
}

.ulComandos {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ulComandos li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed gainsboro;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ulComandos li:last-child {
  border-bottom: none;
}
.ulComandos li .title:first-child {
  flex: 0 0 60%;
}
@media screen and (min-width: 600px) {
  .ulComandos li .title:first-child {
    flex: 0 0 55%;
  }
}
.ulComandos li .title:last-child {
  width: 40%;
}
@media screen and (min-width: 600px) {
  .ulComandos li .title:last-child {
    width: 45%;
  }
}
.ulComandos li .title p {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.ulComandos li .blockComando {
  background-color: #ECECEC;
  display: flex;
  justify-content: space-between;
  width: 60%;
  overflow: hidden;
  align-items: center;
  padding: 0.5rem;
  gap: 0.5rem;
  flex: 0 0 60%;
}
@media screen and (min-width: 600px) {
  .ulComandos li .blockComando {
    flex: 0 0 55%;
  }
}
.ulComandos li .blockComando .info {
  padding: 0.5rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  overflow: hidden;
}
.ulComandos li .blockComando .info i {
  font-size: 20px;
}
.ulComandos li .blockComando .info p {
  margin-bottom: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.ulComandos li .blockComando .btnCopiar {
  position: relative;
  color: #0038FF;
  height: fit-content;
  cursor: pointer;
}
.ulComandos li .blockComando .btnCopiar i {
  font-size: 16px;
}
.ulComandos li .blockComando .btnCopiar .textCopy {
  position: absolute;
  top: -9px;
  right: -4px;
  font-size: 6px;
  opacity: 0;
}

.ulComandos li .textFuncion {
  display: flex;
  width: 40%;
}
@media screen and (min-width: 600px) {
  .ulComandos li .textFuncion {
    width: 45%;
  }
}
.ulComandos li .textFuncion p {
  margin-bottom: 0;
}

.innerColumn {
  display: flex;
  flex-direction: column;
  /* gap: 1re */
}

figure.imgSelect {
  position: relative;
}
figure.imgSelect img {
  object-fit: cover;
  object-position: center;
  height: 142px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid gainsboro;
  overflow: hidden;
}
figure.imgSelect span.btnCloseImg {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border-radius: 50px;
  background-color: white;
  transition: all 200ms ease;
  border: 1px solid rgb(245, 245, 245);
  padding: 4px;
  aspect-ratio: 1/1;
  display: flex;
  align-self: center;
  cursor: pointer;
}
figure.imgSelect span.btnCloseImg i {
  font-size: 12px;
  color: red;
  font-weight: 900;
}
figure.imgSelect span.btnCloseImg:hover {
  background-color: gainsboro;
}
figure.imgSelect span.btnCloseImg:hover i {
  color: #000;
}

.reproMensajeCanal .modal-content,
.editarMensajeDirecto .modal-content,
.reproMensajeDirecto .modal-content,
.editarMensajeCanal .modal-content {
  background-color: #fff;
}

.modalConfirmCanal .modal-content,
.modalCuentaVinculada .modal-content,
.modalVincular .modal-content,
.mensajeWarning .modal-content,
.mensajeCancel .modal-content {
  background-color: #fff;
}

.modal-header.warning {
  background-color: #faedd3;
}
.modal-header.warning i {
  color: #EBA000;
  font-size: 30px;
  font-weight: 900;
}

.modal-header.cancel {
  background-color: #fff0f1;
}
.modal-header.cancel i {
  color: #dc3545;
  font-size: 30px;
  font-weight: 900;
}

.modal-header.modalVincular {
  background-color: #FDF4F5;
  border-bottom: none;
}
.modal-header.modalVincular i {
  color: #D14B58;
  font-size: 30px;
  font-weight: 900;
}

.modal-footer.modalVincular {
  border-top: none;
}

.modalAbrirInvitacion .modal-header,
.modalCuentaVinculada .modal-header {
  background-color: #F0FFF5;
  border-bottom: none;
}
.modalAbrirInvitacion .modal-header i,
.modalCuentaVinculada .modal-header i {
  color: #00FF55;
  font-size: 30px;
  font-weight: 900;
}
.modalAbrirInvitacion .modal-footer,
.modalCuentaVinculada .modal-footer {
  border-top: none;
}

.modalConfirmCanal .modal-header {
  background-color: #F0F4FF;
  border-bottom: none;
}
.modalConfirmCanal .modal-header i {
  color: #0038FF;
  font-size: 30px;
  font-weight: 900;
}
.modalConfirmCanal .modal-footer {
  border-top: none;
  padding: 12px 0 0;
}

/* modales customizados por colores poner clase en modal-content*/
.mdB > .modal-header,
.mdR > .modal-header,
.mdO > .modal-header,
.mdG > .modal-header {
  border-bottom: none;
  height: 62px;
}
.mdB > .modal-header > i,
.mdR > .modal-header > i,
.mdO > .modal-header > i,
.mdG > .modal-header > i {
  font-size: 30px;
  font-weight: 900;
}
.mdB > .modal-body .coverImg,
.mdR > .modal-body .coverImg,
.mdO > .modal-body .coverImg,
.mdG > .modal-body .coverImg {
  overflow: hidden;
  width: 100%;
}
.mdB > .modal-body .coverImg img,
.mdR > .modal-body .coverImg img,
.mdO > .modal-body .coverImg img,
.mdG > .modal-body .coverImg img {
  height: 160px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.mdB > .modal-body .coverImgPerfil,
.mdR > .modal-body .coverImgPerfil,
.mdO > .modal-body .coverImgPerfil,
.mdG > .modal-body .coverImgPerfil {
  overflow: hidden;
  width: 100%;
  display: flex;
}
.mdB > .modal-body .coverImgPerfil img,
.mdR > .modal-body .coverImgPerfil img,
.mdO > .modal-body .coverImgPerfil img,
.mdG > .modal-body .coverImgPerfil img {
  border-radius: 160px;
  height: 160px;
  width: 160px;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
}
.mdB > .modal-body .boxRelevant,
.mdR > .modal-body .boxRelevant,
.mdO > .modal-body .boxRelevant,
.mdG > .modal-body .boxRelevant {
  border-radius: 5px;
  padding: 0.9rem;
}

.mdB .modal-header {
  background-color: #F0F4FF;
}
.mdB .modal-header i {
  color: #0038FF;
}

.mdR .modal-header {
  background-color: #fff0f1;
}
.mdR .modal-header i {
  color: #dc3545;
}
.mdR > .modal-body .boxRelevant {
  background-color: #fff0f1;
}

.mdO .modal-header {
  background-color: #faedd3;
}
.mdO .modal-header i {
  color: #EBA000;
}
.mdO > .modal-body .boxRelevant {
  background-color: #faedd3;
}

/* .bNotificacion.danger{
    background-color: #FFB5B5;
    color:#510000;
    border-color: #B82929;
    i.icon-notificacion::after{
        background-color: #510000;

    }
}
.bNotificacion.warning{
    background-color: #FFF9B5;
    color:#513E00;
    border-color: #513E00;
    i.icon-notificacion::after{
        background-color: #513E00;

    }
} */
/* .btns modales */
.btnPrimaryOrange {
  background-color: #EBA000;
  height: 33px;
  border-radius: 3.84px;
  color: #000;
  display: flex;
  text-wrap: nowrap;
  padding: 0 1rem;
  align-items: center;
  justify-content: center;
  font-size: 12.8px;
  transition: all 0.15s ease-in-out;
  width: fit-content;
  gap: 0.5rem;
  border: none;
}
.btnPrimaryOrange:hover, .btnPrimaryOrange:active {
  background-color: #000;
  color: #fff;
}
.btnPrimaryOrange:hover i, .btnPrimaryOrange:active i {
  color: #fff;
}
.btnPrimaryOrange i {
  transition: all 0.15s ease-in-out;
  color: #000;
  padding: 2px;
}
.btnPrimaryOrange.disabled {
  pointer-events: none !important;
  background-color: rgb(197, 197, 197) !important;
  border: none;
  color: #000;
}

.fixChartSize,
.transaccionesEstadistica {
  width: 100% !important;
  overflow-x: auto !important;
}

#desgloseMetodosPago {
  width: 100% !important;
  overflow: hidden !important;
}

/* <main>
  <div> //desde arriba
    <span tooltip="I'm up above it!">Up</span>
  </div>
  <div>//desde iquierda o derecha
    <span tooltip="Slide to the left" flow="left">Left</span>
    <span tooltip="Slide to the right" flow="right">Right</span>
  </div>
  <div> //desde abah
    <span tooltip="Get Down." flow="down">Down</span>
  </div>
</main>
 */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 10px; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: "";
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}

[tooltip]::after {
  content: attr(tooltip); /* magic! */
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: 0.3ch;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip=""]::before,
[tooltip=""]::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^=up]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^=up]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^=up]::before,
[tooltip][flow^=up]::after {
  left: 50%;
  transform: translate(-50%, -0.5em);
}

/* FLOW: DOWN */
[tooltip][flow^=down]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}

[tooltip][flow^=down]::after {
  top: calc(100% + 5px);
}

[tooltip][flow^=down]::before,
[tooltip][flow^=down]::after {
  left: 50%;
  transform: translate(-50%, 0.5em);
}

/* FLOW: LEFT */
[tooltip][flow^=left]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-0.5em, -50%);
}

[tooltip][flow^=left]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-0.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^=right]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(0.5em, -50%);
}

[tooltip][flow^=right]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(0.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^=up]:hover::before,
[tooltip][flow^=up]:hover::after,
[tooltip][flow^=down]:hover::before,
[tooltip][flow^=down]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^=left]:hover::before,
[tooltip][flow^=left]:hover::after,
[tooltip][flow^=right]:hover::before,
[tooltip][flow^=right]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

.gbFicha {
  display: grid;
  grid-gap: 1em;
}
.gbFicha .gbPrev {
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-gap: 0.5em;
  align-items: center;
}
.gbFicha .gbPrev .gbPrevAvatar {
  display: block;
}
.gbFicha .gbPrev .gbPrevTxt {
  display: grid;
  grid-gap: 0.5em;
}
.gbAvatar {
  border-radius: 50%;
  border: solid 2px #fff;
  outline: solid 1px #e2e2e2;
  overflow: hidden;
}
.gbAvatar img {
  width: 100%;
  display: block;
  object-fit: cover;
}/*# sourceMappingURL=styles.css.map */