/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

@media (max-width: 1199.98px){
	#layout-menu{
		animation-fill-mode: forwards;
		animation-duration: .4s;
		animation-timing-function: ease;
		overscroll-behavior: none;
	}
		
	.movein2mobile #layout-menu{
		animation-name: movein2mobile;
	}

	@keyframes movein2mobile {
		from {
			transform: translateX(-100%)
		}
		to {
			transform: translateX(0)
		}
	}
	.moveout2mobile #layout-menu{
		animation-name: moveout2mobile;
	}

	@keyframes moveout2mobile {
		from {
			transform: translateX(0)
		}
		to {
			transform: translateX(-100%)
		}
	}

	#menu-blur {
		height: 100%;
		background: #191919;
		bottom: 0;
		left: 0;
		opacity: .5;
		outline: none;
		position: fixed;
		width: 100%;
		z-index: 1081;
		display: none;
	}

	.movein2mobile #menu-blur {
		display: block;
	}
}

label {
    font-weight: 500;
    margin-left: 3px;
    margin-bottom: 1px;
}

.swal2-confirm {
    margin-left: 10px;
}

#loader{
	display: none;
}

.loaderBlur{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #202125;
	opacity: 0.5;
	z-index: 999999;
	text-align: center;
}

.loaderSpinner{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	transform: translate(-50%, -50%) rotate(165deg);
	z-index: 1000000;
}

.loaderSpinner:before, .loaderSpinner:after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 0.25em;
	transform: translate(-50%, -50%);
}

.loaderSpinner:before {
	animation: LoaderBefore 2s infinite;
}

.loaderSpinner:after {
	animation: LoaderAfter 2s infinite;
}

@keyframes LoaderBefore{0%{width: 0.5em;box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);}35%{width: 2.5em;box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);}70%{width: 0.5em;box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);}100%{box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);}}
@keyframes LoaderAfter{0%{height: 0.5em;box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);}35%{height: 2.5em;box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);}70%{height: 0.5em;box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);}100%{box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);}}

#bksFrame {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    display: none;
}

.of-hide{
	overflow: hidden!important;
}

.popup {
    width: 90%;
    max-width: 500px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 100000000;
}
.close {
    position: fixed;
    top: 0;
    right: 0;
    padding: 5px;
    width: 30px;
    background: #ff3e1d;
    border-radius: 0 8px 0 8px;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
}
.loaderBlurUltra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #202125;
    opacity: 0.5;
    z-index: 99999999;
    text-align: center;
}

.menu-item a{
    cursor: pointer;
}

.menu-item a{
    -webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#editBalanceOptions,#editCostOptions,#editPasswordOptions,#approvePaymentOptions,#autoLoadOptions{
	display: none;
}

div:where(.swal2-container) {
    z-index: 999999999;
}

#layout-menu{
    overflow-x: hidden;
	overflow-y: auto;
}