/*.range(['#fee9df', '#fdc8b2', '#fd9d7e', '#fb7151', '#f24732', '#d01e1f', '#a91016']);*/
:root {
  --mintemp: #fee9df;
  --step1: #fdc8b2;
  --step2: #fd9d7e;
  --step3: #fb7151;;
  --step4: #f24732;
  --step5: #d01e1f;
  --maxtemp: #a91016;
  
  --sizemin:0.5rem;
  --size1:1rem;
  --size2:1.2rem;
  --size3:1.3rem;
  --size4:1.4rem;
  --size5:1.5rem;
  --size6:1.6rem;
  --size7:1.7rem;
  --size8:1.8rem;
  --size9:1.9rem;
  --size10:2rem;
  --size11:2.1rem;
  --sizemax:2.2rem;

}

*{list-style: none;}

.formOlasCalor {background:#f2f2f2;padding: 1rem;display: flex;justify-content: center;flex-flow: column;align-items: center;}
.formOlasCalor ul {display: inline-flex;flex-wrap: nowrap;align-items: center;justify-content: flex-start;}
.formOlasCalor .txtInfo {background: gainsboro;margin-top: 0.6rem;}
.formOlasCalor .txtInfo p {margin: 0;}

.formOlasCalor ._label,
.formOlasCalor input,
.formOlasCalor select,
.formOlasCalor ._input {font-size:1.8rem;} 
.formOlasCalor button {background:gainsboro;font-size: 1.8rem;padding: 1rem;margin-left: 1rem;}
.formOlasCalor ._label + input {margin:0 1rem;}

.infoBox h3 {font-size:2rem;font-weight:400;width:auto;padding:0 1rem 0 0;}
.infoBox ol,
.infoBox ol li {display:inline-flex;}
.infoBox ol {flex-flow: column;padding:2rem;display: flex;flex-wrap: wrap;align-content: center;}
.infoBox ol li {display:flex;flex-flow: wrap;align-items:left;padding:1rem 0;align-items: center;}
.infoBox .itemWave {width:2.2rem;height:2.2rem;border-radius: 100%;margin:0 1rem;}
.infoBox .itemWave * {color:#000;}
.infoBox .itemWave p {padding:0;line-height:1;text-align:left;}
.infoBox .itemWave strong {font-weight:600;}
.infoBox .itemWave .dataWave {display:none;position:relative;width:28rem;background: white;z-index: 1;position: relative;padding:1rem;left: 2.4rem;border: 1px solid gray;}
.infoBox .itemWave:hover .dataWave {display:block;}
.infoBox .itemWave:after, .infoBox .itemWave:before {position: absolute;top: 50%;left: 0;border: 0 solid transparent;content: '';height: 0;width: 0;}


.infoBox .mintemp {background:var(--mintemp);}
.infoBox .step1 {background:var(--step1);}
.infoBox .step2 {background:var(--step2);}
.infoBox .step3 {background:var(--step3);}
.infoBox .step4 {background:var(--step4);}
.infoBox .step5 {background:var(--step5);}
.infoBox .maxtemp {background:var(--maxtemp);}

.infoBox .sizemin {width:var(--sizemin);height:var(--sizemin);}
.infoBox .size1 {width:var(--size1);height:var(--size1);}
.infoBox .size2 {width:var(--size2);height:var(--size2);}
.infoBox .size3 {width:var(--size3);height:var(--size3);}
.infoBox .size4 {width:var(--size4);height:var(--size4);}
.infoBox .size5 {width:var(--size5);height:var(--size5);}
.infoBox .size6 {width:var(--size6);height:var(--size6);}
.infoBox .size7 {width:var(--size7);height:var(--size7);}
.infoBox .size8 {width:var(--size8);height:var(--size8);}
.infoBox .size9 {width:var(--size9);height:var(--size9);}
.infoBox .size10 {width:var(--size10);height:var(--size10);}
.infoBox .size11 {width:var(--sizemax);height:var(--sizemax);}

.legendTitle {font-size:1.6rem;}
svg text.label {font-size: 1.4rem;}

.artBody #info_temp [class*="calor"] strong{font-weight: 600;padding: 0 0.4rem;color:#fff;}
/* temp 34 - 36 */.artBody #info_temp .calor_ligero *{background-color:(254, 233, 223) !important;}
/* temp 36 - 38 */.artBody #info_temp .calor_suave *{background-color: rgb(253, 193, 169) !important;}
/* temp 38 - 40 */.artBody #info_temp .calor_moderado *{background-color: rgb(252, 142, 109) !important;}
/* temp 40 - 42 */.artBody #info_temp .calor_intenso * {background-color: rgb(247, 93, 64) !important;}
/* temp 42 - 44 */.artBody #info_temp .calor_extremo *{background-color: rgb(221, 43, 37) !important;}
/* temp 44 - 46 */.artBody #info_temp .calor_super-extremop *,.artBody #info_temp .calor_superextremo *{background-color: rgb(176, 18, 23) !important;}
/* temp 46 +    */.artBody #info_temp .calor_extremisimo *{background-color: rgb(103, 0, 13) !important;}

.artBody #info_temp .calor_ligero ,.artBody #info_temp .calor_suave,.artBody #info_temp .calor_moderado, .artBody #info_temp .calor_intenso ,.artBody #info_temp .calor_extremo ,.artBody #info_temp .calor_super-extremo, #info_temp .calor_superextremo ,.artBody #info_temp .calor_extremisimo{background-color: transparent !important;}

/* ::::: ESTILO CALENDARIO DATEPICKER :::::  */

input[type=date] {width: 66%;}
input[type=date] , select#provincia {
height: 2.5rem;
font-family: arial, sans-serif;
font-size: 1.8rem;
background-color: #ffffff;
outline: none;
border: 0;
border-radius: 0.3rem;
padding: 0 1rem;
color: rgb(0, 0, 0);
font-family: 'Roboto','arial',sans-serif;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
border-image: initial;
border-radius: 0px;
}

input[type=date]::-webkit-clear-button {font-size: 1.2rem;height: 2rem;position: relative;right: 2rem;margin-right:2rem;}
input[type=date]::-webkit-inner-spin-button {height: 2rem;}
input[type=date]::-webkit-calendar-picker-indicator {font-size: 1.2rem;}
input[type=date]::-webkit-calendar-picker-indicator:hover {background-color:#ffffff;color: #f0a314;cursor: pointer;}
input[type=date]::-webkit-calendar-picker-indicator:active {color: #f0a314;}


.infoWaves:not(:empty) {padding: 1.2rem;}
.infoWaves p {font-size: 1.8rem;line-height: 2.4rem;padding: 0.5rem 0;}
#legendTemperatura {display:none;}

.popup .temp, .popup .fecha , .popup .duracion{font-size: 1.6rem;line-height:2.2rem;font-weight:400;}
.popup .temp b{font-weight:600;}
.popup .fecha {font-size: 1.2rem;}