@charset "UTF-8";
/* CSS Document */

html, body{
     background-color: #FFFFFF;
     font-family: 'Roboto', sans-serif;
     margin: 0px;
     /*max-width: 100%;
     overflow-x: hidden;*/
}

/* BANNER SUPERIOR **************************************************************************************************************/
#titolDalt{
	background-color: #000;
	/*border-bottom: 1px solid #707070;*/
	border-bottom: none;
	font-size: 20px;
	min-height: 48px;
	/*padding: 8px;*/
	/*position: fixed; /*Fa que no s'amagui fent scroll */
     width: 100%;
	z-index: 1;
}

#titolDalt .imatgeTitol, 
#titolDalt .textTitol{
	float: left;
}

#titolDalt .textTitol{
	padding: 6px 0px;
}

#titolDalt .imatgeTitol img{
	width: 33px;
}

#titolDalt .part1{
	color: #959273;
	float: left;
}

#titolDalt .part2{
	color: #E3E3E3;
}

#titolDalt .espaiCercador{
	margin-top: 10px;
	text-align: right;
	width: 100%;
}

#titolDalt .espaiCercador .campdecerca{
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	height: 100%;
	margin-right: 6px;
	padding-left: 0.3vw;
	width: 200px;
}

/* Nova pàgina principal *****************************************************************************************************/
#dissenyNou{
     display: grid;
     gap: 8px;
     grid-template-columns: 400px auto;
     padding: 8px;

     .esquerra .titolFiltres{
          background-color: #5E9666;
          color: #FFF;
          display: grid;
          font-size: 22px;
          grid-template-columns: 40px auto 24px;
          height: 40px;
          padding-top: 12px;
          text-transform: uppercase;
          width: 100%;
     }

     .esquerra .titolFiltres img{
          padding-left: 10px;
          padding-top: 3px;
     }

     .esquerra .nouFiltre{
          border-bottom: 1px solid #AAA;
     }

     .esquerra .nouFiltre .noSelect{
          cursor: default;
     }

     .esquerra .nouFiltre .encapcalamentFiltre{
          /*background-color: red;*/
          cursor: pointer;
          font-size: 16px;
          height: 40px;
          padding-left: 10px;
          padding-top: 10px;
          text-transform: uppercase;

          .botoText{
               /*background-color: orange;*/
               color: #575754;
          }
     }

     .esquerra .nouFiltre .contingutFiltre{
          /*display: none;*/
          padding-bottom: 10px;
          padding-left: 10px;

          select.soflow{
               /* http://stackoverflow.com/a/5809186 */
               -webkit-appearance: button;
               -webkit-border-radius: 2px;
               -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
               -webkit-padding-end: 20px;
               -webkit-padding-start: 2px;
               -webkit-user-select: none;
               appearance: button;
               border-radius: 2px;
               box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
               user-select: none;
               background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
               border: 1px solid #AAA;
               color: #555;
               font-size: 14px;
               overflow: hidden;
               padding: 5px 10px;
               text-overflow: ellipsis;
               white-space: nowrap;
               width: 100%;
          }

          select.soflow:disabled{
               border-color: #CCC;
               color: #CCC;
          }

          label.cercaDos{
               background-color: #383838;
               border: 1px solid #707070;
               color: #FFF;
               display: inline-block;
               padding: 5px 0px;
               margin: 5px;
               text-align: center;
               width: 95%;
          }

          label.cercaDos:hover{
               background-color: #5B5B5B;
               color: #FFF;
          }

          input[type=checkbox].CheckFiltre, 
          input[type=radio].CheckFiltre{
               display: none;
          }

          input[type=checkbox].CheckFiltre:checked + label.cercaDos, 
          input[type=radio].CheckFiltre:checked + label.cercaDos{
               background-color: #5E9666;
               color: #FFF;
          }

          input[type=checkbox].CheckFiltre:disabled + label.cercaDos, 
          input[type=radio].CheckFiltre:disabled + label.cercaDos{
               background-color: #CCC;
               color: #EEE;
          }
     }

     .dreta{
          /* de moment sense regles */
     }

     .dretaTitol{
          /* v 1.0 */
          /*background-color: #5E9666;
          color: #FFFFFF;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 10px;
          padding: 14px 10px;
          */
          border-bottom: 1px solid #5E9666;
          border-bottom-width: 3px;
          color: #5E9666;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 10px;
          margin-top: 10px;
     }

     .dretaPerfils{
          display: grid;
          grid-template-columns: repeat(auto-fit, 189px);
          grid-gap: 10px;
          margin-bottom: 10px;
     }

     .dretaPerfils .fitxaResultat{
          border: 1px solid #093;
          height: 252px;
          overflow: hidden;
          position: relative;
          width: 189px;

          a{
               text-decoration: none;
          }

          img{
               height: 252px;
               width: 190px;
          }
     }

     .dretaPerfils .noFoto{
          border: none;

          img{
               border: none;
               height: 252px;
               width: 189px;
          }
     }

     .dretaPerfils .fitxaResultat .nomPersonatgeNou, 
     .dretaPerfils .fitxaResultat a .nomPersonatgeNou{
          bottom: 63.5px;
          color: #fff;
          background: rgb(0, 0, 0); /* Navegadors antics no soporten RGBA */
          background: rgba(0, 0, 0, 0.6);
          padding: 11px 0px;
          position: relative;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          text-transform: uppercase;
     }

}

/* contingutPpal **************************************************************************************************************/
#contingutPpal{
     display: flex;
     margin-top: 10px;
}

#contingutPpal .tresEsquerra{
	padding-left: 10px;
	padding-right: 10px;
	width: 400px;
}

#contingutPpal .tresEsquerra a.amagaFiltres{
	cursor: pointer;
}

#contingutPpal .tresEsquerra .titolFiltres, 
#contingutPpal .tresEsquerra .titolEstadistiques{
	background-color: #5E9666;
	color: #FFF;
	display: grid;
	font-size: 22px;
	grid-template-columns: 40px auto 24px;
	height: 42px;
	padding-top: 10px;
	text-transform: uppercase;
	width: 100%;
}

#contingutPpal .tresEsquerra .titolEstadistiques{
	margin-top: 20px; /* abans 1.3vw */
}

#contingutPpal .tresEsquerra .titolFiltres img, 
#contingutPpal .tresEsquerra .titolEstadistiques img{
	padding-left: 10px;
	padding-top: 3px;
}

#contingutPpal .tresEsquerra .nouFiltre{
	border-bottom: 1px solid #AAA;
}

#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre{
	/*background-color: red;*/
	cursor: pointer;
	font-size: 16px;
	height: 40px;
	padding-left: 10px;
	padding-top: 10px;
	text-transform: uppercase;
}

#contingutPpal .tresEsquerra .nouFiltre .noSelect{
     cursor: default;
}

#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre .botoText{
	/*background-color: orange;*/
	color: #575754;
	float: left;
	width: 95%;
}

#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre .botoSenyal{
	float: left;
	width: 5%;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre{
	/*display: none;*/
	padding-bottom: 10px;
	padding-left: 10px;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre .textInfo{
	color: #999;
	/*padding-bottom: 0.3vw;
	padding-left: 0.9vw;*/
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre select.soflow{
	/* -------------------- Source: http://stackoverflow.com/a/5809186 */
	-webkit-appearance: button;
	-webkit-border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	-webkit-padding-end: 20px;
	-webkit-padding-start: 2px;
	-webkit-user-select: none;
     appearance: button;
     border-radius: 2px;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
     user-select: none;
	/*background-image: url('http://www.unniks.com/vin/imatges/fletxa-select-2.png'), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);*/
     background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
	background-position: 97% center;
	background-repeat: no-repeat;
	border: 1px solid #AAA;
	color: #555;
	font-size: 14px;
	overflow: hidden;
	padding: 5px 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre select.soflow:disabled{
	border-color: #CCC;
	color: #CCC;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre label.cerca{
	background-color: #383838;
	border: 1px solid #707070;
	color: #FFF;
	display:inline-block;
	margin-bottom: 10px;
	margin-right: 3px;
	padding: 5px 12px;
	text-align: center;
	width: 120px;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre label.cercaDos{
	background-color: #383838;
	border: 1px solid #707070;
	color: #FFF;
	display: inline-block;
	padding: 5px 0px;
	margin: 5px;
	text-align: center;
	width: 95%;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre label.cerca:hover, 
#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre label.cercaDos:hover{
	background-color: #5B5B5B;
	color: #FFF;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=checkbox].CheckFiltre{
	display: none;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=checkbox].CheckFiltre:checked + label.cerca, 
#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=checkbox].CheckFiltre:checked + label.cercaDos{
	background-color: #5E9666;
	color: #FFF;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=checkbox].CheckFiltre:disabled + label.cerca, 
#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=checkbox].CheckFiltre:disabled + label.cercaDos{
	background-color: #CCC;
	color: #EEE;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=radio].CheckFiltre{
	display: none;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=radio].CheckFiltre:checked + label.cerca, 
#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=radio].CheckFiltre:checked + label.cercaDos{
	background-color: #5E9666;
	color: #FFF;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=radio].CheckFiltre:disabled + label.cerca, 
#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre input[type=radio].CheckFiltre:disabled + label.cercaDos{
	background-color: #CCC;
	color: #EEE;
}

#contingutPpal .tresEsquerra .avisosSotaMenu .avisosFiltres .contingutAvis{
	background-color: #DDD;/* #d8ecf7*/
	border: 1px solid #777; /*#afcde3*/
	color: #777; /*#06C;*/
	margin-top: 15px;
	padding: 10px;
	
	/* Bordes */
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#contingutPpal .tresEsquerra .avisosSotaMenu .botonsEstadistiques{
	margin-top: 10px;
}

#contingutPpal .tresEsquerra .avisosSotaMenu .botonsEstadistiques a .botoEstad{
	background-color: #5E9666;
	color: #FFF;
	float: left;
	font-size: 13px;
	margin-bottom: 5px;
	padding: 6px 0px;
	text-align: center;
	text-decoration: none;
	width: 100%;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#contingutPpal .tresEsquerra .avisosSotaMenu .botonsEstadistiques a .noActiu{
	background-color: #CCC;
}

/* SWITCH dins: #contingutPpal .tresEsquerra .nouFiltre .contingutFiltre */
/* https://www.w3schools.com/howto/howto_css_switch.asp */
/* The switch - the box around the slider */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #5E9666;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
}

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre .contenidorSwitch{
	float: left;
	padding-right: 10px;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre .textSwitch{
	color: #555;
	padding-top: 2px;
}

#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre .contenidorSwitch .switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 22px;
}
/* Fi de switch */

#contingutPpal .tresDreta{
	display: grid;
	grid-template-columns: repeat(auto-fit, 189px);
	grid-gap: 10px;
	width: 90%;
}

#contingutPpal .entrenadors{
	padding-bottom: 10px;
	padding-left: 10px;
	width: 100%;
}

#contingutPpal .tresDreta .fitxaResultat{
	border: 1px solid #093;
	height: 252px;
	overflow: hidden;
	position: relative;
	width: 189px;
}

/*
DEPRECATED?
#contingutPpal .tresDreta .noVisible, 
#web .noVisible{
	border: 1px solid #F93;
}*/

#contingutPpal .tresDreta .noFoto{
	border: none;
}

#contingutPpal .tresDreta .vinculat{
	border: 1px dashed #093;
}

#contingutPpal .tresDreta .fitxaResultat img{
	height: 252px;
	width: 190px;
}

#contingutPpal .tresDreta .noFoto img{
	border: none;
	height: 250px;
	width: 187px;
}

#contingutPpal .tresDreta .fitxaResultat a{
	text-decoration: none;
}

#contingutPpal .tresDreta .fitxaResultat .nomPersonatge, 
#contingutPpal .tresDreta .fitxaResultat a .nomPersonatge,
#contingutPpal .tresDreta .fitxaResultat .nomPersonatgeNou, 
#contingutPpal .tresDreta .fitxaResultat a .nomPersonatgeNou,
#web .fitxaResultat a .nomPersonatgeNou{
	bottom: 63.5px;
	color: #fff;
	background: rgb(0, 0, 0); /* Navegadors antics no soporten RGBA */
    	background: rgba(0, 0, 0, 0.6);
	padding: 11px 0px;
	position: relative;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

#contingutPpal .avisos{
	display: none;
}

#contingutPpal .avisos .avisosFiltres .contingutAvis{
	background-color: #DDD;/* #d8ecf7*/
	border: 1px solid #777; /*#afcde3*/
	color: #777; /*#06C;*/
	margin-top: 15px;
	padding: 10px;
	/* Bordes */
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#contingutPpal .avisos .botonsEstadistiques{
	margin-top: 20px;
}

#contingutPpal .avisos .botonsEstadistiques a .botoEstad{
	background-color: #5E9666;
	color: #FFF;
	float: left;
	font-size: 13px;
	margin-bottom: 5px;
	margin-right: 10px;
	padding: 6px 0px;
	text-align: center;
	text-decoration: none;
	width: 100%;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#contingutPpal .avisos .botonsEstadistiques a .noActiu{
	background-color: #CCC;
}

#footer{
	background-color: #EEE;
	border-top: 1px solid #CCC;
	bottom: 0px;
	color: #111;
	font-size: 11px;
	padding: 8px;
	position: fixed; /*Fa que no s'amagui fent scroll */
	text-align: center;
    	width: 100%;
	z-index: 10;
}

#footer a{
	color: #999;
	text-decoration: none;
}

#footer a:hover{
	color: #666;
	text-decoration: none;
}

.comentari{
	color: #BBB;
	font-size: 13px;
}

.liniaGrup{
     padding: 3px;
}

.liniaGrup .posGrup{
     color: #999;
}

.liniaGrup .comentariGrup{
     color: #666;
}

.liniaGrup:hover{
     background-color: #093;
     color: white;

     .posGrup, 
     .comentariGrup{
          color: #DDD;
     }
}