@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

  

:root {
  --color-primary: #7380ec;
  --color-danger: #ff7782;
  --color-success: #41f1b6;
  --color-warning: #ffbb55;
  --color-white: #fff;
  --color-info-dark: #7d8da1;
  --color-info-light: #dce1eb;
  --color-dark: #363949;
  --color-light: rgba(132, 139, 200, 0.18);
  --color-primary-variant: #111e88;
  --color-dark-variant: #677483;
  --color-background: #f6f6f9;

  --color-insight-1: rgb(99, 209, 35);
  --color-insight-2: rgb(233, 245, 59);
  --color-insight-3: rgb(204, 52, 67);
  --color-insight-4: rgb(56, 183, 238);

  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 0.8rem;
  --border-radius-3: 1.2rem;

  --card-padding: 1.8rem;
  --padding-1: 1.2rem;

  --box-shadow: 0 2rem 3rem var(--color-light);

  /* Plotly Chart Color */
  --chart-background: #fff;
  --chart-font-color: #444;
  --chart-axis-color: #444;
}
/* Dark Theme Variables */
.dark-theme-variables {
  --color-background: #090d3e;
  --color-white: #0b0f4a;
  --color-primary: #fff;
  --color-dark: #edeffd;
  --color-dark-variant: #fff;
  --color-light: rgba(0, 0, 0, 0.4);
  --box-shadow: 0 2rem 3rem var(--color-light);

  --chart-background: #0d1256;
  --chart-font-color: #fff;
  --chart-axis-color: #fff;
}

* {
  margin: 0;
  padding: 0;
  outline: 0;
  appearance: none;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

html {
  font-size: 9px;
}
body {
  width: 100vw;
  height: 100vh;
  font-family: poppins, san-serif;
  font-size: 0.88rem;
  background: var(--color-background);
  user-select: none;
  overflow-x: hidden;
  color: var(--color-dark-variant);
}
.container {
  display: grid;
  width: 99%;
  margin: 0 auto;
  gap: 1.8rem;
  grid-template-columns: 14rem auto 30rem;
}
a {
  color: var(--color-dark);
}
img {
  display: block;
  width: 100%;
}
h1 {
  font-weight: 800;
  font-size: 1.8rem;
}
h2 {
  font-size: 1.4rem;
}
h3 {
  font-size: 0.87rem;
}
h4 {
  font-size: 0.8rem;
}
h5 {
  font-size: 0.77rem;
}
small {
  font-size: 0.75rem;
}
.profile-photo {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  overflow: hidden;
}
.text-muted {
  color: var(--color-info-light);
}
p {
  color: var(--color-dark-variant);
}
b {
  color: var(--color-dark-variant);
}
.primary {
  color: var(--color-primary);
}
.danger {
  color: var(--color-danger);
}
.success {
  color: var(--color-success);
}
.warning {
  color: var(--color-warning);
}

.temperature {
  width: 30vh;
}


.history-divs {
	height: 28vh;
}


/***** Sidebar Image*****/
aside {
  height: 100vh;
}


  
aside .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.4rem;
}
aside .logo {
  display: flex;
  gap: 0.8rem;
}
aside .logo img {
  width: 2rem;
  height: 2re;
}
aside .close {
  display: none;
}
/***** Sidebar Links*****/
aside .sidebar {
  display: flex;
  flex-direction: column;
  height: 86vh;
  width:32rem;
  position: relative;
  top: 3rem;
}

aside .sidebar h2 {
  font-size: 2em;
}


aside h3 {
  font-weight: 500;
}

aside .sidebar a {
  display: flex;
  color: var(--color-info-dark);
  margin-left: 2rem;
  gap: 1rem;
  align-items: center;
  position: relative;
  height:5.7rem;
  transition: all 300ms ease;
  
}

aside .sidebar a span {
  font-size: 1.6rem;
  transition: all 300ms ease;
}

/* aside .sidebar a:last-child {
  position: absolute;
  bottom: 2rem;
  width: 100%;
} */

aside .sidebar a.active {
  background: var(--color-light);
  color: var(--color-primary);
  margin-left: 0;
}
aside .sidebar a.active:before {
  content: "";
  width: 6px;
  height: 100%;
  background: var(--color-primary);
}
aside .sidebar a.active span {
  color: var(--color-primary);
  margin-left: calc(1rem - 6px);
}
aside .sidebar a:hover {
  color: var(--color-primary);
}

aside .sidebar a:hover span {
  margin-left: 1rem;
}

/************* main ******************/
main {
  margin-top: 1.4rem;
  padding: 0 20rem;
}

main .insights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}
main .insights > div {
  background: var(--color-white);
  /*padding: var(--card-padding);*/
  border-radius: var(--card-border-radius);
  margin-top: 1rem;
  box-shadow: var(--box-shadow);
  transition: all 300ms ease;
}

main .insights > div:hover {
  box-shadow: none;
}

main .insights > div span {
  background: var(--color-primary);
  padding: 0.5rem;
  border-radius: 50%;
  color: var(--color-white);
  font-size: 1rem;
}



		 	  
			  

main .insights > div.temperature span {
  background: var(--color-insight-1);
}

main .insights > div.humidity span {
  background: var(--color-insight-2);
}

main .insights > div.pressure span {
  background: var(--color-insight-4);
}
main .insights > div.altitude span {
  background: var(--color-insight-4);
}

main .insights > div .middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

main .insights h3 {
  margin: 1rem 0 0.6rem;
  font-size: 1rem;
}

			  
main .insights .temperature .middle .left .tendenceup span {
	background-color: #FFF;
	 color: #F00;
  
		 font-size: 5rem;
}

main .insights .temperature .middle .left .tendencedown span {
	background-color: #FFF;
	 color: #0F0;
	 	 font-size: 5rem;
}
	
.shiftdate  {
	background-color: #EEE;
	 color: #00F;
	 font-size: 3rem;
		 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
    grid-gap: 2px; 
    width: 100%; 
	 
}
.shiftdateelement  { 
    margin: 1px; 
	  text-align: center;
	  font-size: 3rem;
}
	
/************* End of Insights ******************/
main .histories {
  margin-top: 0rem;
}

main .history-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  background: var(--color-white);
  border-radius: var(--border-radius-1);
  padding: var(--card-padding);
  text-align: center;
  box-shadow: var(--box-shadow);
}
main .history-charts:hover {
  box-shadow: none;
}

main .history-charts .history-divs {
  text-align: center;
}

main .histories h2 {
  margin-bottom: 0.8rem;
}





/* ********RIGHT ********** */
.right {
  margin-top: 1.4rem;
}
.right .top {
  display: flex;
  justify-content: end;
  gap: 2rem;
}
.right .top button {
  display: none;
}


.popup {
    position: relative;
	   width: 350px;
    background-color: #e12e2e;
    color: #fff;
	 border-radius: 6px;
}

.popup .popuptext {
    visibility: hidden;
	display:  none;
 
    text-align: center;
    border-radius: 6px;
    padding: 15px;
    position:relative;
    top:5px;
    left:5px;
	
}
.popup .show {
    visibility: visible;
	display:  inline;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
	 
}
.popup .popuptext input {
    margin-bottom: 5px; /* Ajout d'une marge entre les champs de saisie */
}


.right .theme-toggler {
  background: var(--color-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.6rem;
  width: 4.2rem;
  cursor: pointer;
  border-radius: var(--border-radius-1);
}

.right .theme-toggler span {
  font-size: 1.2rem;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right .theme-toggler span.active {
  background: var(--color-primary);
  color: white;
  border-radius: var(--border-radius-1);
}

/* GAUGE CHARTS */
.right .gauge-charts {
  margin-top: 2rem;
}
.right .gauge-charts .item {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.7rem;
  padding: 1.4rem var(--card-padding);
  border-radius: var(--border-radius-3);
  box-shadow: var(--box-shadow);
  transition: all 300ms ease;
}
.right .gauge-charts .item:hover {
  box-shadow: none;
}

.right .gauge-charts .item .right {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin: 0;
  width: 100%;
}

.right .gauge-charts .item .icon {
  padding: 0.6rem;
  color: var(--color-white);
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
}

.right .gauge-charts .item.offline .icon {
  background: var(--color-danger);
}

/* MEDIA QUERIES */
@media screen and (max-width: 1200px) {

}

@media only screen and (max-width: 992px) {
  .container {
    width: 94%;
    grid-template-columns: 12rem auto 23rem;
  }


  main .insights {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
  }
  main .histories .history-charts {
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    grid-template-columns: 1fr;
    /* height: 100vh; */
  }
  aside {
    position: fixed;
    left: -100%;
    left: -100%;
    background: var(--color-white);
    width: 28rem;
    z-index: 3;
    box-shadow: 1rem 3rem 4rem var(--color-light);
    height: 100vh;
    padding-right: var(--card-padding);
    display: none;
    animation: showMenu 400ms ease forwards;
  }
  @keyframes showMenu {
    to {
      left: 0;
    }
  }
  aside .logo {
    margin-left: 1rem;
  }
  aside .logo h2 {
    display: inline;
	 font-size: 2em;
  }
  aside .sidebar h3 {
    display: inline;
  }
  aside .sidebar a {
    width: 100%;
    height: 5.4rem;
  }
  /* aside .sidebar a:last-child {
    position: absolute;
    bottom: 5rem;
  } */
  aside .close {
    display: inline-block;
    cursor: pointer;
  }
  main {
    margin: 8rem 2rem 2rem 2rem;
    padding: 0 1rem;
  }
  main .histories {
    position: relative;
    margin: 3rem 0 0 0;
    width: 100%;
  }
  main .histories .history-charts {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .right {
    width: 90%;
    margin: 0 auto 0rem auto;
  }
  .right .top {
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    padding: 0 0.8rem;
    height: 4.6rem;
    background: var(--color-white);
    width: 100%;
    margin: 0;
    z-index: 2;
    box-shadow: 0 1rem 1 rem var(--color-light);
  }
  .right .top .theme-toggler {
    width: 4.4rem;
    position: absolute;
    right: 2rem;
  }
  .right .profile .info {
    display: none;
  }

  .right .top button {
    display: inline-block;
    background: transparent;
    cursor: pointer;
    color: var(--color-dark);
    position: absolute;
    left: 1rem;
  }
  .right .top button span {
    font-size: 3rem;
  }
}

@media screen and (max-width: 600px) {
  .container {
    width: 100%;
    grid-template-columns: 1fr;
    margin: rem 0 1rem 0;
  }
  

  
  main {
    margin: 4rem 1rem 0rem 0rem;
    padding: 0 1rem;
    width: 99vw;
  }

  main .insights {
    gap:0.8rem;
  }
  main .insights > div {
    padding: 0.4rem;
  }

  main .history-charts {
    display: grid;
    grid-template-columns: 1fr;

  }
}



.title {
  text-align: center;
  color: var(--color-primary);
}

.connection-status,
.update-section {
  background-color: var(--color-info-light);
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.connection-status h3,
.update-section h2 {
  display: inline-block;
  color: var(--color-white);
  margin-bottom: 2px;
  margin-right: 10px;
}


.connection-status .status_Hive,
.connection-status .status {
  color: var(--color-primary);
}
.connection-status .connection-Lora {
  color: var(--color-primary);
}


.update-section .updated,
.update-section .updatedsec {
  margin-bottom: 2px;
  padding: 2px;
}

.update-section h2 {
  color: var(--color-white);
  margin-right: 10px;
}

.update-section .updated {
  color: var(--color-primary);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoutez l'ombre du texte */
  font-weight: bold; /* Mettez le texte en gras */
}

.update-section .updatedsec {
  color: var(--color-primary);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoutez l'ombre du texte */
  font-weight: bold; /* Mettez le texte en gras */
}


       .checkbox-group {
            display: flex;
            flex-direction: column;
        }
  input[type="checkbox"] {
  appearance: checkbox;
}