@import url('https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
@import url('/css/custom-theme.css');

:root{
    --primary: #004274;    
    --secondary:#009CDE;
    --info: #272E32;
    
    --blue-soft: #009CDE;    
    --blue-soft2:#004274;
    --blue-dark: #00335A;    
    --green:#2C9F79;
    --green-dark:#1a7959;
    --dark1: #272E32;    
    --red: #DA3C27;
    --red-dark: #92281a;
    --orange: #F8A25B;
    --orange-dark: #ad6224;
    --clear: rgb(242, 241, 238, .8);
    --clear2: rgba(63, 128, 185, .5);    
}
/*****************************************************************************************************************************************/
/** Overlay */
#overlayer { position: absolute !important;top: 0px; left: 0px; width: 100%; min-height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; }
.overlayer_text {position: absolute;top: 50%;left: 50%;font-size: 2em;color: white;text-align: center;transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); }
/*****************************************************************************************************************************************/
/** botones */
.btn-blue { background-color: var(--blue-soft); color: var(--clear) !important;}
.btn-blue:hover { background-color: var(--blue-dark); }
.btn-green{ background-color: var(--green); color: var(--clear) !important; }
.btn-green:hover{ background-color: var(--green-dark); }
.btn-red{ background-color: var(--red); color: var(--clear) !important; }
.btn-red:hover{ background-color: var(--red-dark); }
.btn-orange{ background-color: var(--orange); color: var(--dark1) !important; }
.btn-orange:hover{ background-color: var(--orange-dark); }
footer button.active { background-color: var(--clear) !important; color: var(--blue-soft2) !important;}
.options button {font-size: 1.8em; margin-top: 0px;}
button:disabled {border: 0px !important;}
button,.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.noshadow { box-shadow: none !important; border: none !important;}
.nobackground{ background-color: transparent !important;}
span.btn { font-size: 150% !important; border: 0px !important;}
button:disabled{ background-color: rgba(255, 255, 255, .5) !important; color:rgba(0, 0, 0, 0.5) !important}
.btn-blue { background-color: var(--blue-soft2); color: var(--clear) !important;}
.btn-blue:hover { background-color: var(--blue-dark); }
.btn-clear { background-color: white; color: #000 !important;}
.btn-clear:hover { background-color: var(--clear); }
/*****************************************************************************************************************************************/
/** Tabs */
uib-tab-heading{
	color: var(--blue-soft);
}
.tab {
    border: none !important;
	padding: 10px 5px;
	background-color: white;
}
.tab a {
	color: var(--blue-dark);
}
/*****************************************************************************************************************************************/
/** botones redondos */
.btn{
    color: var(--blue-soft2);
    border: none;
}
.btn-empty {
    color: var(--blue-soft2);
    border: 1px solid var(--clear);
}
.btn-empty:hover{
    color: var(--clear);
    border: 1px solid var(--blue-soft2);
    background-color: var(--clear2);
}
.btn-circle {
    width: 35px !important;
    height: 35px;
    border-radius: 50% !important;
    font-size: 1em !important;
}
.btn-circle-xl {
    width: 60px !important;
    height: 60px;
    padding: 10px auto !important;
    border-radius: 50% !important;
    font-size: 30px !important;
}
/*****************************************************************************************************************************************/
/** Efectos, motivo, varios */
.cursor, .pointer { cursor: pointer !important;}
.nocursor { cursor: not-allowed !important;}

/** Esto hace los campos select2 mas altos (50px) */
.ui-select2-remove { position: absolute; top:20px; right:7px !important; cursor: pointer; color: var(--red) !important; font-size: 120%;}
.select2-container--default .select2-selection--single { height: 50px !important;}
.select2-container .select2-selection--single .select2-selection__rendered { margin-top: 20px !important };

label { color: var(--blue-dark) !important;}
hr { border-color: var(--blue-dark); margin:5px !important; }
h3{ font-size: 150%;}
.text-red { color:var(--red) !important}
.infoErrors { font-size: 90% !important; color:var(--red) !important;}

.wallpaper{
	position: absolute;
  	height: 100vh;
  	width: 100%;  	
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
  	background-image: url("/images/wallpapers/wallpaper.png");
  	background-size: cover; 
  	opacity: .2;	
}

/* bootstrap boton redondo */
.btn-circle.btn-xxs {
    width: 18px !important;
    height: 18px !important;
    padding: 2px 0px !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 10px  !important;
    line-height: 1.42857 !important;
}
.btn-circle.btn-xs {
    width: 32px !important;
    height: 32px !important;
    padding: 6px 0px !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 10px  !important;
    line-height: 1.42857 !important;
}
.btn-circle.btn-sm {
    width: 40px !important;
    height: 40px !important;
    padding: 6px 0px !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 12px  !important;
    line-height: 1.42857 !important;
}
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}


/* Bootstrap fix */


/* Genericos */
section.gesbox { height: 100%; }

/********************************************************************************/
/** Formularios y sus campos */
/* formularios, los labels salen descolocados */
.form-floating>label { top:-3px; left:8px; }
/** Campos file, ocultos */
input[type=file] { display: none !important}
.custom-file-input ~ .custom-file-label::after { content: "Seleccionar fichero"; }


/********************************************************************************/
/** Small devices */
@media (max-width: 768px) { 
	body,html{ font-size: .9em; }
	/* Ventanas modales. Para que no llenen todo el ancho */
	.modal-fit { margin:auto auto; max-width: 80% !important; }
	/* Oculta las columnas indicadas */
	.hide-small-device { display: none !important; }
}




/** Ventanas modales */
.modal-header { background-color: var(--primary); color: white; }
.modal-header img { position: absolute; top:10px; left:5px;  }
.modal-title { font-size: 2em; padding-left: 40px; }
.modal-body { font-size: 1.2em;  }

/** los combos selectpicker, tiene una sombra que no queremos, además de un color de fondo y otros detalles */
.selectpicker + button { box-shadow: none !important; border:0px solid #eee; top:2px; background-color: transparent; }
.selectpicker + button:hover { background-color: transparent;}