:root {

    --bodyFont-color   : #212529;
    --bodyFont-family  : 'inter', sans-serif;
    --btnFont-color    : #fff;
    --bg-main          : linear-gradient(253.27deg, #00F0FF -22.75%, #1869A0 24.91%, #281463 100.61%);
    --bg-main-hover    : linear-gradient(253.27deg, #74f1fa -22.75%, #2b9be6 24.91%, #2e08a0 100.61%);
    --bg-sidebar       : linear-gradient(199.99deg, #00F0FF -14.07%, #1869A0 -6.59%, #2D1575 88.25%);
    --input-bg         : #F4F4F4;
    --input-placeholder: #A1A1A1;
    --formError-color  : #DA1E28;
    --textColor-primary: #281463;
}

html {
    margin : o;
    padding: 0;
}

body {
    margin          : 0;
    padding         : 0;
    font-family     : var(--bodyFont-family);
    font-size       : 16px;
    font-weight     : 400;
    line-height     : 16px;
    color           : var(--bodyFont-color);
    background-color: #fff;
    transition      : 0.2s all;
    overflow-y      : hidden;
}

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin            : 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/*UTTELTIES STYLE */

.form-group {
    margin-bottom: 27px;
}

.form-group label {
    font-size     : 14px;
    line-height   : 16px;
    letter-spacing: 0.32px;
    display       : block;
    margin-bottom : 8px;
}

.form-group .form-control,
.form-gorup .form-select {
    width           : 100%;
    height          : 48px;
    border-radius   : 10px;
    background-color: var(--input-bg);
    border          : 0;
    border-bottom   : 1px solid #8D8D8D;
    padding         : 15px 16px;
    font-size       : 14px;
    font-weight     : 400;
    line-height     : 18px;
    letter-spacing  : 0.16px;
    color           : var(--bodyFont-color);
}

.form-group .form-control:focus,
.form-group .form-control:active,
.form-gorup .form-select:focus,
.form-gorup .form-select:active {
    outline      : none;
    box-shadow   : none;
    border       : none;
    border-bottom: 1px solid #0651DF;
}

.form-group .form-control::placeholder {
    font-size  : 14px;
    font-weight: 400;
    line-height: 18px;
    color      : var(--input-placeholder);
}

.form-group .form-error {
    font-weight   : 400;
    font-size     : 12px;
    line-height   : 16px;
    letter-spacing: 0px;
    color         : var(--formError-color);
    margin-top    : 4px;
    display       : none;
}

.form-group.error .form-error {
    display: block;
}

.form-group.error .form-control {
    border-bottom-color: var(--formError-color);
}

/* Per-column errors (e.g. email vs optional phone in one .form-group.row) */
.form-group .col-12.error .form-error,
.form-group .col-md-6.error .form-error,
.form-group .col-md-3.error .form-error,
.form-group .col-lg-6.error .form-error,
.form-group .col-lg-4.error .form-error,
.form-group .col-sm-6.error .form-error,
.form-group .col.error .form-error {
    display: block;
}

.form-group .col-12.error .form-control,
.form-group .col-md-6.error .form-control,
.form-group .col-md-3.error .form-control,
.form-group .col-lg-6.error .form-control,
.form-group .col-lg-4.error .form-control,
.form-group .col-sm-6.error .form-control,
.form-group .col.error .form-control {
    border-bottom-color: var(--formError-color);
}

.form-group .form-check {
    display    : flex;
    align-items: center;
    gap        : 10px;
    padding    : 0;
}

.form-group .form-check .form-check-input {
    margin: 0;
}

.password-wrapper {
    position: relative;
}

.password-toggle {
    position : absolute;
    top      : 50%;
    right    : 12px;
    transform: translateY(-50%);
    cursor   : pointer;
    color    : #6c757d;
    z-index  : 5;
}

.password-toggle:hover {
    color: var(--bodyFont-color);
}

.btn-primary {
    background    : var(--bg-main);
    color         : var(--btnFont-color);
    border-radius : 10px;
    padding       : 15px 20px;
    font-size     : 14px;
    font-weight   : 500;
    letter-spacing: 0.16px;
    border        : 0;
    transition    : background 0.2s all;
}

.btn-primary:hover {
    background: var(--bg-main-hover);
}

.btn.text-btn {
    background-color: transparent;
    border          : 0;
    border-radius   : 0;
    color           : var(--bodyFont-color);
    text-transform  : uppercase;
    padding         : 6px 10px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 10px;
    font-size       : 12px;
    font-weight     : 500;
    letter-spacing  : 0.5px;
    line-height     : 20px;
}

.btn-primary.btn-icon,
.btn-light.btn-icon {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 14px;
}

.btn-light {
    background    : #fff;
    color         : var(--bodyFont-color);
    border-radius : 10px;
    padding       : 10px 16px;
    font-size     : 14px;
    font-weight   : 500;
    letter-spacing: 0.16px;
    border        : 0;
    box-shadow    : 0px 5px 20px 0px #0000001A;
}

.btn-light:hover {
    background-color: #F8FAFF;
}

.cancel-btn {
    background-color: #EBF2FF;
    border          : 0;
    font-size       : 14px;
    line-height     : 18px;
    color           : var(--bodyFont-color);
}

.btn.btn-menu-toggle {
    border          : 0;
    border-radius   : 0px;
    padding         : 0;
    background-color: #f4f4f4;
    width           : 40px;
    height          : 40px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--bodyFont-color);
    font-size       : 24px;
}

.btn.menu-toggle:hover,
.btn.menu-toggle:active {
    outline         : none;
    border          : none;
    background-color: #f4f4f4;
}

.form-modal .modal-dialog {
    max-width: 600px;
}

.form-modal .modal-dialog .modal-content {
    border-radius: 20px;
    box-shadow   : 0px 5px 20px 0px #0000000D;
    border       : 0;
}

.form-modal .modal-dialog .modal-content .modal-header {
    padding       : 20px 30px;
    padding-bottom: 10px;
    position      : relative;
}

.form-modal .modal-dialog .modal-content .modal-header h1 {
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 28px;
    letter-spacing: 0px;
    color         : var(--bodyFont-color);
}

.form-modal .modal-dialog .modal-content .modal-header .btn-close {
    opacity         : 1;
    margin          : 0;
    position        : absolute;
    right           : 30px;
    padding         : 0;
    width           : 30px;
    height          : 30px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 50%;
    background-color: #f3f3fd;
    background-size : 12px;
}

.form-modal .modal-dialog .modal-content .modal-header .btn-close:hover {
    opacity: 0.7;
}

.form-modal .modal-dialog .modal-content .modal-body {
    padding: 14px 30px 30px 30px;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group {
    margin-bottom: 24px;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group label {
    font-size: 12px;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .form-control {
    padding: 10px 16px;
    height : 40px;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .form-control.datePicker {
    background-image   : url(../images/icons/date-icon.svg);
    background-position: center right 10px;
    background-repeat  : no-repeat;
    padding-right      : 30px;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .form-control.timePicker {
    background-image   : url(../images/icons/time-icon.svg);
    background-position: center right 10px;
    background-repeat  : no-repeat;
    padding-right      : 30px;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .qty-box,
.option-adjustment .form-group .qty-box {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    border-bottom  : 1px solid #8D8D8D;
    border-radius  : 10px;
    padding        : 0;
    height         : 40px;
    background     : var(--input-bg);
    max-width      : 100%;
    overflow       : hidden;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .qty-box .qty-input,
.option-adjustment .form-gorup .qty-box .qty-input {
    border     : none;
    outline    : none;
    flex       : 1 1 auto;
    min-width  : 0;
    width      : auto;
    background : transparent;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .qty-box .qty-buttons,
.option-adjustment .form-group .qty-box .qty-buttons {
    display  : flex;
    flex     : 0 0 auto;
    height   : 100%;
    position : relative;
    z-index  : 1;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .qty-box .qty-buttons button,
.option-adjustment .form-group .qty-box .qty-buttons button {
    width     : 40px;
    border    : none;
    background: transparent;
    font-size : 26px;
    color     : var(--bodyFont-color);
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .qty-box .qty-buttons button.btn-plus,
.option-adjustment .form-group .qty-box .qty-buttons button.btn-plus {
    border-left: 1px solid #d6d6d6;
}

.form-modal .modal-dialog .modal-content .modal-body .modal-form .form-group .qty-box .qty-buttons button:hover,
.option-adjustment .form-group .qty-box .qty-buttons button:hover {
    background: #eee;
}

.form-modal .modal-dialog .modal-content .modal-body p {
    font-weight   : 400;
    font-size     : 16px;
    line-height   : 115%;
    letter-spacing: 0.16px;
    color         : #212529;
}

.form-modal .modal-dialog .modal-content .modal-footer {
    padding        : 0;
    border         : 0;
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: center;
}

.form-modal .modal-dialog .modal-content .modal-footer .btn {
    width          : 50%;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 15px 30px;
    font-weight    : 600;
    border-radius  : 0;
    margin         : 0;
    font-size      : 14px;
    line-height    : 18px;
}

.form-modal .modal-dialog .modal-content .modal-footer .btn i {
    font-size: 18px;
}

.form-modal .modal-dialog .modal-content .modal-footer .btn.cancel-btn {
    border-bottom-left-radius: 20px;
}

.form-modal .modal-dialog .modal-content .modal-footer.modal-footer-single .btn {
    width: 100%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    justify-content: center;
}

.form-modal .modal-dialog .modal-content .modal-footer .btn.btn-primary,
.form-modal .modal-dialog .modal-content .modal-footer .btn.btn-delete {
    border-bottom-right-radius: 20px;
}

.form-modal .modal-dialog .modal-content .modal-footer .btn.btn-delete {
    background    : linear-gradient(268.63deg, #FF585B -5.28%, #E0002D 104.89%);
    color         : var(--btnFont-color);
    letter-spacing: 0.16px;
    border        : 0;
}

.form-modal .modal-dialog .modal-content .modal-footer .btn.btn-delete:hover {
    background: linear-gradient(268.63deg, #fa282b -5.28%, #af1836 104.89%);
    ;
    border-color: #E0002D;
}

.delete-modal .modal-dialog {
    max-width: 500px;
}

.iti__country-container,
.iti__selected-country-primary {
    border-top-left-radius   : 10px;
    border-bottom-left-radius: 10px;
}

.iti__dropdown-content {
    border-radius: 10px;
    overflow     : hidden;
}

.bootstrap-select {
    width        : 100% !important;
    padding      : 0;
    border-radius: 10px;
    border       : none;
    border-bottom: 1px solid #8D8D8D;
}

.bootstrap-select .dropdown-toggle {
    border-radius   : 10px !important;
    color           : var(--bodyFont-color) !important;
    font-weight     : 400;
    font-size       : 14px;
    padding         : 10px 16px;
    height          : 40px;
    background-color: var(--input-bg);
    box-shadow      : none;
}

.bootstrap-select .dropdown-toggle::after {
    width        : 8px;
    height       : 8px;
    border-right : 2px solid #212529;
    border-bottom: 2px solid #212529;
    border-top   : 0;
    border-left  : 0;
    transition   : 0.2s all;
    transform    : rotate(45deg);
}

.bootstrap-select .dropdown-toggle.show::after {
    transform: rotate(225deg);
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:active {
    box-shadow      : none;
    border          : none;
    outline         : none !important;
    outline-offset  : 0;
    background-color: var(--input-bg);
}

.bootstrap-select .dropdown-toggle.show,
.bootstrap-select .dropdown-toggle:hover {
    background-color: var(--input-bg) !important;
}

.bootstrap-select .dropdown-menu {
    box-shadow: -4px 14px 16px 0px #0000001F;
    border    : 0;
}

.bootstrap-select .dropdown-menu li .dropdown-item:hover,
.bootstrap-select .dropdown-menu li .dropdown-item:focus,
.bootstrap-select .dropdown-menu li .dropdown-item:active {
    background-color: #d8d4d4;
    color           : var(--bodyFont-color);
}

.customSelect.vscomp-ele {
    max-width: 100%;
}

.customSelect.vscomp-ele .vscomp-wrapper {
    font-size     : 14px;
    font-weight   : 400;
    line-height   : 18px;
    letter-spacing: 0.16px;
    color         : var(--bodyFont-color);
    font-family   : 'inter', sans-serif;
}

.customSelect.vscomp-ele .vscomp-wrapper .vscomp-toggle-button {
    border-radius   : 10px;
    background-color: var(--input-bg);
    border          : 0;
    border-bottom   : 1px solid #8D8D8D;
    padding         : 10px 16px;
    height          : 40px;
    font-size       : 14px;
    font-weight     : 400;
    line-height     : 18px;
    letter-spacing  : 0.16px;
    color           : var(--bodyFont-color);
}

.customSelect.vscomp-ele .vscomp-wrapper:focus .vscomp-toggle-button,
.customSelect.vscomp-ele .vscomp-wrapper.focused .vscomp-toggle-button {
    box-shadow: none;
}

.customSelect.vscomp-ele .vscomp-wrapper .vscomp-toggle-button .vscomp-arrow {
    transition: all 0.2s;
    transform : rotate(0deg);
}

.customSelect.vscomp-ele .vscomp-wrapper .vscomp-toggle-button .vscomp-arrow::after {
    width        : 8px;
    height       : 8px;
    border-right : 2px solid #212529;
    border-bottom: 2px solid #212529;
    border-top   : 0;
    border-left  : 0;
    transition   : 0.2s all;
    margin-top   : 0;
}

.customSelect.vscomp-ele .vscomp-wrapper.focused .vscomp-arrow {
    transform: rotate(180deg);
}

.customSelect.vscomp-ele .vscomp-wrapper.focused .vscomp-arrow::after {
    margin-top: -6px;
}

.toast {
    width          : auto;
    padding        : 16px 20px;
    border-radius  : 12px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 16px;
    font-size      : 14px;
    font-weight    : 500;
    color          : #2F3F53;
    position       : fixed;
    top            : 30px;
    left           : 50%;
    transform      : translateX(-50%) translateY(-80px);
    opacity        : 0;
    transition     : transform 0.35s ease, opacity 0.35s ease;
    z-index        : 999;
}

.toast:not(.show) {
    display: flex !important;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity  : 1;
}

.toast.success {
    border          : 1px solid #9ADFCE;
    background-color: #E1F8E8;
}

.toast.error {
    border          : 1px solid #F4B0A1;
    background-color: #FFF5F3;
}

/* LOGIN PAGE STYLES */

section.login-section,
section.otp-section {
    background     : var(--bg-main);
    min-height     : 100vh;
    display        : flex;
    justify-content: center;
    align-items    : center;
    position       : relative;
}

section.login-section .container,
section.otp-section .container {
    z-index: 1;
}

section.login-section::after,
section.otp-section::after {
    content            : '';
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 100%;
    height             : 100%;
    background-image   : url('../images/backgrounds/login-bg.png');
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
    z-index            : 0;
}

.login-logo-section {
    display       : flex;
    flex-direction: column;
    gap           : 50px;
}

.logging-brand {
    display    : flex;
    align-items: center;
    gap        : 12px;
}

.logging-brand-icon {
    width     : 37px;
    height    : 42px;
    flex-shrink: 0;
    object-fit: none;
    object-position: left center;
}

.logging-brand-name {
    font-family   : 'Inter', sans-serif;
    font-size     : 20px;
    font-weight   : 700;
    letter-spacing: 0.04em;
    color         : #EBF2FF;
    line-height   : 1.2;
}

.logging-solution-title {
    font-family  : Georgia, 'Times New Roman', serif;
    font-size    : clamp(28px, 4vw, 40px);
    font-weight  : 400;
    color        : #fff;
    line-height  : 1.15;
    margin       : 0 0 16px;
}

.logging-solution-subtitle {
    font-family   : 'IBM Plex Sans', sans-serif;
    font-size     : 14px;
    font-weight   : 500;
    letter-spacing: 0.18em;
    color         : #00F0FF;
    margin        : 0;
}

.login-logo-section .logging-solution {
    max-width: 385px;
}

.login-section .login-form,
.otp-section .otp-form {
    background         : #fff;
    padding            : 70px 48px;
    border-radius      : 16px;
    box-shadow         : 0px 14px 34px 0px #0000001A;
    border             : 1px solid;
    border-image-source: linear-gradient(178.6deg, rgba(0, 240, 255, 0.6) -25.02%, rgba(0, 240, 255, 0.3) 119.08%);
    width              : 100%;
    max-width          : 520px;
    margin-left        : auto;
}

.otp-section .otp-form {
    padding: 20px 48px 40px 48px;
}

.login-section .login-form h1,
.otp-section .otp-form h1 {
    font-size    : 24px;
    font-weight  : 400;
    color        : var(--bodyFont-color);
    line-height  : 26px;
    margin-bottom: 16px;
}

.otp-section .otp-form p.otp-title {
    font-size    : 14px;
    font-weight  : 400;
    color        : var(--bodyFont-color);
    line-height  : 18px;
    margin-bottom: 30px;
    margin-top   : 16px;
}

.login-section .login-form .login-subtitle,
.otp-section .otp-form .otp-subtitle {
    font-size     : 14px;
    font-weight   : 400;
    font-family   : 'IBM Plex Sans', sans-serif;
    color         : var(--bodyFont-color);
    line-height   : 18px;
    letter-spacing: 0.18px;
    margin-bottom : 30px;
}

.login-form .btn-primary,
.otp-form .btn-primary {
    width        : 100%;
    margin-bottom: 27px;
}

.login-form .register-link,
.otp-form .otp-link {
    color          : #281463;
    font-family    : 'IBM Plex Sans', sans-serif;
    font-size      : 14px;
    font-weight    : 400;
    line-height    : 18px;
    text-decoration: none;
    border-bottom  : 1px solid #281463;
}

.otp-section .otp-form .btn.text-btn {
    margin-bottom: 40px;
    width        : fit-content;
    padding-left : 0;
}

@media (max-width: 992px) {

    .login-section .login-form,
    .otp-section .otp-form {
        margin-left: 0;
        margin-top : 50px;
    }
}

@media (max-width: 600px) {

    section.login-section,
    section.otp-section {
        padding: 0px 20px;
    }

    .login-section .login-form,
    .otp-section .otp-form {
        width  : 100%;
        padding: 25px 15px;
    }

    .otp-section .otp-form {
        padding: 10px 20px 25px 20px;
    }
}

@media (max-width: 480px) {
    .login-logo-section .logging-solution {
        max-width: 250px;
    }
}

/* SIDE BAR STYLE */

.sidebar {
    width     : 240px;
    height    : 100vh;
    background: var(--bg-sidebar);
    position  : fixed;
    top       : 0;
    left      : 0;
    transition: 0.3s all;
    z-index   : 3;
}

.sidebar.toggle {
    width: 100px;
}

.sidebar .logo-sec {
    position     : relative;
    padding      : 14px 26px;
    border-bottom: 1px solid #FFFFFF1A;
    transition   : 0.2s all;
}

.sidebar.toggle .logo-sec {
    padding: 14px 14px;
}

.sidebar .logo-sec .img-area {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.sidebar .logo-sec .img-area img.logo-icon {
    width : 37px;
    height: auto;
}

.sidebar .logo-sec .img-area img.logo-text {
    width     : 75px;
    height    : auto;
    opacity   : 1;
    visibility: visible;
    transition: 0.2s all;
}

.sidebar.toggle .logo-sec .img-area img.logo-text {
    opacity   : 0;
    visibility: hidden;
    display   : none;
}

.sidebar .logo-sec .sidebar-toggle {
    position       : absolute;
    top            : 0;
    right          : 0;
    height         : 100%;
    padding        : 10px;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.sidebar .logo-sec .sidebar-toggle .btn {
    border : 0;
    padding: 4px;
    margin : 0;
}

.sidebar .logo-sec .sidebar-toggle .btn i {
    color    : #fff;
    font-size: 30px;
}

.sidebar .logo-sec .sidebar-toggle .btn .toggleClose {
    display: none;
}

.sidebar.toggle .logo-sec .sidebar-toggle .btn .toggleClose {
    display: block;
}

.sidebar.toggle .logo-sec .sidebar-toggle .btn .toggleOpen {
    display: none;
}

.sidebar .sidebar-nav {
    padding   : 30px 12px;
    overflow  : hidden;
    overflow-y: auto;
    height    : 100%;
    position  : relative;
}

.sidebar .sidebar-nav ul {
    gap: 6px;
}

.sidebar .sidebar-nav ul li.nav-item a.nav-link {
    width           : 100%;
    display         : flex;
    align-items     : center;
    gap             : 14px;
    padding         : 13px 14px;
    background-color: transparent;
    color           : #fff;
    font-weight     : 600;
    font-size       : 15px;
    line-height     : 100%;
    border-radius   : 10px;
}

.sidebar .sidebar-nav ul li.nav-item a.nav-link.active,
.sidebar .sidebar-nav ul li.nav-item a.nav-link:hover {
    background-color: #FFFFFF29;
}

.sidebar .sidebar-nav ul li.nav-item a.nav-link .link-text {
    visibility : visible;
    opacity    : 1;
    transition : 0.2s all;
    white-space: nowrap;
}

.sidebar.toggle .sidebar-nav ul li.nav-item a.nav-link {
    width: fit-content;
}

.sidebar.toggle .sidebar-nav ul li.nav-item a.nav-link .link-text {
    visibility: hidden;
    opacity   : 0;
    display   : none;
}

@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }
}

/* HEADER TOP STYLE */

.header-top {
    background-color: #fff;
    padding         : 25px 30px;
    padding-left    : 280px;
    box-shadow      : 0px 2px 10px 0px #0000001A;
    position        : fixed;
    top             : 0;
    left            : 0;
    z-index         : 2;
    width           : 100%;
    transition      : 0.3s all;
}

.sidebar-toggle .header-top {
    padding-left: 140px;
}

.header-top .page-title {
    font-size     : 14px;
    font-weight   : 600;
    text-transform: uppercase;
    line-height   : 20px;
    letter-spacing: 1.12px;
    margin-bottom : 0;
}

.profile-dropdown {
    position: relative;
    top     : auto;
    right   : auto;
    width   : 80px;
    height  : 100%;
}

.header-top-actions {
    position       : absolute;
    top            : 0;
    right          : 0;
    height         : 100%;
    display        : flex;
    align-items    : center;
    gap            : 12px;
    padding-right  : 0;
}

.header-top .header-innter {
    position: relative;
}

.profile-dropdown .dropdown-toggle {
    border         : 0;
    border-radius  : 0px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-left    : 1px solid #EBF2FF;
    width          : 100%;
    height         : 100%;
    padding        : 0;
}

.profile-dropdown .dropdown-toggle:active {
    border-color: #EBF2FF !important;
}

.profile-dropdown .dropdown-toggle span.menu-toggle-bar {
    background: linear-gradient(270deg, #00F0FF -40.62%, #1869A0 6.4%, #281463 100%);
    display   : block;
    position  : absolute;
    top       : 50%;
    margin-top: -1px;
    left      : 50%;
    width     : 25px;
    height    : 3px;
    transition: all 0.3s ease;
}

.profile-dropdown .dropdown-toggle::after {
    display: none;
}

.profile-dropdown .dropdown-toggle span.menu-toggle-bar-top {
    transform: translate(-50%, -5px);
}

.profile-dropdown .dropdown-toggle span.menu-toggle-bar-bottom {
    transform: translate(-50%, 5px);
}

.profile-dropdown .dropdown-toggle.show span.menu-toggle-bar-top {
    transform: translate(-50%, 0px) rotate(-45deg);
}

.profile-dropdown .dropdown-toggle.show span.menu-toggle-bar-bottom {
    transform: translate(-50%, 0px) rotate(45deg);
}

.profile-dropdown .dropdown-menu {
    border            : 1px solid #E4EFFA;
    border-radius     : 0;
    box-shadow        : -4px 14px 16px 0px #0000001F;
    width             : 220px;
    padding           : 0;
    right             : 0;
    visibility        : hidden;
    opacity           : 0;
    -webkit-transition: 0.2s ease-in-out;
    transition        : 0.2s ease-in-out;
    top               : 101% !important;
    display           : block;
    transform         : translateY(20px);
}

.profile-dropdown .dropdown-menu.show {
    visibility: visible;
    opacity   : 1;
    transform : translateY(0px) !important;
}

.profile-dropdown .dropdown-menu li a {
    position     : relative;
    padding      : 20px 20px;
    display      : flex;
    align-items  : center;
    gap          : 16px;
    border-bottom: 1px solid #E4EFFA;
    font-size    : 14px;
    font-weight  : 500;
}

.profile-dropdown .dropdown-menu li:last-child a {
    border-bottom: 0;
}

.profile-dropdown .dropdown-menu li a:active svg path {
    fill: #fff !important;
}

.navbar-inner {
    width           : 100%;
    background-color: #fff;
    box-shadow      : 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter : blur(44px);
    border-radius   : 10px;
    padding         : 6px 6px;
    margin-bottom   : 30px;
}

.navbar-inner li a {
    padding        : 9px 20px;
    border-radius  : 7px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 10px;
    background     : transparent;
    font-weight    : 500;
    font-size      : 16px;
    line-height    : 24px;
    margin-right   : 10px;
    color          : var(--bodyFont-color);
    transition     : 0.1s all;
}

.navbar-inner li:hover a,
.navbar-inner li.active a {
    background: linear-gradient(268.63deg, #00F0FF -21.46%, #1869A0 28.08%, #281463 112.02%);
    color     : #fff;
}

.navbar-inner li a:hover {
    color: #fff;
}

.navbar-inner li:hover a svg path,
.navbar-inner li.active a svg path {
    fill: #fff !important;
}

.header-title-mob .page-title {
    font-size     : 14px;
    font-weight   : 600;
    text-transform: uppercase;
    line-height   : 20px;
    letter-spacing: 1.12px;
    margin-bottom : 0;
}

@media (max-width: 1200px) {
    .navbar-inner li a {
        padding     : 9px 10px;
        gap         : 5px;
        font-size   : 14px;
        margin-right: 5px;
    }
}

@media (max-width: 992px) {
    .header-top {
        padding-left: 30px;
    }
}

@media (max-width: 797px) {
    .navbar-inner {
        flex-direction: column;
    }

    .header-top {
        padding-left: 20px;
        padding     : 15px 20px;
    }

    .header-top .icon-btn,
    .header-top .page-title {
        display: none;
    }
}


/* MAIN CONTENT STYLE */

section.main-content {
    width   : 100%;
    height  : 100vh;
    overflow: hidden;
    position: relative;
    z-index : 1;
}

.main-content .main-content-body {
    position    : relative;
    height      : 100%;
    padding-left: 240px;
    padding-top : 70px;
    transition  : 0.3s all;
}

.sidebar-toggle .main-content .main-content-body {
    padding-left: 100px;
}

.main-content .main-content-body .body-inner {
    position           : relative;
    padding            : 30px 20px;
    overflow           : hidden;
    overflow-y         : auto;
    height             : 100%;
    background-image   : url('../images/backgrounds/bg-main-content.png');
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
}

.total-card {
    background-color: #fff;
    border          : 2px solid #FFFFFF;
    box-shadow      : 0px 5px 20px 0px #0000001A;
    border-radius   : 20px;
    display         : flex;
    flex-direction  : column;
    gap             : 14px;
    padding         : 25px 26px;
    position        : relative;
}

.total-card .title {
    font-weight   : 500;
    font-size     : 12px;
    line-height   : 20px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color         : var(--textColor-primary);
}

.total-card .descp {
    font-weight: 600;
    font-size  : 30px;
    line-height: 100%;
    color      : var(--textColor-primary);
}

.total-card .card-icon {
    position : absolute;
    top      : 50%;
    right    : 25px;
    transform: translateY(-50%);
    height   : 50px;
    width    : 60px;
}

.total-card .card-icon img {
    width : auto;
    height: 50px;
    margin: auto;
}

.totalsCard-row .col-lg-4 {
    margin-bottom: 20px;
}

.filter-row {
    background-color: #fff;
    padding         : 13px 16px;
    border          : 2px solid rgba(255, 255, 255, 0.22);
    box-shadow      : 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    margin-bottom   : 20px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    flex-wrap       : wrap;
    width           : 100%;
    border-radius   : 20px;
}

.filter-row .filter-input-search .form-control {
    padding-left       : 30px;
    padding-top        : 10px;
    padding-bottom     : 10px;
    padding-right      : 20px;
    border             : 0;
    border-bottom      : 1px solid transparent;
    font-weight        : 400;
    font-size          : 14px;
    line-height        : 18px;
    letter-spacing     : 0.16px;
    width              : 450px;
    background-image   : url('../images/icons/search-ic.svg');
    background-position: left 5px center;
    background-size    : inherit;
    background-repeat  : no-repeat;
    border-radius      : 0;
}

.filter-row .filter-input-search .form-control:focus,
.filter-row .filter-input-search .form-control:active {
    box-shadow   : none;
    outline      : none;
    border-bottom: 1px solid rgba(6, 81, 223, 1);
}

.filter-row .filter-input-search .form-control::placeholder {
    color: rgba(139, 139, 139, 1);
}

.filter-row .btn-primary {
    padding: 10px 16px;
}

.comapny-details-card {
    border          : 2px solid rgba(255, 255, 255, 0.22);
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow      : 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius   : 20px;
    backdrop-filter : blur(44px);
}

.comapny-details-card .card-body {
    padding       : 16px 16px;
    display       : flex;
    flex-direction: column;
    gap           : 14px;
}

.comapny-details-card .card-body .cc-header a {
    width          : 100%;
    text-decoration: none;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    background     : linear-gradient(90deg, #FFFFFF 0%, #DBEEFF 100.1%);
    border-radius  : 20px;
    padding        : 12px 16px;
    border         : 2px solid #FFFFFF;
    transition     : color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.comapny-details-card .card-body .cc-header a:hover {
    border: 2px solid #42609a;
}

.comapny-details-card .card-body .cc-header a .cc-name-logo {
    display    : flex;
    align-items: center;
    gap        : 20px;
}

.comapny-details-card .card-body .cc-header a .cc-name-logo .company-logo {
    width          : 50px;
    height         : 50px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : #e7f0fe;
    border-radius  : 50%;
}

.comapny-details-card .card-body .cc-header a .cc-name-logo .company-logo span.logo-placeholder {
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 20px;
    letter-spacing: 0%;
    text-align    : center;
    color         : var(--textColor-primary);
    text-transform: uppercase;
}

.comapny-details-card.eventdC .card-body .cc-header a .cc-name-logo .company-logo {
    width          : 90px;
    height         : 90px;
    justify-content: flex-start;
}

.comapny-details-card .card-body .cc-header a .cc-name-logo .company-logo img {
    width     : auto;
    max-width : 50px;
    height    : auto;
    max-height: 50px;
}

.comapny-details-card.eventdC .card-body .cc-header a .cc-name-logo .company-logo img {
    max-width : 85px;
    max-height: 85px;
}

.comapny-details-card .card-body .cc-header a .cc-name-logo .company-logo-name {
    font-weight: 500;
    font-size  : 16px;
    line-height: 20px;
    color      : rgba(40, 20, 99, 1);
}

.comapny-details-card .card-body .cc-header a .link-icon {
    width           : 32px;
    height          : 32px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: #fff;
    color           : var(--textColor-primary);
    font-size       : 22px;
}

.comapny-details-card .card-body .cc-content {
    display         : flex;
    flex-direction  : column;
    background-color: #fff;
    border-radius   : 16px;
    padding         : 12px 16px;
}

.comapny-details-card.cd .card-body .cc-content {
    gap: 10px;
}

.comapny-details-card .card-body .cc-content .cc-row {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    font-size      : 14px;
    line-height    : 18px;
    font-weight    : 400;
    color          : rgba(102, 112, 133, 1);
    border-bottom  : 1px solid #E2F1FF;
    padding        : 10px 0px;
}

.comapny-details-card .card-body .cc-content .cc-row:last-child {
    border-bottom: 0;
}

.comapny-details-card.cd .card-body .cc-content .cc-row {
    padding: 0;
    border : 0;
}

.comapny-details-card .card-body .cc-content .cc-row .descp {
    font-weight: 500;
    color      : var(--bodyFont-color);
}

.comapny-details-card .card-body .cc-content .cc-row .descp .badge {
    font-size    : 12px;
    display      : flex;
    align-items  : center;
    gap          : 7px;
    font-weight  : 500;
    line-height  : 18px;
    color        : #fff;
    border-radius: 16px;
    padding      : 2px 8px;
}

.comapny-details-card .card-body .cc-content .cc-row .descp .badge.bg-success {
    background-color: rgba(20, 186, 109, 1) !important;
}

.comapny-details-card .card-body .cc-content .cc-row .descp .badge.bg-secondary {
    background-color: #A4A2A2 !important;
}

.comapny-details-card .card-body .cc-content .cc-row .descp .badge .dot {
    width           : 6px;
    height          : 6px;
    border-radius   : 50%;
    background-color: #fff;
}

.comapny-details-card .card-body .btn.btn-cc-edit {
    background-color: #fff;
    box-shadow      : 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    width           : 100%;
    padding         : 8px 16px;
    border-radius   : 12px;
    display         : flex;
    align-items     : center;
    gap             : 10px;
    font-size       : 12px;
    font-weight     : 500;
    color           : var(--textColor-primary);
    letter-spacing  : 0.95px;
    justify-content : center;
    text-transform  : uppercase;
}

.comapny-details-card .card-body .btn.btn-cc-edit:hover {
    background-color: #f0f6fe;
}

.action-alert {
    background-color: #fff;
    padding         : 8px 10px;
    border-radius   : 10px;
    text-align      : center;
    font-weight     : 400;
    font-size       : 14px;
    line-height     : 20px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
}

.action-alert span.number {
    font-weight: 700;
}

.action-alert.inprogress img {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.action-alert.inprogress .dots {
    width     : 20px;
    display   : inline-block;
    text-align: left;
}

.action-alert.inprogress .dots::after {
    content  : "";
    animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
    0% {
        content: "";
    }

    33% {
        content: ".";
    }

    66% {
        content: "..";
    }

    100% {
        content: "...";
    }
}

/* Activity Logs Data Table */
.activity-logs-table-card {
    /* background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); */
    overflow : hidden;
    position : relative;
    /* border: 2px solid rgba(255, 255, 255, 0.22); */
}

.activity-logs-table-card .data-table-controls {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    flex-wrap       : wrap;
    gap             : 12px;
    /* padding      : 13px 16px;
    background-color: #F4F4F4; */
    margin-bottom   : 14px;
}

.activity-logs-table-card .data-table-search {
    position     : relative;
    flex         : 1;
    min-width    : 200px;
    border       : 1px solid #EAECF0;
    background   : #fff;
    border-radius: 10px;
    padding      : 6px 20px;
}

.activity-logs-table-card .data-table-search .bi-search {
    position      : absolute;
    left          : 30px;
    top           : 50%;
    transform     : translateY(-50%);
    font-size     : 16px;
    color         : #A1A1A1;
    pointer-events: none;
}

.activity-logs-table-card .data-table-search .form-control {
    width           : 100%;
    height          : 30px;
    padding-left    : 40px;
    padding-right   : 16px;
    border          : 0;
    border-radius   : 10px;
    background-color: #fff;
    font-size       : 14px;
    font-weight     : 400;
    line-height     : 18px;
    letter-spacing  : 0.16px;
    color           : var(--bodyFont-color);
    padding-top     : 0;
    padding-bottom  : 0;
}

.activity-logs-table-card .data-table-search .form-control::placeholder {
    color: var(--input-placeholder);
}

.activity-logs-table-card .data-table-search .form-control:focus {
    outline         : none;
    box-shadow      : none;
    border          : none;
    background-color: #fff;
}

.activity-logs-table-card .data-table-per-page {
    width        : 185px;
    display      : flex;
    align-items  : center;
    gap          : 8px;
    border       : 1px solid #EAECF0;
    border-radius: 10px;
    background   : #fff;
    padding      : 6px 20px;
}

.activity-logs-table-card .data-table-per-page .form-select {
    width              : auto;
    min-width          : 40px;
    height             : 30px;
    padding            : 0px 3px;
    border             : 0;
    border-radius      : 10px;
    font-size          : 12px;
    font-weight        : 500;
    color              : var(--bodyFont-color);
    background-position: center right 0;
}

.activity-logs-table-card .data-table-per-page .form-select:focus {
    outline   : none;
    box-shadow: none;
    border    : none;
}

.activity-logs-table-card .data-table-per-page .per-page-label {
    font-size  : 12px;
    font-weight: 500;
    color      : var(--bodyFont-color);
    white-space: nowrap;
}

.filterCollapse .card {
    border-radius: 10px;
    box-shadow   : 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border       : 0;
}

.activity-logs-table-card .table-responsive {
    border-radius: 10px;
    box-shadow   : 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border       : 0;
}

.activity-logs-table-card .activity-logs-table thead tr {
    background-color: #E9ECEF;
}

.activity-logs-table-card .activity-logs-table thead th {
    font-size     : 12px;
    font-weight   : 500;
    line-height   : 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color         : var(--bodyFont-color);
    padding       : 13px 20px;
    border        : 0;
    border-bottom : 1px solid #dee2e6;
    vertical-align: middle;
    white-space   : nowrap;
}

.activity-logs-table-card .activity-logs-table tbody tr {
    background-color: #fff;
}

.activity-logs-table-card .activity-logs-table tbody td {
    font-size     : 14px;
    font-weight   : 400;
    line-height   : 18px;
    color         : var(--bodyFont-color);
    padding       : 12px 20px;
    border        : 0;
    border-bottom : 1px solid #EAECF0;
    white-space   : nowrap;
    vertical-align: middle;
}

.activity-logs-table-card .activity-logs-table tbody tr:hover td,
.activity-logs-table-card .activity-logs-table tbody tr.active td {
    background-color   : #F8FAFF;
    --bs-table-bg-state: transparent;
}

.activity-logs-table-card .activity-logs-table thead th input,
.activity-logs-table-card .activity-logs-table tbody td input {
    cursor  : pointer;
    width   : 16px;
    height  : 16px;
    position: relative;
    top     : 3px;
}

.activity-logs-table-card .activity-logs-table tbody td .attendee-name,
.activity-logs-table-card .activity-logs-table tbody td .company-name {
    font-weight: 500;
}

.activity-logs-table-card .activity-logs-table tbody td .attendee-email,
.activity-logs-table-card .activity-logs-table tbody td .job-title,
.activity-logs-table-card .activity-logs-table tbody td .status-time {
    color      : #5a5b5c;
    font-weight: 400;
    font-size  : 12px;
}

.activity-logs-table-card .activity-logs-table tbody td .status.text-success {
    color: #0A9E59 !important;
}

.activity-logs-table-card .activity-logs-table tbody td .status.text-danger {
    color: #FA4D56 !important;
}

.activity-logs-table-card .activity-logs-table tbody tr td .barcode {
    width      : 150px;
    display    : inline-block;
    white-space: break-spaces;
}

.activity-logs-table-card .activity-logs-table tbody tr td .btn-text {
    font-weight   : 500;
    font-size     : 14px;
    line-height   : 20px;
    letter-spacing: 0%;
    border-radius : 0;
    border-bottom : 1px solid #212529;
    padding       : 0
}

.activity-logs-table-card .activity-logs-table tbody tr td .btn-text:hover,
.activity-logs-table-card .activity-logs-table tbody tr td .btn-text:active,
.activity-logs-table-card .activity-logs-table tbody tr td .btn-text:focus {
    outline     : none;
    box-shadow  : none;
    border-top  : 0;
    border-left : 0;
    border-right: 0;
}

.activity-logs-table-card .activity-logs-table tbody td .dropdown .btn.action-btn {
    border-radius: 50%;
    padding      : 0;
    width        : 30px;
    height       : 30px;
    background   : #fff;
    color        : var(--bodyFont-color);
    border       : 1px solid #DFEAFD;
}

.activity-logs-table-card .activity-logs-table tbody td .dropdown .btn.action-btn:active,
.activity-logs-table-card .activity-logs-table tbody td .dropdown .btn.action-btn:focus {
    border          : 0;
    background-color: #DFEAFD;
}

.activity-logs-table-card .activity-logs-table tbody td .dropdown .dropdown-menu {
    padding-top   : 0;
    padding-bottom: 0;
    border-radius : 0;
    box-shadow    : -4px 14px 16px 0px #0000001F;
    border        : 1px solid #E4EFFA;
    position      : fixed !important;
}

.activity-logs-table-card .activity-logs-table tbody td .dropdown .dropdown-menu li a {
    padding      : 13px 20px;
    border-bottom: 1px solid transparent;
    font-size    : 14px;
    font-weight  : 500;
    display      : flex;
    align-items  : center;
    gap          : 16px;
    color        : #212529;
}

.activity-logs-table-card .activity-logs-table tbody td .dropdown .dropdown-menu li a i {
    font-size: 18px;
}

.activity-logs-table-card .activity-logs-table tbody td .dropdown .dropdown-menu li:last-child a {
    border-bottom: 0;
}

.activity-logs-table-card .activity-logs-table tbody td .dropdown .dropdown-menu li a:active {
    background-color: transparent;
    color           : #212529;
}

.activity-logs-table-card .data-table-footer {
    display            : flex;
    align-items        : center;
    justify-content    : space-between;
    flex-wrap          : wrap;
    gap                : 5px;
    padding            : 0;
    /* background-color: #F4F4F4; */
    margin-top         : 16px;
}

.activity-logs-table-card .data-table-info {
    font-size  : 12px;
    font-weight: 500;
    color      : var(--bodyFont-color);
}

.activity-logs-table-card .data-table-pagination {
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.activity-logs-table-card .btn-pagination {
    min-width       : 44px;
    height          : 44px;
    padding         : 0;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    border          : 0;
    border-radius   : 10px;
    background-color: #fff;
    color           : var(--bodyFont-color);
    font-size       : 18px;
    border          : 2px solid #EAECF0;
}

.activity-logs-table-card .btn-pagination:hover:not(:disabled) {
    background-color: #E9ECEF;
    color           : var(--bodyFont-color);
}

.activity-logs-table-card .btn-pagination:disabled {
    opacity: 0.5;
    cursor : not-allowed;
}

.activity-logs-table-card .data-table-pagination .form-select {
    width              : auto;
    min-width          : 35px;
    height             : 20px;
    padding            : 0 5px;
    border             : 0;
    border-radius      : 8px;
    background-color   : transparent;
    font-size          : 12px;
    font-weight        : 500;
    color              : var(--bodyFont-color);
    background-position: center right 0;
}

.activity-logs-table-card .data-table-pagination .form-select:focus {
    outline   : none;
    box-shadow: none;
    border    : none;
}

.activity-logs-table-card .pagination-pages-label {
    font-size  : 12px;
    font-weight: 500;
    color      : var(--bodyFont-color);
    white-space: nowrap;
}

.activity-logs-table-card .data-table-pagination .tp-dropdown {
    border          : 2px solid #EAECF0;
    background-color: #fff;
    border-radius   : 10px;
    padding         : 10px 20px;
    display         : flex;
    align-items     : center;
    gap             : 8px;
}

.iti {
    width: 100%;
}

.summary-container {
    margin-bottom: 20px;
}

.summary-container .card {
    border       : 2px solid #FFFFFF;
    position     : relative;
    box-shadow   : 0px 3px 10px 0px #0000001F;
    border-radius: 12px;
}

.summary-container .card.remaning-slots {
    background: linear-gradient(288.55deg, #FFFFFF -10.86%, #9AFFD0 263.63%);
}

.summary-container .card.booked-slots {
    background: linear-gradient(252.51deg, #FFFFFF -10.7%, #FFE4B9 216.98%);
}

.summary-container .card.checkedin-slots {
    background: linear-gradient(253.93deg, #FFFFFF -16.05%, #B7C2FF 190.94%);
}

.summary-container .card .card-body {
    padding: 34px 20px;
}

.summary-container .card .card-body .card-title {
    font-size     : 12px;
    font-weight   : 500;
    line-height   : 20px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    color         : var(--textColor-primary);
}

.summary-container .card .card-body .card-decp {
    font-weight: 600;
    font-size  : 36px;
    line-height: 100%;
    color      : var(--bodyFont-color);
}

.summary-nav {
    border-radius: 10px;
    box-shadow   : 0px 3px 10px 0px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    background   : #fff;
    overflow     : hidden;
}

.summary-nav li {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    gap            : 8px;
    height         : 165px;
    text-transform : uppercase;
    font-size      : 26px;
    font-weight    : 600;
    letter-spacing : 0;
    border-right   : 1px solid rgba(229, 229, 229, 1);
    flex           : 1 1 0;
}

.summary-nav li.summary-heading {
    background    : linear-gradient(293.52deg, #00F0FF -37.81%, #1869A0 23.15%, #281463 129.02%);
    font-weight   : 600;
    color         : #fff;
    font-size     : 18px;
    line-height   : 20px;
    letter-spacing: 0.36px;
    position      : relative;
    z-index       : 1;
}

.summary-nav li.summary-heading::before {
    content            : '';
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 100%;
    height             : 100%;
    background-image   : url('../images/backgrounds/bg-pattern.png');
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
    z-index            : -1;
}

.summary-nav li .title {
    font-weight   : 600;
    font-size     : 12px;
    line-height   : 20px;
    color         : var(--textColor-primary);
    letter-spacing: 0.96px;
}

.summary-nav li.available .summary-descp {
    color: rgba(20, 186, 109, 1);
}

.summary-nav li.booked .summary-descp {
    color: rgba(213, 135, 8, 1);
}

.summary-nav li.checkedin .summary-descp {
    color: rgba(6, 81, 223, 1);
}

.summary-nav li.no-shows .summary-descp {
    color: rgba(220, 53, 69, 1);
}

.summary-nav li:last-child {
    border-right: 0px;
}

.summary-container .empty-sec {
    width     : 100%;
    max-width : 380px;
    text-align: center;
    gap       : 22px;
    margin    : auto;
    height    : calc(100vh - 240px);
}

.summary-container .empty-sec .content {
    display       : flex;
    flex-direction: column;
    gap           : 16px
}

.summary-container .empty-sec .content .title {
    font-size  : 18px;
    font-weight: 600;
    line-height: 26px;
}

.summary-container .empty-sec .content p {
    font-size     : 14px;
    font-weight   : 400;
    line-height   : 18px;
    letter-spacing: 0;
    color         : #667085;
}

.summary-container .empty-sec img.attendees-ic {
    width : 140px;
    height: auto;
}

/* Attendees page style */

.attendees-header,
.manageUser-header,
.badgeTemplate-header {
    margin-bottom: 20px;
}

.attendees-title-header {
    display    : flex;
    align-items: center;
    gap        : 26px;
}

.attendees-title-header .title,
.manageUser-header .title,
.badgeTemplate-header .title {
    font-size     : 14px;
    font-weight   : 500;
    line-height   : 20px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
}

.attendees-title-header .title span,
.badgeTemplate-header .title span {
    letter-spacing: 0;
    font-weight   : 400;
    color         : var(--textColor-primary);
    text-transform: capitalize;
}

.attendees-title-header ul li .btn.table-action-btn {
    background-color: #fff;
    border          : 0px;
    width           : 40px;
    height          : 40px;
    padding         : 0;
    border-radius   : 10px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    box-shadow      : 0px 4px 3px 0px #00000014;
}

.attendees-title-header ul li .btn.table-action-btn:hover {
    background-color: #F8FAFF;
}

.attendees-header .btn.btn-primary,
.manageUser-header .btn.btn-primary {
    padding: 10px 16px;
}

.btn.download-csv-btn,
.btn.add-file-btn {
    background    : linear-gradient(90deg, #80D3F7 25.61%, #D0D6F7 77.31%, #D2C4FD 98.33%);
    border        : 1px solid #E5E5E5;
    padding       : 13px 20px;
    width         : 100%;
    border-radius : 10px;
    color         : var(--bodyFont-color);
    font-weight   : 500;
    font-size     : 14px;
    line-height   : 22px;
    letter-spacing: 0px;
    margin-bottom : 10px;
}

.btn.download-csv-btn span {
    border-bottom: 1px solid var(--bodyFont-color);
}

.form-check .form-check-input {
    cursor: pointer;
}

.form-check label {
    font-size     : 14px;
    letter-spacing: 0.16px;
    font-weight   : 400;
}

.upload-file,
.upload-badge-design {
    position       : relative;
    border         : 1px dashed #281463;
    padding        : 28px 10px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    gap            : 5px;
    border-radius  : 8px;
}

.upload-file:hover,
.upload-badge-design:hover {
    background-color: #f4f4f4;
}

.upload-file input.fileInput,
.upload-badge-design input.badge-design-input {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    opacity : 0;
    cursor  : pointer;
}

.upload-file .title,
.upload-badge-design .title {
    font-weight   : 600;
    font-size     : 16px;
    line-height   : 24px;
    letter-spacing: 0;
    color         : var(--bodyFont-color);
}

.upload-file .file-info,
.upload-badge-design .file-info {
    font-weight   : 400;
    font-size     : 14px;
    line-height   : 18px;
    letter-spacing: 0.16px;
    color         : #525252;
    text-align    : center;
    width         : 300px;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.upload-file .delete-btn,
.upload-badge-design .delete-btn {
    width           : 30px;
    height          : 30px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 0;
    margin          : 0;
    border-radius   : 50px;
    background-color: #595959;
    border          : 0;
    color           : #fff;
    position        : absolute;
    top             : 10px;
    right           : 10px;
    font-size       : 14px;
    line-height     : 16px;
}

.upload-file .delete-btn:active,
.upload-file .delete-btn:focus,
.upload-badge-design .delete-btn:focus,
.upload-badge-design .delete-btn:active {
    background-color: #df2323;
    color           : #fff;
}

.upload-file .delete-btn:hover,
.upload-badge-design .delete-btn:hover {
    opacity: 0.7;
}

/* Email Settings page style */

.email-setting-header {
    position     : relative;
    margin-bottom: 20px;
}

.email-setting-header .title {
    font-weight   : 500;
    font-size     : 14px;
    line-height   : 20px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
}

.email-tab-container {
    width           : 100%;
    border-radius   : 16px;
    padding         : 30px 20px;
    background-color: #fff;
    display         : flex;
    align-items     : start;
    gap             : 50px;
}

.email-tab-container .nav {
    width: 210px;
    gap  : 10px;
}

.email-tab-container .nav .nav-link {
    background-color: #EBF2FF;
    border          : 0;
    border-radius   : 10px;
    padding         : 10px 16px;
    color           : var(--bodyFont-color);
    display         : flex;
    align-items     : center;
    justify-content : flex-start;
    gap             : 10px;
    font-weight     : 500;
    font-size       : 14px;
    letter-spacing  : 0.18px;
    min-width       : 204px;
}

.email-tab-container .nav .nav-link:hover,
.email-tab-container .nav .nav-link.active {
    background: linear-gradient(90deg, #80D3F7 25.61%, #D0D6F7 77.31%, #D2C4FD 98.33%);
}

.email-tab-container .email-setting-form .form-group .btn-primary {
    padding: 10px 20px;
}

.email-tab-container .email-setting-form .form-group .form-title {
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 24px;
    letter-spacing: 0;
    margin-bottom : 16px;
}

.email-tab-container .email-setting-form .form-group .form-info {
    font-weight: 400;
    font-size  : 12px;
    line-height: 16px;
    color      : #525252;
    margin-top : 5px;
}

.email-tab-container .email-setting-form .form-group .upload-brand,
.form-modal .form-group .upload-brand {
    position       : relative;
    border         : 1px dashed #281463;
    padding        : 28px 10px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    gap            : 5px;
    border-radius  : 8px;
    width          : 400px;
}

.email-tab-container .email-setting-form .form-group .upload-brand input,
.form-modal .form-group .upload-brand input {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    opacity : 0;
    cursor  : pointer;
}

.email-tab-container .email-setting-form .form-group .upload-brand .brand-icon,
.form-modal .form-group .upload-brand .brand-icon {
    z-index   : 1;
    transition: opacity 0.3s ease;
}

.email-tab-container .email-setting-form .form-group .upload-brand .title,
.form-modal .form-group .upload-brand .title {
    font-weight   : 600;
    font-size     : 16px;
    line-height   : 24px;
    letter-spacing: 0;
    color         : var(--bodyFont-color);
}

.email-tab-container .email-setting-form .form-group .upload-brand .brand-info,
.form-modal .form-group .upload-brand .brand-info {
    font-weight   : 400;
    font-size     : 14px;
    line-height   : 18px;
    letter-spacing: 0.16px;
    color         : #525252;
    text-align    : center;
    width         : 300px;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    transition    : color 0.3s ease;
}

.email-tab-container .email-setting-form .form-group .upload-brand img.brand-preview,
.form-modal .form-group .upload-brand img.brand-preview {
    max-width : 300px;
    max-height: 150px;
    height    : auto;
    display   : block;
    object-fit: contain;
    background: #d0d0d0;
    padding   : 5px;
}

.email-tab-container .email-setting-form .form-group .upload-brand .delete-btn,
.form-modal .form-group .upload-brand .delete-btn {
    width           : 30px;
    height          : 30px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 0;
    margin          : 0;
    border-radius   : 50px;
    background-color: #df2323;
    border          : 0;
    color           : #fff;
    position        : absolute;
    top             : 10px;
    right           : 10px;
    z-index         : 2;
    font-size       : 14px;
    line-height     : 16px;
    opacity         : 0;
    visibility      : hidden;
    transition      : opacity 0.3s ease, visibility 0.3s ease;
}

.email-tab-container .email-setting-form .form-group .upload-brand .delete-btn.show,
.form-modal .form-group .upload-brand .delete-btn.show {
    opacity   : 1;
    visibility: visible;
}

.email-tab-container .email-setting-form .form-group textarea.form-control {
    height: auto;
}

.tag-nav li button.tag-btn {
    background-color: #fff;
    border          : 2px solid #DFEAFD;
    border-radius   : 6px;
    padding         : 8px 14px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 10px;
    font-weight     : 500;
    font-size       : 12px;
    line-height     : 18px;
    letter-spacing  : 0.16px;
    margin          : 5px 0px;
}

.tag-nav li button.tag-btn:hover,
.tag-nav li button.tag-btn.active {
    background-color: #DFEAFD;
}

.tag-nav li button.tag-btn i {
    font-size: 15px;
}

.ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar {
    border-top-left-radius : 10px !important;
    border-top-right-radius: 10px !important;
    background             : #F6F6F6 !important;
}

.ck.ck-editor__main>.ck-editor__editable {
    border-bottom-left-radius : 10px !important;
    border-bottom-right-radius: 10px !important;
    padding                   : 20px 30px !important;
}

/* Manage Users page style */

.manageUser-header .manageUser-title-header,
.badgeTemplate-header .badgeTemplate-title-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
}

/* Badge Editor page style */

.badge-wrapper {
    width           : 320px;
    height          : 660px;
    position        : relative;
    background-color: #fff;
}

.badge-wrapper img {
    width            : 100%;
    height           : 100%;
    object-fit       : cover;
    user-select      : none;
    -webkit-user-drag: none;
}

.badge-editor-form {
    background-color: #fff;
    border-radius   : 20px;
    box-shadow      : 0px 5px 20px 0px #0000001A;
    backdrop-filter : blur(44px);
    position        : relative;
    overflow        : hidden;
    max-width       : 500px;
    margin-left     : auto;
}

.badge-editor-form .editor-body {
    background-color: #fff;
    padding         : 16px 24px 26px 24px;
}

.badge-editor-form .editor-body .eidtor-header {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 20px;
    margin-bottom  : 20px;
    border-radius  : 10px;
    box-shadow     : 0px 5px 20px 0px #0000001A;
    border-bottom  : 1px solid #E5E5E5;
    padding        : 12px 16px;
}

.badge-editor-form .editor-body .eidtor-header span {
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 26px;
    letter-spacing: 0;
    color         : var(--bodyFont-color);
}

.badge-editor-form .editor-body .eidtor-header .btn.btn-text {
    background-color: transparent;
    border          : 0;
    border-radius   : 0;
    color           : #0F62FE;
    padding         : 0;
    border-bottom   : 1px solid #0F62FE;
    font-size       : 14px;
    letter-spacing  : 0.16px;
    line-height     : 18px;
}

.badge-editor-form .editor-body .eidtor-header .btn.btn-text:hover {
    color        : #528cf8;
    border-bottom: 1px solid transparent;
}

.badge-editor-form .btn.btn-primary {
    padding                   : 15px 20px;
    border-radius             : 0px;
    border-bottom-left-radius : 20px;
    border-bottom-right-radius: 20px;
    width                     : 100%;
}

.badge-editor-form .editor-content .upload-badge-design {
    margin-bottom: 16px;
}

.badge-editor-form .editor-content .upload-badge-design img {
    object-fit: contain;
}

.btn.add-file-btn {
    margin-bottom  : 26px;
    width          : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 15px;
    font-weight    : 400;
    font-size      : 16px;
}

.select-badge-option,
.option-adjustment {
    margin-bottom: 26px;
    position     : relative;
}

.select-badge-option .title,
.option-adjustment .title {
    padding       : 10px 0px;
    border-bottom : 1px solid #E5E5E5;
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 26px;
    letter-spacing: 0;
    margin-bottom : 20px;
}

.select-badge-option .form-check {
    display    : flex;
    align-items: center;
    gap        : 10px;
    margin     : 0;
    padding    : 0;
    cursor     : pointer;
}

.select-badge-option .form-check .form-check-input {
    width  : 16px;
    height : 16px;
    border : 1px solid #212529;
    cursor : pointer;
    margin : 0;
    padding: 0;
}

.select-badge-option .form-check .form-check-label {
    font-weight   : 400;
    font-size     : 14px;
    line-height   : 18px;
    letter-spacing: 0.16px;
    cursor        : pointer;
}

.option-adjustment .axis-row {
    display    : flex;
    align-items: center;
    gap        : 10px;
    font-weight: 400;
    font-size  : 16px;
    line-height: 26px;
}

.option-adjustment .axis-row .btn {
    background     : linear-gradient(61.25deg, #80D3F7 30.04%, #D0D6F7 74.21%);
    border         : 0;
    width          : 40px;
    height         : 40px;
    padding        : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 8px;
    font-size      : 18px;
    font-weight    : 500;
}

.option-adjustment .axis-row .form-control {
    height : 40px;
    width  : 60px;
    padding: 10px 16px;
}

.badge-item {
    position         : absolute;
    cursor           : move;
    font-size        : 16px;
    font-weight      : 400;
    top              : 30%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/* class applied to items hidden by the editor toggles; must remain hidden in print */
.badge-hidden {
    display   : none !important;
    visibility: hidden !important;
}

.badge-item.active {
    outline: 1px dashed #0d6efd;
}

#qr {
    width : 80px;
    height: 80px;
}

@media print {
    body * {
        visibility: hidden;
    }

    #badge-wrapper,
    #badge-wrapper * {
        visibility: visible;
    }

    .badge-wrapper {
        position: absolute;
        top     : 0;
        left    : 0;
    }

}

.text-item {
    cursor: text;
}

.text-item[contenteditable="true"] {
    outline   : 1px dashed #0d6efd;
    background: rgba(13, 110, 253, 0.05);
}

@media (max-width: 1350px) {
    .badge-editor-form .editor-body .eidtor-header {
        gap    : 10px;
        padding: 12px 10px;
    }

    .badge-editor-form .editor-body .eidtor-header span {
        font-size  : 14px;
        line-height: 24px;
    }

    .badge-editor-form .editor-body .eidtor-header .btn.btn-text {
        font-size  : 12px;
        line-height: 16px;
    }
}

@media (max-width: 1200px) {
    .summary-nav li {
        height: 125px;
    }

    .badge-editor-form .editor-body .eidtor-header {
        flex-direction : column;
        justify-content: center;
    }

    .badge-editor-form .editor-body .eidtor-header span {
        font-size: 15px;
    }

    .badge-editor-form .editor-body .eidtor-header .btn.btn-text {
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    .main-content .main-content-body {
        padding-left: 0;
        height      : calc(100vh - 40px);
    }

    .email-tab-container {
        flex-direction: column;
    }

    .email-tab-container .nav {
        width         : 100%;
        flex-direction: row !important;
    }

    .badge-wrapper {
        margin-bottom: 20px;
    }

    .summary-container .empty-sec {
        height: auto;
    }
}

@media (max-width: 767px) {

    .main-content .main-content-body .body-inner {
        padding: 20px 10px;
    }

    .comapny-details-card .card-body .cc-header a,
    .comapny-details-card .card-body .cc-content {
        padding: 8px 10px;
    }

    .comapny-details-card .card-body .cc-header a .cc-name-logo .company-logo-name {
        width        : 100px;
        overflow     : hidden;
        text-overflow: ellipsis;
        white-space  : nowrap;
    }

    .comapny-details-card .card-body {
        gap: 10px;
    }

    .comapny-details-card .card-body .cc-content .cc-row {
        font-size  : 12px;
        line-height: 16px;
    }

    .filter-row .filter-input-search .form-control {
        width: 100%;
    }

    .form-modal .modal-dialog .modal-content .modal-header {
        padding: 10px 20px;
    }

    .form-modal .modal-dialog .modal-content .modal-body {
        padding: 14px 10px 6px 10px;
    }

    .summary-nav li.summary-heading {
        font-size  : 16px;
        line-height: 18px;
    }

    .summary-nav {
        flex-direction: column;
    }

    .summary-nav li {
        height       : 95px;
        font-size    : 22px;
        flex         : auto;
        border-radius: 0;
        border-bottom: 1px solid rgba(229, 229, 229, 1);
    }

    .badge-editor-form .editor-body .eidtor-header {
        flex-wrap : wrap;
        gap       : 5px;
        text-align: center;
    }

    .badge-editor-form .editor-body .eidtor-header span {
        line-height: 20px;
    }

    .upload-file .file-info,
    .upload-badge-design .file-info {
        width   : 200px;
        overflow: hidden;
    }

    .form-modal .modal-dialog .modal-content .modal-header .btn-close {
        right: 10px;
    }

}

@media (max-width: 580px) {
    .email-tab-container .email-setting-form .form-group .upload-brand {
        width: 100%
    }
}

@media (max-width: 400px) {
    .badge-wrapper {
        width: 100%;
    }
}

/*== Safari Browser default zoom behaviour fix == */
@supports (-webkit-touch-callout: none) {
    @media (hover: none) and (pointer: coarse) {

        input.form-control,
        textarea,
        select,
        .bootstrap-select .dropdown-toggle {
            font-size       : 16px;
            transform       : scale(0.875);
            transform-origin: left top;
        }

    }
}

.flatpickr-wrapper,
.flatpickr-calendar.static.open {
   width: 100% !important;
}

/* EVENT ANALYTICS */

.header-top .analytics-top-btn,
.header-title-mob .analytics-top-btn {
    padding         : 8px 16px;
    font-size       : 12px;
    font-weight     : 600;
    letter-spacing  : 0.8px;
    text-transform  : uppercase;
    border-radius   : 999px;
    white-space     : nowrap;
    box-shadow      : 0 4px 14px rgba(40, 20, 99, 0.18);
}

.header-top .analytics-top-btn.active,
.header-title-mob .analytics-top-btn.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

@media (max-width: 797px) {
    .header-title-mob {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        gap            : 12px;
    }

    .header-title-mob .d-flex {
        flex: 1;
        min-width: 0;
    }

    .header-title-mob .analytics-top-btn {
        flex-shrink: 0;
    }
}

.analytics-container {
    padding-bottom: 24px;
}

.analytics-export-row {
    margin-top: 4px;
}

.analytics-export-btn {
    font-size       : 13px;
    font-weight     : 600;
    letter-spacing  : 0.4px;
    padding         : 10px 20px;
    border-radius   : 999px;
    box-shadow      : 0 4px 12px rgba(40, 20, 99, 0.15);
}

.analytics-kpi {
    border       : 2px solid #FFFFFF;
    box-shadow   : 0px 3px 10px 0px #0000001F;
    border-radius: 12px;
    overflow     : hidden;
}

.analytics-kpi-attendees {
    background: linear-gradient(252.51deg, #FFFFFF -10.7%, #FFE4B9 216.98%);
}

.analytics-kpi-countries {
    background: linear-gradient(253.93deg, #FFFFFF -16.05%, #B7C2FF 190.94%);
}

.analytics-kpi-peak {
    background: linear-gradient(288.55deg, #FFFFFF -10.86%, #9AFFD0 263.63%);
}

.analytics-kpi-company {
    background: linear-gradient(293.52deg, #FFFFFF -20%, #D8F6FF 120%, #E8E0FF 220%);
}

.analytics-kpi .card-body {
    padding: 28px 22px;
}

.analytics-kpi-label {
    font-size     : 12px;
    font-weight   : 500;
    line-height   : 20px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    color         : var(--textColor-primary);
    margin-bottom : 10px;
}

.analytics-kpi-value {
    font-weight: 600;
    font-size  : 34px;
    line-height: 1.1;
    color      : var(--bodyFont-color);
}

.analytics-kpi-value-sm {
    font-size  : 18px;
    line-height: 1.35;
    word-break : break-word;
}

.analytics-map-section {
    margin-top: 40px;
}

.analytics-panel {
    border       : 0;
    border-radius: 14px;
    box-shadow   : 0px 3px 10px 0px rgba(0, 0, 0, 0.08);
    overflow     : hidden;
}

.analytics-panel .card-body {
    padding: 24px;
}

.analytics-panel-header {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    gap            : 16px;
    margin-bottom  : 22px;
}

.analytics-panel-title {
    font-size     : 18px;
    font-weight   : 600;
    color         : var(--textColor-primary);
    margin-bottom : 6px;
    letter-spacing: 0.2px;
}

.analytics-panel-subtitle {
    font-size: 13px;
    color    : #6B7280;
}

.analytics-toggle-group {
    display      : inline-flex;
    padding      : 4px;
    border-radius: 999px;
    background   : #F4F4F4;
    flex-shrink  : 0;
}

.analytics-toggle-btn {
    border          : 0;
    background      : transparent;
    color           : var(--textColor-primary);
    font-size       : 12px;
    font-weight     : 600;
    letter-spacing  : 0.6px;
    text-transform  : uppercase;
    padding         : 10px 16px;
    border-radius   : 999px;
    transition      : 0.2s all;
}

.analytics-toggle-btn.active {
    background: var(--bg-main);
    color     : #fff;
    box-shadow: 0 4px 12px rgba(40, 20, 99, 0.18);
}

.analytics-geo-summary {
    display              : grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap                  : 12px;
    margin-bottom        : 20px;
}

.analytics-geo-donut-shell {
    height        : 100%;
    border-radius : 18px;
    padding       : 18px;
    background    : linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 244, 255, 0.92) 48%, rgba(232, 224, 255, 0.9) 100%);
    border        : 1px solid rgba(255, 255, 255, 0.85);
    box-shadow    : inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 16px 40px rgba(40, 20, 99, 0.08);
}

.analytics-geo-donut-wrap {
    position: relative;
    height  : 360px;
    min-height: 360px;
}

.analytics-geo-donut-wrap canvas {
    display: block;
    width  : 100% !important;
    height : 100% !important;
}

.analytics-geo-donut-center {
    position       : absolute;
    top            : 42%;
    left           : 50%;
    transform      : translate(-50%, -50%);
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    pointer-events : none;
    text-align     : center;
}

.analytics-geo-donut-total {
    font-size  : 28px;
    font-weight: 700;
    color      : var(--textColor-primary);
    line-height: 1.1;
}

.analytics-geo-donut-label {
    margin-top     : 4px;
    font-size      : 11px;
    font-weight    : 600;
    letter-spacing : 0.8px;
    text-transform : uppercase;
    color          : #1869A0;
}

.analytics-geo-leaderboard {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    height        : 100%;
}

.analytics-geo-row {
    display    : flex;
    align-items: center;
    gap        : 14px;
    padding    : 12px 14px;
    border-radius: 14px;
    background : rgba(250, 250, 252, 0.92);
    border     : 1px solid rgba(40, 20, 99, 0.06);
    transition : 0.2s all;
}

.analytics-geo-row:hover {
    border-color: rgba(24, 105, 160, 0.18);
    box-shadow  : 0 8px 20px rgba(40, 20, 99, 0.06);
}

.analytics-geo-rank {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 34px;
    height         : 34px;
    border-radius  : 10px;
    font-size      : 13px;
    font-weight    : 700;
    color          : #1869A0;
    background     : rgba(24, 105, 160, 0.1);
    flex-shrink    : 0;
}

.analytics-geo-rank-1 {
    color     : #8B5A00;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.28) 0%, rgba(213, 135, 8, 0.18) 100%);
}

.analytics-geo-rank-2 {
    color     : #475569;
    background: linear-gradient(145deg, rgba(203, 213, 225, 0.55) 0%, rgba(148, 163, 184, 0.28) 100%);
}

.analytics-geo-rank-3 {
    color     : #9A3412;
    background: linear-gradient(145deg, rgba(251, 146, 60, 0.28) 0%, rgba(234, 88, 12, 0.16) 100%);
}

.analytics-geo-row-body {
    flex          : 1;
    min-width     : 0;
    display       : flex;
    flex-direction: column;
    gap           : 8px;
}

.analytics-geo-row-top,
.analytics-geo-row-bottom {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 12px;
}

.analytics-geo-name {
    font-size  : 14px;
    font-weight: 600;
    color      : var(--textColor-primary);
}

.analytics-geo-pct {
    font-size  : 13px;
    font-weight: 700;
    color      : #1869A0;
    white-space: nowrap;
}

.analytics-geo-count {
    font-size  : 12px;
    font-weight: 600;
    color      : #6B7280;
    white-space: nowrap;
    min-width  : 56px;
}

.analytics-geo-row-bottom .analytics-hotspot-bar {
    flex: 1;
}

.analytics-map-shell {
    position     : relative;
    border-radius: 18px;
    padding      : 18px;
    background   : linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 244, 255, 0.92) 48%, rgba(232, 224, 255, 0.9) 100%);
    border       : 1px solid rgba(255, 255, 255, 0.85);
    box-shadow   : inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 16px 40px rgba(40, 20, 99, 0.08);
    overflow     : hidden;
}

.analytics-map-glow {
    position     : absolute;
    top          : -20%;
    right        : -10%;
    width        : 280px;
    height       : 280px;
    border-radius: 50%;
    background   : radial-gradient(circle, rgba(0, 240, 255, 0.18) 0%, rgba(0, 240, 255, 0) 72%);
    pointer-events: none;
}

.analytics-map-shell .analytics-map-wrap {
    position: relative;
    z-index : 1;
    height  : 390px;
    min-height: 390px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.45);
}

.analytics-map-shell canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.analytics-map-legend {
    position      : relative;
    z-index       : 1;
    margin-top    : 12px;
    padding-top   : 12px;
    border-top    : 1px solid rgba(40, 20, 99, 0.08);
}

.analytics-map-legend-label {
    font-size     : 11px;
    font-weight   : 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color         : #1869A0;
}

.analytics-map-wrap,
.analytics-chart-wrap {
    position: relative;
    height  : 360px;
}

.analytics-map-wrap-choropleth {
    border-radius: 14px;
    background   : #d7e3f4;
    overflow     : hidden;
}

.analytics-map-wrap-choropleth canvas {
    display: block;
    width  : 100% !important;
    height : 100% !important;
}

.analytics-chart-wrap-wide {
    height: 320px;
}

.analytics-chart-wrap-donut {
    height: 320px;
}

.analytics-chart-wrap-compact {
    height: 220px;
}

.analytics-paired-charts-row > .row {
    align-items: stretch;
}

.analytics-paired-charts-row .analytics-panel {
    height: 100%;
}

.analytics-paired-chart-body {
    display       : flex;
    flex-direction: column;
    height        : 100%;
    min-height    : 420px;
}

.analytics-paired-charts-row .analytics-chart-wrap-paired {
    flex      : 1 1 auto;
    min-height: 280px;
    height    : auto;
}

.analytics-stat-grid {
    display              : grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap                  : 12px;
}

.analytics-mini-stat {
    padding      : 16px;
    border-radius: 12px;
    background   : #fafafc;
    border       : 1px solid rgba(40, 20, 99, 0.06);
}

.analytics-mini-stat-accent {
    background: linear-gradient(145deg, rgba(0, 240, 255, 0.12) 0%, rgba(40, 20, 99, 0.08) 100%);
}

.analytics-mini-stat-label {
    font-size     : 11px;
    font-weight   : 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color         : #6B7280;
    margin-bottom : 8px;
}

.analytics-mini-stat-value {
    font-size  : 24px;
    font-weight: 600;
    color      : var(--textColor-primary);
}

.analytics-mini-stat-note {
    margin-top: 6px;
    font-size : 12px;
    color     : #1869A0;
    font-weight: 600;
}

.analytics-pair-list {
    display       : flex;
    flex-direction: column;
    gap           : 12px;
    height        : 100%;
}

.analytics-pair-list-title {
    font-size     : 12px;
    font-weight   : 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color         : var(--textColor-primary);
    margin-bottom : 4px;
}

.analytics-pair-item {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 16px;
    padding        : 14px 16px;
    border-radius  : 12px;
    background     : #fafafc;
    border         : 1px solid rgba(40, 20, 99, 0.06);
}

.analytics-pair-route {
    display    : flex;
    align-items: center;
    gap        : 10px;
    flex-wrap  : wrap;
    font-size  : 14px;
    font-weight: 600;
    color      : var(--textColor-primary);
}

.analytics-pair-route i {
    color    : #1869A0;
    font-size: 12px;
}

.analytics-pair-count {
    font-size  : 14px;
    font-weight: 700;
    color      : #1869A0;
    white-space: nowrap;
}

.analytics-hotspot-list {
    display       : flex;
    flex-direction: column;
    gap           : 14px;
    height        : 100%;
}

.analytics-hotspot-item {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
}

.analytics-hotspot-meta {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 12px;
}

.analytics-hotspot-name {
    font-size  : 14px;
    font-weight: 600;
    color      : var(--textColor-primary);
}

.analytics-hotspot-count {
    font-size  : 13px;
    font-weight: 600;
    color      : #1869A0;
}

.analytics-hotspot-bar {
    width           : 100%;
    height          : 8px;
    border-radius   : 999px;
    background      : rgba(40, 20, 99, 0.08);
    overflow        : hidden;
}

.analytics-hotspot-bar span {
    display         : block;
    height          : 100%;
    border-radius   : 999px;
    background      : linear-gradient(270deg, #00F0FF -40.62%, #1869A0 6.4%, #281463 100%);
}

.analytics-empty-inline {
    display        : flex;
    align-items    : center;
    justify-content: center;
    height         : 100%;
    min-height     : 220px;
    color          : #6B7280;
    font-size      : 14px;
    text-align     : center;
    padding        : 24px;
    background     : #FAFAFC;
    border-radius  : 12px;
}

@media (max-width: 992px) {
    .analytics-panel-header {
        flex-direction: column;
    }

    .analytics-map-shell .analytics-map-wrap,
    .analytics-map-wrap,
    .analytics-geo-donut-wrap,
    .analytics-chart-wrap,
    .analytics-chart-wrap-wide,
    .analytics-chart-wrap-donut {
        height: 300px;
    }

    .analytics-stat-grid,
    .analytics-geo-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .analytics-kpi-value {
        font-size: 28px;
    }

    .analytics-map-wrap,
    .analytics-geo-donut-wrap,
    .analytics-chart-wrap,
    .analytics-chart-wrap-wide {
        height: 260px;
    }
}

.attendee-logs-modal .modal-dialog {
    max-width: 720px;
}

.attendee-logs-modal .modal-header {
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px 12px;
}

.attendee-logs-modal-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.attendee-logs-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ebf2ff 0%, #dbeafe 100%);
    color: #1869a0;
    font-size: 22px;
    flex-shrink: 0;
}

.attendee-logs-modal .modal-title {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.attendee-logs-modal-subtitle {
    font-size: 14px;
    line-height: 1.4;
    color: #667085;
    font-weight: 500;
}

.attendee-logs-modal-body {
    padding: 8px 28px 24px;
    max-height: min(62vh, 560px);
    overflow-y: auto;
}

.attendee-logs-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    color: #667085;
    text-align: center;
}

.attendee-logs-state .bi {
    font-size: 34px;
    color: #98a2b3;
}

.attendee-journey-timeline {
    position: relative;
    padding: 4px 0 8px;
}

.attendee-journey-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    position: relative;
    padding-bottom: 18px;
}

.attendee-journey-item:not(.is-last)::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 38px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #d0d5dd 0%, #e4e7ec 100%);
}

.attendee-journey-marker {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.attendee-journey-marker-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 2px solid #fff;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
    background: #f2f4f7;
    color: #475467;
}

.attendee-journey-marker.tone-success .attendee-journey-marker-icon {
    background: #ecfdf3;
    color: #027a48;
}

.attendee-journey-marker.tone-queued .attendee-journey-marker-icon {
    background: #eff8ff;
    color: #175cd3;
}

.attendee-journey-marker.tone-info .attendee-journey-marker-icon {
    background: #ecfdff;
    color: #0e7090;
}

.attendee-journey-marker.tone-warning .attendee-journey-marker-icon {
    background: #fffaeb;
    color: #b54708;
}

.attendee-journey-marker.tone-danger .attendee-journey-marker-icon {
    background: #fef3f2;
    color: #b42318;
}

.attendee-journey-marker.tone-primary .attendee-journey-marker-icon {
    background: #f4f3ff;
    color: #5925dc;
}

.attendee-journey-card {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.attendee-journey-card:hover {
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
    transform: translateY(-1px);
}

.attendee-journey-card.tone-success {
    border-left: 4px solid #12b76a;
}

.attendee-journey-card.tone-queued {
    border-left: 4px solid #2e90fa;
}

.attendee-journey-card.tone-info {
    border-left: 4px solid #06aed4;
}

.attendee-journey-card.tone-warning {
    border-left: 4px solid #f79009;
}

.attendee-journey-card.tone-danger {
    border-left: 4px solid #f04438;
}

.attendee-journey-card.tone-primary {
    border-left: 4px solid #7a5af8;
}

.attendee-journey-card.tone-neutral {
    border-left: 4px solid #98a2b3;
}

.attendee-journey-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.attendee-journey-label {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: #101828;
}

.attendee-journey-source {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}

.attendee-journey-when {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.3;
    color: #667085;
}

.attendee-journey-when .bi {
    font-size: 14px;
    color: #98a2b3;
}

.attendee-journey-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    font-size: 12px;
    line-height: 1.45;
}

.attendee-journey-error .bi {
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .attendee-logs-modal .modal-header,
    .attendee-logs-modal-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .attendee-journey-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
    }

    .attendee-journey-marker-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .attendee-journey-item:not(.is-last)::before {
        left: 17px;
        top: 34px;
    }

    .attendee-journey-card-top {
        flex-direction: column;
        align-items: flex-start;
    }
}