/*================================================================================
	Item Name: Frest HTML Admin Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


.field-validation-error {
	color: #df4759;
}


/* Loading*/


.spanner {
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
	display: block;
	text-align: center;
	height: 300px;
	color: #FFF;
	transform: translateY(-50%);
	z-index: 1801;
	visibility: hidden;
}

.overlay {
	z-index: 1800;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	visibility: hidden;
	top: 0;
	left: 0;
}

.loader,
.loader:before,
.loader:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}

.loader {
	color: #ffffff;
	font-size: 10px;
	margin: 80px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

	.loader:before,
	.loader:after {
		content: '';
		position: absolute;
		z-index: 1801;
		top: 0;
	}

	.loader:before {
		left: -3.5em;
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.loader:after {
		left: 3.5em;
	}

@-webkit-keyframes load7 {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}

	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

@keyframes load7 {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}

	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

.show {
	visibility: visible;
}

.spanner, .overlay {
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

	.spanner.show, .overlay.show {
		opacity: 1
	}



/* Alert Overrides*/

/* Base styling for all alerts */
.alert {
	position: relative;
	padding-left: 50px; /* room for icon */
	border-left-width: 25px
}


	.alert.alert-info {
		border-left: 25px solid rgba(0, 91, 187,.9) !Important;
		background-color: rgba(204, 229, 255,.5) !important;
		color: #475F7B !important;
		box-shadow: none;
	}

	.alert.alert-danger {
		border-left: 25px solid rgba(173,38,49,.8) !Important;
		background-color: rgba( 248, 215, 218,.5) !important;
		color: #475F7B !important;
		box-shadow: none;
	}

	.alert.alert-warning {
		border-left: 25px solid rgba(255, 174, 2,.9) !Important;
		background-color: rgba(255, 243, 205,.5) !important;
		color: #475F7B !important;
		box-shadow: none;
	}

	.alert.alert-success {
		border-left: 25px solid rgba(21, 87, 36,.8) !Important;
		background-color: rgba(212, 237, 218,.9) !important;
		color: #475F7B !important;
		box-shadow: none;
	}



	.alert.alert-info {
		border-left: 25px solid rgba(0, 91, 187,.9) !Important;
		background-color: rgba(204, 229, 255,.5) !important;
		color: #475F7B !important;
		box-shadow: none;
	}

	.alert::before {
		font-family: "Font Awesome 5 Free"; /* FA 5.15 */
		font-weight: 900; /* solid icons */
		font-size: 20px;
		position: absolute;
		left: -22px;
		top: 50%;
		transform: translateY(-50%);
	}

	/* Icon */
	.alert.alert-info::before {
		content: "\f05a"; /* fas fa-info-circle */
		color: rgba(204, 229, 255,1);
	}

.alert-danger::before {
	content: "\f06a"; /* fas fa-exclamation-circle */
	color: rgba( 248, 215, 218,1);
}

/* WARNING — bi-exclamation-triangle-fill */
.alert-warning::before {
	content: "\f071"; /* fas fa-exclamation-triangle */
	color: rgba(255, 243, 205,1);
}

.alert-success::before {
	content: "\f00c"; /* fas fa-check */
	color: rgba(212, 237, 218,1);
}

nav.navbar.navbar-light {
	background-color: rgba(0, 0, 0, .03) !important;
}



/* Custom CSS to define the right-sliding, half-screen modal behavior */

/* * 1. Define the custom class 'modal-right' to position the dialog to the right 
         * and set it to 50% width.
         */
.modal-right .modal-dialog {
	/* Fix the position and remove default margin/translation */
	position: fixed;
	margin: 0;
	right: 0;
	top: 0;
	bottom: 0;
	/* Set size to half the viewport width and full height */
	width: 50vw;
	max-width: 50vw;
	height: 100%;
	/* Start position: 100% off-screen to the right */
	transform: translate3d(100%, 0, 0);
	z-index: 2000;
}

/* * 2. Transition for smooth slide animation.
         */
.modal-right .modal-dialog {
	transition: transform .4s ease-out;
}

/* * 3. End position: Slide back to 0 (fully visible) when the modal is shown.
         */
.modal-right.show .modal-dialog {
	transform: translate3d(0, 0, 0);
}

/* * 4. Ensure the content fills the dialog and looks correct.
         */
.modal-right .modal-content {
	height: 100%;
	overflow-y: auto;
	border-radius: 0;
}




table.table-hover-edit tbody tr a.btn, table.table-hover-edit tbody tr button.btn {
	opacity: 0.1;
	/*visibility: hidden;*/
	transition: opacity 0.2s ease-in-out;
}

table.table-hover-edit tbody tr:hover a.btn, table.table-hover-edit tbody tr:hover button.btn {
	opacity: 1;
	visibility: visible;
}

table.table-hover-edit tbody tr td {
	border-top-width: 0.8px;
	border-top-style: solid;
}


table.table-hover-edit tbody tr:hover td {
	background-color: #f7f9fc; /* Light highlight */
	border-top-color: #4688f1; /* Your brand color */
	border-bottom-color: #4688f1;
}