:root {
	--umigloGreen:  #608c62;
	--umigloGreenLight:	#D2DED3;
	--umigloRed:    #F14902;
	--umigloYellow: #F4B324;
	--umigloGrey:   #A8A59F;
	--color1: var(--umigloRed);
	--color2: var(--umigloYellow);
	--colorTxt: #282320;
	--colorSoftGray: var(--umigloGrey);
	--colorGestor: #F8BC39;
	/* --colorAdmin: #48974a; */
	--colorAdmin: var(--umigloGreen);
	--colorAlumno: var(--umigloRed);
	--colorGreen: #48974a;
	--colorGreen2: #378729;
	--colorGreen3: #70d375;
	--colorBlue: #30a7e0;
	--colorBlue2: #1d8bc0; 
	--colorYellow: #F8BC39;
	--colorRed: #dd1a1a;
}

a {text-decoration: none;}

/****** login *******/
div.login {
   /*  background: linear-gradient(-45deg, #f14902, #F4B324, #ff9c1f, #f14902);
    background-size: 400% 400%;
    animation: gradient 13s ease infinite; */
    height: calc(100vh - 68px);
}

@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

.loginInicio{
	width:400px;
	max-width:95%;
	position:relative;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	opacity: 0;
	animation: fadeInTop 1s ease-in both;}
	
@keyframes fadeInTop {
	from {
		opacity: 0;
		transform: translate3d(-50%, -100%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(-50, -50%, 0);
	}
}
.loginInicioBox {
	background:#fff;
	border-radius:30px;
	box-shadow:0 0 8px #777;
	padding:10px 20px 20px 20px;
	text-align:center;
	margin-bottom:10px;}
	
.loginInicioBox img {
	padding-bottom:10px;
	width:140px;}
	
.loginInicioLegend {
	font-size:11px;
	width:100%;
	text-align:center;
	color:var(--color1);}
	
.loginInicioLegend a{color:var(--color1);}
.loginInicioLegend img{
	padding:0 5px;
	width:110px;}
	
input:-internal-autofill-selected {
	appearance: menulist-button;
	background-image: none!important;
	background-color:#fff!important;}
	
div.home {
    height: 100vh;
    position:relative;
   /*  background:var(--color2); */
}


.logoHome {
	position:absolute;
	text-align:center;
	font-size:35px;
	line-height:35px;
	/*text-transform:uppercase;*/
	color:var(--color2);
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	font-weight:lighter;
	letter-spacing:5px;
}

.logoHome img{
	width:300px;
	animation: 2s  circle-in-center both;
}
@keyframes circle-in-center {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(125%);
  }
}

.logoHome>div {
	animation-name: appear-in;
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes appear-in {
  from {
    opacity:0;
  }
  to {
    opacity:100%;
  }
}

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
	animation-delay: 2s;
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

.btn-flip {
  opacity: 1;
  outline: 0;
  color: #fff;
  line-height: 40px;
  position: relative;
  text-align: center;
  letter-spacing: 1px;
  display: inline-block;
  text-decoration: none;
  /*text-transform: uppercase;*/
  font-size:20px;
}
.btn-flip:hover:after {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
.btn-flip:hover:before {
  opacity: 0;
  transform: translateY(50%) rotateX(90deg);
}
.btn-flip:after {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  color: var(--color1);
  display: block;
  transition: 0.5s;
  position: absolute;
  background: #fff;
  border:1px solid var(--color1);
  font-size:20px;
  content: attr(data-back);
  transform: translateY(-50%) rotateX(90deg);
}
.btn-flip:before {
  top: 0;
  left: 0;
  opacity: 1;
  color: #fff;
  display: block;
  padding: 0 30px;
  line-height: 40px;
  transition: 0.5s;
  position: relative;
  border:1px solid var(--color1);
  background: var(--color1);
  content: attr(data-front);
  transform: translateY(0) rotateX(0);
}

	
/*****input interactiu*****/
.inputContainer {
	position: relative;
	height: 38px;
	width: 100%;
	margin-bottom: 15px;}
	
.inputContainer1ico {
	width:calc(100% - 50px)!important;
	float:left;
}

.inputContainer2ico {
	width:calc(100% - 95px);
	float:left;
}

.inputContainerTextImg {
	width:calc(100% - 175px);
	float:left;
}
	
.inputContainer .input {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	border: 2px solid var(--umigloGrey);
	border-radius: 7px;
	font-size: 14px;
	padding: 0 5px;
	outline: none;
	background: none;
	z-index: 1;
	color:#558657;
	}

.inputContainer .input[disabled] {border: 2px solid #DADCE0!important;}

.inputContainer .input[disabled]:hover {cursor:not-allowed;}

.inputContainer textarea.input {
	font-size: 13px;
	padding: 7px 3px 3px 5px;
	height: 150px;
	resize:none;
	}
	
.inputContainerText {
	height:150px;
}

.inputContainer:has(textarea) {	height:150px;}

.inputContainer .input::placeholder {color: transparent;}

.inputContainer .label {
	position: absolute;
	top: 50%;
	left: 3px;
	padding: 0 2px;
	background-color: white;
	color: #c9c9c9;
	font-size: 13px;
	transition: 0.5s;
	z-index: 0;
	font-weight: normal;
	transform: translateY(-50%);
	line-height: 14px;}
	
.inputContainer .input:focus + .label {
	top: -9px;
	left: 9px;
	z-index: 10;
	font-size: 13px;
	font-weight: 400;
	color: var(--colorAdmin);
	transform: none;}

.inputContainer .input[disabled]+label{z-index:1;}

.inputContainer .input:focus {border: 1px solid var(--colorAdmin);}

.inputContainer .input:not(:placeholder-shown)+ .label {
	top: -9px;
	left: 9px;
	z-index: 10;
	font-size: 13px;
	font-weight: 400;
	transform: none;}
	
.inputContainer i{
	position: absolute;
	top: 28%;
	right: 4%;
	cursor: pointer;
	color: lightgray;
	cursor:pointer;
	z-index: 1000;}

.inputContainerIcon {
	width:calc(100% - 50px)!important;
	float:left;}

.inputContainerIcon  + button {float:right;}

.inputObligatorio {border:2px solid var(--colorAdmin)!important;}

.inputError {
    color: var(--colorRed) !important;
    border-color: var(--colorRed) !important;
}

.inputContainerImg {
	width:150px;
	margin:0 auto;
	border-radius:10px;
	overflow:hidden;
	border:1px solid var(--colorSoftGray);
	margin-bottom:10px;
	position:relative;
}
.inputContainerImg:hover {
	cursor:pointer;
}

.inputContainerImg::after {
	width:60px;
	height:60px;
	background:rgba(255,255,255,0.6);
	text-align:center;
	border-radius:50%;	
	content:'\f093';
	font-family: "FontAwesome";
	font-size:30px;
	line-height:60px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity:0;
}

.inputContainerImg:hover:after {
	opacity:1;
}

.inputContainerImg img {
	width:100%;
}

.inputContainerCheck label {
	width: calc(100% - 32px);
    position: relative;
    top: 0;
}
/*****animated button*****/
.animated-button {
	position: relative;
	display: block;
	margin: 20px auto 0;
	padding: 6px 25px;
	color: #fff;
	font-size:16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	/*text-transform: uppercase;*/
	overflow: hidden;
	letter-spacing: .08em;
	border-radius: 5px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	background:#fff;}
	
.animated-button {
	color: var(--color1);
	cursor: pointer;
	display: block;
	position: relative;
	border: 1px solid var(--color1);
}
	
.animated-button:hover {
	color: #fff !important;
	background-color: var(--color1);
}
.animated-button.animated-right {
	color: var(--color1);
	cursor: pointer;
	display: block;
	position: relative;
	border: 1px solid var(--color1);
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);}

.animated-button.animated-right:hover {
	color: #fff !important;
	background-color: transparent;}

.animated-button.animated-right:hover:before {
	right: 0%;
	left: auto;
	width: 100%;}

.animated-button.animated-right:before {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 0px;
	z-index: -1;
	content: '';
	background: var(--color1);
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);}
	
	
/*****capçalera*****/
header {
    padding: 2px 15px 5px 15px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background:#e6e6e6;
}

.usuario {
	color:#999;
	font-size:12px;
	float:left;
	font-weight:bold;
	/*text-transform:uppercase;*/
	margin-top:3px;
}
.usuarioIconos {
	float:right;
}

.usuarioIconos a{
	margin-left:15px;
	color:var(--color1);
	font-size:13px;
	font-weight:bold;
	line-height:13px;
}
.logo {
	position:absolute;
	z-index:0;
	top:40px;
	right:25px;
}

.logo img{
	height:100px;
}

/*home*/

div.home {
    /* background: linear-gradient(-45deg, #f14902, #F4B324, #ff9c1f, #f14902);
    background-size: 400% 400%;
    animation: gradient 13s ease infinite; */
    height: calc(100vh);
    position:relative;  
}

@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}


.logoHome {
	position:absolute;
	text-align:center;
    font-size: 35px;
    line-height: 35px;
    /*text-transform: uppercase;*/
    color: var(--color2);
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	font-weight:lighter;
	letter-spacing:5px;
}

.logoHome img{
	width:300px;
	animation: 2s  circle-in-center both;
}
@keyframes circle-in-center {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(125%);
  }
}

.logoHome>div {
	animation-name: appear-in;
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes appear-in {
  from {
    opacity:0;
  }
  to {
    opacity:100%;
  }
}

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
	animation-delay: 2s;
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


.headerTit{
	padding: 60px 130px 30px 30px;
    font-size: 50px;
    line-height: 50px;
    float: left;
    color: var(--colorSoftGray);
    width: 100%;
    position:relative;
    margin-bottom:10px;
}

.headerTit>span{
	color:var(--color1);
	font-size:18px;
	/*text-transform:uppercase;*/
}

.headerSubtit{
	font-size: 30px;
	margin-top:20px;

}

.logueo {
	float: right;
	background:var(--color1);
    color: #fff;
    /*text-transform: uppercase;*/
    text-decoration: none;
    padding: 2px 10px;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 14px;
    line-height: 16px;
    margin-top: 1px;
}

.logueo:hover {
	background:#fff;
	color:var(--color1);
}

/*****menu*****/
.menuBox {
    /* border-bottom: 1px solid var(--color2);
    background: var(--color1); */
    width: 50%;
    overflow: auto;
    padding: 4px 0;
    clear:both;
}

.menu-container {
	list-style: none;
	margin:0;
	padding:0px;
}
.menuSelected{
	float:left;
	padding:0px 20px;
	list-style: none;
	text-decoration:none;
	color:var(--color2);
	/*text-transform:uppercase;*/
}

.menu{
	float:left;
	padding:0px 20px;
	list-style: none;
	text-decoration:none;
	color:var(--color1);
	/*text-transform:uppercase;*/
}

.menu:hover, .menuSelected:hover{
	color:#000;
	text-decoration:none;
}
#cssmenu #menu-button {display: none;}

/*****menu lateral*****/
.menuLateral {
    float: left;
    width: 270px;
    /* border: 2px solid #fff; */
    /* margin: 0 25px; */
    background: #efefef;
    padding: 20px;
    min-height: calc(100vh - 145px);
}

.menuLateralOpt {
    width: 100%;
    background: #f6f6f6;
    color: var(--colorGestor);
    position: relative;
    font-size: 22px;
    line-height:21px;
    height: 80px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 3px solid var(--colorGestor);
    text-align:center;
}

.menuLateralOpt>div{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	/*text-transform:uppercase;*/
	width:98%;
}

.menuLateralOptAct {
	background: var(--colorGestor);
    color: #fff;
    border: 3px solid var(--colorGestor);
}

.menuLateralOptAdm {
    color: var(--colorAdmin);
    border: 3px solid var(--colorAdmin);
}
.menuLateralOptActAdm {
	background: var(--colorAdmin);
	border: 3px solid var(--colorAdmin);
	color: #fff;
}

.zoom:hover {
	transition: transform .2s;
	transform: scale(1.05);
}

.boxCol {
	background: linear-gradient(to right, #efefef 270px, #fff 270px);
	float:left;
	width:100%;
}

.rightCol{
	float:left;
	width: calc(100% - 270px);
	padding-right: 30px;
	/* width:calc(100% - 310px);
	margin-right:30px; */
	padding-bottom:140px;
	background:#fff;
	min-height:calc(100vh - 145px);
	/* height:100vh; */
}
.fullCol{
	float:left;
	width: 100%;
	padding:0 30px;
	/* width:calc(100% - 310px);
	margin-right:30px; */
	padding-bottom:140px;
	background:#fff;
	min-height:calc(100vh - 145px);
}

.rightColAlu .colText {
	width:60%;
}
.rightColAlu .colBotons {
	width:40%;
}

.fullColFlex {
	display:flex;
}
.fullColFlex>div {
	float:none;
	width:auto;
	flex:1;
}


/*****contingut*****/
#content {
	padding: 0px;
	min-height: calc(100vh - 250px);
	transition: all 0.3s;
	width:100%;
	position:relative;
	margin-top:40px;}

.contingut {
	min-height:calc(100vh - 240px);
	padding:10px 10px 230px 10px;
	background:#fff;
	border-radius:15px;
	margin:10px 0;}

.contingut, #content>.titPagina, .ayuda {
	float:left;
	width:95%;
	position:relative;
	left:50%;
	-ms-transform: translateX(-50%); /* IE 9 */
	-webkit-transform: translateX(-50%); /* Safari */
	transform: translateX(-50%);}

.contingutCol {
	/* width:calc(100% - 300px);
	float:left; */
	position:relative;
	margin:0 auto;
	width:1250px;
	overflow:auto;
	padding:10px;
}

.botonesCol {
	width:220px;
	float:right;
	padding:20px;
	position:absolute;
	right:30px;
	bottom:30px;
}

.botonesCol button {
	width:100%;
	margin:5px;
	}
	
/*****contenido generales*****/
.titPagina {
	padding: 0 0 0 10px;
	font-size: 1.7em;
	color: var(--color1);
	margin: 20px 0 0 0!important;
	font-weight: 300;
	line-height: 1;}

.titPagina span {font-weight:500;}

.subtitPagina, .subtitPaginaPanel {
	padding:10px 15px;
	font-size:1.2em;
	color:var(--color2);
	border-bottom:1px solid var(--color2);
	background:#fff;
	margin-bottom:10px;}
.subtitPaginaPanel {
	margin-bottom:0px;
	background: #DBEFFF;
	color: var(--color2);
	border-color: #1B3E72;}

.blockPanel {
	background: #fff;
	/* box-shadow: 0 0 3px #999; */
	width: 100%;
	float:left;
	border-radius: 3px;
	margin-bottom: 15px;}

.blockPanel hr {border-top: 1px solid #BADCF7;
}

/*****panel administracion*****/
.boxPanel {
	padding:15px;
	border-radius:10px;
	background:#f6f6f6;
	margin:15px 0;
}

.panelOpt {
	width: calc(10% - 10px);
	float: left;
	margin: 5px;}

.btnPanel {
	height: 75px;
	background: #fadda0;
	border: 1px solid var(--color1);
	margin: 0 auto;
	border-radius: 3px;
	color: var(--color1);
	padding: 15px 5px 15px 5px;
	font-size: 17px;
	font-weight: 300;
	line-height: 1;
	position:relative;
	overflow:hidden;
	transition: transform .2s;}

.btnPanel:hover {
	box-shadow: none;
	background:var(--color1);
	color:#fff;
	transform: scale(1.05);}

.btnPanel>div {
	z-index:1;
	position:relative;}

.btnPanel:hover i {
	transform: rotate(-20deg);
	color:#fff;}

.btnPanel i {
	color: #fff;
	margin: 10px;
	position: absolute;
	transform: rotate(-9deg);
	font-size: 80px;
	right: -10px;
	bottom: -20px;
	z-index: 0;
	opacity: 0.25;}

.tit1 {
	float:left;
	font-size:1.3em;
	padding:10px;
	background-color:#eee;
	font-weight:700;
	width:100%;
	margin-bottom:10px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;}

.titTable {
	background:#ccc;
	border:1px solid #fff;
	font-weight:500;}

.textTable {font-size:0.9em;}

.table-responsive {
	overflow-x:visible;
	width:100%;}

.colLinea {
	border-bottom:1px solid #e9e9e9; 
	float: left;
	width: 100%;
	min-height:60px;}

.bg-total {background:#ffebeb;}

.bg-totales {background:#ffbfbf;}

/*****botones*****/
.botonesFixed {
	position: fixed;
	bottom: 40px;
	background: rgba(255,255,255,0.8);
	z-index: 1001;
	padding: 10px 15px;
	border-radius: 26px;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	border: 2px solid var(--color2);}

.botonesFixed a, .botonesFixed button {
	float:none!important;
	margin:0 5px;}

.botonesFixed2 {
	position: fixed;
	bottom: 20px;
	border-radius: 26px;
	right: 50px;
	z-index: 1001;}

.botonesFixed2 a, .botonesFixed2 button {
	float:none!important;
	margin:0 5px;}



.btn {
	font-size: 13px;
    /* margin-top: -4px; */
}

.btn:hover {
	transition: transform 0.3s;
	transform: scale(1.08);}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline:none;}

.btn b {font-weight:500;}

.btn-sm, .btn-group-sm > .btn {
	border-radius: 20px;
	padding:1px 15px 2px 15px;
	font-size: 13px;
	/*text-transform: uppercase;*/}
	
.btn-xs {
	border-radius: 20px;
	}
	
.btn-default {
	color: #fff;
	background-color: var(--color1);
	border-color: none;
	text-transform: none!important;}
	
.btn-default:hover {
	color: #fff;
	background-color: var(--color2);}

.btn-admin {
	color: #fff;
    background-color: var(--colorGestor);
    font-size: 45px;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    line-height: 45px;
    margin: 0 20px;
    border:0;
}

.btn-admin:hover {
	background-color: var(--colorGestor);
	color:#fff!important;
}

.btn-success {
	background-color: var(--colorGreen);
}

.btn-success:hover {
	background-color: var(--colorGreen2);
}

.btn-info {
	background-color: var(--colorBlue);
}

.btn-gray {
	background-color: #abaaaa;
}
.btn-gray:hover {
	background-color: #888888;
}

.btn-info:hover {
	background-color: var(--colorBlue2);
}

.btn-danger {
	background-color: #e94242;
}

.btn-danger:hover {
	background-color: #dd1a1a;
}

.adminTitle, .adminTitle2 {
	width: 100%;
    padding: 5px 0;
    /*text-transform: uppercase;*/
    text-align: left;
    margin-bottom: 100%;
    color: #fff;
    background: var(--umigloGrey);
    border-radius: 10px;
    font-size:22px;
    line-height:23px;
    margin-bottom:15px;
    position:relative;
    padding-left:130px;
    clear:both;
    display: flex;
    align-items: center;
}
.adminTitle2 {
	text-align:center;
	padding-left:0px;
	display:block;	
}

/*.adminTitle i {
	position:absolute;
	right:0;
}
*/
.adminTitle i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.adminTitle i:nth-of-type(1) {
  right: 10px;
}

.adminTitle i:nth-of-type(2) {
  right: 40px;
}
.adminTitle i.filtered {
  transform: translateY(calc(-50% + 6px));
}
.adminTitle::before {
position: absolute;
    content: "";
    background: var(--colorAdmin);
    left: 0;
    top: 0;
    width: 120px;
    border-right: 1px solid #fff;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.adminTitImg, .adminTitImg2 {
	padding-top:0;
	padding-bottom:0;
	padding-left:120px;
	display:flex;
	align-items: center;
	height:60px;
}

.adminTitImg>div:nth-child(1), .adminTitImg2>div:nth-child(1) {
	height:60px;
	margin-right:15px;
	width:80px;
	display:inline-block;
	overflow:hidden;
	text-align:center;
	left: 40px;
	position:absolute
}
.adminTitImg>div:nth-child(1){
	background:#fff;
}
.adminTitImg>div:nth-child(2), .adminTitImg2>div:nth-child(2){
	margin-left:10px;
}

.adminTitImg>div>img, .adminTitImg2>div>img {
	height:60px;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.adminSubtitle {
	width: 100%;
    padding: 5px 10px;
    /*text-transform: uppercase;*/
    margin-bottom: 100%;
    color: #fff;
    /* border:2px solid var(--colorAdmin); */
    border-radius: 8px;
    font-size:16px;
    line-height:18px;
    margin-bottom:15px;
    position:relative;
    text-align:left;
    background: var(--umigloGrey);
    padding-left:85px;
}

.adminSubtitle::before {
position: absolute;
    content: "";
    background: var(--colorAdmin);
    left: 0;
    top: 0;
    width: 80px;
    border-right: 1px solid #fff;
    height: 100%;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.subTitle {
	background: var(--umigloGrey);
	color:#fff;
	font-size:16px;
    line-height:18px;
    width: 100%;
    padding: 7px 5px 7px 15px;
    border-radius: 8px;
}

.adminIcoHeading {
	float:right;
    border: 2px solid var(--colorSoftGray);
    background: var(--colorSoftGray);
    color:#fff;
    font-size: 21px;
    width: 38px;
    height: 38px;
    line-height: 22px;
    border-radius: 8px;
    margin-left:4px;
}

.adminIcoHeading:hover {
	background:#fff;
	color: var(--colorAdmin);
}

.adminIco {
	float:right;
    border: 2px solid var(--color2);
    background: var(--color2);
    color:#fff;
    font-size: 21px;
    width: 38px;
    height: 38px;
    line-height: 22px;
    border-radius: 8px;
    margin-left:4px;
}

.adminIcoVert {
	width:31px;
	font-size:15px;
	
}


.adminIco:hover {
	background:#fff;
	color: var(--color2);
}


.adminIcoSuccess{
	background:var(--umigloGreen);
	border-color:var(--umigloGreen);
	color:#fff;
}

.adminIcoSuccess:hover {
	border-color:var(--colorAdmin);
	background:#fff;
	color:var(--colorGreen);
}

.adminIcoInfo {
	border-color:var(--colorBlue);
	background:var(--colorBlue);
}

.adminIcoInfo:hover {
	background:#fff;
	border-color:var(--colorBlue);
	color:var(--colorBlue);
}

.adminIcoDanger {
	background:#e94242;
	border-color:#e94242;
	color:#fff;
	
}
.adminIcoDanger:hover {
	background:#fff;
	color:#e94242;
}

.overlapRightBottom {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

/*****listas y tablas*****/
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	padding: 2px 6px 2px 6px;
	line-height: 1;
	vertical-align: middle;
	font-size: 13px;
	height: 30px;}

.table>thead>tr>th {
	border-bottom:1px solid var(--colorAdmin);
	font-weight:300;
	color:var(--colorAdmin);
	font-size:12px;}

.table-responsive .table {margin-bottom: 0px;}

.table-responsive .table a {
	color:var(--color1);
	font-size:13px;}

.table-responsive .table a:hover {color:var(--color1);}

th {
	color:var(--colorSoftGray);
	font-weight:normal;
	
}


/*table stackable*/
.table-responsive-stack tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;}


.table-responsive-stack td,
.table-responsive-stack th {
	display:block;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;}

.table-responsive-stack .table-responsive-stack-thead {font-weight: bold;}

.table-responsive-stack td {
	text-align:left;
	font-size: 13px!important;
	line-height: 24px!important;}

.table-responsive-stack td span, .table-responsive-stack td div {
	margin-right:10px;
	float:left;
	margin-top:0!important;}

.show-sm {display:none;}

@media screen and (max-width: 768px) {
	.table-responsive-stack tr {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		border-bottom: 4px solid #ccc;
		display:block;}
	
	/*  IE9 FIX   */
	.table-responsive-stack td {
	float: left\9;
	border-top: none!important;
	width: 100%!important;}

	.show-sm {display:block;}
}

/*****ICONOS****/
.icon {
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 35px;
	height: 35px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 30px;
	overflow: hidden;
	text-align:center;
	line-height:35px;
	font-size: 15px;
	/*text-transform: uppercase;*/
	color: var(--color1);
	font-weight:500;
	padding: 0;
	border: 0;
	transition: transform .2s;
	background:#fff;}
	
.icon:hover {transform: scale(1.15); }

.icon::before, .icon::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transition: all 0.25s ease;
	border-radius: 30px;}
	
.icon i {
	position: relative;
	color: var(--color1);
	font-size: 21px;
	margin-top: 7px;
	transition: all 0.25s ease;}
	
.icon>div {
	z-index: 100;
	position: relative;}

.icon:hover i, .icon>div:hover {color:#fff!important;}

.icon::before {
	transition-duration: 0.5s;
	box-shadow: inset 0 0 0 1px var(--color1);}
	
.icon:hover::before {
	box-shadow: inset 0 0 0 60px var(--color1);}

.icon-small {
	width: 27px;
	height: 27px;
	font-size: 12px;
	line-height: 27px;
	margin:0 2px;}

.icon-small i {
	font-size: 15px;
	margin-top: 6px;}

.icon-xs {
	width: 24px;
	height: 24px;
	font-size: 12px;
	line-height: 24px;
	margin:0 2px;}

a.icon-xs {display: inline-grid;}

.icon-xs i {
	font-size: 14px;
	margin-top: 5px;}

.icon-xs>div, .icon-small>div {letter-spacing: -1px;}

.icon-selected {
	box-shadow: inset 0 0 0 60px #1B3E72;
	color:#fff;}

.icon-red i{color: #e60000;}

.icon-red::before {
	transition-duration: 0.5s;
	box-shadow: inset 0 0 0 1px #e60000;}
	
.icon-red:hover::before {box-shadow: inset 0 0 0 60px #e60000;}

.icon-orange i{color: #f5ac49;}

.icon-orange::before {
	transition-duration: 0.5s;
	box-shadow: inset 0 0 0 1px #f5ac49;
}

.icon-orange:hover::before {box-shadow: inset 0 0 0 60px #f5ac49;}

.icon-green i{color: #789b41;}

.icon-green::before {
	transition-duration: 0.5s;
	box-shadow: inset 0 0 0 1px #789b41;}
	
.icon-green:hover::before, .icon-green:active::before, .icon-green:focus::before {box-shadow: inset 0 0 0 60px #b3db74;}

/*nou dashboard */
.colText {
	width:calc(50% - 10px);
	float:left;
	padding:0 5px;
	margin-top:5px;
	border-right:1px solid #e6e6e6;
	padding-right:15px;
/*	min-height:100vh;*/
	}

.colText2 {
	margin:5px auto;
	padding:0 5px;}

.colBotons {
	width:calc(50% - 0px);
	float:right;
	padding:0 10px;
	margin-top:5px;
	}

.colCamp {
	margin:5px 0;
	padding-bottom:10px;}

.colCamp>label {
	font-size:15px;
	font-weight:normal;
	padding-top: 5px;
	background-color: #f4f6f9;
	width: 100%;
	padding: 4px 5px;
	text-align: left;
	margin-bottom: 3px!important;
	/*text-transform: uppercase;*/
	color: var(--color1);
	text-align:left!important;
	border-left:5px solid var(--color2);}

.colCamp2>label {
	background-color: #c5c5c5;
	color: #fff;}

.colCampRadio {
	margin-bottom:0px;
	padding-bottom:5px;
	/* border-bottom:1px solid #f4f7fa;
	border-top:1px solid #f4f7fa; */
	float: left;
	width: 100%;
	padding-bottom: 0px!important;
	clear:both;
	margin:2px 0;}

.colCampRadio>label {
	font-size:15px;
	font-weight:normal;
	padding-top: 5px;
	float:left;
	/* width:calc(100% - 75px); */
	margin-right:20px;
	padding-top:0!important;
	margin-top:2px;
	text-align: left;
	margin-bottom: 3px!important;
	/*text-transform: uppercase;*/
	color: #1B3E72;
	text-align:left!important;}

.colCampRadio>div {float:left;}

.colCampRadio .toggleSwitch {
	margin:0;}

.colCamp2 {background-color: #f4f7fa;}

label.control-label {position:relative;}

.colCamp .formData {
	width: 60px;
	text-align: center;
	margin: 0;}

.colCamp .formData2 {
	width: 110px;
	text-align: center;
	margin: 0;}

.form-text {margin-bottom:0;}

.col50 {
	width:50%!important;
	float:left;}

.col100 {width:100%!important;}

/*custom switch*/
.toggleSwitch {
	position: relative;
	margin-top: 5px;
	font-size: 0;
	width: 60px;
	height: 30px;}

.toggleSwitch-label {
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	font-size: 14px!important;
	color:#fff;
	cursor:pointer;
	line-height: 20px!important;
	margin-bottom:0;}

.toggleSwitch-label_left:after {
	content: "";
	position: absolute;
	top: -10px;
	right: -38px;
	bottom: -10px;
	left: 0px;
	z-index: 2;}

.toggleSwitch-label_left {
	position: absolute;
	right: 5px;
	z-index: 1;
	width: 22px!important;
	text-align: center;
	top: 4px;}

.toggleSwitch-label_right {
	position: absolute;
	left: 5px;
	z-index: 1;
	width: 22px!important;
	text-align: center;
	top: 4px;}

.toggleSwitch-input {
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	position: absolute;
	clip: rect(0 0 0 0);
	overflow: hidden;}

.toggleSwitch-display {
	content: "";
	position: absolute;
	width: 58px;
	height: 28px;
	border-radius: 17.5px;
	transition: background-color 150ms ease-in-out;}

.toggleSwitch-display:after {
	content: "";
	position: absolute;
	top: 3px;
	left: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: white;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
	transition: transform 150ms ease-in-out;}

/* checked logic selector */
.toggleSwitch-input_right:checked + .toggleSwitch-display {background-color: #d14545;}
.toggleSwitch-input_right:checked + .toggleSwitch-input_right{ color: #d14545;}
.toggleSwitch-input_right:disabled:checked + .toggleSwitch-display {background-color: #e79a9a;}
.toggleSwitch-input_right:disabled:checked + .toggleSwitch-input_right {color: #e79a9a;}

/* checked logic selector */
.toggleSwitch-input_right:checked + .toggleSwitch-display:after {transform: translateX(29px);}

/* checked logic selector */
.toggleSwitch-input_left:checked + .toggleSwitch-label_right:after {
	content: "";
	position: absolute;
	top: -10px;
	right: 0;
	bottom: -10px;
	left: -36px;
	z-index: 2;}

.toggleSwitch-input_left:checked ~  .toggleSwitch-display {background-color:var(--colorGreen);}
.toggleSwitch-input_left:disabled:checked ~ .toggleSwitch-display {background-color: #dae29e!important;}
.toggleSwitch-input_left:disabled:checked ~ .toggleSwitch-input_left {color: #dae29e!important;}


/*custom checkbox*/
.customCheck{
	margin: 4px;
	float: left;
	width: calc(33.3% - 8px);
}
.customCheck label {
	width:100%;
}
.customCheck label div {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
  /*text-transform:uppercase;*/
}

.customCheck label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.customCheck label input + div{
	color: var(--colorAdmin);
	/* box-shadow:0 0 5px #999; */
	border: 2px solid var(--colorAdmin);
	background-color: #f6f6f6;
	border-radius: 6px;
	height:36px;
	position:relative;
}
.customCheck label input + div:hover{cursor:pointer;}
.customCheck input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customCheck input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customCheck input + div>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    line-height: 14px;
    font-size: 14px;
    text-wrap: unset;
}

/*custom radio*/
.customRadio{
	margin: 4px;
	float: left;
	width: calc(33.3% - 8px);
}
.customRadio>label {
	width:calc(100% - 30px);
	float:left;
}

.customRadio>div {
	width:30px;
	float:right;
}
.customRadio label div {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
  /*text-transform:uppercase;*/
}

.customRadio input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.customRadio label input + div{
	color: var(--colorAdmin);
    /* box-shadow: 0 0 5px #999; */
    border: 2px solid var(--colorAdmin);
    background-color: #f6f6f6;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    height: 36px;
    position: relative;
    border-right: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.customRadio label input + div:hover{cursor:pointer;}
.customRadio label input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customRadio label input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customRadio label input + div>div {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    line-height: 14px;
    font-size: 14px;
    text-wrap: unset;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 4px 0;
}

.customRadio div input + div{
	color: var(--colorAdmin);
    /* box-shadow: 0 0 5px #999; */
    border: 2px solid var(--colorAdmin);
    background-color: #ffff;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 36px;
    position: relative;
    border-left: 0;
}
.customRadio div input:checked + div::after {
	position:absolute;
   content: "\f00c";
   font-weight:bold;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	font-family:'Font Awesome 5 Free';
}


.customRadio input.selected + div {
	background: var(--colorAdmin);
	color:#fff;
}



/*custom radio text*/
.customRadioTxt{
	margin: 4px;
	float: left;
	width: calc(33.3% - 8px);
}
.customRadioTxt label {
	width:100%;
}
.customRadioTxt label div {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
  /*text-transform:uppercase;*/
}

.customRadioTxt label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.customRadioTxt label input + div{
	color: var(--colorAdmin);
	/* box-shadow:0 0 5px #999; */
	border: 2px solid var(--colorAdmin);
	background-color: #f6f6f6;
	border-radius: 6px;
	height:36px;
	position:relative;
}
.customRadioTxt label input + div:hover{cursor:pointer;}
.customRadioTxt input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customRadioTxt input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customRadioTxt input + div>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    line-height: 14px;
    font-size: 14px;
    text-wrap: unset;
}

/*custom radio criterio*/
.customRadioCriterio{
	margin: 4px;
	float: left;
	width: calc(100% - 8px);
}
.customRadioCriterio label {
	width:100%;
}

.customRadioCriterio label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.customRadioCriterio label input + div{
	color: var(--colorAdmin);
	/* box-shadow:0 0 5px #999; */
	border: 2px solid var(--colorAdmin);
	background-color: #f6f6f6;
	border-radius: 6px;
	height:67px;
	overflow:hidden;
}

.customRadioCriterioAlu label input + div{
	color: var(--color1);
	border: 2px solid var(--color1);

}

.customRadioCriterio input:checked + div {
		height: fit-content;
	min-height:45px;
	max-height: fit-content;
}

.customRadioCriterio label input + div:hover{cursor:pointer;}
.customRadioCriterio input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customRadioCriterio input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customRadioCriterioAlu input:checked + div {background-color: var(--color1);}

.customRadioCriterioTxt {
  padding: 3px 0;
  width:calc(100% - 75px);
  margin-left:10px;
  float:left;
  font-size:14px;
}
.customRadioCriterioTxt2 {
	width:calc(100% - 15px)!important;
}
.customRadioCriterioTxt span{
	font-size:12px;
}

.customRadioCriterioImg {
	float:left;
	background:fff;
}
.customRadioCriterioImg img{
	width:55px;
}








/*custom radio: a button with an editable number*/
.customRadioNum{
	margin: 4px;
	float: left;
	width: calc(33.3% - 8px);
}
.customRadioNum>label {
	width:calc(100% - 30px);
	float:left;
}

.customRadioNum>div {
	width:30px;
	float:right;
}
.customRadioNum label div {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
  /*text-transform:uppercase;*/
}

.customRadioNum input {
  position: absolute;
/*  display: none;*/
  color: var(--colorAdmin) !important;
  width: 100%;
/*  height: 100%;*/
  text-align: center;
  font-size: 14px;
}

.customRadioNum label input + div{
	color: var(--colorAdmin);
    /* box-shadow: 0 0 5px #999; */
    border: 2px solid var(--colorAdmin);
    background-color: #f6f6f6;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    height: 36px;
    position: relative;
    border-right: 0;
}
.customRadioNum label input + div:hover{cursor:pointer;}
.customRadioNum label input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customRadioNum label input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customRadioNum label input + div>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    line-height: 14px;
    font-size: 14px;
    text-wrap: unset;
}

.customRadioNum div input + div{
	color: var(--colorAdmin);
    /* box-shadow: 0 0 5px #999; */
    border: 2px solid var(--colorAdmin);
    background-color: #ffff;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 36px;
    position: relative;
    border-left: 0;
}
.customRadioNum div input:checked + div::after {
	position:absolute;
	content: "\f00c";
	font-weight:bold;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	font-family:'Font Awesome 5 Free';
}


.customRadioNum input.selected + div {
	background: var(--colorAdmin);
	color:#fff;
}



















.customButton, .customButtonMark {
	color: var(--colorAdmin);
	border: 2px solid var(--colorAdmin);
	background-color: #f6f6f6;
	border-radius: 6px;
	height:36px;
	position:relative;
	margin: 4px;
	float: left;
	width: calc(50% - 8px);
	text-align:center;
	line-height:32px;
	/*text-transform:uppercase;*/
}

.customButton2 {
	width:auto;
	padding:0 20px;
	margin:15px 5px;
}
.customButtonAct, .customButton.selected {
	color: #fff;
	border: 2px solid var(--colorAdmin);
	background-color: var(--colorAdmin);	
}
.customButton:hover {
	cursor:pointer;
	background: var(--colorAdmin);
	color:#fff;
}
.customButton.disabled:hover {
	cursor:inherit;
	background-color: #f6f6f6;
	color: var(--colorAdmin);
}
.customButton.disabled.selected:hover, .customButton.disabled.selected {
	cursor:inherit;
	background: var(--colorAdmin);
	color:#fff;
}

.customButton>div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 31px;
	line-height: 15px;
	width: 97%;
	overflow: hidden;
	padding-bottom: 3px;
	margin-top: 0px;
	padding-top: 1px;
}

button.customButton {
	text-transform:none;
	line-height:19px;
	height:36px;
	padding:2px 4px!important;
	overflow:hidden;
}

button.customButton.selected {
	height: fit-content;
	min-height:36px;
	max-height: fit-content;
}

.customButtonActive:hover, .customButtonActive.selected {
	height:auto!important;
	max-height:auto!important;
	min-height:36px!important;
}

.customButtonActive:hover>div, .customButtonActive.selected>div{
	position: relative;
    top: 0%;
    left: auto;
    transform: none;
    max-height: none;
    line-height: 15px;
    width: 97%;
    overflow: hidden;
    height: max-content;
}

/* Button with two-line text (name + subline), overrides fixed height from button.customButton */
button.customButtonMultiline {
	float: none;
	flex: 1;
	min-width: 0;
	height: auto !important;
	overflow: visible !important;
	line-height: 1.3 !important;
	padding: 6px 4px !important;
}
/* Inner line inside customButtonMultiline: resets absolute positioning from .customButton>div, adds ellipsis truncation */
button.customButtonMultiline > div {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	max-height: none !important;
	width: 100% !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
	padding: 0 !important;
}
/* Subline variant: smaller, dimmed, right-aligned */
button.customButtonMultiline > div.customButtonSubline {
	font-size: 0.78em;
	opacity: 0.65;
	text-align: right;
}
button.customButtonMultiline:hover > div:not(.customButtonSubline) {
	white-space: normal;
	text-overflow: clip;
	overflow: visible;
}

button.customButtonEvaluated {
	position: relative;
}
button.customButtonEvaluated::after {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: 3px;
	right: 4px;
	font-size: 10px;
	line-height: 1;
	pointer-events: none;
}
button.customButtonEvaluated > div {
	padding-right: 16px;
}
button.customButton.customButtonActive > div {
	max-height: 34px;
	padding-bottom: 5px;
}
button.customButton.customButtonActive:hover > div,
button.customButton.customButtonActive.selected > div {
	max-height: none;
	padding-bottom: 0;
}

.form-control {
	height:auto;
	padding: 7px 10px;
	font-size: 13px;
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	color:#558657!important;
	}

select.form-control {
	margin-top:2px!important;
	padding:5px 10px;}

.form-control-static {
	font-size:14px;
	min-height: auto;
	padding-top: 3px;
	padding-bottom: 3px;}

.form-control-static select {padding: 1px 2px;border-radius: 4px;}
.form-horizontal .control-label {padding-top:3px;}
#collapseFiltros .btn-sm, #collapseFiltros .btn-group-sm > .btn {margin-top: -1px;}
.form-horizontal .form-group {padding-bottom: 1px;}
/* .form-horizontal {margin:15px 0;} */
.form-group {
	margin-bottom: 5px;
	font-size:14px!important;}

.form-group input {margin-bottom:0px;}
.form-control[disabled], fieldset[disabled] .form-control {	background-color: #f4f7fa;	}
.form-control[readonly] {background-color:#e9f3fe}
textarea.form-control {min-height:120px;}
.form-horizontal .form-group {
	padding-bottom:10px;
	border-bottom:1px solid #f4f7fa;}

.campoObligatorio {border:2px solid #BADCF7!important;}

input[type=time]{
	border:1px solid var(--colorSoftGray);
	border-radius: 7px;
    font-size: 15px;
    padding: 0 10px;
    color:var(--colorSoftGray);
    position:relative;
    /* padding-right:25px; */
}

.filtro {
	padding:10px 5px;
	margin-bottom:10px;}


.filtro>button {
	margin:1px 1px;
	border:2px solid var(--umigloGrey);
}

.filtro>div {
	width:20%;
	float:left;
	margin:0 5px;
}
.filtro-adv {
	display:flex;
	position:relative;
	margin:6px 0;
	padding:5px;
}
.filtro-adv>div {
	width:-webkit-fill-available;
}


.drag-handle {
	cursor:grab;
	min-height:28px!important;
	height:auto!important;
	/* border-radius:0!important;
	height:28px!important;
	background:#f6f6f6!important;
	color:#333!important; */
	float:inline-start;
}
.drag-handle>div:nth-child(1){
	/*width: calc(100% - 4px) !important; */
    text-align: left;
    /* left: 4px !important; */
    /* transform: translateY(-50%) !important; */
    float: left;
    position: inherit;
    left: auto;
    top:auto;
    line-height: 27px;
    margin-left: 2px;
    transform:none;
}
.drag-handle>div:nth-child(2){
	float:right;
	position:inherit;
	transform:none;
	left:auto;
	top:auto;
	margin-top:6px;
}

.drag-handle button{
    /* position: absolute; */
    right: 2px;
    border: none;
    background: none;
    width: 12px;
    height: 14px;
    text-align: center;
    line-height: 10px;
    z-index: 100;
    padding: 0;
    /* border-radius: 50%; */
    margin: 0;
    color:#fff;
}
.drag-handle button:hover{
	color:#666;
}

.drag-handle button, .drag-handle i {
  cursor: pointer;
  pointer-events: auto;
}

.drag-handle button:disabled, .drag-handle button:disabled i{
	cursor:default;
}
.drag-handle button:disabled:hover{
	color:#fff;
}

.drag-handle .sort-btn {
	width:6px;
}

.dropdown-menu {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: block;
  position: absolute;
  right: -1px;
  padding:0;
  width: fit-content;
  min-width: auto;
  font-size:13px;
  top:16px;
  z-index:100000;
}

.dropdown-menu.show {
      opacity: 1;
  transform: scaleY(1);
}

.tablaCriterio th:nth-child(1) .dropdown-menu,.tablaCriterio th:nth-child(2) .dropdown-menu {
	left:-5px;
	right:auto;
}

.dropdown-item {
	padding: 3px 4px 3px 3px;
	cursor:pointer;
}
.dropdown-item i{
	font-size:8px;
	color:#999;
	margin-right:2px;
	position:relative;
	top:-2px;
}

.dropdown-item:active, 
.dropdown-item:focus {
	background-color: transparent !important;
	color: inherit !important;
}


.btn-dropdown {
	width:auto!important;
	position:relative;
	padding:0;
	margin: 0 !important;
}
.btn-dropdown button {
	margin: 1px 1px;
    border: 2px solid var(--umigloGrey);
}

.btn-dropdown .dropdown-item {
	font-size: 12px;
	padding: 5px 7px;
	display:inline-flex
}


.btn-dropdown .dropdown-item input{
	margin-right:3px;
}
.btn-dropdown .dropdown-item div{
	margin-top:1px;
}
.btn-dropdown .dropdown-menu{
	top:38px;
}

/*checkbox personalitzat*/
.dropdown-item label {
  cursor: pointer;
  color: #383A3F;
  display: block;
  font-size: 13px;
}
.dropdown-item label input[type=checkbox] + .label-text:hover:before {
  color: var(--colorGreen);
}
.dropdown-item label input[type=checkbox] {
  display: none;
}
.dropdown-item label input[type=checkbox] + .label-text:before {
  content: "";
  color: #dddfe6;
  font-family: "fontAwesome";
  line-height: 1;
  width: 1em;
  display: inline-block;
  margin-right: 5px;
  font-size:14px;
}
.dropdown-item label input[type=checkbox]:checked + .label-text:before {
  content: "";
  color: var(--colorGreen);
  animation: tick 150ms ease-in;
}
.dropdown-item label input[type=checkbox]:disabled + .label-text:before {
  content: "";
  color: #dddfe6;
}

@keyframes tick {
  0% {
    transform: scale(0);
  }
  90% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* input[type=time]::-webkit-calendar-picker-indicator {
	display:none;
} */

/* input[type=time]::after {
  right:4px;
  top:3px;
  content: '\f017';
  font-size: 15px;
  font-weight:normal;
  position: absolute;
  font-family:'Font Awesome 5 Free';
  
  } */

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 5px;
  height: 25px;
  width: 25px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  outline: none;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}

.option-input:checked {
  /* background: #40e0d0; */
  background:var(--colorGreen);
}
.option-input:checked::before {
  width: 25px;
  height: 25px;
  display:flex;
  content: '\f00c';
  font-size: 17px;
  font-weight:bold;
  position: absolute;
  align-items:center;
  justify-content:center;
  font-family:'Font Awesome 5 Free';
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}

.option-input:disabled {
	transition: none;
	opacity:0.9;
	cursor:auto;
	background: #cbd1d8;
}

.option-input:disabled:hover {
  background: #cbd1d8;
}

.option-input:disabled::after {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;	
}

.boxInputRadio {
	float:left;
	clear:both;
}
.boxInputRadio>div, .boxInputRadio>input {
	float:left;
}
.boxInputRadio>div{
	margin-top:17px;
}

@keyframes click-wave {
  0% {
    height: 25px;
    width: 25px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 80px;
    width: 80px;
    margin-left: -25px;
    margin-top: -25px;
    opacity: 0;
  }
}

.botonsPaginacio {
	float:left;
	clear:both;
	margin:10px 0;
	position:relative;
	left:50%;
	-ms-transform: translatex(-50%);
	-webkit-transform: translatex(-50%);
	-moz-transform: translatex(-50%);
	transform: translatex(-50%);	}

.botonsPaginacio a {
	padding:4px 10px;
	border:1px solid #ccc;
	margin:5px 0;
	border-radius:5px; }

.botonsPaginacio a:hover {
	background:#f4f7fa;
	color:#B0BDE9;}

.page-link {
	color:var(--color1);
}

.formData {
	width:150px!important;
	display:inline!important;
	margin:3px!important;
	float:none!important;}


#idPaginas {
	position: fixed;
    bottom: 25px;
    left: 0;
    width: 100%;
    background: #fff;
    font-size: 11px;
    padding: 0 5px;
    color: #999;	
}

.dropzone .dz-message > span {
	font-size: 16px!important;
}

.bottomFixed {
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 100%;
    background: #fff;
    padding-bottom: 60px;
    box-shadow: 0 0 5px #999;
    height:250px;
}

#bloAmbientes, #bloAreas, #bloCajas, #bloGrupos, #bloEspecialidad {
	display:none;
}

#divMicroAmbients img, #divMicroespais img, #divCriterisAvaluacio img,  .tablaCriterio img, .bloqueTablaLinea img{
	border-radius: 10px;
    border: 1px solid var(--colorSoftGray);
    height:37px;
}

.w-md-50 {
	width:50%!important;
}
.w-md-40 {
	width:40%!important;
}


.accentColorAdmin{
	accent-color: var(--colorAdmin);
}


/****************mqueries**************/

@media only screen and (max-width : 1024px) {
	.menuBox {width:100%;}
	#cssmenu {width:100%}
	#cssmenu #menu-button {position:relative;display: block;text-decoration: none;font-size: 17px;color: var(--color1);padding:8px 5px 8px 60px;text-transform: uppercase;cursor: pointer; text-align:left;}
	#cssmenu > ul > li {width:100%;margin:0;}
	#cssmenu > ul > li > a {float:left;width:100%;padding:10px 0; border-radius:0;text-align:center; font-size:18px;border-top:1px solid #fff;border-bottom:1px solid #fff;}
	#cssmenu > ul {display: none;}
	#cssmenu > ul.open {display: block; border-top: 1px solid rgba(0, 0, 0, 0.1);width:100%}
	#cssmenu #menu-button::after {display: block;content: '';position: absolute;height: 7px;width: 25px;border-top: 2px solid var(--color1);border-bottom: 2px solid var(--color1); left: 20px; top: 15px;}
	#cssmenu #menu-button::before {display: block; content: ''; position: absolute; height: 3px; width: 25px;border-top: 2px solid var(--color1); left: 20px;top: 25px;}
}

@media only screen and (max-width : 767px) {
	/* .usuario{width: 100%;text-align: center;margin-top: 15px;}
	.w-md-50, .w-md-40, .filtro>div {width:100%!important;}
	.filtro>div {margin:5px 0;} */
	
}

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

}


/* NOTIFICATIONS ***************************/
#notificationsContainer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Estilo base */
.toast {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #333;
  color: white;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(20px);
  animation: toastIn 0.4s ease forwards;
  font-size: 14px;
  max-width: 90vw;     /* evita que salga de la pantalla */
  text-align: center;  /* centra el texto */
}

/* Animación de entrada centrada */
@keyframes toastIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación de salida */
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Colores */
.toast.info { background: #2196F3; }
.toast.success { background: var(--colorAdmin); }
.toast.warning { background: #FF9800; }
.toast.error { background: #F44336; }

#notificationsContainer .toast {
  display: flex !important;
  opacity: 1;
  visibility: visible !important;
}

.filtered {
/* 	color: var(--colorBlue2);
	border: 2px solid #fff;
	padding: 12px; */
	border-bottom: 2px solid currentColor;
	padding-bottom: 10px;
}






.fixedTable {
    border-collapse: collapse;
    table-layout: fixed;
    width: max-content; /* Ensures table is wide enough to trigger scrolling */
    min-width: 100%;
}

/* --- Linkable textarea preview (utilsControls.js) --- */
.inputContainer .linkPreview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    /* Match .inputContainer textarea.input */
    border: 2px solid var(--umigloGrey);
    border-radius: 7px;
    font-size: 13px;
    padding: 7px 3px 3px 5px;
    color: #558657;
    background: #fff;
    z-index: 1;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    cursor: text;
}
.inputContainer .linkPreview a {
    color: #0066cc;
    text-decoration: underline;
}

/* Student payment status icons */
.pagCheckPaid {
    color: var(--colorGreen);
    font-size: 1.2em;
}
.pagCheckPending {
    color: var(--colorRed);
    font-size: 1.2em;
}
.pagCheckExempt {
    color: var(--colorSoftGray);
    font-size: 1.2em;
}

/* Compact bank movement table */
.tablaCriterio.tablaDensa td,
.tablaCriterio.tablaDensa th {
    font-size: 12px;
    padding: 3px 6px;
    line-height: 1.3;
}

/* Small inline icon button for dense tables */
.adminIcoSm {
    font-size: 13px;
    width: 24px;
    height: 24px;
    line-height: 13px;
    border-radius: 5px;
    margin-left: 2px;
    float: right;
    border: 2px solid;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Smaller checkbox variant for dense table rows — stays below fixed action bar */
.option-input-sm {
    width: 20px;
    height: 20px;
    top: 2px;
    z-index: 1;
}
.option-input-sm:checked::before {
    width: 20px;
    height: 20px;
    font-size: 13px;
}