/* Adaptabilitat */
/* El body té unes quantes classes per facilitar la vida

body.large-screen{}
body.medium-screen{}
body.small-screen{}

*/



:root {
  --blau: #56c1ff;
}

/* Estils genèrics ********/

.medium-screen h1,
.large-screen h1{
  padding-left: 16px;
}

body.small-screen h2{
  padding-left: 9px;
}

.joan-flex, .calbasi-flex{
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  flex-wrap: wrap;
}

.joan-flex-esquerra, .calbasi-flex-esquerra{
  justify-content: left!important;
}

.llista-tick-verd li{
  margin: 0;
	padding: 20px 0 20px 56px;
	list-style: none;
	background-image: url("/sites/default/files/icones/green_check_120.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 28px;
}

.vora-arrodonida{
  border-radius: 22px!important;
}


/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/


/* Flag ***********************************/

.flag > a{
  background-color: green;
  padding: 6px;
  color: white!important;
  font-weight: 700;
}

.flag.action-unflag > a{
  background-color: red;
}


/*************** Taules amb scroll ********************************/

.view-display-id-riscos .view-content table,
.page-node-type-parcela .previsio_diaria table
{
/*  display: table; */
}

@media (max-width: 48rem) {

  .page-node-type-parcela .previsio_diaria table{
    margin-bottom: 32px;
  }

  .page-node-type-parcela .previsio_diaria tbody,
  .view-display-id-block_mis_parcelas_mobil,
  .view-display-id-riscos
    {
    position: relative;
  }
  


  .view-display-id-block_mis_parcelas_mobil .view-content,
  .view-display-id-block_mis_parcelas_mobil .view-content:after,
    .page-node-type-parcela .previsio_diaria tbody tr:last-child,
      .page-node-type-parcela .previsio_diaria tbody tr:last-child:after,
    .view-display-id-riscos .view-content:after,
      .view-display-id-riscos .view-content {
    margin-bottom: 20px;  
  }

/*
  .page-node-type-parcela .previsio_diaria tbody tr:last-child:after,
  .view-display-id-block_mis_parcelas_mobil .view-content:after,
  .view-display-id-riscos .view-content:after {
    content: "scroll  ->";
    position: absolute;
    right: 0px;
    font-size: 13px;
    background-color: #8080803b;
    width: 100%;
    align-content: center;
    text-align: center;
    bottom: -20px;
    padding: 8px;
    line-height: 4px;
  }
*/
  .page-node-type-parcela .previsio_diaria tbody  td:first-child{
    padding-right: 0;
    min-width: 66px;
    flex-direction: column;
  }
  
  .page-node-type-parcela .previsio_diaria td img {
    width: 41px;
  }
  
  .page-node-type-parcela .previsio_diaria tbody  td:first-child span.etiqueta{
    /*display: none;*/
    max-width: 70px;
  white-space: nowrap;
  overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-node-type-parcela .previsio_diaria tbody  td:first-child:hover{
      padding-right: 50px;
  }
  
  .page-node-type-parcela .previsio_diaria tbody  td:first-child:hover span.etiqueta{
    display: inline;
  }
  
}



/* Capçalera ****************************/

#primary-menu-inner{
  display: flex;
}

#main-navigation-content{
  width: 16px;
}

.branding-wrapper{
  /*width: 40%;*/
}

.site-logo-img{
  height: 60px;
  padding: 8px 0;
}

.block-solo-clima-main-menu{
  /*position: absolute;*/
}

/* Altres ******************************************************/

.large-screen #main-container, .medium-screen #main-container,
.large-screen #sidebar-box-main
{
  margin: 0 1%;
  max-width: 98%;
}

/* Peu **********************************************************/

#block-solo-clima-account-menu li a,
#footer-menu #block-solo-clima-navegacionprincipal li a,
#footer-menubar li a
{
 /* background-color: var(--blau);
  color: white;
  border-radius: 16px;*/
  margin: 4px 8px;
  font-weight: 700;
  font-size: 1.1em;
}

.small-screen #block-solo-clima-account-menu li a,
.small-screen #footer-menu #block-solo-clima-navegacionprincipal li a,
.small-screen #footer-menubar li a
{
  margin: 2px 4px;
  font-weight: 700;
  font-size: 1em;
}


#block-solo-clima-account-menu li{
  background-size: 50px;
  padding-left: 35px;
  background-repeat: no-repeat;
}

#block-solo-clima-account-menu li:first-child{
  background-image: url("https://estacions.calbasi.net/sites/default/files/icones/Iniciar_sesion.png");
}

#block-solo-clima-account-menu li:nth-child(2){
  background-image: url("https://estacions.calbasi.net/sites/default/files/icones/Cerrar_sesion.png");
}
 
 
#block-solo-clima-peudautoriailogos{
  font-size: 0.8em;
  text-align: center;
  line-height: 1;
}

#block-solo-clima-peudautoriailogos .joan-flex{
  align-items: flex-end;
  gap: 12px;
}

#block-solo-clima-peudautoriailogos #accio img{
  margin-top: 6px;
}

/*************************** ****************************** **************** 
  Mis parcelas 
******************************* *****************************************/

.path-mis-parcelas h1{
  padding-left: 160px;
  	background-image: url("/sites/default/files/icones/Mis_parcelas.png");
	background-repeat: no-repeat;
	background-position: left center;
	/* background-size: 28px; */
  
}

.path-mis-parcelas.small-screen h1{
  background-size: 69px;
}

.path-mis-parcelas.medium-screen h1{
  background-size: 78px;
}


.leaflet-popup-content .field--name-field-tipo-de-suelo .field__item{
 /* max-width: 80px;*/
}

.view-mis-parcelas.view-display-id-block_mis_parcelas .view-filters{
  margin-bottom: 18px;
    margin-top: 16px;
}


.view-mis-parcelas.view-display-id-block_mis_parcelas #views-exposed-form-mis-parcelas-block-mis-parcelas div.form--inline{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas #views-exposed-form-mis-parcelas-block-mis-parcelas div.form--inline > div{
  margin-block-end: 8px;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas #views-exposed-form-mis-parcelas-block-mis-parcelas div.form--inline .form-item{
  width: 50%;
  margin-right: 0;
  margin-top: 0;
  margin-left: 0;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas #views-exposed-form-mis-parcelas-block-mis-parcelas div.form--inline label{
  display: none;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas #views-exposed-form-mis-parcelas-block-mis-parcelas div.form--inline #edit-actions{
  width: auto;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas ul.item-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 13px;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas ul.item-list li{
  border: solid 1px var(--blau);
  background-color: var(--blau);
}

.view-mis-parcelas.view-display-id-block_mis_parcelas ul.item-list li,
.page-node-type-parcela #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .views-row{
  border-radius: 12px;
  color: white;
  line-height: 21px;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas ul.item-list li a
{
  color: white
}

.view-mis-parcelas.view-display-id-block_mis_parcelas .views-table,
.view-mis-parcelas.view-display-id-block_mis_parcelas .view-content{
  line-height: 1.2;
  padding: 0 16px;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas  .views-field-field-municipio{
  max-width: 135px;
}

/* *******************************************************************
  Parcel·la **
****************************/

.page-node-type-parcela #page-title{
  display: none;
}

.page-node-type-parcela h2{
  padding-left: 16px;
}

body.small-screen.page-node-type-parcela .geografia .field--name-field-municipio{
  font-size: 15px;
}

.page-node-type-parcela .geografia .field--name-field-municipio{

}

.page-node-type-parcela #info_finca{
  justify-content: flex-start;
  gap: 2px 27px;
  margin-top: 8px;
  padding-left: 8px;
}

.page-node-type-parcela #info_finca .field{
  margin-block-end: 0!important;
}


.page-node-type-parcela #info_finca .field:last-child {
  margin-block-end: var(--solo-px18);
}

.page-node-type-parcela #info_finca .field label{
  line-height: 1;
}

@media (max-width: 48rem) {
  
  .page-node-type-parcela #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil{
  /*max-width: 357px;*/
  overflow-x: auto;
  white-space: nowrap;
  }
 
 .page-node-type-parcela #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .views-row{
  max-width: 80px;
  padding: 4px;
  /*overflow: hidden;*/
}
  
}

.page-node-type-parcela #temps_actual{
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding-right: 8px;
}

.page-node-type-parcela.small-screen #temps_actual{
  justify-content: space-between;
}

.page-node-type-parcela #temps_actual > div{
  display: flex;
  align-items: center;
}

.page-node-type-parcela #temps_actual > div img{
  height: 78px;
}

.page-node-type-parcela #temps_actual > div > div.field{
/*  border-left: solid 4px var(--blau);
  padding-left: 16px;*/
}

.page-node-type-parcela #temps_actual label
{
  font-weight: 100;
  font-size: 0.8em;
    max-width: 107px;
  line-height: 1;
  text-align: center;
}

.page-node-type-parcela #temps_actual .field__item{
  font-weight: 700;
  font-size: 1.2em;
  text-align: center;
}

.page-node-type-parcela #temps_actual .field__item .color_field__swatch {
  margin-top: 8px;
}

.page-node-type-parcela #temps_actual .field h2,
.page-node-type-parcela .previsio_diaria .field h2
{
  display: none;
}

.page-node-type-parcela div.geografia > div{
  /*float: left;*/
}


.page-node-type-parcela div.mapa{
  /*max-width: 75%;
  min-width: 50%;
  margin-right: 24px;*/
  width: 100%;
}

@media (max-width: 48rem) {
  .page-node-type-parcela div.mapa{
      width: 100%;
      max-width: 700px;
        margin-right: 0;
    }
}

#block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil{
  background-color: var(--blau);
  padding: 4px;
}

.page-node-type-parcela #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .views-row
{
  background-color: white;
  padding: 0 4px;
}

.page-node-type-parcela #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil h2{
  color: white;
}

.page-node-type-parcela #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .views-row a,
#block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .views-field-field-municipio .field-content{
  color: var(--blau);
}

@media (min-width: 49rem) {

  #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .view-content{
    flex-wrap: wrap;
  }

}

.page-node-type-parcela div.previsio_diaria, 
#block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .view-content{
  display: flex;
  justify-content: space-evenly;
  gap: 16px;
  align-items: flex-end;
}

.small-screen #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .view-content{
  width: 350px;
}

.view-mis-parcelas.view-display-id-block_mis_parcelas  .views-field-field-municipio,
#block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .views-field-field-municipio .field-content,
.view-mis-parcelas.view-display-id-block_mis_parcelas .views-field-field-municipio .field-content
/*,.leaflet-popup-content .field--name-field-tipo-de-suelo .field__item*/{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .views-field-field-municipio .field-content,
.view-mis-parcelas.view-display-id-block_mis_parcelas .views-field-field-municipio .field-content{
  max-width: 115px;
  font-size: 0.7em;
}



.page-node-type-parcela table,
.view-display-id-riscos table{
    /* display: block; */
    overflow-x: scroll;
    /*white-space: nowrap;*/
}

  .page-node-type-parcela .previsio_diaria tbody label{
    display: none;  
  }

.page-node-type-parcela div.previsio_diaria .etiquetes > div, .page-node-type-parcela .previsio_diaria td:first-child {
  display: flex;
  padding-right: 50px;
}

.page-node-type-parcela .previsio_diaria .etiquetes img, .page-node-type-parcela .previsio_diaria td img  {
  height: 41px;
}

@media (max-width: 48rem) {

  .page-node-type-parcela .previsio_diaria{
  }

  #block-solo-clima-views-block-mis-parcelas-block-mis-parcelas-mobil .view-content{
    width: 350px!important;
  }

  .page-node-type-parcela .previsio_diaria tbody td .field{
    max-width: 40px;
    overflow: hidden;
        white-space: nowrap;
  }

}

.page-node-type-parcela .flag > a{
  padding: 19px;
  font-size: 1.5em;
  border-radius: 32px;
}

.page-node-type-parcela .links.inline {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 32px;
}


/* Visor satèl·lit */

#block-solo-clima-quicktabsvisorsatellitfake h2{
  padding: 30px 0 30px 114px;
  background-image: url("/sites/default/files/icones/Visor_satelite.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}

#quicktabs-visor_satel_lit_fake ul.quicktabs-tabs > li.active,
#quicktabs-visor_satel_lit_fake ul.quicktabs-tabs > li.active a{
  background-color: green;
}

#quicktabs-visor_satel_lit_fake ul.quicktabs-tabs > li{
  font-size: 1.1em;
}

.small-screen #quicktabs-visor_satel_lit_fake ul.quicktabs-tabs > li{
  font-size: 1em;
}

#quicktabs-visor_satel_lit_fake ul.quicktabs-tabs > li, #quicktabs-visor_satel_lit_fake ul.quicktabs-tabs > li a{
  color: white;
  background-color: var(--blau);
  font-weight: 700;
}



/********** @Mis riesgos *********************************** **************/

.path-node-7689 h1{
  padding-left: 160px;
  background-image: url("/sites/default/files/icones/Mis_Riesgos.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
  padding-block: var(--solo-px32);
}

body.small-screen .view-id-mis_riesgos .views-field-title,
body.small-screen .view-id-mis_riesgos tr td:first-child{
  padding-left: 2px;
  font-size: 0.8em;
}

body.small-screen .view-id-mis_riesgos tr td:first-child{
  min-width: 98px;
}

body.small-screen .view-id-mis_riesgos tr td:first-child a{
  max-height: 31px;
  overflow: hidden;
}

.view-id-mis_riesgos tr td .calbasi-flex a:first-child ~ a {
  display: none;
}

body.small-screen .view-id-mis_riesgos .color_field__swatch{
  width: 30px!important;
  height: 30px!important;
}

body.small-screen .view-id-mis_riesgos .views-field:not(:first-child) {
  max-width: 40px;
}

body.small-screen .view-id-mis_riesgos .views-field.views-field-title {
  max-width: 60px;
}




@media (max-width: 48rem) {  /* això és de la vista antiga, actual Legacy */

  .view-display-id-riscos .view-content{
  /*width: 78%;*/
}

  .view-display-id-riscos table > *{
/*  width: 90%;*/
}

  /*.view-display-id-riscos table,
.view-display-id-riscos table > *,
.view-display-id-riscos .view-content,
.view-display-id-riscos .view-content > * {
  width: 80%;
  } */
  
    .view-display-id-riscos table,     .view-display-id-riscos table > *,     .view-display-id-riscos table > * > *{
    /*display: block;*/
    /*width: 250px;*/
    /*overflow: scroll;*/
  }
  
    .view-display-id-riscos .solo-table-wrapper{
      width: 355px;
    }
  
  .view-display-id-riscos table tbody{ 
   /* display: none; */
  }

}

body.small-screen .quicktabs-wrapper,
body.small-screen .ui-accordion-content{
  padding: 0;
}

body.small-screen .quicktabs-tabs li a{
  
}

/* Portada sense logejar ************************/

body.path-node-2890 .login img{
  margin: 0;
  height: 52px;
  width: auto;
}

body.path-node-2890 .sessio a{
  color: white!important;
}

body.path-node-2890.small-screen .logo img{
  width: 70%;
}

body.path-node-2890 .registre{
  display: flex;
  justify-content: center;
}

/********** Previsió Pluja **************/

.path-mi-lluvia #sidebar-box-main {
  width: 100%;
}

#leaflet-map-view-mis-parcelas-page-3{
 /* min-width: 350px!important;
  width: 100%;*/
}


/*************** Fitxa usuari *********************************/

.field--name-field-avisos-malures{
    font-size: 1.3em;
    border-left: 15px red solid;
    padding-left: 16px;
    margin: 32px 0;
}

/*********** Escoger parcela **************************************/


.path-parceles.small-screen  #page-title,
.path-parceles.small-screen .view-filters 
{
  padding-left: 16px;
    padding-right: 16px;
}

.view-parcel-les .leaflet-tooltip-pane .flag{
  display: none;
}

/********************* Mapes **************************/

.leaflet-popup-content h3{
  margin: 6px 0;
}

.leaflet-popup-content .node__content, .leaflet-popup-content .node__content .field{
  margin: 0;
}


/********************* Login *********************/

.simplelogin h1{
  display: none;
}

/**************************
                     Altres 
                            *******************************/

/* Avis parcel·les noves sense dades */

#block-solo-clima-views-block-mis-parcelas-block-1{
  padding: 1% 5%;
  line-height: 1;
}

/* Amaguen el camp de títol quan un usuari no admin vol editar la parcel·la */

.node-parcela-edit-form .field--name-title, .node-parcela-edit-form .layout-region-node-secondary{
  display: none;
}

/* Pantalla confirmar flag */

.path-flag.small-screen h1{
  padding: 10%;
  font-size: 1.7em;
  text-align: center;
}