/*RESET STYLES*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap');
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style-type: none;
   font-family:  'Merriweather Sans', sans-serif;
 }
 
 .text-whitesmoke {
     color:#d9d8d7;
 }
 
 .text-theme {
     color:#00CFFF;
 }
 
 .bg-whitesmoke {
     background:#d9d8d7
 }
 
 .bg-theme {
      background:#00CFFF;
 }

.active{
    color:#5bc0de;
}

.alert {
  position: absolute;
  top: 50%; left: 0; right: 0;

    margin: 0 auto;
    width:300px;
    height:auto;
  padding: 20px;
  color: white;
}

.error{
background-color: #f44336;
}

.success{
    background-color:#14A44D;
}

.info {
     background-color:#54B4D3;
}
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
.space{
    min-height:100px;
}
.app-container{
  /* The app can only be the height of the viewport */
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Do NOT allow the app to scroll off the screen */
  overflow: hidden;
}

/* HEADER STYLES */
header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  /* Give the header a subtle drop shadow */
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}
header h1{
  font-size: 1.2em;
}
header img{
  width: 40px;
  height: 40px;
  /*  Rounded corners  */
  border-radius: 100%;
/*   margin: 10px */
}

main{
  /* Take up all free space on the screen between header and footer */
  flex: 1 1 auto;
  overflow-y: scroll;
}

/* FOOTER STYLES */
footer{
  /* Give the footer a shadow too */
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  
}

footer nav ul{
  display: flex;
  /*  Put everything on one line  */
  flex-direction: row;
  /* Equally space everything  */
  justify-content: space-around;
padding-left:0px!important;
margin-bottom:0px!important;
  background:#fff;
}

footer nav ul li{
  /* Stop everything from hitting the edges of the footer   */
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color:#d9d8d7;
}

footer nav ul li a{
    font-size:15px;
}


/* THIS IS JUST FOR DEMO PURPOSES - FORCING THE CENTRAL CONTAINER TO BE LARGER THAN THE SCREEN */
/*.spacer{*/
/*  min-height: 1000px;*/
/*}*/