/* CSS Document        			
Tauler 2.2 Connecta't

Colors:
 Blau #0073AA        			
 Vert #408080        			
 Vermell #C42F00     			
 Gris fosc #23282D   			
 Gris Clar #EEEEEE   			
 Gris Línies #DDDDDD 			
 ==============*/

* {margin:0; padding:0; border-collapse: collapse;}
body {background-color:#EEEEEE; font-family: 'Roboto', tahoma, verdana, helvetica}
/* =========================  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:170px; height:100%; background-color:#23282D; color:white; z-index:1;}
.cos {width: calc(100% - 190px); padding: 20px 0 0 20px; margin: 34px 0 0 170px; z-index: 0;}
/* =========================  Estructura visible*/
.peu  {width:100%; margin-top: 15px; padding: 15px 0 0; clear:both;}
.menu {width: 170px; margin-top:45px;}
.tauler, .edicio, .llista, .edicio_gran, .llista_gran, .edicio_thumb, .llista_petita /*kiron*/, .envia_email, .envia_email_mostra, .titular/*kiron*/
	{float:left; margin: 0 20px 20px 0; border: solid 1px #DDDDDD; overflow:hidden; border-radius: 4px; position: relative; overflow:hidden;
		background-color:white;}
.tauler {width: 60%; max-width: 600px;}
.edicio {width: 80%; max-width: 800px;}
.edicio_gran, .llista_gran {width: calc(100% - 20px); max-width: 1250px; overflow:auto;}
.llista {width: 75%; max-width: 750px; max-height:650px; overflow:auto;}
.llista_petita {width: 45%; max-width: 450px; max-height:650px; overflow:auto;}
.edicio_thumb {width: 400px;  margin-right: 0;}
.envia_email {width: calc(100% - 795px); float:right;}
.envia_email_mostra {width: calc(100% - 495px); max-width: 890px; float:right;}

/*Inici kiron*/
.titular {width: 300px; padding-bottom: 10px;} 
.titular table {width: 96%; margin: 0 2%; border-collapse:collapse; border:none; clear:both;}
.titular td, .caixa_formularis td {padding: 5px 3px; vertical-align:middle;}
.envia_email p {margin: 0 2% 12px;}
/*Fi kiron*/

/*Comunicacions*/
#llista_comunica table {width:100%; margin: 5px 0 0;}
#llista_comunica th {border-bottom: solid 1px #DDDDDD; text-align:left; padding: 0 3px;}

.ok {border-left: solid 3px #408030 !important;}
.ko {border-left: solid 3px #C42F00 !important;}
.ok p, .ko p {padding: 6px 10px;}
.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;}
.hr {width: 96%; margin: 10px auto;}
/* =========================  LOGIN */
.login {}
.cuadre {width:94%; max-width: 400px; padding: 2em 2%; margin: 10% auto 0; background:white; border: solid 1px #DDDDDD;}
.casella {width:96%; padding: 5px 1%; margin: 8px 1%; font-size:1em;}
.error {width:94%; max-width: 400px; padding: 10px 2% 0; margin: 40px auto 0; background:white; border: solid 1px #DDDDDD; border-left: solid 3px #C42F00;}
.error p {margin-bottom:10px;}
.avis { text-align: right; padding: 20px 5px 5px;}

/* =========================  MENU */
.connectat {padding-left:10px; vertical-align:middle;}
.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-bottom: solid 1px #363636;}
.menu > ul > li.selec > a {color:white; background-color:#408080;}
.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;}
.menu li.admin a {color: #408080;}
.menu li.admin a.selec {color: #96DEDC;}
p.sector {text-align:center; padding: 8px 0; margin-top: 12px; background-color:rgba(255,255,255, 0.1); color:white;}

/* =========================  TEXT */
h2 {width:100%; clear:both; padding-bottom: 20px;}
h3 {padding: 10px 2%;}
h4 {padding: 0 0 5px;}
.titol {border-bottom: solid 1px #DDDDDD;}
.edicio_gran h3 {/*margin-bottom: 15px;*/}
.funcions {color: #DDDDDD;}
.edicio p, .llista p, .galeria p, .tauler p, .edicio_gran p {padding: 6px 2%; position: relative;}
.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_petita table, .llista_gran table, .edicio table, .tauler table, .edicio_gran table, .edicio_thumb table 
	{width: 100%; border-collapse:collapse; border:none; clear:both;}
.llista th, .llista_petita th, .llista_gran th {padding: 10px 7px 3px; text-align:left; border-bottom: solid 1px #DDDDDD;}
.llista td, .llista_petita td, .llista_gran td, .edicio td, .galeria td, .tauler td, .edicio_gran td, .edicio_thumb td {padding: 5px 3px; vertical-align:middle;}
.llista h3 {position:absolute; top: 0px; left: 5px;}
.boto_nou, .botons {position:absolute; top: 8px; right: 2%; max-width:300px;}
.llista table {width:100%; margin: 45px 0 0; clear:both;}
.llista table.taula_immo {margin:0;}
textarea.td_html {height: 23px; background-color: transparent; resize: none;}
.boto_llista {height: 30px; padding: 0 10px; margin: 0 2px; min-width: 10px; border: solid 1px #408080;  border-radius: 5px;}
.controls {clear: both;}
.controls .inactiu {border: solid 1px #a3a3a3 !important; color: #a3a3a3 !important;}

/* =========================  LLISTA AVANÇADA Tauler 2.2*/
table.producte {width:100%; margin:0;}
table.producte th {padding: 10px 12px 4px; border-bottom: solid 1px #DDDDDD;}
table.producte th img {position: relative; top: 3px;}
table.producte td {padding: 8px 12px; vertical-align: top; position:relative;}
table.producte td img {object-fit: contain; position: absolute;}
span.id {color: #a3a3a3; margin-right: 8px;}
.eines, .casella_stock {display:none;}
.llista table.productes tr:hover .eines {display: inline-block;}
.casella_stock input {padding: 1px 2px;}
.casella_stock input[type=number] {width: 45px;}
.boto_llista {height: 30px; padding: 0 10px; margin: 0 2px; min-width: 10px; border: solid 1px #408080;  border-radius: 5px;}
.controls {padding: 10px 0 5px; clear: both;}
.controls .inactiu {border: solid 1px #a3a3a3 !important; color: #a3a3a3 !important;}
label:hover {cursor:pointer;}
.destaca_dreta {position: absolute; right: 5px; bottom:8px; font-weight:bold;}
/*filtres*/
.taula_filtres {width: 96%; margin: 0 2% 8px; display: table;}
.casella_filtres {display: table-cell; padding-right: 6px;}
.icona, .icona_inactiva {height:18px;} /*IMG icones en llistat*/
.icona_inactiva {opacity: 0.25;}
.icona:hover {cursor: pointer;}

/* =========================  RESUM per CRM Tauler 2.2*/
.costat_taronja, .costat_vert, .costat_taronja_clar, .costat_vert_clar, .costat_blau {padding: 0 0 10px 82px; max-width: 318px !important; min-height: 110px;}
.costat_taronja {border-left: solid 3px #db573f;}
.costat_taronja_clar {border-left: solid 3px #eaac50;}
.costat_vert {border-left: solid 3px #5fa568;}
.costat_vert_clar {border-left: solid 3px #bedb73;}
.costat_blau {border-left: solid 3px #6185e3;}
.costat_taronja h2, .costat_vert h2, .costat_taronja_clar h2, .costat_vert_clar h2 {padding: 10px 0 0; margin:0; width:auto;}

.caixa_taronja, .caixa_vert, .caixa_taronja_clar, .caixa_vert_clar, .caixa_blau
		{width: 72px; 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_taronja p, .caixa_vert p, .caixa_taronja_clar p, .caixa_vert_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;}

/* =========================  FORMULARIS */
table.edicio {width: 96%; margin: 5px 2%;}
input, select {padding: 3px 5px; font-size:1em; border-radius:4px;}
textarea {width:100%; height:300px;}
.boto, .boto_elimina, .boto_desactivat, .boto_trans, .boto_trans_esquerra {display: inline-block; padding: 5px 10px 3px;
		color:white; background-color:#408080; border: solid 1px #DDDDDD; border-radius:4px; font-size:1em; font-weight:normal;}
input.boto:disabled {background-color:#C3C3C3;}
.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_desactivat {background-color: transparent; color: #c3c3c3;}
.fosc .boto {border: solid 1px #888888;}
.boto:hover, .boto_elimina {cursor:pointer;}
.imatge_preview, .img_baner, .logo_preview, .foto_preview {width:99%; height:250px; margin: 10px auto; vertical-align: bottom; border: solid 1px #ededed; position: relative; 
			background-position:center center; background-repeat:no-repeat; background-size:cover;}
.logo_preview {width: 190px; height: 100px; background-color: #eee; background-size:contain;}
.foto_preview {float: right; max-width:200px; height:200px; margin: 0 0 4px;}
.img_baner {height:300px;}
.src {width:98%; color:white; background-color: rgba(64,64,64,0.5); padding: 5px 1%; border:none; border-radius: 0}
.boto_trans, .boto_trans_esquerra {color:white; position: absolute; bottom: 0; right: 0; border: solid 1px rgba(164,164,164,0.5); margin: 5px 7px;
		background-color:rgba(64,64,64,0.5);}
.boto_trans_esquerra {left: 0; right: auto;}
.mostra_logo {width:125px; height: 125px; border: solid 1px #ededed;
		background-position: center center; background-size:cover; background-repeat:no-repeat;}
#img_preview {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;}
.form_esquerra {float:left; width: 47%; margin-left:2%;}
.form_dreta {float:right; width: 47%;  margin-right:2%;}
.form_centre {width: 96%; margin: 0 0 10px 2%; clear:both; position: relative;}
input[type=number] {text-align: right;}
.curt {max-width:165px;}
.llarg {width:95%; max-width:370px;}
.percent {width: 65px;}
.mini {text-align:center; background-color: #ededed;}
.mini input {width:27px; padding: 3px 0; text-align:right;}
textarea.gran {height:400px;}
textarea.codi_font {height: 150px;}
textarea.mini {font-family: 'Montserrat', Helvetica, Arial; color: black; font-size: 0.9em; min-height: 80px; text-align:left; padding: 5px;}
textarea.mini::placeholder {font-family: Helvetica, Arial; color: gray; font-size: 0.9em; font-style:italic;}
.cuadrat {border: solid 1px #C0C0C0; margin-bottom:10px;}
.separa {widtg:100%; clear:both;}
.opcio_0 { font-style:italic; color:gray;}
select, option {text-transform:capitalize;}
select {max-width: 275px;}
p.indent {padding: 2px 2% 12px calc(2% + 30px); text-indent: -30px;}

/* =========================  GALERIA */
.galeria {position: relative; width:calc(100% - 22px); 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;}
.download {position:absolute; top: 0; right: 0; padding: 5px; background-color: rgba(64,64,64,0.5);}
/* =========================  CASELLA D'ESPERA */
.espera {width:30px; height:30px; display:none;}
.espera img {width:100%;}
/* =========================  AJAX*/
.casella_grava {position:absolute; top: 45px; right: 20px;/*border: solid 1px pink;*/}
#iframe_ajax {width: 100%; height:35px; border: none; background: transparent;}
#iframe_email {width: 96%; height: 140px; border: solid 1px #e3e3e3; margin: 0 2% 10px;}
#iframe_email_preview {width: 96%; height: 400px; border: solid 1px #e3e3e3; margin: 0 2% 10px;}

/* =========================  TAULES en General */
.dreta {text-align:right !important;}
.centre {text-align:center !important;}
.esquerra {text-align:left !important;}
.dalt {vertical-align:top !important;}
.baix {vertical-align:bottom !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: #ededed;}
.vert {background-color: #DCFFDC; text-align:center;}
.vermell {background-color: #FFDCDC; text-align:center;}
.inactiu {color: gray; font-style:italic;}
.linia {width:100%; height: 5px; border-top: dashed 1px #d3d3d3; margin-top: 5px;}

/* =========================  ENLLAÇOS */
a {text-decoration:none; color: #408080;} /* General */
a.esborra, .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 {cursor:pointer;}
a .movil img {display: inline-block;}
/* javascript*/
.fons_negre {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;}
.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 {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;}
#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;}
td.caixa_maps {position:relative;}
.logo_maps {height: 28px; opacity: 0.2; display: block; position: absolute; top:3px; right:3px;}

.mostra_form_comunica {width: 90%; max-width: 480px; padding: 10px;  margin: 10% auto 0; background: white; border: solid 1px #DDDDDD; position: relative;}
.mostra_form_comunica select, .mostra_form_comunica option {text-transform: none;}
.mostra_form_comunica  textarea {width: 98%; height: 80px; resize: none;}

/* ========================================================================================= Tauler 2.1 Responsive */
.movil {display: none;}
@media only screen and (max-width: 1500px) {
.img_gal {width: 13.35%;height: 160px;}
}
@media only screen and (max-width: 1500px) {
.img_gal {width: 15.75%;}
}
@media only screen and (max-width: 1366px) {
.cos  {padding: 20px 0 20px 15px;}
/* =========================  Estructura visible*/
h2 {margin: 10px 0 0;}
.tauler, .edicio, .llista, .galeria, .edicio_gran, .titular {}
.edicio_gran, div.llista_gran {width: 100%; max-width:none;}
.llista {max-height: 550px;}
.envia_email {width: calc(98% - 754px); margin-right: 0;}
.envia_email_mostra {width: calc(98% - 465px); margin-right: 0;}
.top {z-index: 3;}
.barra {display:none; z-index: 2;}
.cos  {width: calc(100% - 40px); left:0; padding: 10px 20px; margin: 34px 0 0 0;}

.top .boto_menu_resp {display:block;}
.top .t_esquerra {width:auto;}
.top .t_dreta {width:auto;}
/* =========================  MENU */
.menu a {padding: 4px;}
.sub_opcio a {padding-left: 15px; padding-top: 2px;}
p.sector {padding: 4px 0; margin-top: 6px;}
.llista table {margin: 35px 0 0;}
}

@media only screen and (max-width: 1250px) {
.img_gal {width: 19.1%;}
}
@media only screen and (max-width: 1035px) {
.img_gal {height: 180px;}
div.edicio, div.llista {width: 90%;}
div.envia_email {float:left; width: 90%; max-width: 750px;}
}

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

/* =========================  Estructura visible*/
.llista th {padding: 6px 3px;}
.llista td, .edicio td, .galeria td, .tauler td {padding: 4px;}

/* Formularis */
.form_esquerra input.llarg, .form_dreta input.llarg {max-width:99%}
.peu  {}
.menu {}
/*Altres*/
.img_gal {width: 24.1%;}
}

@media only screen and (max-width: 640px) {
/* =========================  Estructura bàsica*/
.cos {width: 98%; padding: 8px 1%;}
div.llista, div.edicio, div.tauler {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;}
/* Formularis */
.form_esquerra, .form_dreta {float: none; width:98%; margin: 15px auto; padding:0 1%; clear:both; }
#img_preview {float: none; width: 300px; height: 200px; margin: 0 auto;}
.form_botons {max-width:98%;}
/*Inscripcions*/
#inscrit .inscripcio {float:none; width: 100%; margin: 0 auto 10px;}
/*Altres*/
.img_gal {width: 32.1%;}
}

@media only screen and (max-width: 480px) {
/* =========================  Estructura bàsica*/
.top {height: 63px;}
.cos {margin: 64px 0 0 0;}
.top .boto_menu_resp {float:none; position:absolute; top: 0; left:0; }
.top .t_esquerra {float:none; position:absolute; top: 34px; right:0; width:auto;}
.top .t_dreta {float:none; position:absolute; top: 0; right:0; width:80%}
.barra {}
.menu {margin-top: 65px;}
/* 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;}
/*Altres*/
.img_gal {width: 48%; margin: 5px 1%;}
}

@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;}
}