.main-menu{
   position: fixed;
   top: 0;
   z-index: 101;
   width: 100%;
   padding: 15px 0 15px;
   background-color: #fff;
   height: 55px;
   padding: 5px;
   margin-bottom: 40px;
   border-top: 4px solid #151717;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#flashMessage{
	max-width: 600px;
	margin: auto;
	margin-top: 65px;
   margin-bottom: -80px;
}

.main-menu .dropdown.section:hover{
   font-weight: inherit;
}

.main-menu .sandbox-mode{
	font-size: 28px;
	font-weight: 600;
	margin-left: 20px;
	color: #151717
}

.main-menu .section{
   color: #404040;
   position: relative;
   display: flex;
}

.main-menu .icon.section{
   font-size: 16px;
}
.main-menu .icon.section i.icon{
   font-size: 20px;
   margin-left: 10px !important;
}

.main-menu .button.section{
   margin-top: -5px !important;
}

.main-menu .section:hover{
   color: #151717;
   cursor: pointer;
   font-weight: 500;
}
.main-menu img.logo{
   height: 30px;
   margin-top: -5px;
   width: auto;
   padding-left: 30px;
}

.main-menu .left{
   float: left;
   margin: 10px 5px 5px -10px;
}
.main-menu .left .section{
   float: left;
   margin-left: 15px;
}

.main-menu .right{
   float: right;
   margin: 10px 10px 5px 5px;
}

.main-menu .right .section{
   float: right;
}

.main-menu .hamburger.section .material-icons{
   margin-top: -10px;
   font-size: 40px !important; 
}

.main-menu .hamburger.section.open .ham{
   display:none;
}

.main-menu .hamburger.section:not(.open) .close{
   display: none;
}

.notification.section .label{
   background-color: #D32F2F;
   color: white;
}

.notification.section{
   margin-left: 1.2em;
}

body > .body{
   padding-top: 70px;
}

.ui.error.text.container{
   margin-top: 4em;
   margin-bottom: -4em;
}

.notifications.popup .header{
   margin-bottom: 5px;
}

.notifications.popup .notif{
   color: #404040;
   padding: 5px;
   border-radius: 2px;
   cursor: pointer;
   display: block;
   position: relative;
}

.notifications.popup .notif .seen{
   background-color: #D32F2F;
   width: 10px;
   height: 10px;
   border-radius: 100px;
   position: absolute;
   bottom: 10px;
   right: 10px;
}

.notifications.popup .notif:hover{
   background-color: rgba(138, 138, 138, 0.2);
}

.notifications.popup .ui.divider{
   margin: 5px;
}

.notifications.popup .more.notif:hover{
   background-color: rgba(22, 22, 22, 0.5);
   color: white;
}

.notifications.popup .notif .date{
   font-size: 80%;
   color: gray;
}

.tl.header-sidebar{
	position: fixed;
	top: 55px;
	height: calc(100% - 40px);
	background-color: white;
	width: 200px;
	overflow: hidden;
	border-right: 1px solid #e9e9e9;
	z-index: 100000;
}

.tl.header-sidebar .item{
	width: 100%;
	padding: 10px;
	font-size: 18px;
	color: #1d1d1d;
	display: block;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}
.tl.header-sidebar .divider{
	height: 1px;
	width: 100%;
	border-bottom: 1px solid #f6f6f6;
}
.tl.header-sidebar .big.item{
	font-size: 20px;
}

.body{
	min-height: calc(100% - 40px);
}

/* MOBILE */
@media screen and (max-width: 573px) { 
   .main-menu .right .section:not(.cart):not(.notification):not(.more){
      display: none;
   }
   .main-menu .left .section:not(.hamburger){
      display: none;
   }
   .main-menu img.logo{
      height: 30px;
      margin-top: -5px;
      width: auto;
      padding-left: 15px;
   }
   .main-menu .section.cart{
      font-size: 30px;
   }
   .main-menu .right .section{
      float: right;
      margin-right: 0em;
   }
   .main-menu .right .material-icons{
      margin-top: -5px;
      font-size: 32px;
   }
}

/* DESKTOP */
@media screen and (min-width: 573px) {
   .main-menu .hamburger.section{
      display: none;
   }
	.tl.header-sidebar{
		display: none !important;
	}
   .main-menu .left .section{
      float: right !important;
      margin-left: 15px;
   }
   .main-menu .right .section{
      margin-left: 1em;
   }
   .main-menu .right .text.section{
      font-size: 16px;
   }
   .main-menu .right .material-icons{
      margin-top: -2px;
      font-size: 28px;
   }
}