/**************************************
***            VARIABLES             ****
***************************************/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Rubik&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
}

body {
  font-family: "Open Sans", sans-serif, Arial, "Rubik", sans-serif;
}

.w5 {
  width: 5%;
}

.w10 {
  width: 10%;
}

.w20 {
  width: 20%;
}

.w30 {
  width: 30%;
}

.w33 {
  width: 32%;
}

.w35 {
  width: 35%;
}

.w50 {
  width: 50%;
}

.w65 {
  width: 65%;
}

.w70 {
  width: 70%;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

.w100 {
  width: 100%;
}

.wauto {
  width: auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.container-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.container2 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.container3 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.container4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

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

.flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.color-azul {
  color: #426DB3;
}

.color-rojo {
  color: #ff0000;
}

.color-gris {
  color: #4d4d4d;
}

.center {
  width: 96%;
  margin: auto;
}

.al-ct {
  text-align: center;
}

.al-lf {
  text-align: left;
}

.al-rg {
  text-align: right;
}

.pd5 {
  padding: 5px;
}

.pd10 {
  padding: 10px;
}

.pd15 {
  padding: 15px;
}

.pd20 {
  padding: 20px;
}

.v-middle {
  vertical-align: middle;
}

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

.mg5 {
  margin: 5px;
}

.mg10 {
  margin: 10px;
}

.mg20 {
  margin: 20px;
}

.mg-bt5 {
  margin-bottom: 5px;
}

.mg-bt10 {
  margin-bottom: 10px;
}

.mg-bt20 {
  margin-bottom: 20px;
}

.mg-lt20 {
  margin-left: 20px;
}

.mg-auto {
  margin: 0 auto;
}

.ico {
  margin: 0px 5px;
  vertical-align: middle;
  cursor: pointer;
  font-size: 14px;
}

.ico2 {
  line-height: 2;
}

.img-ico {
  width: 28px;
  cursor: pointer;
  margin: 0px 4px;
}

.icon,
.ion-android-delete {
  font-size: 1.4em;
}

.ion-alert-circled {
  color: orange;
}

.bold {
  font-weight: 600;
}

.mayu {
  text-transform: uppercase;
}

.hidden {
  display: none;
}

.mostrar {
  display: block;
}

.flex {
  display: flex;
}

.noborde {
  border: none !important;
}

.borderbotton {
  border-bottom: 1.5px solid #426DB3;
}

/**************************************
***            BOTONES             ****
***************************************/
.btn {
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid #426DB3;
  color: #fff;
  background: #426DB3;
  transition: all 0.2s linear;
  cursor: pointer;
  margin: 10px 2px;
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
}
.btn:hover {
  background: #1a4892;
}

.btn2 {
  border-radius: 8px;
  color: #fff;
  padding: 4px;
  font-size: 14px;
  cursor: pointer;
  margin: 2px;
}
.btn2:hover {
  color: #fff;
}

.btn3 {
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #808080;
  transition: all 0.2s linear;
  font-weight: bolder;
  cursor: pointer;
}

.btn-azul {
  background: #426DB3;
  border: 1px solid #426DB3;
  color: #fff;
}
.btn-azul:hover {
  background: #1a4892;
}

.btn-rojo {
  background: #ff0000;
  border: 1px solid #ff0000;
  color: #fff;
}
.btn-rojo:hover {
  background: #c50505;
}

.box-botones {
  margin: 16px 0px 25px;
  padding: 8px;
  background: #f2f2f2;
}

/**************************************
	***            titulos            ***
	*************************************/
.titulo {
  font-family: "Rubik", sans-serif;
  color: #000;
  font-size: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  border-bottom: 2px solid #426DB3;
}

.alerta-exito {
  background: rgba(133, 166, 45, 0.7);
  color: #426DB3;
  padding: 15px;
  border-radius: 2px;
  margin: 10px 2px;
}

.alerta-error {
  background: rgba(255, 0, 0, 0.4);
  color: #ff0000;
  padding: 15px;
  border-radius: 2px;
  margin: 10px 2px;
}

.obligatorio {
  color: #ff0000;
  margin-left: 10px;
}

hr {
  width: 100%;
  height: 2px;
  border: none;
  background: #426DB3;
}

.caja-titulo {
  background: #f2f2f2;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 16px;
}

form {
  border-collapse: collapse;
}
form input[type=text],
form input[type=file],
form input[type=password],
form input[type=email],
form input[type=number],
form input[type=date],
form select,
form textarea {
  padding: 16px 20px;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  vertical-align: middle;
  position: relative;
  outline: none;
}
form label {
  color: #000;
  font-weight: bold;
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}
form label.error {
  padding: 4px 15px;
  color: #ff0000;
  transition: all 0.3ms ease-in;
}
form input.error {
  border: 0.5px dotted #ff0000;
  transition: all 0.3ms ease-in;
}

/**************************************
	***            DATATABLES         ***
	*************************************/
.dataTable {
  margin-bottom: 20px;
}

.dataTables_length {
  display: inline-block;
  font-size: 16px;
}
.dataTables_length select {
  padding: 6px;
}

.dataTables_filter {
  display: inline-block;
}
.dataTables_filter input[type=search] {
  border: 1px solid #1a4892;
  padding: 7px;
  border-radius: 8px;
}

.dataTables_wrapper {
  margin-bottom: 30px;
}

table.dataTable thead {
  position: sticky;
  top: 0;
  background: #fff;
}

table.dataTable tbody tr:hover {
  background: #f2f2f2;
}
table.dataTable tbody tr:hover .eliminar {
  color: #4d4d4d;
}
table.dataTable tbody tr:hover .eliminar:hover {
  color: #ff0000;
}
table.dataTable tbody tr:hover .editar {
  color: #4d4d4d;
}
table.dataTable tbody tr:hover .editar:hover {
  color: #426DB3;
}
table.dataTable tbody tr:hover .contacto {
  color: #4d4d4d;
}
table.dataTable tbody tr:hover .contacto:hover {
  color: #000;
}
table.dataTable tbody tr:hover .direccion {
  color: #4d4d4d;
}
table.dataTable tbody tr:hover .direccion:hover {
  color: #426DB3;
}

.sorting_asc,
.sorting {
  text-transform: uppercase;
}

.ir-arriba {
  position: fixed;
  bottom: 5px;
  right: 5px;
  background-color: #ff0000;
  color: #fff;
  padding: 5px;
  border-radius: 2px;
  font-size: 18px;
  cursor: pointer;
  z-index: 20;
}
.ir-arriba .icon-arrow-up2 {
  font-weight: bold;
}
.ir-arriba:hover {
  box-shadow: 0px 0px 3px #426DB3;
}

table {
  margin-bottom: 20px;
}
table tr {
  margin-bottom: 10px;
}
table th,
table td {
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: auto;
  padding: 6px;
}
table th {
  border-bottom: 1px solid #1a4892;
  color: #1a4892;
}

.login .container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  transition: 0.5s all linear;
}
.login .container .box-login {
  text-align: center;
  position: relative;
  border-radius: 5px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  transition: 0.5s all linear;
}
.login .container .box-login img {
  margin-bottom: 10px;
}
.login .container .box-login hr {
  width: 100%;
  background: #1a4892;
  height: 1px;
}
.login .container .box-login #form {
  transition: 0.5s all linear;
}
.login .container .box-login .input {
  border: 1px solid #1a4892;
  padding: 12px 20px;
  border-radius: 8px;
  margin: 10px 0;
  background: transparent;
}
.login .container .box-login .inputEmail {
  position: relative;
}
.login .container .box-login .inputEmail #validaemail {
  font-style: italic;
}
.login .container .box-login #form.invalido .inputEmail::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(../img/ico/cancel-black.png);
  background-size: cover;
  z-index: 10;
}
.login .container .box-login #form.valido .inputEmail::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(../img/ico/check-black-circle.png);
  background-size: cover;
  z-index: 10;
}
.login .container .box-login .inputBox {
  position: relative;
  height: 40px;
}
.login .container .box-login .inputBox input {
  position: absolute;
  left: 0;
  top: 0;
}
.login .container .box-login .inputBox input:placeholder {
  color: #ccc;
}
.login .container .box-login .inputBox #toggle {
  position: absolute;
  right: 14px;
  cursor: pointer;
  font-size: 24px;
  top: 38%;
}
.login .container .box-login .btn {
  color: #fff;
  background: #426DB3;
  padding: 12px 20px;
  border: 1px solid #1a4892;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.5s all ease-in;
  letter-spacing: 1px;
  font-weight: bolder;
}
.login .container .box-login .btn:hover {
  box-shadow: 0px 0px 2px #1a4892;
}

.body_error hr {
  width: 100%;
  background: white;
}
.body_error a:hover {
  color: #426DB3;
  font-weight: bolder;
  margin-bottom: 35px;
}

/********************************************
****               MAIN                  ****
*********************************************/
.container-principal {
  width: 100%;
}
.container-principal .menu-top {
  color: #1a4892;
  position: relative;
  padding: 10px 0 3px;
  letter-spacing: 0.5px;
  font-size: 20px;
  background-color: #000;
  color: #fff;
}
.container-principal .menu-top .box-menutop {
  margin: auto;
}
.container-principal .menu-top .box-imglogo {
  padding: 10px 20px;
}
.container-principal .menu-top .box-imglogo .img-logo {
  width: 160px;
}
.container-principal .menu-top hr {
  margin: 3px 0;
  width: 100%;
}
.container-principal .menu-top .boton-perfil {
  padding: 15px;
}
.container-principal .menu-top .img-perfil {
  width: 26px;
  margin-right: 8px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.container-principal .menu-top .nombre-perfil:hover {
  text-decoration: underline;
}
.container-principal .menu-top .ico {
  font-size: 28px;
  vertical-align: middle;
  margin-right: 12px;
}
.container-principal .menu-top .perfil {
  position: absolute;
  display: none;
  font-size: 16px;
  width: 320px;
  top: 75px;
  right: 2px;
  z-index: 2;
  background-color: #f2f2f2;
  border-radius: 8px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}
.container-principal .menu-top .perfil .box-perfil {
  height: 170px;
  padding: 10px;
  color: #1a4892;
}
.container-principal .menu-top .perfil .box-perfil .nombrePerfil {
  font-size: 20px;
}
.container-principal .menu-top .perfil .box-perfil img {
  border-radius: 50%;
  width: 90px;
  max-width: 65px;
  border: 2px solid #426DB3;
}
.container-principal .menu-top .perfil .box-perfil2 {
  padding: 10px;
  border-radius: 0 0 8px 8px;
  display: flex;
  justify-content: center;
}
.container-principal .menu-top .perfil .box-perfil2 a {
  background: #fff;
  color: #1a4892;
  padding: 8px 24px;
  border: 1px solid #1a4892;
  border-radius: 8px;
}
.container-principal .menu-top .perfil .box-perfil2 a:hover {
  text-decoration: underline;
}
.container-principal .main {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: calc(100vh - 74px);
}
.container-principal .main .aside {
  background: #426DB3;
  width: 100%;
  padding: 8px 0;
  color: #fff;
}
.container-principal .main .aside .navbar {
  transition: all 0.5s ease;
  position: relative;
}
.container-principal .main .aside .navbar .ico {
  font-size: 28px;
}
.container-principal .main .aside .navbar .lista-menu {
  list-style: none;
  width: 100%;
  margin: 60 auto 20px;
  border-radius: 4px;
}
.container-principal .main .aside .navbar .lista-menu .link {
  display: block;
  cursor: pointer;
  padding: 15px;
  position: relative;
  transition: all 0.5s ease;
  border: 1px solid transparent;
}
.container-principal .main .aside .navbar .lista-menu .link .ico {
  margin-left: 0;
  margin-right: 10px;
}
.container-principal .main .aside .navbar .lista-menu .link .ion-android-arrow-dropdown {
  position: absolute;
  right: 12px;
  left: auto;
}
.container-principal .main .aside .navbar .lista-menu .link:hover {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.3);
}
.container-principal .main .aside .navbar .lista-menu .active {
  background-color: #fff;
}
.container-principal .main .aside .navbar .lista-menu .submenu {
  display: none;
  background: #fff;
  font-size: 14px;
}
.container-principal .main .aside .navbar .lista-menu .submenu li {
  border-bottom: 1px solid #4b4a5e;
}
.container-principal .main .aside .navbar .lista-menu .submenu li a {
  color: #426DB3;
  padding: 12px;
  padding-left: 42px;
  transition: all 0.5s ease;
  display: block;
}
.container-principal .main .aside .navbar .lista-menu .submenu li a:hover {
  color: #fff;
  background: #426DB3;
}
.container-principal .main .aside .navbar .lista-menu li.open .link {
  color: #fff;
}
.container-principal .main .section-container {
  padding: 20px 32px;
}
.container-principal .main .section-container .box-formulario {
  border: 1px solid #4d4d4d;
  width: 100%;
  border-radius: 8px;
}
.container-principal .main .section-container .box-formulario .title {
  width: 100%;
  background-color: #808080;
  padding: 20px 10px;
  margin-bottom: 24px;
}
.container-principal .main .section-container .box-formulario .box-input {
  width: 50%;
}
.container-principal .main .section-container .tabla-resultados {
  margin: 20px 0px;
  font-size: 14px;
  width: 100%;
}
.container-principal .main .section-container .tabla-resultados .header-tabla {
  background-color: #426DB3;
  color: #fff;
}
.container-principal .main .section-container .box-card {
  background-color: #f2f2f2;
  border-radius: 8px;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 1px 2px 1px lightslategrey;
}
.container-principal .main .section-container .box-card .titulo {
  font-size: 16px;
  font-weight: 700;
}
.container-principal .main .section-container .box-card .box-formulario {
  padding: 30px;
  border: none;
}
.container-principal .main .section-container .box-card .box-formulario .label {
  margin-bottom: 8px;
}
.container-principal .box-informativo {
  background: whitesmoke;
  padding: 6px;
  margin-bottom: 20px;
}
.container-principal .retornos {
  padding: 10px 5px;
  color: #fff;
  border-radius: 8px;
  margin: 5px 0px;
}
.container-principal .retornos .activo {
  color: #426DB3;
  font-weight: bolder;
}

/**************************************
	***            MODALES                 ***
	************************************/
.modal {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  display: none;
  top: 0;
  left: 0;
  padding: 8px 0;
  z-index: 10;
}
.modal .body-modal {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.modal .body-modal .formulario,
.modal .body-modal #form_eliminar,
.modal .body-modal .frmbody {
  width: 800px;
  background: white;
  padding: 32px 20px;
  border-radius: 8px;
  text-align: center;
  overflow: auto;
  box-shadow: 0px 1px 10px #000;
}
.modal .body-modal .formulario hr,
.modal .body-modal #form_eliminar hr,
.modal .body-modal .frmbody hr {
  width: 100%;
  margin: 3px auto 10px;
  height: 1px solid #4d4d4d;
}
.modal .body-modal .formulario label,
.modal .body-modal #form_eliminar label,
.modal .body-modal .frmbody label {
  text-align: left;
}
.modal .body-modal .formulario .w50,
.modal .body-modal #form_eliminar .w50,
.modal .body-modal .frmbody .w50 {
  margin: 0 5px;
  width: calc(50% - 10px);
}
.modal .body-modal #form_eliminar span {
  font-weight: 500;
  margin: 15px 0;
}
.modal .body-modal #form_eliminar h2 {
  margin-bottom: 5px;
}
.modal .body-modal .box-nombre {
  padding: 15px;
  color: #1a4892;
  letter-spacing: 0.5px;
  font-size: 18px;
  font-weight: 600;
}

/**************************************
	***            FOOTER                 ***
	************************************/
footer {
  padding: 20px;
  display: flex;
  color: #1a4892;
  justify-content: space-between;
}
footer a {
  text-decoration: none;
  color: inherit;
}
footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .minheight85 {
    min-height: auto;
  }
  .main .aside {
    max-width: 100%;
    width: 100%;
    padding: 5px 15px;
  }
  .main hr {
    width: 100%;
  }
}/*# sourceMappingURL=siststyle.css.map */