:root {
	--asamco-blue: #00477a;
	--accent-light: #f4faff;
	--accent-light-hover: #def0ff;
	--accent-dark: #00477aec;
	--base-radius: 5px
}

html.as-theme-asamco {

	.user-profile-container p,
	.user-profile-container span {
		font-family: 'Montserrat' !important;
		color: var(--asamco-blue) !important;
	}

	.quick-search-button {
		background-color: #f8f8f8 !important;
		color: var(--asamco-blue) !important;
		border-color: var(--asamco-blue) !important;
	}

	.aroundMain {
		background-color: var(--accent-light) !important;
		background-image: none !important;
	}

	body.bgimg {
		background-image: none !important;
		background: var(--accent-light);
	}

	.app {
		box-shadow: 0px 0px 7px -1px #00477a45 !important;
		border: solid var(--accent-light) 1px !important;
	}

	.app .title {
		font-family: Montserrat, Calibri, sans-serif;
		color: var(--asamco-blue);
	}

	body as-page-toolbar .icon {
		background-color: var(--asamco-blue) !important;
	}

	body as-page-toolbar {
		border-bottom: solid var(--accent-dark) thin !important
	}

	body as-page-toolbar .title {
		color: var(--asamco-blue) !important;
	}


	.dx-button-mode-outlined .dx-button-content {
		background: white !important
	}

	.dx-tab:not(.dx-tab-selected) {
		background-color: var(--accent-light) !important;
	}

	.label-container label {
		color: var(--asamco-blue) !important;
	}

	/* Header bar changes */

	app-header.main-app-header,
	header-bar-button button.btn {
		background-color: #f8f8f8;
		color: var(--asamco-blue);
	}

	app-header.main-app-header {
		box-shadow: 0px -4px 17px #00477a45 !important
	}

	app-header.main-app-header {
		border-bottom-left-radius: var(--base-radius);
		border-bottom-right-radius: var(--base-radius);
	}

	header-bar-button button,
	header-bar-button .button-code {
		border-radius: var(--base-radius);
		color: var(--asamco-blue) !important;
	}

	header-bar-button button:hover .button-code {
		color: var(--accent-light) !important
	}

	header-bar-button button.btn:hover {
		background-color: var(--accent-dark) !important;
		color: var(--accent-light) !important
	}

	/* END: Header bar changes */
	/* Menu changes */
	.main-container .main-menu .menu-item .menu-link {
		transition-duration: 200ms;
	}

	.menu-item {
		font-size: 12px !important;
		font-family: Montserrat, Calibri, sans-serif
	}

	/* , Calibri, 'Trebuchet MS', sans-serif; */
	.menu-item .item-caption,
	.menu-item .fa-fw {
		color: var(--asamco-blue) !important;
	}

	.menu-item.active .item-caption,
	.menu-item.active .fa-fw {
		color: white !important;
	}

	.main-container .main-menu .menu-link {
		margin: 3px 6px !important;
		padding: 7px 8px !important;
		border-radius: var(--base-radius);
	}

	.main-container .main-menu .menu-item.here>.menu-link {
		background-color: var(--accent-light) !important;
	}

	.main-menu .menu-item .menu-link:hover {
		background-color: var(--accent-light) !important;
		font-weight: 600 !important;
		padding-left: 10px !important;
	}

	.main-container .main-menu .menu-item.active>.menu-link {
		/* padding: 0px !important; */
		background-color: var(--accent-dark) !important;
		color: white !important;
	}

	body .card,
	body div.main .card:first-child {
		box-shadow: none;
		background: rgb(255 255 255 / 97%) !important;
		border-radius: 10px !important;
		box-shadow: 0 4px 30px rgb(0 0 0 / 5%);
		border: solid #a8a8a85c 1px !important;
	}

	.modal-content {
		background: rgb(255 255 255 / 51%) !important;
		box-shadow: 0 4px 30px rgb(0 0 0 / 5%) !important;
		backdrop-filter: blur(15.5px) !important;
	}

	body .card:has(.backDrop),
	body .modal-content:has(.backDrop)

	/* ,.backDrop .modal-content */
		{
		backdrop-filter: none !important;
		background: rgb(255 255 255 / 100%) !important;
	}

	.backDrop>* {
		background: transparent !important;
	}

	.backDrop {
		background: #d7d7d730 !important;
	}

	.modal-body {
		background: transparent !important;
	}

	.title,
	.header-card-title,
	.card-title,
	h1,
	h2,
	h3,
	h4,
	.dx-datagrid-headers {
		font-family: Montserrat, Calibri, sans-serif;
		font-optical-sizing: auto;
		/* font-weight: semi; */
		font-style: normal;
	}

	.text-info {
		color: var(--accent-dark) !important
	}

	.header-card-title,
	h1,
	h2,
	h3,
	h4,
	.title,
	.card-title,
	.dx-datagrid-headers {
		color: var(--asamco-blue) !important;
	}

	.card-title span {
		font-weight: 400 !important;
	}

	.dx-datagrid-headers {
		font-weight: 600 !important;
	}

	.dx-treelist .dx-row.dx-data-row.dx-state-hover>td,
	.dx-datagrid .dx-row.dx-data-row.dx-state-hover>td {
		background-color: var(--accent-light-hover) !important;
	}

	.dx-row.dx-data-row.dx-selection>td,
	.dx-row.dx-row-alt.dx-data-row.dx-selection>td {
		background-color: var(--accent-light-hover) !important;
		font-weight: 600;
		color: var(--asamco-blue) !important
	}

	.dx-datagrid .dx-data-row.dx-row-alt>td,
	.dx-datagrid .dx-data-row.dx-row-alt>tr>td,
	/*treelist*/
	.dx-treelist .dx-data-row.dx-row-alt>td,
	.dx-treelist .dx-data-row.dx-row-alt>tr>td {
		background-color: var(--accent-light) !important;
		transition-duration: 300ms;
	}

	.dx-row.dx-group-row td {
		color: var(--asamco-blue) !important;
	}

	/* Toolbar changes */
	body as-page-toolbar .icon {
		background-color: var(--asamco-blue) !important;
	}

	body as-page-toolbar {
		border-bottom: solid var(--accent-dark) thin !important
	}

	body as-page-toolbar .title {
		color: var(--asamco-blue) !important;
	}

	.dx-button-mode-outlined .dx-button-content {
		background: white !important
	}

	.dx-tab:not(.dx-tab-selected) {
		background-color: var(--accent-light) !important;
		transition: 300ms
	}
	.dx-tab.dx-state-hover:not(.dx-tab-selected) {
		background-color: var(--accent-light-hover) !important;
		color: var(--asamco-blue) !important;
	}
	.dx-button-content {
		transition: 300ms;
	}
	.dx-buttongroup-item.dx-button.dx-item-selected .dx-button-content {
		background-color: var(--accent-light-hover) !important;
		color: var(--asamco-blue) !important;
		font-weight: 400;
	}
	.dx-buttongroup-item.dx-button.dx-state-hover .dx-button-content {
		background-color: var(--accent-light) !important;
		color: var(--asamco-blue) !important;
	}
	.label-container label,
	label {
		color: var(--asamco-blue) !important;
	}

	evo-branch-select-widget .d-flex.flex-column {
		color: var(--asamco-blue);
	}

	.dx-list:not(.dx-list-select-decorator-enabled) {
		.dx-list-item.dx-list-item-selected {
			font-weight: 600
		}

		.dx-list-item.dx-list-item-selected,
		.dx-list-item.dx-state-focused,
		.dx-list-item.dx-state-hover {
			background-color: var(--accent-light-hover);
			color: var(--asamco-blue) !important;
			/* font-weight: 600; */
		}
	}

	@media screen and (max-width: 600px) {
		.app-grid>* {
			--cs-app-width: 47%;
			--cs-app-height: auto;
			aspect-ratio: 1/1 !important;
		}

		.image-container {
			height: 36px !important;
		}

		.app-grid {
			padding: 5px !important;
		}

		menu.item-list li a {
			padding: 3px !important;
			text-align: left;

			.list-item-text {
				padding-left: 6px;
				font-size: clamp(11px, 3vw, 13px) !important;
			}

		}

		@media screen and (max-width: 300px) {
			.app-grid>* {
				--cs-app-width: 100%;
			}
		}

		.image-container img.image {
			width: 100% !important;
			height: 100% !important;
			object-fit: contain;
		}

		.app-grid h5.title {
			font-size: clamp(11px, 3vw, 1.1rem) !important;
		}
	}
	dx-html-editor {
		background: white;
	}
}