/* ARQIV palette applied (from arqiv-index.html) */
/* Style the navigation menu */
.topnav {
  display:flex;
  /*position:sticky;*/
  top:0px;
z-index:5005;
border:0px;
border-style: solid;
border-color:green;
  background-color: var(--accent);
  /*position: relative;*/
  /*display:block;*/
  /*width:100%;*/
  height:35px;
  border-bottom: 2px solid var(--ok);
  /*box-shadow: -1px -25px 27px 23px var(--text);*/
}

hr.header_menu {
  border: 1px solid var(--ok);

}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav-menusub #menusub {
  display: none;
  position: absolute;
  right:10px;
  /*width:100%;*/
  padding:20px;
  background-color: var(--accent);
  z-index:5002;
  text-decoration: none;
  border:2px;
  border-style: solid;
  border-color:var(--ok);

}

.topnav-menusub a {
  color: white;
  /*padding: 0px 10px;*/
  text-decoration: none;
  font-size: 18px;
  /*display: block;*/
  /*position: static;*/
}

.topnav-menusub a:hover {
  /* background-color: var(--accent); */
  color: rgb(0, 0, 0);
}

.topnav-menusub-category {
  color: rgb(0, 0, 0);
  padding-top: 10px;
  padding-bottom: 10px;
}



.topnav-customer-caret {
  color:white;
  }

  .topnav-customer-lock {
    display:none;
    color:white;
    }
  
.topnav-options {

white-space: nowrap;
width:100%;
border:0px;
padding: 0px 0px;
display: block;
  position: absolute;
  /*left: 50px;*/
  top: 0px;
  /*width:400px;*/
margin: auto;
color:white;
}

.topnav-item-customer-select {
  background-color: var(--accent);
  margin: 0 15px;
}
.topnav-item-help {
  background-color: var(--accent);
  /* margin: 0 15px; */
  padding-right:10px;
}

.topnav-item-evx-eshop {
  color:white;
  background-color: var(--accent);
  /* margin: 0 15px; */
  padding-right:5px;
  
}

.topnav-item-message {
  background-color: var(--accent);
  /* margin: 0 15px; */
  padding-right:10px;
  
}

.topnav-item-message-number {
  color:var(--warn);
  
}


.topnav-area-left {
  flex: 1;          /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /*border: 1px dashed red;*/
  margin: 0 5px;
}

.topnav-area-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px dashed red;*/
  margin: 0 5px;
}

.topnav-area-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /*border: 1px dashed red;*/
  margin: 0 5px;
}

.customer_select {
border:0px;
padding: 0px;
color: rgb(0, 0, 0);
background-color:var(--accent);
}

.customer_select input:focus, textarea:focus, select:focus{
outline: none;
}



/* Style navigation menu links */


.topnav a {
  color: white;
  /*padding: 0px 10px;*/
  text-decoration: none;
  font-size: 18px;
  /*display: block;*/
  /*position: static;*/
}

.topnav a.iconhome:hover {
    background: var(--accent);
}


/* Style the hamburger menu */
.topnav a.iconhome {
  background: var(--accent); /*blue*/
  /*display: inline-block;*/
  /*position: relative;*/
  /*left: 0;*/
  /*width: 20px;*/
}

.topnav a.iconmenu:hover {
    background: var(--accent);
}

/* Style the hamburger menu */
.topnav a.iconmenu {
  background: var(--accent); /*blue*/
  /*display: block;*/
  /*position: absolute;*/
  /*right: 0;*/
  /*top: 0;*/
}

.topnav a.username:hover {
    background: var(--accent);
}

.topnav a.username {
  background: var(--accent); /*blue*/
  /*display: block;*/
  /*position: absolute;*/
  /*left: 40px;*/
  /*top: 0;*/
}



/* Add background color on mouse-over */
.topnav a:hover {
  background-color: var(--accent);
  color: rgb(255, 255, 255);
}

/* Style the active link (or home/logo) */
.active {
  background-color: var(--accent);
  color: white;
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .topnav-area-center {
    display:none; /* The width is 100%, when the viewport is 800px or smaller */
  }

  .topnav-item-message-number-count{
    display:none; 
  }

  .topnav-item-evx-eshop{
    display:none; 
  }
}

  /* Use a media query to add a break point at 400px: */
@media screen and (max-width:400px) {
  /* The width is 100%, when the viewport is 400px or smaller */
  .topnav-item-help {
    display:none; 
  }

  .topnav-item-message{
    padding-right:10px;
  }

  .topnav-item-evx-eshop{
    display:none; 
  }

}