@import "bootstrap.min.css";

.dxbrv-gridlayout-side-bar-content {
	background-color: white !important;
}


#main-window-template-component > div.xaf-flex-auto.overflow-hidden.d-flex > div.main.xaf-flex-auto.overflow-hidden.d-flex.flex-column > div.xaf-flex-auto.d-flex.flex-column > div > div.main-content.d-flex.xaf-flex-auto.pb-3 > dxbl-scroll-viewer > div {
	background-color: rgba(69,69,69);
}
.dxbl-tabs > .dxbl-tabs-tablist.dxbl-tabs-tablist-scrollable > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul {
	background-color: rgba(255,255,255);
}

.main-content {
	background-color: rgba(69,69,69);
}
#main-window-template-component > div.xaf-flex-auto.overflow-hidden.d-flex > div.main.xaf-flex-auto.overflow-hidden.d-flex.flex-column > div.xaf-flex-auto.d-flex.flex-column > div > div.main-toolbar.py-3.px-2.px-sm-3
{
	background-color: rgba(69,69,69);
}

#main-view-content > div > div.main-toolbar.py-3.px-2.px-sm-3 {
	background-color: rgba(69,69,69);
}

#main-window-template-component > div.xaf-flex-auto.overflow-hidden.d-flex > div.w-100.overflow-auto {
	background-color: rgba(69,69,69);
}


.dxbl-scroll-viewer {
	background-color: rgba(69,69,69);
}
#main-window-template-component > div.xaf-flex-auto.overflow-hidden.d-flex > div.main.xaf-flex-auto.overflow-hidden.d-flex.flex-column > div.xaf-flex-auto.d-flex.flex-column > div > div > dxbl-scroll-viewer > div {
	background-color: rgba(69,69,69);
}
.module-border-wrap {
	max-width: 250px;
	padding: 1rem;
	position: relative;
	background: linear-gradient(to right, #00B2A9, transparent);
	padding: 3px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
	background: linear-gradient(to right,snow,transparent);
	color: #4d4d4c;
	cursor: pointer;
	padding: 2px;
	width: 100%;
	margin-bottom: 5px;
	margin-top: 10px;
	text-align: left;
	outline: none;
	font-size: 15px;
	border-style: solid;
	border-color: #00B2A9;
	border-top-width: 0px;
	border-bottom-width: 3px;
	border-left-width: 0px;
	border-right-width: 0px;
}
	/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
	.active, .collapsible:hover {
		background-color: #ccc;
	}
/* Style the collapsible content. Note: hidden by default */
.content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: #f1f1f1;
}

/*//.xaf-flex-auto.overflow-hidden.d-flex {
	// background-color: rgba(69,69,69);
	//
}
*/

.dxbl-scroll-viewer .dxbl-scroll-viewer-content {
	background-color: rgba(255,255,255);
}

.dxbl-fl .dxbl-fl-tab-content {
	padding: var(--dxbl-fl-tab-group-content-padding-y) 0 !important;
}

.logon-template-body {
	background-color: rgba(69,69,69);
}

.logon-template-body {
	background-color: rgba(69,69,69);
}

.dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist > .dxbl-scroll-viewer, .dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist > ul {
	border-bottom: groove;
	border-bottom-width: initial;
	border-bottom-style: solid;
	border-bottom-color: #00AFAB;
}

.dxbl-tabs-item.dxbl-active {
	background-color: #EAEBEB !important;
}

.about-info {
	color: #7F7F7F !important;
	opacity: 1 !important;
}

.loading-items-center {
	background-color: rgba(69,69,69);
}

.loading-caption {
	color: #7F7F7F !important;
}

.xaf-loading-content {
	background-color: white !important;
}

	.xaf-loading-content.text-primary {
		color: var(--bs-primary) !important;
	}

.loading-image-wrapper {
	width: 120px;
	height: 120px;
	background-color: white !important;
	transition: 0.5s;
}


.xaf-sidebar {
	padding: 20px;
	padding-right: 10px;
	background-color: rgba(69,69,69);
}

.dxbl-navigation-filter.dxbl-text-edit {
	margin-top: 4px;
}

#main-window-template-component > div.xaf-flex-auto.overflow-hidden.d-flex > div.xaf-sidebar.sidebar.d-none.d-sm-flex.flex-column > div.xaf-flex-auto.overflow-auto {
	margin-bottom: 5px;
}

.account-main .logo-container .xaf-image {
	color: rgba(69,69,69);
}

/* You need this bit if you want to get rid of the tabs - makes the tool;bar background the same colour as the rest 
#main-window-template-component > div.xaf-flex-auto.overflow-hidden.d-flex > div.main.xaf-flex-auto.overflow-hidden.d-flex.flex-column > div.main-toolbar.py-3.px-2.px-sm-3 {
	background: rgba(69,69,69);
}
*/

.dxbl-popup-adaptivity .dxbl-row {
	background-color:white;
}

/* This is the splitter for the Master/Detail views */
.xaf-masterdetail-splitter {
	background-color: white !important;
}


/* This datalist the scroll bar visible when a details view exceeds thead screen height */
.dxbl-scroll-viewer-vert-scroll-bar.dxbl-active {
	color: rgb(0, 178, 169);
	width:10px;
	padding:5px;
}