@font-face {
    font-family: "Inter";
    src: url("asset/fonts/Inter/Inter_18pt-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Inter";
    src: url("asset/fonts/Inter/Inter_18pt-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Inter";
    src: url("asset/fonts/Inter/Inter_18pt-SemiBold.ttf") format("truetype");
    font-weight: 600;
}

/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    font-family:Inter, sans-serif;

}


/* ==========================
   SFONDO
========================== */

.background{

    position:fixed;

    inset:0;

    z-index:-10;

}

.bg{

    width:100%;
    height:100%;

    object-fit:cover;

}


/* ==========================
   SIDEBAR
========================== */

.sidebar{

    position:fixed;

    left:25px;
    top:20px;

    width:72px;
    height:calc(100vh - 40px);

}

.sidebar-bg{

    position:absolute;

    width:72px;
    height:100%;

}


/* ==========================
   LOGO
========================== */

.logo{

    position:absolute;

    top:18px;
    left:15px;
    transform:translateX(50%);
    width:22px;

}


/* ==========================
   MENU
========================== */

.menu{

    position:absolute;

    top:340px;

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:28px;

}

.icon{

    width:40px;

    cursor:pointer;

    transition:.25s;

}

.icon:hover{

    transform:scale(1.08);

}


/* ==========================
   TEMA
========================== */

.theme{

    position:absolute;

    bottom:42px;

    left:50%;

    transform:translateX(-50%);

    width:43px;
    height:93px;

}

.theme-bg{

    position:absolute;

    width:43px;
    height:93px;

}

.moon{

    position:absolute;

    top:6px;

    left:5px;

    width:33px;

}

.ellipse{

    position:absolute;

    bottom:8px;

    left:2px;

    width:39px;

}

/* Ensure buttons using the .choice-btn class are light by default
    and only get the blue background when they have .active. */
.choice-btn,
.direzioni button.choice-btn{

     background:rgba(255,255,255,0.95);

     color:#4D4D4E;

}

.choice-btn.active,
.direzioni button.choice-btn.active{

     background:rgba(43,91,237,.55);

     color:white;

}

.sun{

    position:absolute;

    bottom:12px;

    left:6px;

    width:30px;

}


/* ==========================
   CONTENUTO
========================== */

.content{

    width:100%;
    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding-left:70px;

}


/* ==========================
   TITOLO
========================== */

.content h1{

    font-size:80px;

    font-weight:500;

    color:#2B5BED;

    margin-bottom:10px;

}


/* ==========================
   SOTTOTITOLO
========================== */

.content p{

    font-size:21px;

    color:#2B5BED;

    margin-bottom:30px;

}


/* ==========================
   BOTTONE GLASS
========================== */

.content button{

    width:760px;

    height:72px;

    border-radius:36px;

    border:1px solid rgba(255,255,255,.7);

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    font-size:24px;

    font-weight:600;

    color:#4D4D4E;

    cursor:pointer;

    transition:.30s;

    box-shadow:
        0 8px 30px rgba(255,255,255,.25),
        inset 0 1px 0 rgba(255,255,255,.6);

}

.content button:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,.25);

}


/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1200px){

.content h1{

    font-size:58px;

}

.content button{

    width:600px;

}

}

@media(max-width:900px){

.sidebar{

    display:none;

}

.content{

    padding-left:0;

}

.content h1{

    font-size:42px;

}

.content p{

    font-size:18px;

}

.content button{

    width:90%;

}

}


/* ==========================
   DARK MODE
========================== */

body.dark{

    background:#1F2430;

}

body.dark .content h1{

    color:white;

}

body.dark .content p{

    color:#E5E5E5;

}

body.dark button{

    color:white;

    background:rgba(40,40,40,.35);

}


/* ==========================
   CONFIGURAZIONE
========================== */

.config-page{

    width:calc(100% - 120px);

    margin-left:110px;

    padding:25px 20px 35px;

    height:100vh;

    overflow-y:auto;

}

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:20px;

}

.page-header h1{

    font-size:40px;

    font-weight:500;

    color:#2B5BED;

}

.page-header p{

    font-size:18px;

    color:#2B5BED;

    margin-top:6px;

}

.confirm-btn{

    width:190px;

    height:64px;

    border:none;

    border-radius:24px;

    background:rgba(255,255,255,.25);

    backdrop-filter:blur(16px);

    font-size:24px;

    font-weight:600;

    color:#7d7d7d;

    cursor:pointer;

    transition:.25s;

}

.confirm-btn:hover{

    transform:translateY(-2px);

}

.config-grid{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:28px;

}

.left-column,

.right-column{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.card{

    background:rgba(213,216,224,.20);

    border-radius:24px;

    padding:22px;

    backdrop-filter:blur(18px);

}

.card h2{

    font-size:22px;

    color:#4D4D4E;

    margin-bottom:18px;

}

.subtitle{

    font-size:14px;

    color:#4D4D4E;

    margin-top:-10px;

    margin-bottom:16px;

}

.card input,

.card select{

    width:100%;

    height:46px;

    margin-bottom:12px;

    border:none;

    border-bottom:2px solid #8b8b8b;

    background:transparent;

    font-size:17px;

    color:#4D4D4E;

    outline:none;

}

.button-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;

}

.button-grid.small{

    grid-template-columns:repeat(2,1fr);

}

.choice,

.direzioni button{

    height:58px;

    border:none;

    border-radius:20px;

    background:rgba(255,255,255,.25);

    color:#4D4D4E;

    cursor:pointer;

    transition:.25s;

    font-size:17px;

}

.choice:hover,

.direzioni button:hover{

    transform:scale(1.03);

}

.choice.active,

.direzioni button.active{

    background:rgba(43,91,237,.55);

    color:white;

}

.direzioni{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-top:12px;

}

.card label{

    display:block;

    margin:18px 0 8px;

    font-size:18px;

    color:#4D4D4E;

}

.card input[type="range"]{

    width:100%;

    margin-bottom:16px;

    accent-color:#2B5BED;

}

/* ==========================
   DASHBOARD
========================== */

.dashboard{

    width:calc(100% - 120px);

    margin-left:110px;

    padding:25px 20px 35px;

    height:100vh;

}

/* ==========================
   HEADER
========================== */

.dashboard-header{

    position:relative;

    width:100%;

    height:140px;

}

/* ==========================
   TITOLO
========================== */

.dashboard-title{

    position:absolute;

    left:-10px;

    top:0px;

    width:765px;

    font-family:'Inter',sans-serif;

    font-weight:500;

    font-size:40px;

    line-height:48px;

    color:#2B5BED;

}

/* ==========================
   SOTTOTITOLO
========================== */

.dashboard-subtitle{

    position:absolute;

    left:-10px;

    top:45px;

    width:442px;

    font-family:'Inter',sans-serif;

    font-weight:400;

    font-size:18px;

    line-height:22px;

    color:#2B5BED;

}

/* ==========================
   LOCATION
========================== */

.location{

    position:absolute;

    left:1236px;

    top:0px;

    width:171px;

    height:58px;

}

.location-bg{

    position:absolute;

    width:171px;

    height:58px;

}

.location-icon{

    position:absolute;

    left:10px;

    top:10px;

    width:36px;

}

.location-text{

    position:absolute;

    left:52px;

    top:15px;

    font-family:'Inter',sans-serif;

    font-size:18px;

    font-weight:400;

    color:#848282;

}

/* ==========================
   DOWNLOAD
========================== */

.download{

    position:absolute;

    left: 1425px;

    top:0px;

    width:58px;

    height:58px;

}

.download-bg{

    position:absolute;

    width:58px;

    height:58px;

}

.download-icon{

    position:absolute;

    left:11px;

    top:11px;

    width:36px;

}

/* ==========================
   NOTIFICHE
========================== */

.notification{

    position:absolute;

    left: 1500px;

    top:0px;

    width:58px;

    height:58px;

}

.notification-bg{

    position:absolute;

    width:58px;

    height:58px;

}

.notification-icon{

    position:absolute;

    left:12px;

    top:12px;

    width:35px;

}

/* ==========================
   RENDER CENTRALE
========================== */

.render-section{

    position:absolute;

    width:846px;

    height:476px;

    left:450px;

    top:-10px;

}

.render-image{

    position:absolute;

    width:846px;

    height:476px;

}

/* ==========================
   PALLINI SENSORI
========================== */

.sensor-btn{

    position:absolute;

    border:none;

    background:transparent;

    padding:0;

    cursor:pointer;

    transition:.25s;

}

.sensor-btn:hover{

    transform:scale(1.08);

}

.sensor-btn img{

    display:block;

}

.sensor-red{

    left:84px;

    top: 160px;

}

.sensor-red.panel-aperto{

    position:absolute;

    left:-320px;
    top:120px;

    z-index:9999;

}

.sensor-red img{

    width:62px;

    height:62px;

}

.sensor-yellow{

    left:274px;

    top:150px;

}

.sensor-yellow.panel-aperto{

    position:absolute;

    left:-320px;
    top:120px;

    z-index:9999;

}

.sensor-yellow img{

    width:62px;

    height:61px;

}

.sensor-green{

    left:528px;

    top:170px;

}

.sensor-green.panel-aperto{

    position:absolute;

    left:-320px;
    top:120px;

    z-index:9999;

}

.sensor-green img{

    width:61px;

    height:60px;

}

.sensor-white{

    left:680px;

    top:165px;

}

.sensor-white.panel-aperto{

    position:absolute;

    left:-320px;
    top:120px;

    z-index:9999;

}

.sensor-white img{

    width:62px;

    height:60px;

}

/* ==========================
   BARRA VALORI
========================== */

.values-section{

    position:absolute;

    left:123px;

    top: 410px;

    width:1557px;

    height:72px;

}


/* ==========================
   SFONDO
========================== */

.values-bg{

    position:absolute;

    width:1557px;

    height:72px;

}


/* ==========================
   VALORI
========================== */

.value{

    position:absolute;

    font-family:'Inter',sans-serif;

    font-style:normal;

    font-weight:500;

    font-size:34px;

    line-height:41px;

    text-align:center;

    color:#4D4D4E;

}


/* Temperatura */

.temperatura{

    left:454px;

    top:16px;

    width:94px;

}


/* Umidità */

.umidita{

    left:622px;

    top:16px;

    width:129px;

}


/* Qualità aria */

.qualita{

    left:784px;

    top:16px;

    width:192px;

}


/* Temperatura esterna */

.esterna{

    left:1004px;

    top:16px;

    width:129px;

}


/* ==========================
   SEPARATORI
========================== */

.divider{

    position:absolute;

    height:57px;

}


.divider-1{

    left:592px;

    top:7px;

}


.divider-2{

    left:784px;

    top:7px;

}


.divider-3{

    left:976px;

    top:7px;

}

/* =====================================================
   STORICO COMFORT DOMESTICO
===================================================== */

.storico{

    position:absolute;

    left:121px;
    top: 500px;

    width:773px;
    height:379px;

    font-family:"Inter",sans-serif;

}

/* ==========================
   SFONDO
========================== */

.storico-bg{

    position:absolute;

    left:0;
    top:0;

    width:773px;
    height:379px;

}

/* ==========================
   BARRA TITOLO
========================== */

.storico-title-bg{

    position:absolute;

    left:26px;
    top:21px;

    width:547px;
    height:24px;

}

.storico-title{

    position:absolute;

    left:42px;
    top:21px;

    margin:0;

    font-size:18px;

    font-weight:500;

    color:#4D4D4E;

    line-height:24px;

}

/* ==========================
   MENU PERIODO
========================== */

.periodo-container{

    position:absolute;

    top:21px;
    right:26px;

    width:166px;
    height:24px;

    z-index:100;

}

/* Sfondo del selettore */

.periodo-bg{

    position:absolute;

    left:0;
    top:0;

    width:166px;
    height:24px;

}

/* Testo */

#periodo-attuale{

    position:absolute;

    left:16px;
    top:0;

    font-family:Inter,sans-serif;

    font-size:18px;

    font-weight:500;

    color:#4D4D4E;

    line-height:24px;

}

/* Freccia */

.periodo-arrow{

    position:absolute;

    right:12px;
    top:5px;

    width:14px;
    height:14px;

    cursor:pointer;

}

/* Menu */

.menu-periodo{

    position:absolute;

    top:30px;
    left:0;

    width:166px;

    display:none;

    flex-direction:column;

    overflow:hidden;

    border-radius:12px;

    background:rgba(213,216,224,.45);

    backdrop-filter:blur(12px);

    z-index:999;

}

.menu-periodo.aperto{

    display:flex;

}

/* Voci */

.menu-periodo div{

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:Inter,sans-serif;

    font-size:17px;

    font-weight:500;

    color:#4D4D4E;

    cursor:pointer;

    transition:0.2s;

}

.menu-periodo div:hover{

    background:rgba(255,255,255,.35);

}

.menu-periodo div + div{

    border-top:1px solid rgba(77,77,78,.20);

}

/* Bottone */

#btn-periodo{

    cursor:pointer;

}

/* ==========================
   AREA GRAFICO
========================== */

.grafico-area{

    position:absolute;

    left:26px;
    top:52px;

    width:683px;
    height:299px;

}

/* ==========================
   GRIGLIA
========================== */

.grafico-griglia{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

}

/* ==========================
   SVG
========================== */

.grafico-svg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

}

/* ==========================
   PALLINI
========================== */

#grafico-punti{

    position:absolute;

    inset:0;

}

.punto-grafico{

    position:absolute;

    width:20px;
    height:20px;

    border-radius:50%;

    background:radial-gradient(
        circle at 35% 35%,
        #8FA7FF 0%,
        #5F79F3 45%,
        #3553D8 100%
    );

    border:0.5px solid #FFFFFF;

    cursor:pointer;

    transform:translate(-50%,-50%);

    transition:.2s;

    z-index:20;

}

.punto-grafico:hover{

    transform:translate(-50%,-50%) scale(1.2);

    box-shadow:0 0 10px rgba(77,77,78,.35);

}

/* ==========================
   TOOLTIP
========================== */

.tooltip-grafico{

    position:absolute;

    width:250px;

    min-height:120px;

    display:none;

    flex-direction:column;

    padding:18px;

    border-radius:12px;

    overflow:hidden;

    background:rgba(213,216,224,.45);

    backdrop-filter:blur(12px);

    box-shadow:0 6px 18px rgba(0,0,0,.10);

    z-index:999;

}

.tooltip-grafico.visibile{

    display:flex;

}

.tooltip-title{

    font-family:Inter,sans-serif;

    font-size:17px;

    font-weight:600;

    color:#4D4D4E;

    margin-bottom:12px;

}

.tooltip-linea{

    width:100%;

    height:1px;

    background:rgba(77,77,78,.20);

    margin-bottom:12px;

}

.tooltip-testo{

    font-family:Inter,sans-serif;

    font-size:15px;

    font-weight:400;

    line-height:22px;

    color:#4D4D4E;

}

/* ==========================
   ASSE X
========================== */

.asse-x{

    position:absolute;

    left:26px;
    bottom:12px;

    width:683px;

    display:flex;

    justify-content:space-between;

}

.asse-x span{

    font-size:14px;

    color:#4D4D4E;

}

/* ==========================
   ASSE Y
========================== */

.asse-y{

    position:absolute;

    right:18px;
    top:52px;

    height:299px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.asse-y span{

    font-size:14px;

    color:#4D4D4E;

}

/* =====================================================
   PANNELLO TEMPERATURA
===================================================== */

.panel-temperatura{

    position:absolute;

    left:122px;
    top:103px;

    width:1552px;
    height:381px;

    display:none;

    z-index:150;

}

.panel-temperatura.aperto{

    display:block;

}

/* Sfondo */

.temp-bg{

    position:absolute;

    left:0;
    top:0;

    width:1552px;
    height:381px;

}

/* Render */

.temp-render{

    position:absolute;

    left:148px;

    top:0;

    width:274px;
    height:292px;

}

.temp-barra{

    position:absolute;

    left:620px;
    top:16px;

    width:906px;

}

.temp-title-bg{

    position:absolute;

    left:20px;
    top:283px;

    width:545px;

}

.temp-title{

    position:absolute;

    left:20px;
    top:286px;

    width:545px;

    text-align:center;

    font-size:18px;

    font-weight:500;

    color:#4D4D4E;

}

.temp-value-bg{

    position:absolute;

    left:20px;
    top:320px;

    width:545px;

}

.temp-value{

    position:absolute;

    left:20px;
    top:330px;

    width:545px;

    text-align:center;

    font-size:30px;

    font-weight:500;

    color:#4D4D4E;

}

.temp-range-bg{

    position:absolute;

    left:620px;
    top:100px;

    width:332px;

}

.temp-range-title{

    position:absolute;

    left:638px;
    top:103px;

    font-size:18px;
    color:#4D4D4E;

}

.temp-range{

    position:absolute;

    left:638px;
    top:138px;

    width:290px;

    display:grid;

    grid-template-columns:1fr auto;

    row-gap:10px;

    font-size:14px;
    color:#4D4D4E;

}

.temp-trend-bg{

    position:absolute;

    left:620px;
    top:229px;

    width:332px;

}

.temp-trend-title{

    position:absolute;

    left:638px;
    top:232px;

    font-size:18px;
    color:#4D4D4E;

}

.temp-trend-value{

    position:absolute;

    left:638px;
    top:270px;

    font-size:14px;

}

.temp-trend-img{

    position:absolute;

    left:620px;
    top:300px;

    width:332px;

}

.temp-grafico-bg{

    position:absolute;

    left:1029px;
    top:100px;

    width:497px;

}

.temp-grafico-title{

    position:absolute;

    left:1046px;
    top:103px;

    font-size:18px;
    color:#4D4D4E;

}

.temp-grafico{

    position:absolute;

    left:1033px;
    top:124px;

    width:470px;

}

/* =====================================================
   PANNELLO UMIDITA'
===================================================== */

.panel-umidita{

    position:absolute;

    left:122px;
    top:103px;

    width:1552px;
    height:381px;

    display:none;

    z-index:150;

}

.panel-umidita.aperto{

    display:block;

}

/* Sfondo */

.hum-bg{

    position:absolute;

    left:0;
    top:0;

    width:1552px;
    height:381px;

}

/* Render */

.hum-render{

    position:absolute;

    left:196px;

    top:-8px;

    width:217px;
    height:302px;

}

/* Barra */

.hum-barra{

    position:absolute;

    left:615px;
    top:14px;

    width:906px;

}

/* ======================
   Titolo
====================== */

.hum-title-bg{

    position:absolute;

    left:20px;
    top:283px;

    width:545px;

}

.hum-title{

    position:absolute;

    left:20px;
    top:286px;

    width:545px;

    text-align:center;

    font-size:18px;

    font-weight:500;

    color:#4D4D4E;

}

/* ======================
   Valore
====================== */

.hum-value-bg{

    position:absolute;

    left:20px;
    top:320px;

    width:545px;

}

.hum-value{

    position:absolute;

    left:20px;
    top:330px;

    width:545px;

    text-align:center;

    font-size:30px;

    font-weight:500;

    color:#4D4D4E;

}

/* ======================
   Valori di riferimento
====================== */

.hum-reference-bg{

    position:absolute;

    left:620px;
    top:100px;

    width:333px;

}

.hum-reference-title{

    position:absolute;

    left:638px;
    top:103px;

    font-size:18px;

    color:#4D4D4E;

}

.hum-reference{

    position:absolute;

    left:638px;
    top:138px;

    width:280px;

    display:grid;

    grid-template-columns:1fr auto;

    row-gap:10px;

    font-size:14px;

    color:#4D4D4E;

}

/* ======================
   Trend
====================== */

.hum-trend-bg{

    position:absolute;

    left:620px;
    top:229px;

    width:333px;

}

.hum-trend-title{

    position:absolute;

    left:638px;
    top:232px;

    font-size:18px;

    color:#4D4D4E;

}

.hum-trend-value{

    position:absolute;

    left:638px;
    top:270px;

    font-size:14px;

    color:#4D4D4E;

}

.hum-trend-img{

    position:absolute;

    left:620px;
    top:300px;

    width:333px;

}

/* ======================
   Grafico
====================== */

.hum-graph-bg{

    position:absolute;

    left:1029px;
    top:100px;

    width:497px;

}

.hum-graph-title{

    position:absolute;

    left:1046px;
    top:103px;

    font-size:18px;

    color:#4D4D4E;

}

.hum-graph{

    position:absolute;

    left:1044px;
    top:118px;

    width:469px;

}

.hum-render{

    z-index:2;

}

/* =====================================================
   PANNELLO QUALITA' ARIA
===================================================== */

.panel-aria{

    position:absolute;

    left:123px;
    top:103px;

    width:1552px;
    height:381px;

    display:none;

    z-index:150;

}

.panel-aria.aperto{

    display:block;

}

/* Sfondo */

.air-bg{

    position:absolute;

    left:0;
    top:0;

    width:1552px;
    height:381px;

}

/* Render */

.air-render{

    position:absolute;

    left:43px;
    top:0;

    width:528px;
    height:297px;

}

/* Barra */

.air-bar{

    position:absolute;

    left:619px;
    top:16px;

    width:906px;

}

/* Titolo */

.air-title-bg{

    position:absolute;

    left:20px;
    top:283px;

    width:545px;

}

.air-title{

    position:absolute;

    left:20px;
    top:286px;

    width:545px;

    text-align:center;

    font-size:18px;

    font-weight:500;

    color:#4D4D4E;

}

/* Valore */

.air-value-bg{

    position:absolute;

    left:20px;
    top:320px;

    width:545px;

}

.air-value{

    position:absolute;

    left:20px;
    top:330px;

    width:545px;

    text-align:center;

    font-size:30px;

    font-weight:500;

    color:#4D4D4E;

}

/* Indice gas */

.air-index-bg{

    position:absolute;

    left:619px;
    top:100px;

    width:333px;

}

.air-index-title{

    position:absolute;

    left:637px;
    top:103px;

    font-size:18px;

    color:#4D4D4E;

}

.air-index{

    position:absolute;

    left:637px;
    top:135px;

    width:300px;

    display:flex;

    justify-content:space-between;

    font-size:14px;

    color:#4D4D4E;

}

/* Range */

.air-range-bg{

    position:absolute;

    left:619px;
    top:174px;

    width:333px;

}

.air-range-title{

    position:absolute;

    left:637px;
    top:177px;

    font-size:18px;

    color:#4D4D4E;

}

.air-range{

    position:absolute;

    left:638px;
    top:204px;

    font-size:14px;

    color:#4D4D4E;

}

/* Trend */

.air-trend-bg{

    position:absolute;

    left:619px;
    top:229px;

    width:333px;

}

.air-trend-title{

    position:absolute;

    left:638px;
    top:270px;

    font-size:14px;

    color:#4D4D4E;

}

.air-trend-title{

    position:absolute;

    left:637px;
    top:232px;

    font-size:18px;

    color:#4D4D4E;

}

.air-trend-value{

    position:absolute;

    left:637px;
    top:270px;

    font-size:14px;

    color:#4D4D4E;

}

.air-trend-img{

    position:absolute;

    left:620px;
    top:300px;

    width:331px;

}

/* Grafico */

.air-graph-bg{

    position:absolute;

    left:1028px;
    top:100px;

    width:497px;

}

.air-graph-title{

    position:absolute;

    left:1046px;
    top:103px;

    font-size:18px;

    color:#4D4D4E;

}

.air-graph{

    position:absolute;

    left:1042px;
    top:144px;

    width:471px;

}

/* =====================================================
   PANNELLO METEO
===================================================== */

.panel-meteo{

    position:absolute;

    left:122px;
    top:103px;

    width:1552px;
    height:381px;

    display:none;

    z-index:150;

}

.panel-meteo.aperto{

    display:block;

}

.meteo-bg{

    position:absolute;

    left:0;
    top:0;

    width:1552px;
    height:381px;

}

.meteo-render{

    position:absolute;

    left:-80px;
    top:-5px;

    width:533px;
    height:300px;

}

.meteo-title-bg{

    position:absolute;

    left:20px;
    top:283px;

    width:545px;

}

.meteo-title{

    position:absolute;

    left:20px;
    top:286px;

    width:545px;

    text-align:center;

    font-size:18px;

    font-weight:500;

    color:#4D4D4E;

}

.meteo-value-bg{

    position:absolute;

    left:20px;
    top:320px;

    width:545px;

}

.meteo-value{

    position:absolute;

    left:20px;
    top:330px;

    width:545px;

    text-align:center;

    font-size:30px;

    font-weight:500;

    color:#4D4D4E;

}

.meteo-info-bg{

    position:absolute;

    left:620px;
    top:100px;

    width:324px;

}

.meteo-info-title{

    position:absolute;

    left:638px;
    top:103px;

    font-size:18px;

    color:#4D4D4E;

}

.meteo-icon{

    position:absolute;

    left:628px;
    top:15px;

    width:94px;

}

.meteo-stato{

    position:absolute;

    left:772px;
    top:40px;

    font-size:18px;

    color:#4D4D4E;

}

.meteo-citta{

    position:absolute;

    left:772px;
    top:65px;

    font-size:14px;

    color:#4D4D4E;

}

.meteo-dati{

    position:absolute;

    left:638px;
    top:145px;

    width:300px;

    display:grid;

    grid-template-columns:1fr auto;

    row-gap:12px;

    font-size:14px;

    color:#4D4D4E;

}

.meteo-barra{

    position:absolute;

    left:638px;
    top:315px;

    width:294px;

}

.meteo-graph-bg{

    position:absolute;

    left:970px;
    top:100px;

    width:533px;

}

.meteo-graph-title{

    position:absolute;

    left:988px;
    top:103px;

    font-size:18px;

    color:#4D4D4E;

}

.meteo-graph{

    position:absolute;

    left:988px;
    top:150px;

    width:511px;

}

.meteo-maxmin{

    position:absolute;

    left:1420px;
    top:18px;

    width:75px;

}

/* =====================================================
   STATO DI COMFORT
===================================================== */

.comfort-box{

    position:absolute;
    left:913px;
    top:502px;

    width:761px;
    height:106px;

}

.comfort-bg{

    position:absolute;
    width:761px;
    height:106px;
    left:0;
    top:0;

}

.comfort-title-bg{

    position:absolute;
    width:711px;
    height:24px;
    left:24px;
    top:21px;

}

.comfort-title{

    position:absolute;
    left:34px;
    top:22px;

    font-size:18px;
    font-weight:500;
    color:#4D4D4E;

}

/* Barra grigia */

.comfort-track{

    position:absolute;
    left:24px;
    top:61px;

    width:557px;
    height:6px;

}

/* Barra blu dinamica */

.comfort-bar{

    position:absolute;
    left:29px;
    top:55px;

    width:463px;      /* valore iniziale */
    height:17px;

    border-radius:24px;

    background:linear-gradient(
        90deg,
        rgba(43,91,237,.7) 0%,
        rgba(15,41,149,.7) 100%
    );

    transition:width .4s ease;

}

/* Percentuale */

.comfort-percent{

    position:absolute;
    right:55px;
    top:48px;

    width:120px;

    text-align:right;

    font-size:34px;
    font-weight:500;

    color:#4D4D4E;

}

/* =====================================================
   PREVISIONI
===================================================== */

.forecast-box{

    position:absolute;
    left:1308px;
    top:631px;

    width:364px;
    height:250px;

}

/* Sfondo */

.forecast-bg{

    position:absolute;
    left:0;
    top:0;

    width:364px;
    height:250px;

}

/* Barra titolo */

.forecast-title-bg{

    position:absolute;
    left:24px;
    top:18px;

    width:316px;
    height:23px;

}

.forecast-title{

    position:absolute;
    left:32px;
    top:20px;

    font-size:18px;
    font-weight:500;

    color:#4D4D4E;

}

/* Testo */

.forecast-text{

    position:absolute;
    left:32px;
    top:51px;

    width:233px;

    font-size:18px;
    font-weight:400;
    line-height:22px;

    color:#4D4D4E;

}

/* Barra suggerimenti */

.forecast-suggestion-bg{

    position:absolute;
    left:24px;
    top:164px;

    width:316px;
    height:23px;

}

.forecast-suggestion-title{

    position:absolute;
    left:32px;
    top:166px;

    font-size:18px;
    font-weight:500;

    color:#4D4D4E;

}

/* Pallini */

.forecast-dot-1{

    position:absolute;
    left:24px;
    top:196px;

    width:36px;
    height:33px;

}

.forecast-dot-2{

    position:absolute;
    left:75px;
    top:196px;

    width:36px;
    height:33px;

}

/* =====================================================
   ULTIMO MESSAGGIO
===================================================== */

.message-box{

    position:absolute;

    left:913px;
    top:631px;

    width:364px;
    height:250px;

}

.message-bg{

    position:absolute;

    left:0;
    top:0;

    width:364px;
    height:250px;

}

.message-title-bg{

    position:absolute;

    left:24px;
    top:18px;

    width:316px;
    height:23px;

}

.message-title{

    position:absolute;

    left:34px;
    top:20px;

    font-size:18px;
    font-weight:500;
    line-height:22px;

    color:#4D4D4E;

}

.message-text{

    position:absolute;

    left:34px;
    top:50px;

    width:267px;
    height:148px;

    font-size:18px;
    font-weight:400;
    line-height:22px;

    color:#4D4D4E;

    white-space:pre-line;

}

/* ==========================================================
                        PAGINA PROFILO
========================================================== */

.profilo-container{

    position:absolute;
    left:123px;
    top:90px;

    width:1552px;
    height:791px;

}

/* Sfondo */

.profilo-bg{

    position:absolute;

    left:0;
    top:0;

    width:1552px;
    height:791px;

}

/* Header */

.profilo-header{

    position:absolute;

    left:30px;
    top:0;

    width:1494px;
    height:auto;

}

/* Attività */

.profilo-attivita{

    position:absolute;

    left:30px;
    top:250px;

    width:843px;
    height:auto;

}

/* Calendario */

.profilo-calendario{

    position:absolute;

    left:822px;
    top:250px;

    width:702px;
    height:auto;

}

.profilo-header-page{

    position: relative;

    margin-left:123px;
    margin-top:20px;

}