: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);
}

.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;
    width     : 100%;
    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;
    height : 100%;
}

.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 .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;
}

.login-logo-section .ticketing-logo {
    width    : 100%;
    max-width: 150px;
}

.login-logo-section .ticketing-solution {
    width    : 100%;
    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 .ticketing-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: absolute;
    top     : 0;
    right   : 0;
    width   : 80px;
    height  : 100%;
}

.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: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;
    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;
        }

    }
}