* {
  font-family: 'Montserrat', sans-serif;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing:border-box;
}
body{
  background-color: #e1ecf2;
}
.wrapper{
  margin: 10px;
}
.wrapper .top_navbar{
  position: fixed;
  width: calc(100% - 20px);
  display: flex;
  height: 60px;
  top: 10px;
}

.wrapper .top_navbar .hamburger{
  height:100%;
  width: 70px;
  background:#2e4ead;
  padding: 15px 17px;
  border-radius: 20px 0 0 0;
  cursor: pointer;
}

.wrapper .top_navbar .hamburger div{
  height: 4px;
  width: 35px;
  background: #92a6e2;
  margin: 5px 0;
  border-radius:5px;
}

.wrapper .top_navbar .top_menu{
  height: 100%;
  width:calc(100% - 70px);
  border-radius: 0 20px 0 0;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 1px rgba(0,0,0,0,1);
}

.wrapper .top_navbar .top_menu .logo{
  font-size: 20px;
  color: #2e4ead;
  letter-spacing: 2px;
  font-weight: 700;
  padding: 10px;
}

.wrapper .top_navbar .top_menu ul{
  display: flex;
}
.wrapper .top_navbar .top_menu ul li a{
  display: block;
  color: #2e4ead;
  padding: 0 9px;
  margin: 10px;
  height: 35px;
  width: 35px;
  border: 1px solid #2e4ead;
  border-radius: 50%;
  line-height: 35px;
  text-align: center;
  
}
.wrapper .top_navbar .top_menu ul li a:hover{
  background: #2e4ead;
  color: white;
}

.wrapper .sidebar{
  position: fixed;
  height: calc(100% - 80px);
  width: 200px;
  top: 70px;
  left: 10px;
  background: #2e4ead;
  transition: all .3s ease;
  border-radius: 0 0 0 20px;
}


.wrapper .sidebar ul li a{
  color:  #92a6e2;
  position: relative;
  margin-bottom: 1px;
  padding: 20px;
  display: block;
}


.wrapper .sidebar ul li a:before{
  content:" ";
  position:absolute;
  top:0;
  left: 0;
  width: 4px;
  height: 40px;
  color: #92a6e2;
  display: none;
}
.wrapper .sidebar ul li a span.icon{
  display: inline-block;
  margin-left: 10px;
}

.wrapper .sidebar ul li a span.title{
  display: inline-block;
}


.wrapper .sidebar ul li a.active{
  background: #4360b5;
  color: white;
}

.wrapper .sidebar ul li a:hover:before{
  display: block;
}

.wrapper .main_container{
  width: calc(100% - 200px);
  margin: 70px 20px 0 200px;
  padding: 15px;
  transition: all .3s ease
}

.wrapper .main_container .word.active{
  border-left: 3px solid #2e4ead;
  border-right: 3px solid #2e4ead;
  transition:all 1s ease;
}
.wrapper .main_container .word{
  background: white;
  font-size: 20px;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 20px;
}

.wrapper.collapse .sidebar{
  width: 70px;
}
.wrapper.collapse .sidebar ul li span.title{
  display: none;
}
.wrapper.collapse .sidebar ul li span.icon{
  text-align: center;
  font-size: 20px;
  margin-left: 2px;
}
.wrapper.collapse .main_container{
  margin-left: 70px;
  width: calc(100% - 70px)
}