html {
	scrollbar-gutter: stable !important;
}
.modal-open,.swal2-shown .swal2-height-auto {
	padding-right: 0 !important;
}
.modal-backdrop {
	background-color: #0000004d !important;
}
.capitalize {
	text-transform: capitalize;
}
.uppercase {
	text-transform: uppercase;
}
.link {
	color: #0284c7 !important;
}
.align-center {
	display: flex;
	align-items: center;
}
.mt--1 {
	margin-top: -10px;
}
.fa-xx{
   font-size:1.5em;
}
.swal2-popup {
   border-radius: 15px!important;
}
.pointer{
   cursor:pointer;
}
/* ------------------------------------ */
/* Transtions page loading swup */
/* ------------------------------------ */
html.is-changing .transition-fade {
	transition: opacity 250ms ease-in-out;
}

html.is-leaving .transition-fade {
	transition: opacity 250ms ease-in-out;
}

html.is-animating .transition-fade {
	opacity: 0;
}
/* ------------------------------------ */
.card-animate {
	position: relative;
	transition: background 150ms;
}

.content-animate .card-animate {
	transition: transform 250ms, background-color 150ms;
	transition-delay: calc(var(--index, 0) * 50ms), 0ms;
}

html.is-rendering .content-animate .card-animate {
	transition-delay: calc((var(--count, 0) - var(--index, 0)) * 10ms), 0ms;
}

html.is-animating .content-animate .card-animate {
	transform: scale(0.8);
}
/* ------------------------------------ */

h2 {
	transition: transform 300ms, opacity 300ms;
}

html.is-animating.is-leaving .content h2 {
	transform: translateY(2rem);
	opacity: 0;
}

html.is-animating.is-rendering .content h2 {
	transform: translateY(-2rem);
	opacity: 0;
}
/* ------------------------------------ */
/* Custom class */
/* ------------------------------------ */
.dot {
	height: 15px;
	width: 15px;
	background-color: #ccc;
	border-radius: 50%;
	display: inline-block;

	&.dot-success {
		background-color: green;
	}
}
.aside-custom {
	height: 100%;
	width: 360px;
	position: fixed;
	z-index: 1061;
	top: 0;
	box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.15);
	transition: opacity 0.3s ease-in-out;
	right: -360px;
	background-color: #fafafa;
	overflow-x: hidden;
	transition: 0.5s;
	& .content-header {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}
.dark-mode .aside-custom{
   background-color: #262a2f;
}
.setting-on .edit {
	display: none;
}
.setting-off {
	& input {
		border-color: #e9ecef;
		box-shadow: unset !important;
	}
	& .submit {
		display: none;
	}
}
.loader {
	width: 20px;
	aspect-ratio: 1;
	border-radius: 50%;
	display: inline-flex;
	margin-bottom: -4px;
	background: radial-gradient(farthest-side, #ed303c 94%, #0000),
		radial-gradient(farthest-side, #3b8183 94%, #0000),
		radial-gradient(farthest-side, #fad089 94%, #0000),
		radial-gradient(farthest-side, #ff9c5b 94%, #0000), #ed303c;
	background-size: 105% 105%;
	background-repeat: no-repeat;
	animation: l5 2s infinite;
}
@keyframes l5 {
	0% {
		background-position: 50% -50px, -40px 50%, 50% calc(100% + 50px),
			calc(100% + 50px) 50%;
	}
	20%,
	25% {
		background-position: 50% -50px, -50px 50%, 50% calc(100% + 50px), 50% 50%;
	}
	45%,
	50% {
		background-position: 50% -50px, -50px 50%, 50% 50%, 50% 50%;
	}
	75%,
	75% {
		background-position: 50% -50px, 50% 50%, 50% 50%, 50% 50%;
	}
	95%,
	100% {
		background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
	}
}
/* ------------------------------------ */
/* Media querys */
/* ------------------------------------ */
@media only screen and (max-width: 768px) {
	.aside-custom {
		width: 100%;
		right: -100%;
	}
	.toastify {
		max-width: calc(50% - -200px) !important;
	}
}