.hidden {
   display: none;
}

.show {
   display: flexbox;
}

.light-style .menu .app-brand.demo {
   height: 64px;
}

.dark-style .menu .app-brand.demo {
   height: 64px;
}

.app-brand-logo.demo {
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center;
   display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: 30px;
}

.app-brand-logo.demo svg {
   width: 1.7rem;
   height: 1.7rem;
}

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

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.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
 ******************************************************************************/

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

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

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

.vertical-spacing.only-element> :first-child {
   margin-top: 0 !important;
}

.vertical-spacing-lg>* {
   margin-top: 1.875rem !important;
   margin-bottom: 0 !important;
}

.vertical-spacing-lg.only-element> :first-child {
   margin-top: 0 !important;
}

.vertical-spacing-xl>* {
   margin-top: 5rem !important;
   margin-bottom: 0 !important;
}

.vertical-spacing-xl.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
 ******************************************************************************/

/* .layout-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-placeholder img {
   width: 900px;
}

.layout-info {
   text-align: center;
   margin-top: 1rem;
}


/*
 * Alerts
 ******************************************************************************/
/* .alert-container {
   min-height: 50px;
   max-height: 60px;
   display: flex;
} */
.alert-container {
   position: absolute; /*  Make it float */
   top: -20px; /* or whatever distance you want from top */
   left: 50%; /* Center horizontally */
   transform: translateX(-50%); /* Perfect centering */
   width: 90%; /* optional - depends how wide you want it */
   z-index: 1055; /* make sure it sits above form inputs */
   pointer-events: none; /* clicks pass through except on alert itself */
   display: flex;
   justify-content: center; /* center alert inside container */
}

.alert-container .alert {
   pointer-events: auto; /* allow clicking the alert (like dismiss) */
   width: 100% !important;
   padding: 0.75rem 1rem !important;
}

.alert {
   width: 100% !important;
   padding: 0.75rem 1rem !important;
}

.toast-container .start-40 {
   left: 40% !important;
}

.pac-container{
   z-index:1091 !important;
}


/*
 * Custom Fonts
 ******************************************************************************/
.capitalize {
   text-transform: capitalize;
}
.uppercase {
   text-transform: uppercase;
}