/*   
Theme Name: Smalt Moble
Author: Fahd Idaghdour
Author URI: http://fahdos.com
Version: 1.0
*/


/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url(fonts/poppins300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/poppins400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url(fonts/poppins600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url(fonts/poppins700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   Reset 2020 ^^
   ========================================================================== */

*,*::before,*::after {box-sizing: border-box; outline: none;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin: 0;}
ul, ol{list-style: none; padding: 0;}
html {scroll-behavior: smooth; width: 100%; height: 100%;}
body {text-rendering: optimizeSpeed;line-height: 1.5; min-width: 100vw; height: 100%;}
a:not([class]) {text-decoration-skip-ink: auto;}
img,picture {max-width: 100%;display: block;}
input,button,textarea,select {font: inherit;}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}

button {border: none; background: transparent; padding: 0; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
button:hover, button:focus {transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); cursor: pointer;}

p {font-weight: 400;}
textarea:focus, input:focus {outline: none;}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
@keyframes float {
   0% {transform: translatey(0px);}
   50% {transform: translatey(-20px);}
   100% {transform: translatey(0px);}
}

hr {border: 0; border-top: 1px solid #ddd; width: 50px; margin: 20px auto;}

/* ==========================================================================
   General
   ========================================================================== */
body {font-family: 'Poppins', sans-serif; font-size: 14px; color: #909898; line-height: 1.3; background: #F7F7F7;}
body.noscroll {overflow-y: hidden;}
.row {width: 100%; max-width: 1200px; margin: 0 auto;}
.container {padding: 30px 15px 100px 15px;}


.splash {width: 100vw; height: 100vh; background-color: #0DB4A4; display: flex; justify-content: center; align-items: center;}
.splash img {display: block; width: 60px; height: auto; animation: float 6s ease-in-out infinite;}


.login {position: relative; width: 100vw; height: 100vh; min-height: 660px; padding-top: 80px; background-color: #0DB4A4; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.login * {position: relative; z-index: 1;}
.login:before {content: ""; position: absolute; top: 0; width: 100%; height: 100%; background: url('img/mini-white.svg') center center no-repeat;
background-size: 100vh; z-index: 0; opacity: 0.1;}
.login img.floating {display: block; width: 60px; height: auto; animation: float 6s ease-in-out infinite;}
.logindown {position: relative; z-index: 2; border-radius: 30px 30px 0 0; background: #FEFEFE; min-height: 100px; width: 100%; display: flex; 
   flex-direction: column; justify-content: space-around; align-items: center; padding: 30px 0 30px 0;
-webkit-box-shadow: 0px 0px 28px 10px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 0px 28px 10px rgba(0,0,0,0.20);
box-shadow: 0px 0px 28px 10px rgba(0,0,0,0.20);}
.logindown img { width: 35px; opacity: .20; }
.logindown button {border-radius: 30px; padding: 12px; border: none; background: #fff; 
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}
.logindown button:hover, .logindown button:focus {background-color: #0db4a4;}
.logindown button:hover img, .logindown button:focus img {filter: invert(1); opacity: 1; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.logindown p {margin-bottom: 25px;}

.login form h1 { color: #fff; margin-bottom: 10px; opacity: 0.9; font-weight: 600; text-shadow: 1px 1px 3px rgba(0,0,0,0.13); }
.login form p {color: #fff; font-weight: 300; font-size: 13px; max-width: 60vw; margin-bottom: 20px;}
.login fieldset { font-size: 16px; border: 1px solid #fff; padding: 0 0 0 40px; border-radius: 12px; overflow: hidden; background-color: #FEFEFE;
opacity: 0.3; background-size: 16px; background-position: 12px center; background-repeat: no-repeat;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}
.login fieldset.user {background-image: url(img/icons/user.svg); margin-bottom: 20px;}
.login fieldset.password {background-image: url(img/icons/password.svg); margin-bottom: 10px;}
.login form small {color: #00453e; float: right; opacity: .8; margin-bottom: 20px; font-weight: 500;}
.login fieldset input {border: none; background: transparent; padding: 8px 8px 8px 0; width: 60vw;}
.login input.btn { width: 100%; height: 50px; border-radius: 12px; border: none; border:2px solid #fff; background: #fff; font-weight: 500; padding: 15px; color: #0DB4A4; text-transform: uppercase;
transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.login input.btn:hover, .login input.btn:focus {cursor: pointer; background: transparent; color: #fff; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}


.loginqr {position: relative; widows: 100vw; height: 100vh; min-height: 660px;}
.cameraview {position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background-image: url('img/scanner.png'); background-position: center center; background-repeat: no-repeat; background-size: cover;}
.loginqr .logindown {position: absolute; bottom: 0;}

.menu {width: 100%; min-height: 60px; padding: 15px 20px 25px 20px; border-radius: 20px 20px 0 0; position: fixed; left: 0; bottom: 0; background: #FEFEFE;
display: flex; justify-content: space-around; z-index: 100;
-webkit-box-shadow: 0px 0px 28px 10px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 0px 28px 10px rgba(0,0,0,0.20);
box-shadow: 0px 0px 28px 10px rgba(0,0,0,0.20);}

.menu button {width: 40px; height: 40px; border-radius: 40px; display: flex; justify-content: center; align-items: center; position: relative;}
.menu button img {opacity: 0.2; width: 24px;}
.menu button.current, .menu button:hover, .menu button:focus {background: #0db4a4; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.menu button.current img, .menu button:hover img, .menu button:focus img {filter: invert(1); opacity: 1; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}



.header {display:flex;justify-content: space-between; align-items: center; margin-bottom: 30px; position: relative;}
.header .welcome {display: flex; flex-grow: 2; align-items: center;}
.header .welcome .avatar {width: 30px; height:  30px; border-radius: 20px; margin-right: 10px;}
.header h1 {font-weight: 400; font-size: 18px;}
.header .welcome h1 b { font-weight: 600; color: #0DB4A4; }
.header button {border: none; position: relative; background: transparent; }
.header button img {width: 24px; opacity: 0.5;}
.header button span {position: absolute; top: 7px; right: 9px; background: #ff0000; width: 8px; height: 8px; border: 2px solid #f7f7f7; border-radius: 4px; }

.notification {background: rgba(255,255,255,.1) !important;border-radius: 100%;height: 40px;width: 40px;display: flex;
justify-content: center; align-items: center;}
.header button.back img {opacity: .8;}


.miniweather {display: flex; justify-content: space-around; align-items: center; margin-bottom: 30px;}
.miniweather span {font-weight: 300; opacity: .3;}
.miniweather .mini-item {display: flex ; flex-direction: column; align-items: center;}
.miniweather .mini-item span {opacity: .8; font-size: 12px;}
.miniweather img {width: 30px;}
.miniweather h2 {color: #000; font-weight: 500;}

.miniconsumption {display: flex; flex-direction: column; margin-bottom: 30px; background-color: #fafafa; min-height: 120px; border-radius: 20px; padding: 20px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}
.miniconsumption h2 {color:#000; opacity: 0.85; font-weight: 600; font-size: 15px; margin-bottom: 20px;}
.consoslider {background-color: #efefef; height: 40px; border-radius: 12px; width: 100%;}
.consoslider .progress {position: relative; height:  100%; min-width: 60px !important; display: inline-flex ; color:  #fff; background:#ff7c00 ; 
   border-radius: 12px;align-items: center; padding: 10px 20px 10px 10px;}
.consoslider .progress:after {content: "|" ; position: absolute; right: 8px; font-weight: 500; opacity: .8;}

.espaces {}
.espaces .item {display: flex; flex-direction: column; margin-bottom: 15px; background-color: #fafafa; min-height: 120px; border-radius: 20px; padding: 10px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}
.espaces .item header {position: relative; border-radius: 10px; overflow: hidden;}
.espaces .item header:before {content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.6;
   background: rgb(0,0,0);
   background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);}
.espaces .item img {border-radius: 10px; object-fit: cover; width: 100%; aspect-ratio : 2/1;}
.espaces .item h2 {position: absolute; left: 12px; bottom: 10px; color: #fff; font-weight: 500; text-shadow: 1px 1px 3px rgba(0,0,0,0.13); z-index: 2;}
.espaces .item .more {margin-top: 10px; display: flex; justify-content: space-between; padding: 0 5px; font-size: 13px; color: #888;}
.espaces .item .more span:nth-child(2) {font-weight: 500; color: #077f74;}


.miniblocs {display: grid;grid-gap: 15px; grid-template-columns: 1fr 1fr; padding-bottom: 15px;}
.espaces.miniblocs .item  {margin: 0; min-height:100px; }
.espaces.miniblocs .item h2 {left: 5px; bottom: 4px; font-size: 14px;}
.espaces.miniblocs .item .more {justify-content: center;}


.greentop {position: relative; color: #fff; overflow: hidden; max-width: 100vw;}
.greentop:before {content: ''; border-radius: 50%; z-index: -1; position: absolute; left: -50vw; top: -30vw; width: 200vw; height: 100vw; background-color: #0DB4A4;}
.greentop .header .welcome h1 b {color: #000; font-weight: 500; }
.greentop .header button img {filter: invert(1);}
.greentop .header button span {border-color: #0DB4A4 ; background: #fff;}
.greentop .miniweather img {filter: invert(1); opacity: 0.8;}
.greentop .miniweather h2 {color: #fff;}

.greentop.short:before {top: -70vw;}

.greentop.short .header {margin-bottom: 80px;}
.carte {  height: calc(100vh - 270px); background-color: #fafafa; min-height: 120px; border-radius: 20px; padding: 5px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}

.fullgreen {background-color: #0DB4A4; min-height:100%; padding-bottom:120px; display:flex; flex-direction: column; justify-content: space-between }
.fullgreen .header { margin-bottom:60px; }
.fullgreen .header h1 {color: #fff; text-align:center; }
.fullgreen .header h1 span {color: rgba(255,255,255,.7) ; display: block; font-size: 15px; margin-top: 5px;}
.fullgreen .header button img {filter: invert(1);}
.fullgreen .header button span {border-color: #0DB4A4 ; background: #fff;}
.fullgreen .miniweather img {filter: invert(1); opacity: 0.8;}
.fullgreen .miniweather h2 {color: #fff;}
.fullgreen .miniweather span {color: #fff;}


.space-preview { position: relative; margin-bottom: 15px; background-color: #fafafa; min-height: 120px; border-radius: 20px; padding: 10px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}
.space-preview img {border-radius: 10px; object-fit: cover; width: 100%; aspect-ratio : 2/1;}
.space-preview:after {content: ""; position: absolute; top: 0; left: 0; width: 100%;}
.space-preview h2 {position: absolute; top: 15px; left: 15px; font-weight: 500; font-size: 16px; line-height: 1; background: rgba(0,0,0,0.5); padding: 10px;  border-radius: 10px;}

.devices {display: grid;grid-gap: 20px; grid-template-columns: 1fr 1fr; color: #000; font-weight: 500; font-size: 14px; margin-bottom: 20px;}
.devices.long {grid-template-columns: 1fr;}

.device {background-color: #fff; border-radius: 20px; display: flex; justify-content: space-between; flex-direction: column; padding: 15px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}
.device img {display: block; width: 100%; height: auto; max-width: 40px; max-height: 40px; opacity: 0.2;}
.device .top {display: flex; justify-content: space-between; margin-bottom: 20px;}
.device h2 {font-weight: 500; font-size: 14px;}
.device span {font-size: 11px; color: #077f74;}
.device .switch button {border-radius: 40px; width: 40px; height: 40px; display: flex; justify-content: center;align-items: center; background: #f2f2f2;}
.device .switch button img { width: 20px; opacity: 0.2; }

.device.selected {background: #0db4a4;}
.device.selected img { filter: invert(1); opacity: .8; }
.device.selected h2 {color: #fff; font-weight: 300;}
.device.selected span {color: #fff; opacity: 0.8; }
.device.selected .switch button {background: rgba(  0, 0, 0, 0.2);}
.device.selected .switch button img {opacity: 0.7;}


.moreoptions {display: grid;grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr;}
.moreoptions .op {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.moreoptions .op button { display:flex; justify-content:center; align-items:center; margin-bottom: 10px; width:50px; height: 50px; background-color: rgba(255,255,255,0.2); border-radius:25px; }
.moreoptions .op button img {width: 26px; filter: invert(1); opacity: .5; }
.moreoptions .op button.selected {background-color: rgba(255, 255, 255,0.8);}
.moreoptions .op button.selected  img {filter: invert(0); opacity: 1}
.moreoptions .op span {color: #fff; opacity: 0.7; font-weight: 300;}


.switch input[type=checkbox] {  height: 0;  width: 0;  visibility: hidden;  display: none;}
.switch label { text-indent: -9999px;  width: 55px;  height: 30px;  background: #e9e9e9;  display: block;  border-radius: 100px;  position: relative;}
.switch label:after {  content: "";  position: absolute;  top: 5px;  left: 5px;  width: 20px;  height: 20px; background: #fff;border-radius: 16px;  transition: 0.3s;}
.switch input:checked + label {background: #0DB4A4;}
.switch input:checked + label:after {left: calc(100% - 5px);transform: translateX(-100%);}
.switch label:active:after {width: 50px;}

.device.selected .switch label {background: #0b9b8c;}

.controls, .listesalles { margin-bottom:30px; }
.controls h1, .listesalles h1  {color: #fff; opacity: 0.8; font-weight: 400; font-size: 18px; margin-bottom: 20px; text-align: center;} 
.greentop .controls h1, .greentop .listesalles h1 {color: #0db4a4; }

.controls {display: flex; flex-direction: column;}
.controls .item {background-color: #fff; border-radius: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; padding: 20px 15px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}
.controls .item h2 {font-weight: 600; font-size: 14px; color: #0db4a4;}
.controls .item div {font-weight: 450; font-size: 14px; color: #0db4a4;}
.controls .controlgrp {display: flex; align-items: center;}
.controls .controlgrp img {width: 24px; opacity: 0.2; margin-right:10px; }

.controls .decrease__btn, .controls .increase__btn {background-color: #eee; color: #999; font-weight: 500; width: 40px; height: 30px; border-radius: 5px;}
.controls .decrease__btn:hover, .controls .increase__btn:hover {background: #0DB4A4; color:#fff; }
.controls .decrease__btn {margin-right: 5px;}
.controls .increase__btn {margin-left: 5px;}
.controls .counter .countvalue { font-weight: 400; color: #000; min-width: 38px; display: inline-block; text-align: center;}
.controls .rideaucontrols {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.controls .ridgrp {display: flex; flex-direction: column; align-items: center; margin: 40px 0;}
.controls .ridgrp button { display:flex; justify-content:center; align-items:center; margin: 10px 0; width:60px; height:60px; border-radius:15px; 
    background:#fff; -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12); }
.controls .ridgrp button img {width: 40px; opacity: 0.2;}
.controls .ridgrp button:focus {background: rgba(0, 0, 0, .2);}
.controls .ridgrp span {color: #fff; font-weight: 400; text-transform: uppercase; opacity: 0.8}
.updown {display: flex; flex-direction: row; gap: 15px;}
.updown button {background-color: #eee; color: #999; font-weight: 500; width: 40px; height: 30px; border-radius: 5px;
display: flex; justify-content: center; align-items: center;}
.updown button img {width: 15px;}
.updown button:hover, .updown button:focus {background: #0db4a4; color: #fff;}
.updown button:hover img, .updown button:focus img {filter: invert(1); opacity: 1;}
.controls h1.green {color: #0db4a4;}
.controls .inputtime input {border: 1px solid #ccc; padding: 5px; border-radius: 5px; color: #666}
.controls .control-save {background: #0db4a4; color: #fff; padding: 10px; border-radius:5px; width:150px; align-self: flex-end;  }



.device .updown button { height:40px; }
.device.selected .updown button img {filter: initial;}

.controls .iconrange {display: flex;}
.controls .iconrange input.normalrange{flex-grow: 2; margin: 0 20px;-webkit-appearance:none;height:5px;border-radius:5px;background-color:#e9e9e9;outline:none;}
.controls .iconrange input.normalrange::-webkit-slider-thumb{-webkit-appearance:none; width:30px;height:30px;border-radius:50%;background-color:#0DB4A4;}
.controls .iconrange img {width: 24px; opacity: 0.2}


.allsalles {display: grid;grid-gap: 15px; grid-template-columns: 1fr 1fr 1fr;}
.allsalles .salle {}
.allsalles .salle a {color: #000000; background-color: #fff; border-radius: 10px;  display: flex; justify-content: center; 
   align-items: center; padding: 20px 15px; text-decoration: none; position: relative; 
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}
.allsalles .salle h2 { font-size: 14px; font-weight: 600;}
.allsalles .salle span {width: 15px; height: 15px; border-radius: 15px; border: 3px solid #fff; background: #60d43e; position:   absolute ; top: 5px; right: 5px;}
.allsalles .salle span.disponible {background: #fa9c9c;}
.allsalles .salle a:hover, .allsalles .salle a:focus {background: #0db4a4; color:   #fff;   }


.modepopup {width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 25px 25px 80px 25px; opacity: 0;
position: fixed;bottom: -100vh; left: 0; z-index: 2;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.modepopup h1 {font-size: 16px; font-weight: 600; color: #555; padding-bottom: 15px; border-bottom: 1px solid #eee;}
.modepopup .item {box-shadow: none; padding: 15px 0; border-bottom: 1px solid #eee; border-radius: 0; margin-bottom: 0;}
.modepopup.show {bottom: 0; opacity: 1; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.blur {filter: blur(8px); transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.closemode, .closeplanning, .closeplanpop {background: #eee; display: flex; padding: 10px; border-radius: 50%; position:absolute; top: -20px; right: 20px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);}
.closemode img, .closeplanning img, .closeplanpop img {width: 24px;}
.closeplanpop {right: -5px; background: #ddd;}


.planningpopup {width: 100%; max-height: calc(100vh - 30px); position: fixed; z-index: 200; bottom: -100vh; opacity: 0; left: 0; 
padding: 30px 15px 40px 10px; background: #fff; border-radius: 20px 20px 0 0;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);
}
.planningpopup.show {bottom: 0; opacity: 1; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.planningpopup .planning {box-shadow: none; padding: 0;}
.planningpopup  .planning .r-flex .r-bloc {padding: 0 0 2px 0px;}
.planningpopup .r-bloc span {text-transform: uppercase; font-size: 10px; font-weight: 600; color: #222; padding: 2px 0;
display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; border-radius: 3px;}
.planningpopup .r-bloc span.nuit {background: #eee;color: #555;}
.planningpopup .r-bloc span.conf {background: #f5eae1;color: #555; }
.planningpopup .r-bloc span.eco {background: #daf5dd; color: #555;}
.planningpopup .r-bloc span.abs {color: #999;}
.planningpopup .planning .r-flex {margin-bottom: 0;}
.planningpopup .saveplanning {padding: 10px; background: #0db4a4; border-radius:5px; color:  #fff; width:100%; }

.summary {display: grid;grid-gap: 5px; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 15px 0;}
.summary div {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; border-radius: 5px;}
.summary div.nuit {background: #eee;}
.summary div.conf {background: #f5eae1; color: #d9a981;}
.summary div.eco {background: #daf5dd; color: #3a7040;}
.summary div.abs {color: #999;}
.summary h3 {font-weight: 600; font-size: 11px; color: #222;}
.summary span {color: #555;}

.item.nomb {margin-bottom: 0;}


.plancontrol {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center;
 background: rgba(0, 0, 0, .8); z-index: 300; padding: 0 20px;}
.plancontrol.show {display: flex;}
.planpop {background: #fff; border-radius: 15px; padding: 20px;color: #000; position: relative;}

.planpop form {position: relative;margin: 20px auto 0;font-size: 15px; display: flex; justify-content: center; flex-direction: column;}
.planpop fieldset {border: 0; border-bottom: 1px solid #eee; margin-bottom: 15px; padding: 0 0 15px 0;}
.planpop .radiobtn {position: relative;display: block;}
.planpop .radiobtn label {display: block;background: #eee;color: #444;border-radius: 5px;padding: 10px 20px;
   border: 1px solid #ddd;margin-bottom: 5px;cursor: pointer;}
.planpop .radiobtn label:after, .planpop .radiobtn label:before {content: "";position: absolute;right: 11px;top: 11px;
  width: 20px;height: 20px;border-radius: 3px;background: #ccc;}
.planpop .radiobtn label:before {background: transparent;
  transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;z-index: 2;
  overflow: hidden;background-repeat: no-repeat;background-size: 13px;background-position: center;width: 0;height: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}
.planpop .radiobtn input[type=radio] {display: none;position: absolute;width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;}
.planpop .radiobtn input[type=radio]:checked + label {background: #4db1d7;color: #fff;border-color: #3087a9;}
.planpop .radiobtn input[type=radio]:checked + label:after { background: #3087a9;}
.planpop .radiobtn input[type=radio]:checked + label:before {width: 20px;height: 20px;}
.planpop .submitmode {border: none; background: #0db4a4; color: #fff; padding: 10px; border-radius: 
5px;}

.graph {background-color: #fff; border-radius: 15px; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; padding: 20px 15px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}

.planning {background: #fff; padding: 10px 10px 10px 7px; border-radius: 15px;
 -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
}

.planning .r-flex {display: flex; gap: 2px; margin-bottom: 2px;}
.planning .r-flex .r-bloc {flex: 1; text-align: center;  border-radius: 4px; font-size: 12px; font-weight: 600; color: #287069; display: flex; padding: 2px 0; justify-content: center; align-items: center;} 
.planning .switch label {width: 32px; height: 18px;}
.planning .switch label:after { top: 4px;  left: 5px;  width: 10px;  height: 10px; }
.planning .switch label {background: #dfdfdf;}


.notifpanel {width:100% ; height: 100%; position: fixed; top: -120vh; left: 0; background: #fff; z-index: 200; padding: 40px 20px 20px 20px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.notifs {height: calc(100vh - 110px); overflow-y: scroll;}
.notif {display: flex; margin-bottom: 15px;}
.notif .notificon {padding: 2px 10px 10px 0;}
.notif .notificon img {width: 40px; opacity: 0.5;}
.notif .notifmsg {background: #f6f6f6; border-radius: 5px; padding: 10px 15px;}
.notif .notifmsg span { font-size:12px; margin-bottom:7px; display:block; }
.notif .notifmsg p { font-size:13px; color:#333; }
.alert .notifmsg {background: #fff5e4;}
.error .notifmsg {background: #fbe9e9;}
.notifpanel.show {top: 0; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}


.post {background-color: #fff; color: #000; border-radius: 15px; margin-bottom: 30px; padding: 20px 15px; line-height:1.4;
-webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.12);}

.post h1 {font-size: 22px; font-weight: 700; margin-bottom: 20px;}
.post h2 {font-size: 20px; font-weight: 600; margin-bottom: 20px;}
.post h3 {font-size: 16px; font-weight: 600; margin-bottom: 20px;}
.post p { margin-bottom:20px; font-size:15px; text-align:justify ;  color: #444; }
.post a {color: #0db4a4; font-weight:600; }
.post strong { font-weight:600; }
.post blockquote {padding-left: 20px; border-left: 5px solid #eee; margin-bottom:20px; font-size:15px; font-weight: 600;}
.post img {border-radius: 10px; display: block; border: 5px solid #eee; margin-bottom: 20px;}
.post ul {padding-left: 20px; list-style-type: disc; color: #444;}
.post ul li {margin-bottom:7px; font-size:15px;}

.sidemenu, .sidesetting {width:70% ; height: 100%; position: fixed; top: 0; left: -100vw; background: #fff; z-index: 100; padding: 40px 20px 20px 20px;
display: flex; flex-direction: column; justify-content: space-between ; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);
-webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.4);}
.sidemenu.show, .sidesetting.show {left: 0;}
.sidesetting  {width: 90%;}

.profil { padding-bottom:20px; margin-bottom:20px; background:#0db4a4; border-radius:10px; padding:20px; }
.profil img {width: 40px; height: 40px; border-radius: 40px; margin-bottom: 5px;}
.profil h1 { color:#fff; font-size:18px; font-weight:600; margin-bottom:5px; }
.profil p {font-size: 13px; color: #fff;}

.sidemenu button, .sidesetting .closesidesetting {width: 100%; display: block; background: #f6f6f6; margin: 5px 0; text-align: left; height: 50px; padding: 10px; border-radius: 10px;}
.submenu h2, .sidesetting h2 { font-size:18px; font-weight:400; color:#000; text-indent:10px; }
.sidemenu button, .sidesetting .closesidesetting { margin-top:20px; display: flex; align-items:center; }
.sidemenu button img, .sidesetting .closesidesetting img {width: 24px; margin-right: 10px;}

.sidesetting .sidedown {margin-top: auto;}

.errorpassword {display: flex; align-items: center; border-radius: 5px; margin: 15px 0 10px 0; line-height: 1.2; background: #fff; color: #ff0000; padding: 10ox; max-width: 80vw; border-left: 10px solid #ff0000; min-height: 50px;}
.errorpassword img {display: block; width: 30px; margin: 10px;}

.range {display: flex;flex-direction: column; width: 80%; margin: 30px auto 30px auto;}
.range__value {text-align: center;margin-bottom: 60px;}
.form-group {display: flex;flex-direction: column; justify-content: center;}
.form-group label {text-transform: uppercase;font-size: .7rem;color: #222;margin-bottom: 5px;}
.form-group span {font-size: 8rem;font-weighst: 600;color: #fff;display: flex;justify-content: center;line-height: 0.8;opacity: 0.3;}
.form-group span sup {font-size: 1rem;}
.range__slider label { margin-bottom: 10px;}
.range__slider [type="range"] { width: 100%; -webkit-appearance: none; height: 20px; border-radius: 10px;background: #f1f1f1; outline: none;padding: 0;margin: 0;}
/* custom thumb */
.range__slider [type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 50px; height: 50px; border-radius: 50%; background: #f2f2f2; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); cursor: pointer; -webkit-transition: background .15s ease-in-out;transition: background .15s ease-in-out;}
.range__slider [type="range"]::-webkit-slider-thumb:focus { background: rgba(0, 0, 0, .2);}
.range__slider [type="range"]::-moz-range-thumb { width: 20px; height: 20px;  border: 0;  border-radius: 50%; background: #3bd2c3; cursor: pointer; -webkit-transition: background .15s ease-in-out; transition: background .15s ease-in-out;}
.range__slider [type="range"]::-moz-range-thumb:focus {  background: rgba(0, 0, 0, .2);}

/* remove border */
input::-moz-focus-inner, input::-moz-focus-outer {  border: 0;}

/* Custom style for the "Oui" button */
.swal2-confirm.custom-yes-btn {
   background-color: #0db4a4; /* Change this to the desired color */
   color: white; /* Change this to the desired text color */
 }
 
 /* Custom style for the "Non" button */
 .swal2-deny.custom-no-btn {
   background-color: #eee; /* Change this to the desired color */
   color: #999; /* Change this to the desired text color */
 }