
:root {
  --dark-blue: #0e1635;
  --light-blue: #1C6EA4;
/*--low-blue: #D0E4F5;*/
  --low-blue: #17D8FF; 
  --middle-blue : #11A4C1;
  --high-blue : #095868;
  --blue: #6374e3;
  --ocean-blue: #0F3D5C;
  --gray: #949ab0;
  --light: #f0f6f8;
  --good-green: #65d6ac;
  --bad-red: #f1879f;
  --main-font-size: 16px; /*18*/
  --number-font-size: 14px; /* 22*/ 
  --number-font-small-size: 13px; /* 22*/   
  --smaller-font-size: 12px; /*16*/
 }

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

.stations {color: #FFFFFF ;}
.stations:link {color: white;}
.stations:visited {color: white;}
.stations:hover {color: white;}
.stations:active {color: white;}



/* Side bar */
.side-bar {grid-area: aside; /* width: 400px; */ width: 100%; padding: 20px; border-radius: 10px; background-color: white; color: var(--dark-blue);}
.side-bar-header {display: flex; flex-direction: row; justify-content: space-between; font-weight: 100;}
.side-bar-content {display: flex; flex-direction: column;}
.side-bar-page {display: flex; flex-direction: row; justify-content: space-between; padding: 10px;}
.side-bar-page span {margin-left: 20px;}

.more-stats-box {display: flex; flex-direction: column; width: 100%; height: 100%; margin-top: 20px; padding: 20px; background-color: var(--blue); border-radius: 10px;}
.more-stats-header {display: flex; flex-direction: row; justify-content: space-between; color: white; text-transform: capitalize;}
.more-stats-header img {cursor: pointer; padding: 5px; border-radius: 10px;}
.more-stats-header img:hover { background-color: rgba(0, 0, 0, 0.2);}
.more-stats-body {color: white; margin-top: 10px;}
.more-stats {padding-bottom: 20px;}

/* Main Area */
.main {grid-area: main;}

/* Row 1 */
.row-1 {margin-right: 10px; display: grid; gap: 15px; grid-template-columns: repeat(1, 1fr);}
.active-users {min-height: 300px; height: 300px; border-radius: 10px; color: var(--light); background-color: var(--light-blue); box-shadow: 0px 5px 14px 0px var(--dark-blue);}
.active-users a {margin-top: 20px;}
.page-views {border-radius: 10px; background-color: white; width: 100%; height: 220px; padding: 10px; color: var(--dark-blue);}
.graph {height: 60%; display: flex; align-items: flex-end;}
.graph div {margin-right: 5px; width: 100%; height: 100%;}
.graph div:hover::before{display: block;}
.graph div:before {content: attr(aria-label); display:none; position: absolute; top: 30px; font-weight: 600; font-size: 15px; color: var(--dark-blue); width: 150px; padding: 10px; 
background-color: #f0f6f8; border-radius: 5px; pointer-events: none;}


/* Row 2 */
.row-2 {margin-top: 20px; margin-right: 10px; display: grid; gap: 15px; grid-template-columns: repeat(1, 1fr); width: 100%;}
.stat-box {padding: 5px; width: 100%; color: var(--dark-blue); background-color: #FFFFCC; border-radius: 10px; max-height: 100%; 
           border: 1px solid var(--gray); padding: 20px; border-bottom: 1px solid var(--gray);}
.stat-title {display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 20px;}
.stat-percentage {display: flex; flex-direction: row; align-items: center;}
.stat-percentage img {margin-right: 2px;}
.stat-percentage.green {color: var(--good-green);}
.stat-percentage.red {color: var(--bad-red);}

/* Row 3 */
.row-3 {margin-right: 10px; margin-top: 20px; display: none; grid-template-columns: repeat(1, 1fr);}
.alert {width: 100%; padding: 20px; border: 3px solid #edeff7; border-radius: 10px; background-color: white; display: flex; justify-content: space-between; align-items: center;}
.alert-title {display: flex; flex-direction: row;}
.alert-title img {margin-right: 20px;}
.alert-btn {background-color: white; outline: none; cursor: pointer; padding: 20px 40px; font-size: 20px; border: 1px solid var(--blue); border-radius: 5px; color: var(--blue); font-weight: 550;
  transition: color 0.3s, background 0.3s; margin-right: 10px;}
.alert-btn:hover {color: white; background-color: var(--blue);}

/* Row 4 - Devices */
.row-4 {margin-top: 20px; margin-right: 10px; display: grid; gap: 15px; grid-template-columns: repeat(1, 1fr);}
.device-box {border-radius: 10px; background: white; border: 2px solid #f5f5f5;}
.select-months {padding: 10px; display: flex; flex-direction: row; justify-content: space-around; background-color: var(--light);}
.select-month {cursor: pointer; color: var(--dark-blue); border-radius: 5px; padding: 10px; text-align: center; width: 100%; margin-right: 5px; background-color: var(--light); font-weight: 700; transition: box-shadow 0.3s;}
.select-month:hover {box-shadow: 2px 2px 5px 0px rgba(138, 133, 133, 0.75);}
.select-month.active {box-shadow: 2px 2px 5px 0px rgba(138, 133, 133, 0.75);}
.month-info {margin-top: 10px; padding: 5px;}
.month-info-box {color: var(--dark-blue); font-weight: 600; padding: 10px;}
.month-bar-light {margin-top: -15px; margin-left: -15px; background-color: var(--low-blue);}
.month-bar-middle {margin-top: -15px; margin-left: -15px; background-color: var(--middle-blue);}
.month-bar-high {margin-top: -15px; margin-left: -15px; background-color: var(--high-blue);}
.month-bar-light-back {margin-top: -15px; margin-left: -15px; background-color: #2E76F2;}
.reference-details {margin-top: 10px;}
.reference {padding: 10px; color: var(--dark-blue); font-weight: 600; display: flex; justify-content: space-between; transition: background 0.2s; border-radius: 10px;}
.reference:hover {cursor: pointer; background-color: var(--light);}

/* Util Classes */
.box {width: 100%; padding: 20px; position: relative;}
.box-title {font-size: var(--main-font-size); font-weight: normal; padding-bottom: 10px;}
.box-footer {position: absolute; bottom: 1%;}
.box-footer a {text-decoration: none; color: var(--gray); text-transform: uppercase; display: flex; flex-direction: row; align-items: center; font-weight: 500;}
.box-footer a img {padding-left: 10px;}
.selected-tab {font-weight: 700; border-bottom: 2px solid var(--dark-blue);}
.float-right {float: right;}
.number-fs {font-size: var(--number-font-size);}
.infos-fs {font-size: var(--number-font-small-size);}
.main-layout.active {pointer-events: none; opacity: 0.4;}

@media screen and (min-width: 550px) {
  .row-2 {grid-template-columns: repeat(2, 1fr);}
  .row-3 {display: grid;}
}

@media screen and (min-width: 950px) {
  :root {--main-font-size: 25px;  --number-font-size: 36px;}
  .menu-opener img {display: none;}
  nav.tab-selector {display: flex;}

  .row-1 {grid-template-columns: 40% 60%;}
  .row-2 {grid-template-columns: repeat(3, 1fr);}
  .row-4 {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (min-width: 1300px) {
  .main-layout {
    grid-template-areas:
      'main main aside'
      'main main aside'
      'main main aside'
      'main main aside';
  }
}

.div-img{justify-content: center; align-items: center; display:flex; padding-top:20%;}
.imgFlash{transition: transform .2s; width: 30px; height: 30px; margin:0 auto; background-color: rgb(173, 173, 237); 
		  border-radius: 5px; border: 1px solid white; vertical-align : middle ;}
.imgFlash:hover{transform:scale(5.0);}
.imgWithout{cursor: not-allowed; transition: transform .2s; width: 30px; height: 30px; margin:0 auto; background-color: rgb(173, 173, 237); 
		  border-radius: 5px; border: 2px solid red; vertical-align : middle ;}
.imgWithout:hover{transform:scale(1.0); filter : grayscale(80%);}

