/* Chrome fix for modals */
div.modal > div:focus,
div.modal-header > button.close:focus {
	outline: 0px;
}

/* Dropdown submenu styling */
.dropdown-submenu {
	position: relative;
}

	.dropdown-submenu button.dropdown-toggle {
		width: 100%;
	}

	.dropdown-submenu button.dropdown-toggle::after,
	.dropdown-submenu a::after {
		transform: rotate(-90deg);
		position: absolute;
		right: 10%;
		top: 45%;
	}

	.dropdown-submenu::after {
		transform: rotate(-90deg);
		position: absolute;
		right: 6px;
		top: .8em;
	}

	.dropdown-submenu .dropdown-menu {
		top: 0;
		left: 100%;
		margin-left: 0rem;
		margin-right: .1rem;
	}

/* Tweaks */

.navbar-nav .nav-item:hover {
	cursor: pointer;
}

.navbar-nav .nav-link:hover {
	cursor: pointer;
}

.nav .nav-link:hover {
	cursor: pointer;
}

.modal-backdrop {
	z-index: -1;
}

table.table tbody tr.selected {
	background-color: var(--primary);
}

.form-check > .form-check-input.form-check-input-pointer,
.form-check > .form-check-label.form-check-label-pointer,
.custom-checkbox > .custom-control-input.custom-control-input-pointer,
.custom-checkbox > .custom-control-label.custom-control-label-pointer {
	cursor: pointer;
}

/* Animations */

.alert-fadein {
	animation: alert-fadein 0.15s;
}

.alert-fadeout {
	animation: alert-fadeout 0.15s;
}

.toast-fadein {
	animation: toast-fadein 0.15s;
}

.toast-fadeout {
	animation: toast-fadeout 0.15s;
}

@keyframes alert-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes alert-fadeout {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes toast-fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes toast-fadeout {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

/* 
    below styles were copied from bootstrap 4.5.0 and renamed to be compatible with blazor
    - '.validation-message' == bootstrap '.invalid-feedback'
    - '.invalid' == bootstrap '.is-invalid'
*/

/*.validation-message {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

.invalid ~ .validation-message {
    display: block;
}

.form-control.invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

textarea.form-control.invalid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.form-check-input.invalid ~ .form-check-label {
    color: #dc3545;
}

.form-check-input.invalid ~ .validation-message {
    display: block;
}*/


/* Adds fixed table head and vertical scrollbar to table */
.table-fixed tbody {
	height: 300px;
	overflow-y: auto;
	width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
	display: block;
}

.table-fixed tbody td,
.table-fixed tbody th,
.table-fixed thead > tr > th {
		float: left;
		position: relative;
		
		&::after{
			content: '';
			clear: both;
			display: block;
}