body {
    --main-font: 'Inter';
    --main-font: 'Source Sans Pro';    
    --ui-font-size:15px;
     
     --main-color:#106fdf;
     
     
     --bg-color:#fff;
     --bg-color-alt:#f8f8f8;
     
     --text-color:#242424;
     --text-color-alt:#6b6b6b;
     
     --border-color:#e5e5e5;
     
     --header-height-top: 80px;
     --header-height: 139px;
     
     
     --container-width:1400px;
    --container-width-sm:1200px;
    --container-width-xs:680px;
     
     
     
     --color-red:#ef4447;
    --color-green:#0fb780;
    --color-blue:#3a81f6;
    --color-blue-alt:#00a6a5;
    --color-pink:#ff66ac;
    --color-yellow:#f6a10d;
    
    
    --color-blue:#1b68ff;
	--color-blue-alt:#145ae5;
	
	--color-red:#a92c2c;
	--color-red-alt:#982626;
	
	--color-green:#a2c31c;
	--color-green-alt:#89a614;
	
	--color-yellow:#d09f21;
	--color-yellow-alt:#fbc332;
    
        
    font-family: var(--main-font);
    color:var(--text-color);
    overflow-y: scroll;
    overflow-x:hidden;
     
     background-color:var(--bg-color);

    margin:0;
     padding: 0;
   
}


@media (max-width: 1200px) {
    body {
        --header-height: 45px;
    }
}


p {
    line-height: 1.6;
    margin: 0 0 30px;
    color: var(--text-color);

}


img {
  max-width: 100%;
  max-height: 100%;
}

textarea:focus, input:focus{
    outline: none;
}


h5,[h5] {
    color:var(--text-color);
    font-weight: 700;
    font-size:26px;
    line-height: 1.4;
    margin:60px auto 15px;
}

h6,[h6] {
    color:var(--text-color);
    font-weight: 700;
    font-size:inherit;
    line-height: 1.6;
    margin: 20px 0 5px;
}

#content {
    margin-top:var(--header-height);
}





/* Containers
__________________________________________________________*/



[container] {
    width:var(--container-width);
    max-width:90%;
    margin:0 auto;
}
[container-sm] {
    width:var(--container-width-sm);
    max-width:90%;
    margin:0 auto;
}
[container-xs] {
    width:var(--container-width-xs);
    max-width:90%;
    margin:0 auto;
}
[container-xxs] {
    width:var(--container-width-xxs);
    max-width:90%;
    margin:0 auto;
}

[bg-color-alt] {
    background-color:var(--bg-color-alt);
}


/* Header
__________________________________________________________*/

header {
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    /*border-bottom:solid 1px var(--border-color);*/
    background-color:var(--bg-color);
    height: var(--header-height-top);
    z-index:1000;

}


header [header-container] {
    display:flex;
    align-items: center;
    height: var(--header-height-top);
    padding:0 30px;
    width:var(--container-width);
    margin:0 auto;
    gap:40px;
}

header [logo] img {
    max-height: 30px;
}

header form[search] {
    border-radius:30px;
    border:solid 1px var(--border-color);
    overflow: hidden;
    flex-grow: 1;
}
header form[search] input {
    border:0;
    padding:12px 20px;
}

header [header-container] [user] {
    margin-left: auto;
}

header [header-bottom] {
    background-color:var(--bg-color-alt);
}

header [header-bottom-container] {
    width:var(--container-width);
    margin:0 auto;
    padding:0 30px;
}

header [header-bottom-container] > ul {
    display:flex;
    align-items: center;
    gap:5px;
    padding:10px 0;
}

header [header-bottom-container] > ul > li a,
header [header-bottom-container] > ul > li > span{
    font-weight: 500;
    display:block;
    padding:6px 20px;
    border-radius:30px;
    font-size:15px;
    color:#000;
    position: relative;
}


header [header-bottom-container] > ul > li a:hover,
header [header-bottom-container] > ul > li > span:hover  {
    background-color:#b2caf7;
    color:#1c61e7;
    cursor:pointer;
}

header [header-bottom-container] > ul > li > span[featured] {
    background-color:#fff;
    display:flex;
    align-items: center;
    gap:10px;
    padding-left: 45px;
}

header [header-bottom-container] > ul > li > span[featured]:before {
    background-color:var(--main-color);
    content:"";
    width:30px;
    height: 30px;
    border-radius:50%;
    position: absolute;
    left:5px;
}

header [header-bottom-container] > ul > li > span[featured]:after {
    background-image: url("../img/icons/bars.svg");
    background-size:14px 14px;
    background-position: center center;
    background-repeat: no-repeat;
    display:block;
    width:30px;
    height: 30px;
    content:"";
    filter: invert(1) brightness(2);
    position: absolute;
    left:5px;
}

/* Footer
__________________________________________________________*/


footer {
    padding:25px 0;	
    z-index:50;
    background-color:var(--bg-color);
}

	footer ul li {
		display:inline-block;
	}

	footer [footer-upper] {
		overflow: visible;
        text-align: center;
        padding:20px 0 5px;
	}

		footer [footer-upper] li > a {
			display:block;
			padding:8px 20px 8px 0;
			font-size:14px;
			font-weight: 400;
            color:var(--text-color);
		}

        

		footer [footer-upper] span{
			display:block;
			padding:8px 14px 8px 0;
			font-size:12px;
			color:var(--text-color-alt);
            opacity:0.5;
            line-height: 1.6;
		}

        footer [footer-upper] li > a[active] {
            opacity:1;
        }

	footer [footer-lower] {
		overflow: hidden;
		border-top:solid 1px var(--border-color);
        text-align: center;
        padding-top:5px;
	}

		footer [footer-lower] a,
		footer [footer-lower] span{
			display:block;
			padding:8px 14px 8px 0;
			font-size:13px;
			color:var(--text-color);
            opacity:0.5;
		}

        footer [footer-lower] a[active]{
			color:var(--text-color);
		}


footer a:hover {
    opacity:1!important;
    color:var(--text-color)!important;
}


@media (max-width: 992px) {
    footer .row > div {
        text-align: center;
    }
    footer [footer-lower] a,
    footer [footer-lower] span{
        padding:3px;
    }
    footer [footer-lower] {
        padding-top:10px;   
    }
}




[category-panel] {
    width:60px;
    height: 100%;
    position: fixed;
    left: 0;
    top:0;
    border-right:solid 1px var(--border-color);
    background-color:var(--bg-color);
    z-index:1999;
    transition: all 0.2s ease;
    overflow: hidden;
    padding:10px 0;
}

[category-panel].active {
    width:270px;
    border-right:0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 16px 0px;
}


[category-panel][sub] {
    width:270px;
    transform: translateX(-540px);
    z-index:1998;
    opacity:0;
    pointer-events: none;
}

[category-panel][sub].active {
    transform: translateX(200px);
}

[category-panel][sub].focus {
    transform: translateX(269px);
    pointer-events: all;
    opacity:1;
}

[category-panel-mask] {
    position: fixed;
    width:100%;
    height: 100%;
    top:0;
    left: 0;
    background-color:rgba(0,0,0,0.5);
    z-index:1990;
    transition: all 0.2s ease;
    opacity:0;
    display:none;
}

[category-panel-mask].active {
    opacity:1;
}


[category-panel] ul li {
    white-space: nowrap;
}

[category-panel] ul li a,
[category-panel] ul li > span{
    padding:5px 10px;
    display:flex;
    align-items: center;
    gap:15px;
    color:var(--text-color);
    font-weight: 600;
    
    
}

[category-panel] ul li a:hover,
[category-panel] ul li a.active{
    color:var(--main-color);
}

[category-panel] ul li > span {
    margin-bottom:10px;
}

[category-panel] ul li [n] {
    border-radius:50%;
    height:40px;
    width:40px;
    text-align: center;
    line-height: 44px;
    flex-shrink: 0;
}


[category-panel] ul li[featured] span > [n] {
    background-color:var(--main-color);
}

[category-panel] ul li img {
    width:20px;
}

[category-panel] ul li[featured] span > [n] img {
    width:16px;
}