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


 /* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}


body{
	margin:0;
	padding:0;
	background-color: #1d2634;
	color: #9e9ea4;
	font-family:"Montserrat", sans-serif;
}

/*create the layout of the initial container of the page that contains all the content*/
.grid-container{
	display: grid;
	/*sidebar I want to have across all devices 260px all the others columns it will divide the available space into
	3 equal columns and the width of those columns it will depend on the device smaller divices take less space*/
	grid-template-columns: 260px 1fr 1fr 1fr;/*specify how many columns the grid have*/
	
	/*header take 0.2 widht the rest will take 3fr*/
	grid-template-rows: 0.2fr 3fr;/*specify how many rows the grid have*/
	
	
	
	/*describe what the layouts it will look like with notations*/
	grid-template-areas:
	"sidebar header header header" /*first row*/
	"sidebar main main main";
	
	height: 100vh; /*available viewport height visible area*/
}

/*how much space it will take from the grid layout*/
.header{
	grid-area: header;
	height: 70px;
	
	
	display:flex;
	
	align-items: center;
	justify-content: space-between;
	padding: 0 30px 0 30px;
	box-shadow: 0 6px 7px -3px rgba(0,0,0, 0.35);
}

.header .header-left{
	height:50px;
	/*max-width:380px;*/
	
	margin:auto;
	/*position:relative;*/
	/*box-shadow: 0 5px 10px rgba(0,0,0,0.25);*/
}

.header-left input{
	/*position:absolute;*/
	/*height:100%;
	width:100%;*/
	border-radius:25px;
	background:#fff;
	outline:none;
	border:none;
	padding-left:25px;
	height:50px;
	/*width:150px;*/
	font-size:18px;
	
}


#sidebar{
	grid-area: sidebar;
	height: 100%;
	background-color:#263043;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	overflow-y:auto;
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
}




.main-container{
	grid-area: main;
	
	
	overflow-y:auto;
	padding: 20px 20px;
	color: rgba(255, 255, 255, 0.95);
}

/*hide on large screen icon menu style*/
.menu-icon{
	display:none;	
	
}


/*create design layout for icon menu sidebar title*/
.sidebar-title{
	display:flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 20px 20px 30px;
	margin-bottom: -40px;
	
}

/*create a child selector for the span icon menu sidebar title
allows as to select all elements that are children of a parent element 
start with the parent > to the child
a child selector it will target all the elements of the parent 
so all span tags will style the same way*/
.sidebar-title > span{
	display:none;
	
}

/*create design layout for icon menu sidebar brand*/
.sidebar-brand{
	margin-top: -120px;
	font-size:20px;
	font-weight: 700;
	
}
.icon-X i{margin-bottom:70px;

}

/*create design layout for icon menu sidebar list*/
.sidebar-list{
	 
	padding: 0;
	margin-top: 10px;
	list-style-type:none;
	
}

/*create design layout for icon menu sidebar list item*/
.sidebar-list-item{
	vertical-align:middle;
	
	line-height:1px;
	
	padding: 10px 20px 20px 20px;
	font-size:18px;	
}





/*create design layout for icon menu sidebar list item when hover*/
.sidebar-list-item:hover{
	background-color:rgba(255,255,255,0.2);
	cursor:pointer;
	
	
}


/*hide design layout for icon menu sidebar for smaller screens*/
.sidebar-responsive{
	display: inline !important; /*when use important rule it will override all previous
	for that specific property*/
	position:absolute;
	z-index: 12 !important;
}

/*Use class names for specific icons
The example above is great but you may have noticed that 
the location icon looks so gosh darn narrow and even further 
from the text labels than the music note. How annoying!
This is where CSS on a per-icon basis can bail us out.*/

/* Match any class name that starts with icon */
[class^="bx"] {
  width: 30px;
  height: 45px;/*line up icons text and hover*/
  position: relative;
  top: 10px;
  margin-right: 16px;
  /*fill: #fff;*/
}




.main-title{
	display:flex;
	justify-content:space-between;
}


.main-cards{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap:20px;
	margin:20px 0;
}


.card{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	padding:25px;
	border-radius:5px;
}

.card h1{
	margin-top:-20px;
	text-align:center;
}

.card:first-child{
	background-color:#2962ff;
}
/*select the second card from the 4 cards*/
.card:nth-child(2){
	background-color:#ff6d00;
}


.card:nth-child(3){
	background-color:#2e7d32;
}

.card:nth-child(4){
	background-color:#d50000;
}

.card-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
}


.card-inner > .icon-card{
	font-size: 45px;
}

/*specify where the poistion of the icon it will be in the card*/
.icon-card i{
	margin-bottom:20px;
	margin-left:10px;
}


/*charts*/
.charts{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:20px;
	margin-top: 60px;
}

.charts-card{
	background-color: #263043;
	margin-bottom:20px;
	padding:25px;
	box-sizing:border-box;
	/*avoid column breaks when the screen size decrease */
	-webkit-column-break-inside: avoid;
	box-shadow: 0 6px 7px -4px rgba(0,0,0, 0.2);
}

.chart-title{
	display:flex;
	align-items:center;
	justify-content:center;
	
}




/* ---------- MEDIA QUERIES ---------- */

/* Medium <= 992px */

@media screen and (max-width: 992px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 3fr;
    grid-template-areas:
      'header'
      'main';
  }

  #sidebar {
    display: none;
  }

  .menu-icon {
    display: inline;
  }

  .sidebar-title > span {
    display: inline;
  }
  

  
  
}

/* Small <= 768px */

@media screen and (max-width: 768px) {
  .main-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 0;
  }

  .charts {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
}

/* Extra Small <= 576px */

@media screen and (max-width: 576px) {
  .header-left {
    display: none;
	/*position:absolute;*/
	/*margin-right: 30px;*/
	
  }
  
  /*.header-left input{
	position:relative;
	
	border-radius:25px;
	background:#fff;
	outline:none;
	border:none;
	padding-left:25px;
	height:50px;
	width:220px;
	font-size:18px;
	margin-left:20px;
	background:red;
	}
	
	.header-left .bx{
		padding-left:85px;
		background:red;		
	}*/
	
	/*.card h1{
	margin-top:-20px;
	text-align:center;
	}*/
	
	a:link, a:visited {
		margin-left:90px;
		margin-right:90px;
	}

}




a:link, a:visited {
  background-color: #fff;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color:black;
}



a:hover, a:active {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);
}

.card-inner h1{
	margin-left:30px;
}

/*
.card:first-child a{
	background-color:#2962ff;
}

.card:nth-child(2) a{
	background-color:#ff6d00;
}


.card:nth-child(3) a{
	background-color:#2e7d32;
}

.card:nth-child(4) a{
	background-color:#d50000;
}*/