/* [ Layout ] */

/* < Header > */

/* Header */
.btn-show-header {
    border-color: var(--primary-font-color);
    background-color: var(--primary-color);
    background-image: var(--prim-logo-url);
}
.top-header { background-color: var(--primary-color); }

/* Logo */
.home-logo a, .hide-home-logo a { background-image: var(--prim-logo-url); aspect-ratio: 41 / 31; }

/* Menu */
.top-header .top-menu .menu-name { color: var(--prim-menu-color); }
/* .top-header .top-menu a:hover, .top-header .top-menu a.active { border-bottom: 3px solid var(--prim-menu-color); }
.top-header .top-menu a:hover, .top-header .top-menu a.active { color: var(--primary-color); } */

/* Button */
.top-header .top-buttons { color: var(--prim-btn-color); }
.top-header .top-buttons .bg-icon.icon-login { background-image: var(--prim-login-icon-url); aspect-ratio: 1 / 1; }
.top-header .top-buttons .bg-icon.icon-person { background-image: var(--prim-person-icon-url); aspect-ratio: 1 / 1; }
.top-header .top-buttons .bg-icon.icon-bell { background-image: var(--prim-bell-icon-url); aspect-ratio: 1 / 1; }
.top-header .top-buttons .bg-icon.icon-logout { background-image: var(--prim-logout-icon-url); aspect-ratio: 1 / 1; }


/* < Side-bar > */
.side-bar { background-color: var(--secondary-color); }
.side-bar ul.side-menu li { color: var(--scnd-menu-color); }
.side-bar ul.side-menu li:hover, .side-bar ul.side-menu li.active {
    color: #FFFFFF; background-color: var(--primary-color);
}


/* < Content > */
body { background-color: var(--primary-body-color); }

/*
@media (max-width: 870px) { .home-logo a { background-image: var(--prim-small-logo-url); aspect-ratio: 1 / 1; } }
@media (max-width: 768px) {}
*/