/* >>> Header layout for the site <<< */
body {
  /*** Header variables ***/
  --header-padding: 80px;
  --header-height: 90px;
  --header-logo-height: 90px;
  --header-link-space: 25px;
  --header-animation-time: 1s;
  --header-search-input-width: 240px;
  --header-user-size: 30px;
  --header-bg: var(--white);
  --header-user-bg: var(--bg-c1);
  /* login */
  --toolbar-tray-open-height: 78px;
  --toolbar-tray-closed-height: 39px;
  --toolbar-tray-open-padding-top: calc(var(--header-height) + var(--toolbar-tray-open-height));
  --toolbar-tray-closed-padding-top: calc(var(--header-height) + var(--toolbar-tray-closed-height));
  /*** End of Header variables ***/
  padding-top: var(--header-height);
  transition: padding-top var(--header-animation-time) ease;
}

/* header animation */
body.animate-header {
  --header-height: 90px;
  /* --header-logo-height: 40px; */
  --header-search-size: 30px;
}

body.user-logged-in.animate-header {
  --header-height: 90px;
}

/* end of header animation */
.et-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--header-bg);
  min-height: var(--header-height);
  box-shadow: 0px 0px 3px 0px var(--tc-c1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transition: min-height var(--header-animation-time) ease;
}

/* header fix admin cases */
#toolbar-item-administration-tray {
  opacity: 0;
}

.header-loaded #toolbar-item-administration-tray {
  opacity: 1;
}

body.toolbar-fixed.toolbar-tray-open {
  padding-top: var(--toolbar-tray-open-padding-top) !important;
}

body.toolbar-fixed.toolbar-tray-open .et-header {
  top: var(--toolbar-tray-open-height);
}

body.toolbar-fixed:not(.toolbar-tray-open) {
  padding-top: var(--toolbar-tray-closed-padding-top) !important;
}

body.toolbar-fixed:not(.toolbar-tray-open) .et-header {
  top: var(--toolbar-tray-closed-height);
}

/* end of header fix admin cases */
.et-header-mid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 var(--header-padding);
  max-width: 1590px;
  margin: 0 auto;
  height: var(--header-height);
}

/*** Logo section ***/
.et-header .navbar-brand .site-title {
  display: none;
}

.et-header .navbar-brand img {
  margin-right: 0;
  height: var(--header-logo-height);
  transition: height var(--header-animation-time) ease;
}

/*** END OF Logo section ***/
/*** User Menu ***/
body:not(.user-logged-in) .et-user-menu {
  display: none;
}

.et-user-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.et-user-circle {
  display: inline-block;
  font-size: 0;
  background: url(/gmap-api/themes/custom/ast_admin/components/layouts/header/img/user-circle.svg) center no-repeat;
  background-size: contain;
  /* width: var(--header-user-size); */
  width: calc(var(--header-user-size) + 35px);
  height: var(--header-user-size);
  border-radius: 100%;
  pointer-events: none;
}

.header-loaded .et-user-circle {
  pointer-events: auto;
}

.et-user-box {
  display: none;
  position: absolute;
  /* top: calc(var(--header-height) + 1px); */
  top: var(--header-height);
  right: var(--header-padding);
  z-index: 1;
  max-width: 150px;
  /* border: 1px solid var(--br-c1); */
  box-shadow: 0 0 6px 2px var(--tc-c1);
  padding: 10px 15px;
  width: 100%;
  background: var(--header-bg);
}

.et-user-box .navbar-nav li .nav-link {
  color: var(--fc-c1);
  padding: 0 0 5px;
}

.et-user-box .navbar-nav li:not(:last-child) .nav-link {
  margin-bottom: 5px;
  border-bottom: 1px solid var(--br-c1);
}

.et-user-box .navbar-nav .is-active .nav-link,
.et-user-box .navbar-nav .nav-link:hover {
  color: var(--primary);
}

.et-user-circle {
  position: relative;
  padding-right: 0;
}

.et-user-circle::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 15px;
  height: 15px;
  background: url(/gmap-api/themes/custom/ast_admin/components/layouts/header/img/dropdown.svg) center no-repeat;
  transition: transform 0.3s ease;
  transform: translateY(-50%) rotate(0deg);
}

.open .et-user-circle::after {
  transform: translateY(-50%) rotate(180deg);
}

.et-user-circle:hover::after,
.open .et-user-circle::after {
  background: url(/gmap-api/themes/custom/ast_admin/components/layouts/header/img/dropdown_hover-2.svg) center no-repeat;
}

/* .open .et-user-box {
  height: 100%;
} */
@media screen and (max-width: 1024px) {
  body {
    --header-padding: 40px;
  }
}

@media screen and (max-width: 767px) {
  body {
    --header-padding: 20px;
    --header-height: 55px;
  }
}

/* Temporary fix to be checked */
.et-header-mid {
  background-color: #0084be;
  max-width: 100%
}

/*** END OF User Menu ***/