:root{
    --headheight: 55px;
}
.page-wraper.header-fixed{
	&:before{
		content: "";
		height: var(--headheight);
		width: 100%;
		display: table;
		z-index: -1;
		position: relative;
	}
	.header{
		position: fixed;
		top: 0;
		z-index: 999;
		left: 0;
		background-color: var(--primary-light);
		backdrop-filter: blur(10px);
		transition: all 0.5s;
		width: 100%;
	}
}
.sticky-header{
	position: fixed;
	top: 0;
	z-index: 99999;
	left: 0;
	background-color: #FFFBF6;
	transition: all 0.5s;
	width: 100%;
}
.header{
    min-height: var(--headheight);
    z-index: 2;
    border-bottom: 1px solid var(--border-color-2);
    &.transparent{
        position: absolute;
        width: 100%;
        top: 0;
        background-color: transparent!important;
		border-bottom: 1px solid var(--border-color-2)!important;
        border: 0;
        left: 0;
		z-index: 999;
        .left-content{
			.back-btn{
				color: #2f2f2f;
			}
            .menu-toggler{
				color: #000;
				svg{
					path{
						fill: #bfc9da;
					}
				}
			}
        }
        .main-bar{
			.back-btn{
				svg{
					path{
						fill: #fff;
					}
				}
			}
			.menu-toggler{
				color: #fff;
			}
            &.sticky-header{
                .left-content{
					h5{
						color: var(--title);
					}
                    .menu-toggler{
                        color: var(--primary);
                    }
                }
                .header-content{
                    .back-btn{
						color: #000;
						svg{
							path{
								fill: #bfc9da;
							}
						}
					}
					.menu-toggler{
						color: #000;
						svg{
							path{
								fill: #bfc9da;
							}
						}
					}
                    .mid-content{
                        h5{
                            color: #000;
                        }
                    }
                }
                .right-content{
                    .theme-btn,
                    .theme-color{
                        color: #bfc9da;
                        svg{
                            &.color-plate{
                                path{
                                    fill: #bfc9da;
                                }       
                            }
                        }
                    }
					.item-bookmark{
						svg path{
							fill: #d9d9dc;
						}
						&.active{
							svg path{
								fill: #ff586e;
							}	
						}
					}
                }
            }
            &:not(.sticky-header){
                .form-check{
                    &.checkmark{
                        padding:0;
                        .form-check-label{
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            border-radius: 0;
                            text-align: center;
                            border: 0;
                            line-height: 0;
                            svg{
                                path{
                                    stroke: #fff;
                                }
                            }
                        }
                        .form-check-input{
                            display:none;
                        }
                        .form-check-input:checked + .form-check-label{
                            background-color:transparent;
                            svg{
                                path{
                                    fill: #fff;
                                }
                            }
                        }	
                    }
                }    
            }
            
            h5{
                color: #fff;
            }
            .dropdown{
                .dropdown-toggle{
                    &:after{
                        content: none;
                    }    
                }    
            }
        }
        .right-content{
            .theme-btn,
            .theme-color{
                width: 35px;
                display: inline-block;
                height: 35px;
                text-align: center;
                line-height: 35px;
                padding: 0;
                svg{
                    fill: #bfc9da;
                    path{
                        fill: #bfc9da;
                    }    
                    &.color-plate{
                        path{
                            fill: #bfc9da;
                        }       
                    }
                }
                .light{
                    display: none;
                }
                &.active{
                    .light{
                        display: inline-block;
                    }
                    .dark{
                        display: none;
                    }
                }
            }
        }
    }
	
	.back-btn{
		display: flex;
		line-height: 1;
		font-size: 20px;
		width: 35px;
		height: 35px;
		min-width: 35px;
		align-items: center;
		justify-content: center;
		margin-right: 15px;
		color: #2f2f2f;
	}
	
	.menu-toggler{
    	font-size: 20px;
		color: var(--title);
		display: flex;
		align-items: center;
		justify-content: center;
		i{
			line-height: 1;
		}
	}
    .container{
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .main-bar{
        display: flex;
        height: 100%;
		min-height: var(--headheight);
        align-items: center;
        
        .left-content{
            min-width: 30px;    
            height: 100%;
            display: flex;
            align-items: center;
        }
        .mid-content{
			flex: 1;
			text-align: center;
        }
        .right-content{
            .form-check{
                &.checkmark{
                    padding:0;
                    .form-check-label{
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        border-radius: 0;
                        text-align: center;
                        border: 0;
                        line-height: 0;
                    }
                    .form-check-input{
                        display:none;
                    }
                    .form-check-input:checked + .form-check-label{
                        background-color:transparent;
                        svg{
                            path{
                                fill: var(--primary);
                            }
                        }
                    }	
                }
            }    
        }
    }
    &.user-head{
        .header-content{
            .mid-content{
                display: flex;
                align-items: center;
                .media{
                   margin-right: 10px;
                }
            }
            .right-content{
                .dropdown{
                    .dropdown-toggle{
                        &:after{
                            content: none;
                        }
                    }    
                }
            }
        }
    }
}
.header.transparent{
    & ~ {
        .banner-wrapper,
        .content-inner{
            padding-top: var(--headheight)!important;
        }        
        .banner-wrapper + .content-inner{
            padding-top: 0!important;
        }
    }
}