#header {
	
	position: sticky;
  top: 0;
	z-index: 999;
}

#header .TopSargelCenter .Flex > a {
	
	color: #5f5b5b;
	text-decoration: none;
}

#header .TopSargelPlaceHolder > .TopSargelCenter > .JobsAdvertisement > a {
	
	background: var(--color3);
	color: var(--color1);
	text-decoration: none;
}

#header .TopSargelPlaceHolder > .TopSargelCenter > .JobsAdvertisement > a:hover {
  
  color: #5f5b5b;
	background: #fff;
}

#header .TopSargelPlaceHolder > .TopSargelCenter, #header .TopSargelPlaceHolder > .TopSargelCenter > .JobsAdvertisement {
	 
	width: auto;
	flex: 1;
}

#header  {
  
  .TopSargelTopBar {
    
    background: var(--color1);
    color: var(--color3);
    
    > div {
      
      width:100%;
      margin:auto;
      position:relative;
      display:flex;
      flex-flow:  row wrap;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
      
      nav {
        
        li {
         
          > a {
            
            background: var(--color1);
            color: var(--color3);
            
            &:hover {
  
              background: color-mix(in lab,var(--color3) 10% , var(--color1)  );
            }
            
            &:after {
              
              background: #e5e5e5;
            }
            
          }
        }
      }     
    }
    
    .MyAccountProfileItem {
      
      min-width: 85px;
      display: flex;
      justify-content: center;
    }
  }
  
  .TopSargelNavBar {
    
    background: var(--color3);
    color: var(--color1);
    
    > div {
      
      max-width: 1200px;
      width:100%;
      margin:auto;
      position:relative;
      display:flex;
      flex-flow:  row wrap;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
      
      
      nav {
        
        li {
         
          > a {
            
            background: var(--color3);
            color: var(--color1);
            
            &:hover {

              background: color-mix(in lab,var(--color1) 10% , var(--color3)  );
            }
            
            &:after {
              
              background: color-mix(in lab,var(--color1) 10% , var(--color3));
            }
          }
          
          &.selected {
            
            > a {
              
              color:  color-mix(in lab,var(--color1) 35% , var(--color3)  );
              background: color-mix(in lab,var(--color1) 5% , var(--color3)  );
            }
          }
        }
      }
    }
  }
}

#header .acctionPanel {
  
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  margin-inline-start: 10px;
}

#header .acctionPanel .button, #header .acctionPanel button {
  
  height: 30px;
  font-size: 12px;
  padding-inline: 15px;
  min-width: auto;
  background: white;
  color: #5f5b5b;
}

#header .acctionPanel .button:hover, #header .acctionPanel button:hover {
  
  background: color-mix(in lab, white, black 5%) !important;
}

#header .acctionPanel .button.whatsapp, header .acctionPanel button.whatsapp {
  
  background: #25d366;
  color: white;
}

#header .acctionPanel .button.whatsapp:hover, #header .acctionPanel button.whatsapp:hover {
  
  background: color-mix(in lab, #25d366, black 5%) !important;
}

.cn-body {
  
  #header  {
    
    .TopSargelLogoWarpper {
      
      display: flex;
      height: 45px;
      
      a {
        
        display: flex;
        align-items: center;  
        > img {
          
          max-height: 40px;
        }
      }
    }
    
    nav {
      
      flex-grow: 1;
    
      > ul {
        
        list-style: none;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        
        > li {
          
          flex: 1;
          max-width: 150px;
              
          > a {
            
            position: relative;
            text-decoration: none;
            font-size: 12px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            gap: 2px;
            padding: 5px 20px;
            min-height: 45px;
            transition: 250ms;
            line-height: normal;
            white-space: nowrap;
            width: 100%;
            

            &:after {
              
              content: '';
              width: 1px;
              height: calc(100% - 20px);
              position: absolute;
              inset-inline-end: 0;
              top: 50%;
              transform: translateY(-50%);
            }

            i {
              
              font-size: 16px;
            }
            
          }
          
          &:last-child {
            
            > a { 
              
              &:after {
              
                content: none;
              } 
            }
          }
        }
      }
    }
    
  }
}

@media only screen and (max-width: 1200px) { 
  
  #header .acctionPanel > span {
	  
	  display: none;
  }
}

@media only screen and (max-width: 800px) {
  
  #header .acctionPanel {
	  
	  display: none;
  }
}