/*** variables ****/

:root {
	--scroll-color: #a3aabb;
	--body-color: #434242;
	--table-color: var(--primary);
	--modal-header-bg: #a1cfde;
	--modal-header-h1-color: var(--primary-dark);
}

/***** CSS ********/

body, html {
    height: 100%;
    background: var(--body-color);
    color: var(--text-color);
    @extend .mini-scroll;
}

a{
	text-decoration: none;
	color: inherit;
	&:hover{
		text-decoration: none;
	}
}

.vlFieldErrors {
	white-space: nowrap;
}


.vlTableWrapper {
    border: 1px solid gainsboro;
    border-radius: 0.4rem;
	thead th {
		background-color: var(--table-color);
		color: white;
		&:first-child{
			border-top-left-radius: 0.4rem;
		}
		&:last-child{
			border-top-right-radius: 0.4rem;
		}
	}
}
.page-item.active .page-link{
	background-color: var(--table-color);
}

.vlTags, .vlTag{
	font-size: 90%;
}

.vlAlertClose{
	opacity: 0.7;
}

/* SCROLL */

.mini-scroll::-webkit-scrollbar { height: 6px; width: 6px;  }
.mini-scroll::-webkit-scrollbar-track { background: #e7e9ec; border-radius: 5px; }
.mini-scroll::-webkit-scrollbar-thumb { background: var(--scroll-color); border-radius: 5px; }

.vl-sidebar-l, .vl-sidebar-r, .kompoScrollableContent{
    @extend .mini-scroll !optional;
}

.vl-sidebar-l, .vl-sidebar-r{
	padding-bottom: 1rem; //because of the bottom toolbar of mobile browsers
}

.vlPopup{
	@extend .mini-scroll !optional;
}