/*==========================
    BASE COLOR
==========================*/
:root{
    --bodyBg: #F9F6F1;
    --baseBg: #6C6C6C;
    --baseBgHover: #7b7b7b;
    --headerTopBg: #34424a;
    --headerTopBgHover: #19191a;
    --baseCol: #FFF;
    --menuCol: #D7D7D7;
    --menuHoverCol: #FBCA11;
}
#area-headertop{
    background-color: var(--headerTopBg);
    color: var(--baseCol);
}
#area-headertop{
    border-bottom: 1px solid var(--headerTopBgHover);
}
/*==========================
    BASE FONT COLOR
==========================*/
body{
    background-color: var(--bodyBg);
}
/*==========================
    MENU BACKGROUND COLOR
==========================*/
#area-menu{
    /* background-color: var(--baseCol); */
    height: 60px;
    border-bottom: 1px solid #d6d6d6;
    background: -webkit-linear-gradient(var(--baseCol),#eaeaea);
    background: -moz-linear-gradient(var(--baseCol),#eaeaea);
    background: linear-gradient(var(--baseCol),#eaeaea);
}
/*==========================
    MENU ITEM COLOR
==========================*/
.navmenu > ul > li > a{
	color: var(--baseCol);
}
ul.menu-horizontal > li:hover > a::before,ul.menu-horizontal > li.active > a::before{
	border-bottom: 3px solid var(--headerTopBg);
}
#area-sidebar{
    background-color: var(--baseBg);
}
#MyClockDisplay {
    background-color: var(--baseBgHover);
    color: var(--baseCol);
}

/*==========================
    SIDEBAR MENU ITEM COLOR
==========================*/
.main-menu{
    border-top: 1px solid var(--baseBgHover);
}
.main-menu > ul > li a,.main-menu > ul ul{
	color: var(--menuCol);
	border-bottom: 1px solid var(--baseBgHover);
}
.main-menu > ul > li > a > span.nav-ico {
    background-color: var(--baseCol);
}
.main-menu > ul > li:hover > a,.main-menu > ul > li.active > a,
.main-menu > ul ul > li:hover > a,.main-menu > ul ul > li.active > a
{
	color: var(--menuHoverCol);
}

.card .card-header,.card .card-footer{
	border: 1px solid#d6d6d6;
	background: -webkit-linear-gradient(var(--baseCol),#eaeaea);
	background: -moz-linear-gradient(var(--baseCol),#eaeaea);
	background: linear-gradient(var(--baseCol),#eaeaea);
}
.card .card-body{
    background-color: var(--baseCol);
    border: 1px solid#d6d6d6;
}
.card .card-header h2,.header-controls{
    background: -webkit-linear-gradient(#eaeaea,var(--baseCol));
    background: -moz-linear-gradient(#eaeaea,var(--baseCol));
    background: linear-gradient(#eaeaea,var(--baseCol));
}
.header-controls ul li{
    border-right: 1px solid #c2c0c0;   
}
.header-controls ul li a{
    color: #333;    
}
.header-controls ul li.active a::before,.header-controls ul li:hover a::before{
    border-bottom: 3px solid var(--headerTopBg);
    width: 100%;
}
footer{
    background-color: var(--baseCol);
    border-top: 1px solid#e7e7e7;
    color: #a19c9c;
}
footer a{
    color: #a19c9c;
    font-weight: bold;
}
.input-small input:focus,.input-small select:focus,.input-small textarea:focus,
.input-large input:focus,.input-large select:focus,.input-large textarea:focus
{
	border-bottom-color: var(--baseBg);
}
#closeMenus {
	color: var(--baseCol);
}

@media(min-width: 768px){
    [sitebar="false"] .logo{
        border-bottom: 1px solid var(--baseBgHover); /** .main-menu **/
    }
    [sitebar="false"] .main-menu > ul > li:hover, [sitebar="false"] .main-menu > ul > li.active,  
    [sitebar="false"] .main-menu > ul > li > ul::after,  
    [sitebar="false"] #area-sidebar::after {
		background-color: var(--baseBg); /** #area-sidebar **/
	}
    [sitebar="false"] .main-menu > ul > li.active-x > a > span.nav-ico {
        background-color: var(--menuHoverCol);
    }
}