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

.blurred {
    filter: blur(2px);
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.smooth-enter-active, .smooth-leave-active {
    max-height: 800px;
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
}

.smooth-enter, .smooth-leave-to {
    max-height: 0;
}

.flip-list-move {
    transition: transform 0.5s;
}

/*all to allow changing where bootstap doesn't'*/
/*links*/
.link-primary {
    color: var(--bs-primary-link) !important;
}

.link-primary:hover, .link-primary:focus {
    color: var(--bs-primary-link-hover) !important;
}

.link-secondary {
    color: var(--bs-secondary-link) !important;
}

.link-secondary:hover, .link-secondary:focus {
    color: var(--bs-secondary-link-hover) !important;
}

/*buttons*/
.btn-primary {
    --bs-btn-color: var(--bs-btn-p-color); /*button text*/
    --bs-btn-bg: var(--bs-btn-p-bg); /*button background*/
    --bs-btn-border-color: var(--bs-btn-p-border-color); /*button border*/
    --bs-btn-hover-color: var(--bs-btn-p-hover-color); /*button hover text*/
    --bs-btn-hover-bg: var(--bs-btn-p-hover-bg); /*button hover background*/
    --bs-btn-hover-border-color: var(--bs-btn-p-hover-border-color); /*button hover border*/
    --bs-btn-focus-shadow-rgb: var(--bs-btn-p-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-p-active-color);
    --bs-btn-active-bg: var(--bs-btn-p-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-p-active-border-color);
    --bs-btn-disabled-color: var(--bs-btn-p-disabled-color);
    --bs-btn-disabled-bg: var(--bs-btn-p-disabled-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-p-disabled-border-color);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-btn-op-color);
    --bs-btn-border-color: var(--bs-btn-op-border-color);
    --bs-btn-hover-color: var(--bs-btn-op-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-op-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-op-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-op-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-op-active-color);
    --bs-btn-active-bg: var(--bs-btn-op-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-op-active-border-color);
    --bs-btn-disabled-color: var(--bs-btn-op-disabled-color);
    --bs-btn-disabled-bg: var(--bs-btn-op-disabled-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-op-disabled-border-color);
    --bs-gradient: var(--bs-op-gradient);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-btn-os-color);
    --bs-btn-border-color: var(--bs-btn-os-border-color);
    --bs-btn-hover-color: var(--bs-btn-os-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-os-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-os-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-os-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-os-active-color);
    --bs-btn-active-bg: var(--bs-btn-os-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-os-active-border-color);
    --bs-btn-disabled-color: var(--bs-btn-os-disabled-color);
    --bs-btn-disabled-bg: var(--bs-btn-os-disabled-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-os-disabled-border-color);
    --bs-gradient: var(--bs-os-gradient);
}
.btn-outline-danger {
    --bs-btn-color: var(--bs-btn-od-color);
    --bs-btn-border-color: var(--bs-btn-od-border-color);
    --bs-btn-hover-color: var(--bs-btn-od-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-od-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-od-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-od-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-od-active-color);
    --bs-btn-active-bg: var(--bs-btn-od-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-od-active-border-color);
    --bs-btn-disabled-color: var(--bs-btn-od-disabled-color);
    --bs-btn-disabled-bg: var(--bs-btn-od-disabled-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-od-disabled-border-color);
    --bs-gradient: var(--bs-od-gradient);
}





/* Overall Styling */

.h1 {
	margin-bottom: 30px;
	font-weight: 500;
}

.SmallFormContainer {
	width: 32%;
	float: left;
	margin-right: 2%;
}

.SmallFormContainerLast {
	width: 32%;
	margin-right: 0;
}

.SmallFormFieldsContainer {
	/*width: calc(100% - 20px);*/
}

[data-bs-theme=dark] .SmallFormFieldsContainer {
	background: #1d1f20;
}



.SmallFormFieldsContainer label, .ModalFormFieldsContainer label {
	padding-bottom: 4px;
	color: #000;
}

[data-bs-theme=dark] .SmallFormFieldsContainer label, [data-bs-theme=dark] .ModalFormFieldsContainer label {
	color: #fff;
}


.SmallFormFieldsContainer input, .ModalFormFieldsContainer input {
	margin-bottom: 20px;
	width: 100%;
}

.SmallFormFieldsContainer .InputField-Last {
	margin-bottom: 0;
}

.SmallFormFieldsContainer input.ColorCode {
	/*width: 50px;*/
}
.SmallFormFieldsContainer input.ColorPreview {
	width: 50px;
	position: relative;
	right: 0;
	top: -58px;
	float: right;
	padding: 0;
	border-radius: 0 3px 0 3px;
	display: none;
}
.SmallFormFieldsContainer .ColorLabel {
	height: 28px;
	width: 28px;
	position: relative;
	right: 4px;
	top: 33px;
	float: right;
	padding: 0;
	border-radius: 18px;
	border: 2px solid #dee2e6;
}

.SmallFormFieldsContainer .addnewtinbutton {
	height: 28px;
	width: 48px;
	position: relative;
	right: 5px;
	top: 33px;
	float: right;
	padding: 0;
	border-radius: .375rem;
	border: 2px solid #dee2e6;
	text-align: center;
	text-decoration: none;
}
.SmallFormFieldsContainer .TinsListContainer {
	margin-bottom: 20px;
	margin-top: 4px;
}
.SmallFormFieldsContainer .TinsListContainer div {
	border: 1px solid #ccc;
	border-bottom: none;
	padding-top: 2px;
	background: #fff;
}
.SmallFormFieldsContainer .TinsListContainer div:first-child {
	border-top-left-radius: .375rem;
	border-top-right-radius: .375rem;
}
.SmallFormFieldsContainer .TinsListContainer div:last-child {
	border-bottom: 1px solid #ccc;
	border-bottom-left-radius: .375rem;
	border-bottom-right-radius: .375rem;
}
.SmallFormFieldsContainer .TinsListContainer div:hover {
	background: #f4f4f4;
}
.SmallFormFieldsContainer .TinsListContainer div label {
	padding-left: 5px;
	padding-top: 2px;
}
.SmallFormFieldsContainer .TinsListContainer div input {
	display: none;
}
.SmallFormFieldsContainer .TinsListContainer div .DeleteTinLink {
	text-decoration: none;
	height: 24px;
	width: 24px;
	position: relative;
	right: 5px;
	top: 2px;
	float: right;
	padding: 0;
	line-height: 20px;
	border-radius: 1.375rem;
	border: 2px solid #dee2e6;
	text-align: center;
	color: #fff;
	background: #ff0000;
}
.SmallFormFieldsContainer .TinsListContainer div .DeleteTinLink:hover {
	filter: drop-shadow(0 0 4px #ff0000) brightness(1.2);
}
#UsernameInput, label[for="UsernameInput"] { 
	width: 300px;
	position: fixed;
	left: 0px;
	top: -500px;
 }
#PasswordInput, label[for="PasswordInput"] { 
	position: fixed;
	left: 120%;
 }

.TableContainer {
	margin-top: 50px !important;
}

.TableContainer th {
	vertical-align: middle;
}

.TableContainer th div {
	line-height: 18px;
}

.table > :not(caption) > * > * {
	vertical-align: middle;
}

.table .btn-group-sm > .btn, .btn-sm {
	border-radius: 6px;
}

.HeaderLinkContainer {
	padding-left: 0;
	padding-right: 0;
}

.TextButton {
	border: none;
	background: transparent;
	color: #000;
	text-decoration: underline;
}
.TextButton:hover {
	border: none;
	background: transparent;
	color: #555;
	text-decoration: underline;
}

[data-bs-theme=dark] .TextButton {
	color: #fff;
}
[data-bs-theme=dark] .TextButton:hover {
	color: #bbb;
}



[data-bs-theme=dark] .table.b-table > tfoot > tr > [aria-sort="none"], [data-bs-theme=dark] .table.b-table > thead > tr > [aria-sort="none"] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .table.b-table > tfoot > tr > [aria-sort="ascending"], [data-bs-theme=dark] .table.b-table > thead > tr > [aria-sort="ascending"] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .table.b-table > tfoot > tr > [aria-sort="descending"], [data-bs-theme=dark] .table.b-table > thead > tr > [aria-sort="descending"] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e");
}



.modal-header {
	border-bottom: none;
	padding-bottom: 2px;
}

.modal-footer {
	border-top: none;
	padding-top: 2px;
}

.UploadModalFooterContainer {
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	right: -6px;
	padding-top: 20px;
}

.ModalInfoContainer span.infolabel {
	width: 40%;
	text-align: right;
	display: inline-block;
}

.ModalInfoContainer span.infovalue {
	width: 60%;
	text-align: left;
	padding-left: 10px;
	font-weight: bold;
	display: inline-block;
}

#UploadModal2___BV_modal_header_ button { 
	display: none; 
}

#EditTinModal___BV_modal_header_ button { 
	display: none; 
}

#AddTinModal___BV_modal_header_ button { 
	display: none; 
}

@media (max-width: 1399px) {

	.container-xxl { /*width: 96%;*/ }
}

@media (max-width: 970px) {

	.SmallFormContainer {
		width: 48%;
	}
}

@media (max-width: 700px) {

	.SmallFormContainer {
		width: 100%;
	}
}

@media (max-width: 400px) {

	.ModalInfoContainer span.infolabel {
		width: 100%;
		text-align: left;
		padding-bottom: 6px;
	}

	.ModalInfoContainer span.infovalue {
		width: 100%;
		text-align: left;
		padding-left: 0;
		padding-bottom: 20px;
		font-weight: bold;
		display: inline-block;
	}
}