.bg-light{ background: linear-gradient(to bottom, #ececec 0, #e5e5e5 99%);box-shadow: 1px 2px 16px rgba(0, 0, 0, .14); }

.navbar-grid{ grid-area: menu;position: relative; }
.main-grid{ grid-area: main;margin-bottom: 40px; }

.grid-top{ display: grid;grid-template-rows: 50px 1fr;grid-template-areas:'menu' 'main'; }
.grid-left{ display: grid;grid-template-columns: 50px 1fr;grid-template-areas:'menu main'; }

.main-top{ margin-top: 50px; }
.main-left{ margin: 0; }

.fix-top{ position: fixed;top: 0;left: 0;right: 0;width: 100%;height: 50px;border-bottom: 1px solid rgba(86, 86, 86, .25); }
.fix-left{ position: fixed;top: 0;left: 0;right: 0;width: 50px;height: 100%;border-right: 1px solid rgba(86, 86, 86, .25); }

.navbar{ display: block;font-size: 16px !important;float: none;z-index: 2000 !important; }
.navbar a{ text-decoration: none; }
.navbar-nav-top{ list-style: none;display: flex;flex-direction: column; }
/*.navbar-nav-top .dropdown.active{ border-bottom: 1px solid var(--vmkGR); }*/
.navbar-nav-left{ list-style: none;display: block;padding: 0; }

.dropdown-toggle::after{ display: none; }
.dropdown-toggle.top{ line-height: 30px; }
.dropdown-toggle.left{ line-height: 30px; }

.dropdown{ display: block;font-size: 2rem;margin-bottom: 1rem; }
.nav-link.dropdown-toggle.active{ color: var(--vmkDGR) !important; }

.dropdown-menu.top{ position: relative;padding: 0.5rem;margin: 0.25rem 0;background: transparent;border: none;font-size: 1.5rem; }
.dropdown-menu.left{ position: relative;padding: 0.5rem;margin: 0.25rem 0;background: transparent;border: none;font-size: 1.5rem;float: none; }
.dropdown-menu.show{ display: block; }

.dropdown-header{ font-size: 1rem; }
.dropdown-item{ margin-bottom: 1rem; }

.dropdown-item:hover{ color: var(--vmkGR) !important; }
.dropdown-item.cdred:hover{ color: var(--vmkXLRED) !important; }
.dropdown-item.act{ color: var(--vmkDGR) !important; background: none; }
.dropdown-item.act:hover{ color: var(--vmkDGR) !important; background: #f8f9fa!important; }
.dropdown-item::before{ content: '';display: inline-block;width: 6px;height: 6px;border-radius: 3px;margin: 0 4px 3px 4px; }
.dropdown-item[data-color='yellow']::before{ background-color: var(--yellow); }
.dropdown-item[data-color='orange']::before{ background-color: var(--orange); }
.dropdown-item[data-color='red']::before{ background-color: var(--red); }
.dropdown-item[data-color='pink']::before{ background-color: var(--pink); }
.dropdown-item[data-color='purple']::before{ background-color: var(--purple); }
.dropdown-item[data-color='indigo']::before{ background-color: var(--indigo); }
.dropdown-item[data-color='blue']::before{ background-color: var(--blue); }
.dropdown-item[data-color='green']::before{ background-color: var(--green); }
.dropdown-item[data-color='teal']::before{ background-color: var(--teal); }
.dropdown-item[data-color='cyan']::before{ background-color: var(--cyan); }

.nav-link{ padding: 0 0.5rem 0 0.5rem;color:#777777 !important; cursor:pointer !important; }
.homenav{ font-size: 3rem;text-align: center;margin-bottom: 1rem; }

.navbar-toggler{ display: flex;position: relative;left: -20px !important;margin: auto !important; }

.navbar-collapse:not(.show){ display: none; }
.navbar-collapse.show{ display: block;position: absolute;max-height:90vh;overflow: auto;overflow-y: auto;width: 90vw;background: linear-gradient(to bottom, #ececec 0, #e5e5e5 99%);  }

@media(min-width:990px){
	
	.grid-left{ grid-template-columns: 150px 1fr !important; }
	.fix-left{ width: 150px !important; }
	
	.navbar-nav-top{ flex-direction: row !important; }
	.navbar-nav-left.personal{ position: absolute;bottom: 0;margin-top: auto !important; }
	
	.navbar-toggler{ display: none !important; }
	.navbar-collapse{ display: flex !important; }
	
	.dropdown{ display: inline !important;font-size: 1rem;margin-bottom: 0; }
	
	.dropdown-menu.top{ position: absolute;top: 100%;font-size: 1rem;padding: 0.5rem;margin: 0.25rem 0;background: white !important;border: 1px solid rgba(0, 0, 0, .25);border-radius: 0.25rem; }
	.dropdown-menu.left{ position: absolute;top: 0;left: 120px;font-size: 1rem;padding: 0.5rem;margin: 0.25rem 0;background: white !important;border: 1px solid rgba(0, 0, 0, .25);border-radius: 0.25rem; }

	.dropdown-header{ font-size: 0.8rem; }
	.dropdown-item{ margin-bottom: 0; }
	
	.personal.dropdown-menu.top{ position:absolute;left: auto !important;right: 0; }
	.personal.dropdown-menu.left{ top: auto !important;bottom: 0 !important; }
	.homenav{ font-size: 1.5rem;margin-bottom: 0; }
	
}