:root {
	--srm-tangarine: #b47914;
	--srm-tangarine-rgb: 180,121,20;
	--srm-raspberry: #b32440;
	--srm-raspberry-rgb: 179, 36, 65;
	--srm-salmon: #df4f4e;
	--srm-salmon-rgb: 223, 78, 78;
}


@font-face {
	font-family: 'srm-normal';
	src: url('meta/MetaOT-Norm.eot?#iefix') format('embedded-opentype'),
		url('meta/MetaOT-Norm.otf') format('opentype'),
		url('meta/MetaOT-Norm.woff') format('woff'),
		url('meta/MetaOT-Norm.ttf') format('truetype'),
		url('meta/MetaOT-Norm.svg#MetaOT-Norm') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'srm-bold';
	src: url('meta/MetaOT-Book.eot?#iefix') format('embedded-opentype'),
		url('meta/MetaOT-Book.otf') format('opentype'),
		url('meta/MetaOT-Book.woff') format('woff'),
		url('meta/MetaOT-Book.ttf') format('truetype'),
		url('meta/MetaOT-Book.svg#MetaOT-Book') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'srm-light';
	src: url('meta/MetaOT-Light.eot?#iefix') format('embedded-opentype'),
		url('meta/MetaOT-Light.otf') format('opentype'),
		url('meta/MetaOT-Light.woff') format('woff'),
		url('meta/MetaOT-Light.ttf') format('truetype'),
		url('meta/MetaOT-Light.svg#MetaOT-Light') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'srm-extrabold';
	src: url('meta/MetaOT-MediumBold.eot?#iefix') format('embedded-opentype'),
		url('meta/MetaOT-MediumBold.otf') format('opentype'),
		url('meta/MetaOT-MediumBold.woff') format('woff'),
		url('meta/MetaOT-MediumBold.ttf') format('truetype'),
		url('meta/MetaOT-MediumBold.svg#MetaOT-MediumBold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'srm-script';
	src: url('camy/camy-black-narrow.otf') format('opentype'),
		url('camy/camy-black-narrow.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


/* Basic Styles */

* {
	font-weight: normal;
	font-style: normal;
}


body {
	font-family: srm-normal;
	background: var(--bs-bg-color);
	margin-top: 1em;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: srm-bold;
}


label {
	color: var(--srm-tangarine) !important;
	font-family: srm-normal;
}


a {
	color: var(--bs-gray-600);
	text-decoration: none;
}


a:hover {
	color: var(--srm-salmon);
	text-decoration: none;
}


::placeholder {
	color: var(--srm-raspberry) !important;
	text-align: center;
	font-size: 80%;
}

textarea::placeholder {
	line-height: 90px;
}






/* Bootstrap Table */
.bootstrap-table .table-hover tbody tr {
	transition: background-color .50s ease;
}


#buttons_toolbar .search input {
	width: 100px;
}


#buttons_toolbar .dropdown-item {
	font-family: srm-light;
	color: var(--bs-body-color) !important;
}


th,
strong {
	font-family: srm-bold;
	font-style: normal;
}


a.page-link {
	color: var(--srm-tangarine);
}


.page-item.active a.page-link,
a.dropdown-item:hover,
.btn-custom,
.btn.btn-custom.dropdown-toggle,
.list-group-item-secondary.list-group-item-action.active {
	color: var(--bs-body-color);
	background-color: var(--srm-tangarine);
	border-color: var(--srm-tangarine);
}


.fixed-table-pagination {
	margin-top: : .8rem;
}


.tr_selected {
	color: var(--bs-black);
	background-color: var(--srm-tangarine);
}

.bt-auto-height .fixed-table-body {
	height: auto !important;
	overflow: visible !important;
}



/* General rules for Tempo UI */

.bg-tertiary {
	background: var(--bs-tertiary-bg);
	/* background: var(--bs-bg-color); */
}

#page_title {
	color: var(--bs-body-color);
	font-family: srm-script;
	font-size: 1.4em;
}


.nav {
	background-color: var(--srm-tangarine);
}


#search_form {
	margin-bottom: 10px;
}

#search_fields .form-floating>label {
	font-size: .7rem;
}

#search_fields .btn.btn-sm {
	padding: .125rem .5rem;
}


.modal-header {
	background-color: var(--srm-tangarine);
	color: var(--bs-gray-200);
	justify-content: space-between;
}

.modal-title {
	font-family: srm-script;
}

#status_message {
	font-family: srm-light;
	font-size: 80%;
	color: var(--srm-salmon);
}



/* Tom Select drop down overrides (for dark mode) */
.form-floating>.ts-wrapper {
	padding-top: 1em !important;
	color: var(--bs-body-color);
}

.ts-dropdown,
.ts-control,
.ts-control input {
	margin-top: 14px;
	color: var(--bs-body-color) !important;
}

.ts-wrapper.focus {
	border-color: var(--bs-border-color);
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(230, 155, 25, 0.25);
}

.focus .ts-control {
	box-shadow: none;
	border: none;
}

.ts-wrapper.multi .ts-control>div {
	margin: 4px 3px 0 0 !important;
	padding: 0px 3px 0 3px !important;
	background: var(--bs-gray-600) !important;
	color: var(--bs-gray-300) !important;
	border: 0 solid var(--bs-gray-500) !important;
}



/* Form Switches */
.form-switch .form-check-label {
	font-family: srm-light;
	font-size: 90%;
	color: var(--bs-body-color) !important;
}

.form-switch .form-check-input:checked {
	background-color: var(--srm-tangarine);
	border-color: var(--bs-border-color);
}

.form-switch .form-check-input:indeterminate {
	border-color: var(--bs-border-color);
	background-color: var(--bs-bg-color);
	background-position: center;
}



/* Form Sliders */
.form-range::-moz-range-thumb,
.form-range::-webkit-slider-thumb {
	background-color: var(--srm-tangarine);
}


/* Quill Styles */
.form-floating>.ql-container>.ql-editor {
	padding-top: 1.625rem;
	/* matches Bootstrap input padding for floating labels */
	min-height: 150px;
	/* or whatever your default textarea height should be */
}

.ql-container {
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background-color: var(--bs-body-bg);
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
	line-height: var(--bs-body-line-height);
}

.ql-container.ql-focused {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.ql-toolbar.ql-snow.ql-toolbar-inline {
	border: none;
	padding: 0;
	background-color: transparent;
}

.ql-toolbar-inline button {
	padding: 0.25rem;
}


/* Dark Mode */
@media (prefers-color-scheme: dark) {

	.nav {
		--bs-nav-link-color: var(--bs-body-bg);
		--bs-nav-pills-link-active-color: var(--bs-white);
		--bs-nav-pills-link-active-bg: var(--srm-blue);
	}

	.nav a:hover {
		color: var(--bs-light);
	}

	.ql-editor,
	.ql-editor * {

		background-color: var(--bs-body-bg);
		color: var(--bs-body-color);
		caret-color: var(--bs-body-color);

		::selection {
			background-color: var(--bs-highlight-bg);
			color: var(--bs-body-color);
		}

		::-moz-selection {
			background-color: var(--bs-highlight-bg);
			color: var(--bs-body-color);
		}
	}


	.ql-editor pre,
	.ql-editor code {
		background-color: var(--bs-tertiary-bg);
	}

}

/* Light Mode */
@media (prefers-color-scheme: light) {
	body {
		background: var(--bs-secondary-bg);
	}

	.page-item.active a.page-link,
	a.dropdown-item:hover,
	.btn-custom,
	.btn.btn-custom.dropdown-toggle,
	.list-group-item-secondary.list-group-item-action.active {
		color: var(--bs-secondary-bg);
	}

	.nav {
		--bs-nav-link-color: var(--bs-body-bg);
		--bs-nav-pills-link-active-color: var(--bs-white);
		--bs-nav-pills-link-active-bg: var(--srm-blue);
	}

	.nav a:hover {
		color: var(--bs-dark);
	}

	#page_title {
		color: var(--bs-dark);
	}

}