.header-container{
    //login popup
    .header-login{
        float: left;
        padding: 9px 0;
        > span{
            a{
                color: @theme-color;
                &:hover{
                    text-decoration: underline;
                }
            }
        }

        #modal-login{
            overflow-y: hidden !important;
        }
        .popup-login{
            background: #fff;
            padding: 0;
            width: 300px;
            position: relative;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            margin: 100px auto;
        }
        .close-login{
            background-color: #fff;
            opacity: 1;
            position: absolute;
            right: 0;
            top: 0;
            padding: 8px;
            text-align: center;
            color: @theme-color;
            font-size: 26px;
            font-weight: bold;
            line-height: 16px;
            font-family: 'times new roman';
            
            &:hover{
                color: @theme-color;
            }
        }
        .login-users-popup{
            display: table-cell;    
            padding: 25px 30px 0;               
            width: 100%;
            color: @text-color;
            .block-title{           
                margin-bottom: 15px;   
                padding: 0;
                background: transparent;
                border: none;                             
            }
            label{
                font-weight: normal;
                margin-bottom: 8px;
                color: #000;
            }
            em{
                color: #f00;
            }
            .input-text{
                width: 100%;
                margin-bottom: 15px;
            }
            .button{
                border-radius: 0;
                width: 115px;
            }
            .actions{
                background-color: #eee;
                padding: 15px 30px;
                margin: 0 -30px;
                margin-top: 10px;
                width: 300px;
                float: left;
                > a{
                    float: left;
                    margin-bottom: 10px;
                    width: 100%;
                    text-align: center;
                    display: none;
                }
                .submit-login{
                    float: left;
                }
            }
        }
        .new-users-popup{
            float: left;
            margin-left: 8px;
        }
    }

    .header{ 
        .header-top{                          
            .header-quick-access{
                position: relative;
                z-index: 10;
                .quick-access{
                    float: left;
                }                
            }

            ul{
                list-style: none;
                li{
                    padding: 6px 0;
                    position: relative;
                    float: left;
                    a{
                        padding: 0 20px 0 12px;
                        display: block;
                        color: #666;
                    }
                    &.parent{
                        padding: 9px 0;
                        > a{
                            position: relative;  
                            font-size: 85.71%;
                            color: #fff;
                            padding-left: 0;
                            &:after{
                                content: "\f107";
                                font-family: 'FontAwesome';
                                margin-left: 5px;
                            }
                            &:before{
                                content: "\f0c0";
                                font-family: 'FontAwesome';
                                margin-right: 8px;
                                font-size: 14px;
                            }                         
                        }
                    } 
                }
            }
            .form-language ul,
            .block-currency ul,
            ul ul{
                display: none;
                position: absolute;
                top: 40px;
                z-index: 2;
                background: #fff;
                border-top: 2px solid @theme-color;
                box-shadow: 0px 1px 2px #d9d9d9;
                li{
                    width: 100%;
                    padding: 0 20px;
                    font-size: 85.71%;
                }
                a{
                    border: none;
                    padding: 6px 0;
                    background-position: 0 center;
                    background-repeat: no-repeat;
                    border-bottom: 1px solid @border-color;
                    &.selected{
                        color: @theme-color;
                    }
                    &:hover{
                        color: @theme-color;
                    }
                }
                li:last-child{
                    > a{
                        border: none;
                    }
                }
            }
            .form-language,
            .block-currency{
                float: left;
                position: relative;
                cursor: pointer;
                padding: 12px 0;
                span{
                    display: block;
                    line-height: 16px;
                    padding: 0 20px;
                    position: relative;
                    font-size: 85.71%;
                    &:after{
                        content: "\f107";
                        font-family: 'FontAwesome';
                        margin-left: 5px;
                    }
                    &:before{
                        position: absolute;
                        content: "";
                        width: 1px ;
                        height: 10px;
                        background: #fff;
                        top: 4px;
                        left: -1px;
                    }                    
                }
            }
            .block-currency{
                span{
                    padding-right: 0;
                }
            }
            .form-language{
                span{
                    padding: 0 20px 0 45px;
                    background-position: 20px 3px !important;
                    &:after{
                        content: "\f107";
                        font-family: 'FontAwesome';
                        margin-left: 5px;
                    }
                }
                ul{
                    li {
                        a{
                            padding: 6px 0 6px 30px;
                        }
                    }
                }
            }
            .form-language ul,
            .block-currency ul{
                width: 130px;
            }
            .links .links{
                width: 155px;
            }
            ul li:hover > ul,
            .block-currency:hover > ul,
            .form-language:hover > ul{
                display: block;
            }
        }

        //header1
        &.header_style1,
        &.header_style2,
        &.header_style3{
            color: #fff;
            .header-under-inner{
                position: relative;
                width: 100%;
                float: left;
            }            
            .header-top{
                height: 40px;                
                .header-hotline{
                    font-size: 85.71%;
                    padding: 9px 0;
                    i{
                        font-size: 16px;
                        margin-right: 10px;
                    }
                }
                .header-quick-access{
                    .header-quick-access-inner{
                        float: right;
                    }
                }
            }
        }

        //header1
        &.header_style1{
            .header-top{
                background: #fff;
                color: #666;
                .header-hotline{
                    padding: 9px 15px;
                }  
                ul li.parent > a{
                    color: #666;
                } 
                .form-language span::before, 
                .block-currency span::before{
                    background: #666;
                }                                             
            }

            .header-under{
                border-top: 1px solid @border-color;
                background: #fff;
                padding: 30px 0;
                .logo{
                }
            } 

            .header-menu{
                background:#fdd600;
                .header-menu-inner{
                    position: relative;
                    width: 100%;
                    .menu-nav{
                        padding-left: 320px;
                    }
                    .block-header-service{
                        line-height: 100%;
                        font-size: 85.71%;
                        position: absolute;
                        top: 0;
                        right: 0;
                        background: @theme-color;
                        padding: 13px 17px;
                        height: 50px;
                        .service-content{
                            float: left;
                            .service-title{
                                text-transform: uppercase;
                            }                
                        }
                        .service-icon{
                            float: left;
                            margin-right: 10px;
                            font-size: 24px;
                        }
                    }                    
                }
            }
        }

        //header2
        &.header_style2{
            .header-top{
                background: #222222;
                width: 100%;
                .header-hotline{
                    padding: 9px 15px;
                }                
            }

            .header-under{
                border-bottom: 1px solid #f0f0f0;
                padding: 32px 0;
                .logo{
                    text-align: center;
                }
            } 

            .header-menu{
                .header-menu-inner{
                    position: relative;
                    width: 100%;
                    float: left;
                }
            }            
        }

        //header3
        &.header_style3{
            .header-top{
                background: #111;
                .header-hotline{
                    padding: 9px 15px;
                }                
            }

            .header-under{
                background: #222;
                .header-under-inner{
                    position: relative;
                    width: 100%;
                }
                background: #222;
                padding: 30px 0;
            } 

            .header-bottom{
                background: #222;
                .header-bottom-inner{
                    position: relative;
                }
                .cat-search{
                    float: right;
                    padding-left: 270px;
                    width: 100%;
                }                
            }   
        }
        
    }
}