@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

body {
	overflow-x: hidden;
}

form > label {
	margin-bottom: .1rem;
	margin-top: .6rem;
}

a {
	text-decoration: none;
}

	a:hover {
		cursor: pointer;
	}

b {
	background-color: transparent !important;
	box-shadow: none !important;
}

.form-control {
	background-color: var(--white) !important;
}

.hoverable {
	transition: background .1s ease-in-out,color .03s ease-in-out;
}

	.hoverable:hover {
		cursor: pointer;
		background-color: var(--primary-300) !important;
	}
	.hoverable.selected {
		cursor: pointer;
		background-color: var(--primary-400) !important;
	}


.text-hov {
	cursor: pointer;
}

	.text-hov:hover {
		filter: brightness(75%);
	}

td {
	padding: 0.6rem !important;
	vertical-align: middle;
	position: relative;
}

.toast {
	border: 0;
}

.table-responsive {
	border-radius: 0.65rem !important;
	/*margin-bottom: 1rem;*/
}

.table {
	margin-bottom: 0;
}

.table-bordered tr:first-child td {
	border-top: 0;
}

.table-bordered tr td:first-child {
	border-left: 0;
}

.table-bordered tr:last-child td {
	border-bottom: 0;
}

.table-bordered tr td:last-child {
	border-right: 0;
}

.table > :not(:first-child) {
	border-top: 0;
}

.row {
	margin-right: 0;
	margin-left: 0;
}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 100000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

/* Top bar dropdown and user list icons */
.user-avatar {
	vertical-align: middle;
	width: 42px;
	height: 42px;
	border-radius: 50%;
}

/* Button White*/
@media (max-width: 768px) {
	.button-container {
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width:1600px) {
	.button-container {
		width: 70%;
	}
}

@media (min-width: 1600px) {
	.button-container {
		width: 60%;
	}
}

.button-container {
	height: 50px;
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
}

	.button-container .not-button {
		display: table-cell;
		text-align: center;
		/*border: 1px solid #FF0000;*/
		vertical-align: middle;
	}

.btn-white {
	color: var(--gray-900);
	background-color: #fff;
	border-color: #fff;
}

	.btn-white:hover {
		color: #fff;
		background-color: var(--primary-tint-400);
		border-color: var(--primary-tint-600);
	}

	.btn-white:focus, .btn-white.focus {
		box-shadow: 0 0 0 0.2rem var(--primary-500);
	}

	.btn-white.disabled, .btn-white:disabled {
		color: #fff;
		background-color: var(--primary);
		border-color: var(--primary);
	}

	.btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled).active,
	.show > .btn-white.dropdown-toggle {
		color: #fff;
		background-color: var(--primary);
		border-color: var(--primary-800);
	}

		.btn-white:not(:disabled):not(.disabled):active:focus, .btn-white:not(:disabled):not(.disabled).active:focus,
		.show > .btn-white.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem var(--primary-500);
		}


/*
	Custom dropdows
*/
.custom-deployableform {
	background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23444645' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
	background-size: 8px 10px;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 100%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
	z-index: 1060;
	overflow-y: auto;
	max-height: 18em;
}

.dropdown-open {
	display: block;
}

.modal-content {
	border: none !important;
}

.noselect {
	user-select: none;
}

.list-group-horizontal > .list-group-item {
	background-color: var(--primary-tint-950);
	box-shadow: 0 .125rem .25rem rgb(26 132 96 / 0.075);
}

/* input animated labels */
.form-group > label {
	line-height: 0.45rem;
	height: 0.5rem;
	top: 1.2rem;
	left: 0.5rem;
	position: absolute;
	font-size: 0.9rem;
	transition: 0.2s;
	pointer-events: none;
	color: var(--gray);
	font-weight: 600;
	font-style: italic;
	padding: 0 0.2rem;
	transform: translate(0%,-50%) !important;
}

.form-group.label-animate > label {
	top: -0.05rem !important;
	left: 0.8rem !important;
	font-size: 0.85em;
	color: var(--primary-800);
	background-color: white;
}
/* ******************************** */

/* Material switches */
.custom-control {
	position: relative;
	display: block;
	min-height: 1.5rem;
	padding-left: 1.5rem;
}

	.custom-control.material-switch {
		padding-left: 0;
	}

.material-switch-control-input {
	display: none;
}

.material-switch-control-indicator {
	display: inline-block;
	position: relative;
	margin: 0 10px;
	top: 4px;
	width: 32px;
	height: 16px;
	background: #efefef;
	border-radius: 16px;
	transition: .3s;
	display: inline-block;
	position: relative;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	top: 4px;
	width: 32px;
	height: 16px;
	background-image: initial;
	background-position-x: initial;
	background-position-y: initial;
	background-size: initial;
	background-repeat-x: initial;
	background-repeat-y: initial;
	background-attachment: initial;
	background-origin: initial;
	background-clip: initial;
	background-color: rgb(209, 219, 209);
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	border-bottom-left-radius: 16px;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	transition-delay: 0s;
	transition-property: all;
}

	.material-switch-control-indicator:after {
		content: '';
		display: block;
		position: absolute;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		transition: .3s;
		top: -2px;
		left: -1px;
		background: #fdfdfd;
		box-shadow: 0 2px 10px rgba(170, 170, 170, 0.7);
		content: "";
		display: block;
		position: absolute;
		width: 20px;
		height: 20px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;
		transition-duration: 0.3s;
		transition-timing-function: ease;
		transition-delay: 0s;
		transition-property: all;
		top: -2px;
		left: -1px;
		background-image: initial;
		background-position-x: initial;
		background-position-y: initial;
		background-size: initial;
		background-repeat-x: initial;
		background-repeat-y: initial;
		background-attachment: initial;
		background-origin: initial;
		background-clip: initial;
		background-color: var(--white);
		box-shadow: rgba(170, 170, 170, 0.8) 0px 2px 10px;
		z-index: 1;
	}

.material-switch-control-input:checked ~ .material-switch-control-indicator:after {
	background-color: var(--primary);
	left: 17px;
	box-shadow: 0 2px 10px var(--primary-900);
	background-color: var(--primary);
	left: 17px;
	box-shadow: var(--primary-900) 0px 2px 10px;
}
/* ******************************** */

.force-center {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}