body { 
margin:0;
font-family: 'Heebo', sans-serif;
background-color: #FAF2F2;
}
#container {
margin: auto;
text-align:center;
background-color: #892027;
}
#main {
margin: auto;
max-width:500px;
background-color: #892027;
}
input:read-only {
background-color: #892027;
opacity:50% ;
}
#input-user{
margin: auto;
max-width:500px;
text-align:center;
}
#password{
margin: auto;
max-width:500px;
text-align:center;
}
#password_error{
margin: auto;
margin-top:20px;
max-width:500px;
text-align:center;
color:#892027;
font-weight:bold;
font-size: 24px;
}
#session_end{
margin: auto;
max-width:500px;
text-align:center;
color:green;
font-weight:bold;
font-size: 24px;
}
#logo {
margin: auto;
margin-top:20px;
}
#logo_img {
max-width: 400px;
}

#logo_superior {
width: 200px;
min-width: 200px;
}
#logo_img_superior {
margin-top:5px;
margin-left:20px;
width:;
height: 60px;
}

::-webkit-input-placeholder {
 text-align: center;
 font-weight:;
}
:-moz-placeholder { 
 text-align: center;
font-weight:;
}
::-moz-placeholder {
    text-align: center;
   font-weight:;
} 
:-ms-input-placeholder { 
    text-align: center;
   font-weight:;
}

::placeholder {
font-size: 16px;
}

#tancar_afegir_client{
margin-top:20px;    
    
}

.btn_pass {
background-color: #892027; 
border: none;
color: white;
border-radius: 4px;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
outline:0px;
cursor: pointer;

}
.btn_pass:hover {
background-color: #d57637; 
cursor:pointer;
}
.btn_pass:active {
background-color: #d57637; 
cursor:pointer;
padding: 17px 34px;
}

.formulari, textarea {
width: 100%;
margin-bottom:15px;
text-align:left;
border: 1px solid #ccc;
outline:0px;
font-size: 16px;
background: #f1f1f1;
color: #676B6C;
resize:none;
height:45px;
min-height:45px;
border-radius: 4px;
}

#observacions {
width:50%;
}

@media screen and (max-width: 800px) {
#observacions {
width:100%;
}
}

#input_pass {
width:70%;
}
#input_user {
width:70%;
}

#div_btn_tornar_incidencia {
margin-top:20px;
display:none;
}

.btn_tancar_finalitzar {
    
background-color: #ffffff;
color: #000000;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
outline: 0;
float:;
display:inline-block;
margin-top: 20px; !important;
    
}
.btn_tancar_finalitzar:hover {
background-color: #892027;
color: #ffffff;

}




@media screen and (max-width: 800px) {
#div_btn_tornar_incidencia {
margin-top:80px;
}
#btn_tancar_client {
margin-top:20px;
}
#btn_tancar_incidencia {
margin-top:20px;
}

}



#afegir_incidencia {
font-size: 24px;
}

#div_afegir {
align-items: center;
display: flex;
justify-content: center;
z-index:2;
position:absolute;
}

#div_afegir_interior {
text-align:center;
width: 50%;
height: 50%;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#afegir {
background-color: #ffffff;
text-align: center; 
position:relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding:20px;
border: 2px solid #d57637;
}

#formulari_add {
 display:none;
 margin-bottom:20px;
 margin-top:10px;
 border: 1px solid black;
 padding:10px  
}

@media screen and (max-width: 800px) {
.btn_a_a {
margin-bottom:20px;
}
}

.form_fechas {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;' 
}

@media screen and (max-width: 800px) {
.form_fechas{
grid-template-columns: auto;
}     
}   

#div_fechasform {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
}

@media screen and (max-width: 800px) {
#div_fechasform{
grid-template-columns: auto;
}     
}  

#div_datepicker {
position:relative;
direction: rtl
}

.ui-datepicker-trigger {
position:absolute;
    bottom:25px;
    right:5px;
    width:24px;
    height:24px;
    border:none;
    background:none;
    outline: none;
}

.ui-datepicker-trigger img {
width:24px;
    height:24px;
margin-top:0px;
}

.fechasform {
width: 100%;
margin-bottom:15px;
margin-top:10px;
text-align:center;
border: 1px solid #ccc;
outline:0px;
font-size: 16px;
background: #f1f1f1;
color: #676B6C;
resize:none;
height:45px;
min-height:45px;
border-radius: 4px;
}

html {
font-family: 'Lato', sans-serif;
color:#676B6C;
}

	
#superior {
height: 80px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #d57637;
//background-color: #ffffff;
overflow:hidden;
text-align:center;
color:white;
display:flex;
align-items: center;
}

@media screen and (max-width: 800px) {
  
#superior {
height: 40px;
}
}

#headline {
width: 100%;
color:#676B6C;
font-size:42px;
}

.botones_big {
  display:inline-block;
  color: #ffffff;
  font-size: 40px;
  //padding: 20px;
  width:400px;
  height: 225px;
  text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #1399ab 1px;
  background: #00b5cf;
   margin-right:20px;
   margin-top:20px;
}
.botones_big:hover {
  background: #4edaed;
}

@media screen and (max-width: 800px) {
  
#logo_superior {
width: 100px;
min-width: 100px;
}

#logo_img_superior {
margin-top:5px;
margin-left:5px;
height: 35px;
}

#headline {
width: 100%;
color:#676B6C;
font-size:21px;
}
}

#div_error_validar {
align-items: center;
display: flex;
justify-content: center;
z-index:2;
position:absolute;
}

#div_error_validar_interior {
text-align:center;
width: 50%;
height: 50%;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
#div_error_validar_interior {
width: 80%;
}
}

#error {
color: white;
background-color: #231F20;
text-align: center; 
position:relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding:20px;
}

#div_select_finalitzar {
align-items: center;
display: flex;
justify-content: center;
z-index:2;
position:absolute;
}


#div_select_finalitzar_interior {
text-align:center;
width: 50%;
height: 50%;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#mostrar_select_finalitzar {
color: white;
background-color: #231F20;
text-align: center; 
position:relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding:20px;
}

@media screen and (max-width: 800px) {
#div_select_finalitzar_interior {
width: 80%;
}
}




#error h1 {
margin-top:0px;
}

#error img {
margin-top:0px;
}

@media screen and (max-width: 800px) {
#error img {
width: 50%;
}
}

#div_fitxar {
background:;
align-items: center;
display: flex;
justify-content: center;
z-index:2;
position:absolute;
}

#div_fitxar_interior {
text-align:center;
background-color: #231F20;
height: 50%;
width: 50%;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#div_fitxar_form {
padding:20px;
color:white;
position:relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#fichar_tecnic,#fichar_id{
display:none;
}

.btn_fitxar {
background-color:  #0F9D58;
color: white;
padding: 10px;
font-size: 16px;
border: 0px solid #231F20;
cursor: pointer;
outline:none;
display:inline-block;
margin-top:15px;
}

.btn_tancar {
background-color:  #ce1813;
color: white;
padding: 10px;
font-size: 16px;
border: 0px solid #231F20;
cursor: pointer;
outline:none;
display:inline-block;
margin-top: 60px; !important;
}

#texto_ok {
color: #0F9D58;
font-size:20px
}

#texto_ko {
color: #ce1813;
font-size:20px
}

#footer {	
height: 40px;
width: 100%;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
background-color: #d57637;
overflow:auto;
text-align:center;
color:white;
}

#footer2 {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);	
}
			
#central {
width: 100%;
height:100% ;
position: fixed;
top: 80px;
overflow:hidden;	
display:flex;
}
		
#lateral {		
width: 240px;
min-width: 240px;
background-color: #EBEBEB;
}

#img_menu {
display:none;
}


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

#lateral {
position:absolute;
z-index:2;
width: 100%;
top:0px;
display:none;
//background-color: #d57637;
}

#img_menu {
display:block;
position:absolute;
right: 0;
top:0;
margin-right:10px;
margin-top:5px;
z-index:2;
}

#menu_responsive {
width:30px;
}

#menu_responsive:hover{
cursor:pointer;
}

#central {
top:20px;
}
}
	
#mig {
width: 100%;
text-align:left;
overflow-x:hidden;
overflow-y:scroll;
background-color: #E1E5E6;
}

#resultats {
margin: 0 auto;
width:95%;
margin-bottom:150px;
}

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

#resultats {
margin-bottom:100px;
}
}

#div_form {
position: -webkit-sticky;
position: sticky; 
top: 0px;
background-color: #E1E5E6;
padding-top:30px;
padding-bottom: 10px;
}

.h1_titol_afegir {
margin-top:30px;
text-align:left;
text-transform: uppercase;
text-decoration: underline overline;
text-underline-position: under;
//text-decoration-color: #892027;
text-decoration-color: #d57637;
//text-decoration-color: #ffffff;
color: #d57637;
}

.h1_titol_resultats {
margin-top:40px;
}

#titol_estadistiques {
margin-bottom:10px;
}


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

.h1_titol_resultats {
font-size:24px;
}
.h1_titol_afegir {
margin-top:50px;
margin-bottom:30px;
font-size:24px;
text-align:center;
}
}

.div_num_resultats {
margin-top:-10px;
margin-bottom:10px;
}

.div_num_resultats span {
color: #892027;
}

.div_albaranar{
display: flex;
align-items: center;
justify-content: left;
font-size: 15px;
}

#a_opcions2_table {
width:107px;
}

#div_table {
overflow-x:auto;
overflow-y:hidden;
max-width:1200px;
} 

#div_table_links {
   display: flex;
   align-items: center;
   justify-content: right;
   font-size: 15px; 
}

@media screen and (max-width: 800px) {
    
#div_table_links {
justify-content: center;
}
}



#div_table_eliminar {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px; 
   background:#892027;
   padding:5px;
}

#div_table_eliminar a {
   color:#ffffff; 
}


.dias_dest, em {
color: #ce1813;
}

hr {
width:100%;text-align:left;margin-left:0;height:2px;border-width:0;color:#00b5cf;background-color:#00b5cf;
}

	
.sidenav {
margin-top:20px;
}
	
.material-icons{
	  font-family: 'Material Icons';
	  font-weight: normal;
	  font-style: normal;
	  font-size: 20px;  /* Preferred icon size */
	  display: inline-block;
	  line-height: 1;
	  text-transform: none;
	  letter-spacing: normal;
	  word-wrap: normal;
	  white-space: nowrap;
	  direction: ltr;
	  
	  vertical-align:text-bottom;
	  padding-right:5px;

	  /* Support for all WebKit browsers. */
	  -webkit-font-smoothing: antialiased;
	  /* Support for Safari and Chrome. */
	  text-rendering: optimizeLegibility;

	  /* Support for Firefox. */
	  -moz-osx-font-smoothing: grayscale;

	  /* Support for IE. */
	  font-feature-settings: 'liga';
}

#search_ico {
  padding-right:0px;
font-size: 16px;
}



.sidenav a{
	font-size: 18px;
	padding: 6px 8px 6px 16px;
	display: block;
	background: none;
	width: 100%;
	text-align: left;
}

.sidenav a:hover {
	background-color:#892027;
	color:white;
}

.sidenav a:hover::before,.sidenav a:hover::after {
content: "";
color:;
}
	
a {
text-decoration: none;		
color: #676B6C;
border: none;
cursor: pointer;
outline: none;
}



@media screen and (max-width: 800px) {
    
    /* Desaparecer el header y el footer de la tabla */
table.greyGridTable thead, table.greyGridTable tfoot, th {
border: none;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table.greyGridTable td {
display: block;
text-align: right;
padding: 10px;
}

table.greyGridTable td:before {
content: attr(data-label);
text-transform: uppercase;
float: left;
color: #273b47;
padding: 1px 5px;
}
}

.div_celda { 
overflow-x:hidden;
overflow-y:auto;
max-height:60px;
text-align:left;
padding-right:5px;
}

@media screen and (max-width: 800px) {
.div_celda { 
max-height:60px;
padding-left:30px;
}
}

table.greyGridTable {
border: 2px solid transparent;
text-align: left;
border-collapse: collapse;
width:100%;
}

table.greyGridTable td, table.greyGridTable th {
border-top: 1px solid #FFFFFF;
padding: 3px 4px;
}

table.greyGridTable tbody td {
font-size: 13px;
vertical-align:middle;
padding: 10px;
}

//table.greyGridTable td:nth-child(even) {
//background: #EBEBEB;
//}

table.greyGridTable td:nth-child(odd) {
background: #EBEBEB;
}

table.greyGridTable thead {
background: #FFFFFF;
border-bottom: 4px solid #231F20;
}

table.greyGridTable thead th {
font-size: 15px;
font-weight: bold;
color: #000000;
text-align: center;
border-left: 2px solid transparent;
padding-bottom:10px;
padding-top:10px; 
}

table.greyGridTable thead th:first-child {
border-left: none;
}

table.greyGridTable tfoot {
font-size: 14px;
font-weight: bold;
color: #333333;
border-top: 4px solid #231F20;
//padding: 3px 4px;
}

table.greyGridTable tfoot td {
font-size: 14px;
}

table.greyGridTable td:last-child {
//padding:20px;
text-align: left;
}

@media screen and (max-width: 800px) {
table.greyGridTable td:last-child {
//padding:20px;
text-align:right;
}

table#table_bolsa td:last-child {
margin-bottom:40px;
text-align: right;
}
}


.btn_tots {
background-color: #f1f1f1;
color: #676B6C;
float: ;
padding: 10px;
margin-bottom:10px;
font-size: 16px;
border: 1px solid #231F20;
cursor: pointer;
outline:none;
display:;
}

.btn_tots:hover {
background: #0F9D58;
color: white;
}


#buscar {
padding: 10px;
font-size: 16px;
border: 1px solid #676B6C;
float: left;
width: 30%;
background: #f1f1f1;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
color: #676B6C;
border-radius: 0px;
}

#buscar:focus {
width: 50%;
outline:none;
}

@media screen and (max-width: 800px) {
#buscar {
width: 50%;
margin-bottom:20px;
}

#buscar:focus {
width: 80%;
outline:none;
}
}

.btn_buscar {
float: left;
width: 50px;
padding: 10px;
background: #892027;
color: #ffffff;
font-size: 16px;
border: 1px solid #231F20;
border-left: none; /* Previene bordes dobles */
cursor: pointer;
outline:none;
}

.btn_buscar:hover {
background: #ffffff;
color: #892027;
}

@media screen and (max-width: 800px) {
.btn_buscar {
margin-bottom:20px;
}
}


.p_obligatorio_left {
float: left;
}


#loader_box,#loader_box_ruta,#loader_box_tipus,#loader_box_tipus_incidencia,#loader_box_tipus_avaria{
display: inline-block;
margin-top:20px;
} 

#loader,#loader_ruta,#loader_tipus,#loader_tipus_incidencia,#loader_tipus_avaria {
display:none;
margin: 0 auto;
text-align:center;
}


#loader img,#loader_ruta img,#loader_tipus img,#loader_tipus_incidencia img,#loader_tipus_avaria img {
width: 40px;
}


.btn_submit {
background-color: #892027;
color: white;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
outline: 0;
float:;
}

.btn_submit:hover {
background-color: #d57637;
}


.btn_submit_finalitzar {
background-color: #892027;
color: white;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
outline: 0;
float:;
}

.btn_submit_finalitzar:hover {
background-color: #d57637;
}

.btn_export {
background-color: #892027;
color: white;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
outline: 0;
cursor: pointer;
float:;
}

.btn_export:hover {
background-color: #d57637;
}

#tancar_afegir_client{
margin-top:20px;    
}

.btn_cerrar {
background-color: #ce1813;
color: white;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
outline: 0;
cursor: pointer;
float:;
}

.btn_cerrar:hover {
background-color: #ef3a25;
}

.btn_afegir {
background-color: #34A853;
color: white;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
outline: 0;
cursor: pointer;
float:;
margin-right:50px;
}

.btn_afegir:hover {
background-color: #6bc357;
}

.btn_guardar {
background-color: #00b5cf;
color: white;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
outline: 0;
float: left;
margin-left:20px;
}

.btn_guardar:hover {
background-color: #00C9CF;
}

.inputs_fechas{
margin-top:20px;
}




#inputs_calendario {
margin-top:20px;
}



.btn_mas_tiendas {
background-color: #00b5cf;
color: white;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
margin-bottom:10px;
outline:0;
}

.btn_mas_tiendas:hover {
background-color: #00C9CF;
}

.btn_borrar_tiendas {
background-color: #db4a39;
color: white;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
margin-bottom:10px;
outline:0;
margin-right:40px;
}

.btn_borrar_tiendas:hover {
background-color: #ef3a25;
}

@media screen and (max-width: 800px) {
.btn_mas_tiendas,.btn_borrar_tiendas,.btn_export {
width:100%;
margin-bottom:20px;
}
}

.h_tab {
width: 50px;
text-align:center;
border: 1px solid #ccc;
outline:0px;
margin-top:5px;
font-size: 16px;
background: #f1f1f1;
color: #676B6C;
resize:none;
height:35px;
min-height:35px;
border-radius: 4px;'
}

select {
width: 50%;
margin-bottom:15px;
text-align:left;
border: 1px solid #ccc;
outline:0px;
font-size: 16px;
background: #f1f1f1;
color: #676B6C;
resize:none;
height:45px;
min-height:45px;
border-radius: 4px;
}

#div_select_bolsa {
margin-bottom:-35px;

}

@media screen and (max-width: 800px) {
select {
width: 100%;
}
}


.col-25 label {
padding: 12px 12px 12px 0;
display: inline-block;
}

.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}



.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}

/* Clear floats después de la columna */
.row:after {
content: "";
display: table;
clear: both;
}

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

.col-25, .col-75, .btn_submit, #p_obligatori {
width: 100%;
margin-top: -10px;
float:left;
}

 #p_obligatori {
width: 100%;
margin-top: 10px;
float:left;
}

 #p_obligatorio_left {
width: 100%;
float:left;
}

.btn_cerrar {
width: 100%;
float:;
}

.btn_afegir {
width: 100%;
float:;
margin-right:0px;
margin-bottom:20px;
}

.btn_guardar {
width: 100%;
float:;
margin-top:10px;
margin-left:0px;
}

#inputs_calendario {
margin-top:40px;
}

label {
margin-top: -10px;
}
}

* {
box-sizing: border-box;
}

::-webkit-scrollbar {
width: 5px;
//height:5px;
//background:#892027 ;
}

/* Track */
::-webkit-scrollbar-track {
background:#f1f1f1 ;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
background: #892027;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555; 
}