/* ARBETSFÖRMEDLINGEN PLAY - HEADER - CSS - By: Consid AB -----*/

html, body, body > div {
  width: 100vw;
  overflow-x: hidden;
}

.afplay-header-border-bottom {
  border-bottom: 1px solid #f5f4f3;
}

.afplay-header-wrapper {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0 !important;
  position: relative !important;
}

.afplay-header-nav, 
.afplay-header-nav > div, 
.afplay-header-nav nav,
.afplay-header-nav nav > div,
.afplay-header-nav nav > div .dropdown-header, 
.afplay-header-nav > .afplay-header-search > div {
  height: 100%;
}

.afplay-header-nav {
  display: flex;
  /*border-right: 1px solid #f5f4f3;
  border-left: 1px solid #f5f4f3;*/
  width: auto;
  margin-top: 0;
}

.afplay-header-nav nav {
   display: flex;
  align-items: center;
}

.afplay-header-nav nav > div {
  display: flex;
}

/* --- Buttons --- */

.afplay-header-nav .dropdown-header .dropdown-toggle, 
.afplay-header-nav .toggleNav,
.afplay-header-nav .afplay-header-search .toggleSearchField {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  height: 100%;
  border-right: 1px solid #f5f4f3;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin:0;
  -webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
   color: #333;
}

.afplay-header-nav .dropdown-header .dropdown-toggle:hover, 
.afplay-header-nav .toggleNav:hover,
.afplay-header-nav .afplay-header-search .toggleSearchField:hover {
  background: #f5f4f3;
}

.afplay-header-nav .toggleNav {
  display: none;
}

.afplay-header-nav .dropdown-header .dropdown-toggle i, 
.afplay-header-nav .toggleNav i,
.afplay-header-nav .afplay-header-search .toggleSearchField i {
  margin-left: 0.5rem;
}


/* --- MAIN NAVIGATION --- */

.afplay-header-nav .dropdown-header.env-is-open .dropdown-toggle {
  background: #f5f4f3;
}

.afplay-header-nav .dropdown-header.env-is-open .dropdown-toggle i {
  transform: rotate(-180deg);
}

/* --- SUBMENU --- */

.afplay-header-nav .afplay-menu-header,
.afplay-header-nav .afplay-header-search .afplay-header-search-field label{
  font-size: 1rem;
  margin: 0;
  margin-bottom: 0.5rem;
}

.afplay-header-nav .dropdown__menu {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #f5f4f3;
  padding: 1rem;
  box-shadow: none;
  /*display: flex;*/
  flex-direction: column;
  max-width: unset;
  min-width: unset;
  box-sizing: border-box;
  border-bottom: 1px solid #d1d1d1;
}

.afplay-header-nav .dropdown__menu a {
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  /*margin: 0.5rem 0;*/
  margin: 1rem 0;
  min-height: unset !important;
}

.afplay-header-nav .dropdown__menu a:hover {
  background: transparent;
  text-decoration-thickness: 2px;
}


/* --- SEARCH FIELD --- */

.afplay-header-nav .afplay-header-search {
  position: relative;
  z-index: 10;
}

.afplay-header-nav .afplay-header-search .afplay-header-search-field {
  display: none;
 position: absolute;
  padding: 1rem;
  background: #f5f4f3;
  right: 0;
   border-bottom: 1px solid #d1d1d1;
  border-right: 1px solid #f5f4f3;
  margin-right: -1px;
}

.afplay-header-nav .afplay-header-search .afplay-header-search-field .afplay-header-search-field-form {
  margin-top: 1rem;
  width: 100%;
  /*display: flex;*/
  align-items: center;
}

.afplay-header-nav .afplay-header-search .afplay-header-search-field .afplay-header-search-field-form input {
  border-radius: 0.375rem;
  border: 1px solid #d1d1d1;
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

.afplay-header-nav .afplay-header-search .afplay-header-search-field .afplay-header-search-field-form input:first-child {
  flex-grow: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

.afplay-header-nav .afplay-header-search .afplay-header-search-field .afplay-header-search-field-form input[type="submit"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  border-color: #00005A;
  background: #00005A;
  color: #fff;
  font-weight: 600;
}

.afplay-header-nav .afplay-header-search .afplay-header-search-field .afplay-header-search-field-form input[type="submit"]:hover,
.afplay-header-nav .afplay-header-search .afplay-header-search-field .afplay-header-search-field-form input[type="submit"]:focus {
  background: #1616B2;
  border-color: #1616B2;
}

/* --- Search field open --- */

.afplay-header-nav .afplay-header-search.open .toggleSearchField {
  background: #f5f4f3;
}

.afplay-header-nav .afplay-header-search.open .afplay-header-search-field {
  display: block;
}

@media(min-width: 901px) { 

  .afplay-header-nav .dropdown--media .dropdown__menu,
  .afplay-header-nav .dropdown--categories .dropdown__menu,
  .afplay-header-nav .dropdown--languages .dropdown__menu {
     margin: 1rem 0;
  }
   
  .afplay-header-nav .afplay-header-search .afplay-header-search-field .afplay-header-search-field-form {
     display: flex;
  }
   
  .afplay-header-nav .dropdown--media .dropdown__menu,
  .afplay-header-nav .afplay-header-search .afplay-header-search-field {
     width: 546px;
     box-sizing: border-box;
  }
  .afplay-header-nav .dropdown--categories .dropdown__menu {
     width: 427px;
     box-sizing: border-box;
  }
  .afplay-header-nav .dropdown--languages .dropdown__menu {
     width: 299px;
     box-sizing: border-box;
  }
  .afplay-header-nav .afplay-header-search .sv-searchform-portlet {
     position: absolute;
     right: 0;
     top: 100%;
  }
}

@media(max-width: 900px) {
   
  body.nav-open, html.nav-open {
     height: 100vh;
     overflow: hidden;
     box-sizing: border-box;
  }
  
  body.nav-open main:before {
     display: block;
     pointer-events: none;
     content: "";
     width: 100%;
     height: 100%;
     background: rgba(0,0,0, 0.7);
     position: absolute;
     z-index: 100;
  }
  
  body.nav-open .afplay-banner-wrapper:before {
     pointer-events: none;
     display: block;
     content: "";
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     z-index: 1;
     background: rgba(0,0,0, 0.7); 
  }
  
  .afplay-header-wrapper {
     display: flex !important;
     align-items: center;
  }
  
  .afplay-header-nav {
     margin-right: -1.6rem;
     position: absolute;
		 display: flex;
		 justify-content: flex-end;
		 right: 0;
  }
   
   .afplay-header-nav nav {
      height: calc(100vh - 75px);
   }
  
  .afplay-header-nav nav > div {
     flex-flow: column nowrap;
     flex-direction: column;
     height: 100% !important;
     width: 100%;
     overflow-x: hidden;
  }
  
  /* --- BUTTONS --- */
  
  .afplay-header-nav .toggleNav {
     display: flex;
     padding: 0.5rem 1.6rem;
  }
  
  .afplay-header-nav .toggleNav i.afplay-close-menu {
     color: transparent;
     margin-top: 4px;
     font-size: 1px;
  }
  
  .afplay-header-nav .toggleNav i.afplay-close-menu:before {
     content: "";
     display: block;
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+MjFFQ0M3MjYtOUFBOC00NjRDLTgxNjYtMENBQkM2QzRGRTRDQDJ4PC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxwb2x5Z29uIGlkPSJwYXRoLTEiIHBvaW50cz0iNTEuNDIyMTU0MyA4IDU2IDEyLjU3Nzg0NTcgMzYuNTc3IDMyIDU2IDUxLjQyMjE1NDMgNTEuNDIyMTU0MyA1NiAzMiAzNi41NzcgMTIuNTc3ODQ1NyA1NiA4IDUxLjQyMjE1NDMgMjcuNDIyIDMyIDggMTIuNTc3ODQ1NyAxMi41Nzc4NDU3IDggMzIgMjcuNDIyIj48L3BvbHlnb24+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iSWtvbmd1aWRlIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTE4NC4wMDAwMDAsIC0zMTAuMDAwMDAwKSIgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE3Ni4wMDAwMDAsIDMwMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgPHVzZSBpZD0i8J+foi1DT0xPUiIgZmlsbD0iIzMzMzMzMyIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
     width: 0.8rem;
     height: 1rem;
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
  }
  
  .afplay-header-nav .toggleNav.open .afplay-open-menu,
  .afplay-header-nav .toggleNav .afplay-close-menu {
     display: none;
  }
  
  .afplay-header-nav .toggleNav.open .afplay-close-menu {
     display: block;
  }
  
  .afplay-header-nav nav > div > .dropdown-header,
  .afplay-header-nav nav > div, 
  .afplay-header-nav .dropdown-header .dropdown-toggle {
     height: auto;
  }
   
   
  .dropdown.env-dropdown-header.env-dropdown button[aria-expanded='true'] i {
    transform: rotate(-180deg);
  }
  
  
  /* --- MAIN MENU --- */
  
  .afplay-header-nav nav {
     margin-top: 76px;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     max-width: 500px;
     background: #00005A;
     color: #fff;
     position: absolute;
     transform: translateX(100%);
		 overflow-y: auto;
		 overflow-x: hidden;
		 z-index: 1000;
		 transition: transform 0.2s ease;
		 width: 0;
		 right: 0;
  }
  
  .afplay-header-nav nav.open {
    width: 95vw;
    transform: translateX(0%);
    transition: transform 0.2s ease;
  }
  
  .afplay-header-nav .dropdown-header {
     width: 100%;
  }
  
  /* --- SUBMENU --- */
  .afplay-header-nav .dropdown-header.env-is-open .dropdown-toggle,
  .afplay-header-nav .dropdown-header .dropdown-toggle:hover,
  .afplay-header-nav .dropdown-header .dropdown-toggle:focus {
     background: #00005A;
  }
  
  .afplay-header-nav .dropdown-header .dropdown-toggle {
     color: #fff;
     width: 100%;
     border: 0;
     padding: 1rem 1.6rem;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     display: flex;
     justify-content: space-between;
     font-size: 1.125rem;
  }
  
  .afplay-header-nav .dropdown-header .dropdown-toggle:first-child {
     border-top: 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .afplay-header-nav .dropdown-header .dropdown-toggle:last-child {
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .afplay-header-nav .afplay-menu-header {
   	display: none;
  }
  
  .afplay-header-nav .dropdown__menu {
   /*display: none;
     inset: 0px auto auto 0px;*/
     padding: 0.5rem 0;
     position: relative !important;
     transform: translate3d(0,0,0) !important;
     background: #00004D;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .afplay-header-nav .dropdown__menu a {
     margin: 0;
     padding: 1rem 1.6rem;
     color: #fff;
  }
  
  .afplay-header-nav .dropdown__menu a:hover {
     background-color: #00003D;
  } 
  
  .afplay-header-nav .dropdown-header.env-is-open .dropdown__menu {
     display: flex !important;
  }
  
  /* --- SEARCH FIELD --- */
  
  .afplay-header-nav .afplay-header-search {
     position: static;
  }
  
  .afplay-header-nav .afplay-header-search .afplay-header-search-field {
     width: calc(100vw - 3rem);
     padding-right: 2rem;
     top: 50px;
  }
  
  /* --- BACK TO AF.SE BUTTON --- */
  .afplay-header-nav nav .sv-button-portlet,
  .afplay-header-nav-back-to-af{
     width: 100%;
     margin-top: auto;
  }
  
  .afplay-header-nav nav .sv-button-portlet > div:not(#Knapp) {
     width: 100%;
  }
  
  .afplay-header-nav a.env-button {
     background: #00004D;
     border-radius: 0;
     border: 0;
     color: #fff;
     width: 100%;
     justify-content: flex-start;
     padding: 1rem;
     font-weight: 600;
     font-size: 1.05rem;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .afplay-header-nav a.env-button:before {
     content:"\f156";
     font-family: "af-webfont-new";
     transform: rotate(90deg);
     margin-right: 1rem;
  }
  
}

@media (max-width: 767px) {
  
  .afplay-header-wrapper {
     height: 50px;
  }
  
  .afplay-header-logo {
     overflow: hidden;
  }
  
  .afplay-header-logo > a {
     display: block;
  }
  
  .afplay-header-logo img {
     height: 32px !important;
     object-fit: contain;
     object-position: left;
  }
  
  /* --- BUTTONS --- */
  .afplay-header-nav .toggleNav {
      padding: 0.5rem 1rem;
  }
  
  /* --- MAIN MENU --- */
  .afplay-header-nav {
     margin-right: -1rem;
  }
  
  .afplay-header-nav nav {
     margin-top: 51px;
     height: calc(100vh - 50px);
  }
  .afplay-header-nav .dropdown-header .dropdown-toggle {
     padding: 1rem;
  }
  .afplay-header-nav .dropdown__menu a {
     padding: 0.8rem 1rem;
  }
  
}

@media (max-width: 374px) {
  .afplay-header-nav a.env-button {
     font-size: 1rem;
  }
}