@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Nunito:ital,wght@0,400;0,600;0,800;1,400;1,600&family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

html { font-family: 'Inter', sans-serif; }

:root{
  --fuenteInter: 'Inter', sans-serif;
  --fuenteRoboto: 'Roboto', sans-serif;
  --fuenteNunito: 'Nunito', sans-serif;
  --fuenteMontserrat: 'Montserrat', sans-serif;
  --saturateBlue: #34495e;
  --white: hsl(0, 0%, 100%);
  /* ## Colors */
  /* ### Primary */
  --SoftOrange: hsl(35, 77%, 62%);
  --SoftRed: hsl(5, 85%, 63%);
  
  /* ### Neutral */
  --OffWhite: hsl(36, 100%, 99%);
  --GrayishBlue: hsl(233, 8%, 79%);
  --DarkGrayishBlue: hsl(236, 13%, 42%);
  --VeryDarkBlue: hsl(240, 100%, 5%);
  --Blue: #235B8C;
  --BlueSky: #F3F9FF;
  --Gray: #d9d9d9;
  --white: hsl(0, 0%, 100%);
  --antiflash: #f1f2f6;
  --DarkGray: #2f3542;
  --Tomato: #eb2f06;
  --Success: #77d644;
  --Carrot: #e67e22;
  --radius-sm: .5rem;
  --primary: #2E4476;
  --primary-alt: #5194F7;
  --clouds: #ecf0f1;

  --transition: 0.3s ease-in-out;
  --nav-height-tareas: 62px;
  /* Font sizes */
  --step--3: clamp(0.434rem, 0.4292rem + 0.0243vw, 0.448rem);
  --step--2: clamp(0.5208rem, 0.5072rem + 0.0681vw, 0.56rem);
  --step--1: clamp(0.625rem, 0.5989rem + 0.1304vw, 0.7rem);
  --step-0: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --step-1: clamp(0.9rem, 0.8326rem + 0.337vw, 1.0938rem);
  --step-2: clamp(1.08rem, 0.9801rem + 0.4995vw, 1.3672rem);
  --step-3: clamp(1.296rem, 1.1524rem + 0.7182vw, 1.709rem);
  --step-4: clamp(1.5552rem, 1.3531rem + 1.0105vw, 2.1362rem);
  --step-5: clamp(1.8662rem, 1.5866rem + 1.3983vw, 2.6703rem);
  --step-6: clamp(2.2395rem, 1.8574rem + 1.9102vw, 3.3379rem);
}

.navbar-brand,
.navbar-nav > li > a {
  color: #000 !important;
  font-weight: 400 !important;
}
.my-custom-scrollbar {
  position: relative;
  height: 200px;
  overflow: auto;
  }
  .table-wrapper-scroll-y {
  display: block;
  }

#divBuscador {
  padding: 7px 0;
  width: 25%;
  padding-left: 10px;
  padding-right: 10px;
}

#btnTrash {
  /* width: 7%; */
  background-color: transparent;
  color: gray;
  border: none;
  color: black;
}

.navbar-toggler {
  border: 0 !important;
}
.botonesGrises {
  background-color: #a5a6a8;
  border-color: #a5a6a8;
  color: #000;
  min-width: 12%;
  border-radius: 20px;
  font-size: 11px;
  white-space: nowrap;
}

.botonAzul {
  border-bottom-left-radius: 20em 10em;
  border-top-left-radius: 20em 10em;
  border-bottom-right-radius: 20em 10em;
  font-weight: bold;
  border-top-right-radius: 20em 10em;
  font-size: 11px;
  color: black;
  margin-right: 2%;
  min-width: 11%;
  font-family: sans-serif;
  align-items: center;
  height: 17px;
  justify-content: space-evenly;
  flex-direction: column;
  white-space: nowrap;
  background-color: #a4cafb;
  border-color: #a4cafb;
}

.botonesGrisesNuevos {
  border-bottom-left-radius: 20em 10em;
  border-top-left-radius: 20em 10em;
  border-bottom-right-radius: 20em 10em;
  border-top-right-radius: 20em 10em;
  font-size: 11px;
  margin-right: 2%;
  font-family: sans-serif;
  height: 17px;
  justify-content: space-evenly;
  flex-direction: column;
  color: black;
  align-items: center;
  min-width: 11%;
  font-weight: bold;
  background-color: #a5a6a8;
  border-color: #a5a6a8;
}

.botonesMasGrisesNuevos {
  border-bottom-left-radius: 20em 10em;
  border-top-left-radius: 20em 10em;
  border-bottom-right-radius: 20em 10em;
  border-top-right-radius: 20em 10em;
  font-size: 11px;
  margin-right: 2%;
  font-family: sans-serif;
  height: 17px;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  white-space: nowrap;
  min-width: 8%;
  color: white;
  border-color: #464646;
  background-color: #464646;
}

.btnPlus {
  border: none;
  background-color: transparent;
  margin-bottom: 15px;
  /* margin-right: 2%; */
}

.botonesVerdesNuevos {
  border-bottom-left-radius: 20em 10em;
  border-top-left-radius: 20em 10em;
  border-bottom-right-radius: 20em 10em;
  border-top-right-radius: 20em 10em;
  font-size: 11px;
  margin-right: 2%;
  font-family: sans-serif;
  height: 17px;
  justify-content: space-evenly;
  flex-direction: column;
  color: black;
  align-items: center;
  min-width: 11%;
  white-space: nowrap;
  font-weight: bold;
  background-color: #a2dda7;
  border-color: #a2dda7;
  cursor: default;
}

.botonesMasGrises {
  white-space: nowrap;
  border-radius: 90%;
  height: 1.5625rem;
  background-color: #464646;
  border-color: #464646;
}
.letrasSide {
  color: #494949;
  margin: 0%;
  font-size: 13px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
}

.letrasSide1 {
  color:#235B8C;
  margin: 0%;
  font-size: 13px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  text-align: left;
}

.letrasSide3{
  font-size: 10px;
  margin-left: 1.7rem;
}
.agregar {
  background: transparent;
  border: 0;
  color: #000 !important;
}
.agregar a {
  color: #000 !important;
  font-size: 16px;
}

.descripcion {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #cccccc;
}
.botonVoBo {
  border-radius: 20px;
  font-size: 10px;
  margin-right: 2%;
  white-space: nowrap;
  width: 15%;
  background-color: #98a7f7;
  border-color: #98a7f7;
}
.conmigo {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #8bde9e;
}
.visto {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #98a7f7;
}
.cumplida {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #3e8d39;
}
.incumplida {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #c56244;
}
.responsable {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #8bdecc;
}
.reagendar {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #8bdecc;
}
.cambiofecha {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #9d8bde;
}
.opcionesGrupos {
  height: 25px;
  font-size: 13px;
  cursor: pointer;
  /* margin-top: 1%; */
}
.tituloText {
  padding: 30px;
  width: 100%;
  height: 50px;
}

.descripcionText {
  padding: 30px;
  width: 100%;
  height: 80px;
}

.dateInput {
  padding: 10px;
  width: 40%;
  height: 40px;
}
.columnaIzquierda {
  width: 30%;
}
.columnaDerecha {
  width: 70%;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #ccc;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 15px;
  color: #000 !important;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #000 !important;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-right: 50px;
}

@media (max-width: 768px) {
  .ordenar {
    margin-right: -70px;
  }
}

@media (max-width: 992px) {
  #divBuscador {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .botonesGrises {
    font-size: 6px;
    width: 20%;
  }
  .botonesMasGrisesNuevos {
    border-radius: 10px;
    font-size: 7px;
    min-height: 20px;
    margin-top: 60%;
  }
  .letrasSide {
    /* font-size: 15px; */
  }
  #verGrupo {
    font-size: 13px;
  }
  .col-3 {
    font-size: 10px;
  }
}

@media (max-width: 1344px) {
  .botonesMasGrisesNuevos {
    min-width: 7%;
    white-space: normal;
    height: 1.25rem;
    margin-left: -1.875rem;
    margin-top: 0.9375rem;
    font-size: 8px;
    text-align: center;
  }
  #verGrupo {
    /* margin-left: 1%; */
    /* font-size: 15px; */
  }
  .fa-ellipsis-h {
    margin-left: -10px;
  }
  .fa-circle {
    /* margin-left: -15px; */
  }

  @media (max-width: 503px) {
    .ng-scope {
      /* margin-top: 10px; */
    }
  }
  .letrasSide {
    /* margin-top: 0.9375rem; */
    font-size: 13px;
    text-align: center;
  }
}

@media (max-width: 1227px) {
  .list-group {
    min-width: fit-content;
  }
  /* .fa-ellipsis-h {
    margin-left: -23px;
  } */
}

@media (max-width: 1120px) {
  .botonesMasGrisesNuevos {
    min-width: 5%;
    white-space: normal;
    margin-left: 1px;
    height: 30px;
  }
}

/* @media(max-width: 662px) {
    .botonesMasGrisesNuevos {
      margin-left: -0.9375rem;
      margin-top: 1.25rem;
    }
  } */

@media (max-width: 1056px) {
  .botonesMasGrises {
    white-space: normal;
    font-size: 10px;
    min-width: 3%;
  }
}

.nav_menu {
  margin-bottom: 0 !important;
}

.nav-md .container.body .right_col {
  /* padding: 0 !important; */
}
.navbar-light .icono_blanco {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  border: 0 !important;
  outline: none !important;
}

.fondoBlanco {
  background-color: white;
}

.cursorMano {
  cursor: pointer;
}

.iconos {
  color: black;
  font-size: 23px;
  padding: 0.2rem;
  margin-top: 2px;
  margin-left: -30px;
}

.fechaHoy {
  color: rgb(192, 192, 11);
}

.fechaVencida {
  color: rgb(218, 47, 47);
}

.fa-circle-thin:hover {
  color: rgb(53, 218, 20);
  font-size: 23px;
}

.fa-search-plus:hover {
  color: royalblue;
}

.iconCumplir:hover {
  color: seagreen;
}

.iconIncumplir:hover {
  color: crimson;
}

/* .card-header {
    padding: 0.5rem 0.5rem 0.5rem 0.2rem !important;
  } */


.dropbtn {
  background: transparent;
  color: black;
  margin-right: 15px;
  padding: 15px;
  font-size: 16px;
  border: none;
}

.dropdownF {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: white;
}

.archivada {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #fabb87;
}

.terminada {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: #000;
  background-color: #caf599;
}

.cumplida {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: rgb(255, 255, 255);
  background-color: #3e8d39;
}
.incumplida {
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 10px;
  color: rgb(255, 255, 255);
  background-color: #c56244;
}
.elementoSide {
  text-align: left;
  margin-left: 10%;
  width: 90%;
}

.select2-container--default .select2-selection--single {
  height: 37px;
}
.todoTexto {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.misGrupos {
  white-space: normal;
  line-height: 170%;
  font-size: 14px;
  color: rgb(0, 0, 0);
  cursor: pointer;
  width: 50%;
}

.opcGrupos {
  
  width: 20%;
}

.left_col {
  /*background: #334c80;*/
  background: rgb(53, 76, 132);
  /* background: linear-gradient(
    0deg,
    rgba(53, 76, 132, 1) 0%,
    rgba(42, 63, 84, 1) 100%
  ); */
}
/* 3d3b56 */

.container {
  width: 100%;
  padding: 0;
  max-width: 100%;
}

.nav-sm .container.body .col-md-3.left_col {
  min-height: 100%;
  width: 70px;
  padding: 0;
  z-index: 9999;
  position: absolute;
}

.nav-sm .container.body .col-md-3.left_col.menu_fixed {
  position: fixed;
  height: 100%;
}

.nav-sm .container.body .col-md-3.left_col .mCSB_container,
.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
  overflow: visible;
}

.nav-sm .hidden-small {
  visibility: hidden;
}

.nav-sm .container.body .right_col {
  padding: 10px 20px 0 20px;
  /* margin-left: 70px; */
  margin-left: 50px;
  z-index: 2;
}

.nav-sm .navbar.nav_title {
  width: 70px;
}

.nav-sm .navbar.nav_title a img {
  display: none;
}

.site_title i {
  display: none;
}
.nav-sm .site_title i {
  display: block;
}

.nav-sm .main_container .top_nav {
  display: block;
  margin-left: 70px;
  z-index: 2;
}

.nav-sm .nav.side-menu li a {
  text-align: center !important;
  font-weight: 400;
  font-size: 10px;
  padding: 10px 5px;
}

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
  /* border-right: 5px solid #4dade1; */
}

.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {
  position: static;
  width: 200px;
  background: none;
}

.nav-sm > .nav.side-menu > li.active-sm > a {
  /* color: #4dade1 !important; */
}

.nav-sm .nav.side-menu li a i.toggle-up {
  display: none !important;
}

.nav-sm .nav.side-menu li a i {
  font-size: 25px !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 5px;
}

.nav-sm ul.nav.child_menu {
  left: 100%;
  position: absolute;
  top: 0;
  width: 210px;
  z-index: 4000;
  background: #3e5367;
  display: none;
  border-radius: 5px;
}

.nav-sm ul.nav.child_menu li {
  padding: 0 10px;
}

.nav-sm ul.nav.child_menu li a {
  text-align: left !important;
}
.icon-flecha{
  transition: all .20s linear;
}
.icon-flecha.activo{
  transform: rotate(180deg);
}
.nav-sm .profile {
  display: none;
}

.menu_section {
  /* margin-bottom: 35px; */
}

.menu_section h3 {
  padding-left: 23px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: 1px 1px #000;
}

.menu_section > ul {
  /* margin-top: 10px; */
  display: block;
}

.profile_pic {
  width: 35%;
  float: left;
}

.img-circle.profile_img {
  width: 70%;
  background: #fff;
  margin-left: 15%;
  z-index: 1000;
  position: inherit;
  margin-top: 20px;
  border: 1px solid rgba(52, 73, 94, 0.44);
  padding: 4px;
}

.profile_info {
  padding: 25px 10px 10px;
  width: 65%;
  float: left;
}

.profile_info span {
  font-size: 13px;
  line-height: 30px;
  color: #bab8b8;
}

.profile_info h2 {
  font-size: 14px;
  color: var(--clouds);
  margin: 0;
  font-weight: 300;
}

.profile.img_2 {
  text-align: center;
}

.profile.img_2 .profile_pic {
  width: 100%;
}

.profile.img_2 .profile_pic .img-circle.profile_img {
  width: 50%;
  margin: 10px 0 0;
}

.profile.img_2 .profile_info {
  padding: 15px 10px 0;
  width: 100%;
  margin-bottom: 10px;
  float: left;
}

.main_menu span.fa {
  float: right;
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
  min-width: inherit;
  color: #c4cfda;
}

.active a span.fa {
  text-align: right !important;
  margin-right: 4px;
}

.nav-sm .menu_section {
  margin: 0;
}

.nav-sm span.fa,
.nav-sm .menu_section h3 {
  display: none;
}

.nav-sm li li span.fa {
  display: inline-block;
}

.nav_menu {
  float: left;
  background-color: var(--Blue);
  border-bottom: 1px solid var(--Blue);
  /* margin-bottom: 10px; */
  width: 100%;
  position: relative;
  /* padding: 6px 0; */
  height: 100%;
  padding: 8px 0;
}
@media (min-width: 768px){ 
  .nav_menu {
    float: left;
    background-color: white;
    border-bottom: 1px solid #d9dee4;
    /* margin-bottom: 10px; */
    width: 100%;
    position: relative;
    /* padding: 6px 0; */
    height: 7vh;
    padding: 0;
  }
}
.enlace-bar{
  color: var(--OffWhite);
}

.info-number .badge {
  font-size: 10px;
  font-weight: normal;
  line-height: 13px;
  padding: 2px 6px;
  position: absolute;
  right: -2px;
  top: -8px;
}

@media (min-width: 480px) {
  .nav_menu {
    position: static;
  }

  .item {
    display: block;
  }
}
.nav-md .container.body .col-md-3.left_col {
  min-height: 100%;
  width: 230px;
  padding: 0;
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  z-index: 1;
}

.nav-md .container.body .col-md-3.left_col.menu_fixed {
  height: 100%;
  position: fixed;
}

body .container.body .right_col {
  background: #f7f7f7;
}

.nav-md .container.body .right_col {
  padding: 48px 20px 0;
  padding: 0;
  background-color: var(--OffWhite);
  margin-left: 230px;
}

.nav_title {
  width: 230px;
  float: left;
  /*background: #334c80;*/
  background: rgb(53, 76, 132);
  /* background: linear-gradient(
    0deg,
    rgba(53, 76, 132, 1) 0%,
    rgba(42, 63, 84, 1) 100%
  ); */
  border-radius: 0;
  height: 7vh;
  padding: 0px;
}

@media (max-width: 991px) {
  .info-number .badge {
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    padding: 2px 6px;
    position: absolute;
    right: 135px;
    top: 6px;
  }

  .nav-md .container.body .right_col,
  .nav-md .container.body .top_nav {
    width: 100%;
    margin: 0;
  }

  .nav-md .container.body .col-md-3.left_col {
    display: none;
  }

  .nav-md .container.body .right_col {
    width: 100%;
    padding-right: 0;
  }

  .right_col {
    padding: 1px !important;
  }
}

.left_col .mCSB_scrollTools {
  width: 6px;
}

.left_col .mCSB_dragger {
  max-height: 400px !important;
}

/* Estilos para viaticos y sus tablas */
.tableConcepto{
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
.tableConcepto thead tr{
  padding: 5px 10px;
  background-color: #7CA7B9;
}
.tableConcepto thead tr td{
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  height: 50px;
  padding: 5px 10px;
}
.tableConcepto tbody tr td{
  color: black;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  padding: 5px 10px;
}
.tableConcepto tbody tr td input[type=text]{
  width: 78px;
}
.tableConcepto tbody tr td input[type=checkbox]{
  height: 20px;
  width: 20px;
}
.tableConcepto select{
  background-color: transparent;
  border: none;
  color: #4461C8 !important;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
}
.btn-enviar-concepto{
  display: inline;
  border: none;
  background-color: #97BB69;
  color: white;
  font-weight: 700;
  font-size: 14px;
  border-radius: 5px;
  width: 150px;
  height: 25px;
  position: absolute;
  right: 0;
  margin-top: 15px;
  transition: all .15s ease-in;
}
.btn-enviar-concepto:hover{
  background-color: #85a55c;
}
.sub-viatico{
  color: #324464;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 5px;
  
}
@media (min-width: 768px){ 
    .sub-viatico{
      font-size: 14px;
    }
  }
  .sub-viatico--big{
    font-size: 18px;
  }
  .sub-viatico--big span{
    font-weight: 400;
}
.tableTransporte{
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
.tableTransporte thead tr{
  padding: 5px 10px;
  background-color: #7CA7B9;
}
.tableTransporte thead tr th{
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  height: 50px;
  padding: 5px 10px;
}
.tableTransporte tbody tr td{
  color: black;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 5px 10px;
}
.tableTransporte tbody tr td input[type=text]{
  width: 78px;
}
.razonViaje{
  width: 350px !important;
}
.tableTransporte tbody tr td input[type=checkbox]{
  height: 20px;
  width: 20px;
}
.opcionTransporte select{
  background-color: transparent;
  border: none;
  color: #4461C8 !important;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
}
.resumen-viaticos{
  padding: 1rem;
  border-radius: 5px;
  border: 1px solid #939393;
  margin-top: 40px;
}
.resumen-viaticos > div{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.resumen-viaticos div p{
  margin-bottom: 0;
  font-weight: 700;
  color: black;
  font-size: 14px;
  text-align: right;
  margin-right: 1rem;
}
.nav-tab-card{
  background-color: #B0B0B0 !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.nav-tab-rep{
  background-color: #e1e0e0 !important;
  color: rgb(35, 99, 237) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.tab-color{
  color: #545EBC;
  font-weight: 600;
  font-size: 14px;
}
.text-gray-sm, .contador{
  color: #656565;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
  font-family: 'Poppins', sans-serif;
}
.btn-subir{
  border: none;
  background-color: #ABABAB;
  color: white;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  padding: 3px 7px;
  position: relative;
  width: 100%;
  max-width: 78px;
  margin: 0 auto;
}
.btn-subir input[type=file]{
  content: "";
  position: absolute;
  inset: 0;
  width: inherit;
  opacity: 0;
  cursor: pointer;
}
@media (max-width: 768px){ 
    .btn-subir{
      margin-left: auto;
      margin-right: 0;
    }
}
.btn-ver{
    border: none;
    background-color: #97BB69;
    color: white;
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    padding: 3px 7px;
    position: relative;
    width: 100%;
    max-width: 78px;
    margin: 0 auto;
  }
  @media (max-width: 768px){ 
    .btn-ver{
      margin-left: auto;
      margin-right: 0;
    }
  }
  .btn-ver input[type=file]{
    content: "";
    position: absolute;
    inset: 0;
    width: inherit;
    opacity: 0;
    cursor: pointer;
  }
  .archivosPDF , .archivosPDFSeg, .archivosXML{
    position: relative;
    background-color: #B0B0B0;
    padding: 5px 10px;
    color: white;
    font-weight: 700;
    font-size: 13px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 100%;
  }
  .archivosPDF__cargar, .archivosPDFSeg__cargar, .archivosXML__cargar{
    position: absolute;
    inset: 0;
    width: inherit;
    opacity: 0;
    cursor: pointer;
  }
  .visualizarPDF, .visualizarPDFSeg, .visualizarXML{
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #CFCFCF;
    border-radius: 5px;
    position: relative;
    visibility: hidden;
  }
  .visualizarPDF--activo, .visualizarPDFSeg--activo, .visualizarXML--activo{
    visibility: visible;
  }
  .visualizarPDF__nombre, .visualizarPDFSeg__nombre, .visualizarXML__nombre{
    color: #001AFF;
    font-weight: 700;
    font-size: 12px;
    margin: 0;
    max-width: 200px;
  }
  .visualizarPDF__nombre--tipo, .visualizarPDFSeg__nombre--tipo, .visualizarXML__nombre--tipo{
    text-transform: uppercase;
    margin-left: auto;
  }
  .visualizarPDF__agregar, .visualizarPDFSeg__agregar, .visualizarXML__agregar{
    position: absolute;
    right: -45px;
    cursor: pointer;
  }
  .visualizarPDF__vaciar, .visualizarPDFSeg__vaciar, .visualizarXML__vaciar{
    cursor: pointer;
  }
.select-default-viatico{
  background-color: white !important;
  border: none;
  padding: 5px;
  color: #908D8D;
  font-size: 11px;
  list-style: 13.31px;
  max-width: 150px;
  width: 100%;
  border: 1px solid #C6C6C6;
}
/* Fin para estilos para viaticos y sus tablas */

.container {
  width: 100%;
  padding: 0;
  max-width: 100%;
}

.navbar-nav > li > a,
.navbar-brand,
.navbar-nav > li > a {
  color: #fff;
}

body {
  color: #00081a;
  /* background: #e6edff; */
  /* font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif; */
  font-family: var(--fuenteInter);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.471;
  margin-top: 0 !important;
}

.main_container .top_nav {
  display: block;
  /* margin-left: 230px; */
}

.no-padding {
  padding: 0 !important;
}

.main_content {
  padding: 10px 20px;
}

.col-md-55,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}

.btn-success2 {
  margin-left: 10px;
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  border-color: #00a501;
  background-color: #00a501;
  height: 1rem;
  border-bottom-left-radius: 20em 10em;
  border-top-left-radius: 20em 10em;
  border-bottom-right-radius: 20em 10em;
  border-top-right-radius: 20em 10em;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
}

.btn-danger2 {
  color: #fff;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  height: 1rem;
  border-radius: 20px;
  margin-left: 0.9375rem;
  font-size: 10px;
  border-color: #a70007;
  background-color: #a70007;
  border-bottom-left-radius: 20em 10em;
  border-top-left-radius: 20em 10em;
  border-bottom-right-radius: 20em 10em;
  border-top-right-radius: 20em 10em;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

a {
  color: #2e86de;
  text-decoration: none;
}

a,
a:visited,
a:focus,
a:active,
:visited,
:focus,
:active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 0;
}

a:hover,
a:focus {
  text-decoration: none;
}

.navbar {
  margin-bottom: 0;
}

.navbar-header {
  background: #34495e;
}

.navbar-right {
  margin-right: 0;
}

.top_nav .navbar-right {
  margin: 13px;
  width: auto;
  float: right;
}

.top_nav .navbar-right li {
  display: inline-block;
  float: right;
  position: static;
}

@media (min-width: 480px) {
  .top_nav .navbar-right li {
    position: relative;
  }

  .item {
    display: block;
  }
}

.top_nav .dropdown-menu li {
  width: 100%;
}

.dropdown-item {
  width: 100%;
  padding: 12px 20px;
}

.top_nav li a i {
  font-size: 15px;
}

.navbar-static-top {
  position: fixed;
  top: 0;
  width: 100%;
}

.sidebar-header {
  border-bottom: 0;
  margin-top: 46px;
}

.sidebar-header:first-of-type {
  margin-top: 0;
}

.nav.side-menu > li {
  position: relative;
  display: block;
  cursor: pointer;
}

.nav.side-menu > li > a:hover {
  color: #f2f5f7 !important;
}

.nav.side-menu > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background: transparent;
}

.nav.child_menu {
  display: none;
  position: relative;
}

.nav.child_menu li:hover,
.nav.child_menu li.active {
  background-color: rgba(255, 255, 255, 0.06);
}

.nav.child_menu li {
  padding-left: 20px;
}

/*.nav-md ul.nav.child_menu li:before {
   background: #425668;
  bottom: auto;
  content: "";
  height: 8px;
  left: 23px;
  margin-top: 15px;
  position: absolute;
  right: auto;
  width: 8px;
  z-index: 1;
  border-radius: 50%; 
}*/

/* .nav-md ul.nav.child_menu li:after {
  border-left: 1px solid #425668;
  bottom: 0;
  content: "";
  left: 27px;
  position: absolute;
  top: 0; 
}*/

.nav-md ul.nav.child_menu li:last-child::after {
  bottom: 50%;
}

.nav.side-menu > li > a,
.nav.child_menu > li > a {
  color: #e7e7e7;
  font-weight: 500;
}

.nav.child_menu li li:hover,
.nav.child_menu li li.active {
  background: none;
}

.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
  color: #fff;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 13px 15px 12px;
}

.nav.side-menu > li.current-page,
.nav.side-menu > li.active {
  /* border-right: 5px solid #4dade1; */
}

.nav li.current-page {
  background: rgba(255, 255, 255, 0.05);
}

.nav li li li.current-page {
  background: none;
}

.nav li li.current-page a {
  color: #fff;
}

.nav.side-menu > li.active > a {
  text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
  /*background: linear-gradient(#334556, #2c4257), #334c80;*/
  /* background: rgb(53, 76, 132); */
  background-color: #3A5BA0;
  /* background: linear-gradient(
    0deg,
    rgba(53, 76, 132, 1) 0%,
    rgba(42, 63, 84, 1) 100%
  );
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0,
    inset rgba(255, 255, 255, 0.16) 0 1px 0; */
}

.navbar-brand,
.navbar-nav > li > a {
  font-weight: 500;
  color: var(--clouds);
  margin-left: 0 !important;
  line-height: 32px;
}

.site_title {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 22px;
  width: 100%;
  color: var(--clouds) !important;
  margin-left: 0 !important;
  line-height: 59px;
  display: block;
  height: 55px;
  margin: 0;
  /* padding-left: 10px;  */
  text-align: center;
}

.site_title:hover,
.site_title:focus {
  text-decoration: none;
}

.nav.navbar-nav > li > a {
  color: #515356 !important;
}

.nav.top_menu > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #34495e !important;
}

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: transparent;
}

.toggle {
  float: left;
  margin: 0;
  width: 70px;
}

.toggle a {
  padding: 11px 14px 0;
  margin: 0;
  cursor: pointer;
}

.toggle a i {
  font-size: 26px;
}

.nav.child_menu > li > a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  padding: 7px 5px;
  &:hover{ color: white !important; }
}

.main_menu_side {
  padding: 0;
}

footer {
  background: #fff;
  padding: 10px 20px;
  display: block;
}

.nav-sm footer {
  margin-left: 70px;
}

.footer_fixed footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
}

@media (min-width: 768px) {
  .footer_fixed footer {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .footer_fixed .nav-sm footer {
    margin-left: 0;
  }
}
.tile-stats.sparkline {
  padding: 10px;
  text-align: center;
}

/* barra superior donde esta el perfil del usuario */
.dropdown-menu.msg_list span {
  white-space: normal;
}

.dropdown-menu {
  border: medium none;
  box-shadow: none;
  display: none;
  float: left;
  font-size: 12px;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 9998;
  border: 1px solid #d9dee4;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-menu > li > a {
  color: #2e86de;
}

.btnArchivados {
  border-bottom-left-radius: 20em 10em;
  border-top-left-radius: 20em 10em;
  border-bottom-right-radius: 20em 10em;
  border-top-right-radius: 20em 10em;
  font-size: smaller;
  align-items: center;
  height: 20px;
  background-color: #212529;
  justify-content: space-evenly;
  display: flex;
  flex-direction: column-reverse;
  width: 50%;
  margin-left: 25%;
  flex-wrap: wrap;
  align-content: space-around;
  padding: 9px 5px;
}

.navbar-nav .open .dropdown-menu {
  position: absolute;
  background: #fff;
  margin-top: 0;
  border: 1px solid #d9dee4;
  box-shadow: none;
  right: 0;
  left: auto;
  width: 220px;
}
.iconHam--white{
  color: var(--OffWhite);
  margin-left: 5px;
}
a.user-profile {
  color: var(--OffWhite) !important;
}
@media (min-width: 768px){ 
  a.user-profile {
    color: #325A88 !important;
  }
  .iconHam--white{
    color: #2a3d5b;
    margin-left: 15px;
    
  }
}



.user-profile img {
  color: #325A88;
  border-radius: 50%;
  margin-right: 10px;
}
.img-rh{
  border-radius: 5px;
  object-fit: cover;
  width: 50px;
  height: 50px;
}
.img-rh-general{
  border-radius: 10px;
  object-fit: cover;
  width: 100px;
  height: 100px;
  display: block;
}
.nombre-puesto-rh{
  font-weight: 700;
  font-size: 12px;
}
.nombre-puesto-rh span, .nombre-sucursal-rh span{
  color: #210EFF;
  font-weight: 400;
}
@media (min-width: 768px){ 
  .nombre-puesto-rh{
    text-align: left !important;
  }
}
.archivosPDF , .archivosPDFSeg{
  position: relative;
  background-color: #B0B0B0;
  padding: 5px 10px;
  color: white;
  font-weight: 700;
  font-size: 13px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  height: 35px;
}
.archivosPDF__cargar, .archivosPDFSeg__cargar{
  position: absolute;
  inset: 0;
  width: inherit;
  opacity: 0;
  cursor: pointer;
}
.visualizarPDF, .visualizarPDFSeg{
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #CFCFCF;
  border-radius: 5px;
  position: relative;
  visibility: hidden;
}
.visualizarPDF--activo, .visualizarPDFSeg--activo{
  visibility: visible;
}
.visualizarPDF__nombre, .visualizarPDFSeg__nombre{
  color: #001AFF;
  font-weight: 700;
  font-size: 12px;
  margin: 0;
  max-width: 200px;
}
.visualizarPDF__nombre--tipo, .visualizarPDFSeg__nombre--tipo{
  text-transform: uppercase;
  margin-left: auto;
}
.visualizarPDF__agregar, .visualizarPDFSeg__agregar{
  position: absolute;
  right: -45px;
  cursor: pointer;
}
.visualizarPDF__vaciar, .visualizarPDFSeg__vaciar{
  cursor: pointer;
}
.btn-rh{
  border: none;
  background-color: #28A745;
  color: white;
  border-radius: 5px;
  max-width: 150px;
  height: 35px;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  transition: all .15s ease-in;
}
.btn-rh.rojo{
  background-color: #B13030;
}
.btn-rh.rojo:hover{
  background-color: #9f2a2a;
}
.btn-rh.gris{
  background-color: #808080;
}
.btn-rh.gris:hover{
  background-color: #707070;
}
.btn-rh:hover{
  background-color: #228f3c;
}
.txt-gray-sm{
  font-size: 12px;
  color: #656565;
  font-weight: 500;
  margin-bottom: 5px;
}
.radio-20{
  height: 20px;
  width: 20px;
}
.radius-tbright-10{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.radius-tbleft-10{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.radius-tbright-0{
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.radius-tbleft-0{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.subheading-rh{
  font-weight: 600;
  color: #334568;
  font-size: 18px;
  margin-bottom: 0;
}
.nom-candidato-rh{
  font-size: 20px;
  font-weight: 600;
}
.nom-candidato-rh span{
  color: #647CAC;
}
.textarea-detalles{
  border: 1px solid #CFCFCF;
  border-radius: 10px;
  background-color: white;
  font-size: 14px;
  resize: none;
  padding: 5px 10px;
  width: 100%;
}
.salario-diario{
  color: #647CAC;
  font-weight: 600;
  font-size: 16px;
}
/* Tabla general  */
.tabla-responsive{
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', sans-serif;
  --rounded-table: 20px;
}
.tabla-responsive thead{
  position: sticky;
  top: 0;
  z-index: 99;
  outline: 1px solid #E2E8F0;
  outline-offset: -1px;
  border-radius: var(--rounded-table);
}
.tabla-responsive tr{
  border-top: transparent;
  background-color: #ffffff;
}
.tabla-responsive tr:nth-of-type(even){
  background-color: #f7f7f7;
}
.tabla-responsive th{
  background-color: #f4f8fb;
  text-align: left;
  padding: 15px 7px;
  color: #48566a;
  font-weight: 600;
  font-size: 13px;
}
.tabla-responsive th:first-of-type{
  border-top-left-radius: var(--rounded-table);
  border-bottom-left-radius: var(--rounded-table);
}
.tabla-responsive th:last-of-type{
  border-top-right-radius: var(--rounded-table);
  border-bottom-right-radius: var(--rounded-table);
}
.tabla-responsive td{
  padding: 15px 7px;
  color: #020617;
  font-size: 12px;
  border-bottom: 1px solid #E2E8F0;
}
.tabla-responsive tfoot{
  background: #7CA7B9;
	color: white;
	font-weight: 500;
}

.tabla-responsive input, .tabla-responsive select {
	background-color: #fff;
	border: 1px solid #AAA;
	border-radius: 4px;
	font-size: 14px;
	height: 32px;
	text-align: center;
  margin: auto;
}
.tabla-responsive td textarea {
	min-width: 150px;
  width: 100%;
	border: 1px solid #7ca7b9;
	border-radius: 4px;
	min-height: 2em;
	font-size: 1em;
}
/* Responsive mobile */
@media (max-width: 668px){ 
  .tabla-responsive thead{
    display: none;
  }
  .tabla-responsive tbody, .tabla-responsive tr, .tabla-responsive td{
    display: block;
  }
  .tabla-responsive tr{
    border-top: 1px solid var(--GrayishBlue) !important;
    margin-bottom: 15px;
    border-radius: var(--radius-sm);
    background: linear-gradient(45deg, #fcfdff, var(--BlueSky));
    border: 1px solid var(--GrayishBlue);
    box-shadow: 0px 5px 5px 0px rgba(220,230,242,0.75);
  }
  .tabla-responsive tr:nth-of-type(odd){
    background: linear-gradient(45deg, #eaf2ff, var(--BlueSky));
  }
  .tabla-responsive td{
    padding: 7px;
    text-align: right;
    position: relative;
    font-size: 12px;
    font-weight: 500;
    color: var(--DarkGrayishBlue);
    /* background-image: linear-gradient(to right, transparent 50%, var(--Gray) 50%); */
    background-size: 5px 1px;
    background-position: bottom;
    background-repeat: repeat-x;
    min-height: 30px;
  }
  .tabla-responsive td::before{
    content: attr(data-label);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    float: left;
    color: var(--Blue);
    padding-bottom: 5px;
    padding-right: 13px;
  }
  .tabla-responsive .tabla-responsive {
    border: 2px groove #4dade040;
    margin: 10px;
    margin: 10px 0 0;
  }
}
.nav-tab-card{
  background-color: #B0B0B0 !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.tab-color{
  color: #545EBC;
  font-weight: 600;
  font-size: 14px;
}
.col-form-label{
  font-size: 16px !important;
  color: black !important;
  font-weight: 600 !important;
}

/* tablas */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}
.table td {
  padding: 8px;
}
.table .fa {
  font-size: 16px;
  margin-right: 5px;
}

/*paginador*/
.pag {
  width: 100%;
  text-align: center;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #2a3f53;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #2a3f53;
  border-color: #2a3f53;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/*activo - inactivo*/
.icon-active {
  background-image: url("../img/active.svg");
  height: 18px !important;
  width: 18px !important;
  background-size: 80%;
  background-repeat: no-repeat;
  position: absolute;
  top: calc(50% - 9px);
  right: 0;
}
.icon-inactive {
  background-image: url("../img/inactive.svg");
  height: 18px !important;
  width: 18px !important;
  background-size: 80%;
  background-repeat: no-repeat;
  position: absolute;
  top: calc(50% - 9px);
  right: 0;
}
@media (min-width: 500px){ 
  .icon-active {
    position: unset;
    background-image: url("../img/active.svg");
    height: 18px !important;
    width: 18px !important;
    background-size: 80%;
    background-repeat: no-repeat;
    margin-inline: auto;
  }
  .icon-inactive {
    position: unset;
    background-image: url("../img/inactive.svg");
    height: 18px !important;
    width: 18px !important;
    background-size: 80%;
    background-repeat: no-repeat;
    margin-inline: auto;
  }
}

form .has-danger label {
  color: red !important;
}

form .form-control {
  margin-bottom: 15px;
  height: 40px;
}

form .form-control-sm {
	height: calc(1.75em + 0.5rem + 2px) !important;
}

form .btn-block {
  height: 40px;
}

.form-control::placeholder {
	font-size: 0.8em;
}

.btn-info,
.bg-info {
  background-color: #4dade1 !important;
  border-color: #4dade1 !important;
}
.btn-info:hover {
  background-color: #2486bb !important;
  border-color: #2486bb !important;
}
.alert-info {
  color: #2276b4;
}
.add {
  background-color: #2a3f53 !important;
  border-color: #2a3f53 !important;
}

/* sweeatalert */
.swal-footer {
  text-align: center;
}

#content_formulario h3 {
  font-size: 20px;
  margin: 30px 0;
}

#content_formulario .col-form-label {
  font-weight: bold;
  /* font-size: 12px !important; */
}

/* arbol */
div[data-angular-treeview] {
  /* prevent user selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* default */
  font-family: Tahoma;
  font-size: 13px;
  color: #555;
  text-decoration: none;
}

div[data-angular-treeview] .accion {
  margin-left: 8px;
}
div[data-angular-treeview] .accion.permisos {
  color: #ff9800;
}
div[data-angular-treeview] .accion.editar {
  color: #03a9f4;
}
div[data-angular-treeview] .accion.agregar {
  color: #45bb00;
}
div[data-angular-treeview] .accion.remove {
  color: red;
}

div[data-tree-model] ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
  overflow: hidden;
}

div[data-tree-model] li {
  position: relative;
  padding: 0 0 0 20px;
  line-height: 23px;
}

div[data-tree-model] li .expanded {
  padding: 1px 10px;
  background-image: url("../img/folder.png");
  background-repeat: no-repeat;
}

div[data-tree-model] li .collapsed {
  padding: 1px 10px;
  background-image: url("../img/folder-closed.png");
  background-repeat: no-repeat;
}

div[data-tree-model] li .normal {
  padding: 1px 10px;
  background-image: url("../img/file.png");
  background-repeat: no-repeat;
}

div[data-tree-model] li i,
div[data-tree-model] li span {
  cursor: pointer;
  font-size: 14px;
}

.swal-text {
  text-align: center !important;
}

.view-buttons > .active {
  background-color: #3c4045;
  border-radius: 3px;
}

.view-buttons > .active > a > i {
  color: white !important;
}

.cursor {
  cursor: pointer;
}

.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

.text-bold-italic {
  font-weight: bold;
  font-style: italic;
}

.btn-shadow,
.box-shadow {
  /* box-shadow: 5px 5px 10px grey; */
  margin: 10px 0;
}
@media (min-width: 768px){ 
  .btn-shadow{
    margin: 0;
  }
  .box-shadow{
    margin: 0;
  }
}

/* .box-shadow:focus { */
  /* transform: translateY(-4px);
  border-color: rgb(20, 155, 218);
  transition: all 0.2s ease; */
/* } */

.box-shadow:not(:focus){
  transition: all 0.2s ease;
}

.btn-round-shadow,
.btn-round {
  box-shadow: 5px 5px 10px grey;
  border-radius: 100px;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  font-size: 1rem;
  line-height: 1.5;
}

/* .btn-round-shadow:hover,
.btn-shadow:hover { */
  /* transform: translateY(-4px);
  box-shadow: 0px 5px 15px rgb(125, 229, 255);
  transition: all 0.2s ease; */
/* } */

.btn-round-shadow:not(:hover),
.btn-shadow:not(:hover) {
  transition: all 0.2s ease;
}

.text-shadow-gray {
  text-shadow: 1px 1px 10px rgb(170, 170, 170);
  font-weight: bold;
  font-style: italic;
  /* standard gradient background */
  background: linear-gradient(rgb(82, 82, 82), rgb(0, 0, 0));

  /* clip informático */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-round-shadow:disabled,
.btn-round:disabled,.btn-shadow:disabled {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

.input-focus:focus {
  transform: translateY(-6px) scale(1.015);
  transition: all 0.2s ease;
}

.table-box-shadow {
  border-collapse: collapse;
  border-spacing: 0;
  font: normal 13px Arial, sans-serif;
  border: none;
  box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.5);
  width: 100%;
}

.table-box-shadow thead th {
  background-color: #6b6b6b;
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  font-size: 1.15em;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  /* text-shadow: 2px 2px 1px rgb(162, 162, 162); */
  /* white-space: nowrap; */
}

.header-black tr th{
  background-color: #000000;
  color: #ffffff;
}

.header-white tr th{
  background-color: #e6e6e6;
  color: #000000;
}

.header-gray tr th{
  background-color: rgb(213, 213, 213);
  color: #000000;
}

.header-transparent tr th{
  background-color: #e6e6e682;
  color: #000000;
}

.table-box-shadow thead{
  position: sticky;
  top: 0;
}

.table-box-shadow tbody td {
  vertical-align: middle;
  color: rgb(124, 124, 124);
  padding: 10px;
}

.table-box-shadow thead th:first-child {
  border-radius: 10px 0 0 0;
}
.table-box-shadow thead th:last-child {
  border-radius: 0 10px 0 0;
}
.table-box-shadow tbody tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}
.table-box-shadow tbody tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}

.table-box-shadow tbody > tr:hover {
  outline: none;
  -webkit-box-shadow: inset 0 0 10px #79c0fd;
  box-shadow: inset 0 0 10px #79c0fd;
}

.i-cursor{
  cursor: pointer;
}

.i-cursor--active{
  cursor: pointer;
  color:rgb(53, 218, 20);
  text-shadow: 2px 2px 1px rgba(53, 218, 20, 0.494);
}

.center-obj{
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.all-th-center thead th{
  text-align: center;
  vertical-align: middle;
}

.all-td-center tbody td{
  text-align: center;
  vertical-align: middle;
}

/* .table-scroll{ */
  /* min-height: 10em; */
  /* height: 33em; */
  /* max-height: 45em; */
  /* width: 50em; */
  /* overflow-y: scroll; */
/* } */

.proveedor-nacional{
  background: linear-gradient(90deg, rgba(0,134,74,1) 0%, rgba(255,255,255,0) 50%, rgba(255,5,27,1) 100%);
}

.proveedor-extranjero{
  background: radial-gradient(circle, rgba(117,14,59,1) 0%, rgba(0,53,115,1) 100%);
}

@import url('https://rsms.me/inter/inter.css');
/* html { font-family: 'Inter', sans-serif; } */
@supports (font-variation-settings: normal) {
  /* html { font-family: 'Inter var', sans-serif; } */
}

.texto-tareas{
  font-family: 'Inter', sans-serif;
}

.card-deta{
  color:cornflowerblue;
}

.card-deta:hover{
  transform: translateY(-4px);
  color:blue;
  transition: all 0.4s ease;
}

.card-deta:not(:hover){
  transform: translateY(0px);
  color:cornflowerblue;
  transition: all 0.4s ease;
}



.height-input-1{
  max-height: 30px;
}

.inputfile{
  margin-top: 0.5rem;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile + label{
  color:red;
  margin-top: 0;
  margin-bottom: 0;
  cursor: pointer;
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
  color:green;
  transform: translateY(-4px) scale(1.015);
  transition: all 0.2s ease;
}

.inputfile-1:not(focus) + label,
.inputfile-1 + label:not(hover) {
  transition: all 0.2s ease;
}

.select-size-1{
  height:20px !important;
  font-size: 15px;
}

.select-size-2{
  height: 20px !important;
  max-width: 100px;
  font-size: 15px;
}

.btn-light-green{
  color: #fff;
  background-color: #97BB69;
  border-color: #97BB69;
}
.btn-light-green:hover{
  color: #fff;
  background-color: #84a45c;
}
.btn-light-gray{
  color: #000;
  background-color: #D9D9D9;
  border-color: #D9D9D9;
}
.btn-light-gray:hover{
  color: #000;
  background-color: #cdcbcb;
}

.font-size-14{
  font-size: 14px;
}
.link-hover, .link-hover-red{
  /* color:#2E4476 !important; */
}
.link-hover-green, .link-hover-red, .link-hover-brown{
  color: gray;
}
.link-hover:hover{
  transform: scale(1.15);
  filter: brightness(1.3);
  /* color:blue; */
  transition: all 0.4s ease;
}
.link-hover-smail:hover{
  transform: scale(1.1);
  filter: brightness(1.75);
  /* color:blue; */
  transition: all 0.4s ease;
}
.filter-brightness-1:hover{
  filter: brightness(1.4) !important;
}
.filter-brightness-smail:hover{
  filter: brightness(1.1) !important;
}
.link-hover-red:hover{
  color:red !important;
  transform: scale(1.35);
  transition: all 0.4s ease;
}
.link-hover-brown:hover{
  color:brown !important;
  transform: scale(1.35);
  transition: all 0.4s ease;
}
.link-hover-green:hover{
  color:green !important;
  transform: scale(1.35);
  transition: all 0.4s ease;
}
.link-hover-blue-smail:hover{
  transform: scale(1.1);
  color:blue;
  transition: all 0.4s ease;
}

.link-hover:not(:hover), 
.link-hover-red:not(:hover),
.link-hover-smail{
  transition: all 0.4s ease;
}

/* Base Checkbox */
.toggler-wrapper {
    display: block;
    width: 45px;
    height: 25px;
    cursor: pointer;
    position: relative;
}

.toggler-wrapper input[type="checkbox"] {
    display: none;
}

.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider {
    background-color: #44cc66;
}

.toggler-wrapper .toggler-slider {
    background-color: #ccc;
    position: absolute;
    border-radius: 100px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.toggler-wrapper .toggler-knob {
    position: absolute;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

/*Style 1*/

.toggler-wrapper.style-1 input[type="checkbox"]:checked+.toggler-slider {
    background-color: #d9d9d9;
}

.toggler-wrapper.style-1 input[type="checkbox"]:checked+.toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #2358C5;
}

.toggler-wrapper.style-1 input[type="checkbox"]:checked+.toggler-slider .toggler-knob:after {
    content: '';
}

.toggler-wrapper.style-1 .toggler-slider {
    background-color: #d9d9d9;
}

.toggler-wrapper.style-1 .toggler-knob {
    width: calc(25px - 6px);
    height: calc(25px - 6px);
    border-radius: 50%;
    left: 3px;
    top: 3px;
    background-color: #E6E8EC;
}


.toggler-wrapper.style-1 .toggler-knob:after {
    content: '';
    position: absolute;
    top: 50% !important;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 75%;
    text-transform: uppercase;
    font-weight: 500;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    color: white;
}

/* ERP NUEVOS ESTILOS Y CLASES */
/* Texto titulos 24-18px */
.main-title-dec{
  font-size: 32px !important;
  font-weight: 500 !important;
  font-family: var(--fuenteInter) !important;
  /* padding: 0.375rem 0.75rem !important; */
  color: var(--saturateBlue) !important;
  background-color: var(--white) !important;
  border-radius: 0.25rem !important;
  text-align: center !important;
  width: fit-content;
}

.main-title-dec a {
  color: var(--saturateBlue) !important;
}
.main-title-dec a:hover {
  color: var(--Blue) !important;
}
@media (min-width: 768px){ 
  .main-title-dec{
    display: inline-block !important;
    justify-content: start !important;
    text-align: left !important;
  }
}
.sub-title{
  font-size: 20px !important;
  font-weight: 600 !important;
  font-family: var(--fuenteInter) !important;
  color: #324464;
}
.sub-title-sm{
  font-size: 18px !important;
  font-weight: 500 !important;
  font-family: var(--fuenteInter) !important;
  margin: 10px 0;
}
/* Texto normal 16-12px */
.txt-regular{
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: var(--fuenteInter) !important;
}
/* Texto pequeño 12-8px */
.txt-sm{
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: var(--fuenteInter) !important;
}
.scrollIntoPage{
  height: 80vh;
  overflow-y: auto;
}
#content_formulario h3{
  font-size: 36px !important;
  font-weight: 500 !important;
  font-family: var(--fuenteInter) !important;
  /* padding: 0.375rem 0.75rem !important; */
  color: var(--saturateBlue) !important;
  background-color: var(--white) !important;
  border-radius: 0.25rem !important;
  text-align: center !important;
  width: fit-content;
}
@media (min-width: 768px){ 
  #content_formulario h3{
    display: inline-block !important;
    justify-content: start !important;
    text-align: left !important;
  }
}
#content_formulario h3 a {
  color: var(--saturateBlue);
  transition: 0.3s;
}
#content_formulario h3 a:hover {
  color: var(--Blue);
}
.onePageScroll{
  height: auto;
}
@media (min-width: 768px){ 
  .onePageScroll{
    height: 93vh;
    overflow: auto;
  }
}
.gap-25{
  column-gap: 25px;
}
@media (min-width: 768px){ 
  .gap-25{
    column-gap: 10px;
  }
}
input .smallCheckbox {
  width: 20px;
  height: 20px;
  cursor: pointer
}

.mt-28 {
  margin-top: 28px;
}

.btn-custom {
	font-weight: 500;
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #82a4d9;
  color: #FFF;
  transition: 0.3s;
}
.btn-custom:hover {
	background: #2a62b6;
}

.select2.select2-container.select2-container--default {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
	border: 1px solid #ced4da !important;
  height: 38px !important;
  border-radius: 4px !important;
  padding: 5px !important;
  font-size: 1em !important;
}

form .select2-container--default .select2-selection--single {
	border: 1px solid #ced4da !important;
  height: 40px !important;
  border-radius: 4px !important;
  padding: 5px !important;
  font-size: 14px !important;
}

.form_max-height {
  overflow-y: scroll;
  max-height: calc(90vh - 8em);
}

.tabla-responsive thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.tabla-responsive .fa-2x {
  font-size: 1.5em;
}
.btn-listado-rh {
  top   : -50px;
  width : 35px;
  height: 35px;
}

@media (max-width: 500px) {
  .ml-25 {
    margin-left: 25%;
    text-align : right;
  }
}
.icon::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}
.icon {
	position: absolute;
	right: 1.5em;
	bottom: 0.7em;
	color: #ccc;
	pointer-events: none;
}
.tabla{
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', sans-serif;
  --rounded-table: 20px;
}
.tabla--sm {
  & td {
    font-size: 95%;
    padding: 10px 7px !important
  }
}
.tabla__head{
  position: sticky;
  top: 0;
  z-index: 99;
  outline: 1px solid #E2E8F0;
  outline-offset: -1px;
  border-radius: var(--rounded-table);
}
.tabla__tr--white{
  background-color: white;
}
.tabla__tr--danger {
  background-color: #ffe3e3 !important;
}
.tabla__tr--left{
  text-align: left;
}
.tabla__tr--danger,
.tabla__tr--danger td {
  background-color: #fee5e5 !important;
  color: darkred;
}
.tabla__th{
  background-color: #f4f8fb;
  text-align: left;
  padding: 15px 7px;
  color: #48566a;
  font-weight: 600;
  font-size: 13px;
}
.tabla__th:first-of-type{
  border-top-left-radius: var(--rounded-table);
  border-bottom-left-radius: var(--rounded-table);
}
.tabla__th:last-of-type{
  border-top-right-radius: var(--rounded-table);
  border-bottom-right-radius: var(--rounded-table);
}
.tabla__th--gray, .tabla__td--gray{
  background-color: var(--clouds);
}
.tabla__th--nowrap{
  white-space: nowrap;
}
.tabla__tr--totales td {
  color: #2255b9;
  background-color: #e2e8f3;
  font-weight: 700;
}
.tabla__tr{
  border-top: transparent;
  background-color: #fff;
}
.tabla__tr:nth-of-type(even){
  background-color: #f4f8fb;
}
@media (min-width: 768px){ 
  .sticky-left{
    position: sticky;
    left: -15px;
    background-color: inherit;
  }
  .sticky-left--top{
    z-index: 100;
  }
  .sticky-left--second{
    left: calc(240px - 15px);
  }
}
.tabla__td{
  padding: 15px 7px;
  color: #020617;
  font-size: 12px;
  /* border-bottom: 1px solid #E2E8F0; */
}

.tabla__td input, .tabla__td select {
	background-color: #fff;
	border: 1px solid #AAA;
	border-radius: 4px;
	font-size: 13px;
	height: 32px;
	text-align: center;
  margin: auto;
	/* width: 100%; */
}
.tabla__td--opciones{
  display: flex;
  gap: .5rem 1rem;
  align-items: center;
}

.tabla__td .select2-selection.select2-selection--single {
	min-width: 200px;
	height: 32px !important;
  padding: 0 !important;
}

/* Responsive mobile */
@media (max-width: 668px){ 
  .tabla__head{
      display: none;
  }
  .tabla__body, .tabla__tr, .tabla__td{
      display: block;
  }
  .tabla__tr{
      border-top: 1px solid var(--GrayishBlue) !important;
      margin-bottom: 15px;
      border-radius: var(--radius-sm);
      background: linear-gradient(45deg, #fcfdff, var(--BlueSky));
      border: 1px solid var(--GrayishBlue);
      box-shadow: 0px 5px 5px 0px rgba(220,230,242,0.75);
  }
  .tabla__tr:nth-of-type(odd){
    background: linear-gradient(45deg, #eaf2ff, var(--BlueSky));
  }
  .tabla__td{
      padding: 7px;
      text-align: right;
      position: relative;
      font-size: 12px;
      font-weight: 500;
      color: var(--DarkGrayishBlue);
      /* background-image: linear-gradient(to right, transparent 50%, var(--Gray) 50%); */
      background-size: 5px 1px;
      background-position: bottom;
      background-repeat: repeat-x;
      min-height: 30px;
  }
  .tabla__td::before{
      content: attr(data-label);
      font-weight: 700;
      font-size: 14px;
      line-height: 1;
      float: left;
      color: var(--Blue);
      padding-bottom: 5px;
      padding-right: 13px;
  }
  
  .tabla .tabla {
    border: 2px groove #4dade040;
    margin: 10px;
    margin: 10px 0 0;
  }
}
.btn__erp{
    border: none;
    border-radius: 5px;
    color: white;
    min-width: 120px;
    width: 100%;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    min-height: 35px;
    transition: all .15s ease-in;
}
.btn__erp:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (min-width: 768px){ 
    .btn__erp{
      margin: 0;
    }
}
.btn__erp--default{
    background-color: #878787;
}
.btn__erp--default:hover{
    background-color: #717171;
}
.btn__erp--verde{
    background-color: #97BB69;
}
.btn__erp--verde:hover{
    background-color:  #89a85e;
}
.btn__erp--amarillo{
    background-color: #E9C60E;
}
.btn__erp--amarillo:hover{
    background-color: #d6b50d;
}
.btn__erp--rojo{
    background-color: #E90E0E;
}
.btn__erp--rojo:hover{
    background-color: #ce0e0e;
}
.btn__erp--ver{
    border-radius: 0;
    background-color: #97BB69;
}
/* Estilos para barra de progreso viaticos */
.barra__info{
    display: grid;
    gap: 20px;
    font-weight: 600;
    font-size: 14px;
}
@media (min-width: 768px){ 
    .barra__info{
      grid-template-columns: repeat(8, 120px);
      gap: 0;
      text-align: center;
    }
}
.barra__dot{
    position: relative;
    border-radius: inherit;
    margin: 0;
    color: #B0B0B0;
  }
  .barra__dot::before{
    content: '';
    position: absolute;
    background-color: #B0B0B0;
    height: 20px;
    width: 20px;
    top: calc(50% - 10px);
    right: 0%;
    border-radius: 50%;
    z-index: 3;
}
@media (min-width: 768px){ 
    .barra__dot::before{
      content: '';
      position: absolute;
      background-color: #B0B0B0;
      height: 25px;
      width: 25px;
      top: 44px;
      right: calc(50% - 12.5px);
    }
}
.barra__dot--activo{
    color: #424242;
}
.barra__dot--activo::before{
    background-color: #424242;
}
.barra__progreso{
    display: none;
}
@media (min-width: 768px){ 
    .barra__progreso{
      /* display: flex;
      justify-content: space-between;
      align-items: center; */
      display: grid;
      grid-template-columns: repeat(8, 120px);
      gap: 0;
    }
}
.progreso__span{
    height: 6px;
    width: 100%;
    background-color: #B0B0B0;
    margin-top: 12px;
    position: relative;
    margin-top: 12px;
}
.progreso__span:first-child{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
.progreso__span:last-child{
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
.progreso__span--activo::after{
    content: '';
    position: absolute;
    /* inset: 0; */
    height: 6px;
    width: 120px;
    left: -60px;
    z-index: 2;
    background-color: #424242;
}
.progreso__span--activo:first-child::after{
  content: '';
  position: unset;
 
}
.progreso__span--activo::before{
  content: '';
  position: absolute;
  /* inset: 0; */
  height: 6px;
  width: 60px;
  z-index: 3;
  left: 0;
  background-color: #424242;
}
.progreso__span--activo:first-child::after{
     border-top-left-radius: 25px;
     border-bottom-left-radius: 25px;
}
.progreso__span--activo:last-child::after{
     border-top-right-radius: 25px;
     border-bottom-right-radius: 25px;
}
.progreso__span--activo:first-child::before{
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.progreso__span--activo:last-child::before{
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
.notification {
  text-decoration: none;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  border-radius: 50%;
  background: red;
  color: white;
}
/* Fin de estilos para barra de progreso viaticos */


/* Configuracion sistemas */
#filtros {
  margin-bottom: 1em;
}

#filtros label {
  font-weight: 500;
  font-size: 15px;
}
#filtros .form-control {
	margin-bottom: 0;
}

.btn-blue {
  background-color: var(--Blue);
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-blue:hover {
  background-color: #34495e;
  color: white;
}

.radio-input {
  appearance: none;
  border: 1px solid #7ca7b9;
  height: 1em;
  width: 1em;
  border-radius: 9999px;
  position: relative;
}

.radio-input:active {
  opacity: 0.6;
}

.radio-input:checked::before {
  content: ' ';
  display: inline-block;
  background-color: #7ca7b9;
  height: 60%;
  width: 60%;
  border-radius: 9999px;
  position: absolute;
  top: 20%;
  left: 22%;
  z-index: 1;
}

.fuenteNunito {
  font-family: var(--fuenteNunito);
}
.fuenteRoboto {
  font-family: var(--fuenteRoboto);
}
.fuenteMontserrat {
  font-family: var(--fuenteMontserrat);
}


/* Modal fullscreen */
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0
}

.modal-fullscreen .modal-header {
  border-radius: 0
}

.modal-fullscreen .modal-body {
  overflow-y: auto
}

.modal-fullscreen .modal-footer {
  border-radius: 0
}

@media (max-width:575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }

  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }

  .modal-fullscreen-sm-down .modal-header {
    border-radius: 0
  }

  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto
  }

  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0
  }
}

@media (max-width:767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }

  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }

  .modal-fullscreen-md-down .modal-header {
    border-radius: 0
  }

  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto
  }

  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0
  }
}

@media (max-width:991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }

  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }

  .modal-fullscreen-lg-down .modal-header {
    border-radius: 0
  }

  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto
  }

  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0
  }
}

@media (max-width:1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }

  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }

  .modal-fullscreen-xl-down .modal-header {
    border-radius: 0
  }

  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto
  }

  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0
  }
}

@media (max-width:1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }

  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }

  .modal-fullscreen-xxl-down .modal-header {
    border-radius: 0
  }

  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto
  }

  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0
  }
}
/* Nuevo menu en mobile y desktop */
.menu-lateral{
  background-color: #354c84;
  height: 100%;
}
.menu-lateral__ul{
  height: 100%;
  background-color: #354c84;
}
@media (min-width: 768px){ 
  .menu-lateral__ul{
    height: 93vh;
    overflow-y: auto;
  }
}
@media (max-width: 768px){
  .menuMobile{
    transition: all 200ms ease-in;
    position: absolute;
    overflow-y: auto;
    left: -100%;
    z-index: -1;
    height: 100%;
    opacity: 0;
    top: 0;
  }
  .menuMobile--activo{
    z-index: 9999;
    left: 0;
    width: 70%;
    opacity: 1;
  }
  .modal-backdrop{
    position: fixed;
    inset: 0;
    z-index: 10;
    background-color: rgb(0 0 0 / 75%);
  }
  #menuHam{
      z-index: 11;
  }
  .no-scroll{
      overflow: hidden;
  }
}
.prospecto__card{
  --active: 119 214 68;
  --desactive: 235 47 6;
  --warning: 255 206 138;
  position: relative;
  background-color: var(--antiflash);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: .5rem;
  display: grid;
  gap: .5rem;
  grid-template-areas: 
    'prosp_header prosp_header prosp_header prosp_actions '
    'prosp_content prosp_content prosp_content prosp_content'
    'prosp_content prosp_content prosp_content prosp_content'
    'prosp_content prosp_content prosp_content prosp_content'
  ;
  min-height: 130px;
  height: 100%;
}
.prospecto__card.active{
  background-color: rgb(var(--active) / .20);
  border: 2px solid rgb(var(--active));
}
.prospecto__card.desactive{
  background-color: rgb(var(--desactive) / .20);
  border: 2px solid rgb(var(--desactive));
}
.prospecto__card.warning{
  background-color: rgb(var(--warning) / .20);
  border: 2px solid rgb(var(--warning));
}
.prospecto__header{
  grid-area: prosp_header;
}
.prospecto__header h4{
  text-transform: capitalize;
  color: black;
  font-weight: 600;
  font-size: 16px;
}
.prospecto__content{
  padding-left: 1rem;
  grid-area: prosp_content;
}
.prospecto__content p{
  margin: 0 0 5px 0;
  text-transform: capitalize;
  color: var(--DarkGray);
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
}
.prospecto__actions{
  display: flex;
  column-gap: .5rem;
  justify-content: flex-end;
  grid-area: prosp_actions;
}
.prospecto__dot{
  background-color: transparent;
  --active: 119 214 68;
  --desactive: 235 47 6;
  --warning: 255 206 138;
  padding: .3rem .5rem ;
  border: 1px solid transparent;
  margin-bottom: 0;
  border-radius: .5rem;
  font-weight: 500;
}
.prospecto__dot--active{
  background-color: rgb(var(--active) / .20);
  color: rgb(var(--active));
  border: 1px solid rgb(var(--active));
}
.prospecto__dot--desactive{
  background-color: rgb(var(--desactive) / .20);
  color: rgb(var(--desactive));
  border: 1px solid rgb(var(--desactive));
}
.prospecto__dot--warning{
  background-color: rgb(var(--warning) / .20);
  color: rgb(var(--warning));
  border: 1px solid rgb(var(--warning));
}
/* Line divider */

.divider {
  position: relative;
  margin: 30px 0;
  height: 1px;
  width: 100%;
}

.divider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 2px;
  background-image: linear-gradient(to right, transparent, rgb(53 76 133 / 42%), transparent);
}

.marker {
  background: url('/img/marker-map.png') no-repeat center;
  background-size: contain;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

#map {
  height: 400px;
  width: 100%;
}
.text-orange {
    color: darkorange;
}
.text-brown {
  color: #ae715e;
}

.border-brown {
  border-color: #ae715e;
}

.border-cyan {
  border: 1px solid #7ca7b9;
}

.cropper-face {
  background-color: rgba(255, 255, 255, 0) !important;
  opacity: 1 !important;
}

.face-guide {
  background-color: inherit !important;
  border-radius: 50%;
  height: 63% !important;
  width: 45% !important;
  margin: 5% 27.5% 25% 27.5%;
  opacity: 0.9;
  border-style: solid;
  border-color: #02d00e;
  border-width: 0.475rem;
}

.btn-cristal, .btn-cristal-circle {
  background-color: #0078d0;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 5px 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

.btn-cristal-circle{
  border-radius: 100%; 
  padding: 2px 7px;
}

.btn-cristal:before, .btn-cristal-circle:before {
  background-color: initial;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 2%;
  opacity: .5;
  position: absolute;
  top: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
  width: 96%;
}

.btn-cristal:not(:disabled):hover, .btn-cristal-circle:hover {
  -webkit-box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.btn-cristal:disabled, .btn-cristal-circle:disabled {
  color:gray;
  background-color: var(--Gray);
  box-shadow: none;
  cursor:default;
}

.btn-radius-10{
  border-radius: 10px;
}

.btn-cristal-sm{
  padding: 1px 5px;
  font-size: 14px;
}

.btn-cristal-md{
  padding: 1px 5px;
  font-size: 17px;
}

.btn-bc-danger{
  /* white-space: nowrap;  */
  background-color: #D52D3E;
}

.btn-bc-secondary{
  /* white-space: nowrap;  */
  background-color: #616A71;
}

.btn-bc-success{
  /* white-space: nowrap;  */
  background-color: #299C44;
}
.btn-bc-orange{
  /* white-space: nowrap;  */
  background-color: rgb(224, 146, 0);
}

.btn-bc-info{
  /* white-space: nowrap;  */
  background-color: #45A5DA;
}

.btn-bc-darkblue{
  white-space: nowrap; 
  background-color: #2d4b8d;
}

.form-box-content {
    background: #f2f1f1;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 2px 10px 15px rgb(196, 196, 196);
    margin-right: 2rem;
}
.r-gap-1{
  row-gap: 1rem;
}
.c-gap-1{
  column-gap: 1rem;
}

.fieldset {
  border: 1px solid #ccc;
  border-radius: 7px;
  padding: 10px;
  margin: 10px;
}

.fieldset__legend {
  width: fit-content;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  color: #bebebe;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 0.5rem;
}
/* Tabs nuevas */
.tabs-x{
  --color-tab: #9D9D9D;
  --color-tab-active: #2B80FF;
  display: grid;
  justify-content: flex-start;
  row-gap: 3rem;
  padding-block: 2rem;
  position: sticky;
  top: 0;
  z-index: 99;
}
@media (min-width: 992px){ 
  .tabs-x{
      justify-content: center;
      row-gap: 5rem;
  }
}
.tabs-x__step{
  display: flex;
  align-items: center;
  column-gap: 1rem;
  font-family: 'Poppins', sans-serif;
  position: relative;
}
.tabs-x__step::after{
  content: '';
  position: absolute;
  height: calc(100% + 30px);
  width: 4px;
  background-color: var(--color-tab);
  bottom: -76px;
  left: 18px;
  border-radius: 30px;
}
.tabs-x__step:last-of-type::after{
  top: -74px;
}
.tabs-x__step:nth-child(3)::after{
  display: none;
}
.tabs-x__button{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-tab);
  color: white;
  font-size: 16px;
  font-weight: 600;
  z-index: 1;
}
.tabs-x__button--active{
  background-color: var(--color-tab-active);
}
.tabs-x__title{
  margin-bottom: 0;
  color: var(--color-tab);
}
.tabs-x__title--active{
  color:  var(--color-tab-active);
}
.tabs{
  --tab-color: 102 102 102;
  --tab-active: #2E4476;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid rgb(var(--tab-color) / .20);
}
.tabs__btn{
  background-color: transparent;
  border: none;
  padding: .5rem 0;
  color: rgb(var(--tab-color));
  font-size: 16px;
  font-weight: 400;
}
.tabs__btn--active{
  color: var(--tab-active);
  position: relative;
  font-weight: 500;
}
.tabs__btn--active::after{
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: var(--tab-active);
}
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary--alt{
  background-color: var(--primary-alt);
  border-color: var(--primary-alt);
}

.form-control[readonly] {
  background-color: #F8F9FA;
}

.row-gap-1 {
  row-gap: 1em;
}
.custom-file-label::after {
  content: 'Buscar';
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
}
.bg-flash{
  background-color: #f1f2f6;
}
.drop-out-tareas{
  position: relative !important;
  top: 50% !important;
  left: 1rem !important;
  transform: translate(0, -50%) !important;
  min-width: 180px !important;
  & .dropdown-item{
    color: #484747;
    & a{
      color: #484747;
    }
  }
}
.color-success{
  color: var(--Success);
}

.checkbox-input-blue *, .checkbox-input-blue *:after,.checkbox-input-blue *:before {
  --color-checkbox-input-blue: #388ec8;
  box-sizing: border-box;
}

.checkbox-input-blue .checkbox-input-blue:checked + .checkbox-input-blue-title {
  border-color: var(--color-checkbox-input-blue);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: var(--color-checkbox-input-blue);
}

.checkbox-input-blue .checkbox-input-blue:checked + .checkbox-input-blue-title:before {
  transform: scale(1);
  opacity: 1;
  background-color: var(--color-checkbox-input-blue);
  border-color: var(--color-checkbox-input-blue);
}

.checkbox-input-blue .checkbox-input-blue:checked + .checkbox-input-blue-title,
.checkbox-input-blue .checkbox-input-blue:checked + .checkbox-input-blue-title .checkbox-input-blue-label {
  color: var(--color-checkbox-input-blue);
}

.checkbox-input-blue .checkbox-input-blue:focus + .checkbox-input-blue-title {
  border-color: var(--color-checkbox-input-blue);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}

.checkbox-input-blue .checkbox-input-blue-title:hover {
  border-color: var(--color-checkbox-input-blue);
}

.checkbox-input-green *, .checkbox-input-green *:after,.checkbox-input-green *:before {
  --border-color: #299C44;
  box-sizing: border-box;
}

.checkbox-input-green .checkbox-input-green, .checkbox-input-blue .checkbox-input-blue {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-input-green .checkbox-input-green:checked + .checkbox-input-green-title {
  border-color: var(--border-color);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: var(--border-color);
}

.checkbox-input-green .checkbox-input-green:checked + .checkbox-input-green-title:before {
  transform: scale(1);
  opacity: 1;
  background-color: var(--border-color);
  border-color: var(--border-color);
}

.checkbox-input-green .checkbox-input-green:checked + .checkbox-input-green-title,
.checkbox-input-green .checkbox-input-green:checked + .checkbox-input-green-title .checkbox-input-green-label {
  color: var(--border-color);
}

.checkbox-input-green .checkbox-input-green:focus + .checkbox-input-green-title {
  border-color: var(--border-color);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}

.checkbox-input-green .checkbox-input-green:focus + .checkbox-input-green-title:before,
.checkbox-input-blue .checkbox-input-blue:focus + .checkbox-input-blue-title:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-input-green .checkbox-input-green-title, .checkbox-input-blue .checkbox-input-blue-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8rem;
  min-height: 2rem;
  border-radius: 0.5rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: 0.15s ease;
  cursor: pointer;
  position: relative;
}

.checkbox-input-green .checkbox-input-green-title:before, 
.checkbox-input-blue .checkbox-input-blue-title:before {
  content: "";
  position: absolute;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  border-radius: 50%;
  top: 0.25rem;
  left: 0.25rem;
  opacity: 0;
  transform: scale(0);
  transition: 0.25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.checkbox-input-green .checkbox-input-green-title:hover {
  border-color: var(--border-color);
}

.checkbox-input-green .checkbox-input-green-title:hover:before,
.checkbox-input-blue .checkbox-input-blue-title:hover:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-input-green, .checkbox-input-blue {
  transition: 0.375s ease;
  color: #494949;
}

.checkbox-input-green .checkbox-input-green-label,
.checkbox-input-blue .checkbox-input-blue-label {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
}

.checkbox-input-blue .checkbox-input-blue:not(:checked):disabled + .checkbox-input-blue-title {
  --cb-color-disabled: rgb(219, 219, 219);
  border-color: var(--cb-color-disabled);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: var(--cb-color-disabled);
  background-color: rgb(238, 238, 238);
  cursor: not-allowed;
}

.checkbox-input-blue .checkbox-input-blue:disabled + .checkbox-input-blue-title {
  cursor: not-allowed;
  opacity: 0.6;
}

.cbx-selected-option {
  --blue: #0D7EFF;
  --g08: #E1E5EB;
  --g04: #848ea1;
}

.cbx-selected-option input[type="checkbox"] {
  display: none;
}
.cbx-selected-option input[type="checkbox"],
.cbx-selected-option input[type="checkbox"]:after,
.cbx-selected-option input[type="checkbox"]:before,
.cbx-selected-option input[type="checkbox"] *,
.cbx-selected-option input[type="checkbox"] *:after,
.cbx-selected-option input[type="checkbox"] *:before,
.cbx-selected-option input[type="checkbox"] + label {
  box-sizing: border-box;
}
.cbx-selected-option input[type="checkbox"]::selection,
.cbx-selected-option input[type="checkbox"]:after::selection,
.cbx-selected-option input[type="checkbox"]:before::selection,
.cbx-selected-option input[type="checkbox"] *::selection,
.cbx-selected-option input[type="checkbox"] *:after::selection,
.cbx-selected-option input[type="checkbox"] *:before::selection,
.cbx-selected-option input[type="checkbox"] + label::selection {
  background: none;
}
.cbx-selected-option input[type="checkbox"] + label {
  outline: 0;
  display: block;
  width: 57px;
  height: 27px;
  position: relative;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
.cbx-selected-option input[type="checkbox"] + label:after,
.cbx-selected-option input[type="checkbox"] + label:before {
  position: relative;
  display: block;
  content: "";
  width: 44%;
  height: 100%;
}
.cbx-selected-option input[type="checkbox"] + label:after {
  left: 0;
}
.cbx-selected-option input[type="checkbox"] + label:before {
  display: inline;
  position: absolute;
  top: 2px;
}
.cbx-selected-option input[type="checkbox"]:checked + label:after {
  left: 56.5%;
}

.cbx-selected-option input[type="checkbox"] + label {
  background: var(--g08);
  border-radius: 20rem;
  padding: 2px;
  transition: all 0.4s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.cbx-selected-option input[type="checkbox"] + label:after {
  border-radius: 2em;
  background: #fff;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.cbx-selected-option input[type="checkbox"] + label:before {
  content: "No";
  left: 28px;
  color: var(--g04);
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cbx-selected-option input[type="checkbox"] + label:active {
  box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
}
.cbx-selected-option input[type="checkbox"] + label:active:after {
  padding-right: 0.4em;
}
.cbx-selected-option input[type="checkbox"]:checked + label {
  background: var(--blue);
}
.cbx-selected-option input[type="checkbox"]:checked + label:active {
  box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
}
.cbx-selected-option input[type="checkbox"]:checked + label:active:after {
  margin-left: -0.4em;
}
.cbx-selected-option input[type="checkbox"]:checked + label:before {
  content: "Si";
  left: 10px;
  color: #fff;
}
.cbx-selected-option input[type="checkbox"]:disabled + label {
  cursor: not-allowed;
}
.pulse {
  animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(57 186 40 / 0.3);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0 0 0 / 0);
  }
}
.onePageScroll:has(.scroll-bar-none){
  scrollbar-width: none;
}
.bell-num{
  position: absolute;
  background-color: #ee5253;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  text-align: center;
  top: 0px;
  left: 20px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

/* check box animado*/
.checkbox-wrapper-19 {
  box-sizing: border-box;
  --background-color: #fff;
  --checkbox-height: 25px;
}

@-moz-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@-webkit-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-webkit-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-moz-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

.checkbox-wrapper-19 input[type=checkbox] {
  display: none;
}

.checkbox-wrapper-19 .check-box-disabled{
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background-color: #d3d3d3;
  border: calc(var(--checkbox-height) * .1) solid #d3d3d3;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  cursor: not-allowed;
}

.checkbox-wrapper-19 .check-box {
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background-color: transparent;
  border: calc(var(--checkbox-height) * .1) solid #909090;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}

.checkbox-wrapper-19 .check-box::before,
.checkbox-wrapper-19 .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: calc(var(--checkbox-height) * .2);
  background-color: #34b93d;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
  -webkit-transition: opacity ease 0.5;
  -moz-transition: opacity ease 0.5;
  transition: opacity ease 0.5;
}
.checkbox-wrapper-19 .check-box::before {
  top: calc(var(--checkbox-height) * .72);
  left: calc(var(--checkbox-height) * .41);
  box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.checkbox-wrapper-19 .check-box::after {
  top: calc(var(--checkbox-height) * .37);
  left: calc(var(--checkbox-height) * .05);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
.checkbox-wrapper-19 .check-box.checked {
  border-color: #34b93d;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
.checkbox-wrapper-19 .check-box.checked::after {
  height: calc(var(--checkbox-height) / 2);
  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  animation: dothabottomcheck-19 0.2s ease 0s forwards;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
.checkbox-wrapper-19 .check-box.checked::before {
  height: calc(var(--checkbox-height) * 1.2);
  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
  animation: dothatopcheck-19 0.4s ease 0s forwards;
}
/* Fin check box animado*/
.text-gray{
  color: #757D8A;
}
/* Buttons boostrap custom */
.btn-outline-primary{
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline-primary:hover{
  background-color: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
}
.btn-outline-primary svg, .btn-outline-primary img{
  transition: filter 100ms ease-in-out;
}
.btn-outline-primary:hover svg, .btn-outline-primary:hover img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(8%) hue-rotate(260deg) brightness(113%) contrast(96%);
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled{
  background-color: #cfcfcf;
}
.btn-outline-secondary:focus, .btn-outline-secondary.focus{
  background-color: #cfcfcf;
}
.btn-outline-light{
  background-color: #f2f2f2;
  color: #878787 !important;
}
.btn-outline-light:focus{
  background-color: white !important;
  color: #878787;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);
}
.btn-outline-light:hover{
  background-color: #f2f2f2;
  color: #878787;
}
.btn-outline-light.active{
  background-color: white;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);
}
.form-control:focus {
  box-shadow: 0 0 2px 1px rgba(0, 123, 255, 0.15);
}
/* calendario orden */
.fc-toolbar{
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  color: #757D8A;
}
.fc-toolbar .fc-left{
  grid-column: 2 / 3;
}
.fc-toolbar .fc-right{
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  justify-self: end;
}
.fc-toolbar .fc-center{
  grid-column: 1 / 2;
}
.shadow-md{
  box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.1),0px 5px 10px -3px rgba(0,0,0,0.1);
}
.hover-item__effect{
  opacity: 0;
}
.hover-item:hover .hover-item__effect{
  opacity: 1;
}
.custom-input-icon .select2-selection__rendered{
  padding-left: 20px !important;
}
.custom-input-icon:has(> .extra-label) .select2-selection__rendered {
  padding-left: 68px !important;
  color: #5194F7 !important;
}
.custom-input-icon:has(> .extra-label--sm) .select2-selection__rendered {
  padding-left: 45px !important;
}
.custom-input-icon:has(> .extra-label) .select2-selection--single {
  border: none !important;
}
.custom-input-icon :is(i) {
  position: absolute;
  top: 50%;
  transform: translate(5px, -50%);
  z-index: 9;
  font-size: 15px;
  color: #a1a1a1;
}
.custom-input-icon :is(.extra-label){
  display: flex;
  align-items: center;
  &::after{
    content: attr(data-label);
    color: #757D8A;
    font: normal 12px 'Inter', sans-serif;
    padding-left: 3px;
    width: 50px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.custom-select2-clean {
  & .select2-selection--single{
    border: none !important;
  }
  & .select2-selection__rendered , .select2-selection--single{
    padding-inline: 0 !important;
    background-color: transparent !important;
  }
}
.border-none-focus{
  border: none;
  &:focus{
    outline: transparent;
    box-shadow: none;
  }
}
.icon-big{
  font-size: 20px;
}
.dropdown__wrapper {
  width: 240px;
  position: absolute;
  top: 50px;
  right: 16px;
  z-index: 100;
  border-radius: 8px;
  border: 1px solid var(--Gray);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fadeOutAnimation ease-in-out 0.2s forwards;
  background-color: var(--white);
  opacity: 0;
  visibility: hidden;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);
}
.dropdown__wrapper.active {
  opacity: 1;
  visibility: visible;
  animation: fadeInAnimation ease-in-out 0.2s forwards;
}
.dropdown__wrapper--fade-out {
  animation: fadeOutAnimation ease-in-out 0.2s forwards;
}
@keyframes fadeInAnimation {
  0% { opacity: 0; visibility: hidden; width: 160px; }
  100% { opacity: 1; visibility: visible; width: 240px; }
}
@keyframes fadeOutAnimation {
  0% { opacity: 1; width: 240px; visibility: visible; }
  100% { opacity: 0; width: 160px; visibility: hidden; }
}
.dropdown__group {
  padding: 8px;
}
.dropdown__nav > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 95%;
  margin-inline: auto;
}
.dropdown__nav > ul > li {
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  color: #666666;
  font-weight: 500;
  &:last-child{
    margin-bottom: 0;
  }
}
.disabled-text{
  margin-bottom: 0;
  color: #b2bec3;
  font-size: 12px;
  padding: 7px 5px;
  cursor:  not-allowed;
}

.tooltip-container {
  position: relative; /*relative: los elementos se posicionan de forma relativa a su posición normal.*/
  display: inline-block;
}

.tooltip-text {
  /* white-space: nowrap; */
  white-space: pre-wrap;
  text-align: justify;
  /* background: #fff; */
  /* color: #000000; */
  background: #3d3d3d;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 15px;
  min-width: 200px;
  border-radius: 5px;
  filter: drop-shadow(0 3px 5px #ccc);
  line-height: 1.5;
  visibility: hidden;
  position: absolute;
  z-index: 1;
  left: 0%;
  transform: translateX(-50%);
  opacity: 0;
  transition: transla 1s;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  top: 120%; /* Posiciona el tooltip bajo del elemento */
}
.decoration-x{
  background-color: #325A88;
  width: 100%;
  border-radius: 100vw;
}
/* .decoration-x::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 105%;
  width: 100%;
  height: 1px;
  background-color: #325A88;
  border-radius: 100vw;
} */
.bg-light-gray{
  background-color: rgb(242, 242, 242);
}
.hover-effect-fade{
  position: relative;
  overflow: clip;
  min-height: 30px;
}
.hover-effect-fade .hidden-item{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  /* transform: translateX(100%); */
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75), transparent);
  transition: transform 200ms ease-in;
  width: 65%;
  display: flex;
  justify-content: end;
  align-items: center;
  column-gap: 1rem;
  padding-right: 1rem;
}
/* .hover-effect-fade:hover .hidden-item{
  transform: translateX(0%);
} */
.border-b-radius-none{
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider-x {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #adb5bd;
  transition: .4s;
  border-radius: 30px;
}
.slider-x:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.27em;
  bottom: 0.25em;
  background-color: #adb5bd;
  transition: .4s;
}
input:checked + .slider-x{
  background-color: #007bff;
  border: 1px solid #007bff;
}
input:focus + .slider-x {
  box-shadow: 0 0 1px #007bff;
}
input:checked + .slider-x:before {
  transform: translateX(1.4em);
  background-color: #fff;
}
.form-custom{
  border: 1px solid #cfcfcf;
  width: 70px;
  min-height: 30px;
  padding: 3px 5px;
  border-radius: 5px;
}
.modal-2xl{
  max-width: 100rem;
  margin-inline: auto;
}
.modal-md{
  max-width: 35rem;
  margin-inline: auto;
}
.word-wrap{
  word-wrap: anywhere;
}
.blend-dark{
  mix-blend-mode: darken;
}
.custom-badge{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.custom-badge--blue{
  background-color: var(--Blue);
  color: var(--white);
}
.custom-badge--bottom{
  position: absolute;
  bottom: -5px;
  right: 5px;
}
.custom-badge--top{
  position: absolute;
  top: -10px;
  left: 5px;
}
.custom-badge--prioriza{
  position: absolute;
  left: -35px;
  top: -10px;
  z-index: 99;
}
.custom-badge--center{
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translate(-0%, -50%);
  z-index: 99;
}
.cursor-pointer{
  cursor: pointer;
}
.cursor-disabled{
  cursor: not-allowed;
}
@keyframes bounceIn {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
.bounce-effect {
  animation: bounceIn 0.5s ease-in-out;
}
.status-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.status-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 8px solid #000;
}
.status-days{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.1;
  & span{
    font-size: 10px;
    font-weight: 400;
  }
}
.position-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.appears-hover .hidden-item{
  opacity: 0;
  transition: opacity 150ms ease-in;
}
.appears-hover:hover .hidden-item{
  opacity: 1;
}
.appears-hover .drop-bottom{
  position: absolute;
  bottom: 20px;
  left: 70%;
  z-index: 9;
}
.not-focus:focus{
  outline: none;
  box-shadow: none;
}
.modal-2xl{
  max-width: 1440px;
}
.scroll-indicator {
	width: 12px;
	position: absolute;
  top: 15px;
  left: 0;
  z-index: 10;
  /* top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
	opacity: .75;
	&::before,
	&::after {
		content: '';
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	&::before {
		width: 12px;
		height: 12px;
		border-radius: 10px;
		border: 2px solid #131313;
		animation: dot 3s infinite ease-in-out;
	}
	&::after {
		width: 7px;
		height: 7px;
		border-right: 2px solid #131313;
		border-bottom: 2px solid #131313;
		transform: rotate(45deg);
		animation: arrow 3s infinite ease-in-out;
		animation-delay: .75s;
		opacity: .45;
	}
	& > div {
		display: block;
		&::before,
		&::after {
			content: '';
			display: block;
			margin: 5px auto;
			border-radius: 10px;
			border: 2px solid #131313;
			animation: dot 3s infinite ease-in-out;
		}
		&::before {
			width: 8px;
			height: 8px;
			animation-delay: .25s;
		}
		&::after {
			width: 6px;
			height: 6px;
			animation-delay: .5s;
		}
	}
}
@keyframes dot {
	0% {
		transform: scale(.75);
		opacity: .45;
	}
	25% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(.75);
		opacity: .45;
	}
}
@keyframes arrow {
	0% {
		transform: scale(.75) rotate(45deg);
		opacity: .45;
	}
	25% {
		transform: scale(1) rotate(45deg);
		opacity: 1;
	}
	100% {
		transform: scale(.75) rotate(45deg);
		opacity: .45;
	}
}
#verGrupo.disabled {
  pointer-events: not-allowed !important;
  cursor: not-allowed !important;
  opacity: 0.40 !important;
}
#verGrupo .p-disabled {
  color: grey !important;
}
.gap-x-2{
  column-gap: 5px;
}
.gap-x-3{
  column-gap: 1rem;
}
.gap-y-3{
  row-gap: 1rem;
}
.font-weight-medium{
  font-weight: 500 !important;
}
#iconHamburguesa{
  visibility: visible !important;
}
.tabla--alt {
  & .tabla__th {
    color: #fff;
    background-color: #4e659d;
    text-align: center;
  }
  & .tabla__td {
    text-align: center;
  }
}
.tabla__td--totales {
  border-left: 1px solid #e2e8f0;
}
.custom-font {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Loader burbuja */
.customLoader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #13295cc3;
	color: white;
	z-index: 99999;
}

.loaderBubbleText {
  font-size: 20px;
  margin: 10px 0;
}

.text-small {
  font-size: 90%;
}

.loaderBubble {
  --r1: 154%;
  --r2: 68.5%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%),
    radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%),
    radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%),
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%, 0% 0%, 100% 0%;
  background-repeat: no-repeat;
  animation: l9 2s infinite linear;
}

@keyframes l9 {
  33% {
    background-position: 0% 33%, 100% 33%, 200% 33%
  }

  66% {
    background-position: -100% 66%, 0% 66%, 100% 66%
  }

  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%
  }
}
.whitespace-nowrap{
  white-space: nowrap;
}
.info-alert {
  background-color: #E8F4FF;
  color: #235B8C;
  border-radius: var(--rounded-table);
}
.custom-font {
    font-family: 'Roboto', sans-serif;
    font-size: 115%;
    color: steelblue;
}

.btn-success-alt {
    background-color: #0fd795;
    border-color: #0fd795;
    color: #fff;
    &:hover {
        background-color: #00e9bd;
        border-color: #00e9bd;
        color: #fff;
    }
}

/* Animated tabs */
.tab-container-animated{
  --radius-tab: 100vw;
  --height-tab: 40px;
  --min-width-tab: 150px;
  position: relative;
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 2px;
  background-color: #eeeeee;
  border-radius: var(--radius-tab);
  & .indicator{
    content: "";
    min-width: var(--min-width-tab);
    height: var(--height-tab);
    background: #ffffff;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 9;
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-tab);
    transition: all 0.2s ease-out;
  }
  & .tab {
    min-width: var(--min-width-tab);
    height: var(--height-tab);
    position: absolute;
    z-index: 99;
    outline: none;
    opacity: 0;
  }
  & .tab_label {
    min-width: var(--min-width-tab);
    height: var(--height-tab);
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    font-size: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
    opacity: 0.6;
    cursor: pointer;
    margin-bottom: 0;
  }
  & .tab--1:checked ~ .indicator {
    left: 2px;
  }
  & .tab--2:checked ~ .indicator {
    left: calc(var(--min-width-tab) + 2px);
  }
  & .tab--3:checked ~ .indicator {
    left: calc(var(--min-width-tab) * 2 + 2px);
  }
}

.custom-switch-blue {
  position: relative;
  width: 50px;
  height: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.custom-switch-blue label {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 25px;
  border-radius: 50px;
  background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-switch-blue label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.custom-switch-blue input[type="checkbox"]:checked+label {
  background: linear-gradient(to bottom, rgb(114 170 213), rgb(9 86 178));
}

.custom-switch-blue input[type="checkbox"]:checked+label:after {
  transform: translateX(25px);
}

.custom-switch-blue label:hover {
  background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
}

.custom-switch-blue label:hover:after {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.custom-switch-blue-sm {
  width: 35px;
  height: 25px;
}

.custom-switch-blue-sm label {
  width: 30px;
  height: 15px;
}

.custom-switch-blue-sm label:after {
  width: 13px;
  height: 13px;
}

.custom-switch-blue-sm input[type="checkbox"]:checked+label:after {
  transform: translateX(15px);
}

.yep {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.text-large {
  font-size: 150%;
}

.text-larger {
  font-size: 120%;
}

.text-100 {
  font-size: 100% !important;
}

.bg-main {
  background-color: var(--Blue, #364c84);
}

.rounded-right-none {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-left-none {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.border-w-3 {
    border-width: 3px !important;
    border-color: #cfd7e3 !important;
}
.scape-container{
  margin-inline: -15px;
}
.text-darker{
  color: var(--saturateBlue);
}
.fs--3{
  font-size: var(--step--3);
}
.fs--2{
  font-size: var(--step--2);
}
.fs--1{
  font-size: var(--step--1);
}
.fs-base{
  font-size: var(--step-0);
}
.fs-1{
  font-size: var(--step-1);
}
.fs-2{
  font-size: var(--step-2);
}
.fs-3{
  font-size: var(--step-3);
}
.fs-4{
  font-size: var(--step-4);
}
.fs-5{
  font-size: var(--step-5);
}