/* [ Layout ] */


/* < Header > */

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

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

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

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


/* < Side-bar > */
.side-bar { background-color: var(--primary-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: var(--primary-color); background-color: #FFFFFF;
}


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

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