/*    Font Variable
----------------------*/
/*    Color Variable
-----------------------*/
/*    Solid Color
------------------*/
/*    Brand color
----------------------*/
/*    Header
---------------*/
.header {
  background: #ff2e44;
  position: fixed;
  width: 100%;
  min-height: 50px;
  z-index: 999;
}
.logo {
  display: inline-block;
  padding: 10px 0;
  text-align: center;
  width: 250px;
  background: #fff;
  transition: width 300ms ease-in-out;
}
.logo img {
  width: 35px;
  margin-right: 10px;
}
.logo span {
  color: #ff2e44;
  font-weight: 700;
}
.sidebar-hide .logo {
  width: 60px;
}
.sidebar-hide .logo span {
  display: none;
}
.header-icon {
  font-size: 18px;
  padding: 14px 15px;
  color: #fff;
  position: relative;
  transition: all 0.4s ease-in-out;
  display: inline-block;
  vertical-align: middle;
  float: left;
}
.header-icon i,
.header-icon img,
.header-icon span {
  cursor: pointer;
}
.header-icon:hover,
.header-icon:focus,
.header-icon.active {
  background: #81c0f5;
}
.header-icon.active .drop-down {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}
.drop-down {
  background: #fff;
  color: #000;
  visibility: hidden;
  opacity: 0;
  width: 320px;
  position: absolute;
  right: 0;
  top: 55px;
  transform: translateY(50px);
  transition: all 0.4s ease-in-out;
  border-top: 0px;
  box-shadow: 10px 5px 10px #eee;
  border: 1px solid #eee;
}
.header-left .drop-down {
  left: 0;
}
.dropdown-content-heading {
  padding: 10px 15px;
}
.dropdown-content-heading span {
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  color: #aaa;
}
.dropdown-content-heading i {
  position: relative;
  top: 5px;
  opacity: 1!important;
  color: #ff2e44;
}
.dropdown-content-body li {
  padding: 15px;
  border-top: 1px solid #f5f5f5;
}
.dropdown-content-body li:hover,
.dropdown-content-body li:focus,
.dropdown-content-body li.active {
  background: #fcfcfc;
}
.dropdown-content-body li a:hover,
.dropdown-content-body li a:focus,
.dropdown-content-body li a.active {
  color: #b9b9b9;
}
.dropdown-content-body li:last-child {
  padding: 5px 15px;
}
.notification-heading {
  font-size: 13px;
  font-weight: 700;
  color: #989898;
}
.avatar-img {
  border-radius: 100px;
  width: 25px;
  position: relative;
  top: -3px;
}
.user-avatar {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 700;
}
.notification-text {
  font-size: 12px;
  font-family: 'MontserratLight', sans-serif;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 3px;
}
.notification-timestamp {
  font-size: 11px;
}
.notification-percentage {
  font-size: 12px;
  position: relative;
  top: 12px;
}
.notification-unread {
  background: #fcfcfc;
}
.notification-unread .notification-heading {
  color: #555;
}
.more-link {
  font-size: 12px;
  color: #ff2e44;
  display: inline-block;
}
.dropdown-profile {
  width: 200px;
}
.dropdown-profile .trial-day {
  font-size: 11px;
  padding-top: 2px;
  color: #ff2e44;
}
.dropdown-profile li {
  padding: 7px 15px;
}
.dropdown-profile li a {
  display: block;
}
.dropdown-profile li a span {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}
.dropdown-profile li a i {
  margin-right: 5px;
  font-size: 14px;
}
.dropdown-profile li:last-child {
  padding: 7px 15px;
}
.header-link {
  position: relative;
  top: -3px;
  font-size: 14px;
}
/*    Search box
----------------------*/
.chat-sidebar {
  background-color: #fff;
  position: fixed;
  right: -240px;
  bottom: 0;
  top: 55px;
  width: 240px;
  z-index: 2;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.chat-sidebar.is-active {
  right: 0;
}
.main .page-header {
  min-height: 50px;
  margin: 0px;
  padding: 0px 15px;
  background: #fff;
  border-bottom: 0px;
}
.main .page-header h1 {
  font-size: 18px;
  padding: 14px 0px;
}
.main .page-header .breadcrumb {
  margin: 0px;
  padding: 14px 15px;
  background: #fff;
}
.main .page-header .breadcrumb li:hover,
.main .page-header .breadcrumb li:focus,
.main .page-header .breadcrumb li.active {
  font-family: 'MontserratLight', sans-serif;
  font-weight: normal;
  font-size: 12px;
}
.main .page-header .breadcrumb li a {
  font-size: 12px;
  font-family: 'MontserratLight', sans-serif;
}