html{
	font-family: "montserratregular"; 
}
body{
	top: 0px; left: 0px; margin: 0px;padding: 0px;
}

h1{font-size: 15px; color: #ffa100; margin-top: 0px;}
.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}


.content-select{
	max-width: 700px;
	position: relative;
}
#horesDisponibles 
{   overflow: auto;
    max-height: 180px;
}
.content-select select{
	display: inline-block;
	width: 100%;
	cursor: pointer;
  	padding: 5px 5px;
  	height: 30px;
  	outline: 0; 
  	border: 0;
	border-radius: 0;
	background-color: #e0e0e0;
	font-size: 1em;
	color: #394656;
	font-family:"montserratregular";
	border:1px solid #ffa100;
    border-radius: 8px;
    position: relative;
    transition: all 0.25s ease;
	font-size: 14px;
	padding-right: 30px;
}
 
.content-select select:hover{
	background:#e0e0e0;
	
}
 
/* 
Creamos la fecha que aparece a la izquierda del select.
Realmente este elemento es un cuadrado que sólo tienen
dos bordes con color y que giramos con transform: rotate(-45deg);
*/

 
.content-select:hover i{
	margin-top: 1px;
}




.campT input{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}


.campT{
	max-width: 700px;
	position: relative;
}
 
.campT input{
	display: inline-block;
	width: 100%;
	cursor: pointer;
  	padding: 3px 10px;
  	height: 30px;
  	outline: 0; 
  	border: 0;
	border-radius: 0;
	background-color:#e0e0e0;
	font-size: 1em;
	color: #999;
	font-family:"montserratregular";
	border:1px solid #ffa100;
    border-radius: 8px;
    position: relative;
    transition: all 0.25s ease;
	font-size: 14px;
	padding-right: 30px;
}
 
.campT input:hover{
	background: #e0e0e0;
}


.colH{position: relative; float: left; width: 33.3%
	
}

.btSeguent{display: inline-block;width: 180px;cursor: pointer; 	padding: 8px 10px;height: 22px;	outline: 0; border: 0;border-radius: 0;background-color:#FFA100;
	color: #ffffff;font-size: 20px;font-family:"montserratregular";border-radius: 8px;   position: relative; transition: all 0.25s ease;
	text-align: center; position: absolute; top: 70%; left: 80%
}
.btAnterior{display: inline-block;width: 180px;cursor: pointer; 	padding: 8px 10px;height: 22px;	outline: 0; border: 0;border-radius: 0;background-color:#FFA100;
	color: #ffffff;font-size: 20px;font-family:"montserratregular";border-radius: 8px;   position: relative; transition: all 0.25s ease;
	text-align: center; position: absolute; top: 70%;left: 60%}
.btSeguentDS{display: inline-block;width: 180px; padding: 8px 10px;height: 22px;	outline: 0; border: 0;border-radius: 0;background-color:#ffe8c0;
	color: #ffffff;font-size: 20px;font-family:"montserratregular";border-radius: 8px;   position: relative; transition: all 0.25s ease;
	text-align: center; position: absolute; top: 70%; left: 80%
}

.txInputCK{font-size: 12px; }
.ipCK{  border-radius: 5px;   background-color:#888888; border:1px solid #ffa100; margin: 5px}
.contingutPt{width: calc(100% - 40px); margin-left: 20px; margin-top:20px;}
#btMenuMb{visibility: hidden;}
#logoCap{position: relative; width: 32%; height: 112px; float: left; background-image:url("../imatges/logonegro-web.jpg"); background-position: center; background-size: contain; background-repeat: no-repeat; margin-top: 12px;}
.opMenu{position: relative; float: left; margin: 15px; font-size: 14px;}
#cap{position: relative; height: 160px;}
#menu{margin: 10px; position: relative; margin-left: 50px; width: 100%}
a{text-decoration: none; color: inherit;}
.opSel{color:#ffa100;}
.opNoSel{color:#394656;}


#sotaSelector{position: relative; width: 100%; height: 300px; background-color:#ffe8c0;}
#selectorAlumnes{position: relative;float: left; width: 33.3%;height: 100%;}
#selectorProfes{position: relative;float: left; width: 33.3%;height: 100%;}
#selAlFt{position: absolute; height: calc(100% - 20px); width: calc(100% - 20px); margin: 12px; margin-right: 7px; background:#ffa100; background-size: cover; border-radius: 15px;}
#selPrFt{position: absolute; height: calc(100% - 20px); width: calc(100% - 20px); margin: 12px;  margin-left: 7px; margin-right: 7px; background:#ffa100; background-size: cover; border-radius: 15px;}
#selAlInt{position: relative;float: left; height: calc(100% - 20px); width: calc(60% - 20px); margin: 12px; margin-right: 0px;background-color:rgba(144,108,109,0.4); border-radius: 15px 0px 0px 15px; border-right: solid 20px #ffa100}
#selAlIntZP{position: relative; float: left;height: calc(100% - 20px); width: calc(40% - 20px); margin: 12px;margin-left: 0px; margin-right: 7px;background-color:rgba(23,52,162,0.3); border-radius:  0px 15px 15px 0px; }
#selPrInt{position: absolute; height: calc(100% - 20px); width: calc(100% - 20px); margin: 12px;  margin-left: 7px;background-color:rgba(144,108,109,0.4); border-radius: 15px;}

#selectorErasmus{position: relative;float: left; width: 33.3%;height: 100%;}
#selErFt{position: absolute; height: calc(100% - 20px); width: calc(100% - 20px); margin: 12px;  margin-left: 7px; background:#ffa100; background-size: cover; border-radius: 15px;}
#selErInt{position: relative;float: left; height: calc(100% - 20px); width: calc(60% - 20px); margin: 12px; margin-left: 7px; margin-right: 0px;background-color:rgba(144,108,109,0.4); border-radius: 15px 0px 0px 15px; border-right: solid 20px #ffa100}
#selErIntZP{position: relative; float: left;height: calc(100% - 20px); width: calc(40% - 20px); margin: 12px;margin-left: 0px; margin-right: 7px;background-color:rgba(23,52,162,0.3); border-radius:  0px 15px 15px 0px; }



.etNomGrup{font-size: 30px; margin: 50px; color: aliceblue; }
.etReserva{position: absolute; top: 80%; height: 24px; padding-top: 4px; width: 100%; text-align: center;vertical-align: middle; background-color:rgba(0,0,0,0.5); color:#ffa100; font-size: 20px; font-weight: bold}
.etInfoGrup{font-size: 14px; margin-left: 15px; margin-top: 40px; color: aliceblue; }
.etInfoGrup ul{ margin-block-start:0em; padding-inline-start:0px; margin-bottom: 20px;}


#zonaReserves{position: relative; width: calc(100% - 80px); margin: 40px; }
#indexPas{position: relative; width: 100%; height: 35px; margin-bottom: 20px;}
.etPas{ font-size: 14px; color: #888888;position: relative; float: left; width: calc(20% - 4px); margin: 2px;}
.liniaSel{position: absolute; top: 20px; width: calc(100% - 5px); height: 10px; background-color: #888888;}
.etPasFet{ font-size: 14px; color: #ffa100;position: relative; float: left; width: calc(20% - 4px); margin: 2px;}
.liniaSelFet{position: absolute; top: 20px; width: calc(100% - 5px); height: 10px; background-color: #ffa100;}
.etPasAct{ font-size: 14px; color: #394656;position: relative; float: left; width: calc(20% - 4px); margin: 2px;}
.liniaSelAct{position: absolute; top: 20px; width: calc(100% - 5px); height: 10px; background-color: #394656;}

#generalContingutReserves{position: relative; width: calc(100% - 11px); height: 300px; border: solid 1px #ffa100; border-radius: 15px; left: 2px; overflow: hidden }
#generalTotesReserves{position: relative; width:500% ; height: 300px; left: 0px;}
.apartatContingutReserves{position: relative; float: left; width: 20%; height: 300px;}
.titolACR{font-size: 18px; margin-top: 30px; margin-left: 40px; width: 500px; color: #565656; font-weight:500}
.subratllat{position: relative; top: 0px; width: calc(100% - 5px); height: 1px; background-color: #565656;}


.titolZP{font-size: 18px;margin-left: 20px; width: 500px; color: #e0e0e0; font-weight:500}
.apartatZP{ position: relative; padding: 20px; font-weight: bold; margin-top: 10px;}
.reservesZP { position: relative; padding-left: 20px;}
.reservesZP .linkBt{ margin-left: 20px; text-decoration: underline; color: #ffa100; font-weight: bold;}
.nomAlumneZP{margin-left: 20px;color: #ffa100; font-weight: bold;}
.dadesAlumneZPtx{color:#ffa100;}

.eliminar{ position: relative; float: left; width: 100px; height: 20px; background-image:url("../imatges/icElimina.png"); margin-right: 10px; background-size: contain ; margin-left: 20px; padding-left: 30px; background-repeat: no-repeat; background-position: left; color: blue; text-decoration: underline}
.horaL { display: inline-block; }
#registrat{position: relative; float: right; cursor: pointer;
	width: 300px;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	background-color: lightgrey;
	margin: solid 1px #394656;
	cursor:pointer;
	margin-right: 30px;
	margin-bottom: 10px;
}
#oblidar{position: relative; float: left; cursor: pointer; margin-top: 20px; margin-left: 50px;}
#calendar {
			font-family:"montserratregular";
			font-size:12px;
		}
		#calendar caption {
			text-align:center;
			padding:5px 10px;
			background-color:#394656;
			color:#fff;
			font-weight:bold;
		}
		#calendar th {
			background-color:#394656;
			color:#fff;
			width:40px;
		}
		#calendar td {
			text-align:right;
			padding:2px 5px;
			background-color:#ffe8c0;
		}
		#calendar .hoy {
			background-color:#ffa100;
			color:white;
			border: solid 2px;
			border-color: red;
		}
		#calendar .free {
			background-color:#71C16D;
			cursor: pointer;
		}
		#calendar .passat {
			background-color:#e0e0e0;
			color: grey;
		}
#calendar .ocupat {
			background-color:#EB5355;
			
		}
#assignaturaTot{
	visibility: hidden;
	position: relative;

}
#proteccioDades{
	margin-left: 10px;
	padding: 10px;
	background-color:#e0e0e0;
	font-size: 11px;
	text-align: justify;
	position: relative;
	width: 95%;
	height: 190px;
	overflow-y:scroll;
	overflow-x: hidden;
}
.titolDetall{ position: relative; padding: 20px; font-weight: bold; margin-top: 30px;}
.horaReservada{ width: 100%; height: 20px; background-color: #ffe8c0; padding-top:10px; padding-bottom: 10px;}
#DadesPersonals{
	position: relative;
	padding-right: 20px;
	margin-top: 10px;
	float: left;
	width: calc(100% - 30px);
}
.dadesAlumneReg{position: relative; width: 100%;}

#zonaReservesZP{
	position: relative;
	padding-left: 20px;
	margin-top: 10px;
	float: left;
	width: calc(33% - 30px);
}
.zonaCalendariZP{
	position: relative;
	padding-left: 20px;
	margin-top: 10px;
	float: left;
	width: calc(33% - 30px);
}
.camps{
	position: relative;
	float: left;
	margin-left: 40px;
	margin-right: 40px;
	padding: 10px;
	
}
.campF{font-size: 14px; color: #ffa100; margin-bottom: 10px; margin-top: 10px}
.net{
	position: relative;
	width: 100%;
	clear: both;
}
.net{
	height: 3px;
}
#esquerra{
	position: relative;
 width: 650px;
	float: left;
}
#dreta{
	position: relative;
 width: 650px;
	float: left;
}
#titol{
	position: relative;
	width: 100%;
	height: 150px;
}
#contenido{
	position: relative;
	width: 100%;
	clear: both;
}
#triaTipus{
	position: relative;
	width: 100%;
	color: #ffa100;
	margin:0px;
	padding: 0px;
	margin-bottom: 10px;
	font-size: 24px;
}
.itemHora{
	position: relative;
	float: left;
	width: 75px;
}
#horesDisp{
	position: relative;
	width: 380px;
}
#diaSel{
	position: relative;
	margin-top: 5px;
	width: 350px;
	padding: 5px;
	background-color:#394656;
	color: white;
	margin-bottom: 5px;
}
.horaRec{
	padding-top: 3px;padding-bottom: 3px;
	background-color: #394656;
	width: 250px;
	color:#fff;
}
#btMes{
	position: relative; float: right;
	padding-left:40px; padding-right: 40px;
	cursor: pointer;
}
#btMenys{
	position: relative; float: left;
	padding-left:40px; padding-right: 40px;
	cursor: pointer;
}
#contingutRecomendades{
	margin-top: -10px;
	margin-bottom: 10px;
}
.botoReserva{
	position: relative;
	margin-left: 150px; 
	padding: 20px;
	width: 200px;
	background-color: #e0e0e0;
	text-align: center;
}

.missatgeError{
	position: relative; padding: 20px; 
}
#peu
{
	margin-top: 20px;
	width: 100%;
	padding-top: 10px;
	border-top:solid 1px #394656;
}

#enviar{
	margin: 20px;
	width: 100px;
	padding: 20px;
	text-align: center;
	font-weight: bold;
	background-color: #e0e0e0;
	margin: solid 1px #394656;
	cursor:pointer;
}