/*!
 * GM CSS v1.0
 *
 * css application GM
 * 
 */

 body {
	background-color: white !important;
	color: #000;
	font-family: Poppins !important;
	font-size: 11px;
	margin: 0;
}

legend {
    display: block;
	width: 100%;
	padding: 0;
	margin-bottom: 20px;
	font-size: 18px !important;
	line-height: inherit;
	color: #333;
	border: 0;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: currentcolor;
	color: #17a2b8 !important;
	font-size: 16px !important;
}

.legendGrey{
	background-color: gray !important;
	color: white !important;
	padding: 5px !important;
	border-radius: 3px !important;
	margin-left:7px !important;
	margin-right:15px !important;
}

/*!
 * VARIABLES
 */

:root {
  --main-bg-color: #004631;
}

/* 	---- */
.main-sidebar{
	font-size: 14px !important;
}

.subtitle{
	color: #7e7e7e !important;
	border-bottom: 1px solid #7e7e7e !important;
}

.subBox_GM{
	height:auto;
	overflow:hidden;
	border:2px #DBE6EB solid;
	padding:10px;
	border-radius: 10px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 1px 0 rgba(0, 0, 0, 0.19);
	margin-bottom:25px;
}

.banner-inner {
	background-image: url("../../../img/gm/HOPRO/logo.jpg");
}

/* Login.jsp: imagen Logo */

.logoLogin{
    margin: auto;
    text-align: center;
    padding-top: 80%;
    padding-bottom: 10%;
    margin-left:-60px !important;
    padding: 15px;
}
/* Login.jsp */

.logo{
  width:180px;
  height:180px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  }
  
.logo img{
  width: 100%;
}

@media all and (min-width: 500px) and (max-width: 1000px)
{  
.logo{
  width:280px;
  height:280px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  }
}
.logo img{
   width:100%;
}

#notificationMenu_fullName{
	display:inline-block !important;
}

@media all and (min-width: 0px) and (max-width: 768px){
	.logo{
		display:none !important;
	}
	
	#notificationMenu_fullName{
		display:none !important;
	}
}

.skin-blue .main-header .navbar{
	background-color: var(--main-bg-color) !important;
}

.center {
	text-align: center;
	padding-bottom:10px;
}

/* INICIO LOADING GIF 
	los que tienen div están preparados para ejecutarse dentro de un div en vez de en toda la página. 
	<div class="box-body"> 
        <div class="overlay" style="height:200px;background: rgba(255,255,255,0.7);">
            <img id="loadingGifImageDiv" src='${ctx}/styles/img/gm/GM/pageLoader.gif'  alt="Logo" style="position:relative;top:1%;"> 
         </div>
	</div>
	
	El que ocupa toda la página se carga:
	
	<%@ include file="/common/loading.jsp" %>
	
	Al principio de la misma.
	
	Recuerda que hay que parar el artefacto con javascript cuando consideres que ya se puede interactuar con la misma.
	
	Para el div
	$('.overlay').css("display","none");
	
	para el de toda la pagina
	$('.loadingGif').hide();
*/

#loadingGifImageDiv {
    position: relative;
    left: 45%;
    top: 45%;
    z-index: 9999;
}

#loadingGifImage {
    position: fixed;
    left: 45%;
    top: 45%;
    z-index: 9999;
}

#whiteFondoDiv {
    width: 50%;
    height: 200px;
    margin-left: 50px;
    color: #FFF;
    position:relative;
    z-index: 99999;
    opacity: .4;
    filter: alpha(opacity=40);
}

#whiteFondo {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: .4;
    filter: alpha(opacity=40);
}
/* FIN LOADING GIF */

/*footer*/ 
.footer a{
    color: #000;
    text-decoration: none;
}
.footer{
    color: #000;
    text-align: center;
}
/*footer end*/ 


/*loguin*/
.grayBody{
    background-color: #E9E9E9;
}

.login-container-box{
    border-top: 6px solid #var(--main-bg-color);
    background-color:#fff;
    padding: 20px;
    box-shadow: 0 10px 10px -2px rgba(0,0,0,0.12),0 -2px 10px -2px rgba(0,0,0,0.12);    
    width:20%;
}
.singtext{    
    font-size: 28px;  
    color: var(--main-bg-color);
    font-weight: 500;
    letter-spacing: 1px;
}
.submitButton{
    background-color: var(--main-bg-color);
    color: #fff;
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 10px 0px;
    width: 100%;
    margin-left: 2px;
    font-size: 16px;
    border-radius: 0px;
    outline: none;
}
.submitButton:hover,.submitButton:focus{
    color: #F2F2F2 !important; 
    font-weight: bold !important; 
    outline: none;
    background-color: #748F74;
}
.forGotPassword{
    background-color: #F2F2F2; 
    padding: 5px 0px;
    text-align: center;
	box-shadow: 0 10px 10px -2px rgba(0,0,0,0.12);    
	color:red;
	font-size:0.9em;
}

.logo-header{
	margin: 0 auto;
	padding: 8px 10px 8px 0;
	width: 570px;
}

#header {
    background: #fff;
    overflow: hiddent;
    border-bottom: 1px solid #ddd;
    left: 0;
    right: 0;
    top: 0;
}


.rightHomeUser {
    font-size: 10px;
    right: 10px;
    width: auto;
    -webkit-border-radius: 4px;
    border-radius: 4px 4px 4px 4px;
    z-index: 1100;
}

.titleBorde {
	border-bottom: 1px solid #CCDAD6;   
	border-top: 1px solid #CCDAD6;
	font-weight: bold;
	color: #fff;
	background-color: var(--main-bg-color);
	font-size: 15px;
    font-weight: bold;
    padding-bottom: 5px;
    padding-left: 30px;
    padding-top: 5px;    
}

.title {
	border-bottom: 1px solid #CCDAD6;   
	border-top: 1px solid #CCDAD6;
	font-weight: bold;
	color: #fff;
	background-color: #779A44;
	font-size: 15px;
    font-weight: bold;
    padding-bottom: 5px;
    padding-left: 30px;
    padding-top: 5px;    
}

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

.main-footer{
	background-color: var(--main-bg-color) !important;
	color:white !important;
}

.btn-gm{
	background-color: #536E53   !important;
	color:white !important;

}

.btn-default {
	min-width: 25px !important;
}

.btn-gm:hover,.btn-gm:focus{
    color: #F2F2F2 !important;  
    outline: none;
    background-color: #748F74 !important;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: var(--main-bg-color) !important;
    border-color: #748F74 !important;
}

/* Utilizado en provider ext para acceder a las homologaciones. */
.borderButton{
	border: 1px #3c8dbc solid !important;
	color: #3c8dbc !important;
	background-color: white !important;
}

.ui-widget-overlay {
   background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 80% 80% repeat-x;
   opacity: .80;
   filter: Alpha(Opacity=80);
}

.bold{
	font-weight: bold;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: #748F74 !important;
}

.skin-blue .main-header .logo:hover {
    background-color: #FFFFFF !important;
}

.skin-blue .main-header li.user-header {
    background-color: #748F74 !important;
}

/* modificacion template. */
.box {
    border-top: 3px solid #779A44 !important;
}

.skin-blue .sidebar-menu > li.header {
    color: #6E8792 !important;
}

.btn-xs-gm{
	padding: 3px !important;
	font-size: 11px !important;
	line-height: 0.5 !important;
	border-radius: 3px !important;
	margin-left:5px !important;
}

.main-footer{
	background-color: #748F74 !important;
}
.appName{
	color: white;
	font-weight: bold;
	display: inline-block;
	float: left;
	margin-top: 5px;
	font-size: 20px !important;
	font-family: Poppins !important;
}

.skin-blue .sidebar-menu > li.active > a{
	border-left-color: #cb1818 !important;
}

.photoIcon{
    width:150px;
    margin-top: 40px;
}

.imgPerson {
    border: medium solid #7e7e7e;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    width: 200px;
    height: 200px;
}

.img-preview {
    border: medium solid #7e7e7e;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    width: 200px;
}

#photo{
	width: 200px;
    height: 200px;
    margin: 0 auto;
    cursor: hand;
    cursor: pointer;
}

/* Para el hover de la foto del perfil */
.overlayPhoto {
  	position: absolute;
  	margin-top: 43px !important;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200px;
	width: 200px;
	margin:0 auto;
	opacity: 0;
	transition: .5s ease;
	background-color: white;
	margin-top: 30px;
}

/* Para el hover de la foto del perfil */
#photo:hover .overlayPhoto {
  opacity: 0.5;
}

/* Previsualización imagen guardando proporciones originales */
.tooltipImageOriginalProportion{
	border: medium solid #7e7e7e;
    margin: 0 auto;
    overflow: hidden;
    width: 200px;
}

#text {
  color: #748F74;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

/* Para el tooltip de ayuda */
.help{
	top:-5px !important;
	font-size: 10px !important;
	cursor: hand;
    cursor: pointer;
}

.grey-second{
	background-color:#DCDCDC
}

/*aside control*/ 
.control-sidebar a{
    /*color: #fff;*/
    cursor:pointer; cursor: hand
}

.table-box-gm {
    background-color: #f9f9f9;
    padding: 0.01em 16px;
    margin: 20px 0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    border: 1px #e3e3e3 solid;
}

/*footer end*/ 


.ui-widget-header{
	background-color:var(--main-bg-color) !important;
	color:white !important;
}

.imgArt{
    border: medium solid #7e7e7e;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    height: 280px;
}

.nav-tabs-custom {
	    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1) !important;
	}
	
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: #cecece !important
}

.border{
	border:1px #DBE6EB solid;
}

.shadow {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

#watermark{
 opacity:0.2;
 z-index:0;
 color:grey;
 transform-origin: 0 0;
 transform: rotate(45deg);
 font-size: 1000%;
 text-align: center;
 position: absolute;
 margin-left:35%;
}


/*COLOR APLICACIONES*/ 
.HOPRO{
	color:var(--main-bg-color);
}

.GA{
	color:var(--main-bg-color);
}

.ART{
	color:#c92c49;
}

/*Sobre escrito para eliminar la negrita en las etiquetas de informacion*/ 
.label {
	font-weight:normal !important;
}

.row-red{
	background-color: #ffcccc !important;
}
	
.row-orange{
	background-color: #ffcc80 !important;
}

.row-yellow{
	background-color: #ffffcc !important;;
}

.row-green{
	background-color: #d4fb93 !important;;
}

.row-grey{
	background-color: #e8eae5 !important;;
}

.row-blue{
	background-color: #9fd5d1 !important;;
}

/*Para el calendario || Dia seleccionado*/ 
.fc-highlight{
	background:#779A44 !important;
	opacity: .3;
}

/* Modificado del Knob laber de AdminLte para poner un pie a la tabla personalizado */ 
.footer-label{
	color: var(--main-bg-color);
	font-weight: 100;
	font-size: 12px;
	margin-bottom: .3em;
}

#label-logOut{
	padding:1px !important;
}

.head-treeview-menu {
	background-color: #008d4c !important;
	border-radius: 2px blue solid !important;
	border-radius: 2px;
	border: 1px solid #0B0B3C;
    border-left-color: rgb(11, 11, 60);
    border-left-style: solid;
    border-left-width: 1px;
	border-left-color: rgb(51, 122, 183);
	border-left-style: solid;
	border-left-width: 1px;
	color: white !important;
}

.head-treeview-menu:hover {
	background-color: var(--main-bg-color) !important;
	border-radius: 2px blue solid !important;
	border-radius: 2px;
	border: 1px solid #0B0B3C;
    border-left-color: rgb(11, 11, 60);
    border-left-style: solid;
    border-left-width: 1px;
	border-left-color: rgb(51, 122, 183);
	border-left-style: solid;
	border-left-width: 1px;
	color: white !important;
}

/* Elimina un borde negro en la tabla que apareció al actualizar el datatables a la versión 10 */
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 0px solid #111 !important;
}

/* para los box de clasificación en notificaciones del calendario */
.well-notification {
    padding: 5px !important;
    border-radius: 3px;
	background: #f4f4f4;
	margin: 5px;
	margin-left: 15px;
	border: 1px solid #CBCBF1 !important;
}

.well-notification-row {
	margin-left: 15px;
}

.well-notification h5{
	font-size: 12px !important;
	font-weight: bold;
}

/* ##datatables ##nohead ##css */
	.noHeader .dataTables_scrollHead { display:none;}
	
/* ##datatables ##nohead ##css */
	.noHeader .dataTables_scrollHead { display:none;}
	.noHeader .table > thead > tr > th,
	.noHeader .table > tbody > tr > th,
	.noHeader .table > tfoot > tr > th,
	.noHeader .table > thead > tr > td,
	.noHeader .table > tbody > tr > td,
	.noHeader .table > tfoot > tr > td{
		border-top:0px solid !important;
	}

.label-close{
	font-size: 10px;
	margin-right: -18px;
	margin-bottom:18px;
}

.nav-pills .nav-link:not(.active):hover {
  color: var(--main-bg-color) !important;
}
.nav-link .btn .btn-block .btn-outline-primary .btn-sm .active) {
  color: white !important;
}

table.dataTable thead th, table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 0px solid #111 !important;
}

/* Añadido xk al migrar a l anueva version de adimnlte3 no se ajustaban al ancho las tablas, seguramente el adminlte3 al tener su propio datatables tenga un 
sobreescritos métodos. Pero prefiero tener independizada está biblioteca según se pulbica nativamente */
table.dataTable {
  width: 100% !important;
}

/* Para los botones del datatables editor */
div.dt-buttons{
	padding: 10px !important;
}

/* NotificationBarButton guarda el estilo de la barra de notificacion */
.notificationBarButton{
	border: 0px #3c8dbc solid !important;
	color: rgba(0, 0, 0, 0.5) !important;
	background-color: white !important;
}

.nav-treeview > .nav-item > .nav-link.active, .nav-treeview > .nav-item > .nav-link.active:focus, .nav-treeview > .nav-item > .nav-link.active:hover{
	background-color: #6c757d !important;
}

aside{
	background-color: white !important;
}

/* Redondear botones del datables editor */
button.dt-button, div.dt-button, a.dt-button, input.dt-button{
	border-radius:5px !important;
}

.btnComponentGM:hover{
	background-color: red !important;
	cursor: pointer !important;
}

.toast-warning{
	color:black !important;
}

.fa-tag--headerToolbarIcon{
	color:#7e7e7e ;
	cursor: pointer;
}

.login-container {
    display: grid;
	place-items: center;
	width:100%;
	height:100vh;
}

.DTE_Header{
	background-color: white !important;
	font-size: -0.7em !important;
}

.DTE_Footer{
	background-color: white !important;
	font-size: -0.7em !important;
}

/* Evita que s eponga de color gris el select en hover */
.callout a:hover {
  color: black !important;
}

/* COMPONENTE WEB APLICACIONES MASAVEU EMERGENTE */
	.square-group {
	  display: flex;
	  padding-top:0px !important;
	  padding-bottom:0px !important;
	  padding:50px;
	  margin:0 auto;
	  flex-wrap: wrap;
	}

	.squareExt{
	  min-width: 5em;
	  height: 85px;
	  width: 85px;
	  border-radius: 5px;
	  border: 1px solid #8a959f;
	  margin-right: 12px;
	  margin-bottom: 12px;
	  position: relative;
	  padding-top:8px;
	  padding-bottom:8px;
	}

	.square {
	  min-width: 5em;
	  height: 100px;
	  width: 100px;
	  border-radius: 5px;
	  border: 1px solid #8a959f;
	  margin-right: 12px;
	  margin-bottom: 12px;
	  position: relative;
	  padding-top:8px;
	  padding-bottom:8px;
	}

	.square-symbol {
	    position: absolute;
	    top: 25;
	    left: 50%;
	    transform: translateX(-50%);
	    min-width: 3em;
	}
	
	.square-text {
	    position: absolute;
	    top: 60%;
	    left: 50%;
	    transform: translateX(-50%);
	    width:100%;
	    text-align:center;
	    color:white;
	}
	
	.square-subText {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translateX(-50%);
	    width:100%;
	    text-align:justify;
	    color:white;
	    padding: 12px;
	}
	
	.square-selected {
	    border-width: 2px;
	}

/* FIN || COMPONENTE WEB APLICACIONES MASAVEU EMERGENTE */