﻿/* Default basic page styles */
body {
	font-family: "Open Sans", sans-serif !important;
	margin: 0;
	padding: 0;
	color: var(--primary-color-text);
	font-size: 12px !important;
}

label {
	font-weight: 700;
}

ul {
	list-style-type: none;
}

.form-control {
	font-size: 12px;
}

.form-select {
	font-size: 12px;
	padding-right: 1.5rem;
	background-position: right .5rem center;
}

	.form-switch input.form-check-input {
		width: 2.5em;
	}

.form-check-input {
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	min-height: 1rem;
	border-color: #c1b6b0;
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

	.form-check-input:checked {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
	}

	.form-check-input.is-valid, .was-validated .form-check-input:valid {
		border-color: #c1b6b0 !important;
	}

		.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked {
			background-color: var(--primary-color);
		}

	.form-check-input[disabled] {
		background-color: var(--bs-tertiary-bg);
		border-color: #c1b6b0;
		opacity: 1;
	}

		.form-check-input[disabled]:checked {
			background-color: darkgray;
		}

.custom-checkbox .form-check-input[type=radio] {
	border-radius: 0.25em !important;
	--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* Branded TMG orange colors */
.fg-tmg-orange {
	color: var(--primary-color);
}

.fg-overdue-red {
	color: #dc3545;
}

.bg-tmg-orange {
	background-color: var(--primary-color);
	color: white;
}

	.bg-tmg-orange:hover {
		color: white;
	}

/* Styles for font awesome glyphs and badges*/
.fas, .far {
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: larger;
}


@media (max-width: 1600px) {
	#navbarContent .fas, #navbar2Content .fas {
		font-size: large;
	}
}

@media (max-width: 1450px) {
	#navbarContent .fas, #navbar2Content .fas {
		font-size: medium;
	}
}

/* Checkbox css for Forms*/
.form-checkbox label {
	font-weight: normal;
}

.form-checkbox .form-check-input {
	margin: 0.1rem 0.5rem 0 0;
}

.form-checkbox .custom-control-input {
	margin-right: 0 !important;
	margin-top: 0 !important;
}

/* Checkbox styles */
.custom-control-label::before, .custom-control-label::after {
	top: 3px;
}

.custom-control-label::before {
	border-color: #c1b6b0;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.custom-checkbox .custom-control-input[data-locked="locked"]:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input[data-locked="locked"]:checked ~ .custom-control-label::before {
	background-color: darkgray;
	border-color: darkgray;
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-radio .form-radio-input.custom-control-input:disabled:checked ~ .custom-control-label::before {
	background-color: darkgray;
	border-color: darkgray;
}

.custom-radio .form-radio-input.custom-control-input:disabled:not(:checked) ~ .custom-control-label::before {
	background-color: #fff;
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
	background-color: #e9ecef;
	border-color: #e9ecef;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
	border-color: #c1b6b0;
	background-color: transparent;
}

.custom-checkbox label, .custom-radio label {
	font-weight: normal;
	padding-left: 0.5rem;
	margin-bottom: 0;
}

.form-check-input {
	margin-top: 0;
}

/* Button styles */
.btn {
	font-size: 14px;
	padding: .3rem 1rem;
}

/* File Drop Zone styles */
.file-upload-drop-zone-wrapper {
	max-width: 275px;
}

.file-upload-drop-zone {
	width: 100%;
	max-width: 275px;
	height: 100px;
	border: 2px #cccccc dashed;
	border-radius: 2px;
	background: white;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto 1em;
	padding: 0 0.5em;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
}

	.file-upload-drop-zone > p {
		flex: 0 1 auto;
	}

		.file-upload-drop-zone > p.caption {
			margin-top: 5px;
		}

		.file-upload-drop-zone > p.plus {
			font-size: 32px;
			line-height: 1em;
		}

		.file-upload-drop-zone > p.delete-link {
			position: absolute;
			top: 0;
			right: 0;
			color: #dc3545;
			border-bottom-left-radius: 5px;
			padding: 5px 8px;
			font-size: 14px;
			pointer-events: all;
		}

			.file-upload-drop-zone > p.delete-link:hover {
				color: white;
				background-color: #dc3545;
			}

	.file-upload-drop-zone.document-present {
		background-color: #dfffdb;
	}

		.file-upload-drop-zone.document-present > p.caption {
			margin-top: 0;
		}

		.file-upload-drop-zone.document-present > p.plus,
		.file-upload-drop-zone.document-present > p.delete-link {
			display: none;
		}

	.file-upload-drop-zone.disabled {
		pointer-events: none;
	}

	.file-upload-drop-zone p {
		text-align: center;
		color: #cccccc;
		font-size: 18px;
		font-weight: bold;
		margin: 0;
		pointer-events: none;
	}

	.file-upload-drop-zone:hover,
	.file-upload-drop-zone.file-hovered {
		background-color: #f5f5f5;
	}

.cra-document-upload .RadAsyncUpload {
	display: none;
}

.file-upload-drop-zone .spinner-border {
	position: absolute;
	left: 111px;
	top: 32px;
}

/* Validation Styles */
.form-error {
	color: #b94a48;
}

/* Flash Message Styles */
.flash-message {
	position: fixed;
	bottom: 0;
	right: 1rem;
	font-size: 12px;
}


/* File Drop Zone styles */
.file-upload-drop-zone-wrapper {
	max-width: 275px;
}

.file-upload-drop-zone {
	width: 100%;
	max-width: 275px;
	height: 100px;
	border: 2px #cccccc dashed;
	border-radius: 2px;
	background: white;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto 1em;
	padding: 0 0.5em;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
}

	.file-upload-drop-zone > p {
		flex: 0 1 auto;
	}

		.file-upload-drop-zone > p.caption {
			margin-top: 5px;
		}

		.file-upload-drop-zone > p.plus {
			font-size: 32px;
			line-height: 1em;
		}

		.file-upload-drop-zone > p.delete-link {
			position: absolute;
			top: 0;
			right: 0;
			color: #dc3545;
			border-bottom-left-radius: 5px;
			padding: 5px 8px;
			font-size: 14px;
			pointer-events: all;
		}

			.file-upload-drop-zone > p.delete-link:hover {
				color: white;
				background-color: #dc3545;
			}

	.file-upload-drop-zone.document-present {
		background-color: #dfffdb;
	}

		.file-upload-drop-zone.document-present > p.caption {
			margin-top: 0;
		}

		.file-upload-drop-zone.document-present > p.plus,
		.file-upload-drop-zone.document-present > p.delete-link {
			display: none;
		}

	.file-upload-drop-zone.disabled {
		pointer-events: none;
	}

	.file-upload-drop-zone p {
		text-align: center;
		color: #cccccc;
		font-size: 18px;
		font-weight: bold;
		margin: 0;
		pointer-events: none;
	}

	.file-upload-drop-zone:hover,
	.file-upload-drop-zone.file-hovered {
		background-color: #f5f5f5;
	}

.cra-document-upload .RadAsyncUpload {
	display: none;
}

.file-upload-drop-zone .spinner-border {
	position: absolute;
	left: 111px;
	top: 32px;
}

.modal-footer {
	justify-content: center;
}

/* Signature styles */
#divDigitalSignatures {
	page-break-inside: avoid;
}

.sig-container {
	width: 80%;
	height: 75px;
	border-bottom: 2px black solid;
	font-size: 18px;
	font-weight: bold;
	position: relative;
}

.sig-container-text {
	position: absolute;
	left: 0;
	bottom: 0;
}

/* Tooltip styles */
.tooltip-inner {
	background-color: #fff;
	color: var(--primary-color-text);
	border: 1px solid darkgray;
	border-radius: .25rem !important;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.66) !important;
}

.tooltip.bs-tooltip-right .arrow:before {
	border-right-color: darkgray !important;
}

.tooltip.bs-tooltip-left .arrow:before {
	border-left-color: darkgray !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
	border-bottom-color: darkgray !important;
}

.tooltip.bs-tooltip-top .arrow:before {
	border-top-color: darkgray !important;
}

.table-hover tbody tr:hover {
	background-color: var(--odd-table-shadow-color) !important;
}

/* Bootstrap adds a ton of right padding to select elements after the form is submitted, usually cutting off the selected value's text. Here, we cancel that behaviour.*/
.was-validated .form-select {
	padding-right: 2.25rem !important;
}

/**********************************************************************************/
/*                                 ManageCategories                               */
/**********************************************************************************/
#mdl-manage-categories .modal-dialog {
	max-width: 100vw;
	padding: 0px;
	top: 0;
	left: 0;
	width: 100vw;
	border-radius: .3rem !important;
}

#ifr-manage-categories {
	height: 500px;
	border: none;
}

#mdl-ftr-manage-categories {
	bottom: 0;
	position: fixed;
	background: #FFF;
	width: 100%;
}

#tbl-categories a.table-icon-link,
#tbl-categories a.table-icon-link:hover,
#tbl-categories a.table-icon-link:active,
#tbl-categories a.table-icon-link:visited {
	color: darkgrey;
}

#tbl-categories tr td:nth-of-type(1) .entry-text,
#tbl-categories tr td:nth-of-type(2) .entry-text,
#tbl-categories tr td:nth-of-type(4) a {
	display: block;
}

#tbl-categories .entry-edit {
	display: none;
}

#tbl-categories .confirm-delete {
	font-weight: bold;
}

	#tbl-categories .confirm-delete a {
		color: var(--primary-color);
	}

#tbl-categories tr td {
	cursor: pointer;
}

#tbl-categories thead tr#new-category-row {
	display: none;
}

#popup-manage-categories-container #new-button-container {
	min-width: 150px;
}

	#popup-manage-categories-container #new-button-container i {
		font-size: medium;
	}


/* Extra Large Devices*/
@media (min-width: 1200px) {

	#mdl-manage-categories .modal-dialog {
		width: 80vw !important;
	}
}

.RadWindow_Material .rwTitleBar {
	background-color: var(--primary-color) !important;
}

@media print {
	.custom-checkbox, .custom-radio {
		padding: .438rem, 1.375rem;
		line-height: 1.75;
	}

	.form-group {
		margin-bottom: 1rem;
	}
}

/**********************************************************************************/
/*                                 Datepicker CSS	                              */
/**********************************************************************************/

input.date-only-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' viewBox='0 0 448 512' fill='%23ced4da' fill-rule='evenodd'%3E%3Cpath d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: right 5px center !important;
	background-size: auto !important;
	padding-right: 1.5rem;
}

.tempus-dominus-widget {
	z-index: 1048 !important; /*stops it from going above navbar / modals*/
}

	.tempus-dominus-widget .calendar-header {
		color: white;
		background-color: var(--primary-color);
		padding: 0.75rem 0 0.75rem;
	}

	.tempus-dominus-widget .picker-switch:not(selectorcantbeblank)::after {
		content: "\f078";
		font-family: "Font Awesome 5 Free";
		margin-left: 0.25rem !important;
		width: 16px !important;
		height: 16px !important;
		clip: initial !important;
	}

	.tempus-dominus-widget .picker-switch {
		color: white !important;
		cursor: pointer !important;
		user-select: none;
	}

.tempus-popover {
	z-index: 1049 !important;
}

.tempus-dominus-widget.light .date-container-days div.range-end:not(.no-highlight), .tempus-dominus-widget.light .date-container-days div.range-in:not(.no-highlight), .tempus-dominus-widget.light .date-container-days div.range-start:not(.no-highlight), .tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active, .tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active, .tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active, .tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active, .tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).active, .tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).active, .tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).active, .tempus-dominus-widget.light .time-container-second div:not(.no-highlight).active {
	background-color: var(--primary-color) !important;
}

.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).today:before, .tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).today:before, .tempus-dominus-widget.light .date-container-months div:not(.no-highlight).today:before, .tempus-dominus-widget.light .date-container-years div:not(.no-highlight).today:before, .tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).today:before, .tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).today:before, .tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).today:before, .tempus-dominus-widget.light .time-container-second div:not(.no-highlight).today:before {
	border-bottom-color: var(--clr-tmg-orange) !important;
}

.tempus-dominus-widget.dark .date-container-days div.range-end:not(.no-highlight), .tempus-dominus-widget.dark .date-container-days div.range-in:not(.no-highlight), .tempus-dominus-widget.dark .date-container-days div.range-start:not(.no-highlight), .tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).active, .tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).active, .tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).active, .tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).active, .tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).active, .tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).active, .tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).active, .tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).active {
	background-color: var(--clr-tmg-orange) !important;
}

.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).today:before, .tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).today:before, .tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).today:before, .tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).today:before, .tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).today:before, .tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).today:before, .tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).today:before, .tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).today:before {
	border-bottom-color: var(--clr-tmg-orange) !important;
}

.tempus-dominus-widget.light button, .tempus-dominus-widget.dark button {
	background-color: var(--clr-tmg-orange) !important;
	border: 1px solid var(--clr-tmg-orange) !important;
}

.minw-sm {
	min-width: 120px !important;
}

.k-state-disabled, .k-state-disabled *:is(.k-input, .k-select) {
	background-color: #e9ecef !important;
	opacity: 1 !important;
	cursor: default !important;
}

.was-validated .k-combobox:has(input[data-role="multicolumncombobox"]:invalid).k-dropdowngrid,
.was-validated .k-combobox:has(input[data-role="multicolumncombobox"]:invalid).k-dropdowngrid:hover {
	border-color: var(--bs-danger) !important;
}

.was-validated .k-combobox:has(input[data-role="multicolumncombobox"]:invalid) ~ .invalid-feedback {
	display: block;
}


.fg-broker-status-inprocess2.btn-save, .btn-save > .fg-broker-status-inprocess2, .fg-broker-status-inprocess2.btn-new-save {
	color: var(--primary-color);
}

.fg-broker-status-inprocess2 {
	color: var(--bs-dark-gray);
}

.fg-icon-orange-hover2 {
	transition: opacity 0.2s ease-in-out !important;
}

	.fg-icon-orange-hover2:hover {
		opacity: 0.5;
	}


.maxw-50px{
	max-width:50px;
}

/*.k-list-item.k-selected, .k-selected.k-list-optionlabel {
	background-color: #808080 !important;
}*/
