/** Define default font for the theme */
body {
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 14px;
}

/** Add box shadow to card on hover */
.card:hover{
	box-shadow: var(--bs-box-shadow-sm) !important;
}

/** OTP Input Styling */
.otp-input{
	max-width: 40px;
}

/** Loading Overlay */
#loadingOverlay{
	z-index: 10000;
	--transition__duration: .500s;
}

/** Authenticate Layer */
#authenticateLayer{
	z-index: 9000;
}

/** Toast Container */
#toastContainer{
	z-index: 10000;
	opacity: .85;
}

/** Authenticatie layer animations */
.authenticate-view [ui-view]{
	grid-column: 1;
	grid-row: 1;
	transition: opacity .350s ease-in-out, transform .350s ease-in-out;
}

.authenticate-view [ui-view].ng-enter{
	z-index: 101;
	opacity: 0;
	transform: translateY(5%);
}

.authenticate-view [ui-view].ng-enter-active{
	opacity: 1;
	transform: translateY(0);
}

.authenticate-view [ui-view].ng-leave{
	z-index: 100;
}

.authenticate-view [ui-view].ng-leave-active{
	z-index: 100;
	opacity: 0;
}

.authenticate-view[animation=back] [ui-view].ng-enter{
	z-index: 100;
	transform: translateY(0);
}

.authenticate-view[animation=back] [ui-view].ng-leave{
	z-index: 101;
	opacity: 1;
	transform: translateY(0);
}

.authenticate-view[animation=back] [ui-view].ng-leave-active{
	z-index: 101;
	opacity: 0;
	transform: translateY(5%);
}

/** Header Styling */
.header{
	z-index: 500;
	height: 65px;
}

.header .sidebar{
	padding-top: 0;
}


/** Sidebar styling */
.sidebar{
	width: 255px;
	padding-top: 65px;
	z-index: 400;
}

.favorite .remove-favorite{
	display: none;
}

.favorite:hover .remove-favorite{
	display: inline;
}

.nav-link .collapse-icon {
	transition: transform 0.22s ease;
}

.nav-link[aria-expanded="true"] .collapse-icon {
	transform: rotate(90deg);
}

.submenu{
	margin-left: 23px;
}

/** Authneticate view aninations */
.authenticated-view{
	padding-left: 255px; 
	padding-top:65px;
}

.authenticated-view [ui-view]{
    grid-row: 1;
    grid-column: 1;
    transition: opacity .350s ease-in-out, transform .350s ease-in-out;
    width: 100%;
    min-width: 0;
}

.authenticated-view [ui-view].ng-enter{
    z-index: 101;
    opacity: 0;
}

.authenticated-view [ui-view].ng-enter-active{
    opacity: 1;
}

.authenticated-view [ui-view].ng-leave{
    z-index: 100;
}

.authenticated-view [ui-view].ng-leave-active{
    z-index: 100;
    opacity: 0;
}

.authenticated-view[animation=back] [ui-view].ng-enter{
    z-index: 100;
}

.authenticated-view[animation=back] [ui-view].ng-leave{
    z-index: 101;
    opacity: 1;
}

.authenticated-view[animation=back] [ui-view].ng-leave-active{
    z-index: 101;
    opacity: 0;
}

.authenticated-view [ui-view].ng-enter-active .ui-view-translate-y, 
.authenticated-view [ui-view].ng-leave-active .ui-view-translate-y{
    transition: opacity .350s ease-in-out, transform .350s ease-in-out;
}

.authenticated-view [ui-view].ng-enter .ui-view-translate-y{
    z-index: 201;
    opacity: 0;
    transform: translateY(10%);
}

.authenticated-view [ui-view].ng-enter-active .ui-view-translate-y{
    opacity: 1;
    transform: translateY(0%);
}

.authenticated-view [ui-view].ng-leave .ui-view-translate-y{
    z-index: 200;
}

.authenticated-view [ui-view].ng-leave-active .ui-view-translate-y{
    z-index: 200;
    opacity: 0;
}

.authenticated-view[animation=back] [ui-view].ng-enter .ui-view-translate-y{
    z-index: 200;
    transform: translateY(0);
}

.authenticated-view[animation=back] [ui-view].ng-leave .ui-view-translate-y{
    z-index: 201;
    opacity: 1;
    transform: translateY(0);
}

.authenticated-view[animation=back] [ui-view].ng-leave-active .ui-view-translate-y{
    z-index: 201;
    opacity: 0;
    transform: translateY(10%);
}

.authenticated-view [ui-view].ng-enter-active .ui-view-translate-x, 
.authenticated-view [ui-view].ng-leave-active .ui-view-translate-x{
    transition: opacity .350s ease-in-out, transform .350s ease-in-out;
}

.authenticated-view [ui-view].ng-enter .ui-view-translate-x{
    z-index: 201;
    opacity: 0;
    transform: translateX(10%);
}

.authenticated-view [ui-view].ng-enter-active .ui-view-translate-x{
    opacity: 1;
    transform: translateX(0%);
}

.authenticated-view [ui-view].ng-leave .ui-view-translate-x{
    z-index: 200;
}

.authenticated-view [ui-view].ng-leave-active .ui-view-translate-x{
    z-index: 200;
    opacity: 0;
}

.authenticated-view[animation=back] [ui-view].ng-enter .ui-view-translate-x{
    z-index: 200;
    transform: translateX(0);
}

.authenticated-view[animation=back] [ui-view].ng-leave .ui-view-translate-x{
    z-index: 201;
    opacity: 1;
    transform: translateX(0);
}

.authenticated-view[animation=back] [ui-view].ng-leave-active .ui-view-translate-x{
    z-index: 201;
    opacity: 0;
    transform: translateX(10%);
}

/** Module header positioning */
.module-header{
	z-index: 400;
	top: 65px;
}