html, body{
  height: 100%;
  width: 100%;
  background-color: rgb(61, 21, 175);
  margin: 0;
  font-family: "Segoe UI";
}

#auth_container{
  position: fixed;
  background-color: rgb(555, 99, 4);
  color: white;
  top: 5%;
  right: 13%;
  height: 10%;
  width: 25%;
  overflow-y: hidden;
}

.auth_id{
  vertical-align: top;
  display: inline-block;
  height: 100%;
  background-color: green;
  width: 24%;

}
.auth_notifications{
  vertical-align: top;
  display: inline-block;
  height: 100%;
  background-color: black;
  width: 75%;

}
.auth_sources{
  vertical-align: top;
  display: inline-block;
  background-color: red;
  position: relative;
  height: 100%;
  width: 49%;
}
.auth_count{
  vertical-align: top;
  display: inline-block;
  background-color: pink;
  position: relative;
  height: 100%;
  width: 49%;
}

.auth_content{
  background-color: gray;
  vertical-align: middle;
  text-align: center;
  position: relative;
  top: 40%;
  width: 100%;
}

.auth_title{
  background-color: red;
  position: absolute;
  bottom: 10%;
  left: 5%;
}


#progress_slider{
  position: fixed;
  bottom: 0;
  background-color: pink;
  width: 100%;
  height: 2%;
}

.slot{
  color: black;
  width: 33%;
  height: 100%;
  text-align: center;
  display: inline-block;
}

.primary_container{
  position: relative;
  height: 65%;
  width: 80%;
  top: 15%;
  padding: 5% 10% 5% 10%;
  overflow: hidden;
}

#left_arrow{
  position: absolute;
  top: 40%;
  background-color: black;
  height: 10%;
  color: white;
  left: 5%;
}

#right_arrow{
  position: absolute;
  top: 40%;
  background-color: black;
  height: 10%;
  color: white;
  right: 5%;
}

.primary_view{
  width: 100%;
  background-color: green;
  height: 100%;
  padding-bottom: 2%;
  display: block;
  overflow: hidden;
  display: none;
}

.inactive_view{
  display: none;
}

.curr_active_view{
  display: block;
}

.box{
  display: inline-block;
  position: relative;
  width: 10%;
  padding-bottom: 10%;
  background-color: red;
  overflow: hidden;
  margin: 0.25% 0.25% 0.25% 0.25%;
}

.box_content{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20% 20% 20% 20%;
  border: 1px solid transparent;
  background-color: purple;
  color: white;
  z-index: 900;
}

.box_title{
  position: absolute;
  background-color: red;
  left: 8%;
  bottom: 8%;
  width: 100%;
}

.box_value{
  position: absolute;
  font-size: 300%;
  background-color: teal;
  top: 30%;
  width: 84%;
  text-align: center;
  overflow-x: hidden;
  left: 8%;
}

.close{
  background-color: black;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bolder;
  display:none;
  height: 15%;
  width: 15%;
  z-index: 1000;
  text-align: center;
  border-radius: 50%;
}

.box_content:hover{
  border-color: white;
  border-style: solid;
  border-width: 1%;
}

.box_content:hover .close{
  display: block;
  border-color: white;
  border-style: solid;
  border-width: 2px;
}

.box_34{
}

.box_32{

}