/* Fix for datatable left-column selectbox... Falcon theme doesn't have a heavy enough margin-top */
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
	margin-top: -25px !important;
}

/* ======================================= Select2 Rules ======================================= */
.select2 {
	max-width: 100% !important;
}

.select2-selection {
	/*padding: .375rem 0;*/
	border: 1px solid #ced4da !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered, .select2-selection__placeholder {
	line-height: inherit !important;
}

.select2-selection__arrow {
	margin-top: 0px;
}

.select2-container .select2-selection--single {
	height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: inherit;
}

.select2-selection--single {
	padding: 5px 0 5px 0;
}

.select2-selection--single .select2-selection__arrow b {
	margin-top: 2px !important;
}

/* Select2 Disabled Styling */
.select2-container--disabled .select2-selection {
	background-color: #f2f6fb !important;
	color: #748194 !important;
}

/* Select2 Dark Mode Styles */
.dark .select2-selection {
	background-color: #0b1727 !important;
	border-color: #344050 !important;
	color: white;
}

.dark .select2-search__field {
	color: white;
	background-color: #0b1727 !important;
}

.dark .select2-selection__choice {
	color: black !important;
}

.dark .select2-dropdown {
	background-color: #0b1727 !important;
	color: #cfd9e6 !important;
	border-color: #344050 !important;
}

.dark .select2-selection__rendered {
	color: #cfd9e6 !important;
}

.dark .select2-container--default .select2-results__option[aria-selected=true] {
	color: black !important;
}

.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
	color: white !important;
}

/* Select2 Dark theme placeholder text */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #d8e2ef !important;
}

.dark .select2-results__option--selected {
	color: black;
}

.dark .select2-selection__clear {
	color: white;
}

/* may need to figure out some better styling for dark select2 for multiple options */
/*.dark .select2-results__option {    
    color: #748194 !important;
}*/
/* Manual style fixes for opaque placeholders */
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	opacity: 1 !important;
}

.form-control::-moz-placeholder { /* Firefox 19+ */
	opacity: 1 !important;
}

.form-control:-ms-input-placeholder { /* IE 10+ */
	opacity: 1 !important;
}

.form-control:-moz-placeholder { /* Firefox 18- */
	opacity: 1 !important;
}

.spinner-sm {
	width: 1.5rem;
	height: 1.5rem;
}

.card-title {
	margin-bottom: 0px;
}

/* Form-Control disabled styling */
.form-select:disabled {
	color: #344050 !important;
	opacity: 1;
}

.dark .form-select:disabled {
	color: #d8e2ef !important;
	background-color: #232e3c !important;
}

/* ======================================= Datatables ======================================= */
/*Light Mode*/
.hover-table tbody tr:hover {
	background-color: rgba(245, 245, 245, 0.5);
	cursor: pointer;
}
/*Dark Mode*/
.dark .hover-table tbody tr:hover {
	background-color: rgb(64 64 64 / 50%);
	cursor: pointer;
}

/* Note: in the theme demos, pagination and info are sparated via bootstrap... it is not in ours. Something might be wrong? In the meantime, this makes them 1-line */
.dataTables_info {
	display: inline-flex;
}

.dataTables_paginate {
	float: right;
}

/* Equivalent to adding class '.addClass('form-select')' after every table draw */
.dataTables_length select {
	padding: .3125rem 2rem .3125rem 1rem;
	font-size: .8rem;
	display: block;
	width: 100%;
	padding-top: 0.3125rem;
	padding-right: 2rem;
	padding-bottom: 0.3125rem;
	padding-left: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--falcon-input-color);
	background-color: var(--falcon-input-bg);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234d5969' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .5rem center;
	background-size: 16px 12px;
	border: 1px solid var(--falcon-input-border-color);
	border-radius: .25rem;
	-webkit-box-shadow: var(--falcon-box-shadow-inset);
	box-shadow: var(--falcon-box-shadow-inset);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Equivalent to adding class '.addClass('pagination-sm')' after every table draw */
.dataTables_paginate .page-item:first-child .page-link, .dataTables_paginate .page-item:last-child .page-link {
	border-top-left-radius: .2rem;
	border-bottom-left-radius: .2rem;
}

.dataTables_paginate .page-link {
	padding: 0.15rem .5rem;
	font-size: .875rem;
}

/* Reduce datatables Info text */
.dataTables_info {
	font-size: 13px;
}

/* Move Datatable Loader to the center of the screen */
/* Add Class 'centerScreenLoader' on the wrapping table-responsive div */
.centerScreenLoader .dataTables_processing {
	position: fixed !important;
	margin-left: 0px !important;
	margin-top: 0px !important;
}

/* Reduce table button size */
.table .btn {
	line-height: 1;
}

/* ======================================= Custom Gradients/Backgrounds ======================================= */
.grey-white-gradient-bg {
	background: linear-gradient(135deg,#ababab 0%,#fff 100%);
}

.snowy-bg {
	background-image: url(/img/bg/snowy-bg.jpg);
}


/* Falcon theme overrides & makes all toastr backgrounds white */
.toast-error {
	background-color: red !important;
}

.toast-success {
	background-color: green !important;
}

/* Datatables responseive expand/collapse button */
table.dataTable.dtr-inline.collapsed.table-sm > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed.table-sm > tbody > tr > th:first-child:before {
	top: 50% !important;
}

/* Border was hidden on datatables pagination */
.page-item:not(:first-child) .page-link {
	margin-left: 0px !important
}

/* Dark Mode Styling for Bootstrap Accordion */
.dark .accordion-button {
	background-color: #121e2d;
	color: #d8e2ef;
}

	.dark .accordion-button::after {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
	}

.dark .accordion-item {
	background-color: #121e2d;
}

/* Dark Mode Styling for Summernote Text Editor */
.dark .note-editor {
	background-color: #1c2b3a;
	color: #d8e2ef;
	border-color: #2c3e50;
}

.dark .note-editor .note-toolbar {
	background-color: #253647;
	border-bottom-color: #2c3e50;
}

.dark .note-editor .note-btn {
	color: #d8e2ef;
	background-color: #1c2b3a;
	border-color: #2c3e50;
}

.dark .note-editor .note-btn:hover {
	background-color: #2c3e50;
	color: #ffffff;
}

.dark .note-editor .note-editable {
	background-color: #1c2b3a;
	color: #d8e2ef;
}

.dark .note-editor .note-statusbar {
	background-color: #253647;
	border-top-color: #2c3e50;
}

.dark .note-editor .note-dropdown-menu {
	background-color: #1c2b3a;
	border-color: #2c3e50;
}

.dark .note-editor .note-dropdown-item {
	color: #d8e2ef;
}

.dark .note-editor .note-dropdown-item:hover {
	background-color: #2c3e50;
	color: #ffffff;
}

.dark .note-modal .modal-content {
	background-color: #1c2b3a;
	color: #d8e2ef;
}

.dark .note-modal .modal-header {
	background-color: #253647;
	border-bottom-color: #2c3e50;
}

.dark .note-modal .form-control {
	background-color: #253647;
	color: #d8e2ef;
	border-color: #2c3e50;
}

/* Dark Mode Styling for SweetAlert2 */
.dark .swal2-popup {
	background-color: #19191a;
	color: #d8e2ef;
}

.dark .swal2-title {
	color: #e1e1e1;
}

.dark .swal2-validation-message {
	background: #323234;
	color: #e1e1e1;
}

/* Dark Mode Styling for Flatpickr DatePicker */
.dark .flatpickr-current-month .numInputWrapper span.arrowUp:after {
	border-bottom-color: #9da9bb;
}

.dark .flatpickr-current-month .numInputWrapper span.arrowDown:after {
	border-top-color: #9da9bb;
}

.dark .flatpickr-day:not(.prevMonthDay):not(.nextMonthDay) {
	color: #FFFFFF;
}

.dark .prevMonthDay, .dark .nextMonthDay {
	color: #5f5f5f;
}

.dark .flatpickr-day:hover:not(.selected) {
	color: black !important;
}

.dark .flatpickr-months .flatpickr-prev-month, .dark .flatpickr-months .flatpickr-next-month {
	fill: #FFFFFF;
}
/* Time fields for Flatpickr */
.dark .flatpickr-time input {
	color: #FFFFFF;
}

.dark .flatpickr-time .numInputWrapper span.arrowUp:after {
	border-bottom-color: #9da9bb;
}

.dark .flatpickr-time .numInputWrapper span.arrowDown:after {
	border-top-color: #9da9bb;
}

.dark .flatpickr-am-pm {
	color: #FFFFFF;
}

.dark .flatpickr-time-separator {
	color: #FFFFFF;
}


/* Top Nav Dropdown, on Click&Hover */
.navbar .dropdown-item:hover:active {
	color: white !important;
}

/* Bootstrap Checkbox colors */
.text-danger .form-check-input:checked {
	background-color: var(--falcon-danger);
	border-color: var(--falcon-danger);
}

.text-info .form-check-input:checked {
	background-color: var(--falcon-info);
	border-color: var(--falcon-info);
}

.text-success .form-check-input:checked {
	background-color: var(--falcon-success);
	border-color: var(--falcon-success);
}

.text-primary .form-check-input:checked {
	background-color: var(--falcon-primary);
	border-color: var(--falcon-primary);
}

.text-warning .form-check-input:checked {
	background-color: var(--falcon-warning);
	border-color: var(--falcon-warning);
}

.text-secondary .form-check-input:checked {
	background-color: var(--falcon-secondary);
	border-color: var(--falcon-secondary);
}

/* Custom Sizing for XXL Modal */
@media (min-width: 800px) {
	.modal-xxl {
		max-width: 700px;
	}
}

@media (min-width: 992px) {
	.modal-xxl {
		max-width: 800px;
	}
}

@media (min-width: 1075px) {
	.modal-xxl {
		max-width: 950px;
	}
}

@media (min-width: 1200px) {
	.modal-xxl {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.modal-xxl {
		max-width: 1300px;
	}
}

@media (min-width: 1600px) {
	.modal-xxl {
		max-width: 1500px;
	}
}

@media (min-width: 1800px) {
	.modal-xxl {
		max-width: 1700px;
	}
}

@media (min-width: 2400px) {
	.modal-xxl {
		max-width: 2200px;
	}
}

/* ======================================= Image Cropper Modal ======================================= */
/* Fix for excessive vertical space in crop modal */
#CropModal .modal-body > div:last-child {
	max-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

#CroppedImage {
	max-width: 100%;
	max-height: 60vh;
	height: auto;
	display: block;
}

/* Ensure cropper container doesn't exceed modal bounds */
.cropper-container {
	max-height: 60vh !important;
}