/********** Template CSS **********/
:root {
    --primary: #673de6;
    --primary-light: #ebe4ff;
    --primary-lightest: #673de614;
    --primary-dark: #5025d1;
    --primary-charts: #b39ef3;
    --white: #ffffff;
    --gray: #6D7081;
    --gray-light: #f2f3f6;
    --gray-dark: #36344d;
    --gray-border: #dadce0;
    --success: #00b090;
    --success-light: #def4f0;
    --success-dark: #008361;
    --info-light: #e0f8ff;
    --danger: #fc5185;
    --danger-light: #ffe8ef;
    --danger-dark: #d63163;
    --warning: #ffcd35;
    --warning-light: #fff8e2;
    --warning-dark: #fea419;
    --meteorite: #8c85ff;
    --meteorite-light: #d5dfff;
    --meteorite-gray: #dadce03d;
    --meteorite-dark: #2f1c6a;
    --light: #ffffff;
    --dark: #1d1e20;
    --white-blue: #f4f5ff;
    --primary-timer: #8564eb;
    --black-timer: #343434;
    --periwinkle: #c5cde9;
    --ghost-white: #fafbff;
    --backdrop: rgba(0, 0, 0, .5);
    --placeholder: rgba(0, 0, 0, .6);
    --primary-dark-hover: rgba(218, 220, 224, .24);
}

.bg-boxed {
    background-color: var(--meteorite-light);
}
.sign-form { background: var(--gray-dark); color: var(--periwinkle); }

/*** Spinner ***/
.spinner-body {
    z-index: 999;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    visibility: hidden;
    opacity: 0;
	pointer-events: none;
}
.spinner-body.show {
	background-color: rgba(0,0,0,0.7);
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 0.65;
	pointer-events: auto;
}
.spinner-border {
    -webkit-animation: 1s linear infinite spinner-border !important;
    animation: 1s linear infinite spinner-border !important;
}
.spinner-text {
	font-size: x-large;
}
.spinner-logo {
    width: 35px;
}

/*** Snackbar Message ***/
.snackbar { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 12px; position: fixed; left: 10px; bottom: 10px; z-index: 1001; font-size: 16px; opacity: 0; transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out; }
.snackbar.show { visibility: visible; opacity: 1; bottom: 10px; }
.snackbar.hide { opacity: 0; bottom: 10px; visibility: hidden; transition: opacity 0.5s ease-in-out, bottom 0.5s ease-in-out; }


.ui-widget-overlay.ui-front { z-index: 1040 !important; }

.ui-dialog.ui-front {  z-index: 1041 !important; }
.ui-dialog-buttonpane,
.ui-dialog-buttonpane button { pointer-events: auto !important; }
.ui-dialog .ui-dialog-titlebar { cursor: move !important; pointer-events: auto !important; }

/* Success */
.ui-dialog.message-success .ui-dialog-titlebar { background-color: #28a745; color: white; }
.ui-dialog.message-success, .ui-dialog.message-success .ui-dialog-buttonpane { background-color: #d4edda; color: #155724; border-top: 1px solid #28a745; }

/* Danger */
.ui-dialog.message-danger .ui-dialog-titlebar { background-color: #dc3545; color: white; }
.ui-dialog.message-danger, .ui-dialog.message-danger .ui-dialog-buttonpane { background-color: #f8d7da; color: #721c24; border-top: 1px solid #dc3545; }

/* Warning */
.ui-dialog.message-warning .ui-dialog-titlebar { background-color: #ffc107; color: #212529; }
.ui-dialog.message-warning, .ui-dialog.message-warning .ui-dialog-buttonpane { background-color: #fff3cd; color: #856404; border-top: 1px solid #ffc107; }

/* Info */
.ui-dialog.message-info .ui-dialog-titlebar { background-color: #17a2b8; color: white; }
.ui-dialog.message-info, .ui-dialog.message-info .ui-dialog-buttonpane { background-color: #d1ecf1; color: #0c5460; border-top: 1px solid #17a2b8; }


/*** Button ***/
.btn { transition: .5s; }
.btn-min { min-width:120px; }

.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}


/*** Layout ***/
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 100vh;
    overflow-y: auto;
    background: var(--primary-light);
    transition: 0.5s;
    z-index: 999;
}

.content {
    margin-left: 200px;
    min-height: 100vh;
    /*background: var(--white-blue);*/
    background: var(--ghost-white);
    transition: 0.5s;
}

@media (min-width: 992px) {
    .sidebar {
        margin-left: 0;
    }

    .sidebar.open {
        margin-left: -200px;
    }

    .content {
        width: calc(100% - 200px);
    }

    .content.open, .content:has(.sign-form){
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        margin-left: -250px;
    }

    .sidebar.open {
        margin-left: 0;
    }

    .content {
        width: 100%;
        margin-left: 0;
    }
}

.content.open .navbar-brand { display: block !important; }
.navbar-brand img { margin-bottom: 5px; }
/*** Navbar ***/
.navbar, .navbar-nav {
	height: 35px !important;
}
.nav-profile
 {
	height: 30px;
	width: 30px;
}
.sidebar-toggler { text-decoration: none; }
.sidebar .navbar { padding-top: 0px; }
.sidebar .navbar .navbar-nav .nav-link,
.sidebar .navbar .navbar-nav .dropdown .dropdown-menu .nav-link {
    padding: 3px 3px;
    color: var(--bs-purple);
    font-weight: 500;
    border-left: 3px solid var(--bs-gray-dark);
    border-radius: 0 30px 30px 0;
    outline: none;
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link:focus,
.sidebar .navbar .navbar-nav .nav-link.active {
	color: var(--light) !important;
    background: var(--gray);
    border-color: var(--primary-light);
}

.sidebar .navbar .navbar-nav .dropdown .custom-dropdown {
    color: var(--bs-gray-dark);
}

.sidebar .navbar .navbar-nav .nav-link i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dark);
	/*color: var(--gray);*/
	color: var(--primary-light);
    border-radius: 40px;
}

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i {
	background: var(--dark);
    color: var(--gray);
}

.sidebar .navbar .dropdown-toggle::after {
    position: absolute;
    top: 9px;
    right: 15px;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

.sidebar .navbar .dropdown-item {
    padding-left: 25px;
    border-radius: 0 30px 30px 0;
    color: var(--black-timer);
}

.sidebar .navbar .dropdown-item:hover,
.sidebar .navbar .dropdown-item.active {
    background: var(--dark);
	color: var(--gray);
}

.content .navbar .navbar-nav .nav-link {
    margin-left: 10px;
    padding: 2px 0;
    color: var(--light);
    outline: none;
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active {
    color: var(--bs-gray);
}

.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray);
    background: var(--bs-gray-dark);
    border-radius: 40px;
}

.content .navbar .dropdown-item {
    color: var(--success-light);
}

.content .navbar .dropdown-item:hover,
.content .navbar .dropdown-item.active {
    background: var(--dark);
}

.content .navbar .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: middle;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.content .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}


@media (max-width: 575.98px) {
    .content .navbar .navbar-nav .nav-link {
        margin-left: 15px;
    }
}

.dropdown-menu {
  display: none;
}
.dropdown-menu.show {
  display: block;
  position: absolute; /* Or whatever fits your layout */
}

.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) { padding-top: 0.75rem !important; }
.form-floating>label { padding: 0.5rem !important; }
.form-floating>.form-control { padding: 0.3rem !important; padding-top: 0.75rem !important; }
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    opacity: .65 !important;
    transform: scale(.75) translateY(-.75rem) translateX(0rem) !important;
}

.alert-placeholder {
    min-height: 1.5em;
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
}

.placeholder-div { position: relative; min-height: 32px; border: 1px solid #ced4da; border-radius: 0.25rem; background-color: #fff; color: #212529; }
.placeholder-div:empty::before { content: attr(data-placeholder); color: #6c757d; pointer-events: none; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); }

.bg-primary-light { background-color:var(--primary-light) !important; }
.bg-primary-lightest { background-color:var(--primary-lightest) !important; }

/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.progress .progress-bar {
    width: 0px;
    transition: 2s;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 5px solid var(--primary);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--dark);
    border-color: var(--primary);
}