/* CSS Document        			*/
/* Tauler 3.0b					*/


/* Estils Tauler 3.0 */
* {margin:0; padding:0; border-collapse: collapse;}
body {background-color:#EBF3FA; font-family: 'Roboto', tahoma, verdana, helvetica; font-size: 17px;}

/* =========================  LOGIN */
.login {}
.cuadre {width:94%; max-width: 400px; padding: 2em 2%; margin: 50px auto 0; background:white; border: solid 1px #E8E8E8;}
.casella {width:96%; margin: 8px 1%;}
.error {width:94%; max-width: 400px; padding: 10px 2% 0; margin: 40px auto 0; background:white; border: solid 1px #E8E8E8; border-left: solid 3px #C42F00;}
.error p {margin-bottom:10px;}
.logo_client {width: 180px; height: 180px; margin: 4% auto 0; text-align: center;}
.logo_client img {height: 100%;}

/* =========================  Estructura bàsica*/
.top {position:fixed; top:0; left:0; width:100%; height:33px; background-color:#23282D; color:white;  z-index:2;}
.barra {position:fixed; top:0; left:0; width:175px; height:100%; background-color:#23282D; color:white; z-index:1;}
.cos {width: calc(100% - 195px); padding: 20px 0 0 20px; margin: 0 0 0 175px; z-index: 0; position: absolute; top:33px;}
.top .boto_menu_resp {float:left; width: 30px; height:30px; margin-left:5px; display:none;
			background-image:url('img/menu_resp.png'); background-repeat:no-repeat; background-position: center center; background-size:cover;}
.top .t_esquerra {float:left; width:48%; padding: 2px 4px;}
.top .t_dreta {float:right; width:48%; padding: 4px 6px; text-align:right; margin-right:10px;}
.t_esquerra a {color: #DDDDDD; text-decoration: none;}

/* =========================  Estructura visible*/
.peu  {width:100%; margin-top: 15px; padding: 15px 0 0; clear:both;}
.tauler, .edicio, .llista, .edicio_gran, .llista_gran, .edicio_thumb, .calendari, .llista_petita
	{float:left; margin: 0 20px 20px 0; border: solid 1px #DDDDDD; overflow:hidden; border-radius: 3px; position: relative; overflow:hidden;
	background-color:white;}
.tauler {width: 98%; max-width: 600px;}
.edicio {width: 98%; max-width: 950px;}
.edicio_gran {width: calc(100% - 20px); max-width: 1314px; overflow:auto;}
.llista_gran {width: calc(100% - 20px); max-width: 1314px; overflow:auto;}
.llista {width: 100%; max-width: 750px; max-height:650px; overflow:auto;}
.llista_petita {width: 45%; max-width: 450px; max-height:650px; overflow:auto;}
.ok {border-left: solid 3px #408030 !important;}
.ko {border-left: solid 3px #C42F00 !important;}
.ok p, .ko p, p.ko, p.ok {padding: 6px 0 6px 10px;}


/* =========================  MENU */
.menu {width: 100%; margin-top:33px;}
.connectat {padding-left:10px; vertical-align:middle;}
.connectat img {height: 25px;}
.top  li {display:inline-block; background-color:#23282D;}
.top .veure {display:none; padding-left:25px;}
.top .veure li a {display:block; color:white; padding: 10px 10px; border: solid 1px #363636; border-top: none;}
.connectat > li:hover {cursor:pointer;}
.connectat > li:hover ul.veure {display:block; position:absolute;}
.menu a {display: block; padding: 10px; color:#DDDDDD;}
.menu > ul > li {border: solid 1px #363636; border-top: none;}
.menu > ul > li.selec > a, .menu > ul > li > a:hover, .sub_opcio a:hover {color:white; background-color: #0079B4;/*#3760B5;*/}
.menu > ul > li.selec > ul > li {display:list-item;}
.menu > ul > li:hover > ul > li.sub_opcio {display:block;}
.sub_opcio {display:none;}
.sub_opcio a {padding-left: 25px; padding-top: 5px; color:#A0A0A0; }
.sub_opcio a.selec {color:white; background-color:transparent;}
p.sector {text-align:center; padding: 8px 0; margin-top: 12px; background-color:rgba(255,255,255, 0.1); color:white;}

/* =========================  ENLLAÇOS */
a {text-decoration:none; color: #0079B4; /*#3760B5;*/} /* General */
a.esborra, span.esborra, td.esborra {color: #C42F00;}
.m_src:hover, a.esborra:hover, .tanca:hover, .llista_fitxers a, a:hover, .eines_gal img:hover, .suma:hover, .thumb_puja:hover,
.tanca_blanc:hover, .recarrega:hover, .enllac:hover, .mes td:hover, .ves:hover {cursor:pointer;}
a .movil img {display: inline-block;}

/* =========================  LLISTA GRAN */
.boto_nou {position:relative; top: auto; right: auto; width: auto; margin: 5px 0 0 2%; max-width:none;}
.boto_llista {height: 30px; padding: 0 10px; margin: 0 2px; min-width: 10px; border: solid 1px #0079B4;  /*border-radius: 5px;*/ font-weight:bold;}
.boto_llista:hover {background-color: #0079B4; color:white;}
.controls {padding: 10px 0; clear: both;}
.controls .inactiu, .controls .inactiu:hover {border: solid 1px #a3a3a3 !important; color: #a3a3a3 !important;  font-weight:normal; background-color: transparent; cursor:default;}
table.producte {width:100%; margin:0;}
table.producte th {padding: 10px 12px 4px;}
table.producte td {padding: 8px 12px; vertical-align: top;  position:relative;}
table.producte td img {display: inline-block; object-fit: contain; vertical-align: text-bottom}
span.id {color: #a3a3a3; margin-right: 8px;}
.eines {display:none;}
.llista table.productes tr:hover .eines {display: inline-block;}

label:hover {cursor:pointer;}
.destaca_dreta {position: absolute; right: 5px; bottom:8px; font-weight:bold;}

/* =========================  FORMULARIS */
.form_esquerra, .form_esquerra_gran {float:left; width:48%; margin-left:1%;}
.form_dreta, .form_dreta_petit {float:right; width:48%;  margin-right:1%;}
.form_centre {width: 98%; margin: 0 0 10px 1%; clear:both; position: relative;}
.form_dreta_petit {width:31%;}
.form_esquerra_gran {width:67%;}
.form_esquerra input.llarg, .form_dreta input.llarg {width:98%; max-width:370px;}

input, select, .boto, textarea {font-family: 'Roboto'; font-size: 16px;  border: solid 1px  #DDDDDD/*#E8E8E8*/; border-radius: 0; padding: 5px;}
input[type=button], input[type=submit], .boto {padding: 7px 14px; background-color: #0079B4; color: white;}
.boto {padding: 4px 10px;}
textarea {width: 100%; margin: 5px 0 10px;}
.llarg {width:100%;}
.curt {width:50%;}
.mini {width:60px;}

.boto, .boto_elimina, .boto_desactivat, .boto_trans, .boto_trans_esquerra, {display: inline-block; margin: 3px 0; padding: 3px 10px;
			color:white; background-color:#408080; border: solid 1px #DDDDDD; border-radius:4px; font-size:1em; font-weight:normal;}
.img {position:relative; width: calc(100% - 2px); height: 350px; margin: 0 0 10px; border: solid 1px #DDDDDD/*#ededed*/;
			background-position:center center;  background-repeat:no-repeat; background-size:contain;}
.src {width:100%; color:white; padding: 5px 1%; border:none; font-size: 90%; background-color: rgba(64,64,64,0.5);}
.boto_trans, .boto_trans_esquerra, input[type=button].boto_trans, input[type=button].boto_trans_esquerra 
	{color:white; border: solid 1px rgba(164,164,164,0.5); margin: 5px 7px; position: absolute; bottom: 0; right: 0;
			background-color:rgba(64,64,64,0.5);}
.boto_trans_esquerra, input[type=button].boto_trans_esquerra {right: auto; left: 0;}

.cuadrat {border: solid 1px #DDDDDD/*#ededed*/; margin: 10px 0;}

/* =========================  TAULER */
.tauler p {padding: 0 1.6% 15px; text-align: justify;}

/* =========================  TEXT */
/*.edicio p, .llista p, .galeria p, .tauler p, .edicio_gran p {padding: 0 calc(1% + 4px);}*/


/* =========================  RESUM per CRM */
.costat_taronja, .costat_vert, .costat_taronja_clar, .costat_vert_clar, .costat_blau, .costat_blau_clar, .costat_marro
	{padding: 0 0 5px 85px; max-width: 323px !important; min-height: 110px;}
.barra_marro, .costat_marro {border-left: solid 3px #592e0b;}
.barra_taronja, .costat_taronja {border-left: solid 3px #db573f;}
.barra_taronja_clar, .costat_taronja_clar {border-left: solid 3px #eaac50;}
.barra_vert, .costat_vert {border-left: solid 3px #5fa568;}
.barra_vert_clar, .costat_vert_clar {border-left: solid 3px #bedb73;}
.barra_blau, .costat_blau {border-left: solid 3px #6185e3;}
.barra_blau_clar, .costat_blau_clar {border-left: solid 3px #53bdeb;}
.costat_taronja h2, .costat_vert h2, .costat_taronja_clar h2, .costat_vert_clar h2, .costat_marro h2, .costat_blau h2, .costat_blau_clar h2 {padding: 10px 0 0; margin:0; width:auto;}
.caixa_taronja, .caixa_vert, .caixa_taronja_clar, .caixa_vert_clar, .caixa_blau, .caixa_blau_clar, .caixa_marro
		{width: 75px; height: 100%; position: absolute; top:0; left:0; color: white; display:table; font-size: 2em; font-weight:bold;}
.caixa_taronja {background-color:#db573f;}
.caixa_taronja_clar {background-color:#eaac50;}
.caixa_vert {background-color:#5fa568;}
.caixa_vert_clar {background-color:#bedb73;}
.caixa_blau {background-color:#6185e3;}
.caixa_blau_clar {background-color:#53bdeb;}
.caixa_marro {background-color:#592e0b;}
.caixa_taronja p, .caixa_vert p, .caixa_taronja_clar p, .caixa_vert_clar p, .caixa_marro p, .caixa_blau p, .caixa_blau_clar p {display: table-cell; 
	vertical-align: middle; text-align: center;}
.costat_taronja p img, .costat_vert p img, .costat_taronja_clar p img, .costat_vert_clar p img {top: 2px; position:relative;}
.boto:hover {cursor: pointer;}


/* =========================  BIBLIAPP */
.taula_etiqueta {width: 96% !important; margin: 10px auto !important; border: solid 1px #d3d3d3 !important; min-height: 165px;}
.taula_etiqueta tr {}
.taula_etiqueta th {}
.taula_etiqueta td {padding: 3px 0 3px 5px!important; vertical-align:top;}

.caixa_etiqueta {float: right; width: 100%; max-width: 260px; min-height: 350px; padding-bottom: 50px; margin: 0 0 15px; border: solid 1px #E8E8E8; position: relative;
	background-color: white;}
.caixa_etiqueta > img {display: block; width: 100px; margin: 8px auto 15px}
.caixa_etiqueta h4 {text-transform: uppercase; margin: 5px 5px 25px;}

.arxivador {float: left; margin: 0 15px 20px 0; padding: 10px; width: 240px; height: 420px; position: relative; overflow: hidden; 
	background-color: #592e0b;}
.arxivador p {font-size: 15px;}
.arxivador .caixa_etiqueta {border: none; padding-bottom: 0; height: 100%;}
.arxivador .taula_etiqueta {position: absolute; bottom: 25px; left: 2%; font-size: 15px; background-color: #FFFFFFE0;}
.arxivador_peu {position: absolute; bottom: 12px; right: 15px; font-size: 15px;}
}

/*VELLS*/

/* =========================  Estructura visible*/

.edicio_thumb {width: 400px;}
.mostra_serp {width: 585px;} /*amplada de l'snippet a google*/

/* =========================  TEXT */
h2 {width:100%; clear:both; margin-bottom: 20px;}
h3 {padding: 10px 1.6% 15px;}
h4 {margin: 15px 0 10px;}
.llista_gran h3 {padding: 10px 1% 15px;}
.titol {border-bottom: solid 1px #DDDDDD;}
.funcions {color: #DDDDDD;}

.galeria table {margin: 10px 0; border-collapse:collapse;}
#mostra_imatge {width:300px; height:300px; border: solid 1px #DDDDDD;
			background-position:center center; background-size:contain; background-repeat:no-repeat;}

/* =========================  LLISTES */
.taula_llista {clear: both; border-top: solid 1px #AAAAAA; max-height:500px; overflow:scroll; /*overflow-x: hidden;*/}
.llista table, .llista_gran table, .llista_petita table, .edicio table, .tauler table {width: 100%; border-collapse:collapse; border:none; clear:both;}
.edicio table {width: 98%; margin: 0 auto;}
.llista th, .llista_gran th, .llista_petita th  {padding: 8px 5px 5px; text-align:left; border-bottom: solid 1px #DDDDDD;}
.llista td, .llista_gran td, .llista_petita td, .edicio td, .galeria td, .tauler td, .edicio_gran td, .edicio_thumb td {padding: 6px 4px;}
.llista h3 {}
.boto_nou, .botons {position:absolute; top: 8px; right: 10px; max-width:300px;}
.llista table {width:100%; margin: 0; clear:both;}
textarea.td_html {height: 23px; background-color: transparent; resize: none;}
.taula_filtres {display: table; width: 98% !important; margin: 0 1% 10px !important;}
.casella_filtres {display: table-cell;}

/* =========================  FORMULARIS */
/*
table.edicio {width: 94%; margin: 5px 2%;}
table.taula_form {margin: 5px 0;}
table h4 {margin: 0;}
table hr {margin: 10px 0;}
.taula_form td {padding: 4px;}
input, select {padding: 3px 1%; font-size:1em; border-radius:4px;}
textarea {width: calc(100% - 12px); padding: 5px;}
textarea::placeholder, textarea {font-family: 'Roboto'; font-size: 1em; border-radius: 4px;}
.boto, .boto_elimina, .boto_desactivat, .boto_trans, .boto_trans_esquerra, .boto_petit {display: inline-block; margin: 3px 0; padding: 3px 10px;
			color:white; background-color:#408080; border: solid 1px #DDDDDD; border-radius:4px; font-size:1em; font-weight:normal;}
.nou_boto {display: inline-block; padding: 4px 10px; color:#646464; border:none; border-radius:4px; font-size:1em; font-weight:normal;
	background-color:#e3e3e3; }			
.boto_petit {margin: 0 2px; padding: 3px;}
.boto_gris {display: inline-block; padding: 5px 10px; border: solid 1px #DDDDDD; border-radius:4px; font-size:1em; font-weight:normal;}
.boto_elimina {background-color: #FA6464;}
.boto_descativat {background-color: #C3C3C3;}
.fosc .boto {border: solid 1px #888888;}
.boto:hover, .boto_elimina {cursor:pointer;}
.imatge_preview, .img_baner, .logo_preview, .img_blog {width:99%; height:250px; margin: 4px auto 10px; border: solid 1px #ededed; position: relative; 
			background-position:center center; background-repeat:no-repeat; background-size:cover;}
.logo_preview {height:200px; background-color: #eee; background-size:contain;}
.img_blog {max-width: 650px; height:175px; margin: 4px 0 10px; display:inline-block;}


.mostra_enp {width:100%; height: 150px; position: relative; border: solid 1px #d3d3d3;
			background-position: center center; background-size:contain; background-repeat:no-repeat;}
.mostra_logo {width: 125px; height: 125px; background-position: center center; background-size:cover; background-repeat:no-repeat;}
.tauler td {vertical-align:middle;}
#img_preview, .img_guia  {float:right; position:relative; width: 200px; height: 133px; margin-right: 8px; border: solid 1px #ededed;
			background-position:center center;  background-repeat:no-repeat; background-size:cover;}
.img_guia {width: 100%; height: 230px; margin-right: 8px;}
#imatge_baner {}
.form_centre {width: 98%; margin: 0 0 10px 1%; clear:both; position: relative;}
.form_esquerra input.llarg, .form_dreta input.llarg {width:98%; max-width:370px;}
.form_botons {padding: 15px 0 10px;}
.llarg {width:97%;}
.curt {width:48%; width:150px;}
input.petit {width:80px; padding: 3px 2%;}
.mini {text-align:center;}
.mini input, input.mini {width:42px; padding: 3px 0; text-align:right;}
.micro {width:40px;}
.euros {width: 50px; text-align: right;}
.input_h3, h3 input {font-weight: bold; border: solid 1px #d3d3d3; min-width: 360px;}
textarea.gran {height:400px;}
textarea.codi_font {height: 150px;}
textarea.text_mini {font-family: 'Roboto', Helvetica, Arial; color: #655A52; font-size: 1em; height: 80px;}
textarea.text_mini::placeholder {font-family: Helvetica, Arial; color: gray; font-size: 0.9em; font-style:italic;}
.cuadrat {border: solid 1px #C0C0C0; margin-bottom: 10px; margin-top: 10px;}
.cuadrat h4 {padding-left: calc(1% + 6px);}
.separa {width:100%; clear:both;}
.opcio_0 {font-style:italic; color:gray;}
.ico_comunicacio {float: right; height: 30px; margin: 0 10px; }
.cuadrat {border: solid 1px #d3d3d3;}
*/
/*TAULER 2.2 noves pestanyes*/
.pestanyes_edicio {width:100%; display: table; margin-top: 8px;}
.pestanya {display: table-cell; width: 80px; padding: 0 4px 4px 0;}
.pestanya_botons {display: table-cell; width: auto; text-align:right;}
.pestanya a {padding:8px 12px; border:solid 1px #C0C0C0; border-bottom:none; width:100%;
	border-top-left-radius: 4px; border-top-right-radius: 4px;}
.contenidor_pestanyes {position:relative; width: 100%; border:solid 1px #C0C0C0;}
.caixa_pestanya {width: 100%; background-color:white; clear:both; padding-top: 8px; overflow:hidden;}
.pestanyes_idioma {padding-top: 20px; z-index:1;}
.pestanyes_idioma li {display:inline-block; min-height:30px;}
.pestanyes_idioma li a {border:solid 1px #C0C0C0; border-bottom:none;
	border-top-left-radius: 4px; border-top-right-radius: 4px; background-color:#F0F0F0;}
.sota {position: absolute; top:0; left:0; z-index:-10;}
/*colors i idiomes*/
.catala, .frances, .angles {position: absolute; top: 0; left:0; z-index: -10;}
#pestanya_es, .castella {background-color: white;}
#pestanya_ca, .catala {background-color: #F0F0F0;}
#pestanya_fr, .frances {background-color: #c8dbe8;}
#pestanya_en, .angles {background-color: #fef1d3;}

/* =========================  Caixes explicatives */
ul.pics {margin: 10px 2%; padding-left: 30px;}

/* =========================  GALERIA */
.galeria {position: relative; width: calc(100% - 20px); min-width: 800px; border: solid 1px #DDDDDD; padding: 4px 0 10px; background-color: white; overflow: hidden;}
.galeria h3 {padding: 0 4px; margin-bottom: 25px;}
.img_gal {float:left; position:relative; width: 13.35%; height: 175px; margin: 5px 0.45% 5px; overflow:hidden;
	background-color: #DDDDDD; background-position:center center; background-repeat:no-repeat; background-size:contain;}
.eines_gal {position:absolute; bottom: 0; right:0; width:100%; height: 35px; background-color: rgba(64,64,64,0.5);}
.eines_gal img {position: absolute; right:2px; bottom: 2px;}
.eines_gal .nom_fitxer {position: absolute; top:0; left:2px; font-size: 0.85em; color:white;}
.eines_gal .mides_fitxer {position: absolute; bottom:2px; left:2px; font-size: 0.85em; color:white;}
.thumb_puja {background-image:url('img/creu_trans.png'); background-size:50%;}
.boto_sel {position:absolute; top: 15px; right: 35px;}
/* =========================  CASELLA D'ESPERA */
.espera {width:30px; height:30px; display:none;}
.espera img {width:100%;}

/* =========================  COLUMNA DRETA GUARDA / INFO ADICIONAL */
.cos_dret h3, .cos_dret h4 {padding: 10px 1.5%; margin:0;}
.casella_grava {position: absolute; left: auto; right: 10px; margin: 0; top: 35px; height:30px; overflow:hidden; z-index: 1;}
.cambia_mida {position: absolute; right:5px; top: 0;}
#iframe_ajax, #iframe_info, .iframe_info {width: 100%; height: 100%; border: none; background: transparent; overflow:hidden;}
.casella_info {width: 100%; padding: 0 0 5px; margin: 0 0 15px; border: solid 1px #dddddd; background-color: white; position: relative; overflow:hidden;}
.casella_info h4 {position:relative;}
.desplega {overflow: hidden; transition: height 1s; position: relative;}
.desplega form {display: block; padding: 10px 5%;}
.desplega ul {border: solid 1px #d3d3d3;}
.desplega li {display: block; padding: 5px 10px;}
.mostra_oculta {position: absolute; top:5px; right:5px; height: 30px; width: 30px; 
	background-image: url('../tauler/img/cercle-fletxa-avall.png'); background-position:center center; background-repeat:no-repeat; background-size:contain;}

/* =========================  TAULES en General, COLORS i ALINEACIONS*/
.dreta {text-align:right !important;}
.esquerra {text-align:left !important;}
.centre {text-align:center !important;}
.dalt {vertical-align:top;}
.baix {vertical-align:bottom;}
.mig {vertical-align:middle !important;}
.vertical {display:inline-block;margin:0; padding:0;transform: rotate(270deg); /*transform-origin: left bottom 0;*/}
.fosc {background-color: rgba(10,10,10,0.3); color: white;}
.gris {background-color: #f3f3f3;}
.gris-fosc {background-color: #a0a0a0; color:white;}
.vert {background-color: #DCFFDC; text-align:center;}
.vermell {background-color: #FFDCDC; text-align:center;}
.inactiu {color: gray; font-style:italic;}
.text_gris {color: #c0c0c0;}
.linia {border-bottom: solid 1px #d3d3d3;}
.indent {margin-left: 30px; text-indent:-30px;}
.tachat {text-decoration:line-through;}

/*colors Calendari*/
.fosc2 {background-color: rgba(10,10,10,0.3); color: white; text-align:center; padding-bottom: 5px;}
.vert-fosc {background-color: #b4f9b4;}
.groc {background-color: #FFF2CC;}
.groc-fosc {background-color: #FFDC79;}
.vermell-fosc {background-color: #f9b4b4; text-align:center;}
.blau {color: #008AF1;}
.c_vert {color: #408080;}

/* javascript*/
.fons_negre, .fons_negre_espera {position: fixed; width: 100%; height:100%; top: 0; left:0; background: rgba(10,10,10,0.4); z-index:65537;}
.mostra_src, .mostra_espera {position: relative; width: 90%; max-width: 500px; height: 275px; margin: 200px auto; padding: 15px; border: solid 1px black;
	background: white;}
.fons_negre_espera {background-image: url('img/loading.gif'); background-position:center center; background-size: 100px; background-repeat:no-repeat;}
.mostra_espera {width: 80%; max-width: 300px; height: 150px; margin: 100px auto; padding: 5px;}
.mostra_src p, .mostra_espera p {margin: 6px 0px 12px;}
.galeria_selec {width: 80%; height: 80%; min-width:700px; min-height: 650px; margin: 5% auto; background: white; border: solid 1px black;}
.mostra_galeria {position: relative; width: 90%; height: 90%; margin: 3% auto; padding: 1%; background: white; border: solid 1px black;}
.mostra_galeria h3 {padding: 0;}
.galaria_ext {margin-top: 10px; width: 100%; height:94%; border: solid 1px #DDDDDD;}
.tanca, .tanca_blanc {position: absolute; top: 0; right: 0; width: 25px; height: 25px;
	background-image: url('img/tanca_gris.png'); background-repeat: no-repeat; background-position: top right;}
.tanca_blanc {background-image: url('img/tanca_blanc.png');}
.suma {width: 20px; height: 20px; display: inline-block;
	background-image: url('img/suma_vert.png'); background-size: contain;}
#proces {width:95%; border: solid 1px #DDDDDD; margin: 10px 2%;}
#llista_fitxers {width:96%; height: 400px; margin: 5px 2%; border: solid 1px #d3d3d3; background-color: white;}
table.llista_fitxers {border-collapse: collapse; margin: 2px;}
.llista_fitxers td, .llista_fitxers th {border-bottom: solid 1px #d3d3d3; text-align:left; padding: 2px;}
#arxiu_traspas {font-size: 0.8em;}

/*guiapp*/
.mostra_mail {position: relative; width: 90%; max-width: 800px; height: 80%; max-height: 600px; margin: 5% auto; padding: 0 2%; border: solid 1px black;
	background: white; overflow:hidden;}
#mostra_mail , #mostra_reserva {width: 100%; margin: 0 auto; height: calc(100% - 45px); border: solid 1px black;}
#mostra_reserva {height: 100%; border: solid 1px #d3d3d3;}


/* ========================================================================================= Tauler 2.1 Responsive */
.movil {display: none;}
@media only screen and (max-width: 1800px) {
}
@media only screen and (max-width: 1650px) {
img_gal {width: 13.35%; height: 160px;}
}
@media only screen and (max-width: 1500px) {
.cos {min-width:60%;}
.img_gal {width: 15.75%;}
}
@media only screen and (max-width: 1366px) {
.peu {}
.cos {width: calc(100% - 20px); padding: 20px 0 0 20px; margin: 0; z-index: 0; position: absolute; top:33px;}
h2 {margin: 6px 0 20px;}
top {}
.barra {display:none;}
.top .boto_menu_resp {display:block;}
.top .t_esquerra {width:auto;}
.top .t_dreta {width:auto;}
/* =========================  MENU */
.menu a {padding: 6px;}
.sub_opcio a {padding-left: 15px; padding-top: 2px;}
p.sector {padding: 4px 0; margin-top: 6px;}
.llista_filtre span .casella_cerca {min-width: 210px;}
.llista_filtre .dreta {float:left; max-width: 165px;}
}

@media only screen and (max-width: 1280px) {
.cos_dret  {position: initial; top: auto; right:auto; width: auto; padding: 0 2%; overflow:hidden;}
.casella_info {float: left; width: 31%; padding: 0 0 5px; margin: 0 2% 15px 0;}
.img_gal {width: 19.1%;}
}
@media only screen and (max-width: 1150px) {
.cos  {min-width: 0;}
}
@media only screen and (max-width: 1035px) {
.casella_grava {top: 45px;}
.img_gal {height: 180px;}
div.galeria{min-width: 0;}
}

@media only screen and (max-width: 800px) {
/* =========================  Estructura bàsica*/
.llista, .edicio, .tauler, .edicio_gran, .llista_petita {float:none;  width: 98% !important; margin: 15px 0;}
.cos_dret  {width: 100%; padding: 0;}
.peu  {margin-top: 15px; padding: 5px 0 0;}

/* =========================  Estructura visible*/
.llista th {padding: 6px 3px;}
.llista td, .llista_gran td, .edicio td, .galeria td, .tauler td {padding: 4px;}
.llista_filtre .central {width: 75%; clear:left;}
.llista_filtre .dreta {float:right;}
.llista_filtre table br {display:none;}
.llista_filtre table span.espai {display:inline-block;}
/* Formularis */
.form_esquerra input.llarg, .form_dreta input.llarg {max-width:99%}
.casella_info {width: 45.5%; padding: 0 0 5px; margin: 0 2% 15px;}
.peu  {}
.menu {}
/*Altres*/
.img_gal {width: 24.1%;}
}

@media only screen and (max-width: 640px) {
/* =========================  Estructura bàsica*/
.cos {width: 96%; padding: 20px 2% 0; margin: 0; z-index: 0; position: absolute; top:33px;}
div.llista, div.edicio, div.tauler, div.edicio_gran, div.llista_gran {float:none; width: 100%; margin: 5px auto;}
/*div.llista {max-height: 90%;}*/
.llista th {font-size:0.9em;}
.llista h3 {max-width:60%;}
p.sector, .no_movil {display: none;}
td.movil, th.movil  {display: table-cell;}
p.movil, div.movil {display: block;}
span.movil, a.movil {display: inline-block;}
input.movil {display: inline-block;}
.no_movil {display: none !important;}
/* Formularis */
.form_esquerra, .form_dreta, .form_esquerra_gran, .form_dreta_petit {float: none; width:98% !important; margin: 15px auto; padding:0 1%; clear:both; }
.form_esquerra_gran, .form_dreta_petit {width:96% !important; padding:0 0.5%;}
#img_preview {float: none; width: 300px; height: 200px; margin: 0 auto;}
.form_botons {max-width:98%;}
.botons {position:relative; top: auto; right: auto; width: auto; margin: 5px 0 0 2%; max-width:none;}

/*Altres*/
.img_gal {width: 32.1%;}
}

@media only screen and (max-width: 480px) {
/* =========================  Estructura bàsica*/
.top .boto_menu_resp {float:none; position:absolute; top: 0; left:0; }
.top .t_esquerra {display:none;}
.top .t_dreta {float:none; position:absolute; top: 0; right:0; width:80%}
.barra {}
.casella_info, .casella_grava {width: 98%; padding: 0; margin: 0 auto; top: 35px; height:22px;}
/* formularis */
.edicio table {width:99%;}
table.edicio {margin: 5px auto;}
.curt {width:80%;}
.llarg, .form_esquerra input.llarg {width:98%;}
.activitats_llista, .activitats_sel {float:none; width: 96%; margin: 5px auto;}
/*llistes*/
.llista h3 {max-width: none; position:relative; padding-bottom: 5px;}
.avui {width:99%; margin: 10px 0;}
.llista table {margin: 10px 0 5px;}
/*filtres*/
.taula_filtres, .taula_filtres tr, .taula_filtres td {display: block;}
.taula_filtres {margin: 10px 2%;}
.casella_filtres {width: auto; float:left;}
/* =========================  RESUM per CRM Tauler 2.2*/
.costat_taronja, .costat_vert, .costat_taronja_clar, .costat_vert_clar, .costat_blau {max-width: none !important; width: calc(98% - 86px) !important; min-height:inherit;}
.costat_taronja p, .costat_vert p, .costat_taronja_clar p, .costat_vert_clar p, .costat_blau p {line-height: 30px;}
.baixet {}
/*Altres*/
.img_gal {width: 48%; margin: 5px 1%;}
.mostra_mail {width: 96%; height: 90%; max-height: none; margin: 2% auto; padding: 0;}
#mostra_reserva {height: calc(100% - 25px); border: none; margin-top: 25px;}


@media only screen and (max-width: 380px) {
.llista h3, .edicio h3 {display: none;}
.filtre {margin-top: 5px;}
}

@media only screen and (max-height: 420px) {
.barra {overflow:scroll; overflow-x:hidden;}
}