/*********************************************************************************************/
/****************************          iconos         ****************************************/
/*********************************************************************************************/
.icono_verde{
    color: #17A88B;
}
.icono_rojo{
    color: #D20D21;   
}


.saeAyudaTitulo{
  background-color: #248;
  display: block;;
  padding: 3px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.saeAyudaContenedor{
  display: block; 
  text-align: right;
  padding-right: 5px;
  padding-bottom: 5px;
}

.div_saeBtnControl{
  margin: 0 auto !important;
  text-align: center;
}

.saeIconoMenuPrincipal{
  width: 15px;
  margin: 2px;
}

/*********************************************************************************************/
/****************************          AUTOCOMPLETE       ************************************/
/*********************************************************************************************/




/*********************************************************************************************/
/****************************          botones        ****************************************/
/*********************************************************************************************/
.btn_Eliminar{
	padding: 6px 8px;
	box-shadow: 0 3px 0 0 #cc1a23;
	color: #FFF;
	background-color: #E5343D;
	border-color: #E5343D;
	outline: 0 !important;
	display: inline-block;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	    border-top-color: transparent;
	    border-right-color: transparent;
	    border-bottom-color: transparent;
	    border-left-color: transparent;
	border-radius: 4px;
	-webkit-appearance: button;
	margin: 0;
}


/*********************************************************************************************/
/****************************          botones paginacion ************************************/
/*********************************************************************************************/

/*Boton deshabilidtado*/
.pagination > .disabled > a, 
.pagination > .disabled > a:focus, 
.pagination > .disabled > a:hover, 
.pagination > .disabled > span, 
.pagination > .disabled > span:focus, 
.pagination > .disabled > span:hover {
    color: #555 !important;
    cursor: not-allowed;
    background-color: #eaeaea  !important;
    border-color: #eaeaea  !important;
}

/*Boton normal*/
.pagination > li > a, 
.pagination > li > span {
    color: #555 !important;
    background-color: #eaeaea;
    border: 1px solid #d6d6d6 !important;
    border-top-color: #d6d6d6 !important;
    border-right-color: #d6d6d6 !important;
    border-bottom-color: #d6d6d6 !important;
    border-left-color: #d6d6d6 !important;
}

/*Boton normal hover*/
.pagination > li > a:hover, 
.pagination > li > span:hover {
    color: #FFF !important;
    background-color: #FF5500;
    border: 1px solid #FF5500 !important;
    border-top-color: #FF5500 !important;
    border-right-color: #FF5500 !important;
    border-bottom-color: #FF5500 !important;
    border-left-color: #FF5500 !important;
}

/*boton activo */
.pagination > .active > a, 
.pagination > .active > a:focus, 
.pagination > .active > span, 
.pagination > .active > span:focus {
    background-color: #126ED8 !important;
    border-color: #126ED8  !important;
    color: #FFF !important;
}
/*boton activo hover*/
.pagination > .active > a:hover, 
.pagination > .active > span:hover {
    background-color: #FF5500 !important;
    border-color: #FF5500  !important;
    color: #FFF !important;
}
/*********************************************************************************************/
/****************************        preloader        ****************************************/
/*********************************************************************************************/
.pld_sae_CF{
	position: fixed;
  left: 0px;
  top: 0px;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999;
}


/*********************************************************************************************/
/*****************        CARGA SISTEMAS MODULOS SUBMODULOS        ***************************/
/*********************************************************************************************/
/*


FALTA Actualizar
*/

.saeInputNavegacionActual{
  color: #FFF;
}

.saeWidth40{
  width: 40px;
}

.saeWidth30{
  width:30px;
}

.saeWidth25{
  width:25px;
}
/*********************************************************************************************/
/****************************         TABLAS          ****************************************/
/*********************************************************************************************/


.saeTablaIconosOrdenar{
  display: inline-block;
  float: right;
}
/**********************************/
/*********  Detalle ***************/
/**********************************/
.saeDetalleIcono{
  color: #333 !important;
}
.saeDetalleIcono:hover{
  color: #FFF !important;
}

.saeDetalleFila{
  background-color: #34495E;
  color: #FFF;
  padding: 20px;
}

.saeDetalleTitulo{
  background-color: #126ED8;
  color: #FFF;
  padding: 5px;
  display: block;
}
.saeDetalleContenido{
  background-color: #FFF;
  color: #333;
  padding: 5px;
  display: block;
}
/**********************************/
/*********  Detalle ***************/
/**********************************/



.saeTableResposive{
  background-color: red;
}

#saeTabla_div {
    overflow: auto;

}

/*********************************************************************************************/
/****************************       PAGINACION        ****************************************/
/*********************************************************************************************/
/*Basica*/
.pagination > li > a, 
.pagination > li > span {
    color: #333 !important;
    background-color: #FFF  !important;
    border: 1px solid #e5e5e5e  !important
}

/*Basica*/
.pagination > li > a:hover, 
.pagination > li > span:hover {
    color: #FFF !important;
    background-color: #EE6A23  !important;
    border: 1px solid #EE6A23  !important
}

/*PREV y NEXT*/
.pagination > li.pagination-next > a, 
.pagination > li.pagination-next > span,
.pagination > li.pagination-prev > a, 
.pagination > li.pagination-prev > span
 {
    color: #FFF !important;
    background-color: #126ED8  !important;
    border: 1px solid #126ED8  !important
}

/*PREV y NEXT*/
.pagination > li.pagination-next > a:hover, 
.pagination > li.pagination-next > span:hover,
.pagination > li.pagination-prev > a:hover, 
.pagination > li.pagination-prev > span:hover
 {
    color: #FFF !important;
    background-color: #EE6A23  !important;
    border: 1px solid #EE6A23  !important
}


/*PREV y NEXT*/
.pagination > li.pagination-next.disabled > a:hover, 
.pagination > li.pagination-next.disabled > span:hover,
.pagination > li.pagination-prev.disabled > a:hover, 
.pagination > li.pagination-prev.disabled > span:hover
.pagination > li.pagination-next.disabled > a, 
.pagination > li.pagination-next.disabled > span,
.pagination > li.pagination-prev.disabled > a, 
.pagination > li.pagination-prev.disabled > span
 {
    color: #585858 !important;
    background-color: #C3C3C3  !important;
    border: 1px solid #C3C3C3  !important
}


/*********************************************************************************************/
/****************************         TEXTO           ****************************************/
/*********************************************************************************************/
.saeMinuscula{
  text-transform: lowercase;
}

.saeMayuscula{
  text-transform: uppercase;
}

.texto_verde{
  color: #17A88B !important;     
}
.texto_amarillo{
  color: #D2BD0D !important;     
}
.texto_rojo{
  color: #D20D21 !important;     
}
.texto_blanco{
  color: #FFFFFF !important;     
}
.texto_centrado{
  text-align: center;
}
.negrita{
  font-weight: 400;
}

.saeFondoAdvertencia{
  background-color: #F57900 !important;
  color: #FFF !important;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
}


.saeBusquedaMostrar,
.saeConfiguracionMostrar{
  font-weight: 600;
  margin-bottom: 5px;
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}
#saeBusquedaFlecha,
#saeBusquedaLupa,
#saeConfiguracionFlecha,
#saeConfiguracionConf{
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFF;
  cursor: pointer;
}

.saeColorFantasmaOrdenColumnas{
  background-color: #126ED8;
}
.filtered{
  background-color: #126ED8;
  color: #FFF;
}
.saeIconoOrdenColumnasMover{
  font-size: 2rem;
  color: #126ED8;
  vertical-align: middle;
}
.saeTextoOrdenColumnasMover{
  font-size: 1.2rem;
  color: #333;
  font-weight: 600; 
  vertical-align: middle;
}
.saeTituloMultiSelect{
  background-color: #126ED8;
  color: #FFF;
  text-align: center; 
}

/************************************************************************/
/*********************  saeIconoTablaOrdenar       *********************/
/************************************************************************/
.saeIconoTablaOrdenar{
  color: #FFF;
  cursor: pointer;
}
.saeIconoTablaOrdenar:hover,
.saeIconoTablaOrdenarActivo{
  color: #F50;
}


/************************************************************************/
/*********************   Spinner carga de datos 2   *********************/
/************************************************************************/
.saePreloaderContainerButton {
  --color: #fff;
  --background: #34495E;
  --height: 41px;
  --width: 160px;
  --icon: #FFF;
  padding: 0;
  cursor: pointer;
  text-align: center;
  position: relative;
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  width: var(--width);
  letter-spacing: .5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color);
  line-height: var(--height);
}
.saePreloaderContainerButton:before, .saePreloaderContainerButton:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}
.saePreloaderContainerButton:before {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: var(--before-w, var(--width));
  height: var(--before-h, var(--height));
  border-radius: var(--before-r, 7px);
  background: var(--background);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: width .3s, height .3s, border-radius .2s;
  transition: width .3s, height .3s, border-radius .2s;
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.saePreloaderContainerButton:after {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: #333;
  z-index: 2;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.saePreloaderContainerButton span {
  z-index: 1;
  display: block;
  position: relative;
  opacity: var(--span-o, 1);
  -webkit-transform: scale(var(--span-s, 1));
          transform: scale(var(--span-s, 1));
  -webkit-transition: opacity .3s, -webkit-transform .2s;
  transition: opacity .3s, -webkit-transform .2s;
  transition: opacity .3s, transform .2s;
  transition: opacity .3s, transform .2s, -webkit-transform .2s;
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.saePreloaderContainerButton svg {
  width: 15px;
  height: 13px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  stroke: #FFF;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  stroke-dasharray: 17px;
  stroke-dashoffset: var(--svg-o, 17px);
  -webkit-transition: stroke-dashoffset .3s ease;
  transition: stroke-dashoffset .3s ease;
}
.saePreloaderContainerButton.processing {
  --before-w: 41px;
  --before-h: 41px;
  --before-r: 22px;
  --span-o: 0;
  --span-s: .6;
  --after-s: 1;
  --svg-o: 34px;
}

.saePreloaderContainerButton.processing:after {
  -webkit-animation: dot 1s linear forwards;
          animation: dot 1s linear forwards;
}
.saePreloaderContainerButton.processing svg {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

@-webkit-keyframes pulse {
  4% {
    -webkit-transform: translate(-50%, -50%) scaleX(1.1);
            transform: translate(-50%, -50%) scaleX(1.1);
  }
  8% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  24%,
    56%,
    88% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
  40%,
    72% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes pulse {
  4% {
    -webkit-transform: translate(-50%, -50%) scaleX(1.1);
            transform: translate(-50%, -50%) scaleX(1.1);
  }
  8% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  24%,
    56%,
    88% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
  40%,
    72% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
}
@-webkit-keyframes dot {
  8% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  16% {
    -webkit-transform: scale(1) rotate(30deg) translateX(48px);
            transform: scale(1) rotate(30deg) translateX(48px);
  }
  95% {
    -webkit-transform: scale(1) rotate(1000deg) translateX(48px);
            transform: scale(1) rotate(1000deg) translateX(48px);
  }
  100% {
    -webkit-transform: scale(0.125) rotate(1050deg) translate(52px, -6px);
            transform: scale(0.125) rotate(1050deg) translate(52px, -6px);
  }
}
@keyframes dot {
  8% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  16% {
    -webkit-transform: scale(1) rotate(30deg) translateX(48px);
            transform: scale(1) rotate(30deg) translateX(48px);
  }
  95% {
    -webkit-transform: scale(1) rotate(1000deg) translateX(48px);
            transform: scale(1) rotate(1000deg) translateX(48px);
  }
  100% {
    -webkit-transform: scale(0.125) rotate(1050deg) translate(52px, -6px);
            transform: scale(0.125) rotate(1050deg) translate(52px, -6px);
  }
}




.saePreloaderContainer {
  min-height: 200px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  background: #FFF;
}

/************************************************************************/
/*********************   Spinner carga de datos 2   *********************/
/************************************************************************/

/************************************************************************/
/*********************   Spinner carga de datos     *********************/
/************************************************************************/
.saeSpinnerCargaDatos {
    margin: 0 auto;
    width: 70px;
    text-align: center;
}

.saeSpinnerCargaDatos > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.saeSpinnerCargaDatos .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.saeSpinnerCargaDatos .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
#saeSpinnerCargaDatosTexto{
  font-size: 14px;
  color: #333;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}




/*********************************************************************************************/
/***************************** FULLSCREEN POPUP   ********************************************/
/*********************************************************************************************/
.saeVentanaFSPU {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 16777271;
    top: 0;
    left: 0;
    background-color: #FFF;
    overflow-y: hidden;
    transition: 0.5s;
    color:#333;
}
.saeVentanaFSPU_titulo {
    color: #FFF;
    text-align: center;
    box-sizing: border-box;
    line-height: 130px;
    color: #FFF; 
    background-color: #0667D6;
}
.saeVFSPU_titulo {
    font-size: 4rem;
}
.saeVentanaFSPU .saeVentanaFSPU_btn_cerrar {
    position: absolute;
    top: -5px;
    right: 45px;
    font-size: 5rem;
    color: #FFF;
}

.saeVentanaFSPU_contenido {
    position: relative;
    top: 0%;
    width: 100%;
    text-align: center;
    margin-top: 5%;
    padding: 20px;
    display: inline-block;
    font-size: 1.4rem;
}
.saeVentanaFSPU_botones{
    display: block;
    text-align: center;
}

.saeVentanaFSPU_btn01{
   color: #FFF !important;  
   margin-top: 2%;
   font-size: 1rem !important;
   padding: 10px 20px !important;
   background-color: #2E3436 !important;
   display: block !important;
   margin: 5px auto;
   min-width: 25%; 
}

.saeVentanaFSPU_btn02{
   color: #FFF !important;  
   margin-top: 2%;
   font-size: 1rem !important;
   background-color: #2E3436 !important;
   display: block !important;
   margin: 5px auto;
   min-width: 25%; 
}
.saeVentanaFSPU_btn03{
   color: #FFF !important;  
   margin-top: 2%;
   font-size: 1rem !important;
   background-color: #2E3436 !important;
   display: block !important;
   margin: 5px auto;
   min-width: 25%; 
}








/*********************************************************************************************/
/****************************     simple-keyborad     ****************************************/
/*********************************************************************************************/
.simple-keyboard{
    position: fixed;
    z-index: 9000 !important;
    margin: 0 auto !important; 
    width: 50% !important;
    top: 70%;
    left: 50%;

}

.simple-keyboard.hg-button{
  color: #333  !important;
}
.saeSKBefore::before{
    content: "";
    display: block;
    width:100% !important;
    height: 40px !important;
    right: 0;
    position: sticky;
    filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
    
}
.saeSKNoBefore::before {
  display:none !important;
}
/********************************************************************/
/*********************   Temas personalizados ***********************/
/********************************************************************/
.simple-keyboard.hg-theme-default.saeTemaTecladoVirtual {
    background-color: rgba(0, 0, 0, .1); /*Color del fondo*/
    padding: 5px; /*padding*/
    border-radius: 5px /*radius*/
}

.simple-keyboard.hg-theme-default.saeTemaTecladoVirtual .hg-button {
    box-shadow: 0 0 3px -1px rgba(0, 0, 0, .3); /*color de la sombra de los botones*/
    height: 40px;
    border-radius: 5px;
    padding: 5px;
    background: #FFF;  /*color de lo botones*/
    border-bottom: 1px solid #b5b5b5; /*color de abajo de los botones*/
}

.simple-keyboard.hg-theme-default.saeTemaTecladoVirtual .hg-button:hover {

    background: #a76565 !important;  /*color de lo botones*/

}

.simple-keyboard.hg-theme-default.saeTemaTecladoVirtual .hg-button:active,
.simple-keyboard.hg-theme-default.saeTemaTecladoVirtual .hg-button:focus {
    background: #FCE94F;  /*color de lo botones*/
}

.simple-keyboard.hg-layout-default .hg-button.hg-highlight {
  box-shadow: 0px 0px 40px 5px rgba(255, 255, 0, 0.5);
  z-index: 1;
}

.simple-keyboard.hg-layout-default .hg-button.hg-red {
  background: rgb(255, 0, 0, 0.7);
  color: white;
}


.simple-keyboard.hg-theme-default.saeTemaTecladoVirtual .hg-button.hg-selectedButton {
    background: rgba(5, 25, 70, .53);
    color: #fff
}





.saeMaxlengthDanger{
  background-color: #a60000;
  color: #FFF;
  padding: 2px;
}

.saeMaxlengthWarning{
  background-color: #EDD400;
  color: #FFF;
  padding: 2px;
}
.saeMaxlengthSuccess{
  background-color: #2CA759;
  color: #FFF;
  padding: 2px;
}












/*********************************************************************************************/
/*****************************       Floating     ********************************************/
/*********************************************************************************************/

#floating-button{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #db4437;
  position: fixed;
  bottom: 30px;
  left: 15px;
  cursor: pointer;
  box-shadow: 0px 2px 5px #666;
  z-index: 16777271;
}

.plus{
  color: white;
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 55px;
  font-size: 38px;
  font-family: 'Roboto';
  font-weight: 300;
  animation: plus-out 0.3s;
  transition: all 0.3s;
}

#container-floating{
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 30px;
  right: 30px;
  z-index: 50px;
}

#container-floating:hover{
  height: 400px;
  width: 90px;
  padding: 30px;
}

#container-floating:hover .plus{
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}

.edit{
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
}

#container-floating:hover .edit{
  animation: edit-in 0.2s;
   animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes edit-in{
    from {opacity: 0; transform: rotateZ(-70deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

@keyframes edit-out{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(-70deg);}
}

@keyframes plus-in{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(180deg);}
}

@keyframes plus-out{
    from {opacity: 0; transform: rotateZ(180deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

.nds{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  z-index: 300;
  transform:  scale(0);
  cursor: pointer;
}

.nd1{
  background: #d3a411;
  right: 40px;
  bottom: 120px;
  animation-delay: 0.2s;
    animation: bounce-out-nds 0.3s linear;
  animation-fill-mode:  forwards;
}

.nd3{
  background: #3c80f6;
  right: 40px;
  bottom: 180px;
  animation-delay: 0.15s;
    animation: bounce-out-nds 0.15s linear;
  animation-fill-mode:  forwards;
}

.nd4{
  background: #ba68c8;
  right: 40px;
  bottom: 240px;
  animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

.nd5{
  background-image: url('https://lh3.googleusercontent.com/-X-aQXHatDQY/Uy86XLOyEdI/AAAAAAAAAF0/TBEZvkCnLVE/w140-h140-p/fb3a11ae-1fb4-4c31-b2b9-bf0cfa835c27');
  background-size: 100%;
  right: 40px;
  bottom: 300px;
  animation-delay: 0.08s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

@keyframes bounce-nds{
    from {opacity: 0;}
    to {opacity: 1; transform: scale(1);}
}

@keyframes bounce-out-nds{
    from {opacity: 1; transform: scale(1);}
    to {opacity: 0; transform: scale(0);}
}

#container-floating:hover .nds{

  animation: bounce-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

#container-floating:hover .nd3{
  animation-delay: 0.08s;
}
#container-floating:hover .nd4{
  animation-delay: 0.15s;
}
#container-floating:hover .nd5{
  animation-delay: 0.2s;
}

.letter{
  font-size: 23px;
  font-family: 'Roboto';
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  line-height: 40px;
}

.reminder{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  line-height: 40px;
}

.profile{
  border-radius: 50%;
  width: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
}