.container-title-calor-actual {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       margin-left: 30px
   }

   .container-title-calor-actual h4 {
       max-width: 640px;
       width: 100%;
       text-align: left;
       color: #000000;
       font-size: 31px;
       margin: 15px 0px 0px 0px;
       font-family: Sanomat-Bold, Georgia;
       font-weight: 400;
       text-align: left
   }

   .container-title-calor-actual p {
       max-width: 640px;
       width: 100%;
       text-align: left;
       font-size: 14px;
       text-align: left;
       font-family: 'Encode Sans', sans-serif;
       line-height: 18px;
       margin: 10px 0px 0px 0px;
       color: #181818;

   }


   .container-title-calor-actual .border-upside-hot {

       box-sizing: border-box;
       max-width: 640px;
       height: 5.38px;
       left: 431px;
       top: 195px;
       text-decoration-line: line-through;
       text-decoration-color: #A32A31;
       text-decoration-style: wavy;
   }



   /* CSS MAPA */

   #buttons-selector-mapas-estaciones {
       flex: 1 1 auto;
       display: flex;
       font-size: 14px !important;
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
       margin: 10px 0px;
       text-align: center;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: center;
       border-bottom: 2px solid #c5c5c5;
   }

   #buttons-selector-mapas-estaciones .titulo-buttons-selector-mapas-estaciones {
       font-weight: 500;
       font-size: 14px;
       text-transform: uppercase;
       margin-bottom: 3px;
   }

   #buttons-selector-mapas-estaciones .subtitulo-buttons-selector-mapas-estaciones {
       font-size: 12px;
       font-weight: 400;
       color: #444
   }

   #buttons-selector-mapas-estaciones .buttontmapa24h {
       color: black;
       height: 60px;
       border-top: 2px solid #c5c5c5;
       border-right: 0px solid #c5c5c5;
       border-bottom: 0px solid #ffffff;
       border-left: 2px solid #c5c5c5;
       font-family: 'Encode Sans', sans-serif;
       margin-bottom: -3px;
       opacity: 0.3;
       background-color: white;
       cursor: pointer;
       position: relative;

   }




   #buttons-selector-mapas-estaciones .buttontmapa24h:focus {
       outline: none
   }


   #buttons-selector-mapas-estaciones .buttontmapa24h:before {
       content: "";
       position: absolute;
       top: 0;
       bottom: 1px;
       right: -2px;
       z-index: 1111;
       border: 1px solid #c5c5c5;
   }



   #buttons-selector-mapas-estaciones .buttontmapayear {
       color: black;
       height: 60px;
       font-family: 'Encode Sans', sans-serif;
       border-top: 2px solid #c5c5c5;
       border-right: 0px solid #c5c5c5;
       border-bottom: 0px solid #ffffff;
       border-left: 0px solid #c5c5c5;
       margin-bottom: -3px;
       opacity: 0.3;
       background-color: white;
       cursor: pointer;

   }

   #buttons-selector-mapas-estaciones .buttontmapayear:focus {
       outline: none
   }


   #buttons-selector-mapas-estaciones .buttontmapalastrecord {
       color: black;
       height: 60px;
       font-family: 'Encode Sans', sans-serif;
       border-top: 2px solid #c5c5c5;
       border-right: 2px solid #c5c5c5;
       border-bottom: 0px solid #ffffff;
       border-left: 0px solid #c5c5c5;
       margin-bottom: -3px;
       opacity: 0.3;
       background-color: white;
       cursor: pointer;
       position: relative;

   }

   #buttons-selector-mapas-estaciones .buttontmapalastrecord:focus {
       outline: none
   }


   #buttons-selector-mapas-estaciones .buttontmapalastrecord:before {
       content: "";
       position: absolute;
       top: 0;
       bottom: 1px;
       left: -2px;
       z-index: 1111;
       border: 1px solid #c5c5c5;
   }



   #buttons-selector-mapas-estaciones .button-mapa-estaciones-active {
       color: black;
       opacity: 1;
       border-top: 4px solid black;
       border-right: 2px solid #c5c5c5;
       border-bottom: 3px solid #ffffff;
       border-left: 2px solid #c5c5c5;
   }




   #div-containers-mapa-provincias-temperatura {
       display: flex;
       flex-direction: column;
       width: 100%;
       position: relative;
   }

   #container-provincias-mapa-provincias-temperatura {
       width: 100%;
       position: relative;
   }

   .labelsprovmapa-provincias-temperatura {
       font-family: 'Encode Sans', sans-serif;
       pointer-events: none;
       fill: #000000;
       stroke: none;
       font-weight: 400;
       font-size: 13px;
   }


   .shadowprovmapa-provincias-temperatura {
       font-family: 'Encode Sans', sans-serif;
       pointer-events: none;
       fill: black;
       stroke: none;
       stroke: white;
       stroke-width: 3px;
       opacity: 0.8;
       font-size: 13px;

   }

   #div-containers-mapa-provincias-temperatura .map-text__hand {
       animation: shake 1.5s infinite;
       width: 30px;
       vertical-align: middle;
   }

   #div-containers-mapa-provincias-temperatura .text-slide-mobile {
       font-family: 'Encode Sans', sans-serif;
       margin: 0px 0px 10px 0px;
       text-align: left;
       display: none;
       font-size: 12px;
       color:#555555;
       font-weight: 400
   }

   .legend {
       position: absolute
   }

   #legend-temperatura-provincias {
       display: flex;
       justify-content: center;
   }

   .div-legend-temperatura-provincias {
       padding: 5px;
       background-color: rgb(255, 255, 255, 0.8);
       border-radius: 5px;
   }

   .div-legend-temperatura-provincias {
       font-family: 'Encode Sans';
       font-size: 12px
   }

   .columna-datos-eldiarioes {
       text-align: right;
       padding-bottom: 0px;
       padding-top: 0px;
       border-bottom: 1px solid #ddd;

   }

   .primeracolumna-eldiarioes {
       border-bottom: 1px solid #ddd;
       padding-bottom: 0px;
       padding-top: 0px;

   }


   @media (max-width: 600px) {


       #div-containers-mapa-provincias-temperatura {
           display: flex;
           flex-direction: column;
           flex-wrap: wrap;
           gap: 0px 20px;
       }

       #container-provincias-mapa-provincias-temperatura {
           width: 100%;
           overflow: scroll;
           overflow-y: hidden;
           position: relative;
       }

       div#container-provincias-mapa-provincias-temperatura::-webkit-scrollbar {
           width: 0px;
           /* Remove scrollbar space */
           background: transparent;
           /* Optional: just make scrollbar invisible */
       }

       #div-containers-mapa-provincias-temperatura .text-slide-mobile {
           text-align: center;
           display: block;
       }

       #buttons-selector-mapas-estaciones button {
           max-width: 115px;
           height: 75px !important;
       }

       .legend {
           position: relative
       }
   }



   @media only screen and (max-width: 600px) {
       .container-title-calor-actual h4 {
           font-size: 26px;
       }

       .container-title-calor-actual {
           margin-left: 0px
       }

   }



   @keyframes shake {
       50% {
           margin-left: 15px;
       }

       100% {
           margin-left: 0px;
       }
   }



   /* CSS TABLA CALOR */


   .tabla-calor-actual {
       font-family: 'Encode Sans', sans-serif;
       font-size: 12px !important
   }

   .container-tablas-calor-actual {
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
       max-height: 1600px;

   }

   .div-tabla-calor-actual {
       padding: 0px 10px;
       width: 48%;
   }


   /* 
	Generic Styling, for Desktops/Laptops 
	*/
   .nombre-tabla-calor-actual {
       font-size: 16px;
       font-weight: 700;
       font-family: 'Encode Sans', sans-serif;
       margin-top: 30px;
       margin-bottom: 15px;
       color: #181818;
       text-align: left;
   }

   .tabla-calor-actual table {
       width: 100%;
       border-collapse: collapse;
       font-size: 12px !important;
       border-spacing: 2px;
   }

   .tabla-calor-actual th {
       color: #444;
       font-weight: 400;
       font-size: 10px;
       text-transform: uppercase;
       cursor: s-resize;
       background-repeat: no-repeat;
       background-position: 3% center;
   }

   .tabla-calor-actual td,
   .tabla-calor-actual th {
       padding: 6px;
       border-bottom: 1px solid #ddd;
       text-align: left;
   }

   .tabla-calor-actual #pdiasmesheader {
       text-align: center
   }

   .tabla-calor-actual #serieheader {
       text-align: center
   }

   .tabla-calor-actual #difmediahistoricaheader {
       text-align: center
   }

   .tabla-calor-actual #maximaactualheader {
       text-align: center
   }

   .tabla-calor-actual #rankanioheader {
       text-align: center
   }

   .tabla-calor-actual #mediamax24header {
       text-align: center
   }

   .tabla-calor-actual #records10anioheader {
       text-align: center
   }


   .tabla-calor-actual #serieheader {
       display: none;
   }

   .tabla-calor-actual #difizderheader {
       display: none;
   }

   .tabla-calor-actual #diasheader {
       display: none;
   }

   .tabla-calor-actual #diasmesheader {
       display: none;
   }



   @media (max-width: 900px) {
       .container-tablas-calor-actual {
           display: flex;
           flex-direction: column;
           flex-wrap: wrap;
           max-height: none
       }

       .div-tabla-calor-actual {
           padding: 0px 0px;
           width: 100%;
       }
   }


   #buttons-selector-tabla-24h-year {
       flex: 1 1 auto;
       display: flex;
       font-size: 14px !important;
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
       margin: 10px 0px;
       text-align: center;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: center;
       border-bottom: 2px solid #c5c5c5;
   }

   #buttons-selector-tabla-24h-year .titulo-buttons-selector-tabla-24-year {
       font-weight: 500;
       font-size: 14px;
       text-transform: uppercase;
       margin-bottom: 3px;
   }

   #buttons-selector-tabla-24h-year .subtitulo-buttons-selector-tabla-24-year {
       font-size: 12px;
       font-weight: 400;
       color: #444
   }

   #buttons-selector-tabla-24h-year .buttontabla24h {
       color: black;
       height: 60px;
       border-top: 2px solid #c5c5c5;
       border-right: 0px solid #c5c5c5;
       border-bottom: 0px solid #ffffff;
       border-left: 2px solid #c5c5c5;
       font-family: 'Encode Sans', sans-serif;
       margin-bottom: -3px;
       opacity: 0.3;
       background-color: white;
       cursor: pointer;
       position: relative;
   }

   #buttons-selector-tabla-24h-year .buttontabla24h:focus {
       outline: none
   }


   #buttons-selector-tabla-24h-year .buttontabla24h:before {
       content: "";
       position: absolute;
       top: 0;
       bottom: 1px;
       right: -2px;
       z-index: 1111;
       border: 1px solid #c5c5c5;
   }




   #buttons-selector-tabla-24h-year .buttontablayear {
       color: black;
       height: 60px;
       font-family: 'Encode Sans', sans-serif;
       border-top: 2px solid #c5c5c5;
       border-right: 0px solid #c5c5c5;
       border-bottom: 0px solid #ffffff;
       border-left: 0px solid #c5c5c5;
       margin-bottom: -3px;
       opacity: 0.3;
       background-color: white;
       cursor: pointer;

   }

   #buttons-selector-tabla-24h-year .buttontablayear:focus {
       outline: none
   }


   #buttons-selector-tabla-24h-year .buttontabladecade {
       color: black;
       height: 60px;
       font-family: 'Encode Sans', sans-serif;
       border-top: 2px solid #c5c5c5;
       border-right: 2px solid #c5c5c5;
       border-bottom: 0px solid #ffffff;
       border-left: 0px solid #c5c5c5;
       margin-bottom: -3px;
       opacity: 0.3;
       background-color: white;
       cursor: pointer;
       position: relative;
   }

   #buttons-selector-tabla-24h-year .buttontabladecade:focus {
       outline: none
   }



   #buttons-selector-tabla-24h-year .buttontabladecade:before {
       content: "";
       position: absolute;
       top: 0;
       bottom: 1px;
       left: -2px;
       z-index: 1111;
       border: 1px solid #c5c5c5;
   }


   #buttons-selector-tabla-24h-year .button-tabla-24-year-active {
       color: black;
       opacity: 1;
       border-top: 4px solid black;
       border-right: 2px solid #c5c5c5;
       border-bottom: 3px solid #ffffff;
       border-left: 2px solid #c5c5c5;
   }

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

       #buttons-selector-tabla-24h-year button {
           max-width: 115px;
           height: 75px !important;
       }

   }




   .menu select {
       font-family: Sanomat-Bold, Georgia;
       display: inline-block;
       font-size: 31px;
       border: 1px solid #cecece;
       color: #000000;
       background-color: white;
       border: 1px solid #c5c5c5;
       padding-top: 5px;
   }

   #barras-heatmap-temperaturas {
       width: 100%
   }

   #contenedor-estaciones {
       width: 100%;
   }

   #barras-heatmap-temperaturas text {
       font-size: 11px;
       font-family: 'Encode Sans', sans-serif;
   }

   #barras-heatmap-temperaturas .eje-vertical-barras-estaciones line {
       stroke: #c5c5c5;
       /* stroke-dasharray: 3; */
       stroke-width: 0.5;
   }

   #barras-heatmap-temperaturas .eje-vertical-barras-estaciones text {
       fill: #939393;
       font-size: 14px;
   }

   #barras-heatmap-temperaturas .eje-vertical-barras-estaciones path {
       stroke-width: 0;
   }

   #barras-heatmap-temperaturas .eje-horizontal-barras-estaciones path {
       stroke-width: 0;
   }

   #barras-heatmap-temperaturas .eje-horizontal-barras-estaciones text {
       fill: #939393;
       font-size: 14px;
   }

   #barras-heatmap-temperaturas .eje-horizontal-barras-estaciones line {
       stroke: #939393;
       stroke-width: 1;
   }

   #legend-heatmap-barras-out {
       font-family: 'Encode Sans', sans-serif;
       margin: 0 auto;
       text-align: center;
       font-size: 14px;
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       flex: 1 1 0;
       justify-content: center;
   }

   .container-legend-buttons-heatmap-barras {
       display: flex;

   }


   @media only screen and (max-width: 600px) {
       .menu select {
           font-size: 26px
       }

   }



   #grafico-heatmap-stripes-countries text {
       font-size: 12px;
       font-family: 'Encode Sans', sans-serif
   }

   #grafico-heatmap-stripes-countries {
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
       max-height: 750px;
   }





   @media only screen and (max-width: 600px) {
       #grafico-heatmap-stripes-countries text {
           font-size: 12px;
           font-family: 'Encode Sans', sans-serif
       }


       #grafico-heatmap-stripes-countries {
           max-height: 6000px;
       }


   }


   #legend-heatmap-climate-stripes {
       font-family: 'Encode Sans', sans-serif;
       margin: 0 auto;
       text-align: center;
       font-size: 14px;
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       flex: 1 1 0;
       justify-content: center;
   }

   .container-legend-buttons-heatmap {
       display: flex;
   }





   #contenedor-curva-temperaturas-provincia {
       width: 100%;

   }

   #curvas-provincia-temperaturas {
       width: 100%
   }

   #curvas-provincia-temperaturas text {
       font-size: 14px;
       font-family: 'Encode Sans', sans-serif
   }

   #curvas-provincia-temperaturas .nombre-pais-curva {
       font-size: 14px;
       font-family: 'Encode Sans', sans-serif;
       fill: #333333;
       font-weight: 700
   }

   #curvas-provincia-temperaturas .ncasostotales {
       font-size: 11px;
       font-family: 'Encode Sans', sans-serif;
       fill: #939393;

   }


   #curvas-provincia-temperaturas .eje-vertical-temperaturas-provincias line {

       stroke: #c5c5c5;
       stroke-dasharray: 3;
       stroke-width: 0.5;
   }

   #curvas-provincia-temperaturas .eje-vertical-temperaturas-provincias text {
       fill: #939393;
   }


   #curvas-provincia-temperaturas .eje-vertical-temperaturas-provincias path {
       stroke-width: 0;
   }


   #curvas-provincia-temperaturas .eje-horizontal path {
       stroke-width: 0;
   }

   #curvas-provincia-temperaturas .eje-horizontal text {
       fill: #939393;
   }


   #curvas-provincia-temperaturas .eje-horizontal line {

       stroke: #939393;
       stroke-width: 1;
   }



   .columna-datos-eldiarioes {
       text-align: right;
       padding-bottom: 0px;
       padding-top: 0px;
       border-bottom: 1px solid #ddd;

   }

   .primeracolumna-eldiarioes {
       border-bottom: 1px solid #ddd;
       padding-bottom: 0px;
       padding-top: 0px;

   }

   #provinciaMenu {
       font-family: Sanomat-Bold, Georgia;
       display: inline-block;
       font-size: 31px;
       border: 1px solid #cecece;
       color: #000000;
       background-color: white;
       border: 1px solid #c5c5c5;
       padding-top: 5px;
   }


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


       #provinciaMenu {
           font-size: 26px;

       }

   }







   /* TABLA RECORDS */
   .tabla-records-temperatura {
       font-family: 'Encode Sans', sans-serif;
       font-size: 12px !important;
       max-height: 476px;
       overflow: hidden;
       transition: max-height 0s ease-out;
   }

   .container-tabla-records-temperatura {
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
   }

   .div-tabla-records-temperatura {
       width: 100%;

   }

   .nombre-tabla-records-temperatura {
       font-size: 16px;
       font-weight: 700;
       font-family: 'Encode Sans', sans-serif;
       margin-top: 30px;
       margin-bottom: 15px;
       color: #181818;
       text-align: left;
   }

   .tabla-records-temperatura table {
       width: 100%;
       border-collapse: collapse;
       font-size: 12px !important;
       border-spacing: 2px;
   }

   .tabla-records-temperatura th {
       color: #444;
       font-weight: 400;
       font-size: 10px;
       text-transform: uppercase;
       cursor: s-resize;
       background-repeat: no-repeat;
       background-position: 3% center;
       vertical-align: bottom;
       height: 50px
   }

   .tabla-records-temperatura td,
   .tabla-records-temperatura th {
       padding: 6px;
       border-bottom: 1px solid #ddd;
       text-align: left;
   }

   .tabla-records-temperatura #provinciaheader {
       display: none;
   }

   .tabla-records-temperatura #provincia {
       display: none;
   }

   .tabla-records-temperatura #tmax_record_anteriorheader {
       display: none;
   }

   .tabla-records-temperatura #fecha_record_anteriorheader {
       display: none;
   }

    .tabla-records-temperatura #tmax_record_anterior {
       display: none;
   }

   .tabla-records-temperatura #fecha_record_anterior {
       display: none;
   }


   .tabla-records-temperatura #tmaxheader {
       text-align: center
   }

   .tabla-records-temperatura #tiporecordheader {
       text-align: center
   }



   .buttoncollapse {
       color: #999;
       margin-top: 10px;
       font-family: 'Encode Sans', sans-serif;
       width: 100%;
       display: flex;
       justify-content: center;
       text-transform: uppercase;
       cursor: pointer;
       font-size: 12px;
       text-decoration: underline
   }

   @media (max-width: 900px) {
       .container-tabla-records-temperatura {
           display: flex;
           flex-direction: column;
           flex-wrap: wrap;
           max-height: none
       }


       .tabla-records-temperatura {
           max-height: 553px;

       }

       .tabla-records-temperatura #demora {
           width: 50px
       }


       .tabla-records-temperatura #graficovalues {
           width: 40%
       }



       .tabla-records-temperatura #listaheader {
           display: none
       }

       .tabla-records-temperatura #lista {
           display: none
       }

       .div-tabla-records-temperatura {
           padding: 0px 0px;
           width: 100%;
       }
   }