/* #region Root */
:root
{
	--c-page-background: #ffffff;
	--c-primary: #4a5f72;
	--c-primary-text: #E0E0E0;
	--c-primary-hover: #6e8398;
	--c-secondary: #dfa156;
	--c-secondary-text: #FFFFFF;
	--c-secondary-hover: #f0b56e;
	--c-page-title: #74869e;
	--c-table-loader: #4a5f72;
	--c-text: var(--c-page-title);
	--c-context-menu-background: #547897;
	--c-context-menu-text: var(--c-secondary-text);
	--c-context-menu-hover: var(--c-nav-background);
	--c-nav-background: #4a5f72;
	--c-nav-background-hover: #ffc987;
	--c-nav-text: #FFFFFF;
	--c-dataTable-separator: #dee2e6;
	--c-dataTable-row-odd: #f7f7f7;
	--c-dataTable-row-hover: #f4f7ff;
	--c-dataTable-pagin-background: #fafafa;
	--c-dataTable-footer-background: #c0daf1;
	--c-dataTable-footer-color: var(--c-primary);
	--c-separator: #e3e6f0;
	--c-disabled-text: #afafaf;
	--c-disabled-background: #eeeeee;
	--c-readonly-background: #f8f9fb;
	--c-icon-green: #4fab4f;
	--c-input-border-gray: #ced4da;
	--f-radius: 0.33rem;
	--f-scale: 1.05;
	--t-transition: 250ms;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-Thin.ttf") format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-ThinItalic.ttf") format('truetype');
	font-weight: 100;
	font-style: italic;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-Light.ttf") format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-LightItalic.ttf") format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-Regular.ttf") format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-Italic.ttf") format('truetype');
	font-weight: 400;
	font-style: italic;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-Medium.ttf") format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-MediumItalic.ttf") format('truetype');
	font-weight: 500;
	font-style: italic;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-Bold.ttf") format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-BoldItalic.ttf") format('truetype');
	font-weight: 700;
	font-style: italic;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-Black.ttf") format('truetype');
	font-weight: 900;
	font-style: normal;
}

@font-face 
{
	font-family: "Roboto";
	src: url("../webfonts/Roboto-BlackItalic.ttf") format('truetype');
	font-weight: 900;
	font-style: italic;
}
/* #endregion */


/* #region MainLayout */
*
{
	font-family: 'Roboto', sans-serif;
}

html 
{
	height: 100%;
}

body
{
	background-color: var(--c-page-background);
	padding-right: 0px !important;
	overflow-y: auto !important;
}

label, select
{
	cursor: pointer;
}

.hidden
{
	display: none !important
}

button.disabled,
a.disabled
{
	pointer-events: none;
}

input, select, textarea
{
	font-size: 14px !important;
}

textarea
{
	min-height: 10rem !important;
}

button.disabled,
textarea:disabled
{
	background-color: var(--c-disabled-background) !important;
	color: var(--c-disabled-text) !important;
}

:is(input, textarea, select):required
{
	border-right-color: var(--c-primary);
	border-right-width: 2px;
}

.panel :is(input, textarea)::placeholder,
#ui_form_ml :is(input, textarea)::placeholder
{
	font-size: 12px;
	color: #c5c5c5 !important
}

input[readonly], textarea[readonly]
{
	background-color: var(--c-readonly-background) !important;
}
/* #endregion */


/* #region PageHeader */
.page-header
{
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.page-header > .title
{
	font-size: 2rem;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--c-page-title);
}

.page-header > .buttons
{
	padding-top: 0.5rem;
}

.page-header > .buttons a
{
	width: max-content
}

.page-header > .buttons button.secondary
{
	background-color: var(--c-secondary);
	color: var(--c-secondary-text);
}

.page-header > .buttons button.secondary:hover
{
	background-color: var(--c-secondary-hover);
}

.page-header > .buttons button.delete
{
	background-color: #842029;
}

.page-header > .buttons button.delete:hover
{
	background-color: #bd4852;
}

/* #region Buttons */
a.disabled
{
	background-color: var(--c-disabled-background) !important;
	color: var(--c-disabled-text) !important;
}

input[type=checkbox]
{
	transition-duration: var(--t-transition);
}

input[type=checkbox]:checked
{
	background-color: var(--c-primary);
	transition-duration: var(--t-transition);
}

input[type=search]
{
	border-color: var(--c-input-border-gray) !important;
	transition-duration: var(--t-transition);
}

input[type=search]:focus-visible
{
	border-color: var(--c-primary-hover);
	transition-duration: var(--t-transition);
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.panel .header > .buttons > a,
.page-header > .buttons > :is(a, button),
.button,
button:not(.pswp__button, .navbar-toggler)
{
	background-color: var(--c-primary);
	color: var(--c-primary-text);
	text-decoration: none;
	border: none;
	font-size: 14px;
	line-height: 14px;
	padding: 10px 20px;
	align-items: center;
	font-weight: 400;
	cursor: pointer;
	display: inline-block;
	border-radius: var(--f-radius);
	transition-duration: var(--t-transition);
	max-height: 35px;
	margin-left: 5px;
}

.page-header > .buttons > :is(a, button):hover,
.button:hover,
button:hover
{
	background-color: var(--c-primary-hover);
}

.panel .header > .buttons > a,
.page-header > .buttons > a.secondary,
button[type=submit],
button.secondary,
a.button.secondary
{
	background-color: var(--c-secondary);
	color: var(--c-secondary-text);
}

.panel .header > .buttons > a:hover,
.page-header > .buttons > a.secondary:hover,
button[type=submit]:hover,
button.secondary:hover,
a.button.secondary:hover
{
	background-color: var(--c-secondary-hover);
	color: var(--c-secondary-text);
}
/* #endregion */


/* #region Panel */
.panel,
#ui_form_ml
{
	color: var(--c-text)
}

.panel
{
	margin-bottom: 1.25rem;
}

.panel .header, .header.row
{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--c-secondary);
	margin-bottom: 0.75rem;
}

.panel .header > .title, .header.row > .title
{
	color: var(--c-secondary);
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 500;
}

.panel .header > .buttons
{
	/* empty */
}
/* #endregion */


/* #region NotificationBar */
.notification-bar
{
	padding: 10px 10px;
	font-size: 14px;
	border-radius: var(--f-radius);
	width: 100%;
	text-align: center;
}

.notification-bar.error
{
	color: #842029;
	background-color: #f8d7da;
}

.notification-bar.info
{
	color: #516aa1;
	background-color: #e4f2ff;
}

.notification-bar.success
{
	color: #0f5132;
	background-color: #d1e7dd;
}
/* #endregion */


/* #region FontAwesome */
:is(a, button, .nav-link, .dropdown-item, th):not(.icon) :is(.svg-inline--fa, .fas, .fab, .far)
{
	margin-right: 0.5rem;
}
/* #endregion */

/* #region FormLayout */
.form-width-xs{max-width: 575px;}
.form-width-sm{max-width: 767px;}
.form-width-md{max-width: 991px;}
.form-width-lg{max-width: 1200px;}
/* #endregion */


/* #region NavMenu */
.main-menu
{
	background-color: var(--c-nav-background);
}

.main-menu a
{
	color: var(--c-nav-text);
	font-size: 14px;
}

.main-menu .nav-item
{
	transition-duration: var(--t-transition);
}

.main-menu .nav-item > :is(.nav-link:hover, .nav-link.show, :focus)
{
	color: var(--c-nav-background-hover) !important;
}

.main-menu .dropdown-menu svg
{
	min-width: 1rem;
}

.main-menu .dropdown-menu
{
	margin-top: 7px;
	background-color: var(--c-context-menu-background);
	color: var(--c-context-menu-text);
}

.dropdown-menu .dropdown-item.disabled
{
	background-color: var(--c-context-menu-background) !important;
}

.dropdown-menu > li > a.dropdown-item:hover
{
	cursor: pointer;
}

.main-menu .dropdown-item:hover
{
	background-color: var(--c-context-menu-hover);
	color: var(--c-context-menu-text);
}

.main-menu .logo-text
{
	text-decoration: none;
	color: var(--c-nav-text);
	font-size: 20px;
}

.navbar-toggler-icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

button.navbar-toggler > span.navbar-toggler-icon > svg.svg-inline--fa
{
	margin-right: 0;
}
/* #endregion */


/* #region DataTable */
.dataTable
{
	font-size: 14px;
	border-bottom: none !important;
	color: #666;
}

.dataTable tr.odd
{
	background-color: var(--c-dataTable-row-odd);
}

.dataTable > tbody tr:hover, tbody tr:hover
{
	background-color: var(--c-dataTable-row-hover);
}

.dataTable :is(td, th)
{
	border: 1px solid var(--c-dataTable-separator) !important;
	padding-left: 8px !important;
}

.dataTables_length,
.dataTables_info,
.dataTables_paginate
{
	font-size: 14px;
}

.dataTables_length select
{
	margin-left: 5px;
	margin-right: 5px;
}

.dataTables_filter input,
.dataTables_length select
{
	height: 32px;
	min-height: 32px;
}

.dataTables_paginate
{
	padding-top: 0px !important;
}

.dataTables_paginate .paginate_button
{
	background-color: var(--c-dataTable-pagin-background) !important;
	border: solid 1px var(--c-dataTable-separator) !important;
	color: var(--c-panel-header-text);
	height: 32px;
	max-height: 32px;
	padding-top: 5px !important;
	margin-left: 0px !important;
	transition-duration: var(--t-transition);
}

.dataTables_paginate > .paginate_button:last-child
{
	border-top-right-radius: var(--f-radius);
	border-bottom-right-radius: var(--f-radius);
	margin-left: 0px;
}

.dataTables_paginate > .paginate_button:first-child
{
	border-top-left-radius: var(--f-radius);
	border-bottom-left-radius: var(--f-radius);
}

.dataTables_paginate .paginate_button:is(.previous.disabled, .next.disabled)
{
	background-color: var(--c-disabled-background) !important;
	color: var(--c-disabled-text) !important;
}


.dataTables_paginate .paginate_button:hover
{
	background: none !important;
	background-color: var(--c-primary-hover) !important;
	transition-duration: var(--t-transition);
}

.dataTables_paginate .paginate_button.current
{
	background: none !important;
	color: white !important;
	background-color: var(--c-primary) !important;
}

table:not(.dataTable) :is(td, th)
{
	border-bottom: 1px solid var(--c-separator);
	padding: 4px 10px;
}

.dataTables_wrapper table
{
	padding-top: 15px;
}

.ui_dt_pagination .dataTables_info, 
.ui_dt_pagination .dataTables_length
{
	display: inline-block;
	color: var(--c-text);
}

.ui_dt_pagination .dataTables_length
{
	margin-top: 0.05rem;
	margin-right: 1rem;
}

.ui_dt_pagination .dataTables_info
{
	clear: none !important;
	padding-top: 7px;
}

.ui_dt_pagination .dataTables_filter
{
	margin-right: 0.75rem;
	color: var(--c-text);
}

.ui_dt_pagination .dataTables_filter input
{
	margin-left: 7px;
	width: 300px;
}

.dt-removed
{
	color: rgb(218, 218, 218) !important;
}

table .clickable
{
	cursor: pointer;
}

table > thead > tr > th
{
	background-color: var(--c-primary);
	color: white;
}

table > tfoot :is(td, tr)
{
	color: var(--c-dataTable-footer-color);
	background-color: var(--c-dataTable-footer-background) !important;
	font-weight: 500;
}

table > tfoot td
{
	padding-right: 10px !important;
}

table a.dropdown-toggle
{
	background-color: var(--c-secondary);
	padding: 4px 8px;
	color: var(--c-secondary-text);
	border-radius: var(--f-radius);
	transition-duration: var(--t-transition);
}

table a.dropdown-toggle:hover
{
	background-color: var(--c-secondary-hover);
	transition-duration: var(--t-transition);
}

table a.dropdown-toggle.show
{
	background-color: var(--c-primary);
}

table .dropdown-menu.show
{
	background-color: var(--c-context-menu-background);
	color: var(--c-context-menu-text);
	font-size: 14px;
	top: -3px !important;
}

table .dropdown-menu.show a
{
	color: var(--c-context-menu-text);
}

table .dropdown-menu.show a:hover
{
	background-color: var(--c-context-menu-hover);
}

table.theme-secondary > thead > tr > th
{
	background-color: var(--c-secondary);
}
/* #endregion */


/* #region ResponsiveDataTable */
ul.dtr-details
{
	width: 100%;
}

span.dtr-data
{
	float: right;
}

span.dtr-title
{
	font-weight: 500 !important;
}
/* #endregion */


/* #region AdvancedSearch */
.row.search-group > .form-floating > label
{
	margin-left: 10px;
}
/* #endregion */


/* #region QuarterTile */
.quarter-tile > .body
{
	border: solid 1px var(--c-separator);
	cursor: pointer;
	border-radius: var(--f-radius);
	box-shadow: 0 6px 8px #e6e6e6;
	transition: var(--t-transition);
	color: var(--c-text);
}

.quarter-tile > .body:hover
{
	scale: 1.05;
	transition: var(--t-transition);
}

.quarter-tile > .body > .header
{
	border-top-left-radius: var(--f-radius);
	border-top-right-radius: var(--f-radius);
	background-color: var(--c-secondary);
	color: var(--c-secondary-text);
	text-align: center;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.quarter-tile > .body > .content
{
	padding: 1rem 1rem;
	text-align: center;
}
/* #endregion */


/* #region QuarterDetails */
.map-row
{
	object-fit: contain;
	background-color: white;
	border: solid 1px var(--c-separator);
	min-width: 200px;
	min-height: 200px;
	max-width: 200px;
	max-height: 200px;
}

.map-row[src=""]
{
	background-color: #c7c7c7;
	background: repeating-linear-gradient( -45deg, #c7c7c7, #c7c7c7 10.5px, #d9d9d9 10.5px, #d9d9d9 52.5px );
}

.quarter-details .image-container
{
	max-width: 250px;
}
/* #endregion */


/* #region Maps */
.map-cemetery
{
	width: 100%;
	height: auto;
	object-fit: contain;
}
/* #endregion */


/* #region GraveTile */
.grave-navigation
{
	display: inline-block;
}

.grave-navigation > a > svg.svg-inline--fa,
.grave-navigation > .row-navigation > a > svg.svg-inline--fa
{
	margin-right: 0px !important;
}

.grave-navigation > .row-navigation
{
	display: inline-block;
	margin-right: 1rem;
}
/* #endregion */


/* #region GraveTile */
.grave-tile-group
{
	display: inline-block;
	margin-bottom: 0.25rem;
}

.grave-navigation a,
.grave-tile-group > a
{
	background-color: white;
	border: solid 1px var(--c-text);
	border-radius: var(--f-radius);
	width: fit-content;
	height: 2.25rem;
	display: inline-block;
	text-align: center;
	padding: 6px 12px;
	text-decoration: none;
	box-sizing: border-box;
	text-align: center;
	color: var(--c-text);
	transition: var(--t-transition);
}

.grave-tile-group > a:nth-child(2)
{
	background-color: #f0f0f0;
}

.grave-navigation a:hover,
.grave-tile-group > a:hover
{
	background-color: var(--c-primary-hover);
	color: var(--c-primary-text);
	transition: var(--t-transition);
}

.grave-tile-group > a.selected
{
	background-color: var(--c-secondary);
	color: var(--c-secondary-text);
}

.grave-tile-group > a.selected:hover
{
	background-color: var(--c-secondary-hover);
}

.grave-tile-group.linked > a:nth-child(1)
{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.grave-tile-group.linked > a:nth-child(2)
{
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	border-left: 0px;
}
/* #endregion */


/* #region GraveResultTile */

.card.grave-result-tile
{
	max-width: 540px;
}

@media screen and (max-width: 768px) 
{
	.card.grave-result-tile
	{
		max-width: 100%;
	}
	.grave-result-tile > div > div
	{
		display: flex;
		justify-content: center;
		text-align: center;
	}
} 

.grave-result-tile .data .prefix
{
	font-size: 0.75rem;
}

.grave-result-tile .data .name
{
	font-size: 1.5rem;
}

.grave-result-tile .data span
{
	font-weight: bold;
}
/* #endregion */


/* #region GraveData */
.grave-data > .panel > .row > .col:nth-child(1)
{
	font-weight: 500;
}
/* #endregion */

/* #region Modal */
.modal-content > .modal-header
{
	background-color: var(--c-nav-background);
	border-color: var(--c-separator);
}

.modal-content > .modal-header > .modal-title
{
	font-size: 22px;
	font-weight: 400;
	color: var(--c-nav-text);
}

.modal-content > .modal-body
{
	font-size: 14px;
}

.modal-content > .modal-footer
{
	border-color: var(--c-separator);
}

.modal-header button
{
	background-color: transparent;
	color: var(--c-primary);
	border: none;
	font-size: 1.5rem;
	transition-duration: var(--t-transition);
}

.modal-header button:hover
{
	transition-duration: var(--t-transition);
	scale: var(--f-scale);
	color: var(--c-primary-hover);
}

.bootbox.modal > .modal-dialog > div.modal-content >.modal-header > .btn-close
{
	filter: invert(81%) sepia(23%) saturate(214%) hue-rotate(169deg) brightness(89%) contrast(88%);
}

.bootbox.modal > .modal-dialog > div.modal-content > .modal-footer > .btn-primary
{
	background-color: var(--c-secondary);
	color: var(--c-secondary-text);
}

.bootbox.modal > .modal-dialog > div.modal-content > .modal-footer > .btn-primary:hover
{
	background-color: var(--c-secondary-hover);
}
/* #endregion */


/* #region PopperTooltip */
.tooltip.bs-tooltip-bottom > .tooltip-arrow::before
{
	border-bottom-color: var(--c-context-menu-background);
}

.tooltip.bs-tooltip-end > .tooltip-arrow::before
{
	border-right-color: var(--c-context-menu-text);
}

.tooltip > .tooltip-inner 
{
	background: var(--c-context-menu-background);
	color: var(--c-context-menu-text);
	border: 1px solid var(--c-context-menu-background);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
}

.tooltip
{
	white-space: pre-line
}
/* #endregion */


/* #region Photoswipe */
.pswp-gallery
{
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}

.pswp__caption__center {text-align: center;}
.pswp-gallery figure 
{
	display: inline-block;
	width: 31%;
}

@media screen and (max-width: 576px) 
{
	.pswp-gallery figure 
	{
		width: 48%;
	}
}

.pswp-gallery img
{
	width: 100%;
	
}
/* #endregion */


/* #region StandaloneIcon */
.standalone-icon
{
	font-size: 0.75rem;
	width: 1.8rem;
	height: 1.8rem;
	text-align: center;
	padding: 0.25rem 0.25rem;
	cursor: default;
}

.standalone-icon div
{
	width: 100%;
	height: 100%;
}

.standalone-icon.checkmark > div
{
	background-color: var(--c-icon-green);
	color: white;
	border-radius: 15rem;
	padding-top: 0.05rem;
	padding-right: 0.02rem;
}
/* #endregion */


/* #region LoadingSpinner */
.loader 
{
	display: block;
	position: relative;
	width: 80px;
	height: 80px;
	margin-left: auto;
	margin-right: auto;
}

.loader-table
{
	margin-top: 5rem
}

.loader div 
{
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--c-table-loader);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader div:nth-child(1) 
{
	left: 8px;
	animation: loader1 0.6s infinite;
}
.loader div:nth-child(2) 
{
	left: 8px;
	animation: loader2 0.6s infinite;
}
.loader div:nth-child(3) 
{
	left: 32px;
	animation: loader2 0.6s infinite;
}
.loader div:nth-child(4) 
{
	left: 56px;
	animation: loader3 0.6s infinite;
}

@keyframes loader1 
{
	0% { transform: scale(0); }
	100% {transform: scale(1); }
}

@keyframes loader3 
{
	0% { transform: scale(1); }
	100% { transform: scale(0); }
}

@keyframes loader2 
{
	0% { transform: translate(0, 0); }
	100% { transform: translate(24px, 0); }
}
/* #endregion */