﻿:root {
   --six-main-blue: #014b8e;
   --six-main-blue-button: #0d2a46;
   --six-main-red: #ff0000;
   --six-white: #ffffff;
   --six-black: #000000;
}

.custom_header_widget {
   position: sticky;
   top: 0;
   z-index: 151;
   padding-top: 0px !important;
}

.mobile_selectors_widget .mobileSelectors,
.mmSearchItem,
.fas.alertsIcon.mainItem,
.mnuHeading,
.header #navbar .dropNavBtn {
   display: none !important;
}

.header {
   background: var(--six-main-blue);
   color: var(--six-white);
   display: flex;
   width: 100%;
   flex-direction:column;
   position: relative;
}

.header .headerMainItems {
   display: flex;
   gap: 10px;
   padding: 10px;
   z-index: 3;
   position: relative;
   background: var(--six-main-blue);
}

.header .searchBtn,
.header .userProfile,
.header .signoutButton {
   border: solid 1px var(--six-white);
   flex-shrink:0;
   width: 28px;
   height: 28px;
   line-height: 28px;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-size: 20px;
   cursor: pointer;
}

.header .dropNavBtn {
   display: flex;
   align-items: center;
   gap: 5px;
   border: solid 1px var(--six-white);
   padding: 3px;
   flex-shrink:0;
   height: 28px;
   width: auto;
   justify-content: center;
   font-size: 20px;
}

.header .dropNavBtn .menuButtonText {
   padding-left: 5px;
   font-variant: small-caps;
   font-family: Arial, sans-serif;
}

.header .logoContainer {
   width: 140px;
   flex-shrink:0;
   margin-left: auto;
}

.header .logoContainer .mainLogo {
   max-width: 100%;
}

.header .navigationContainer {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
   flex-basis:100%;
	height: auto;
	background: var(--six-main-blue);
	border: none;
	z-index: 12;
	overflow: visible;
	padding: 0px;
}

.header .navigationContainer .navigation_menu_widget {
	background: unset;
}

.header .wideUserContainer {
   display: none;
   gap: 10px;
   align-items: center;
}

.header a {
   color: var(--six-white);
}

.header .userButton,
.header .userButtonSub {
   padding: 5px 3px;
   text-transform: uppercase;
   border: solid 1px var(--six-white);
   width: calc(50% - 5px);
   text-align: center;
   font-weight: bold;
   font-family: Arial, sans-serif;
}

.header .userButton {
   background: var(--six-main-blue);
}

.header .userButtonSub {
   background: var(--six-main-red);
}

.header .mobileUserContainer {
   display: flex;
   padding: 10px;
   width: 100%;
   gap: 10px;
   background: var(--six-main-blue-button);
   z-index: 1;
}

.navigation_menu_widget a.item, 
.navigation_menu_widget .item {
   color: var(--six-white);
   font-size: 20px;
}

.navigation_menu_widget a.item:hover, 
.navigation_menu_widget .item:hover {
   color: var(--six-main-red);
}

.searchCtr {
   width: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   padding: 10px;
   background: var(--six-main-blue-button);
   transform: translateY(-50px);
   -webkit-transform: translateY(-50px);
   -moz-transform: translateY(-50px);
   transition: transform 250ms;
   -webkit-transition: transform 250ms;
   -moz-transition: transform 250ms;
   z-index: 2;
   font-family: Arial, sans-serif;
}

.showSearch {
   transform: translateY(39px);
   -webkit-transform: translateY(39px);
   -moz-transform: translateY(39px);
}

.searchCtr form {
   display: flex;
   align-items:center;
   gap: 10px;
}

.searchCtr label {
   color: var(--six-white);
   flex-shrink:0;
}

.searchCtr form,
.searchCtr form #searchTxt {
	width: 100%;
	margin: 0;
}

@media (min-width: 768px) {
   .header {
      flex-direction: row;
   }

   .navigation_menu_widget {
      padding: 0px;
      position: relative;
      width: 100%;
      height: calc(100%);
      background: var(--pres-main-bg-light);
   }

   body .mainNav {
      display: flex;
      height: calc(100%);
      width: 100%;
   }

   .mainNavContainer {
      display: none;
   }

   body .section_navigation_widget {
      width: 300px;
   }

   .custom_header_widget .header .navigationContainer.secNavFixed {
      position: relative;
   }

   .header .mobileUserContainer {
      display: none;
   }

   .header .searchBtn,
   .header .dropNavBtn,
   .header .userProfile,
   .header .signoutButton {
      margin: 0;
      height: 50px;
   }

   .header .logoContainer {
      width: 280px;
      margin: 0;
   }

   .header .searchBtn,
   .header .fa-bars,
   .header .userProfile,
   .header .signoutButton {
      width: 50px;
      font-size: 32px;
      line-height: 50px;
   }

   .header .wideUserContainer {
      display: flex;
      margin-left: auto;
   }

   .header .wideUserContainer .userButton,
   .header .wideUserContainer .userButtonSub {
      width: auto;
      height: 50px;
      line-height: 50px;
      padding: 0px 10px;
      font-family: Arial, sans-serif;
   }

   .searchCtr {
      font-size: 24px;
   }

   .header .searchCtr.showSearch {
      transform: translateY(calc(100% + 24px));
      -webkit-transform: translateY(calc(100% + 24px));
      -moz-transform: translateY(calc(100% + 24px));
   }

   .searchCtr {
      font-size: 20px;
   }
}

@media (min-width: 1024px) {
   .header .wideUserContainer {
      margin: 0;
      position: absolute;
      right: 5px;
      background: var(--six-main-blue);
      overflow: hidden;
      padding-left: 10px;
   }

   .header #navbar {
      height: 50px;
      flex-wrap: wrap;
      overflow: hidden;
   }

   .mainNavContainer {
      display: flex;
   }

   .navType {
      padding: 0px 10px 0px 0px;
   }

   .navType:after {
      display: block;
      width: 10px;
      height: 10px;
      background-color: #ffffff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      right: 0px;
      transform: translateY(-50%);
   }

   .navTypeAfter:after {
      content: '';
   }

   .lastNavType:after {
      content: none;
   }
}