@font-face {
  font-family: Tommy;
  src: url("font/TommySoftRegular.otf") format("opentype");

  font-family: TommyLight;
  src: url("font/TommySoftThin.otf") format("opentype");

  font-family: TommyBold;
  src: url("font/TommySoftExtraBold.otf") format("opentype");
}

:root {
  --bg: #FFFFFF;
  --bg1: #EEECF5;
  --title: #000000;
  --primary: #000000;
  --bgprimary: #000000;
  --bgsecondary: #31383C;
  --secondary: #FFFFFF;
  /*#eedc84;*/

  --bgrgba: rgba(255, 255, 255, 0.75);
  --rgbablack1: rgba(25, 27, 42, 0.08);
  --rgbablack2: rgba(25, 27, 42, 0.18);
  --rgbablack3: rgba(25, 27, 42, 0.18);

  --rojo: #de474e;
  --rojo2: #f5444d;
  --blanco: #ffffff;
  --azul: #00b0ff;
  --verde: #04c088;
  --lime: #d2ff09;
  --naranja: #f99614;
  --negro2: #0C0C0E;
  --gris1: #CCCCCC;
  --gris2: #646464;
  --gris3: #999999;

  --path-fill-1: #838383;
  --path-fill-2: #575757;
  --path-fill-3: #2c2c2c;
  --path-fill-4: #000000;
}

body.dark {
  --bg: #1e1e1e;
  /*--bg:#1e1e1e;*/
  --bg1: #1c1c1c;
  /* --bg1: #1c1c1c;*/
  --title: #eedc84;
  /*#eedc84*/
  --primary: #FFFFFF;
  --bgprimary: #eedc84;
  /*#eedc84*/
  --bgsecondary: #eedc84;
  /* #8b7f42;*/
  --secondary: #000000;

  --bgrgba: rgba(0, 0, 0, 0.50);
  --rgbablack1: rgba(255, 255, 255, 0.029);
  --rgbablack2: rgba(255, 255, 255, 0.137);
  --rgbablack3: rgba(255, 255, 255, 0.10);

  --rojo: #de474e;
  --rojo2: #c24148;
  --blanco: #ffffff;
  --azul: #00b0ff;
  --verde: #04c088;
  --lime: #d2ff09;
  --naranja: #f99614;
  --negro2: #0C0C0E;
  --gris1: #CCCCCC;
  --gris2: #646464;
  --gris3: #999999;

  --path-fill-1: #838383;
  --path-fill-2: #575757;
  --path-fill-3: #2c2c2c;
  --path-fill-4: #000000;

}


html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: Tommy, sans-serif;
  background: var(--bg);
  color: var(--primary);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  overflow: hidden;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--title) var(--bg);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: var(--title);
}

*::-webkit-scrollbar-thumb {
  background-color: #8f54a0;
  border-radius: 10px;
  border: 1px none #000000;
}



body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--primary);
}


.logotipo h1 {
  font-family: Tommy, sans-serif;
  font-size: 3.5em;
  font-weight: 500;
  display: inline-block;
  /* text-shadow: 2px 2px 2px var(--rgbablack1); */
  color: var(--blanco);
  letter-spacing: 2px;
  padding: 25px 12px;
  background: var(--rojo2);
}

.logotipo span {
  font-size: 10px;
  display: block;
  letter-spacing: 0px;
  color: var(--primary);
}

.logotipo2 {
  text-align: center;
  margin: auto;
  color: var(--primary);
  width: 150px;
  padding: 10px 0px;
}

.logotipo2 h1 {
  font-family: Tommy, sans-serif;
  font-size: 2em;
  font-weight: 500;
  display: inline-block;
  /* text-shadow: 2px 2px 2px var(--rgbablack1); */
  letter-spacing: 1px;
  background: var(--rojo2);
  color: var(--blanco);
  padding: 20px 10px;
}

.logotipo2 span {
  font-size: 10px;
  display: block;
}

.logotipo3 {
  text-align: center;
  display: inline-block;
}

.logotipo3 .label {
  font-family: TommyBold, sans-serif;
  font-size: em;
  font-weight: 500;
  text-shadow: 2px 2px 2px var(--rgbablack1);
  letter-spacing: 1px;
}

.logotipo3 .span {
  font-size: 10px;
  display: block;
  margin-bottom: 20px;
}

.fotosvg {
  background: var(--bg);
  color: var(--blanco);
  border-radius: 10px;
  padding: 20px;
  -moz-box-shadow: 5px 5px 10px var(--rgbablack1);
  -webkit-box-shadow: 5px 5px 10px var(--rgbablack1);
  box-shadow: 5px 5px 10px var(--rgbablack1);
}

.username {
  display: block;
  text-align: center;
}

.rol {
  display: block;
  text-align: center;
  font-size: 0.85em;
  font-weight: normal;
  color: var(--gris3);
  margin-bottom: 0px;
}

/**************************/


.contenedor {
  overflow: auto;
  padding: 0px 10px;
  height: calc(100vh - 60px);
}

.header {
  height: 35px;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  border-bottom: solid 1px var(--rgbablack2);
  /*-moz-box-shadow: 3px -2px 10pxvar(--rgbablack2);
  -webkit-box-shadow:3px -2px 10pxvar(--rgbablack2);
  box-shadow: 3px -2px 10px var(--rgbablack2); */

}

.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
  text-align: left;
}

/*************************/
/*******    MENU  ********/
/*************************/
.sidebar {
  /*width:100%; position: fixed;  display: block; z-index: -1;opacity: 0;
  background: linear-gradient(344deg, var(--bg1) 7%, var(--bg) 18%, var(--bg) 82%, var(--bg1) 93%); 
  */
  /*overflow: hidden;
  -moz-box-shadow: -2px -2px 5px 3px  var(--rgbablack2);
  -webkit-box-shadow: -2px -2px 5px 3px  var(--rgbablack2);
  box-shadow: -2px -2px 5px 3px  var(--rgbablack2);*/
  height: 100%;
  width: 250px;
  overflow: hidden;
  margin-left: -250px;
  border: solid 1px var(--rgbablack2);
  justify-content: space-between;
  display: flex;
  flex-direction: column;

  position: fixed;
  top: 0;
  left: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* 
.show::-webkit-scrollbar {
  width: 0;
} */

.sidebar hr {
  height: 8px;
  border: 0;
  height: 1px;
  width: 100%;
  background-image: linear-gradient(90deg, var(--bg), var(--rgbablack1), var(--bg));
}



/*.sidebar.show{ width: 100%; height: 100%;  overflow-y: auto; overflow-x: hidden; opacity:1; z-index: 999; }*/
.sidebar.show {
  margin-left: 0px;
  overflow-y: auto;
}

.footer {
  font-size: 0.7em;
  text-align: center;
  padding: 7px 0px;
  color: var(--primary);
}

.tagfoot {
  font-size: 0.85em;
  color: var(--rgbablack3);
}

.main {
  width: 100%;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.main.show {
  margin-left: 250px;
  width: calc(100% - 250px);
}

/*.showsidebar{ width:250px !important; }
.showmain{ margin-left :250px !important; } */
.btnshowhide {
  display: none;
}

#menuglb {
  min-height: calc(100vh - 260px);
}

#globalemp {
  width: 90%;
  margin: auto;
  padding: 9px;
  padding: 0;
}

.menumain {
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  gap: 7px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999999;
  background: var(--bgrgba);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;

  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.menumain.show {
  display: flex;
  opacity: 1;
}

.menumain .btnclose {
  position: fixed;
  top: 7px;
  right: 7px;
  z-index: 9999;
}

.menumain .content {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  padding: 10px;
  max-width: 1024px;
}

.menumain .itemcontent {
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 80px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 10px;
  text-align: center;
  -webkit-box-shadow: -1px -1px 5px var(--rgbablack2);
  /* 10px 15px 50px*/
  -moz-box-shadow: -1px -1px 5px var(--rgbablack2);
  box-shadow: -1px -1px 5px var(--rgbablack2);
  border: solid 1px var(--rgbablack3);
  border-radius: 10px;
}

.menumain span {
  font-size: 0.80em;
}

.menumain .itemcontent:hover {
  background: var(--bgsecondary);
  color: var(--secondary);
  /*-webkit-filter: blur(0) !important; -moz-filter: blur(0) !important; -o-filter: blur(0) !important; -ms-filter: blur(0)!important; filter: blur(0)!important;   */
}

.menumain .itemcontent:active {
  background: var(--bgprimary);
  border-color: var(--bgprimary);
  color: var(--secondary);
}

@media screen and (max-width: 800px) {
  .sidebar {
    display: none;
    z-index: 99;
  }

  .sidebar.show {
    display: block;
    width: 100%;
    background: var(--bg);
    position: fixed;
    top: 0;
    left: 0;
    /*background: linear-gradient(344deg, var(--bg1) 7%, var(--bg) 18%, var(--bg) 82%, var(--bg1) 93%);  */
  }

  .logotipo2 {
    width: 100%;
  }

  .main,
  .main.show {
    width: 100%;
    margin: 0;
  }

  .btnshowhide {
    display: block;
    position: fixed;
    top: 0;
    right: 7px;
  }

}

.dataTables_wrapper,
.dt-container {
  -moz-box-shadow: 1px 1px 10px 1px var(--rgbablack2);
  -webkit-box-shadow: 1px 1px 10px 1px var(--rgbablack2);
  box-shadow: 1px 1px 10px 1pxvar(--rgbablack2);
  border-radius: 7px;
  padding: 10px;
}

.dt-buttons {
  display: inline-flex;
  float: left;
  width: 50%;
  text-align: left;
  font-size: 0.95em;
  gap: 5px;
  height: 35px;
}

/*.dt-button{ position: relative; display: inline-block; box-sizing: border-box; margin-right: 0.333em; padding: 0.5em 0.7em;

  border: solid 1px var(--rgbablack3);   
  border-radius: 3px;
  cursor: pointer;
  color:var(--primary);
  white-space: nowrap;
  overflow: hidden; 
  background-color:transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  outline: none;
  -moz-box-shadow: 3px 1px 4px 0px var(--rgbablack1);
  -webkit-box-shadow: 3px 1px 4px 0px  var(--rgbablack1);
  box-shadow: 3px 1px 4px 0px var(--rgbablack1);

} */

.dt-info {
  display: inline-flex;
  float: left;
  width: 50%;
  justify-content: start;
  align-items: center;
  margin-top: 10px;
  font-size: 0.8em;
  height: 35px;
}

.dt-paging {
  display: inline-flex;
  width: 50%;
  justify-content: end;
  margin-top: 10px;
  height: 35px;
}

.dt-search {
  display: inline-flex;
  width: 50%;
  justify-content: end;
  height: 35px;
}

.dt-search label {
  max-width: 180px;
}

.dt-search label input {
  border: none;
  border-bottom: solid 1px var(--gris1);
}

.dt-button {
  padding: 10px 12px;
  border: none;
  min-height: auto !important;
  display: inline-block;
  margin-left: 2px;
  border-radius: 5px;
  background: none;
  color: var(--bgprimary);
  font-size: 12px;

  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;

  border: solid 1px var(--rgbablack3);
}

.dt-paging-button {
  padding: 10px 12px;
  border: none;
  min-height: auto !important;
  display: inline-block;
  margin-left: 2px;
  border-radius: 5px;
  background: none;
  color: var(--bgprimary);
  font-size: 12px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

.dt-paging-button.current,
.dt-button.current {
  background: var(--bgprimary) !important;
  color: var(--secondary) !important;
}

.dt-button.active,
.dt-button:active,
.dt-paging-button.active,
.dt-paging-button:active {
  background: var(--bgprimary);
  color: var(--secondary);
}

.dt-button:hover,
.dt-container .dt-paging .dt-paging-button:hover {
  background: var(--bgsecondary);
  color: var(--secondary);


  -moz-box-shadow: 0px 0px 4px 2px var(--rgbablack2);
  -webkit-box-shadow: 0px 0px 4px 2px var(--rgbablack2);
  box-shadow: 0px 0px 4px 2px var(--rgbablack2);
}

.dt-button-collection {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  margin-top: 3px;
  padding: 8px 8px 4px 8px;
  background-color: var(--bg);
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 3px 3px 5px var(--rgbablack2);
  z-index: 999999;
  gap: 3px;
  display: flex;
  flex-direction: column;
  border: solid 1px var(--rgbablack3);
}

.dt-button-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: var(--bgrgba);
}


.dt-button-info {
  position: fixed;
  top: 7px;
  left: 0;
  right: 0;
  width: 250px;
  margin: auto;
  background-color: var(--bgprimary);
  color: var(--secondary);
  border: none;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  text-align: center;
  z-index: 999999;
}

.dt-button-info h2 {
  padding: 0.5em;
  margin: 0;
  font-weight: normal;
  border: none;
}


@media screen and (max-width: 500px) {

  .dt-buttons,
  .dt-paging,
  .dt-info,
  .dt-search {
    width: 100% !important;
    justify-content: center !important;
    float: none !important;
    margin-top: 10px;
  }

  .dt-info {
    display: none !important;
  }

  .dt-search label {
    max-width: 90% !important;
  }
}

.menu2 {
  width: 90%;
  padding: 0;
  margin: auto;
  max-width: 700px;
  font-size: 0.95em;
}

.menu2ul {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.menu2__link {
  display: block;
  padding: 15px 0;
  text-decoration: none;
}

.menu2__link--inside {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 3px 0px;
}

.menu2__link--inside svg {
  display: block;
}

.menu2__link--inside span {
  display: block;
  padding: 7px 2px;
}

.menu2ul__item,
.menu2ul__inside {
  padding-left: 7px;
  margin-right: 7px;
}

.menu2ul__item.activo,
.menu2ul__inside.activo {
  border-radius: 7px;
  border: solid 1px var(--rgbablack2);
  background: var(--bgprimary);
  color: var(--secondary);
  border-radius: 5px;
  width: 90%;
}

.menu2__link:hover,
.menu2__link--inside:hover {
  cursor: pointer;
}

.menu2ul__item {
  list-style: none;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.menu2ul__item:hover {
  cursor: pointer;
}

.menu2ul__button {
  display: flex;
  align-items: center;
  gap: 1em;
  width: 100%;
}

.arrow .menu2ul__arrow {
  transform: rotate(90deg);
}

.menu2ul__arrow {
  margin-left: auto;
  padding: 0px 7px;
  transition: transform .3s;
}

.menu2ul__show {
  width: 95%;
  margin-left: auto;
  list-style: none;
  transition: height .3s;
  height: 0;
  padding-left: 10px;
  /* margin-bottom: 5px; */
}

.arrow .menu2ul__arrow>.menu2ul__show {
  margin-bottom: 5px;
}

.menucontext {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  flex-direction: column;
  background: var(--bg);
  padding: 5px;
  border-radius: 10px;
  z-index: 999999;
  border: solid 1px var(--rgbablack3);
  -webkit-box-shadow: -1px -1px 15px var(--rgbablack2);
  -moz-box-shadow: -1px -1px 15px var(--rgbablack2);
  box-shadow: -1px -1px 15px var(--rgbablack2);

  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.menuContext_item:last-child {
  border: none;
}

.menuContext_item {
  padding: 10px 10px;
  white-space: nowrap;
  display: flex;
  gap: 10px;
  min-width: 100px;
  font-weight: bold;
  /* border-bottom: solid 1px var(--rgbablack2); */
}

.menuContext_item:hover {
  cursor: pointer;
  color: var(--primary);
  background: var(--rgbablack1);
  border-radius: 5px;
}


/******************************************/
.card {
  background: var(--bg);
  padding: 30px;
  text-align: center;
  -webkit-box-shadow: -1px -1px 5px var(--rgbablack2);
  /* 10px 15px 50px*/
  -moz-box-shadow: -1px -1px 5px var(--rgbablack2);
  box-shadow: -1px -1px 5px var(--rgbablack2);
  border: solid 1px var(--rgbablack3);
  border-radius: 20px;
  box-sizing: border-box;
}


.modal {
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  background: var(--bgrgba);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  gap: 10px;

}

.modal.show {
  display: flex !important;
  padding: 20px;
  box-sizing: border-box !important;
  overflow: auto;
}

.modal h2 {
  align-items: center;
  display: flex;
  align-content: center;
}

.modal h2>i {
  margin-right: 10px;
  border-radius: 50%;
  background: var(--bgprimary);
  color: var(--secondary);
  min-width: 40px;
  min-height: 40px;
  font-size: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal .win {
  background: var(--bg);
  width: 80%;
  max-width: 450px;
  padding: 30px;
  text-align: center;
  overflow: auto;
  max-height: 80vh;
  -webkit-box-shadow: -1px -1px 5px var(--rgbablack2);
  -moz-box-shadow: -1px -1px 5px var(--rgbablack2);
  box-shadow: -1px -1px 5px var(--rgbablack2);
  border-radius: 5px;
  border: solid 1px var(--rgbablack3);
}

/*.modal>div>div:nth-child(1) { border-bottom: solid 1px var(--rgbablack1); padding: 10px; font-weight: bold; display: flex; justify-content: space-between; }
.modal>div>div:nth-child(2) { padding: 20px; }
.modal>div>div:nth-child(3) { padding: 10px; display: flex; justify-content: center; align-items: center; gap:0.5em; }
.modal>div>div:nth-child(3)>button { padding:15px 20px; min-width: 70px; }*/

.alert {
  background: var(--bgprimary);
  color: var(--blanco);
  width: 100%;
  max-width: 250px;
  padding: 10px 5px;
  text-align: center;
  -webkit-box-shadow: 10px 15px 50px var(--rgbablack1);
  -moz-box-shadow: 10px 15px 50px var(--rgbablack1);
  box-shadow: 10px 15px 50px var(--rgbablack1);
  border-radius: 40px;
  z-index: 9999;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.85em;
  margin-top: 7px;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 30px;
}

.alert p {
  flex-grow: 11;
  margin: 0;
}

.alert a {
  min-height: 15px !important;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  padding: 4px !important;
  color: var(--blanco) !important;
  display: inline;
}

.alert a:hover {
  color: var(--negro2);
}

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

.aviso {
  background-color: var(--naranja);
}

.divNotificacion {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  z-index: 999999;
}


::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bgprimary);
  background: -webkit-linear-gradient(to right, #E2E2E2, var(--bgprimary));
  background: linear-gradient(to right, #E2E2E2, var(--bgprimary));
}

::-webkit-scrollbar-thumb {
  background: var(--bgprimary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bgprimary);
}

iframe {
  background: none;
  border: none;
}

/* select::-ms-expand { display: none; }
select { -moz-appearance: none;  } */
::-webkit-input-placeholder {
  color: var(--gris2);
}

::-moz-placeholder {
  color: var(--gris2);
}

:-ms-input-placeholder {
  color: var(--gris2);
}

:-moz-placeholder {
  color: var(--gris2);
}

.link:hover {
  cursor: pointer;
  color: var(--bg6);
}

.btn_verde {
  background: var(--verde) !important;
  color: var(--blanco) !important;
  border: none;
  border-radius: 5px;
}

.btn_verde:hover,
.btn_verde:focus {
  background: var(--verde) !important;
  color: var(--blanco) !important;
}

.btn_naranja {
  background: var(--naranja) !important;
  color: var(--blanco) !important;
  border: none;
  border-radius: 5px;
}

.btn_naranja:hover,
.btn_naranja:focus {
  background: var(--naranja) !important;
  color: var(--blanco) !important;
}

.btn_azul {
  background: var(--azul) !important;
  color: var(--blanco) !important;
  border: none;
  border-radius: 5px;
}

.btn_azul:hover,
.btn_azul:focus {
  background: var(--azul) !important;
  color: var(--blanco) !important;
}

.btn_rojo {
  background: var(--rojo) !important;
  border-color: var(--rojo) !important;
  color: var(--blanco) !important;
}

.btn_rojo:hover,
.btn_rojo:focus {
  background: var(--rojo2) !important;
  border-color: var(--rojo2) !important;
  color: var(--blanco) !important;
}

.btn_link2 {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--primary);
}

.btn_link2 span {
  font-size: 12px;
  display: block;
}

.btn_link2:hover,
.btn_link2:focus {
  color: var(--secondary);
  border: none;
  background: var(--bgprimary);
  cursor: pointer;
}


.btn_link {
  padding: 10px;
  border: none;
  min-height: auto !important;
  display: inline-flex;
  border-radius: 5px;
  background: none;
  color: var(--primary);
  font-size: 12px;
}

.btn_link span {
  font-size: 10px;
  display: block;
}

.btn_link:hover,
.btn_link:focus {
  color: var(--secondary);
  border: none;
  background: var(--bgprimary);
  cursor: pointer;
}

.btn_float {
  position: fixed;
  right: 10px;
  z-index: 10001;
  top: 10px;
  width: fit-content;
}

button,
input[type="button"],
input[type="file"] {
  min-height: 40px;
  outline: none;
  display: block;
  padding: 7px 12px;
  background: var(--bgprimary);
  color: var(--secondary);
  border: solid 1px var(--bgprimary);
  border-radius: 10px;
  max-width: 200px;
}

button:hover,
input[type="button"]:hover button:focus,
input[type="button"]:focus,
input[type="file"]:hover,
input[type="file"]:focus {
  background: var(--bgsecondary);
  color: var(--secondary);
}


button:active,
input[type="button"]:active,
.btn_naranja:active,
.btn_rojo:active,
.btn_azul:active,
.btn_verde:active,
input[type="file"]:active {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--bgprimary);
}


.toggle-dark .fa-moon {
  display: inline-block;
}

.toggle-dark .fa-sun {
  display: none;
}

.toggle-dark.check .fa-moon {
  display: none;
}

.toggle-dark.check .fa-sun {
  display: inline-block;
}

/************************************/
/*           GENERALES              */
/************************************/
table {
  border-spacing: 0px;
  border-collapse: collapse;
}

td {
  padding: 0;
}

ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: TommyBold, sans-serif;
  position: relative;
  padding-bottom: 5px;
  line-height: 1em;
}

a {
  color: var(--primary);
  text-decoration: none;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2.25em;
}

h3 {
  font-size: 2.0em;
}

h4 {
  font-size: 1.75em;
}

h5 {
  font-size: 1.5em;
}

h6 {
  font-size: 1.25em;
}

hr {
  background: var(--gris1);
  border: 0;
  height: 1px;
}

.full {
  width: 100%;
  height: 100%;
}

.overlay,
.form_captura {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99999;
  background: var(--bgrgba);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  text-align: center;
}

.fixed {
  position: fixed !important;
  ;
}

.block {
  display: block !important;
  ;
}

.inlineblock {
  display: inline-block;
}

.padding0 {
  padding: 0 !important;
}

.padding5 {
  padding: 5px !important;
}

.padding10 {
  padding: 10px !important;
  ;
}

.padding15 {
  padding: 15px !important;
  ;
}

.padding20 {
  padding: 20px !important;
  ;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

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

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gap5 {
  gap: 5px;
}

.gap10 {
  gap: 10px;
}

.gap15 {
  gap: 15px;
}

.gap20 {
  gap: 20px;
}

.padLeft10 {
  padding-left: 10px !important;
}

.pd0L0R {
  padding: 10px 0px !important;
}

.width100 {
  width: 100% !important;
}

.width98 {
  width: 98% !important;
}

.width95 {
  width: 9% !important;
}

.width90 {
  width: 90% !important;
}

.width80 {
  width: 80% !important;
}

.width75 {
  width: 74% !important;
}

.width60 {
  width: 59% !important;
}

.width50 {
  width: 49% !important;
}

.width40 {
  width: 39% !important;
}

.width25 {
  width: 24% !important;
}

.wd5 {
  width: 5px;
}

.wd10 {
  width: 10px;
}

.wd15 {
  width: 15px;
}

.wd20 {
  width: 20px;
}

.wd30 {
  width: 30px;
}

.wd40 {
  width: 40px;
}

.wd50 {
  width: 50px;
}

.wd60 {
  width: 60px;
}

.wd70 {
  width: 70px;
}

.wd75 {
  width: 75x;
}

.divtabla {
  display: table;
}

.row {
  display: table-row;
}

.celda {
  display: table-cell;
}

.td-arriba {
  vertical-align: top;
}

.td-abajo {
  vertical-align: bottom;
}

.td-medio {
  vertical-align: middle;
}

.td-derecha {
  vertical-align: right;
}

.td-izquierda {
  vertical-align: left;
}

.txt-justificado {
  text-align: justify;
}

.txt-arriba {
  text-align: top;
}

.txt-abajo {
  text-align: bottom;
}

.txt-centro {
  text-align: center;
}

.txt-derecha {
  text-align: right;
}

.txt-izquierda {
  text-align: left;
}

.negro {
  color: var(--negro2);
}

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

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

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

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

.azul {
  color: #1D51A7 !important;
}

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

.negrita {
  font-weight: bold !important;
}

.normal {
  font-weight: normal;
  font-family: TommyLight, sans-serif, Arial;
}

.hide {
  display: none !important;
}

.ft {
  font-size: 0.80em !important;
}

.bggris {
  background-color: var(--gris1) !important;
}

.bg-rgba1 {
  background-color: var(--rgbablack1) !important;
}

.bg-rgba2 {
  background-color: var(--rgbablack2) !important;
}

.bg-rgba3 {
  background-color: var(--rgbablack3) !important;
}



.bgrojo {
  background-color: var(--rojo) !important;
}

.bgverde {
  background-color: var(--verde) !important;
}

.bgazul {
  background-color: #1D51A7 !important;
}

.bgnaranja {
  background-color: var(--naranja) !important;
}

.bgnegro {
  background-color: var(--negro2) !important;
}

.bgblanco {
  background-color: var(--bg0) !important;
}

.bordegris {
  border: solid 1px var(--gris1) !important;
}

.borderojo {
  border: solid 1px var(--rojo) !important;
}

.bordeverde {
  border: solid 1px var(--verde) !important;
}

.bordeazul {
  border: solid 1px #1D51A7 !important;
}

.bordeindigo {
  border: solid 1px #14285a !important;
}

.bordenegro {
  border: solid 1px var(--bg) !important;
}

.bordenaranja {
  border: solid 1px var(--naranja);
}

.borde-izq {
  border-left: solid 1px var(--gris1) !important;
}

.borde-der {
  border-right: solid 1px var(--gris1) !important;
}

.borde-arriba {
  border-top: solid 1px var(--gris1) !important;
}

.borde-abajo {
  border-bottom: solid 1px var(--gris1) !important;
}

.borde-r5 {
  border-radius: 5px;
}

.border-r0 {
  border-radius: 0px;
}

.height100 {
  height: 100%;
}

.height95 {
  height: 95%;
}

.height90 {
  height: 90%;
}

.margen0 {
  margin: 0;
}

.margen15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.marginauto {
  margin: 0 auto;
}

.tablaespacio {
  border-collapse: separate;
  border-spacing: 10px;
}

.espacioabajo {
  margin-bottom: 15px;
}

.espacioarriba {
  margin-top: 15px;
}

.m5 {
  margin: 5px;
}

.m10 {
  margin: 10px;
}

.m15 {
  margin: 15px;
}

.mr5 {
  margin-right: 5px;
}

.mr10 {
  margin-right: 10px;
}

.mr15 {
  margin-right: 15px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.txtsombra {
  text-shadow: 1px 1px 1px var(--rgbablack1);
}

.float-izq {
  float: left;
}

.float-der {
  float: right;
}

.blur {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

.sinblur {
  -webkit-filter: blur(0) !important;
  -moz-filter: blur(0) !important;
  -o-filter: blur(0) !important;
  -ms-filter: blur(0) !important;
  filter: blur(0) !important;
}

.sombra {
  -moz-box-shadow: 5px 5px 10px var(--rgbablack2);
  -webkit-box-shadow: 5px 5px 10px var(--rgbablack2);
  box-shadow: 5px 5px 10px var(--rgbablack2);
}


.sombra2 {
  -moz-box-shadow: 1px 1px 10px 1px var(--rgbablack2);
  -webkit-box-shadow: 1px 1px 10px 1px var(--rgbablack2);
  box-shadow: 1px 1px 10px 1pxvar(--rgbablack2);
}

.sinsombra {
  box-shadow: none !important;
}

.coment {
  font-size: 0.75rem;
  color: var(--gris3);
  text-align: center;
  width: 95%;
  display: block;
  padding-top: 7px;
}

/*********************************************************************************/
/* TABLA GENERAL                                                                 */
/*********************************************************************************/

.dt-button-info>div {
  padding: 1em;
}

.tabla {
  text-transform: capitalize;
  width: 100%;
  border-collapse: collapse;
  border-collapse: separate;
  border-spacing: 0px 5px;
  border-bottom: thin solid var(--rgbablack2);
}

.tabla th {
  font-size: 0.9rem;
  padding: 10px 17px 10px 7px;
  font-weight: bold;
  border-top: thin solid var(--rgbablack2);
  border-bottom: thin solid var(--rgbablack2);
}

.tabla td {
  padding: 7px 4px;
}

.tabla tbody tr {
  border: solid 10px var(--bg);
  border-radius: 7px;
}

.tabla tbody tr:hover {
  -moz-box-shadow: -1px 1px 10px 1px var(--rgbablack1);
  -webkit-box-shadow: -1px 1px 10px 1px var(--rgbablack1);
  box-shadow: -1px 1px 10px 1px var(--rgbablack1);
  cursor: pointer;
  color: var(--primary);
}

.tabla tbody tr.selected {
  color: var(--verde);
  -moz-box-shadow: -1px 1px 10px 1px var(--rgbablack3);
  -webkit-box-shadow: -1px 1px 10px 1px var(--rgbablack3);
  box-shadow: -1px 1px 10px 1px var(--rgbablack3);
}

.tabla .opc {
  width: 75px;
}

.tabla tfoot {
  font-weight: bold;
}

.tabla tfoot td {
  border: none;
}



.tabla button,
.tabla input[type="button"] {
  box-shadow: none;
  padding: 0 !important;
}

.tabla button,
.tabla input[type="button"] {
  width: 50px;
  padding: 4px 0px;
  text-align: center;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
}

.tabla button span,
.tabla input[type="button"] span {
  display: block;
  font-size: 9px;
  margin-top: 0px;
}

.tabla button:hover,
.tabla input[type="button"] :hover {
  color: var(--primary);
}

.tabla button:active,
.tabla input[type="button"]:active {
  color: var(--secondary);
}

.tabla .btnrojo {
  width: 60px;
  padding: 4px 0px;
  text-align: center;
  color: #e57373;
  background: none;
  border: none;
  margin: 2px 0px;
  cursor: pointer;
}

.tabla .btnrojo span {
  display: block;
  font-size: 9px;
  margin-top: 0px;
}

.tabla .btnrojo:hover {
  color: #ff1744;
}

.tabla .btnblue {
  width: 60px;
  padding: 4px 0px;
  text-align: center;
  color: #0277bd;
  background: none;
  border: none;
  margin: 2px 0px;
  cursor: pointer;
}

.tabla .btnblue span {
  display: block;
  font-size: 9px;
  margin-top: 0px;
}

.tabla .btnblue:hover {
  color: #1976d2;
}

.tabla .btnnegro {
  width: 60px;
  padding: 4px 0px;
  text-align: center;
  color: var(--negro2);
  background: none;
  border: none;
  margin: 2px 0px;
  cursor: pointer;
}

.tabla .btnnegro span {
  display: block;
  font-size: 9px;
  margin-top: 0px;
}

.tabla .btnnegro:hover {
  color: var(--negro2);
}

.tabla .tagstatus {
  padding: 7px 10px;
  padding: 7px 10px;
  border-radius: 5px;
  /* width: 50px;
  display: block; */
  font-size: 0.80em;
  text-transform: uppercase;
  font-size: 0.7em;
}

.bgmain {
  background: url(bg.jpeg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*background-image: url("bg.jpeg");
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;*/

}

/*  
@media only screen and (max-width: 800px) {
  .responsivo{ display: block; width:100%; }
}
*/



/*********************************************************************************/
/* SELECT   */
/*********************************************************************************/

select {
  background: none;
  border: none;
  display: block;
  box-sizing: border-box;
  margin: 0;
  border: none;
  padding: 0 0 7px;
  width: 100%;
  height: inherit;
  color: var(--primary);
  -webkit-text-fill-color: currentColor;
  background-color: var(--bg);
  box-shadow: none;
  caret-color: var(--gris1);
  transition: border-bottom 0.2s, background-color 0.2s;
}

/*********************************************************************************/
/* TEXTBOX   */
/*********************************************************************************/

.textBox {
  position: relative;
  display: inline-block;
  text-align: left;
  line-height: 1.5;
  width: 100%;
}

/* Input, Textarea */
.textBox>input,
.textBox>textarea,
.textBox>select {
  display: block;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-top: solid 24px transparent;
  border-bottom: solid 1px var(--gris1);
  padding: 7px;
  width: 100%;
  height: inherit;
  color: var(--primary);
  -webkit-text-fill-color: currentColor;
  background-color: var(--bg);
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  caret-color: var(--gris1);
  transition: border-bottom 0.2s, background-color 0.2s;
}

/* Span */
.textBox>input+span,
.textBox>textarea+span,
.textBox>select+span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  box-sizing: border-box;
  padding: 7px 0 0;
  color: var(--gris1);
  font-size: 75%;
  line-height: 18px;
  pointer-events: none;
  transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}

/* Underline */
.textBox>input+span::after,
.textBox>textarea+span::after,
.textBox>select+span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
  transform-origin: bottom center;
  transform: scaleX(0);
  transition: transform 0.2s;
}

/* Hover */
.textBox:hover>input,
.textBox:hover>textarea,
.textBox:hover>select {
  border-bottom-color: #333;
}

/* Placeholder-shown */
.textBox>input:not(:focus):placeholder-shown+span,
.textBox>textarea:not(:focus):placeholder-shown+span,
.textBox>select:not(:focus):placeholder-shown+span {
  font-size: inherit;
  line-height: 56px;
}

/* Focus */
.textBox>input:focus,
.textBox>textarea:focus,
.textBox>select:focus {
  outline: none;
}

.textBox>input:focus+span,
.textBox>textarea:focus+span,
.textBox>select:focus+span {
  color: rgb(var(--matter-helper-theme));
}

.textBox>input:focus+span::after,
.textBox>textarea:focus+span::after,
.textBox>select:focus+span::after {
  transform: scale(1);
}

/* Disabled */
.textBox>input:disabled,
.textBox>textarea:disabled,
.textBox>select:disabled {
  border-bottom-color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38);
  color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38);
}

.textBox>input:disabled+span,
.textBox>textarea:disabled+span,
.textBox>select:disabled+span {
  color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38);
}

@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {

    .textBox>input,
    .textBox>input+span,
    .textBox>input+span::after,
    .textBox>textarea,
    .textBox>select,
    .textBox>textarea+span,
    .textBox>textarea+span::after,
    .textBox>select+span::after {
      transition-duration: 0.1s;
    }
  }
}

/*********************************************************************************/
/*                          TAB     CONTAINER                                    */
/*********************************************************************************/
.paneltab {
  width: 100%;
  /* padding: 1%; overflow-y: auto; */
}

.btnstab .btn_link {
  padding: 10px 5px !important;
  border-radius: 0px;
  border-right: solid 1px var(--rgbablack2);
}

/*********************************************************************************/
/*                          circle     loader                                    */
/*********************************************************************************/
.circle-loader {
  /*margin: 0 0 30px 10px;*/
  margin: 0;
  border: 2px solid var(--bgrgba);
  border-left-color: var(--verde);
  animation-name: loader-spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.circle-loader,
.circle-loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
}

.success {
  -webkit-animation: none;
  animation: none;
  border-color: var(--verde);
  transition: border opacity 500ms ease-out;
}

.success .status.draw:after {
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}

.success .status:after {
  opacity: 1;
  height: 4em;
  width: 2em;
  transform-origin: left top;
  border-right: 2px solid var(--verde);
  border-top: 2px solid var(--verde);
  content: "";
  left: 1.8095238095em;
  top: 4em;
  position: absolute;
}

.failed {
  -webkit-animation: none;
  animation: none;
  border-color: var(--rojo);
  transition: border opacity 500ms ease-out;
}

.failed .status {
  top: 50%;
  left: 50%;
  position: absolute;
}

.failed .status.draw:before,
.failed .status.draw:after {
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-name: crossmark;
}

.failed .status.draw:before {
  transform: scaleX(-1) rotate(45deg);
}

.failed .status.draw:after {
  transform: scaleX(-1) rotate(225deg);
}

.failed .status:before,
.failed .status:after {
  opacity: 1;
  height: 2em;
  width: 2em;
  transform-origin: left top;
  border-right: 2px solid var(--rojo);
  border-top: 2px solid var(--rojo);
  content: "";
  position: absolute;
}

.failed .status:before {
  left: calc(1.656854259em - 4.5px);
  top: calc(4px - 1.7536854259em);
}

.failed .status:after {
  left: calc(0.8656854259px - 1.536854259em);
  top: calc(1.656854259em - 2.8284271295px);
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }

  20% {
    height: 0;
    width: 2em;
    opacity: 1;
  }

  40% {
    height: 4em;
    width: 2em;
    opacity: 1;
  }

  100% {
    height: 4em;
    width: 2em;
    opacity: 1;
  }
}

@keyframes crossmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }

  20% {
    height: 0;
    width: 2em;
    opacity: 1;
  }

  40% {
    height: 2em;
    width: 2em;
    opacity: 1;
  }

  100% {
    height: 2em;
    width: 2em;
    opacity: 1;
  }
}

/*********************************************************************************/
/*                                    loader                                    */
/*********************************************************************************/
.ispinner {
  position: relative;
  margin: auto;
  width: 20px;
  height: 20px;
}

.ispinner .ispinner-blade {
  position: absolute;
  top: 6.5px;
  left: 8.5px;
  width: 2.5px;
  height: 6.5px;
  background-color: var(--bgprimary);
  border-radius: 1.25px;
  animation: iSpinnerBlade 1s linear infinite;
  will-change: opacity;
}

.ispinner .ispinner-white {
  position: absolute;
  top: 6.5px;
  left: 8.5px;
  width: 2.5px;
  height: 6.5px;
  background-color: var(--blanco);
  border-radius: 1.25px;
  animation: iSpinnerBlade 1s linear infinite;
  will-change: opacity;
}

.ispinner .ispinner-blade:nth-child(1),
.ispinner .ispinner-white:nth-child(1) {
  transform: rotate(45deg) translateY(-6.5px);
  animation-delay: -1.625s;
}

.ispinner .ispinner-blade:nth-child(2),
.ispinner .ispinner-white:nth-child(2) {
  transform: rotate(90deg) translateY(-6.5px);
  animation-delay: -1.5s;
}

.ispinner .ispinner-blade:nth-child(3),
.ispinner .ispinner-white:nth-child(3) {
  transform: rotate(135deg) translateY(-6.5px);
  animation-delay: -1.375s;
}

.ispinner .ispinner-blade:nth-child(4),
.ispinner .ispinner-white:nth-child(4) {
  transform: rotate(180deg) translateY(-6.5px);
  animation-delay: -1.25s;
}

.ispinner .ispinner-blade:nth-child(5),
.ispinner .ispinner-white:nth-child(5) {
  transform: rotate(225deg) translateY(-6.5px);
  animation-delay: -1.125s;
}

.ispinner .ispinner-blade:nth-child(6),
.ispinner .ispinner-white:nth-child(6) {
  transform: rotate(270deg) translateY(-6.5px);
  animation-delay: -1s;
}

.ispinner .ispinner-blade:nth-child(7),
.ispinner .ispinner-white:nth-child(7) {
  transform: rotate(315deg) translateY(-6.5px);
  animation-delay: -0.875s;
}

.ispinner .ispinner-blade:nth-child(8),
.ispinner .ispinner-white:nth-child(8) {
  transform: rotate(360deg) translateY(-6.5px);
  animation-delay: -0.75s;
}

.ispinner.ispinner-large {
  width: 35px;
  height: 35px;
}

.ispinner.ispinner-large .ispinner-blade {
  top: 11.5px;
  left: 15px;
  width: 5px;
  height: 12px;
  border-radius: 2.5px;
}

.ispinner.ispinner-large .ispinner-blade:nth-child(1) {
  transform: rotate(45deg) translateY(-11.5px);
}

.ispinner.ispinner-large .ispinner-blade:nth-child(2) {
  transform: rotate(90deg) translateY(-11.5px);
}

.ispinner.ispinner-large .ispinner-blade:nth-child(3) {
  transform: rotate(135deg) translateY(-11.5px);
}

.ispinner.ispinner-large .ispinner-blade:nth-child(4) {
  transform: rotate(180deg) translateY(-11.5px);
}

.ispinner.ispinner-large .ispinner-blade:nth-child(5) {
  transform: rotate(225deg) translateY(-11.5px);
}

.ispinner.ispinner-large .ispinner-blade:nth-child(6) {
  transform: rotate(270deg) translateY(-11.5px);
}

.ispinner.ispinner-large .ispinner-blade:nth-child(7) {
  transform: rotate(315deg) translateY(-11.5px);
}

.ispinner.ispinner-large .ispinner-blade:nth-child(8) {
  transform: rotate(360deg) translateY(-11.5px);
}

@keyframes iSpinnerBlade {
  0% {
    opacity: 0.85;
  }

  50% {
    opacity: 0.25;
  }

  100% {
    opacity: 0.25;
  }
}

.divflotante {
  bottom: 0;
  background: var(--bg);
  height: 100px;
  text-align: center;
  padding: 15px;
  position: fixed;
  width: 100%;
  box-sizing: content-box;
}

/*****************/
.div {
  width: calc(100% - 20px);
  padding: 10px;
  margin: auto;
  overflow: auto;
  height: calc(100vh - 60px);
}

/** TABCONTROL **/



.tabs {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs .tabbtn {
  padding: 10px 20px;
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--gris-borde);
  border-bottom: none;
  margin-right: 5px;
  border-radius: 0;
  transition: all 0.2s;
}

.tabs input[type="radio"]:checked+label {
  background: var(--bg);
  color: var(--primary);
  font-weight: bold;
  border-top: 1px solid var(--gris1);
  border-left: 1px solid var(--gris1);
  border-right: 1px solid var(--gris1);
  position: relative;
  z-index: 2;
}

.tabs .panel {
  display: none;
  width: 100%;
  order: 99;
  padding: 25px;
  background: var(--bg);
  border: 1px solid var(--gris1);
  margin-top: -1px;
}

.tabs input[type="radio"]:nth-of-type(1):checked~.panel:nth-of-type(1),
.tabs input[type="radio"]:nth-of-type(2):checked~.panel:nth-of-type(2),
.tabs input[type="radio"]:nth-of-type(3):checked~.panel:nth-of-type(3),
.tabs input[type="radio"]:nth-of-type(4):checked~.panel:nth-of-type(4),
.tabs input[type="radio"]:nth-of-type(5):checked~.panel:nth-of-type(5),
.tabs input[type="radio"]:nth-of-type(6):checked~.panel:nth-of-type(6) {
  display: block;
}


* {
  box-sizing: border-box;
}

/* 
.dt-scroll-sizing {

  display: none;
} */

.dataTables_scrollBody thead tr {
  visibility: collapse;
  height: 0px !important;
}