W/* ==== ESTILOS DASHBOARD ==== */
/* ==== General ==== */
:root{ 
  /* ==== Paleta de colores ==== */
  --color-uno: #1c2e72; /* COLOR AZUL PRYMARY */
  --color-dos: #8298dd; /* COLOR AZUL SECONDARY */
  --color-tres: #2775f6; /* COLOR AZUL TERCIARY */
  --color-cuatro: #f5365c; /* COLOR ANARANJADO */
  --fondo-dm: #213263; /* COLOR AZUL MODO OSCURO FONDO CARDS */
  --fondo:#213263; /* COLOR AZUL MAS OSCURO MODO OSCURO*/

  /* ==== Tipografía ==== */
  --fuente-titulos:'Manrope', sans-serif;
  --fuente-parrafos:'Open Sans', sans-serif;
}

body { 
  position: relative;
  overflow: auto!important;
  font-family: var(--fuente-parrafos)!important; 
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: var(--fuente-titulos)!important;
}

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Botones general ==== */
.btn.btn-primary {
  background-image: linear-gradient(to  left, #fc5833, #f5365c)!important;
  padding: .9rem 1.2rem;
  background-color: var(--color-cuatro)!important;
  font-family: var(--fuente-parrafos)!important;
  transition: 300ms ease all;
  box-shadow: none;
  color: #fff;
  margin-bottom: 1rem!important;
}
.btn.btn-primary:hover {
  background-image: linear-gradient(to  left, #fc5833, #f5365c)!important;
  background-color: var(--color-uno)!important;
  transition: 300ms ease all;
  box-shadow: none;
}
.btn.btn-info {
  background-image: none!important;
  background-color: var(--color-tres)!important;
  padding: .8rem 1.2rem;
  font-family: var(--fuente-parrafos)!important;
  transition: 400ms ease all;
  box-shadow: none;
  color: #fff;
}
.btn-info:hover {
  background-image: none!important;
  background-color: #0a62ee!important;
  font-family: var(--fuente-parrafos)!important;
  transition: 300ms ease all;
  box-shadow: none!important;
}
.btn.btn-secondary {
  padding: .8rem 1.2rem;
  margin: 0 .2rem!important;
  background-image: none!important;
  background-color: #253777!important;
  font-family: var(--fuente-parrafos)!important;
  transition: 300ms ease all;
  box-shadow: none;
  color: #fff;
}
.btn.btn-secondary:hover {
  background-color: #374d9c!important;
  transition: 300ms ease all;
  box-shadow: none!important;
  color: #fff;
}
.btn.btn-danger {
  padding: .8rem 1.2rem;
  margin: 0 .2rem!important;
  background-image: none!important;
  background-color: var(--color-cuatro)!important;
  font-family: var(--fuente-parrafos)!important;
  transition: 300ms ease all;
  box-shadow: none;
  color: #fff;  
}

.custom-toggle input:checked+.custom-toggle-slider:before { background: #fff!important; }
.custom-toggle input:checked+.custom-toggle-slider {
  border: 1px solid var(--color-cuatro);
  background-color: var(--color-cuatro);
}
/* ==== Fin Botones general ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Estilos SIDEBAR Izquierdo ==== */
/* ==== Escudo Municipal  ==== */
.logo { margin: 1rem 0; }
.logo-mini::after {
  content:"";
  position: absolute;
  background-image: url(../img/escudo-b.svg);
  background-repeat: no-repeat;
  width: 100%;
  height: 52px;
  top: 0px;
  left: 22px;
}

/* ==== SIDEBAR ==== */
.perfect-scrollbar-on .sidebar { height: 80%!important; }
@media (max-width: 786px) {.perfect-scrollbar-on .sidebar { height: 100%!important; } }
.ps__thumb-x { width: 0px!important; display:none!important; visibility: hidden!important;}
.ps__rail-x {
  height: 15px;
  bottom: -43px;
}
.ps--active-x>.ps__rail-x, .ps--active-y>.ps__rail-y { display: none!important; }
/* ==== SIDEBAR Azul ==== */
.off-canvas-sidebar[data=blue], .sidebar[data=blue] {
  background: var(--color-uno);
  border-radius: .4rem!important;
  -webkit-box-shadow: 0px 20px 26px -12px #191a429c;
  -moz-box-shadow: 0px 20px 26px -12px #191a429c;
  box-shadow: 0px 20px 26px -12px #191a429c;
  background-color: #0045ff!important;
}
.main-panel[data=blue] { border-top: 0px solid #0045ff;}
.sidebar[data=blue]:before { border-bottom-color: #0045ff; }  

/* ==== SIDEBAR Naranjo ==== */
.off-canvas-sidebar[data=orange], .sidebar[data=orange] {
  background: var(--color-cuatro);
  border-radius: .4rem!important;
  background-color: var(--color-cuatro)!important;
  -webkit-box-shadow: 0px 20px 26px -12px #191a429c;
  -moz-box-shadow: 0px 20px 26px -12px #191a429c;
  box-shadow: 0px 20px 26px -12px #191a429c;
}
.main-panel[data=orange] { border-top: 0px solid var(--color-cuatro); }
.sidebar[data=orange]:before {  border-bottom-color: var(--color-cuatro); }
/* ==== Fin Estilos SIDEBAR  ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* Fondo Contenedor General */
/* ==== Modo Oscuro ==== */
.main-panel {
  position: relative;
  /*background: rgb(57,52,218);
  background: linear-gradient(141deg, rgb(57, 52, 206) 10%, rgba(34,30,151,1) 20%, rgba(18,34,75,1) 44%, rgba(8,17,42,1) 74%);*/
  background: url(../img/fondo-sistema.jpg) !important;
  background-position: center;
  background-repeat:no-repeat;
  background-size: cover;
  transition: 400ms all ease;
}
.card {
  border-radius: .4rem;
  padding: 1rem;
  /*background: #162a59;*/
  background: var(--fondo);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0);
}
.card .h4 {
  font-weight: 900;
  color: #fff;
  font-size: 1.3rem;
}
.card-stats .numbers .card-category { color: white; }

/* ==== Modo Claro ==== */
.white-content .main-panel {
  background:  #ededed!important;
  background: url(../img/fondo-sistema-wm-.jpg) !important;
  background-position: center!important;
  background-repeat:no-repeat!important;
  background-size: cover!important;
  transition: 400ms all ease;
}

.white-content .card:not(.card-white) {
  background: #fafcff;
  -webkit-box-shadow: 5px 5px 90px -15px #5e73c031;
  -moz-box-shadow: 5px 5px 90px -15px #5e73c031;
  box-shadow: 5px 5px 90px -15px #5e73c031;
}
.card:not(.card-pricing).card-stats hr { border-color: rgba(175, 195, 248, 0.1); }
.white-content .card:not(.card-pricing).card-stats hr { border-color: rgba(175, 195, 248, 0.3); }

/* ==== Modo Claro Card interior textos ==== */
.white-content .card:not(.card-white) label:not(.btn) {
  color: var(--color-uno);
  font-size: .9rem;
}
/* Fin Fondo Contenedor General */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== ESTILOS MODAL ====*/
/* ==== Modal Modo Claro ====*/
.modal-content {  
  background: linear-gradient(380deg, rgba(214, 220, 247, 0.2) 5%, rgba(131, 154, 255, 0) 30%) ;
  background-image: url(../img/modal-wm.svg);
  background-color: #fff;
  padding: 1rem;
  background-position: top right;
  background-size: 500px auto;
  background-repeat:no-repeat;  
  transition: 400ms all ease;
  border-radius: 1.2rem;
  z-index: 999;
  -webkit-box-shadow: 0px 50px 60px -10px #3e5cac5d;
  -moz-box-shadow: 0px 50px 60px -10px #3e5cac5d;
  box-shadow: 0px 50px 60px -10px #3e5cac5d;
}
.modal-content .modal-header .modal-title {
  font-size: 1.6rem!important;
  font-weight: bolder!important;
  color: var(--color-uno);
  border-left: 8px solid var(--color-dos);
  border-radius: .18rem;
  padding: 0 1rem;
  margin: .8rem 0;
}
.modal-content .bg-primary {
  border-top-right-radius: 1.2rem;
  border-top-left-radius: 1.2rem;
  background-color: #ffffff00!important;
}
.white-content .table>tbody>tr>td{
  border: none;
  padding: .5rem 0;
  border-bottom: 1px solid;
  border-color: rgba(131, 154, 221, 0.2);
  padding: .6rem;
}
.modal-content .modal-footer button {
  padding: .9rem 1.6rem!important;
  margin: 0 0 1rem;
  background: var(--color-cuatro)!important;
  font-family: var(--fuente-parrafos)!important;
  text-transform: uppercase;
  transition: 300ms ease all;
}
.modal-content .modal-footer button:hover {
  transition: 300ms ease all;
  background: var(--color-cuatro)!important;
}
.white-content .table>tbody>tr>td {
  font-size: .8rem!important;
  padding: .6rem!important;
  color: var(--color-uno) !important;
  /*border-right: 1px solid #758acf2c;*/
}

.table>thead>tr>td {
  font-size: .8rem!important;
  font-weight: 900;
}

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Modal Modo Oscuro ====*/
.modal.modal-black .modal-content {
  background: linear-gradient(380deg, rgba(37, 55, 136, .4) 5%, rgba(37, 55, 136, 0) 30%) ;
  background-image: url(../img/modal-.svg) ;
  background-color: #111d49!important;
  padding: 1rem;
  background-position: top right;
  background-size: 500px auto;
  background-repeat:no-repeat;
  transition: 400ms all ease;
  border: 1px solid var(--color-uno);
  border-radius: 1.2rem;
  z-index: 999;
  -webkit-box-shadow: 0px 30px 90px -20px #050e29fd;
  -moz-box-shadow: 0px 30px 90px -20px #050e29fd;
  box-shadow: 0px 30px 90px -20px #050e29fd;
}
.modal.modal-black .modal-content .modal-header .modal-title, .modal.modal-black .modal-content .modal-header .title {
  font-size: 1.6rem!important;
  font-weight: bolder!important;
  color: hsla(0, 0%, 100%, 1);
  border-left: 8px solid var(--color-dos);
  border-radius: .18rem;
  padding: 0 1rem;
  margin: .8rem 0;
}
.modal .modal-header .close { color: hsla(0, 0%, 100%, 1); }
.modal.modal-black .modal-content .bg-primary {
  border-top-right-radius: 1.2rem;
  border-top-left-radius: 1.2rem;
  background-color: #111d4900!important;
}
.modal.modal-black .modal-content .modal-footer button {
  padding: .9rem 1.6rem;
  margin: 0 0 1rem;
  background: var(--color-cuatro);
  font-family: var(--fuente-parrafos)!important;
  transition: 300ms ease all;
}
.modal.modal-black .modal-content .modal-footer button:hover {
  transition: 300ms ease all;
  background: var(--color-tres)!important;
}
.modal.modal-black .modal-content .table>tbody>tr>td{
  border: none;
  border-bottom: .8px solid;
  border-color: rgba(131, 154, 221, 0.1);
  padding: .7rem;
}
/* ==== Fin Modal Modo Oscuro ====*/
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

.table>tbody>tr>td { color: hsla(0, 0%, 100%, 1) !important; }

/* ==== Mensaje Alerta Modals ==== */
.alert, .alert .alert-link {
  width: 100%!important;
  background-color: #1c2f72;
  display: flex;
  flex-wrap: wrap;
  font-size: .8rem!important;
  gap: 12px;
}
.alert strong {
  color: var(--color-tres);
  font-weight: bolder;
}
/* ==== Fin ESTILOS MODAL ====*/
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ====  ESTILOS MENSAJES ====  */
/* ====  Mensaje Error ====  */
.swal2-icon-error{
  background: url(../img/icon-error-dm.svg)!important;
  background-color: #fff!important;
  background-position: right!important;
  background-size: cover!important;
  background-repeat:no-repeat!important;
  border-radius: 1.4rem!important;
  padding: 1rem!important;
  transition: 400ms all ease;
  -webkit-box-shadow: 30px 30px 140px -10px #060d25!important;
  -moz-box-shadow: 30px 30px 140px -10px #060d25!important;
  box-shadow: 30px 30px 140px -10px #060d25!important;
}
.white-content .swal2-icon-error{
  background: url(../img/icon-error.svg)!important;
  background-color: #fff!important;
  background-position: right!important;
  background-size: cover!important;
  background-repeat:no-repeat!important;
  border-radius: 1.4rem!important;
  padding: 1rem!important;
  transition: 400ms all ease;
  -webkit-box-shadow: 30px 30px 140px -10px #060d25!important;
  -moz-box-shadow: 30px 30px 140px -10px #060d25!important;
  box-shadow: 30px 30px 140px -10px #060d25!important;
}
/* ====  Fin Mensaje Error ====  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ====  Mensaje Exito ====  */
.swal2-icon-success{
  background: url(../img/icon-success-dm.svg)!important;
  background-color: #fff!important;
  background-position: right!important;
  background-size: cover!important;
  background-repeat:no-repeat!important;
  border-radius: 1.4rem!important;
  padding: 1rem!important;
  transition: 400ms all ease;
  -webkit-box-shadow: 30px 30px 140px -10px #060d25!important;
  -moz-box-shadow: 30px 30px 140px -10px #060d25!important;
  box-shadow: 30px 30px 140px -10px #060d25!important;
}
.white-content .swal2-icon-success{
  background: url(../img/icon-success.svg)!important;
  background-color: #fff!important;
  background-position: right!important;
  background-size: cover!important;
  background-repeat:no-repeat!important;
  border-radius: 1.4rem!important;
  padding: 1rem!important;
  transition: 400ms all ease;
  -webkit-box-shadow: 30px 30px 140px -10px #060d25!important;
  -moz-box-shadow: 30px 30px 140px -10px #060d25!important;
  box-shadow: 30px 30px 140px -10px #060d25!important;
}
/* ====  Fin Mensaje Exito ====  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ====  Mensaje Advertencia ====  */
.swal2-popup{
  background: url(../img/icon-warning.svg)!important;
  background-color: var(--color-uno)!important;
  background-position: top right!important;
  /*background-size: 450px auto!important;*/
  background-repeat:no-repeat!important;
  border-radius: 1.4rem!important;
  background-size: cover!important;
  padding: 1rem!important;
  transition: 400ms all ease;
  -webkit-box-shadow: 30px 30px 140px -10px #060d25!important;
  -moz-box-shadow: 30px 30px 140px -10px #060d25!important;
  box-shadow: 30px 30px 140px -10px #060d25!important;
}
.white-content .swal2-popup{
  background: url(../img/icon-warning.svg)!important;
  background-color: #fff!important;
  background-position: top right!important;
  /*background-size: 450px auto!important;*/
  background-size: cover!important;
  background-repeat:no-repeat!important;
  border-radius: 1.4rem!important;
  padding: 1rem!important;
  transition: 400ms all ease;
  -webkit-box-shadow: 30px 30px 140px -10px #060d25!important;
  -moz-box-shadow: 30px 30px 140px -10px #060d25!important;
  box-shadow: 30px 30px 140px -10px #060d25!important;
}.swal2-popup{
  background: url(../img/icon-warning-dm.svg)!important;
  background-color: var(--color-uno)!important;
  background-position: top right!important;
  /*background-size: 450px auto!important;*/
  background-size: cover!important;
  background-repeat:no-repeat!important;
  border-radius: 1.4rem!important;
  padding: 1rem!important;
  transition: 400ms all ease;
  -webkit-box-shadow: 30px 30px 140px -10px #060d25!important;
  -moz-box-shadow: 30px 30px 140px -10px #060d25!important;
  box-shadow: 30px 30px 140px -10px #060d25!important;
}

.swal2-actions {
  width: 100%!important;
  justify-content: flex-start!important;
  padding: 0 1.6rem 0!important;
}
.swal2-icon-error .swal2-title{ padding: 0 .8em 0!important; }
.swal2-title {
  width: 76%;
  text-align: left!important; 
  font-family: var(--fuente-titulos)!important;
  color: #fff!important;
  font-weight: 800!important;
  font-size: 1.8rem!important;
  margin-top: 1.4rem!important;
  padding: 0 .6em 0!important;
}.white-content .swal2-title { color: #091438!important; }
.swal2-html-container { 
  text-align: left!important;
  font-size: 1rem!important;
  width: 62%;
  font-family: var(--fuente-parrafos)!important;
  color: #fff!important;
}.white-content .swal2-html-container {  color: #091438!important; }
.swal2-icon{ visibility: hidden; }
.swal2-styled.swal2-confirm {
  padding: .5rem 1.6rem;
  background-color: var(--color-tres)!important;
  font-family: var(--fuente-parrafos)!important;
  margin-bottom: 1.2rem!important;
  transition: 400ms ease all!important;
}
.swal2-styled.swal2-confirm:hover {
  transition: 400ms ease all!important;
  background-color: var(--color-cuatro)!important;
}
.swal2-styled.swal2-cancel {
  padding: .5rem 1.4rem;
  margin-bottom: 1.2rem!important;
  background-color: var(--color-cuatro)!important;
  transition: 400ms ease all!important;
}
.swal2-styled.swal2-cancel:hover {
  background-color: var(--color-tres)!important;
  transition: 400ms ease all!important;
}
/* ====  Fin Mensaje Advertencia ====  */
/* ====  Fin ESTILOS MENSAJES ====  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/* ==== Card Estado Inicio ==== */
.white-content .card-estatus {
  background: linear-gradient(45deg, rgba(28,46,114,1) 41%, rgba(57,81,168,1) 100%)!important;
  border-radius: 1.2rem;
  padding: 1rem;
}
.card-estatus {
  background: linear-gradient(45deg, rgb(21, 37, 87) 41%, rgb(49, 72, 153) 100%)!important;
  border-radius: 1.2rem;
  padding: 1rem;
}
.card-estatus :is(h1, h2, h3, h4, h5, h6,p){ color: #fff!important; font-weight: 600;}
.white-content .card:not(.card-pricing).card-stats .card-category, .white-content .card:not(.card-pricing).card-stats .stats {
  color: white;
}
/* ================================================================ */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ====  Estilos fixed dropdown izquierdo ==== */
.fixed-plugin { width: 50px; }
.fixed-plugin .fa-cog { font-size: 1.6rem; }
.fixed-plugin .dropdown-menu {
  background: #1a254e!important;
  right: 64px;
  top: -50px !important;
  border-radius: .3rem;
  padding: 1.6rem!important;
  transition: 400ms ease all;
  box-shadow: 0px 30px 90px -20px #060d2593!important;
  text-align: left!important;
}
.fixed-plugin .dropdown-menu .header-title {
  text-align: left!important;
  font-size: .9rem;
}
.fixed-plugin .dropdown-menu .badge-colors { text-align: left!important; }
.fixed-plugin .dropdown-menu .adjustments-line{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0rem;
}
.fixed-plugin .dropdown-menu .adjustments-line .label-switch { padding-left: 1rem; padding-right: 1rem; }
.fixed-plugin .adjustments-line .togglebutton .label-switch {
  position: relative;
  left: -10px;
  font-size: .6rem;
  color: #fff;
}
.bootstrap-switch { 
  background: rgb(89, 95, 156)!important;
  transition: 400ms ease all;
}
.bootstrap-switch-off:before { 
  background: rgb(89, 95, 156)!important;
  transition: 400ms ease all;
}
.badge-info { background-color: var(--color-tres); }
.badge-warning { background-color: var(--color-cuatro); }
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
  background-color: hsla(0, 0%, 100%, 0.9)!important;
}
/* ====  Fin Estilos fixed dropdown izquierdo ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== TABLAS ====  */
/* ==== Tablas Fomulario General ====  */
.table tbody tr:nth-child(odd) {
  padding: 5rem!important;
  /*background-color: rgba(107, 121, 163, 0.1);*/
  transition: 300ms ease all;
}

.white-content .table tbody tr:nth-child(even) {
  background-color: rgba(85, 112, 194, 0.15);
  transition: 300ms ease all;
}
.table tbody tr:nth-child(even) {
  background-color: rgba(82, 107, 180, 0.1);
  transition: 300ms ease all;
}

.table tbody tr:hover {
  cursor: pointer;
  color: #fff!important;
  background-color: rgba(17, 23, 39, 0.2);
  transition: 300ms ease all; 
}
.white-content .table tbody tr:hover {
  cursor: pointer;
  background-color: rgba(48, 76, 153, 0.2);
  transition: 300ms ease all; 
}
/* ====  FIn TABLAS ====  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/* ==== Paginación Fomulario ====  */
.pagination .page-item.active>.page-link, .pagination .page-item.active>.page-link:focus, .pagination .page-item.active>.page-link:hover {
  background-image: linear-gradient(to left, #fb6340, #f5365c);
  background: var(--color-cuatro);
  color:#fff!important;
}
.white-content .page-link { color:var(--color-uno)!important; }

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Estados iconos tablas ====  */
.btn-warning.btn-simple {
  color: var(--color-cuatro);
  border: 0px!important;
  border-color: var(--color-cuatro);
  background: transparent;
}
.btn-warning.btn-simple:hover {
  color: #fff!important;
  border-color: var(--color-cuatro)!important;
  background: var(--color-cuatro)!important;
}

.btn-info.btn-simple{
  color: var(--color-tres);
  border: 0px!important;
  border-color: var(--color-tres);
  background: transparent!important;
}
.btn-info.btn-simple:hover {
  color: #fff!important;
  border-color: var(--color-tres)!important;
  background: var(--color-tres)!important;
}

.btn-success.btn-simple {
  color: #32ad8c;
  border: 0px!important;
  border-color: #32ad8c;
  background: transparent;
}
.btn-success.btn-simple:hover {
  color: #fff!important;
  border: 0px!important;
  border-color: #32ad8c!important;
  background: #32ad8c!important;
}

.custom-toggle input:checked+.custom-toggle-slider { border: 1px solid var(--color-cuatro); }
.custom-toggle input:checked+.custom-toggle-slider:before {
  background: var(--color-cuatro);
  transform: translateX(1.625rem);
}

.folder-tag a { padding:.9rem!important; }

/* ==== Icono Cerrar Modal ==== */
.cerrar{
  cursor:pointer;
  font-size: 1.5rem;
  color: #000000;
}
.cerrar:focus,
.cerrar:hover {
  color: rgba(245, 14, 14, 0.9);
  opacity: 1 !important;
}

/* ==== Input disabled ==== */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  color: var()!important;
  background-color: #fff!important;
  border: none!important;
  font-weight: bolder;
}
.white-content .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  color: var(--color-cuatro)!important;
  background-color: rgba(92, 125, 233, 0.1)!important;
  border: none!important;
  font-weight: normal!important;
}
/* ==== Fin Estados ====  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/* ==== Scroll tablas ==== */
.modal-body .table-container{
  overflow-y: auto; 
  max-height: 500px;
}

/* width */
::-webkit-scrollbar { width: 8px; }  
/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 5px grey; */
  background-color: #8299dd46;
  border-radius: 10px;
}   
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-cuatro); 
  border-radius: 10px;
}  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: var(--color-cuatro); }
 /* ================================================================ */


 /* ==== Distancia Modal con contenido grande ==== */
.modal.show .modal-large { transform: translateY(0%)!important;}


/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== FORMULARIO ====  */
/* ==== Formulario Modo Claro====  */
.form-control {
  color:#fff;
  font-family: var(--fuente-parrafos);
  border-color: rgba(29, 37, 59, 0); 
  background-color: rgba(130, 153, 221, 0.1);
  transition: 300ms ease all;
}
.white-content .form-control {
  color: var(--color-uno);
  font-family: var(--fuente-parrafos);
  border-color: rgba(29, 37, 59, 0); 
  background-color: rgba(130, 153, 221, 0.12);
  transition: 300ms ease all;
}

.form-control[readonly] {
  font-family: var(--fuente-parrafos);
  border-color: rgba(29, 37, 59, 0)!important; 
  background-color: rgba(130, 153, 221, 0.1)!important;
  opacity: 1;
  transition: 300ms ease all;
}
.form-control::placeholder { color: #fff!important; }
.form-control:disabled, .form-control[readonly] {
  font-family: var(--fuente-parrafos);
  border-color: rgba(29, 37, 59, 0)!important; 
  background-color: rgba(130, 153, 221, 0.1)!important;
  opacity: 1;
  transition: 300ms ease all;
}
.white-content .form-control[readonly] {
  color: var(--color-uno);
  font-family: var(--fuente-parrafos);
  border-color: rgba(29, 37, 59, 0)!important; 
  background-color: rgba(130, 153, 221, 0.12)!important;
  opacity: 1;
  transition: 300ms ease all;
}
.white-content .form-control::placeholder { color: var(--color-uno)!important; }
.form-control:hover {
  color: #fff;
  font-family: var(--fuente-parrafos);
  border-color: var(--color-tres);
  background-color: rgba(130, 153, 221, 0.04);
  transition: 300ms ease all;
}
.white-content .form-control:hover {
  color: var(--color-uno);
  font-family: var(--fuente-parrafos);
  border-color: #e04ec9;
  background-color: rgba(130, 153, 221, 0.04);
  transition: 300ms ease all;
}

.white-content .modal-footer .btn {
  padding: .5rem .8rem .5rem .4rem;
  margin-top: 1rem ;
  border-radius: 0.4285rem;
  background-size: 210% 210%;
  background-color: var(--color-tres)!important;
  transition: 300ms ease all;
  box-shadow: none;
  color: #fff;
}
.input-group-append, .input-group-prepend .input-group-text {
  border: 1px solid #2b355300;
  border-radius: 0.4285rem;
  margin: 0px!important;
  padding: 1rem;
}
.input-group-append .tim-icons { color: #fff!important; }
button, input, optgroup, select, textarea { font-family: var(--fuente-parrafos)!important; }
.invalid-feedback {
  width: 100%;
  margin-top: 0.1rem;
  color: var(--color-cuatro);
}

.text-danger {
  font-size: .75rem;
  padding-left: .5rem;
  color: var(--color-cuatro);
}

.form-check-radio input[type=radio]:checked+.form-check-sign:before { border-color: var(--color-cuatro); }
.form-check-radio input[type=radio]:checked+.form-check-sign:after {
  background-color: var(--color-cuatro); 
  border-color: var(--color-cuatro); 
}
/* ==== Fin FORMULARIO ====  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Estilos selectores  ====  */
.white-content .btn.dropdown-toggle[data-toggle=dropdown]{
  color: var(--color-uno);
  font-family: var(--fuente-parrafos);
  border-color: rgba(29, 37, 59, 0); 
  background-color: rgba(130, 153, 221, 0.12)!important;
  transition: 300ms ease all;
}

.btn.dropdown-toggle[data-toggle=dropdown]{
  color: #fff;
  font-family: var(--fuente-parrafos);
  border-color: rgba(29, 37, 59, 0); 
  background-color: rgba(130, 153, 221, 0.12)!important;
  transition: 300ms ease all;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: rgba(130, 153, 221, 0.3);
}
/* ==== Fin Estilos selectores  ====  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */


/* OCULTAR BOTON DE EDICION EN MODAL "detalleRevision" PARA QUIENES NO TIENEN PERMISOS */
.loading {
  position: fixed;
  z-index: 9999999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* SPINNER 2.0 */
.spinner {
  position: fixed;
  height: 50px;
  width: 50px;
  background: transparent;
  border: 3px solid #1c2e72;
  border-top: transparent;
  border-radius: 50%;
  animation: anima-spin 0.8s linear infinite;
}

@keyframes anima-spin {
0% {
  border: 4px solid #1c2e72;
  border-top: transparent;
  border-left: transparent;
  transform: rotate(0deg);
}

50% {
  border: 4px solid #c300ff;
  border-top: transparent;
  border-left: transparent;
  transform: rotate(270deg);
}

100% {
  border: 4px solid #1c2e72;
  border-top: transparent;
  border-left: transparent;
  transform: rotate(360deg);
}
}

.loading .spinner {
  top: 50%;
  right: 50%;
  bottom: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  }

  
/*
.spinner {
position: fixed;
z-index: 9999999;
font-size: 5px;
width: 11em;
height: 11em;
border-radius: 50%;
/*background: transparent;
background: linear-gradient(to right, #2775f6 5%, rgba(4, 80, 204, 0) 52%);
animation: spin 1.4s infinite linear;
box-shadow: 0px 0px 10px 0px #010f427c;
}
.spinner:before {
content: '';
width: 50%;
height: 50%;
background: #2775f6;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
}
.spinner:after {
background: #0d1531;
box-shadow: 0px 0px 40px 0px #010f42f6;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.loading .spinner {
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}

@-webkit-keyframes spin {
0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
}*/
/* ====================================================== */


/* ====  Mensaje Lightbox Opacidad ====  */
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
  background: rgba(5, 8, 20, 0.7)!important;
  transition: 300ms all ease;
}

/* ==== Cambio de opacidad en el fondo oscuro del Modal ==== */
.modal-backdrop.show { opacity: 1; }

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Navbar superior izquierdo ==== */
.white-content .navbar.navbar-transparent {
  position: fixed;
  padding: 4px 0px!important;
  width: calc(100% - 48px);
  top:0px;
  left: -5px;
  background: rgba(255, 255, 255, 0.75)!important;
  box-shadow: 0px 10px 60px -15px #202958;
  border: 1px solid #e7edfff1;
  z-index: 22;
}
.navbar .navbar-brand {
  margin-left: 6px!important;
  font-size: .9rem!important;
}
@media (max-width: 786px) {
  .navbar .navbar-brand {
    margin-left: 2px!important;
    font-size: .8rem!important;
  }
 }
.navbar.navbar-transparent {
  position: fixed;
  padding: 4px 0px!important;
  margin: 10px 26px;
  width: calc(100% - 48px);
  left: -5px;
  background-color: rgba(29, 44, 87, 0.75)!important;
  box-shadow: 0px 10px 60px -5px #15172b;
  border: 1px solid #0241ff2f;
  z-index: 22;
}
.navbar .btn { margin: 0px !important; }
.navbar.navbar-transparent .navbar-nav li { padding: 0 6px;}
.white-content .navbar.navbar-transparent .navbar-nav li a { padding: 0px!important; }
.navbar.navbar-transparent .navbar-nav li a { padding: 0px!important; }
.navbar-nav li i { font-size: .8rem; }  
.navbar-nav li a:hover { color: var(--color-tres);}

.navbar-nav__icon {
  background-color: var(--color-tres);
  color: #fff!important;
  border-radius: 2rem;
  padding: 1rem .7rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 400ms ease all;
}

.navbar-nav__icon:hover {
  background-color: #0733ac;
  transition: 400ms ease all;
}
/* ==== FIn  Navbar superior izquierdo ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/* ==== menu izquierdo ==== */
.sidebar .nav li,i{ transition: 600ms all ease;  }
.sidebar .nav li:hover  i{
  transition: 300ms all ease;
  color: rgba(255, 255, 255, 0.6)!important;
}

/* ==== Fondo Icono Warning ==== */
.card-stats .info-icon.icon-warning {
  background: #fb6340;
  background-image: linear-gradient(to bottom left, #fb6340, #f5365c);
}

/* CAMBIO DE BORDES EN INPUTS */
.off-canvas-form-control[data=blue], .form-control[data=blue]:focus { border-color: var(--color-tres); }
.off-canvas-form-control[data=orange], .form-control[data=orange]:focus { border-color: var(--color-cuatro); }

/* CAMBIO DE CHECKBOX */
.off-canvas-form-check[data=blue], .form-check[data=blue] input[type=checkbox]:checked+.form-check-sign:before {
  border: none;
  background-color: var(--color-tres);
}
.off-canvas-form-check[data=orange], .form-check[data=orange] input[type=checkbox]:checked+.form-check-sign:before {
  border: none;
  background-color: var(--color-cuatro);
}

/* CAMBIO DE COLOR SEPARADORES DE FORMULARIOS */

.off-canvas-folder-tag[data=blue], .folder-tag[data=blue] a, .folder-tag[data=blue] hr{ background: var(--color-tres); }
.off-canvas-folder-tag[data=orange], .folder-tag[data=orange] a, .folder-tag[data=orange] hr{ background: var(--color-cuatro); }

/* CAMBIO DE COLOR TABLAS */
.off-canvas-table-themed[data=blue], .table-themed[data=blue] { background: var(--color-tres); }
.off-canvas-table-themed[data=orange], .table-themed[data=orange] { background: var(--color-cuatro); }

/* CAMBIO DE BORDES TEXTAREA */
.text-area-bordered { border: 1px solid #2b3553 !important; }

/* COLOR OSCURO DE TEXTO EN BUSCADOR DE SELECTPICKER Y CAMBIO DE COLOR POR DEFECTO DE LAS OPTIONES DENTRO DE UN SELECT, ESTO DEBIDO A QUE EN EL MODO OSCURO EL TEXTO SE PONE POR DEFECTO EN BLANCO QUEDANDO ILEGIBLES*/
.bs-searchbox input, select option { color: black !important;}

/* CAMBIO DE CURSOR EN HOVER */
.pointer:hover { cursor: pointer; }

/* ESTILOS SEPARADORES DE FORMULARIOS */
.folder-tag a{
  margin-bottom: 0;
  border-radius: 4px 4px 0px 0px !important;
  pointer-events: none;
}

.folder-tag hr { margin-top: 0; }

/* REMOVER FLECHAS EN INPUT NUMBER */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {  -moz-appearance: textfield; }

/* BORDES TABLA */
.bordered{
  border-collapse: collapse; 
  border-radius: .2857rem; 
  overflow: hidden;
}

/* AGREGA MARGEN SUPERIOR A LOS ICONOS DE ERROR Y SUCCESS PARA LAS VALIDACIONES */
.has-danger:after, .has-success:after { margin-top: 1.5rem; }
/* AGREGA MARGEN SUPERIOR A LOS ICONOS DE ERROR Y SUCCESS PARA LAS VALIDACIONES */

/* AGREGA MARGEN SUPERIOR ADICIONAL A LOS ICONOS DE ERROR Y SUCCESS PARA LAS VALIDACIONES EN MODALES */
.modal-body .has-danger:after, .modal-body .has-success:after{ margin-top: 2rem; }
/* AGREGA MARGEN SUPERIOR ADICIONAL A LOS ICONOS DE ERROR Y SUCCESS PARA LAS VALIDACIONES EN MODALES */

/* SOBREESCRIBE EL MARGEN INFERIOR DE LOS INPUT PARA DEJAR EL TEXTO DE ERROR EN VALIDACION MAS CERCA DEL INPUT */
.has-danger .form-control,
.has-danger .input-group-append .input-group-text,
.has-danger.input-group-focus .input-group-append .input-group-text,
.has-danger.input-group-focus .input-group-prepend .input-group-text,
.has-danger .input-group-prepend .input-group-text { margin-bottom: 5px !important; }
/* SOBREESCRIBE EL MARGEN INFERIOR DE LOS INPUT PARA DEJAR EL TEXTO DE ERROR EN VALIDACION MAS CERCA DEL INPUT */

/* DEFINE LOS COLORES PARA LOS BORDES DE LOS INPUTS EN CASO DE VALIDACION CORRECTA E INCORRECTA */
.has-success .form-control { border-color: #00bf9a; }
.has-danger .form-control { border-color: #ec250d; }

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Mensaje validación ==== */
.arrow-validation{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #f5365c;
  margin-left: .9rem!important;
}

.label-validation{
  color: white!important;
  font-weight: 800;
  background-color: #fb6340;
  background-image: linear-gradient(to left, #fb6340, #f5365c)!important;
  border-radius: .6rem;
  padding-top: .2rem!important;
  padding-bottom: .3rem!important;
  padding-left: .6rem!important;
  padding-right: .6rem!important;
  transition: 400ms all ease;
  }
.label-validation::before {
  font-family: "Font Awesome 5 Free";
  content: "\f06a";
  font-weight: 800;
  color: #ffb8a9;
  padding-right: .3rem;
  font-size: 1rem;
}

.white-content .card:not(.card-white) label:not(.btn) { font-size: .75rem }
/* ==== Fin Mensaje validación ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ====  Estilos botón formularios generales  ====  */
.btn-general {
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
  color: #fff;
  padding: .9rem 1.6rem!important;
  margin: 0 0 1rem;
  background: var(--color-tres);
  text-transform: uppercase;
  font-weight: 600;
  transition: 300ms ease all;
}
.btn-general:hover {
  transition: 300ms ease all;
  background: var(--color-cuatro)!important;
}
/* ====  FIn  Estilos botón formularios generales  ====  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Pagina Error 404  ==== */
.b-error{
  position: relative;
  background: url(../img/b-error.jpg) !important;
  background-position: top;
  background-repeat:no-repeat;
  background-size: cover;
}
.b-error_contenido { position: relative; }
.b-error_contenido::before {
  content: "";
  position: absolute;
  background-image: url(../img/404-.svg);
  background-repeat: no-repeat;
  width: 400px;
  height: 100%;
  display: flex;
  top: 20%;
  left: 40%;
  transform: translate(-50%, -50%);
}
.b-error_contenido h1{
  margin-top: 10rem;
  color: #2775f6;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 5px;
}
.b-error_contenido h2{
  color: #fff;
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 5px;
}
.btn-general-2 {
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
  color: #fff;
  padding: .9rem 1.6rem!important;
  margin: 0 0 1rem;
  background: var(--color-cuatro);
  text-transform: uppercase;
  font-weight: 600;
  transition: 300ms ease all;
}
.btn-general-2:hover {
  transition: 300ms ease all;
  background: var(--color-tres)!important;
}

@media (max-width: 786px) {
  .b-error_contenido h1{ font-size: 2.2rem; }
  .b-error_contenido h2 { font-size: 1.6rem; }
}
/* ==== Fin Pagina Error 404  ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Página actualizar formulario perfil ==== */
.main-panel .actualizar-perfil .card { padding: 0px!important; }
.main-panel .actualizar-perfil .card .card-body { padding: 0 2rem!important; }
.main-panel .actualizar-perfil .card .card-body table{ width: 100%; }

.nombre-ac-perfil i{
  color: #8298dd!important;
  margin-right: .8rem;
  font-size: 2.8rem;
  border-radius: 2rem;
  box-shadow: 0px 10px 30px 0px #040a27;
}

.main-panel .actualizar-perfil .card .card-body .nombre-ac-perfil{
  border: none;
  border-bottom: 1px solid;
  border-color: rgba(131, 154, 221, 0.2);
  font-size: 1.2rem;
  color: #fff;
  padding: .5rem 0 1rem ;
  margin-bottom: 2.5rem;
}

.bg-header-ap {
  width: 100%;
  margin-top: 0rem;
  padding: 3rem;
  line-height: 0px;
  background: linear-gradient(140deg, #283c96 10%, #17296300 60%),url("../img/ima-lateral.svg");
  background-color: #132354;
  background-repeat: no-repeat;
  background-position: right;
  border-bottom-left-radius: 3rem; 
  border-bottom-right-radius: 3rem;
  box-shadow: 0px 40px 80px -5px #040a27b6;
}
/* ==== Fin Página actualizar formulario perfil ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */


/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Mensaje observación Alert ==== */
.swal2-validation-message {
  position: relative;
  border-radius: 1rem;
  width:78%;
  margin:1em auto!important;
  background: linear-gradient(58deg, rgba(37,55,119,1) 0%, rgba(223,29,68,1) 51%)!important;
  color:#fff!important;
  font-size: .8rem!important;
  font-weight: bolder!important;
  /*text-transform: uppercase;*/
  overflow: visible!important;
}

.swal2-validation-message::after {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: -8px;
  width: 0;
  height: 0;
  content:'';
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid rgba(223,29,68,1);
  z-index: 9999!important;
}

.swal2-validation-message::before {
  background-color: #ec0e0e!important;
  font-weight: bolder!important;
}

.swal2-textarea { color:#fff!important; }
.white-content .swal2-textarea { color:#000!important; }
.swal2-input-label{
  text-align: left!important;
  color:#fff!important;
}
.white-content .swal2-input-label{
  color:#000!important;
  justify-content: flex-start;
  margin: 1em 0 0 2em;
  border-left: 2px solid #ec0e0e!important;
  padding-left: .5rem;
}
.swal2-input-label{
  color:#fff!important;
  justify-content: flex-start!important;
  margin: 1em 0 0 2em!important;
  border-left: 2px solid #ec0e0e!important;
  padding-left: .5rem;
}
.icofont-2x { font-size: 1em; }
/* ==== Fin Mensaje observación Alert ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Footer ==== */
.white-content .footer {
  border-top: 1px solid #e7edfff1;
  box-shadow: 40px 0px 92px -12px #1a1c42c2;
  font-size: .8rem;
  text-align: center;
}
.footer {
  border-top: 1px solid #132a6db0;
  box-shadow: 60px 0px 82px 0px #111229f5;
  font-size: .8rem;
  text-align: center;
}
.footer a { color: var(--color-tres); }
.footer .footer__info {
  display:flex;
  align-items: center;
  justify-content: space-between;
}

.footer .footer__info .rs__nav i{
  text-align: center;
  font-size: 18px;
  letter-spacing: 4px;
  width: 50px;
  color: var(--color-tres)!important;
}

@media (max-width: 786px) {
  .footer .footer__info {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
/* ==== Fin Footer ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== MODAL sesión será finalizada ==== */
.modal-sesion .modal-content {
  background: linear-gradient(380deg, rgba(214, 220, 247, 0.2) 5%, rgba(131, 154, 255, 0) 30%) ;
  background-image: url(../img/modal-sesion.svg)!important;
  background-color: #fff;
  padding: 1rem;
  background-position: top right;
  background-size: 500px auto;
  background-repeat:no-repeat;  
  transition: 400ms all ease;
  border-radius: 1.2rem;
  z-index: 999;
  -webkit-box-shadow: 0px 50px 60px -10px #3e5cac5d;
  -moz-box-shadow: 0px 50px 60px -10px #3e5cac5d;
  box-shadow: 0px 50px 60px -10px #3e5cac5d;
}

.modal-sesion .modal-content .modal-header .modal-title {
  font-size: 2rem!important;
  width: 80%;
  font-weight: bolder!important;
  color: var(--color-uno);
  border-left: 0px !important;
  border-radius: 0rem;
  padding: 0rem .05rem;
  padding-top: 1.6rem!important;
}
.modal-sesion .modal-content .modal-body {
  padding-top: 0px!important;
  padding-left: 2.4rem!important;
}
.modal-sesion .modal-content .modal-footer { justify-content: flex-start; }
.modal-sesion .modal-content .modal-footer .btn.btn-danger {
  padding: .8rem 1.2rem;
  margin: 0 .2rem!important;
  background-image: none!important;
  background-color: var(--color-cuatro)!important;
  font-family: var(--fuente-parrafos)!important;
  transition: 300ms ease all;
  box-shadow: none;
  color: #fff;  
}
.modal-sesion .modal-content .modal-footer  .btn.btn-danger:hover {
  background-color: #253777!important;
  transition: 300ms ease all;
  box-shadow: none!important;
  color: #fff;
}
.modal-sesion .modal-content .modal-footer .btn.btn-secondary {
  padding: .8rem 1.2rem;
  margin: 0 .2rem!important;
  background-image: none!important;
  background-color: var(--color-tres)!important;
  font-family: var(--fuente-parrafos)!important;
  transition: 300ms ease all;
  box-shadow: none;
  color: #fff;
}
.modal-sesion .modal-content .modal-footer .btn.btn-secondary:hover {
  background-color: #253777!important;
  transition: 300ms ease all;
  box-shadow: none!important;
  color: #fff;
}
/* ==== Fin MODAL sesión será finalizada ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==== Datetimepicker  ==== */
.bootstrap-datetimepicker-widget {
  color: var(--color-uno)!important;
  font-weight: bolder!important;
  background-color: #fff!important;
  border-radius: .5rem!important;
  box-shadow: 0px 20px 90px -14px #131d3ae1!important;
}

.bootstrap-datetimepicker-widget .picker-switch{
  color: var(--color-tres)!important;
  font-weight: bolder!important;
  text-transform: capitalize!important;
}

.tim-icons.icon-minimal-left{
  color: var(--color-tres)!important;
  font-weight: bolder!important;
}

.tim-icons.icon-minimal-right{
  color: var(--color-tres)!important;
  font-weight: bolder!important;
}

.bootstrap-datetimepicker-widget table th.dow{
  color: var(--color-tres)!important;
  font-weight: bolder!important;
  text-transform: capitalize!important;
}

.bootstrap-datetimepicker-widget a[data-action=togglePicker],
.bootstrap-datetimepicker-widget a[data-action=togglePicker]:hover {
  color: var(--color-tres);
  /*background: linear-gradient(141deg, rgba(57,52,218,1) 12%, rgba(11,8,87,1) 88%);*/
  font-weight: bolder!important;
  font-size: 1.2rem!important;
}
.tim-icons.icon-watch-time{
  color: #fff!important;
  background: linear-gradient(141deg, rgba(0,68,255,1) 5%, rgba(0,51,193,1) 72%);
  font-size: 1.2rem;
}

.bootstrap-datetimepicker-widget .btn[data-action=incrementMinutes] { background: #0044ff!important; }
.bootstrap-datetimepicker-widget .btn[data-action=incrementHours] { background: #0044ff!important; }
.bootstrap-datetimepicker-widget .btn[data-action=decrementHours] { background: #0044ff!important; }
.bootstrap-datetimepicker-widget .btn[data-action=decrementMinutes] { background: #0044ff!important; }

.bootstrap-datetimepicker-widget table td.active:hover>div,
.bootstrap-datetimepicker-widget table td.active>div {
  color: #fff!important;
  background-color: #0044ff!important;
}

.bootstrap-datetimepicker-widget table td.today>div:before {
  overflow: hidden;
  visibility: hidden;
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    width: 40px;
    height: 40px;
    line-height: 20px;
    font-weight: 900;
    margin: 5px;
    color: var(--color-uno);
}
/* ==== Fin Datetimepicker  ==== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==========  Nuevo documento ========== */
/*  Btn Nuevo Documento  */
.btn.btn-ndoc  {
  padding: .4rem .2rem!important;
  margin: 0 .2rem!important;
  background: #eaeaee!important;
  font-family: var(--fuente-parrafos)!important;
  box-shadow: 0px 10px 30px 0px rgba(16, 17, 31, 0.4)!important;
  transition: 400ms ease all;
  color: #020202!important;
  border-radius: .8rem;
  border: 1px solid rgba(238, 246, 252, 0.1);
}

.btn.btn-ndoc:hover  {
  transition: 400ms ease all;
  border-radius: 4rem;
  box-shadow: 0px 10px 40px -5px rgba(16, 17, 31, 0.8)!important;
}

.btn.btn-ndoc.btn-info:focus  {
  background: #eaeaee!important;
  border: 1px solid rgba(238, 246, 252, 0.1)!important;
}

.btn.btn-ndoc  p{
  color: #222225!important;
  text-align: left!important;
  transition: 400ms ease all;
}

.btn.btn-ndoc  i{
  font-size: 1rem!important;
  color: #222225!important;
  transition: 600ms ease all;
}

.btn.btn-ndoc:hover  i{
  padding-left: .9rem;
  transition: 400ms ease all;
}

/*  Btn Manual de Usuario  */
.btn.btn-mdu  {
  padding: .4rem .2rem!important;
  margin: 0 .2rem!important;
  background: rgba(70, 75, 104, 0.16)!important;
  font-family: var(--fuente-parrafos)!important;
  box-shadow: 0px 10px 30px 0px rgba(12, 12, 26, 0.6)!important;
  transition: 400ms ease all;
  color: #fff!important;
  border-radius: .8rem;
  border: 1px solid rgba(238, 246, 252, 0.1);
}

.btn.btn-mdu:hover  {
  transition: 400ms ease all;
  border-radius: 4rem;
  box-shadow: 0px 10px 40px -5px rgba(16, 17, 31, 0.8)!important;
}

.btn.btn-mdu.btn-info:focus  {
  background: #eaeaee!important;
  border: 1px solid rgba(238, 246, 252, 0.1)!important;
}

.btn.btn-mdu  p{
  color: #fff!important;
  text-align: left!important;
  transition: 400ms ease all;
}

.btn.btn-mdu  i{
  font-size: 1.3rem!important;
  color: #fff!important;
  transition: 600ms ease all;
}

.btn.btn-mdu:hover  i{
  padding-left: .9rem;
  transition: 400ms ease all;
}

/*  Tab contenedor  */
.white-content .tab-nuevodoc .nav {
  border-radius: .2rem!important;
  border-bottom: 1px solid rgba(154, 168, 238, 0.2);
  background: linear-gradient(90deg, rgba(13, 66, 182, 0.05) 50%, rgba(16,31,59,0) 100%)!important;
}
.tab-nuevodoc .nav {
  border-radius: .2rem!important;
  border-bottom: 1px solid rgba(57, 73, 151, 0.8);
  background: linear-gradient(240deg, rgb(8, 16, 32,0.2) 38%, rgba(11, 27, 58, 0.2) 100%)!important;
}
.white-content .tab-nuevodoc .tab-space {
  padding: 20px 20px 0!important;
  margin-bottom: 0rem!important;
  /*border: 1px solid rgba(12, 26, 66, 0.1)!important;*/
  border-radius: .2rem!important;
}
.tab-nuevodoc .tab-space {
  padding: 20px 20px 0!important;
  margin-bottom: 0rem!important;
  /*border: 1px solid rgba(51, 83, 190, 0.3)!important;*/
  border-radius: .2rem!important;
}

.tab-nuevodoc .nav-pills.nav-pills:not(.flex-column) .nav-item:not(:last-child) .nav-link {
  margin-bottom: 0px!important;
  margin-right: 0px!important;
  border-radius: 0px!important;
  border-radius: .2rem!important;
}
.tab-nuevodoc .nav-pills:not(.nav-pills-icons):not(.nav-pills-just-icons) .nav-item .nav-link {
  margin-right: 0px!important;
  border-radius: 0px!important;
  border-radius: .2rem!important;
}

/* Btn pills modo claro */
.white-content .tab-nuevodoc .nav-pills.nav-pills-primary .nav-item .nav-link.active {
  box-shadow: 0px 0px 0px 0px #10111f00!important;
  background: linear-gradient(270deg, rgba(39,117,246,1) 0%, rgba(6,40,164,1) 85%);
  /*box-shadow: 0px 15px 24px -16px rgba(16, 17, 31, 1)!important;*/
}

.white-content .tab-nuevodoc .nav-pills .nav-item .nav-link:not(.active) {
  background: linear-gradient(90deg, rgba(51, 61, 148, 0.1) 0%, rgba(255, 255, 255, 1) 100%)!important;
  color: var(--color-uno)!important;
  transition: 400ms ease all!important;
}

.white-content .tab-nuevodoc .nav-pills .nav-item .nav-link:not(.active):hover {
  background: rgba(11, 48, 151, 0.1)!important;
  color: var(--color-uno)!important;
  transition: 400ms ease all!important;
}

/* Btn pills modo oscuro */
.tab-nuevodoc .nav-pills.nav-pills-primary .nav-item .nav-link.active {
  color: #fff!important;
  background: linear-gradient(270deg, rgba(39,117,246,1) 0%, rgba(6,40,164,1) 85%);
  box-shadow: 0px 0px 0px 0px #10111f00!important;
}

.tab-nuevodoc .nav-pills .nav-item .nav-link:not(.active) {
  color: #fff!important;
  background: linear-gradient(90deg, rgba(22, 36, 78, 0.6) 0%, #2d4280 100%)!important;
}

 .tab-nuevodoc .nav-pills .nav-item .nav-link:not(.active):hover {
  color: #fff!important;
  background: rgba(6, 16, 44, 0.6)!important;
  transition: 500ms ease all!important;
}

/* Contenedor PAPER */
.tab-nuevodoc .paper {
  height: 100%;
  border-radius: .3rem!important;
  background: #ebecff!important;
  box-shadow: 0px 0px 0px 0px #10111f00!important;
}

.tab-nuevodoc .paper p{ font-size: .95rem!important; }

.tab-nuevodoc .custom-upload-text { color: var(--color-uno)!important; }
.tab-nuevodoc .custom-upload-label{ border: 1px dashed #b9bbd4e5; }
.white-content .tab-nuevodoc .custom-upload {  
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: #ebecff!important;
}
.tab-nuevodoc .custom-upload {
  border: 2px dashed #b9bbd4e5;
  background-color: rgba(15, 25, 54, 0.2);
}

.tab-nuevodoc .input_line {
  outline: none;
  color: #1d253b !important;
  border-bottom: 1px solid var(--color-uno);
  background-color: hsla(0, 0%, 100%, 0);
}

.white-content .card:not(.card-white) .tab-nuevodoc .tab-content .tab-pane {
  color: var(--color-uno)!important;
  font-size: 11px!important;
}

.card:not(.card-white) .tab-nuevodoc .tab-content .tab-pane {
  color: #fff;
  font-size: 11px!important;
}

.tab-nuevodoc .custom-upload-preview {
  display: grid!important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))!important;
  gap:5px!important;
}

.tab-nuevodoc .fa-trash-alt::before {
  content: "\f00d";
  font-size: 14px;
  color: var(--color-cuatro);
  background-color: #152757;
}

.white-content .tab-nuevodoc .fa-trash-alt::before {
  content: "\f00d";
  font-size: 14px;
  color: var(--color-cuatro);
  background: #ebecff!important;
}

.white-content .tab-nuevodoc .preview .pdf-icon {
  font-size: 40px;
  color: var(--color-cuatro);
  margin-bottom: 12px!important;
}

.tab-nuevodoc .preview .pdf-icon {
  font-size: 40px;
  color: var(--color-cuatro);
  margin-bottom: 12px!important;
}

/* Estilos Collapse Contenedor DESTINO */
.white-content .tab-collapse-nd .card {
  border: 1px solid rgba(12, 26, 66, 0.1)!important;
  background-color: rgba(12, 26, 95, 0.01)!important;
}

.tab-collapse-nd .card {
  border: 1px solid rgba(51, 83, 190, 0.3)!important;
  background-color: rgba(4, 10, 39, 0.1)!important;
  margin-bottom: 1rem!important;
}

.tab-collapse-nd .card .btn-info {
  padding: 0.5rem 1.2rem;
  margin-top: .48rem;
  color: #fff!important;
}
/* ==========  Fin Nuevo documento ========== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */

/* ==========  Estilos Tabla recibidos INICIO ========== */
.white-content .tabla-recibidos>tbody>tr>td {
  padding: 8px 6px!important;
  width: 200px;
  font-weight: 400!important;
  font-size: .8rem!important;
}
.tabla-recibidos td {
  padding: 8px 6px!important;
  width: 200px;
  font-weight: 400!important;
  font-size: .8rem!important;
}
.recibidos-titulo {
  font-weight: bolder!important;
}
.recibidos-titulo i {
  padding-left: .3rem;
  padding-right: .1rem;
  color: var(--color-tres);
}
.recibidos-asunto {
  white-space: nowrap!important;  
  overflow: hidden!important;         
  text-overflow: ellipsis!important; 
  width: 200px!important;
  max-width: 500px!important;
  text-align: left!important;
  font-size: .8rem;
  color: #8ab6fd;
}
.recibidos-adjunto { text-align: right;  }
.recibidos-fecha { 
  text-align: right; 
  width: 120px!important;
  max-width: 300px!important;
}

.gd-apoyo {
  color:#8298dd;
  font-size: .75rem;
  padding: 0px 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
}
.gd-apoyo i { color: #8298dd; }
.gd-apoyo a { color: #fff; transition: 400ms ease all; }
.gd-apoyo a:hover { color: #8298dd; transition: 400ms ease all; }
.white-content .gd-apoyo a {   color: var(--color-uno); }

@media (max-width: 786px) {
  .tabla-recibidos td { width: 100%!important; }
  .gd-apoyo {
    grid-template-columns: 1fr;
    gap:20px;
  }
  .recibidos-fecha {
    display: none;
    visibility: hidden;
  }
  .recibidos-asunto {
    display: none;
    visibility: hidden;
  }

  .table>tbody>tr {
    width: 100%;
}
  .cabecera-panel {
    display: flex;
    flex-direction: column;
  }
  .navegacion-msn {
    margin-left: 10px;
  }
  .white-content .nav-cab-content {
    position: relative!important;
    top: 0px !important;
    width: 100%!important;
    align-items: center!important;
  } .nav-cab-content {
    position: relative!important;
    top: 0px !important;
    width: 100%!important;
    align-items: center!important;
  }
 .navegacion-msn {
    padding: 0 15px;
    margin: 5px 0 0!important; 
    margin-left: 12px!important;
  }

  .paginacion-num {
    width: 90px;
    padding-top: 0rem!important;
    margin-bottom: 5px!important;
  }
}

.cabecera-panel {
  position: relative;
  display: flex;
  align-items: center;
}

.cabecera-panel .form-group, .input-group {
  flex: 1;
  margin-bottom: 12px!important;
  text-align: left;
}
.cabecera-panel h3 {
  flex: 1;
  padding-right: 20px;
  text-align: left;
}

.cabecera-panel .form-check {
  margin: 0rem!important;
  padding: 0px!important;
}

/* Contenedor Paginación */
.navegacion-cabecera {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  border-bottom: 1px solid rgba(77, 106, 201, 0.1)!important;
}
.white-content .nav-cab-content {
  position: absolute;
  top: 3.42rem;
  padding-top: .5rem;
  width: 200px;
  background-color: rgba(134, 144, 177, 0.1)!important;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
  display: flex;
  justify-content: center;
} .nav-cab-content {
  position: absolute;
  top: 3.6rem;
  padding-top: .5rem;
  width: 200px;
  background-color: rgba(1, 3, 24, 0.3)!important;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
  display: flex;
  justify-content: center;
}
.navegacion-msn {
  width: 55px;
  background-color:#0509143b;
  border-radius: 1rem;
  align-content: flex-end!important;
  text-align: right!important;
  margin-right: 20px;
  margin-left: 10px;
  padding: 0 15px;
  margin-bottom: 9px!important;
  font-size: 1.2rem;
}
.white-content .navegacion-msn {
  width: 55px;
  background-color:#3e4d7c18;
  border-radius: 1rem;
  align-content: flex-end!important;
  text-align: right!important;
  /*margin-right: 20px;*/
  padding: 0 15px;
  margin-bottom: 12px!important;
  font-size: 1.2rem;
}

.navegacion-msn a {
  color: #3e57af;
  transition: 200ms ease all;
}

.navegacion-msn a:hover {
  color: #68a0f5;
  transition: 200ms ease all;
}

.white-content .paginacion-num {
  width: 80px;
  padding-top: .3rem;
  color: var(--color-uno);
}

.paginacion-num {
  width: 80px;
  padding-top: .3rem;
  color: #fff;
}

/* Detalle documento */
.cont-detalle-documento {
  display: grid;
  grid-template-columns: repeat(5,1fr);  
  grid-gap:5px;
  /*grid-auto-rows: minmax(100px, auto);*/
}
.cdd_uno { grid-column: 1 / 4;}
.cdd_dos { grid-column: 4 / 6; }
.cdd_tres { grid-column: 1/6; }
/*.cdd_tres__in{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}*/

#contenedor_anexos {
  display: flex;
  /*height: 50px!important;*/
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: .5rem;
  border-radius: .5rem;
  background-color: #09113183;
}
.white-content #contenedor_anexos {
  display: flex;
  /*height: 50px!important;*/
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: .5rem;
  border-radius: .5rem;
  background-color: #09113117;
}
.white-content #contenedor_anexos a { color: var(--color-uno); }
#contenedor_anexos a { color: #fff; }


/*Contenedor tabla detalles */
.cdd_tabla .form-group label{
  color: #fff;
}
.white-content .cdd_tabla .form-group label{
  color: var(--color-uno);
}
.doc-detalle-tabs {
  border-bottom: 1px solid rgba(77, 106, 201, 0.1)!important;
  margin-bottom: 1rem;
}

@media (max-width: 1200px) {
  .cont-detalle-documento {
    grid-template-columns: 1fr;
  }
  .cdd_tres__in{
    display: grid;
    grid-template-columns: 1fr;
  }
  .cdd_uno {
    grid-column: 1 / 6;
  }
  .cdd_dos {
    grid-column: 1/ 6;
  }
}

/* Btn pills modo claro */
.white-content .doc-detalle-tabs .nav-link.active {
  cursor: pointer;
  box-shadow: 0px 0px 0px 0px #10111f00!important;
  background: linear-gradient(270deg, rgba(39,117,246,1) 0%, rgba(6,40,164,1) 85%);
  /*box-shadow: 0px 15px 24px -16px rgba(16, 17, 31, 1)!important;*/
}

.white-content .doc-detalle-tabs .nav-link:not(.active) {
  cursor: pointer;
  background: linear-gradient(90deg, rgba(51, 61, 148, 0.1) 0%, rgba(255, 255, 255, 1) 100%)!important;
  color: var(--color-uno)!important;
  transition: 400ms ease all!important;
}

.white-content .doc-detalle-tabs .nav-link:not(.active):hover {
  background: rgba(11, 48, 151, 0.1)!important;
  color: var(--color-uno)!important;
  transition: 400ms ease all!important;
}

/* Btn pills modo oscuro */
.doc-detalle-tabs .nav-link.active {
  cursor: pointer;
  color: #fff!important;
  background: linear-gradient(270deg, rgb(36, 118, 250) 0%, rgba(6,40,164,1) 85%);
  box-shadow: 0px 0px 0px 0px #10111f00!important;
}

.doc-detalle-tabs .nav-link:not(.active) {
  cursor: pointer;
  color: #fff!important;
  background: linear-gradient(90deg, rgba(22, 36, 78, 0.6) 0%, #2d4280 100%)!important;
}

.doc-detalle-tabs .nav-link:not(.active):hover {
  cursor: pointer;
  color: #fff!important;
  background: rgba(6, 16, 44, 0.6)!important;
  transition: 500ms ease all!important;
}
/* ==========  Fin Estilos Tabla recibidos INICIO ========== */
/*  ----------------------------------------------------------------------------------------------------------------------------------------- */


/*  ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ==========  Estilos sistema de solicitudes  ========== */
.bg-ssp {
  background-image: url(../img/fondo-ssp.svg) !important;
  background-size: cover !important;
}

.cabecera-ssp {
  display: flex!important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -40px;
}

.titulo-ssp {
  font-weight: bolder;
  font-size: 2rem;
  color: white;
  padding-left: 3rem;
}

.titulo-ssp::after {
  content:"";
  position: absolute;
  background-image: url(../img/escudo-b.svg);
  background-repeat: no-repeat;
  width: 100%;
  height: 60px;
  top: 0px;
  left: 0px;
}

.solicitudes-ssp {
  text-align: center;
  padding-bottom: .5rem;
}.solicitudes-ssp p{
  color: #040a27!important;
  color: white!important;
  font-size: 1rem;
  padding-top: .5rem;
}

.solicitudes-ssp h6 {
  display: inline-block;
  color: var(--color-uno);
  color: white!important;
  padding: .8rem;
  width: 260px;
  font-weight: bolder;
  text-align: center;
  border: 1px solid #9db5f510;
  border-radius: 8rem;
  margin-bottom: 1rem;
  box-shadow: 0px 20px 20px -8px #02030ae0;
  margin-top: -10px;
}

.c-sesion {
  background-color: #0044ff;
  font-weight:800;
  color: white;
  font-size: .9rem;
  border-radius: 4rem;
  padding: .4rem .8rem;
  box-shadow: 0px 40px 80px -10px #02030a;
}

.solicitudes-ssp i {
  color: #0044ff;
  padding-right: .8rem;
  font-size: 1.4rem;
  font-weight: bolder;
}
.formulario-ssp {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.f-ssp-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px!important;
}

.f-ssp-in i{
  font-size: 3rem;
  color: #BAC0F7;
}

.f-ssp-in .btn-primary {
  background: #5C64FE!important;
  background: linear-gradient(274deg, rgb(82, 90, 252) 0%, rgb(29, 39, 236) 100%)!important;
  font-size: 1.1rem;
  padding: 2rem;
  box-shadow: 0px 40px 80px -14px #02030ae0;
}

/*.f-ssp-in .btn-primary::before {
  content:"\f124";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-size: 30rem;
  top: 120px;
  left: -120px;
  color: #0832a518;
}

.f-ssp-in:hover i   {
  color: #5C64FE;
  transform: scale(1.1);
}*/

/* Interior SSP  */
.b-progreso-ssp {
  background-color: white;
  background: linear-gradient(274deg, rgba(1,1,38,1) 0%, rgba(24,24,96,1) 100%);
  border-radius: .4rem;
  padding: .9rem 0 .2rem;
  margin-bottom: .6rem;
  box-shadow: 0px 40px 80px -14px #02030ae0;
}

.b-progreso-ssp .progress-indicator>li .bubble {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

.b-progreso-ssp .progress-indicator>li .bubble:after, .progress-indicator>li .bubble:before { background-color: #ffffff; }
.b-progreso-ssp .progress-indicator>li { color: #fff; }

.cont-ssp .card{
  background-color: white;
  background: linear-gradient(274deg, rgba(1,1,38,1) 0%, rgba(24,24,96,1) 100%);
  border-radius: .4rem;
  padding: .9rem 0 .2rem;
  margin-bottom: .6rem;
  box-shadow: 0px 40px 80px -14px #02030ae0;
}

/* Tablas contenedor servicios SSP */
.tabla-ssp { background: linear-gradient(274deg, rgb(1, 1, 22) 0%, rgb(30, 30, 107) 100%); border-bottom: 1px solid #04072b56;}
.tabla-ssp table>thead>tr { background: linear-gradient(274deg, rgb(2, 2, 19) 0%, rgb(23, 23, 85) 100%); border-bottom: 1px solid #04072b4f;}
.tabla-ssp table>thead>tr>th {
  color: #5892ff;  
  padding: .5rem .4rem;
}

.tabla-ssp-ls td {
  color: white!important;
  font-size: 1rem;
  font-weight: bolder;
  padding: .5rem .4rem;
}

.servicio-add {
  color: white;
  font-size: 1rem;
  background-color: #0044ff;
  border-radius: 2rem;
  width: 50px;
  padding: .5rem;
  position: relative;
}

.ssp-table{
  overflow: auto !important;
  max-height: 60vh !important;
  width: 100%;
  padding: .8rem;
}

.ssp-table .table td { background-color: #e8eaed00!important; }
.main-panel { border-top: 0px!important; }

/* TABLA SOLICITAR SERVICIOS */
.servicios-ssp-grid {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(min(100%,16rem), 1fr));*/
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem 1.5rem;
  gap: .7rem;
  position: relative;
}

.servicios-ssp-grid h5 {
  font-size: 1.1rem;
  font-weight: bolder;
  /*letter-spacing:.1rem;*/  
  /*text-transform: uppercase;*/
}

.s-ssp-uno {
  cursor: pointer;
  padding: 2rem 1rem 1rem;
  color: white;
  background-color: #1f1697;
  border-radius: .4rem;
  box-shadow: 0px 40px 30px 0px #04072b;
  border-bottom: rgba(255, 255, 255, 0.005) 1px solid;
  transition: 400ms ease all;
  border: rgba(62, 48, 247, 0.726) 1px solid;
  /*background: linear-gradient(214deg, rgba(29,39,236,1) 10%, rgba(5,9,86,1) 67%, rgba(2,5,46,1) 100%);*/
  /*background: linear-gradient(214deg, rgba(29,39,236,1) 0%, rgb(18, 24, 148) 84%); 
  background-color: #131ccc;*/
}

.s-ssp-uno:hover {
  transition: 400ms ease all;
  background-color: #140472 !important;
  border-radius: .8rem;
  box-shadow: 0px 40px 30px -5px #000105;
}

.modal-ssp {
  background-image: url(../img/fondo-modal-ssp.svg) !important;
  background-size: cover !important;
  background: linear-gradient(272deg, rgb(1, 1, 68) 0%, rgb(27, 27, 129) 100%);
  box-shadow: 0px 40px 30px -2px #030620de;
  text-align: center!important;
}

.modal-ssp p{
  font-weight: bolder;
  font-size: 1.4rem;
  color: white!important;
}

.modal-ssp .modal-body { padding: .1rem; }

.servicios-ssp-grid-modal {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(min(100%,16rem), 1fr));*/
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem 1.5rem;
  gap: .7rem;
  position: relative;
}

.servicios-ssp-grid-modal h3 {
  font-size: .9rem;
  font-weight: bolder;
}

.s-ssp-uno-modal h5 { font-size: 1rem; }
.s-ssp-uno-modal-block h5 { font-size: 1rem; }

.s-ssp-uno-modal {
  cursor: pointer;
  padding: 2rem .5rem 1rem;
  background-color: #1f1697;
  border-radius: .4rem;
  box-shadow: 0px 40px 30px -5px #04072b;
  border-bottom: rgba(255, 255, 255, 0.005) 1px solid;
   transition: 400ms ease all;
   border: rgba(62, 48, 247, 0.726) 1px solid;
   /*background-color: #2015b9;*/
  /*;background: linear-gradient(214deg, rgba(29,39,236,1) 10%, rgba(5,9,86,1) 67%, rgba(2,5,46,1) 100%);*/
  /*background: linear-gradient(214deg, rgba(29,39,236,1) 0%, rgb(18, 24, 148) 84%); */
}

.s-ssp-uno-modal:hover {
  transition: 400ms ease all;
  background-color: #0c014d !important;
  border-radius: .8rem;
  box-shadow: 0px 40px 50px -5px #000105;
}

.s-ssp-uno-modal-block {
  cursor: not-allowed;
  padding: 2rem .5rem 1rem;
  color: white;
  background-color: #010635;
  border-radius: .4rem;
  transition: 400ms ease all;
  /*box-shadow: 0px 40px 20px 0px #01020e;
  border-bottom: rgba(255, 255, 255, 0.005) 1px solid;*/
  /*border: rgba(27, 14, 209, 0.856) 1px dashed;*/
}
@media (max-width: 900px){
  .bg-ssp.main-panel>.content { padding: 1rem!important; }
  .formulario-ssp { grid-template-columns: 1fr !important; }
  .servicios-ssp-grid { grid-template-columns: 1fr; }
  .servicios-ssp-grid-modal { grid-template-columns: 1fr; }
  .modal-ssp h3{
    font-weight:600;
    font-size: 1.2rem;
    color: white!important;
    text-align: left;
  }
  .cabecera-ssp {
    margin-top: -1px !important;
  }
  .modal-ssp .modal-header{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap:20px;
  }
}


.cont-ssp .form-row label {
  font-size: 1.1rem!important;
}

.cont-ssp .form-row textarea {
  font-size: 1.1rem!important;
} 

.cont-ssp .card form label+.form-control {
  margin-bottom: 10px;
}