@import url('fonts/titillium/install.css');
@import url('fonts/rajdhani/install.css');
*, ::after, ::before { box-sizing:border-box; }
.container { position:relative; }
/* body { font-family:"TitilliumRegular"; } */
body { font-family:"rajdhanimedium"; }
a { color:#444; }
a:hover { color:#000; }

/* h1, h2 { font-family:"TitilliumBdBold"; font-weight:normal; } */
h1, h2 { font-family:"rajdhanibold"; font-weight:normal; }

header .titolo { padding-top:1.5rem; padding-bottom:1.5rem; background-color:#545DFF; margin-top:1.5rem; margin-bottom:1.5rem; }
header .titolo h2 { font-size:2rem; color:#fff; text-transform:uppercase; }

.grid { display: grid; }

#nav-area { margin-bottom:2rem; }
#nav-area a { color:#DEDEDE; }
#nav-area a.active { color:#444; border-bottom:1px solid #444; }
#btn-logout img { width:1.5rem; }
#azioni-area ul { list-style-type:none; padding-left:0; }
#azioni-area ul li { margin-bottom:1rem; }
#azioni-area ul li a { border:1px solid #DEDEDE; border-radius:6px; display:block; color:#444; }
#azioni-area ul li a:hover { text-decoration:none; }
#azioni-area ul li img { width:1rem; display:block; margin-bottom:0.5rem; margin-left:auto; margin-right:auto; }
#azioni-area ul li strong, #azioni-area ul li .area-avvia { padding-top:1rem; padding-bottom:1rem; }
#azioni-area .area-avvia { border-left:1px solid #DEDEDE; }
#azioni-area .area-avvia h5 { text-align:center; font-size:0.8rem; text-transform:uppercase; }
#azioni-scenario ul { list-style-type:none; }
#azioni-scenario li { margin-bottom:1rem; min-height:100px; }
#azioni-scenario li a { padding:1rem; border:1px solid #DEDEDE; border-radius:6px; display:block; color:#444; }
#azioni-scenario ul li a:hover { text-decoration:none; }
#azioni-scenario ul li .row { align-items:top; }
#azioni-scenario li h5 { font-size:1.1rem; margin-bottom:1.2rem; }
#azioni-scenario li .col-2 img { max-width:100%; }
#azioni-scenario li .circle { padding-left:1rem; background-image:url('/img/svg/solid/circle.svg'); background-size:0.5rem auto; background-position:left center; background-repeat:no-repeat; }
#azioni-scenario .col-3 span { text-align:center; display:block; text-transform:uppercase; }
#azioni-scenario .col-3 img { display:block; margin:0 auto; width:2rem; }
.chiudi img { width:1.2rem; }
#controller-container { position:relative; }
#circle-controller { width:250px; height:250px; margin:0 auto; max-width:100%; }
#circle-controller_knob { background-image:radial-gradient(circle, #000, #999); }
#circle-controller_wheel { background-image:radial-gradient(circle, #F9F9F9, #DDD); }
#controller-inner { position:absolute; width:80px; height:80px; margin:auto; top:0; bottom:0; right:0; left:0; background-color:#FFF; border-radius:50%; z-index:10000; }
#controller-inner img { width:3rem; }
#controller-inner-content { position:absolute; top:0; left:0; right:0; bottom:0; width:120px; height:80px; margin:auto; text-align:center; }
.form-controller { margin-top:5rem; text-align:center; }
.form-controller .input-container { display:inline-block; padding-left:2rem; padding-right:2rem; background-repeat:no-repeat; background-size:auto 1rem; }
.form-controller-lightintensity { background-image:url('/img/svg/regular/sun.svg'), url('/img/svg/solid/sun.svg'); background-position:left center, right center; }
#circle { width:400px; height:400px; margin:0 auto; border-radius:50%; background:radial-gradient(circle, #FFF, #000); }

ul.opzioni { list-style-type:none; text-align:center; margin:2rem 0 0 0; }
ul.opzioni li { display:inline-block; vertical-align:middle; margin-right:1rem; margin-bottom:1rem; border:1px solid #DEDEDE; padding:1rem; border-radius:8px; }
.buttons { margin-top:3rem; }
.buttons a { margin-right:1rem; margin-bottom:1rem; }
.upload-image { width:100px; height:100px; background:#F9F9F9 url('/img/svg/solid/plus-circle.svg') right top / 1rem no-repeat; }
.upload-image:hover { cursor:pointer; }
.form-standard .upload-image { margin-bottom:2rem; }
.upload-image.image-uploaded { background-size:100px; background-repeat:no-repeat; background-position:center; }
.upload-image.image-uploaded:hover { cursor:auto; }
#nuova-area .upload-image.image-uploaded { background-image:url('/img/casa-small.jpg'); }
#nuovo-ambiente .upload-image.image-uploaded { background-image:url('/img/svg/living-room.svg'); }
#nuovo-dispositivo .upload-image.image-uploaded { background-image:url('/img/svg/lamp.svg'); }
.cornice { padding:2rem; border:2px dashed #DEDEDE; }
.list { margin:2rem auto; list-style-type:none; padding-left:0; }
.list li { margin-bottom:2rem; }
.list li a { display:block; padding:1rem; text-decoration:none; text-align:center; border:1px solid #DEDEDE; border-radius:8px; }
.list li h4 { font-size:1rem; margin-top:1rem; }
.list li img { height:50px; }
.list li p { margin-top:0; }
.list li h5 { font-size:1rem; }
.list2 li a { padding-left:2rem; padding-right:2rem; }
.list2 li h3 { font-size:1.2rem; }
.list2 li p { font-size:0.9rem; }
.list2 li a { background:url('/img/svg/lamp.svg'), url('/img/svg/solid/chevron-right.svg'); background-size:2rem auto, 0.6rem auto; background-position:5% center, 95% center; background-repeat:no-repeat; }

.alert h3 { color:#000; font-size:1.2rem; text-transform:none; }

#lista-ambienti h2 { margin-top:2rem; }

div.icona { text-align:center; }
.icona img { height:75px; }

article > h1 { color: #1a1a4f; }

/* #registration-edit input[type="email"], #registration-edit input[type="text"] { width: 250px; border: 1px solid #545dff; border-radius: 5px; padding:0.5rem; font-size: 1.1rem }
#registration-edit input[type="submit"] { border: 1px solid #545dff; border-radius: 5px; padding:0.5rem; }
#registration-edit input:focus { background-color: #f0f0f5; border: 2px solid #545dff; } */

.form-standard .row { margin-bottom:1rem; }
.form-standard h4 { margin-bottom:0; }
.form-standard h4, .form-standard p, .form-standard input, .form-standard textarea { color:#1a1a4f; }
.form-standard input[type="submit"] { color:#000; }
/* .form-standard input[type="submit"] { color:#fff; } */
.form-standard .field { margin-bottom:1rem; }
/* .form-standard .field-input-container { padding-left:2rem; background-color:#eee; border:1px solid #ccc; border-radius:0.25rem; max-width:30rem; } */
.form-standard .field-input-container { max-width:30rem; }
/* .form-standard .field-input-prepend { display:flex; } */
/* .form-standard .field-text .field-input-prepend { display:none; } */
/* .form-standard .field-input-prepend span { background-size:auto 1rem; background-position:0.5rem center; background-repeat:no-repeat; } */
/* .form-standard .field input { padding:0.35rem 0.2rem; border:0; border-radius:0; font-size:1rem; width:100%; display:flex; } */
/* .form-standard .field-email span { background-image:url('/img/svg/user-alt.svg'); } */
.form-standard .field input { padding:0.35rem 0.2rem; border:1px solid #ccc; border-radius:0.25rem; font-size:1rem; width:100%; }

.empty { margin-top:2rem; margin-bottom:3rem; border:1px dashed #DEDEDE; text-align:center; }
.empty h4 { font-size:1rem; }
.empty a { color:#CCC; text-decoration:none; display:block; padding:1.5rem; }

.border-dark { border:1px solid #444; border-radius:8px; }
span.border-dark { padding:0.5rem; text-align:center; margin-bottom:1rem; display:block; }
#nuovo-scenario .border-top { padding-top:0.5rem; margin-bottom:1rem; }
#nuovo-scenario .check, #nuovo-scenario .plus { display:block; background-position:95% center; background-repeat:no-repeat; background-size:1rem auto; }
#nuovo-scenario .check { background-image:url('/img/svg/solid/check.svg'); }
#nuovo-scenario .plus { background-image:url('/img/svg/solid/plus-circle.svg'); }

#aggiungi-dispositivi ul { margin:0; }
#aggiungi-dispositivi li { list-style-type:none; margin-bottom:2rem; }
#aggiungi-dispositivi li img { height:1.8rem; }

#lampada-cucina p { margin-top:1rem; text-align:center; }

h2 { position:relative; }
h2 a.cog { display:block; position:absolute; top:1rem; right:1rem;  }
h2 img { height:1.2rem; display:block; margin:0 0 0 auto; }

img { max-width:100%; }

.bg-grey { background-color:#D8D8D8; color:#666; padding:1rem; }

.back-home img { height:1rem; margin-right:0.5rem; }

.riquadro-on { border:1px solid #DEDEDE; }
.riquadro-on a { display:block; padding:0.8rem; text-decoration:none; }
.riquadro-on img { height:1rem; margin-right:0.5rem; }
.riquadro-on span:not(:first-of-type) { margin-left:1rem; }

/* span.on, span.off { display:block; padding:2rem 1rem 1rem 1rem; background-repeat:no-repeat; background-size:1.5rem auto; background-position:center 0.5rem; text-align:center; }
span.on:hover, span.off:hover { cursor:pointer; }
span.on { background-image:url('/img/svg/solid/toggle-on.svg'); }
span.off { background-image:url('/img/svg/solid/toggle-off.svg'); } */

span.light, span.color { background-repeat:no-repeat; padding-left:1.5rem; background-size:auto 1rem; background-position:0.5rem center; }
span.light { background-image:url('/img/svg/solid/sun.svg'); }
span.color { background-image:url('/img/svg/solid/tint.svg'); }

.check-before li { padding-left:2rem; background-image:url('/img/svg/solid/check.svg'); background-repeat:no-repeat; background-size:1rem; background-position:0.5rem center; }
.check-before li .col-3, .check-before li .col-7 { padding:0; }

.input-group-prepend img { display:block; width:1rem; }

.icon { display:block; width:1rem; }
.icon-md { width:1.5rem; }
.icon-lg { width:2rem; }
.icon-xl { width:3rem; }

.icon-on { background-image:url('/img/assets/attivo.svg'); }
.icon-off { background-image:url('/img/assets/disattivo.svg'); }
.icon-brightness { background-image:url('/img/assets/luminosit_meno_black.svg'); }
.icon-level { background-image:url('/img/assets/level.svg'); }
.icon-nh3 { background-image:url(''); }
.icon-position { background-image:url(''); }
.icon-state { background-image:url(''); }
.icon-state-25 { background-image:url('/img/assets/tapparella_25_blue.svg'); }
.icon-state-50 { background-image:url('/img/assets/tapparella_50_blue.svg'); }
.icon-state-75 { background-image:url('/img/assets/tapparella_75_blue.svg'); }
.icon-window-opened { background-image:url('/img/assets/tapparella_aperta_blue.svg'); }
.icon-window-closed { background-image:url('/img/assets/tapparella_chiusa_blue.svg'); }
.icon-door-opened { background-image:url('/img/assets/porta_aperta_blue.svg'); }
.icon-door-closed { background-image:url('/img/assets/porta_chiusa_blue.svg'); }
.icon-devices { background-image:url('/img/assets/dispositivi_black.svg'); }
.icon-falling { background-image:url('/img/caduta.png'); }
.icon-walking { background-image:url('/img/svg/solid/walking.svg'); }
.icon-colorrgb { width:1rem; height:1rem; border-radius:50%; background-color:transparent; border:1px solid #222; }
.icon-colortemperature { width:1rem; height:1rem; border-radius:50%; background-color:transparent; border:1px solid #222; }

.endpoint-shutter .icon-closed { background-image:url('/img/svg/window-closed.svg'); }
.endpoint-shutter .icon-open { background-image:url('/img/svg/window-open.svg'); }
.endpoint-door .icon-open { background-image:url('/img/svg/solid/door-open.svg'); }
.endpoint-door .icon-closed { background-image:url('/img/svg/solid/door-closed.svg'); }

.margin-auto { margin:0 auto; }
form .row .input-group { margin-bottom:1.5rem; }

.btn-default { padding:0.75rem; display:inline-block; vertical-align:middle; color:#FFF; border:1px solid #545dff; transition:background-color .4s, color .4s, border .4s; text-transform:uppercase; background-repeat:no-repeat; background-position:10px center; background-size:auto 20px; background-color:#545dff; border-radius:8px; text-decoration:none; box-shadow:3px 4px 8px 2px #888; }
.btn-default .icon { width:1.2rem; height:1.2rem; background-size:auto 1.2rem; background-repeat:no-repeat; }
.btn-default span { display:inline-block; vertical-align:middle; }
.btn-default .icon + span { margin-left:0.5rem; }
.btn-default:hover { cursor:pointer; background-color:#2d53c4; text-decoration:none; color:#fff; transition:background-color .4s, color .4s, border .4s; border:1px solid #2d53c4; }
.btn-custom { border:1px solid #000; }
.btn-custom .icon { transition:background-image .4s; }
.btn-custom:hover { border:1px solid #222; }
.btn-custom:hover .icon { transition:background-image .4s; }
.btn-disabled { opacity:0.4; }
.btn-disabled:hover { cursor: not-allowed; }
.btn-copy .icon { background-image:url('/img/svg/copy.svg'); }
.btn-view .icon { background-image:url('/img/svg/eye.svg'); }
.btn-search .icon { background-image:url('/img/svg/search.svg'); }
.btn-new .icon { background-image:url('/img/svg/file-white.svg'); }
.btn-back .icon { background-image:url('/img/svg/arrow-alt-circle-left.svg'); }
.btn-before .icon { background-image:url('/img/svg/chevron-circle-up.svg'); }
.btn-after .icon { background-image:url('/img/svg/chevron-circle-down.svg'); }
.btn-user .icon { background-image:url('/img/user/utente_black.svg'); }
.btn-new-group .icon { background-image:url('/img/svg/users-white.svg');  }
.btn-login { background-image:url('/img/svg/solid/sign-in-alt-white.svg'); }
.btn-login .icon { background-image:url('/img/svg/sign-in-alt-white.svg'); }
.btn-logout .icon { background-image:url('/img/assets/esco_white.svg'); }
.btn-sos .icon { background-image:url('/img/assets/sos_white.svg'); }
.btn-notification .icon { background-image:url('/img/assets/notifiche_white.svg'); }
.btn-user .icon { background-image:url('/img/assets/utente_white.svg'); }
.btn-download .icon { background-image:url('/img/svg/download.svg'); }
.btn-image .icon { background-image:url('/img/svg/image-white.svg'); }
.btn-edit .icon { background-image:url('/img/svg/edit-white.svg'); }
.btn-impostazioni .icon { background-image:url('/img/assets/settaggi_black.svg'); }
.btn-add .icon { background-image:url('/img/svg/plus-circle-white.svg'); }
.btn-video .icon { background-image:url('/img/svg/solid/play.svg'); }
.btn-installations .icon { background-image:url('/img/assets/lista_ambienti_white.svg'); }
.btn-check .icon { background-image:url('/img/svg/check.svg'); }
.btn-sos .icon { background-image:url('/img/assets/sos_black.svg'); }
.btn-save { background-color:#28a745; }
.btn-save .icon { background-image:url('/img/svg/save.svg'); }
.btn-save:hover { background-color:#fff; border:1px solid #28a745; color:#28a745; }
.btn-save:hover .icon { background-image:url('/img/svg/save-green.svg'); }
.btn-delete { background-color:#dc3545; }
.btn-delete .icon { background-image:url('/img/svg/trash-alt.svg'); }
.btn-delete:hover { background-color:#c82333; }
.btn-permission-add .icon { background-image:url('/img/svg/solid/plus-circle.svg'); }
.btn-permission-add-blue .icon { background-image:url('/img/svg/plus-circle-lightish-blue.svg');}
.btn-permission-edit .icon { background-image:url('/img/svg/edit.svg'); }
.btn-permission-edit-blue .icon { background-image:url('/img/svg/edit-lightish-blue.svg'); }
.btn-permission-delete-blue { background-image:url('/img/svg/trash-lightish-blue.svg'); }
.btn-permission-delete-blue .icon { background-image:url('/img/svg/trash-lightish-blue.svg'); }
.btn-close .icon { background-image:url('/img/svg/times.svg'); }

.btn-video { box-shadow:3px 3px 4px 2px #222; background-color:#1569E8; border:1px solid #fff; }

.btn-only-icon { background-color:transparent; position:relative;  }
.btn-only-icon .icon { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; }
.btn-only-icon:hover { border:1px solid #545dff; }
.btn-only-icon.btn-delete .icon { background-image:url('/img/svg/trash-black.svg'); }

.tooltip-custom { position: relative; display: inline-block; }
.tooltip-custom .tooltiptext-custom { visibility: hidden; width: 30rem; border: .5px solid #ddd; background-color: #eee; color: #000; text-align: left; border-radius: 8px; padding: 1rem; position: absolute; z-index: 1; }
.tooltip-custom:hover .tooltiptext-custom { visibility: visible; }
img.aiuto { cursor: help; width: 2rem; height: 2rem; /*margin-left: 2rem;*/ }

#nav-main { position:fixed; top:0; bottom:0; left:0; background-color:#263544; width:250px; z-index:1; overflow-y: auto; width: 260px; }
#nav-main { display: none; }
#nav-main > nav > ul { overflow-y:auto; }
#nav-main a:hover { text-decoration:none; }
#nav-main ul { list-style-type:none; margin-left:0; padding-left:0; }
#nav-main label { margin:0; }
#nav-main label:hover { cursor:pointer; }
#nav-main ul li { display:block; }
#nav-main > nav > ul > li > a { border-left:2px solid transparent; }
#nav-main > nav > ul > li.active > a { background-color:#1d2531; border-left:2px solid #42a5f5; }
#nav-main > nav >  ul > li.active > ul { background-color:#1d2531; }
#nav-main > nav >  ul > li:hover > a { background-color:#26314a; }
#nav-main > nav >  ul > li.active:hover > a { background-color:#26314a; }
#nav-main > nav >  ul > li > a { padding:1rem; font-size:1.3rem; line-height:125%; }
#nav-main > nav >  ul > li.active > ul > li.active > a { background-color:#191e2b; }
#nav-main a { display:block; color:#fff; }
#nav-main input[type="checkbox"] { display:none; }
#nav-main-handler ~ label { display:block; }
#nav-main ul ul { display:none;}
#nav-main ul input[type="checkbox"]:checked ~ ul { display:block; }
#nav-main > nav >  ul > li:not(.active) > input[type="checkbox"]:checked ~ a, #nav-main > nav >  ul > li:not(.active) > input[type="checkbox"]:checked ~ ul { border-left:2px solid #91c2ea; background-color:#1f2c40; }
#nav-main > nav >  ul > li:not(.active):hover > input[type="checkbox"]:checked ~ a, #nav-main > nav > ul > li:not(.active):hover > input[type="checkbox"]:checked ~ ul { background-color:#26314a; }
#nav-main ul li { position:relative; }
#nav-main ul label { position:absolute; top:0; right:0; bottom:0; left:0; }
#nav-main ul label abbr { position:absolute; right:0.5rem; top:1rem; width:1.5rem; height:1.5rem; display:block; background-image:url('/img/svg/chevron-right-white.svg'); background-repeat:no-repeat; background-size:auto 1.25rem; background-position:center; }
#nav-main ul input[type="checkbox"]:checked ~ label abbr { background-image:url('/img/svg/chevron-down-white.svg'); }
#nav-main ul ul li:hover a { background-color:#172335; color:#eee; }
#nav-main ul ul li a { padding:0.5rem 0.5rem 0.5rem 2rem; display:block; }

#nav-main-handler { display: none; }
#nav-main-handler-lb { position: fixed; transition: margin-left .4s; z-index: 1; margin-left: 0px; width: 50px; height: 50px; background-color: #263544; background-size: 20px 20px; }
#nav-main-handler-lb abbr { display: block; width: 50px; height: 50px; background-image: url('/img/svg/bars-white.svg'); background-repeat: no-repeat; background-size: 20px 23px; background-position: center center; }
#nav-main-handler:checked ~ #nav-main-handler-lb { transition: margin-left .4s; margin-left: 260px; width: 50px; height: 50px; background-color: #263544; background-size: 20px 23px; }
#nav-main-handler:checked ~ #nav-main-handler-lb abbr { display: block; width: 50px; height: 50px; background-image: url('/img/svg/times-circle-white.svg'); background-repeat: no-repeat; background-size: 20px 23px; background-position: center center; }

#nav-main ~ #header-main, #nav-main ~ main, #nav-main ~ footer { margin-left:250px; }

#header-main { box-shadow:0 2px 4px 0 rgba(43,43,43, 0.2); padding-top:1rem; padding-bottom:1rem; position:relative; }
#header-main h1 img { display:block; width:50px; }
#header-main h3 { font-size:1.2rem; text-align:center;; }
#header-main h1, #header-main h3 { margin-bottom:0; }
#header-main .grid { display:grid; grid-template-columns:50px 400px 1fr; align-items:center; grid-column-gap:1rem; }

#nav-secondary ul { list-style-type:none; margin-left:0; padding-left:0; display:grid; grid-template-columns:repeat(2, 150px); align-items:center; /*grid-column-gap:1rem;*/ grid-gap:0.5rem; justify-content:end; margin-bottom:0; }
#nav-secondary li a { font-size:0.8rem; width:100%;  letter-spacing:0.4px; }

main { padding:4rem; background-color:#fbfbfb; }
main > section { padding:3rem; background-color:#fff; border-radius:0.75rem; box-shadow:4px 0px 10px 6px #DDD; }

#lista-scenari .riquadro-on { margin-bottom:1rem; }

.carousel-item a { position:relative; display:block; }
.carousel-overlay { position:absolute; left:0; right:0; top:0; bottom:0; width:100%; background-color:rgba(155,155,155,0.5); }
.carousel-overlay h2 { position:absolute; top:25%; font-size:2rem; height:5rem; line-height:normal; color:#000; font-weight:bold; bottom:25%; text-align:center; width:50%; left:25%; right:25%; padding:1rem; background-color:rgba(255,255,255, 0.8); }

#login .container-login p { margin-top: 10px; }

#dashboard .grid { display:grid; grid-template-columns:repeat(3, 1fr); grid-column-gap:1.5rem; }
#dashboard ul.grid { margin-left:0; padding-left:0; list-style-type:none; }
#dashboard-home ul li { border-radius:0.5rem; }
#dashboard-home ul li a { display:block; padding:2rem; text-transform:uppercase; font-size:1.5rem; text-align:center; color:#fff; transition:background-color .4s, border .4s, color .4s; transition:color .4s; }
#dashboard-home ul li:hover { transition:background-color .4s, border .4s; }
#dashboard-home ul li:hover a { color:#000; transition:color .4s; text-decoration:none; }
#dashboard-home ul li:nth-child(1) { background-color:#286499; border:2px solid #000; }
#dashboard-home ul li:nth-child(2) { background-color:#2a756a; border:2px solid #000; }
#dashboard-home ul li:nth-child(3) { background-color:#65177b; border:2px solid #000; }
#dashboard-home ul li:nth-child(1):hover { background-color:#fff; border:2px solid #286499; }
#dashboard-home ul li:nth-child(2):hover { background-color:#fff; border:2px solid #2a756a; }
#dashboard-home ul li:nth-child(3):hover { background-color:#fff; border:2px solid #65177b; }

.dashboard-section { margin-top:3rem; }
.dashboard-section ul { list-style-type:none; margin-left:0; }
.dashboard-section h2 { margin-top: 1.5rem; margin-bottom: 1rem; }

#dashboard-ambienti ul li .grid { grid-template-columns:3rem 1fr; align-items:center; }
#dashboard-ambienti li img { height:3rem; max-height:none; width:auto; }
#dashboard-ambienti > ul > li { margin-bottom:2rem; padding:1rem; border:1px solid #444; border-radius:0.5rem; }
#dashboard-ambienti li a:hover { text-decoration:none; }
#dashboard-ambienti li h3, #dashboard-ambienti li p { margin-bottom:0; }
#dashboard-ambienti .partition-devices-number { margin-top:1rem; padding-left:0.5rem; padding-right:0.5rem; padding-top:0.5rem; border-top:1px dotted #444; }

#dashboard-scenari ul.grid { grid-template-columns:repeat(2, 1fr); align-items:center; }
#dashboard-scenari a:hover { text-decoration:none; }
#dashboard-scenari > ul > li { margin-bottom:2rem; padding:1rem; border:1px solid #444; border-radius:0.5rem; }
#dashboard-scenari li h3 { font-size:1.2rem; margin-bottom:0; }
#dashboard-scenari li img { width:1rem; max-height:none; }
#dashboard-scenari .scenario-details { grid-template-columns:repeat(3, 100px); margin-top:1rem; padding-left:0.5rem; padding-right:0.5rem; padding-top:0.5rem; border-top:1px dotted #444; align-items:center; grid-column-gap:0.1rem; }

.devices-list { list-style-type:none; margin-left:0; padding-left:0; display:grid; grid-template-columns:repeat(2, 1fr); }
.devices-list > li { margin-bottom:2rem; padding:1rem; border:1px solid #444; border-radius:0.5rem; }
.devices-list > li img { height:3rem; max-height:none; width:auto; }
.devices-list > li h3 { font-size:1.2rem; margin-bottom:0; }
.devices-list .grid.device-details { grid-template-columns:3rem 1fr; align-items:center; }
.devices-list .grid.parameters-list { grid-template-columns:repeat(2, 100px); margin-top:1rem; padding-left:0.5rem; padding-right:0.5rem; padding-top:0.5rem; border-top:1px dotted #444; grid-column-gap:0.1rem; align-items:end; margin-bottom:0.25rem; grid-column-gap:0.3rem; }
.devices-list a:hover { text-decoration:none; }

.grid.parameters-list { font-size:0.9rem; }

.parameters-list li { margin-bottom:0.25rem; }
.parameters-list img { height:1rem; width:auto; }
.parameters-list span { display:inline-block; vertical-align:middle; }
.parameters-list .icon { width:1.2rem; height:1.2rem; background-size:auto 1rem; background-position:center; background-repeat:no-repeat; }
.parameters-list .icon-colorrgb { width:1rem; height:1rem; margin-left:0.2rem; }
.parameters-list .icon-colorrgb + .value { display:none; }

.device-details img { height:3rem; width:auto; }

#profile form { text-align:center; }

.notification { padding:1rem; background-color:#d1ecf1; border:1px solid #bee5eb; border-radius:0.5rem; position:relative; margin-bottom:1rem; }
.notification-read { background-color:#e1e1e1; border:1px solid #999; opacity:0.5; }
.notification h4 { color:#444; font-size:1.1rem; margin-top:0; margin-bottom:0; }
.notification h3 { color:#222; font-size:1.5rem; margin-top:0.5rem; margin-bottom:0.5rem; line-height:normal; }
.notification p { font-size:1rem; color:#000; margin-top:0; margin-bottom:0; }

#notifications-popup-container { position:fixed; bottom:1rem; right:1rem; overflow:hidden; z-index:1; }
#notifications-popup-container .notification { width:20vw; }
#notifications-popup-container .notification input:focus ~ label { outline:1px dotted #444; }
#notifications-popup-container .notification label { position:absolute; right:1rem; top:1rem; width:1rem; height:1rem; background-image:url('/img/svg/times.svg'); background-size:auto 1rem; background-position:center; background-repeat:no-repeat; }
#notifications-popup-container .notification label:hover { cursor:pointer; }

#notifications-history .grid { display:grid; grid-template-columns:1fr 3rem; }
#notifications-history .notification { padding:0; }
#notifications-history .notification .grid-col { padding-top:1rem; padding-bottom:1rem; }
#notifications-history .notification .grid-col:nth-child(1) { padding-left:1rem; padding-right:1rem; border-top-left-radius:0.5rem; border-bottom-left-radius:0.5rem; }
#notifications-history .notification .grid-col:nth-child(2) { background-color:#fff; border-left:1px solid #bee5eb; border-top-right-radius:0.5rem; border-bottom-right-radius:0.5rem; position:relative; }
#notifications-history .notification-read .grid-col:nth-child(2) { border-left:1px solid #999; }
#notifications-history .notification .grid-col:nth-child(2) input { position:absolute; right:0; bottom:0; left:0; top:0; margin:auto; }
#notifications-history .buttons-container { text-align:right; }
#notifications-history .buttons-container button { background-color:#f9f9f9; border:1px solid #444; color:#000; border-radius:0.25rem; box-shadow:0 3px 4px 2px #999; }

#notifications-realtime-list ul { padding-left:0; list-style-type:none; }
#notifications-realtime-list .notification { width:100%; }
#notifications-realtime-list .notification input:focus ~ label { outline:1px dotted #444; }
#notifications-realtime-list .notification label { position:absolute; right:1rem; top:1rem; width:1rem; height:1rem; background-image:url('/img/svg/times.svg'); background-size:auto 1rem; background-position:center; background-repeat:no-repeat; }
#notifications-realtime-list .notification label:hover { cursor:pointer; }

#notifications-list li .btn-delete { border:0; border-radius:0; box-shadow:unset; float:right; }

#notifications-list-edit.grid { grid-template-columns:repeat(4, 1fr); grid-column-gap:1rem; align-items:center; }
#notifications-list-edit .notification-off { opacity:0.6; }
#notifications-list-edit li { background-color:#eee; border:1px solid #444; border-radius:0.5rem; transition:background-color .4s; margin-bottom:1rem; }
#notifications-list-edit li a { display:inline-block; vertical-align:middle; padding:0.5rem; color:#000; }
#notifications-list-edit li:hover { background-color:#fff; transition:background-color .4s; }
#notifications-list-edit li a:hover { text-decoration:none; color:#333; }
#notifications-list-edit li a:first-child { border-right:1px solid #444; }

#form-notifications .submits { margin-top:2rem; }
#form-notifications fieldset { margin-bottom:2rem; }

fieldset.notification-info .grid { grid-template-columns:repeat(3, 1fr); grid-column-gap:1rem; align-items:center; }
fieldset.notification-info label { display:block; margin-bottom:0; font-size:1rem; color:#000; }
fieldset.notification-info .field { position:relative; }
fieldset.notification-info input[type="text"] { border:1px solid #999; padding:0.25rem; color:#444; font-size:1.1rem; background-color:#fff; transition:border .4s, background-color .4s; height:1.5rem; width:100%; }
fieldset.notification-info input[type="text"]:hover { background-color:#f9f9f9; border:1px solid #555; transition:border .4s, background-color .4s; }
fieldset.notification-info input[type="text"]:focus { background-color:#ececec; border:1px solid #545DFF; transition:border .4s, background-color .4s; }
fieldset.notification-info .field-text label { font-size:0.9rem; }
fieldset.notification-info .field-active input[type="checkbox"] { display:none; }
fieldset.notification-info .field-active input[type="checkbox"] ~ label { background-image:url('/img/assets/disattivo.svg'); background-position:left center; background-repeat:no-repeat; background-size:auto 1.6rem; padding-left:2rem; transition:background .4s; }
fieldset.notification-info .field-active input[type="checkbox"] ~ label span.on { display:none; }
fieldset.notification-info .field-active input[type="checkbox"]:checked ~ label { background-image:url('/img/assets/attivo.svg'); transition:background .4s; }
fieldset.notification-info .field-active input[type="checkbox"]:checked ~ label span.on { display:inline-block; }
fieldset.notification-info .field-active input[type="checkbox"]:checked ~ label span.off { display:none; }
fieldset.notification-info .field-active input[type="checkbox"] ~ label:hover { cursor:pointer; }

.notification-condition { margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px dotted #444; }
.notification-condition .btn-delete { display:inline-block; vertical-align:middle; width:2rem; height:2rem; background-size:auto 1.2rem; background-repeat:no-repeat; background-position:center; border-radius:0.5rem; padding:0; margin-right:0.5rem; }
.notification-condition .btn-delete:hover { cursor:pointer; }
.notification-condition .field { display:inline-block; vertical-align:middle; margin-right:0.5rem; }
.notification-condition .field label { display:block; margin-bottom:0; }
.notification-condition .field.condition-value label.radio { display:inline-block; vertical-align:middle; margin-right:1rem; margin-top:1.5rem; }
.notification-condition .field.condition-value label.radio:last-of-type { margin-right:0; }
.notification-condition .field.condition-value label.radio input { width:auto; }

.notification-condition-add { margin-top:1rem; }

.permission-icon { font-size:0; background-color:transparent; background-repeat:no-repeat; background-size:auto 1.2rem; width:2rem; height:2rem; background-position:center; display: block; margin: 0 auto;  }
.permission-icon-view { background-image:url('/img/svg/eye-lightish-blue.svg'); }
.permission-icon-command { background-image:url('/img/svg/gamepad-lightish-blue.svg'); }
.permission-icon-manage { background-image:url('/img/svg/cogs-lightish-blue.svg'); }
.permission-icon-assign { background-image:url('/img/svg/user-lightish-blue.svg'); }

#permissions-manager-alternate .permission-icons { position:relative; display:inline-block; vertical-align:middle; }
#permissions-manager-alternate .permission-icons .permission-status { position:absolute; width:1rem; height:1rem; background-color:transparent; background-repeat:no-repeat; background-size:70%; background-position:center; bottom:5%; right:5%; background-color:#ddd; border:1px solid #000; border-radius:50%; z-index:1; }
#permissions-manager-alternate .permission-icons .permission-status.permission-active { background-image:url('/img/svg/check.svg'); }
#permissions-manager-alternate .permission-icons .permission-status.permission-inactive { background-image:url('/img/svg/times-red.svg'); }

#permissions-manager-alternate h1 { margin-bottom:2rem; }
#permissions-manager-alternate ul { list-style: none; }
#permissions-manager ul.grid { grid-template-columns:repeat(3, 1fr); grid-column-gap:1rem; }
#permissions-manager li a { display:block; padding:1rem; text-align:center; text-transform:uppercase; border:1px solid #444; border-radius:0.5rem; }

#permissions-manager-alternate form { margin-bottom:3rem; }
#permissions-manager-alternate .grid2 { grid-template-columns:repeat(3, 1fr); grid-column-gap:1rem; }
#permissions-manager-alternate .grid2 > li { background-color:#ddd; border:1px solid #444; border-radius:0.5rem; }
#permissions-manager-alternate .grid2 > li h4 { text-align:center; padding-top:0.5rem; }
#permissions-manager-alternate .grid2 > li .buttons { border-top:1px dotted #444; display:grid; grid-template-columns:repeat(2, 1fr); margin-top:0.5rem; }
#permissions-manager-alternate .buttons a { font-size:0; background-size:auto 1.5rem; padding:1rem; background-position:center; border-radius:0; display:block; margin:0; }
#permissions-manager-alternate .buttons a:first-child { border-bottom-left-radius:0.5rem; }
#permissions-manager-alternate .buttons a:last-child { border-bottom-right-radius:0.5rem; }

#permissions-manager-alternate .permissions-areas-list { padding-left: 0px; }
#permissions-manager-alternate .permissions-areas-list h3 { font-size:1.8rem; text-transform: uppercase; color:#1A1A4F; }
#permissions-manager-alternate .permissions-areas-list h4 { font-size:1.2rem; display: inline-block; margin:0 1rem 0 0; }

#permissions-manager-alternate .permissions-partitions-list { padding-left:1rem; margin-left:1rem; border-left:1px dashed #222; }
#permissions-manager-alternate .permissions-partitions-list li .btn-default { padding:0; border-radius:0; width:2rem; height:2rem; margin:0 0.5rem 0 0; border-radius:0.5rem; position:relative; }
#permissions-manager-alternate .permissions-partitions-list li .btn-default:hover { border:1px solid #333; background-color:transparent; }
#permissions-manager-alternate .permissions-partitions-list > li { margin-bottom:0.5rem; }
/* #permissions-manager-alternate .permissions-partitions-list li > ul li:nth-child(odd) { background-color:#e9e9e9; } */
#permissions-manager-alternate .permissions-partitions-list li > ul > li:nth-child(even) { background-color:#f0f0f0; }
#permissions-manager-alternate .permissions-partitions-list > li > ul > li { /*padding:0.5rem;*/ font-size:1.1rem; }

/* #permissions-manager-alternate .permissions-partitions-list > li > ul > li { border-left:1px dotted #888; } */

#permissions-manager-alternate .permissions-partitions-list > li > ul { padding-left:0.2rem; margin-left:1rem; border-left:1px dashed #666; margin-bottom:3rem; border-bottom:1px dashed #666; }

#permissions-manager-alternate .permissions-list > li { display:inline-block; vertical-align:middle; border:1px solid #444; border-right:0; padding:0.5rem; }
#permissions-manager-alternate .permissions-list > li:last-child { border-right:1px solid #444; }

#permissions-manager-alternate .permissions-endpoints-list { padding-left: 0px; }
#permissions-manager-alternate .permission-endpoint{ margin-left: 0.5rem; margin-right: 0.5rem; border: none; }

#permissions-manager-alternate .grid-permissions { grid-template-columns: 2rem auto; }
#permissions-manager-alternate .grid-permissions > ul { padding-left: 0; }
#permissions-manager-alternate .permissions-partitions-list li > ul > li > .grid-col > li { background-color: transparent; }

#permissions-manager-alternate .permissions-partitions-list .grid-per { display:grid; grid-template-columns:1fr 200px; align-items:center; border-bottom:1px dashed #666; /* border:1px solid #888; border-bottom:0; */ }
#permissions-manager-alternate .permissions-partitions-list .grid-per:last-child { border-bottom:0; }
/* #permissions-manager-alternate .permissions-partitions-list .grid-per:last-child { border-bottom:1px solid #888; } */

#permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col { padding:0.35rem; }
#permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col-dx { justify-self:right; padding: 0; }
#permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col-sx .grid { display:grid; grid-template-columns:repeat(1,1fr); align-items:center; }
/* #permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col-sx .grid { display:grid; grid-template-columns:0.3fr 0.7fr; align-items:center; } */

#permissions-manager-alternate ul li span { display: inline-block; vertical-align:middle; }
#permissions-manager-alternate .permission-icons:hover { cursor:help; }
#permissions-manager-alternate .permission-inactive + .permission-icon { opacity:0.4; }
/* #permissions-manager-alternate .permissions-list li { padding-left: 1rem; } */
/* #permissions-manager-alternate .permission-check { display:inline-block; width:1rem; height: 1rem; margin-left: 0.5rem; background-size:auto 1rem; padding:0.25rem; background-position:center;  background-repeat: no-repeat; background-image: url('/img/svg/check.svg'); } */
/* #permissions-manager-alternate .permission-uncheck { display:inline-block; width:1rem; height: 1rem; margin-left: 0.5rem; background-size:auto 1rem; padding:0.25rem; background-position:center; background-repeat: no-repeat; background-image: url('/img/svg/times-red.svg'); } */


#permissions-icon-legend { text-align:center; width:60%; margin-left:auto; margin-bottom: 1rem; }
#permissions-icon-legend h4 { display:block; margin:0; border:1px solid #888; border-bottom:0; background-color:#e9e9e9; padding:0.25rem; text-transform:uppercase; }
#permissions-icon-legend ul { padding-left:0; margin-bottom:0; display:grid; grid-template-columns:repeat(4, 1fr); }
#permissions-icon-legend li { border:1px solid #888; border-right:0; padding:0.25rem; }
#permissions-icon-legend li:last-child { border-right:1px solid #444; }
#permissions-icon-legend li .btn-default { background-size:auto 1.2rem; padding:0; background-position:center; border:0; display:inline-block; vertical-align:middle; width:2rem; height:2rem; margin:0; margin-right:0.25rem; }
#permissions-icon-legend li .btn-default:hover { background-color:transparent; cursor:default; }
/* #permissions-icon-legend img { height: 2rem; width: 2rem; background-size:auto 1.2rem; padding:0.25rem; background-position:center; background-repeat: no-repeat; border-radius:0; } */

.permissions-areas-list li div.grid { grid-template-columns: auto 1fr; column-gap: 2rem; }
.permissions-areas-list .buttons-container { /*text-align:right;*/ display: inline-block; }
.permissions-areas-list .buttons-container button { display: inline-block; text background-color:#f9f9f9; border:1px solid #444; color:#000; border-radius:0.25rem; box-shadow:0 3px 4px 2px #999; }


#page-installations h4 { margin-top:1rem; margin-bottom:2rem; }
#page-installations .list-installations { margin-left:0; padding-left:0; list-style-type:none; display:grid; grid-template-columns:repeat(3, 1fr); grid-column-gap:2rem; grid-row-gap:2rem; }
/* #page-installations .list-installations li a { padding:2rem; text-transform:uppercase; text-align:center; background-color:#545DFF; color:#fff; border:2px solid #545DFF; transition:transform .4s, color .4s, background-color .4s; display:block; border-radius:0.5rem; font-size:1.5rem; font-family:"rajdhanibold"; transform:scale(1.00); box-shadow:4px 4px 14px 2px #888; }
#page-installations .list-installations li a:hover { transform:scale(1.05); color:#545DFF; background-color:#fff; transition:transform .4s, color .4s, background-color .4s; text-decoration:none; } */
#page-installations .list-installations li a { border:2px solid #545DFF;  padding:2rem; text-transform:uppercase; color:#545DFF; background-color:#fff; text-align:center; transition:transform .4s, color .4s, background-color .4s; display:block; border-radius:0.5rem; font-size:1.5rem; font-family:"rajdhanibold"; transform:scale(1.00); box-shadow:4px 4px 14px 2px #888; }
#page-installations .list-installations li a:hover { transform:scale(1.05);  transition:transform .4s, color .4s, background-color .4s; text-decoration:none; background-color:#545DFF; color:#fff; }

.form-popup-errors { margin-top:2rem; margin-bottom:2rem; }
.popup-hidden { display:none; }
.popup-visible { display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; }
.popup-visible .form-popup-overlay { display:block; position:fixed; background-color:#0006; top:0; left:0; right:0; bottom:0; z-index:1000; cursor:pointer; }
.popup-visible .form-popup-container { position:absolute; width:50%; max-width:400px; background-color:#fff; border-radius:2rem; height:50vh; max-height:400px; overflow-y:auto; padding:3rem; margin:auto; z-index:1001; top:0; left:0; right:0; bottom:0; }
.popup-visible .help-popup-overlay { display:block; position:fixed; background-color:#0006; top:0; left:0; right:0; bottom:0; z-index:1000; cursor:pointer; }
.popup-visible .help-video-popup-overlay { display:block; position:fixed; background-color:#0006; top:0; left:0; right:0; bottom:0; z-index:1000; cursor:pointer; }
.popup-visible .help-video-popup-container { position:absolute; /*max-width:900px;*/ background-color:#fff; border-radius:2rem; /*height:50vh; max-height:600px;*/  overflow-y:auto; padding:3rem; margin:auto; z-index:1001; top:0; left:0; right:0; bottom:0; }
.popup-visible .help-video-popup-container div { text-align: center; }
.popup-visible .btn-close { position:absolute; top:0; left:0; border-radius:0; border-top-left-radius:2rem; padding:1rem 1.5rem; box-shadow:unset; background-color:#263544; /*background-color: #1a1a4f*/; border:1px solid #263544 /*#1a1a4f*/; border-bottom-right-radius:2rem; }
.popup-visible .btn-close .icon { background-image:url('/img/svg/times-circle-white.svg'); width:50px; height:50px; background-size:20px 23px; }

.help-video-popup.popup-visible { margin: auto; }
.popup-visible .help-popup-container { position:absolute; width:50%; max-width:30%; background-color:#eee; /*border-top-left-radius: 2rem; border-left: 1.5px solid #bbb;*/ overflow-y:auto; padding:3rem; margin:auto; z-index:1001; top:0; left:auto; right:0; bottom:0; transition: margin-right .4s; color: #fff; /*background-color: #1a1a4f;*/ background-color:#263544; }
.help-popup .popup-visible .btn-close { position:absolute; top:0; left:0; border-radius:0; /*border-top-left-radius:2rem; padding:1rem 1.5rem;*/ padding: 1.5rem; box-shadow:unset; background-color:#263544; /*background-color: #1a1a4f*/; border:1px solid #263544 /*#1a1a4f*/ ; /*border-bottom-right-radius:2rem;*/ }
.help-popup .popup-visible .btn-close .icon { background-image:url('/img/svg/times-circle-white.svg'); width:50px; height:50px; background-size:20px 23px; }
.help-popup-guide > .help-button { position: absolute; top: 0; bottom: auto; right: 0; left: auto; max-width: 70px; text-align: right; }
.help-popup-video > .help-video-button { position: absolute; top: 60px; bottom: auto; right: 0; left: auto; }
.popup-visible .help-button, .popup-visible h1 { display: inline-block; }
.popup-visible .help-button img.aiuto { /*margin-left: 10px;*/ vertical-align: text-bottom; height: 1rem; width: 1rem; }
.popup-visible .help-video-button img.aiuto { /*margin-left: 10px;*/ vertical-align: text-bottom; height: 1rem; width: 1rem; }
.help-permissions ul { padding-left: 0; }
.help-permissions ul li { padding-bottom: .5rem; }
.help-permissions img { height: 1rem; width: 1rem; vertical-align: text-bottom; margin-right: .5rem;}

/* video::cue { color: black; } */
video::cue { background-color: rgba(255,255,255,0.8);  color: #000; line: 15; }

footer { padding:2rem; text-align:center; background-color:#545DFF; color:#FFF; box-shadow:0 -2px 4px 0 rgba(43,43,43, 0.4); position:relative; }
footer a { color:#FFF; text-decoration:none; }
footer a:hover { text-decoration:none; color:#ddd; }


@media only screen and (max-width:767px) {
    .devices-list { grid-template-columns:repeat(1, 1fr); grid-column-gap:1rem; }
    .list-installations { grid-template-columns:repeat(2, 1fr); grid-column-gap:1rem; grid-row-gap:1rem; }
    .devices-list .grid.parameters-list { grid-template-columns:repeat(1, 1fr); }
    #header-main .grid { grid-template-columns: 50px 200px 1fr; }
    #nav-secondary ul { grid-template-columns: repeat(2,50px); grid-column-gap: 0.5rem; }
    #nav-secondary ul .label { display: none; }
    #page-installations .list-installations { grid-template-columns: repeat(2, 1fr); }
    #permissions-icon-legend { width: 100%; }
    .popup-visible .help-popup-container { width:60%; max-width:75%; }


}

@media only screen and (max-width:600px) {
    #header-main h1 { display: none; }
    #header-main .grid { grid-template-columns: repeat(1, 1fr); row-gap: 0.4rem; }
    #header-main h3 {/*font-size: 0.8rem;*/ text-align: center; }
    #nav-secondary { margin: 0 auto; }
    #nav-secondary ul { grid-template-columns: repeat(4,50px); grid-column-gap: 1.2rem; justify-content: left; }
    #nav-secondary ul .label { display: none; }
    #page-installations .list-installations { grid-template-columns:repeat(1, 1fr); grid-column-gap:1rem; grid-row-gap:1rem; }
    #permissions-icon-legend ul { grid-template-columns: repeat(1,1fr) }
    #permissions-icon-legend ul li:nth-child(odd) { border-top:0; border-bottom: 0; }
    #permissions-icon-legend ul li { border-right: 1px solid #888; }
    #permissions-icon-legend ul li:first-child, #permissions-icon-legend ul li:last-child { border-top: 1px solid #888; }
    #permissions-icon-legend .permission-icon { display: inline-block !important; padding-right: 0.5rem;  }
    #permissions-manager ul.grid { grid-template-columns: repeat(1,1fr); row-gap: 0.2rem; }
    #permissions-manager li a { padding: 0.2rem; }
    #permissions-manager-alternate .permissions-partitions-list .grid-per { grid-template-columns: repeat(1,1fr); }
    #permissions-manager-alternate h1 { font-size: 2rem; }
    #permissions-manager-alternate .permissions-areas-list h3 { font-size:1.5rem; }
    #permissions-manager-alternate input.btn-default { display: block; margin-top:0.8rem; }
    .popup-visible .help-popup-container { width:75%; max-width:75%; }
}

@media only screen and (min-width:768px) {
    #header-main .grid { grid-template-columns: repeat(2,1fr); }
    .btn-before { left:0; }
    .btn-after { right:0; }
    #circle-controller { width:500px; height:500px; }
    #controller-inner { width:240px; height:240px; }
    #header-main .grid { grid-template-columns: 50px 200px 1fr;  }
    /* #nav-secondary ul { grid-template-columns: repeat(4,1fr); } */
    .devices-list { grid-row-gap: 2rem; }
    .devices-list > li { margin-bottom: 0; }
    #page-installations .list-installations { grid-template-columns:repeat(2, 1fr); grid-column-gap:1rem; grid-row-gap:1rem; }
    #notifications-list { grid-template-columns:repeat(2, 1fr); grid-column-gap:1rem; }
    #permissions-icon-legend { width: 100%; }
    #permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col-sx .grid { grid-template-columns: 0.3fr 0.7fr; }
    #nav-main-handler:checked ~ #permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col-sx .grid { grid-template-columns: repeat(1,1fr); }
}

@media only screen and (min-width:768px) and (max-width:991.98px) {
    #nav-secondary { text-align:right; margin-top:1rem; }
    #nav-secondary li { margin-right:1rem; }
    .devices-list { grid-template-columns:repeat(1, 1fr); grid-column-gap:1rem; grid-row-gap:2rem; }
    .devices-list .grid.parameters-list { grid-template-columns:repeat(2, 1fr); }
    .devices-list > li { margin-bottom: 0; }
    #nav-secondary ul { grid-template-columns: repeat(4,50px); grid-column-gap:0.5rem; }
    #nav-secondary ul li { margin-right:0; }
    #nav-secondary ul .label { display: none; }
    #permissions-icon-legend { width: 80%; }
    .popup-visible .help-popup-container { width:60%; max-width:75%; }
}


@media only screen and (min-width:992px) {
    #header-main .grid { grid-template-columns: 50px 400px 1fr;  }
    .devices-list { grid-template-columns:repeat(1, 1fr); grid-column-gap:1rem; grid-row-gap:2rem; }
    .devices-list .grid.parameters-list { grid-template-columns:repeat(3, 1fr); }
    #page-installations .list-installations { grid-template-columns:repeat(3, 1fr); grid-column-gap:1rem; grid-row-gap:1rem; }
    #notifications-list { grid-template-columns:repeat(3, 1fr); }
    #nav-main-handler:checked ~ #permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col-sx .grid { grid-template-columns: repeat(1,1fr); }
}

@media only screen and (max-width:991.98px) {
    main { padding: 2rem; }
    main > section { padding: 1rem; }
    #header-main { text-align: center; }
    /* #nav-main { display: none; } */
    #nav-main-handler-lb { position: fixed; transition: margin-left .4s; z-index: 1; margin-left: 0px; width: 50px; height: 50px; background-color: #263544; background-size: 20px 20px; }
    #nav-main-handler-lb abbr { display: block; width: 50px; height: 50px; background-image: url('/img/svg/bars-white.svg'); background-repeat: no-repeat; background-size: 20px 23px; background-position: center center; }
    #nav-main-handler:checked ~ #nav-main { display: block; }
    #nav-main-handler:checked ~ #nav-main-handler-lb { transition: margin-left .4s; margin-left: 260px; width: 50px; height: 50px; background-color: #263544; background-size: 20px 23px; }
    #nav-main-handler:checked ~ #nav-main-handler-lb abbr { display: block; width: 50px; height: 50px; background-image: url('/img/svg/times-circle-white.svg'); background-repeat: no-repeat; background-size: 20px 23px; background-position: center center; }
    #nav-main-handler:checked ~ #nav-main ~ #header-main { margin-left: 0; }
    #nav-main-handler:checked ~ #nav-main ~ main { margin-left: 0; }
    #nav-main-handler:checked ~ #nav-main ~ footer { margin-left: 0; }
    #nav-main ~ #header-main, #nav-main ~ main, #nav-main ~ footer { margin-left: 0px; }
    #nav-main-handler:checked ~ #page-installations .list-installations { grid-template-columns: repeat(2, 1fr); }
    #permissions-icon-legend h4 { font-size: 1.2rem; }
    #permissions-icon-legend li { font-size: 0.8rem; }
    #permissions-icon-legend .permission-icon { background-size: auto 1rem; width: 1.5rem; height: 1.5rem; display: block; margin: 0 auto; }
    #permissions-manager-alternate .permissions-partitions-list > li > .aperto ~ ul { padding-left:0.2rem; margin-left:1rem; border-left:1px dashed #666; margin-bottom:3rem; border-bottom:1px dashed #666; }
    #permissions-manager-alternate .permissions-partitions-list > li > .chiuso ~ ul { display: none; }
    /* #permissions-manager-alternate ul li ul li h3 { display: inline-block; } */
    /* #permissions-manager-alternate ul li ul li h3 abbr { margin-right:.5rem; display: inline-block; width: 1.2rem; height: 1.2rem; background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; background-image:url('/img/svg/solid/plus-circle.svg'); } */
    #permissions-manager-alternate .permissions-areas-list h3 { position: relative; display: inline-block; padding-left:1.5rem; }
    #permissions-manager-alternate .permissions-areas-list h3:hover { cursor:pointer; }
    #permissions-manager-alternate .permissions-areas-list abbr:hover { cursor:help; }
    #permissions-manager-alternate ul li ul li h3.chiuso abbr { position: absolute; margin:auto 0; top:0; bottom: 0; left:0; right:0; width: 1.2rem; height: 1.2rem; background-repeat: no-repeat; background-size: .8rem .8rem; background-position: center center; background-image:url('/img/svg/solid/plus.svg'); }
    #permissions-manager-alternate ul li ul li h3.aperto abbr { position: absolute; margin:auto 0; top:0; bottom: 0; left:0; right:0; width: 1.2rem; height: 1.2rem; background-repeat: no-repeat; background-size: .8rem .8rem; background-position: center center; background-image:url('/img/svg/solid/minus.svg'); }
    #permissions-manager-alternate .permissions-partitions-list { padding-left: 0; margin-left: 0; border-left:0; }
}

@media only screen and (min-width:992px) {
    main > section { padding: 3rem; }
    #nav-main { display: block; }
    #nav-main-handler-lb { position: fixed; transition: margin-left .4s; z-index: 1; margin-left: 0; width: 50px; height: 50px; background-color: #263544; background-size: 20px 20px; }
    #nav-main-handler-lb abbr { display: block; width: 50px; height: 50px; background-image: url('/img/svg/bars-white.svg'); background-repeat: no-repeat; background-size: 20px 23px; background-position: center center; }
    #nav-main-handler:checked ~ #nav-main-handler-lb { transition: margin-left .4s; margin-left: 260px; width: 50px; height: 50px; background-color: #263544; background-size: 20px 23px; }
    #nav-main-handler:checked ~ #nav-main-handler-lb abbr { display: block; width: 50px; height: 50px; background-image: url('/img/svg/times-circle-white.svg'); background-repeat: no-repeat; background-size: 20px 23px; background-position: center center; }
    #nav-main-handler:checked ~ #nav-main { display: block; }
    #nav-main ~ #header-main { margin-left: 0; }
    #nav-main-handler:checked ~ #nav-main ~ #header-main { margin-left: 260px; }
    #nav-main ~ main { margin-left: 0; }
    #nav-main-handler:checked ~ #nav-main ~ main { margin-left: 260px; }
    #nav-main ~ footer { margin-left: 0; }
    #nav-main-handler:checked ~ #nav-main ~ footer { margin-left: 260px; }
    #nav-main-handler:checked ~ #header-main .grid { grid-template-columns: 50px 200px 1fr; }
    #permissions-icon-legend { width: 80%; }
    #permissions-icon-legend h4 { font-size: 1.4rem; }
    #permissions-icon-legend li { font-size: 0.8rem; }
    #permissions-icon-legend .permission-icon { background-size: auto 1rem; width: 1.6rem; height: 1.6rem; display: block; margin: 0 auto; }
    #permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col-sx .grid { grid-template-columns: 0.3fr 0.7fr; }
    #nav-main-handler:checked ~ main ~ #permissions-manager-alternate .permissions-partitions-list .grid-per .grid-col-sx .grid { grid-template-columns: repeat(1,1fr); }
    .popup-visible .help-popup-container { width:50%; max-width:70%; }

}

@media only screen and (min-width:1200px) {
    .devices-list { grid-template-columns:repeat(2, 1fr); grid-column-gap:0.5rem; }
    /* .devices-list .grid.parameters-list { grid-template-columns:repeat(3, 1fr); } */
    .devices-list .grid.parameters-list { grid-template-columns:repeat(2, 1fr); }
    #nav-main-handler:checked ~ #header-main .grid { grid-template-columns: 50px 300px 1fr; }
    #nav-main-handler:checked ~ #page-installations .list-installations { grid-template-columns: repeat(3, 1fr); }
    #permissions-icon-legend { width: 75%; }
    #permissions-icon-legend h4 { font-size: 1.5rem; }
    #permissions-icon-legend li { font-size: 0.9rem; }
    #permissions-icon-legend .permission-icon { background-size: auto 1rem; width: 1.8rem; height: 1.8rem; }
    #permissions-icon-legend .permission-icon { display: inline-block; }
    .popup-visible .help-popup-container { width:45%; max-width:40%; }

}

@media only screen and (min-width:1600px) {
    .devices-list { grid-template-columns:repeat(3, 1fr); }
    #nav-secondary ul { grid-template-columns: repeat(4, 1fr); }
    #nav-main-handler:checked ~ #header-main .grid { grid-template-columns: 50px 400px 1fr; }
    #permissions-icon-legend { width: 60%; }
    #permissions-icon-legend h4 { font-size: 1.8rem; }
    #permissions-icon-legend li { font-size: 1.2rem; }
    #permissions-icon-legend .permission-icon { background-size: auto 1.2rem; width: 2rem; height: 2rem; }
    .popup-visible .help-popup-container { width:40%; max-width:30%;}
}

@media only screen and (max-width:1599px) {
    #nev-secondary ul li { margin-bottom: 0.5rem; }
}