﻿/* Orange */
/* Slightly lighter dark blue than $colordarkblue */
.header-menus {
  justify-content: right;
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 1.375rem; }
  .header-menus span {
    width: 2.5rem;
    margin: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .header-menus span:hover {
      cursor: pointer; }
    .header-menus span.header-menu-active {
      background: #E6B766;
      padding: 0.625rem;
      border-radius: 6px; }
      .header-menus span.header-menu-active svg path,
      .header-menus span.header-menu-active svg g {
        stroke: #fff; }

.ant-layout .ant-layout-header.app-header {
  background: #fff;
  height: 75px;
  padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
  z-index: 9;
  position: fixed;
  left: 0;
  right: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
  .ant-layout .ant-layout-header.app-header .userProfile {
    cursor: pointer; }
    .ant-layout .ant-layout-header.app-header .userProfile .userProfile-btn {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      flex: 0 0 100%;
      justify-content: end; }
      .ant-layout .ant-layout-header.app-header .userProfile .userProfile-btn .userImg {
        background: #E87757;
        color: #fff;
        height: 2.125rem;
        width: 2.125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        font-size: 0.8125rem;
        overflow: hidden;
        margin-top: 12px;
        margin-right: 8px; }
        .ant-layout .ant-layout-header.app-header .userProfile .userProfile-btn .userImg img {
          border-radius: 100%;
          width: 100%; }
        .ant-layout .ant-layout-header.app-header .userProfile .userProfile-btn .userImg span {
          font-weight: 500;
          text-transform: uppercase; }
      .ant-layout .ant-layout-header.app-header .userProfile .userProfile-btn .userInfo {
        text-transform: capitalize;
        font-size: 0.8125rem;
        color: #2F353E;
        line-height: normal; }
      .ant-layout .ant-layout-header.app-header .userProfile .userProfile-btn i {
        font-size: 1.5rem;
        color: #8F8F8F; }

.layout-full .app-header {
  padding-left: 6.875rem; }

.logout-menu {
  padding: 0; }
  .logout-menu .ant-dropdown-menu-item {
    padding: 0.625rem;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    font-size: 0.8125rem;
    color: #2F353E; }
    .logout-menu .ant-dropdown-menu-item i {
      color: #374254;
      font-size: 1rem;
      margin-right: 0.625rem; }
  .logout-menu .admin-text {
    color: grey;
    padding: 0.3125rem;
    font-size: 0.6875rem;
    border-radius: 0.3125rem;
    margin-left: 3.75rem; }

.user-icon svg {
  background: #002266;
  padding: 4px;
  font-size: 27px;
  border-radius: 25px;
  color: white; }

@media (max-width: 1366px) {
  .app-header .userProfile .userProfile-btn .userImg {
    margin-right: 0.5rem;
    height: 2.5rem;
    width: 2.5rem; }
  .app-header .userProfile .userProfile-btn .userInfo {
    font-size: 0.875rem; } }

@media (max-width: 1280px) {
  .app-header .logo {
    border-right: 0; }
  .app-header .userProfile .userProfile-btn {
    justify-content: flex-end; }
    .app-header .userProfile .userProfile-btn .userInfo {
      display: none; } }
