@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

/*colores institucionales
azul: #011671
rgba(1, 22, 113, 0.5);

rojo: #AA001B
rgba(170, 0, 27, 0.5);

color botones celeste #327af1
rgba(50,122,241,0.1);
*/

/*
fuentes
font-family: 'Bebas Neue', cursive;
font-family: 'Open Sans', sans-serif;
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: 'Open Sans', sans-serif;
    /*background-color:rgba(1, 22, 113, 0.1);*/
    background-color:#f2f2f2;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Bebas Neue', cursive;
    color:#011671;
}

p{
    margin:3px;
}

hr{
    margin:10px;
    height: 1px; 
    border: none; 
    background-color: #011671;
}

ul,ol{
    margin-left:30px;
}

.spanRojo{
    color:#AA001B;
}

.spanAzul{
    color:#011671;
}

.divInteriorGenerico{
     margin:10px;
     overflow: auto;
}

.genDiv{
    margin:10px;
    background-color:white;
    padding:10px;
    border-radius:5px;
    overflow: auto;
}

    .divInteriorWhite{
        padding:5px;
        border:1px solid #ccc;
        margin:10px;
        overflow: auto;
    }
    
    .divInteriorWhite2{
        padding:5px;
        border:1px solid #ccc;
        margin:10px;
        overflow: auto;
    }
   
.itemPago{
    border-top:1px solid rgba(1, 22, 113, 0.1);
    padding:10px;
    border-bottom:1px solid rgba(1, 22, 113, 0.1);
} 

/*nps*/
        .npsRojo{
            display:inline-block;
            margin:3px;
            background-color:red;
            width:60px;
           
            padding:10px;
            color:#fff;
            vertical-align:top;
            text-align:center;
        }
        
        .npsAmarillo{
            display:inline-block;
            margin:3px;
            background-color:yellow;
            width:60px;
            
            padding:10px;
            color:#000;
            vertical-align:top;
            text-align:center;
        }
        
        .npsVerde{
            display:inline-block;
            margin:3px;
            background-color:green;
            width:60px;
            
            padding:10px;
            color:#fff;
            vertical-align:top;
            text-align:center;
        }
/*fin nps*/
    
/*contenedor de divs*/
.divCont2{
    padding:10px;
    margin:3px;
    text-align:center;
}

.divIntCont2{
    display:inline-block;
    margin:10px;
    vertical-align:top;
    text-align:center;
    border:1px solid #ccc;
    padding:10px;
    font-size:0.8em;
}
/*fin contenedor de divs*/


.divElementoOk{
    background-color:green;
    color:#fff;
    padding:10px;
    text-align:center;
    border-radius:4px;
}

/*contenedor de divs proceso admision*/

.div-etapa{
    padding:10px;
    margin:20px;
    border-radius:10px;
    box-shadow: 0 0 4px #011671;
    position:relative;
}

.numero-etapa-pendiente{
    position:absolute;
    top:0;
    right:5px;
    background-color:#AA001B;
    color:#fff;
    width:50px;
    height:50px;
    font-size:1.2em;
    border-radius:50%;
    display:flex;
    border:2px solid white;
    padding:10px;
}

.numero-etapa-terminada{
    position:absolute;
    top:0;
    right:5px;
    background-color:green;
    color:#fff;
    width:50px;
    height:50px;
    font-size:1.2em;
    border-radius:50%;
    display:flex;
    border:2px solid white;
    padding:10px;
}

    .numero-etapa-terminada span{
        margin:auto;
    }

    .numero-etapa-pendiente span{
        margin:auto;
    }

.divContProcAdm{
    padding:10px;
    margin:3px;
    text-align:center;
}

/*mensaje de etapa*/
.div-mensaje-etapa-pendiente{
    color:#AA001B;
    text-align:right;
}

.div-mensaje-etapa-terminada{
    color:#0B610B;
    text-align:right;
}

.divIntContProcAdmTerm{
    display:inline-block;
    margin:10px;
    vertical-align:top;
    text-align:left;
    border:1px solid rgba(1, 22, 113, 0.2);
    padding:10px;
    font-size:0.8em;
    background-color:rgba(1, 22, 113, 0.2);
    position:relative;
    min-height:100px;
}

.divIntContProcAdmPend{
    display:inline-block;
    margin:10px;
    vertical-align:top;
    text-align:left;
    border:1px solid rgba(170, 0, 27, 0.2);
    padding:10px;
    font-size:0.8em;
    background-color: rgba(170, 0, 27, 0.2);
    position:relative;
    min-height:100px;
}

    .estadoTerminado{
        padding:5px;
        text-align:center;
        background-color:white;
        color:#011671;
        font-weight:bolder;
        position:absolute;
        bottom:0;
        right:0;
    }
    
    .estadoPendiente{
        padding:5px;
        text-align:center;
        background-color:white;
        color:#AA001B;
        font-weight:bolder;
        position:absolute;
        bottom:0;
        right:0;
    }
/*fin contenedor de divs proceso admision*/

/*div mensajes*/
.mensajeDesatacadoRojo{
    margin:5px;
    padding:10px;
    box-shadow: 0px 0px 4px 0px rgba(229, 35, 5, 1);
    
}

.mensajeDesatacadoVerde{
    margin:5px;
    padding:10px;
    box-shadow: 0px 0px 4px 0px rgba(31, 170, 0, 1);
}


/*fin div mensajes*/

/*formularios*/
input{
    padding:2px;
    border:1px solid #ccc;
    margin:3px;
}

.inputBuscador{
    width:100%;
    height:40px;
    border-radius:20px;
    padding-left:5px;
    font-size:14pt;
}

.buscador{
    background-color:rgba(1, 22, 113, 0.1);
    padding:20px;
}
    .buscador input{
        width:100%;
        height:30px;
        border-radius:30px;
        padding:5px;
    }

select{
    padding:2px;
    border:1px solid #ccc;
    margin:3px;
}

label{
    font-weight:bolder;
    height:40px;
}

.blueBtn{
    padding:3px;
    background-color:#011671;
    color:#fff;
    font-family: 'Bebas Neue', cursive;
    /*font-family: 'Open Sans', sans-serif;*/
    border-radius:5px;
    cursor:pointer;
    margin:2px;
    font-size:0.9em;
    /*font-weight:bolder;*/
    border:1px solid #011671;
}

.grayBtn{
    padding:5px;
    background-color:#dcdcdc;
    color:#000;
    /*font-family: 'Bebas Neue', cursive;*/
    font-family: 'Open Sans', sans-serif;
    border-radius:3px;
    cursor:pointer;
    margin:2px;
    font-size:0.9em;
    /*font-weight:bolder;*/
    border:1px solid #a4a4a4;
}

.blueBtnFormulario{
    padding:5px;
    background-color:#011671;
    color:#fff;
    font-family: 'Bebas Neue', cursive;
    /*font-family: 'Open Sans', sans-serif;*/
    border-radius:5px;
    cursor:pointer;
    margin:2px;
    font-size:1.2em;
    /*font-weight:bolder;*/
    border:1px solid #011671;
}

.blueBtnNiveles{
    padding:3px;
    background-color:#011671;
    color:white;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    margin:2px;
    display:inline-block;
    font-size:0.9em;
    border:1px solid #011671;
}

.redBtnNiveles{
    padding:3px;
    background-color:#AA001B;
    color:white;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    margin:2px;
    display:inline-block;
    font-size:0.9em;
    border:1px solid #AA001B;
}

.redBtn{
    padding:3px;
    background-color:#AA001B;
    color:white;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    border:1px solid #AA001B;
    margin:2px;
    font-size:0.9em;
}

.redBtnFormulario{
    padding:5px;
    background-color:#AA001B;
    color:#fff;
    font-family: 'Bebas Neue', cursive;
    /*font-family: 'Open Sans', sans-serif;*/
    border-radius:5px;
    cursor:pointer;
    margin:2px;
    font-size:1.2em;
    /*font-weight:bolder;*/
    border:1px solid #AA001B;
}

.btnEstadistica{
    padding:5px;
    background-color:#fff;
    color:#011671;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    border:1px solid #011671;
    margin:10px;
    display:inline-block;
    font-size:1em;
}

.btnGris{
    background-color:#f2f2f2;
    border: 1px solid #f2f2f2;
    padding:5px;
    text-align:center;
    margin:3px;
    border-radius:4px;
    cursor:pointer;
    display:inline-block;
}

textarea{
    padding:5px;
    width:80%;
    height:10vh;
    border:1px solid #ccc;
}

.mensajeError{
    color:red;
    font-weight:bolder;
}

.error-p{
    color:red;
    font-weight:bolder;
}

.mensajeCorrecto{
    color:green;
    font-weight:bolder;
}

.success-p{
    color:green;
    font-weight:bolder;
}

.diaAgendamiento{
    background-color:#f2f2f2;
    display:inline-block;
    margin:10px;
    vertical-align:top;
    text-align:center;
    padding:3px;
}
/*fin formularios*/

/*ventana modal*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*fin ventana modal*/

/*div de comentarios de usuarios*/
.divComentario{
    padding:10px;
    border:1px solid #ccc;
    margin:10px;
}
/*fin div de comentarios de usuarios*/

.genTable {
    border-collapse: collapse;
}

.genTable td, .genTable th {
  border: 1px solid #ddd;
  padding: 3px;
  font-size:0.9em;
}

.genTable tr:nth-child(even){background-color: #f2f2f2;}

.genTable tr:hover {background-color: #ddd;}

.genTable th {
    /*font-family: 'Bebas Neue', cursive;*/
    text-align: left;
    background-color: #011671;
    color: white;
    letter-spacing:1px;
}

.table2 {
  border-collapse: collapse;
  font-size:10pt;
  min-width:50%;
}

.table2 td, .table2 th {
  padding: 3px;
  margin-right:5px;
}

.table2 tr:nth-child(even){background-color: #fff;}

.table2 tr:hover {background-color: #f2f2f2;}

.table2 th {
  padding:2px;
  text-align: left;
  background-color: white;
  color: #011671;
  font-weight:bolder;
  border-bottom:1px solid #011671;
}

/*loader*/
    .custom-loader {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: 
        radial-gradient(farthest-side,#011671 94%,#0000) top/8px 8px no-repeat,
        conic-gradient(#0000 30%,#011671);
      -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
      animation:s3 1s infinite linear;
    }
    
    @keyframes s3{ 
      100%{transform: rotate(1turn)}
    }
    
    
    .custom-loader-secundario {
      width:50px;
      height:50px;
      border-radius:50%;
      padding:1px;
      background:conic-gradient(#0000 10%,#011671) content-box;
      -webkit-mask:
        repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
        radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px));
      -webkit-mask-composite: destination-in;
      mask-composite: intersect;
      animation:s4 0.5s infinite steps(10);
    }
    
    @keyframes s4 {to{transform: rotate(1turn)}}
    
    
/*fin loader*/

/*loader secundario*/
.spinner {
       margin:10px;
       width: 4.8px;
       height: 4.8px;
       animation: spinner-z355kx 1s infinite linear;
       border-radius: 4.8px;
       box-shadow: 12px 0px 0 0 #011671, 7.4px 9.4px 0 0 #011671, -2.6px 11.6px 0 0 #011671, -10.8px 5.2px 0 0 #011671, -10.8px -5.2px 0 0 #011671, -2.6px -11.6px 0 0 #011671, 7.4px -9.4px 0 0 #011671;
    }
    
    @keyframes spinner-z355kx {
       to {
          transform: rotate(360deg);
       }
    }

@media only screen and (max-width: 1115px) {
    
}