:root {
    --primaryColor: #5b098d;
    --primaryColor_8: #69499e14;
    --primaryColor_16: #69499e29;
    --secondaryColor: #ffdb6d;
    --textColor: #212121;
    --textColor_2: #4d4d4d;
    --placeholderColor: #5f6972;
    --backgroundColor: #f4f6f8;
    --borderColor: #dfe3e8;
    --iconColor: #4d4d4d;
}

/* General Resets */
*,
*::before,
*::after {
    outline: 0 !important;
    box-sizing: border-box;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
    margin: 0;
    padding: 0;
}

/* Text */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

strong {
    font-weight: 700;
}

.en {
    display: inline-block;
    direction: ltr;
}

/* Lists */
ul,
ol {
    list-style: none;
}

/* Table */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Form */
input,
textarea,
select,
button {
    font: inherit;
    color: inherit;
    border-radius: var(--border-radius);
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: inherit;
}

input::placeholder,
textarea::placeholder {
    color: inherit;
}

input {
    -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}
input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    display: none;
}
input::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}
input[type="date"] {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}
input[type="time"] {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5283 6.33703L9.63832 11.227C9.06082 11.8045 8.11582 11.8045 7.53832 11.227L2.64832 6.33703" stroke="%236E7582" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-inline-end: 35px;
}
html[dir="rtl"] select {
    background-position: left 18px center;
}

/* Anchor */
a,
a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
}

[role="button"] {
    cursor: pointer;
}

/* Transition */
/* Images */
img,
svg {
    display: block;
}

.img-cover {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.img-contain {
    -o-object-fit: contain;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* Socials */
.fa-linkedin::before {
    content: "\f0e1";
}

.fa-twitter::before {
    content: "\e61b";
}

.fa-facebook::before {
    content: "\f39e";
}

html {
    font-size: 16px;
}
@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    html {
        font-size: 14px;
    }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    html {
        font-size: 15px;
    }
}
@media (min-width: 1280px) and (max-width: 1535px) {
    html {
        font-size: 16px;
    }
}
@media (min-width: 1536px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: var(--textColor);
}

body::-webkit-scrollbar {
    background-color: #f1f1f1;
    width: 4px;
    border-radius: 3px;
}
body::-webkit-scrollbar-thumb {
    background-color: var(--primaryColor);
    border-radius: 3px;
}

.overflow {
    overflow: hidden;
}

.container {
    width: 100%;
    padding: 0 30px;
}
@media (max-width: 767px) {
    .container {
        padding: 0 15px;
    }
}

.auth_form-group {
    padding: 0.75rem 0;
}
.auth_form-group .auth_form-content {
    position: relative;
}
.auth_form-group
    .auth_form-content:has(.auth_form-input:focus)
    .auth_form-icon {
    color: var(--primaryColor);
}
.auth_form-group .auth_form-icon {
    position: absolute;
    top: 0;
    height: 44px;
    inset-inline-start: 12px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--placeholderColor);
    transition: all 0.3s ease-in-out;
}
.auth_form-group .auth_form-input {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--borderColor);
    padding-inline-start: 34px;
    padding-inline-end: 12px;
    font-size: 14px;
    color: var(--textColor);
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}
.auth_form-group .auth_form-input.is-invalid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fe3b29'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23B81111' stroke='none'/%3E%3C/svg%3E");
    border-color: #fe3b29;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

html[dir="rtl"] .auth_form-group .auth_form-input.is-invalid {
    background-position: left calc(0.375em + 0.1875rem) center;
}
.auth_form-group .auth_form-input::-moz-placeholder {
    font-weight: 400;
    color: var(--placeholderColor);
}
.auth_form-group .auth_form-input::placeholder {
    font-weight: 400;
    color: var(--placeholderColor);
}
.auth_form-group .auth_form-input:focus {
    border-color: var(--primaryColor);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.form-grid .full-w {
    grid-column: 1/-1;
}
@media (max-width: 767px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
.form-grid .form-group,
.form-grid .form-radios {
    margin: 0;
}

.form-group {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.form-group.float-label .form-label {
    position: absolute;
    top: 0;
    inset-inline: 0;
    pointer-events: none;
    display: flex;
    z-index: 2;
    height: 44px;
    padding: 0 12px;
    margin: 0;
    color: var(--placeholderColor);
}
.form-group.float-label:has(input.form-control:not(:-moz-placeholder))
    .form-label,
.form-group.float-label:has(textarea.form-control:not(:-moz-placeholder))
    .form-label {
    display: none;
}
.form-group.float-label:has(input.form-control:not(:placeholder-shown))
    .form-label,
.form-group.float-label:has(textarea.form-control:not(:placeholder-shown))
    .form-label {
    display: none;
}
.form-group .group-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.form-label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0 0 8px;
    transition: all 0.3s ease-in-out;
}
.form-group:has([required]) .form-label::after {
    content: "*";
    color: #fe3b29;
}

.form-control {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--borderColor);
    padding: 0 12px;
    font-size: 16px;
    color: var(--textColor);
    font-weight: 500;
    box-shadow: none;
    outline: none;
    transition: all 0.3s ease-in-out;
}
.form-control::-moz-placeholder {
    font-weight: 400;
    color: var(--placeholderColor);
}
.form-control::placeholder {
    font-weight: 400;
    color: var(--placeholderColor);
}
.float-label .form-control::-moz-placeholder {
    visibility: hidden;
    opacity: 0;
}
.float-label .form-control::placeholder {
    visibility: hidden;
    opacity: 0;
}
.form-control:has([hidden]:checked) {
    font-weight: 400;
    color: var(--placeholderColor);
}
.form-control option {
    font-weight: 500;
    color: var(--textColor);
}
.form-control option:disabled {
    color: var(--placeholderColor);
    background-color: var(--backgroundColor);
}
.form-control:is(textarea) {
    padding: 12px;
    height: 100px;
    resize: none;
}
.form-control:focus {
    border-color: var(--primaryColor);
    box-shadow: none;
    outline: none;
}
.form-control:focus:is(select),
.form-control:focus:is([readonly]) {
    border-color: var(--borderColor);
}
.form-control:is([list]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5283 6.33703L9.63832 11.227C9.06082 11.8045 8.11582 11.8045 7.53832 11.227L2.64832 6.33703" stroke="%236E7582" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-inline-end: 35px;
}
html[dir="rtl"] .form-control:is([list]) {
    background-position: left 18px center;
}
.form-control:is([list])::-webkit-calendar-picker-indicator {
    display: none !important;
}
.form-control:disabled {
    background-color: #fff;
    border-color: var(--borderColor);
}

.form-icon {
    flex-shrink: 0;
    width: 44px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: rgba(145, 158, 171, 0.0784313725);
    border-radius: 8px;
    color: var(--iconColor);
    transition: all 0.3s ease-in-out;
}
.form-icon:focus {
    color: var(--iconColor);
}
.form-icon:hover {
    background-color: var(--primaryColor);
    color: #fff;
}

.form-error,
.form-group small,
.error-message {
    display: flex;
    align-items: center;
    padding-top: 5px;
    color: #fe3b29 !important;
    font-size: 12px;
}

.form-hint {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #5f6972;
    padding: 8px 12px 4px;
}
.form-hint svg {
    height: 16px;
    display: flex;
    align-items: center;
}
form svg {
    overflow: unset;
}
.location-content {
    display: flex;
    align-items: center;
    gap: 20px;
}
@media (max-width: 767px) {
    .location-content {
        gap: 10px;
    }
}

.color-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}
@media (max-width: 767px) {
    .color-content {
        gap: 10px;
    }
}
.color-content .color-picker {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    padding: 0;
    display: block;
    border: none;
    outline: none;
    cursor: pointer;
}
.color-content .color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    outline: none;
}
.color-content .color-picker::-webkit-color-swatch {
    border: none;
    outline: none;
}

.form-radios {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 767px) {
    .form-radios {
        align-items: start;
        justify-content: start;
        gap: 5px;
        flex-direction: column;
    }
}
.form-radios .form-radio {
    display: flex;
    align-items: center;
    justify-content: start;
    min-height: 36px;
    padding-inline-start: 10px;
}
.form-radios .form-radio label {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
}
.form-radios .form-radio .text {
    font-size: 14px;
    font-weight: 400;
    color: #303030;
    transition: all 0.3s ease-in-out;
}
.form-radios .form-radio .mark {
    background-color: transparent;
    padding: 0;
    flex-shrink: 0;
    border: 1.5px solid #737373;
    border-radius: 50%;
    width: 15px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.form-radios .form-radio .mark:after {
    content: "";
    width: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--primaryColor);
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
}
.form-radios .form-radio input {
    display: none;
}
.form-radios .form-radio input:checked ~ .text {
    color: var(--primaryColor);
}
.form-radios .form-radio input:checked ~ .mark {
    border-color: var(--primaryColor);
}
.form-radios .form-radio input:checked ~ .mark:after {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.form-checkboxs {
    display: flex;
    flex-direction: column;
}
.form-checkboxs.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
@media (max-width: 767px) {
    .form-checkboxs.grid {
        grid-template-columns: 1fr;
    }
}
.form-checkboxs .form-checkbox {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 8px 0;
    padding-inline-start: 10px;
}
.form-checkboxs .form-checkbox label {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 10px;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
}
.form-checkboxs .form-checkbox .text {
    font-size: 16px;
    font-weight: 500;
    color: #303030;
    transition: all 0.3s ease-in-out;
}
.form-checkboxs .form-checkbox .text a {
    color: var(--primaryColor);
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
}
.form-checkboxs .form-checkbox .text a:hover {
    text-decoration: none;
}
.form-checkboxs .form-checkbox .mark {
    width: 16px;
    aspect-ratio: 1;
    border-radius: 5px;
    border: 1.5px solid #919eab;
    background-color: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
    cursor: pointer;
    margin: 4px 0;
    transition: all 0.3s ease-in-out;
}
.form-checkboxs .form-checkbox .mark i {
    opacity: 0;
    visibility: hidden;
    transform: rotate(360deg) scale(0);
    transition: all 0.3s ease-in-out;
}
.form-checkboxs .form-checkbox input {
    display: none;
}
.form-checkboxs .form-checkbox input:checked ~ .mark {
    border-color: var(--primaryColor);
    background-color: var(--primaryColor);
}
.form-checkboxs .form-checkbox input:checked ~ .mark i {
    opacity: 1;
    visibility: visible;
    transform: rotate(0deg) scale(1);
}

.file-uploader {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid var(--borderColor);
    background-color: var(--backgroundColor);
    padding: 24px 12px;
    font-size: 16px;
    position: relative;
}
.file-uploader .file-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 8px;
}
.file-uploader .icon {
    width: 40px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-uploader .text {
    font-size: 16px;
    color: #333;
    line-height: 1.75;
}
.file-uploader .text u {
    color: var(--primaryColor);
}
.file-uploader .hint {
    font-size: 14px;
    line-height: 1.43;
    color: var(--iconColor);
}
.file-uploader .file-preview {
    max-width: 100%;
    width: -moz-fit-content;
    width: fit-content;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
}
.file-uploader .file-preview img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.file-uploader .file-preview .remove-preview {
    position: absolute;
    top: -12px;
    inset-inline-end: -12px;
    width: 24px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background-color: #fe3b29;
    border-radius: 50%;
}
.file-uploader input {
    display: none;
}
.file-uploader .file-upload-label {
    cursor: pointer;
    width: 100%;
}
.file-uploader .file-upload-label.uploaded .file-preview {
    visibility: visible;
    opacity: 1;
}
.file-uploader .file-upload-label.uploaded .file-placeholder {
    visibility: hidden;
    opacity: 0;
}

.form-switchers {
    display: flex;
    flex-direction: column;
}

.switcher {
    padding: 14px 0;
}
.switcher label {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
}
.switcher .slider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 25px;
    height: 16px;
    background-color: #bdbdbd;
    border-radius: 13px;
    transition: all 0.3s ease-in-out;
}
.switcher .slider:after {
    content: "";
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 3px;
    display: flex;
    aspect-ratio: 1;
    background-color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}
.switcher .text {
    font-size: 14px;
    font-weight: 400;
    color: #737373;
    transition: all 0.3s ease-in-out;
}
.switcher input {
    display: none;
}
.switcher input:checked ~ .text {
    color: var(--primaryColor);
}
.switcher input:checked ~ .slider {
    background-color: var(--primaryColor);
}
.switcher input:checked ~ .slider:after {
    transform: translateX(9px);
}

.clr-field {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 20px;
    position: relative;
}
@media (max-width: 767px) {
    .clr-field {
        gap: 10px;
    }
}
.clr-field:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 0;
    width: calc(100% - 64px);
    height: 100%;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    pointer-events: none;
}
.clr-field .form-control {
    border: unset;
    cursor: pointer;
}
.clr-field button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    padding: 0;
    display: block;
    border: none;
    outline: none;
    cursor: pointer;
}
.clr-field button::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    outline: none;
}
.clr-field button::-webkit-color-swatch {
    border: none;
    outline: none;
}

.iconed-input {
    position: relative;
    cursor: pointer;
}
.iconed-input .icon {
    position: absolute;
    top: 0;
    /* transform: translateY(-50%); */
    inset-inline-end: 0;
    z-index: 2;
    width: 44px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--iconColor);
    pointer-events: none;
}

.form-group.date-input {
    position: relative;
}
.form-group.date-input .form-label {
    position: absolute;
    inset: 10px 12px;
    bottom: unset;
    padding: 0;
    pointer-events: none;
    display: flex;
    height: 24px;
    z-index: 2;
    margin: 0;
    background-color: #fff;
}
.form-group.date-input:has(.filled) .form-label {
    display: none;
}

.repeater-fields {
    display: flex;
    gap: 24px;
    align-items: start;
}
.repeater-fields .form-group {
    margin: 0;
}
@media (max-width: 1199px) {
    .repeater-fields {
        gap: 20px 10px;
    }
}
@media (max-width: 767px) {
    .repeater-fields {
        flex-wrap: wrap;
    }
    .repeater-fields .form-group {
        width: 100%;
    }
    .repeater-fields .form-group:last-of-type {
        width: calc(100% - 54px);
    }
}

.tag-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 24px;
}
.tag-container .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 8px;
    border-radius: 8px;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 14px;
    font-weight: 600;
    color: var(--primaryColor);
    background-color: var(--primaryColor_16);
}
.tag-container .tag button {
    padding: 0;
    width: 16px;
    height: 16px;
    font-size: 13px;
    color: var(--primaryColor);
    transition: all 0.3s ease-in-out;
}
.tag-container .tag button:hover {
    color: #fe3b29;
}
@media (max-width: 767px) {
    .tag-container .tag {
        gap: 5px;
        font-size: 12px;
    }
}
.tag-container:not(:has(.tag)) {
    display: none;
}
@media (max-width: 767px) {
    .tag-container {
        gap: 5px;
    }
}
.tags-wrapper .tag-container {
    padding-top: 24px;
}

.auth_form-link {
    display: flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primaryColor);
    transition: all 0.3s ease-in-out;
}
.auth_form-link:focus {
    color: var(--primaryColor);
}
.auth_form-link:hover {
    text-decoration: underline;
}
.auth_form-link.resend_link {
    margin: 0.75rem auto 0;
}

.auth_form-group:has(.resend_link) {
    padding-bottom: 0;
}

.auth_form-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    border-radius: 8px;
    background-color: var(--primaryColor);
    font-size: 16px;
    font-weight: 700;
    margin-top: 1.75rem;
    color: #fefefe;
    transition: all 0.3s ease-in-out;
}
.auth_form-btn:focus {
    color: #fefefe;
}
.auth_form-btn .icon {
    width: 16px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth_form-btn:hover {
    background-color: var(--primaryColor_8);
    color: var(--primaryColor);
}

.dashboard_main-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 16px;
    height: 42px;
    border-radius: 8px;
    background-color: var(--primaryColor);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    color: #ffffff;
    transition: all 0.3s ease-in-out;
}
.dashboard_main-btn:focus {
    color: #ffffff;
}
.dashboard_main-btn svg {
    width: 16px;
    aspect-ratio: 1;
    flex-shrink: 0;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard_main-btn:hover {
    background-color: var(--primaryColor_8);
    color: var(--primaryColor);
}
@media (max-width: 767px) {
    .dashboard_main-header .dashboard_main-btn {
        font-size: 14px;
        padding: 0 12px;
        height: 35px;
    }
}

.form-buttons {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 24px;
    margin-top: 24px;
}
@media (max-width: 767px) {
    .form-buttons {
        gap: 8px;
    }
}
@media (max-width: 480px) {
    .form-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
.form-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 16px;
    height: 42px;
    border-radius: 8px;
    background-color: var(--primaryColor);
    font-size: 16px;
    font-weight: 700;
    border: none;
    color: #ffffff;
    transition: all 0.3s ease-in-out;
}
.form-buttons .btn:focus {
    color: #ffffff;
}
.form-buttons .btn.btn-secondary {
    background-color: transparent;
    color: var(--primaryColor);
    border: 1px solid var(--borderColor);
}
.form-buttons .btn.btn-reset {
    background-color: transparent;
    color: #333333;
    border: 1px solid #919eab;
}
.form-buttons .btn:hover {
    background-color: var(--primaryColor_8);
    border-color: var(--primaryColor_8);
    color: var(--primaryColor);
}
@media (max-width: 767px) {
    .form-buttons .btn {
        width: 100%;
    }
    .form-buttons .btn.btn-primary {
        grid-column: 1/-1;
    }
}

.dashboard_main-card {
    border: 1px solid var(--borderColor);
    border-radius: 16px;
}
.dashboard_main-card .table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
}
@media (max-width: 767px) {
    .dashboard_main-card .table-header {
        padding: 15px 15px;
    }
}
.dashboard_main-card .table-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--textColor);
    line-height: 28px;
    margin: 0;
}
.dashboard_main-card .table-title p {
    font-size: 14px;
    font-weight: 400;
    color: var(--textColor);
    line-height: 22px;
    margin: 4px 0 0;
}
.dashboard_main-card .table-bulk_actions {
    margin: 0;
}
.dashboard_main-card .table-bulk_btn {
    width: 28px;
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--iconColor);
    transition: all 0.3s ease-in-out;
}
.dashboard_main-card .table-bulk_btn:focus {
    color: var(--iconColor);
}
.dashboard_main-card .table-bulk_btn:hover {
    background-color: var(--primaryColor_8);
    color: var(--primaryColor);
}

.table_tabs-content {
    padding: 0 24px 24px;
}
@media (max-width: 767px) {
    .table_tabs-content {
        padding: 0 15px 15px;
    }
}

.table-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    background-color: rgba(145, 158, 171, 0.0784313725);
    border: 1px solid var(--borderColor);
    border-radius: 12px;
}
.table-tabs button {
    margin: 0;
    flex: 1;
    height: 38px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 16px;
    text-align: start;
    font-weight: 700;
    color: #77838d;
    transition: all 0.3s ease-in-out;
}
.table-tabs button:focus {
    color: #77838d;
}
.table-tabs button.active {
    color: var(--primaryColor);
    background-color: #ffffff;
}
@media (max-width: 1199px) {
    .table-tabs button {
        font-size: 12px;
    }
}
@media (max-width: 767px) {
    .table-tabs {
        white-space: nowrap;
        overflow-x: auto;
    }
}

.dashboard_tab-pane {
    display: none;
}
.dashboard_tab-pane.active {
    display: block;
}

.table-top_filters {
    padding: 0 24px 24px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
}
.table-top_filters .table-search_input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    padding-inline-start: 34px;
    border-radius: 8px;
    border: 1px solid var(--borderColor);
    font-size: 14px;
    font-weight: 500;
    color: var(--textColor);
    transition: all 0.3s ease-in-out;
    background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.39194 2.71304C5.39265 2.04439 6.56916 1.6875 7.7727 1.6875V2.25L7.77273 1.6875C9.38659 1.6876 10.9343 2.32875 12.0755 3.46992C13.2166 4.61108 13.8578 6.15881 13.8579 7.77266V7.7727C13.8579 8.97623 13.501 10.1527 12.8324 11.1534C12.1637 12.1542 11.2133 12.9341 10.1014 13.3947C8.98948 13.8553 7.76595 13.9758 6.58554 13.741C5.40512 13.5062 4.32085 12.9266 3.46982 12.0756C2.61879 11.2245 2.03923 10.1403 1.80443 8.95986C1.56963 7.77945 1.69014 6.55592 2.15071 5.44399C2.61128 4.33207 3.39124 3.38169 4.39194 2.71304ZM7.7727 2.8125C9.08819 2.81259 10.3498 3.33521 11.28 4.26541C12.2102 5.19561 12.7328 6.4572 12.7329 7.7727M7.77266 2.8125C6.79164 2.81251 5.83265 3.10342 5.01696 3.64844C4.20126 4.19348 3.5655 4.96815 3.19008 5.87451C2.81465 6.78087 2.71642 7.7782 2.90781 8.74038C3.0992 9.70257 3.57161 10.5864 4.26531 11.2801C4.95901 11.9738 5.84283 12.4462 6.80501 12.6376C7.7672 12.829 8.76453 12.7307 9.67088 12.3553C10.5772 11.9799 11.3519 11.3441 11.8969 10.5284C12.442 9.71274 12.7329 8.75375 12.7329 7.77273" fill="%234D4D4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4953 11.4953C11.7149 11.2756 12.0711 11.2756 12.2908 11.4953L16.1477 15.3523C16.3674 15.572 16.3674 15.9281 16.1477 16.1478C15.9281 16.3675 15.5719 16.3675 15.3523 16.1478L11.4953 12.2908C11.2756 12.0711 11.2756 11.715 11.4953 11.4953Z" fill="%234D4D4D"/></svg>');
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 18px;
}
html[dir="rtl"] .table-top_filters .table-search_input {
    background-position: right 18px center;
}
.table-top_filters .table-search_input::-moz-placeholder {
    color: var(--placeholderColor);
    font-weight: 400;
}
.table-top_filters .table-search_input::placeholder {
    color: var(--placeholderColor);
    font-weight: 400;
}
.table-top_filters .table-search_input:focus {
    border-color: var(--primaryColor);
}
@media (max-width: 767px) {
    .table-top_filters .table-search_input {
        grid-column: 1/-1;
    }
}
.table-top_filters .table-sort_select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    padding-inline-end: 34px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid var(--borderColor);
}
.table-top_filters .table-sort_select:has([hidden]:checked) {
    color: var(--placeholderColor);
    font-weight: 400;
}
.table-top_filters .table-sort_select option {
    font-weight: 500;
    color: var(--textColor);
}
.table-top_filters .table-date_input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    padding-inline-end: 34px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid var(--borderColor);
    background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5283 6.33703L9.63832 11.227C9.06082 11.8045 8.11582 11.8045 7.53832 11.227L2.64832 6.33703" stroke="%236E7582" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-inline-end: 35px;
}
html[dir="rtl"] .table-top_filters .table-date_input {
    background-position: left 18px center;
}
@media (max-width: 1199px) {
    .table-top_filters {
        gap: 12px;
    }
}
@media (max-width: 767px) {
    .table-top_filters {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        padding: 0 15px 15px;
    }
}

.table-content {
    padding: 0 24px 24px;
}
@media (max-width: 767px) {
    .table-content {
        padding: 0 15px 20px;
    }
}

.table-responsive {
    border-radius: 8px;
    overflow: hidden;
}
@media (max-width: 1199px) {
    .table-responsive {
        overflow-x: auto;
    }
    .table-responsive .table {
        min-width: 900px;
    }
}

.table {
    vertical-align: middle;
}
.table th {
    padding: 14px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
    text-align: start;
    background-color: var(--backgroundColor);
    border: none;
    box-shadow: none;
}
.table td {
    padding: 14px 8px;
    font-size: 14px;
    color: var(--textColor);
    border-bottom: 1px solid var(--borderColor);
}
.table tr:last-child td {
    border: none;
}
.table .table-checkbox {
    width: 20px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    position: relative;
}
.table .table-checkbox .mark {
    background-color: transparent;
    padding: 0;
    width: 14px;
    aspect-ratio: 1;
    border-radius: 2px;
    border: 1.5px solid #919eab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.table .table-checkbox .mark i {
    opacity: 0;
    visibility: hidden;
    transform: rotate(360deg) scale(0);
    transition: all 0.3s ease-in-out;
}
.table .table-checkbox input {
    display: none;
}
.table .table-checkbox input:checked ~ .mark {
    border-color: var(--primaryColor);
    background-color: var(--primaryColor);
}
.table .table-checkbox input:checked ~ .mark i {
    opacity: 1;
    visibility: visible;
    transform: rotate(0deg) scale(1);
}
.table .table-checkbox input:disabled ~ .mark {
    border-color: #f4f6f8;
}
.table .table-contacts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.table .table-contact {
    width: -moz-fit-content;
    width: fit-content;
    color: inherit;
    transition: all 0.3s ease-in-out;
}
.table .table-contact:focus {
    color: inherit;
}
.table .table-contact.telephone {
    font-size: 12px;
    color: #737373;
    transition: all 0.3s ease-in-out;
}
.table .table-contact.telephone:focus {
    color: #737373;
}
.table .table-contact:hover {
    color: var(--primaryColor);
}
.table .table-status {
    position: relative;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    height: 24px;
}
.table .table-vendor {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.table .table-vendor .icon {
    width: 32px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--borderColor);
    color: #6e7582;
    font-size: 16px;
    font-weight: 600;
}
.table .table-vendor .img {
    width: 32px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--borderColor);
    overflow: hidden;
}
.table .table-vendor .text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    line-height: 16px;
}
.table .table-vendor .id {
    font-size: 12px;
    line-height: 20px;
    color: #737373;
}
.table .table-item_actions {
    display: flex;
    align-items: center;
    justify-content: end;
}
.table .table-item_btn {
    width: 28px;
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--iconColor);
    transition: all 0.3s ease-in-out;
}
.table .table-item_btn:focus {
    color: var(--iconColor);
}
.table .table-item_btn:hover {
    background-color: var(--primaryColor_8);
    color: var(--primaryColor);
}
.table .table-payment {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.table .table-payment .value {
    font-size: 14px;
    font-weight: normal;
    color: #333;
    line-height: 16px;
}
.table .table-payment .card {
    font-size: 12px;
    color: #737373;
    line-height: 20px;
    padding: 0;
    border: none;
    margin: 0;
}
.table .table-code {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 8px;
}
.table .copy-btn {
    width: 20px;
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
    color: var(--iconColor);
    transition: all 0.3s ease-in-out;
}
.table .copy-btn:focus {
    color: var(--iconColor);
}
.table .copy-btn:hover {
    color: var(--primaryColor);
}
.table .table-progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.table .table-progress .bar {
    height: 4px;
    width: 100%;
    border-radius: 8px;
    background-color: var(--primaryColor_16);
    display: flex;
    justify-content: start;
}
.table .table-progress .bar:after {
    content: "";
    display: block;
    height: 4px;
    border-radius: 8px;
    background-color: var(--primaryColor);
    width: var(--width);
}
.table .assigned-users {
    display: flex;
    align-items: center;
}
.table .assigned-users .user-img {
    width: 32px;
    aspect-ratio: 1;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--primaryColor);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
}
.table .assigned-users .user-img:nth-of-type(n + 1) {
    margin-inline-start: -10px;
}
.table .switcher .text {
    color: #919eab;
}
.table .switcher input:checked ~ .text {
    color: #27ae60;
}
.table .switcher input:checked ~ .slider {
    background-color: #27ae60;
}

.action-menu {
    position: absolute;
    top: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 0;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 99;
}
.action-menu a,
.action-menu button {
    display: flex;
    align-items: center;
    text-align: start;
    gap: 8px;
    padding: 6px 15px;
    text-decoration: none;
    color: #333;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}
.action-menu a:hover,
.action-menu button:hover {
    background-color: var(--primaryColor_8);
    color: var(--primaryColor);
}
.action-menu .icon {
    display: flex;
    width: 18px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.action-menu form button {
    color: #fe3b29;
}
.action-menu form button:hover {
    background-color: rgba(254, 59, 41, 0.1);
    color: #fe3b29;
}

.table-navigations {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 24px;
    padding: 12px;
}
@media (max-width: 767px) {
    .table-navigations {
        width: 100%;
        padding: 10px 12px;
        gap: 10px;
        justify-content: space-between;
    }
}
.table-navigations .table-count_select {
    width: 100%;
    max-width: 150px;
    height: 43px;
    padding: 0 12px;
    padding-inline-end: 34px;
    font-size: 14px;
    border-radius: 8px;
    background-color: #f4f6f8;
    border: none;
}
.table-navigations .table-count_select:has([hidden]:checked) {
    color: var(--placeholderColor);
    font-weight: 400;
}
.table-navigations .table-count_select option {
    font-weight: 500;
    color: var(--textColor);
}
.table-navigations .table-paginations {
    display: flex;
    align-items: center;
    gap: 8px;
}
.table-navigations .table-pagination {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #333333;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}
.table-navigations .table-pagination span {
    font-weight: 700;
}
.table-navigations .table-arrows {
    display: flex;
    align-items: center;
}
.table-navigations .table-navigation {
    width: 40px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    border-radius: 5px;
    color: #4d4d4d;
    transition: all 0.3s ease-in-out;
}
.table-navigations .table-navigation:focus {
    color: #4d4d4d;
}
.table-navigations .table-navigation:hover {
    background-color: var(--primaryColor_8);
    color: var(--primaryColor);
}

.repeater-table {
    margin-top: 24px;
    table-layout: fixed;
}
.repeater-table .delete-row {
    width: 28px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 5px;
    margin-inline-start: auto;
    color: #fe3b29;
    transition: all 0.3s ease-in-out;
}
.repeater-table .delete-row:focus {
    color: #fe3b29;
}
.repeater-table .delete-row svg {
    pointer-events: none;
}
.repeater-table .delete-row:hover {
    background-color: #fe3b29;
    color: #fff;
}
.repeater-table:not(:has(td)) {
    display: none;
}
@media (max-width: 767px) {
    .repeater-table {
        table-layout: unset;
    }
}

.published,
.checkin,
.open,
.system {
    color: #69499e;
    background-color: rgba(105, 73, 158, 0.16);
}

.postponed,
.inactive,
.pending,
.multi {
    color: #f0aa26;
    background-color: rgba(240, 170, 38, 0.16);
}

.draft {
    color: #919eab;
    background-color: rgba(145, 158, 171, 0.16);
}

.paused,
.single {
    color: #3790ab;
    background-color: rgba(55, 144, 171, 0.16);
}

.completed {
    color: #27ae60;
    background-color: rgba(39, 174, 96, 0.16);
}

.cancelled,
.unpaid,
.expired,
.failed {
    color: #fe3b29;
    background-color: rgba(254, 59, 41, 0.16);
}

.active_status,
.confirmed,
.paid,
.successful,
.yesno {
    color: #27ae60;
    background-color: rgba(39, 174, 96, 0.16);
}

.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.accordion-item {
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    --bs-accordion-border-radius: 16px;
    padding: 10px 20px;
}
.accordion-item:first-of-type,
.accordion-item:last-of-type,
.accordion-item:not(:first-of-type) {
    border: 1px solid var(--borderColor);
}
.accordion-item .accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--textColor);
    line-height: 1.5;
    margin: 0;
    cursor: pointer;
}
.accordion-item .accordion-title .icon {
    width: 24px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--iconColor);
    transition: all 0.3s ease-in-out;
}
.accordion-item .accordion-title.active .icon {
    transform: rotate(180deg);
}
.accordion-item .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.accordion-item .body-content {
    padding: 10px 0;
}

.modalContent {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

.modalContent.active {
    display: flex;
}

.modal {
    background: #fff;
    padding: 20px;
    max-width: 750px;
    width: calc(100% - 30px);
    border-radius: 8px;
    text-align: center;
    margin: 0 auto;
    display: block;
    height: auto;
    position: relative;
    inset: unset;
}

.close-btn {
    background: #ccc;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.modal-map {
    width: 100%;
    aspect-ratio: 2/1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
}
@media (max-width: 767px) {
    .modal-map {
        aspect-ratio: unset;
        height: 250px;
    }
}
.modal-map #locationBtn {
    margin: 0;
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #e45959;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 12px;
    gap: 5px;
    height: 35px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
}
.modal-map #locationBtn i {
    font-size: 14px;
}
.modal-map #locationBtn:hover {
    background-color: var(--primaryColor);
}

.modal-buttons {
    justify-content: center;
}
@media (max-width: 767px) {
    .modal-buttons {
        grid-template-columns: 1fr 1fr;
    }
    .modal-buttons .btn.btn-primary {
        grid-column: unset;
    }
}

#deleteModal.delete-modal {
    background-color: rgba(0, 0, 0, 0.5);
}

#deleteModal .delete-modal-content {
    padding: 20px;
    max-width: 400px;
    width: calc(100% - 30px);
    border-radius: 8px;
    box-shadow: none;
}

#deleteModal .delete-modal-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--textColor);
    line-height: 1.5;
    margin: 0 0 8px;
}

#deleteModal .delete-modal-content p {
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    margin: 0;
}

#deleteModal .delete-modal-actions {
    justify-content: center;
    gap: 8px;
}

@media (max-width: 767px) {
    #deleteModal .delete-modal-actions {
        grid-template-columns: 1fr 1fr;
    }
}
#map {
    width: 100%;
    height: 100%;
}

.dashboard-body {
    overflow: hidden;
}

.dashboard-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    height: 100dvh;
    width: 100%;
}
@media (max-width: 1199px) {
    .dashboard-row {
        grid-template-columns: 200px 1fr;
    }
}
@media (max-width: 991px) {
    .dashboard-row {
        grid-template-columns: 1fr;
    }
}

.dashboard-main {
    width: 100%;
    overflow: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}

.dashboard_main-content {
    flex: 1;
    padding: 0 40px;
    overflow-y: auto;
}
.dashboard_main-content::-webkit-scrollbar {
    background-color: #fff;
    width: 0;
}
.dashboard_main-content::-webkit-scrollbar-thumb {
    background-color: var(--placeholderColor);
    border-radius: 3px;
}
@media (max-width: 767px) {
    .dashboard_main-content {
        padding: 0 15px;
    }
}

.dashboard_main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
}
.dashboard_main-header .dashboard_main-header_info {
    display: flex;
    gap: 8px;
    flex-direction: column;
}
.dashboard_main-header .dashboard_main-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--textColor);
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 767px) {
    .dashboard_main-header .dashboard_main-title {
        font-size: 20px;
    }
}
.dashboard_main-header .dashboard_main-desc {
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    margin: 0;
    display: flex;
    align-items: center;
}
@media (max-width: 767px) {
    .dashboard_main-header .dashboard_main-desc {
        font-size: 14px;
        line-height: 19px;
    }
}
.dashboard_main-header .dashboard_main-breadcrumb {
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    margin: 0;
    display: flex;
    align-items: center;
}
@media (max-width: 480px) {
    .dashboard_main-header .dashboard_main-breadcrumb {
        display: none;
    }
}
.dashboard_main-header .dashboard_main-breadcrumb li {
    display: flex;
    align-items: center;
}
.dashboard_main-header .dashboard_main-breadcrumb li::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg width="4" height="5" viewBox="0 0 4 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2.5" r="2" fill="%23919EAB"/></svg>');
    margin: 0 16px;
    width: 4px;
    aspect-ratio: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}
@media (max-width: 991px) {
    .dashboard_main-header .dashboard_main-breadcrumb li::after {
        margin: 0 8px;
    }
}
.dashboard_main-header .dashboard_main-breadcrumb li a {
    color: inherit;
    transition: all 0.3s ease-in-out;
}
.dashboard_main-header .dashboard_main-breadcrumb li a:focus {
    color: inherit;
}
.dashboard_main-header .dashboard_main-breadcrumb li a:hover {
    color: var(--primaryColor);
}
.dashboard_main-header .dashboard_main-breadcrumb li:last-child::after {
    display: none;
}
.dashboard_main-header .dashboard_main-breadcrumb li:last-child a {
    color: #919eab;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}
.dashboard_main-header .dashboard_main-breadcrumb li:last-child a:focus {
    color: #919eab;
}
.dashboard_main-header .dashboard_main-breadcrumb li:last-child a:hover {
    color: #919eab;
}
.dashboard_main-header .dashboard_main-actions .status_select-content {
    position: relative;
}
.dashboard_main-header .dashboard_main-actions .form-control {
    width: 175px;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
}
.dashboard_main-header .dashboard_main-actions .select-preview {
    border-radius: 8px;
    position: absolute;
    top: 50%;
    inset-inline-start: 12px;
    transform: translateY(-50%);
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 8px;
}
.dashboard_main-header .dashboard_main-actions .switcher .text {
    color: #919eab;
}
.dashboard_main-header .dashboard_main-actions .switcher input:checked ~ .text {
    color: #27ae60;
}
.dashboard_main-header
    .dashboard_main-actions
    .switcher
    input:checked
    ~ .slider {
    background-color: #27ae60;
}

.dashboard_main-body {
    padding: 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.overlay {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 98;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    display: none;
    transition: all 0.3s ease-in-out;
}
@media (max-width: 991px) {
    .overlay {
        display: block;
    }
}
.overlay input {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.overlay:has(input:checked) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dashboard-side {
    width: 100%;
    border-inline-end: 1px solid var(--borderColor);
    display: flex;
    flex-direction: column;
    padding: 20px 12px;
    gap: 20px;
    overflow: hidden;
}
@media (min-width: 1500px) {
    .dashboard-side {
        padding: 24px 12px;
        gap: 24px;
    }
}
@media (max-width: 767px) {
    .dashboard-side {
        gap: 12px;
    }
}

.logo-holder {
    padding: 0 12px;
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    height: 45px;
}
@media (max-width: 991px) {
    .logo {
        height: 35px;
    }
}
@media (max-width: 767px) {
    .logo {
        height: 25px;
    }
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
}
@media (min-width: 1500px) {
    .dashboard-nav {
        gap: 24px;
    }
}
.dashboard-nav::-webkit-scrollbar {
    width: 0;
}
.dashboard-nav hr {
    margin: 0;
    padding: 0;
    height: 1px;
    width: 100%;
    background-color: #919eab;
    opacity: 0.161;
}
.dashboard-nav .dashboard-nav-list {
    display: flex;
    flex-direction: column;
}
.dashboard-nav .dashboard-nav-link {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 12px;
    padding: 8px 12px;
    min-height: 44px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    transition: all 0.3s ease-in-out;
}
.dashboard-nav .dashboard-nav-link:focus {
    color: #333333;
}
.dashboard-nav .dashboard-nav-link .icon {
    width: 24px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: var(--iconColor);
    transition: all 0.3s ease-in-out;
}
.dashboard-nav .dashboard-nav-link:hover {
    color: var(--primaryColor);
}
.dashboard-nav .dashboard-nav-link:hover .icon {
    color: var(--primaryColor);
}
.dashboard-nav .dashboard-nav-link.active {
    color: var(--primaryColor);
    background-color: var(--primaryColor_8);
}
.dashboard-nav .dashboard-nav-link.active .icon {
    color: var(--primaryColor);
}

@media (max-width: 991px) {
    .dashboard-side {
        position: fixed;
        top: 0;
        inset-inline-start: -280px;
        height: 100dvh;
        background-color: #fff;
        z-index: 99;
        width: 100%;
        max-width: 280px;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    :has(.menu-trigger:checked) .dashboard-side {
        inset-inline-start: 0;
        visibility: visible;
        opacity: 1;
    }
}

.dashboard-header {
    padding: 18px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    border-bottom: 1px solid var(--borderColor);
    background-color: #fff;
}
@media (max-width: 767px) {
    .dashboard-header {
        padding: 10px 15px;
        gap: 8px;
        position: relative;
        z-index: 1;
    }
}
.dashboard-header .logo {
    display: none;
    height: auto;
    width: 100px;
}
@media (max-width: 991px) {
    .dashboard-header .logo {
        display: flex;
    }
}

.dashboard-search {
    position: relative;
    width: 100%;
    max-width: 355px;
}
.dashboard-search .dashboard-search-input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    padding-inline-start: 34px;
    border-radius: 8px;
    border: 1px solid var(--borderColor);
    font-size: 14px;
    font-weight: 500;
    color: var(--textColor);
    transition: all 0.3s ease-in-out;
}
.dashboard-search .dashboard-search-input::-moz-placeholder {
    color: var(--placeholderColor);
    font-weight: 400;
}
.dashboard-search .dashboard-search-input::placeholder {
    color: var(--placeholderColor);
    font-weight: 400;
}
.dashboard-search .dashboard-search-input:focus {
    border-color: var(--primaryColor);
}
.dashboard-search .dashboard-search-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 12px;
    width: 18px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--iconColor);
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.dashboard-search .dashboard-search-btn:hover {
    color: var(--primaryColor);
}
@media (max-width: 767px) {
    .dashboard-search {
        position: absolute;
        top: calc(100% - 8px);
        inset-inline-start: 15px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
    }
    :has(.search-trigger:checked) .dashboard-search {
        opacity: 1;
        visibility: visible;
    }
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-btn {
    width: 40px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primaryColor_8);
    border-radius: 50%;
    font-size: 18px;
    position: relative;
    overflow: hidden;
    color: var(--primaryColor);
    transition: all 0.3s ease-in-out;
}
.header-btn:focus {
    color: var(--primaryColor);
}
.header-btn:hover {
    background-color: var(--primaryColor);
    color: #fff;
}
@media (max-width: 767px) {
    .header-btn:hover {
        background-color: var(--primaryColor_8);
        color: var(--primaryColor);
    }
}
.header-btn input {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    display: none;
    z-index: 1;
}
.header-btn.menu-btn,
.header-btn.search-btn {
    display: none;
}
.header-btn.menu-btn input,
.header-btn.search-btn input {
    display: block;
}
@media (max-width: 991px) {
    .header-btn.menu-btn {
        display: flex;
    }
}
@media (max-width: 767px) {
    .header-btn.search-btn {
        display: flex;
    }
    .header-btn.notifications-btn {
        display: none;
    }
}

.user-content {
    position: relative;
}
.user-content .user-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px;
    border-radius: 20px;
    background-color: var(--primaryColor_8);
    color: var(--primaryColor);
    overflow: hidden;
    z-index: 99;
    transition: all 0.3s ease-in-out;
}
.user-content .user-btn .img {
    width: 36px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
.user-content .user-btn .icon {
    margin-inline-start: 4px;
    width: 20px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 14px;
}
.user-content .user-btn .trigger {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    margin: 0;
    display: none;
}
.user-content .user-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    border-radius: 8px;
    background-color: #fff;
    min-width: 150px;
    border: 1px solid var(--borderColor);
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}
.user-content .user-list a {
    font-size: 16px;
    font-weight: 400;
    color: var(--textColor);
    padding: 0 8px;
    height: 35px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}
.user-content .user-list a:hover {
    color: var(--primaryColor);
    background-color: var(--primaryColor_8);
}
.user-content .user-list .logout {
    color: #f00;
}
.user-content .user-list .logout:hover {
    color: #f00;
    background-color: rgba(255, 0, 0, 0.1);
}
@media (min-width: 768px) {
    .user-content:hover .user-btn {
        background-color: var(--primaryColor);
        color: #fff;
    }
    .user-content:hover .user-list {
        visibility: visible;
        opacity: 1;
    }
}
@media (max-width: 767px) {
    .user-content .user-btn .trigger {
        display: block;
    }
    .user-content:has(.trigger:checked) .user-btn {
        background-color: var(--primaryColor);
        color: #fff;
    }
    .user-content:has(.trigger:checked) .user-list {
        visibility: visible;
        opacity: 1;
    }
}

.auth-body {
    min-height: 100dvh;
    display: flex;
    align-items: start;
    justify-content: start;
    padding: 2.1875rem 20px;
}
@media (min-width: 1500px) {
    .auth-body {
        padding: 3.5625rem 0;
    }
}

.auth-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
    max-width: 600px;
    margin: auto;
    gap: 2.1875rem;
}
@media (min-width: 1500px) {
    .auth-content {
        gap: 5rem;
    }
}
@media (max-width: 767px) {
    .auth-content {
        gap: 1.75rem;
    }
}

.auth_logo {
    width: auto;
    height: 3.5625rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth_form-card {
    width: 100%;
    padding: 3.125rem;
    background-color: var(--backgroundColor);
    border-radius: 16px;
}
@media (min-width: 1500px) {
    .auth_form-card {
        padding: 5rem;
    }
}
@media (max-width: 767px) {
    .auth_form-card {
        padding: 30px 20px;
    }
}

.auth_form-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1.25rem;
}
@media (min-width: 1500px) {
    .auth_form-head {
        margin-bottom: 1.75rem;
    }
}
.auth_form-head .auth_form-title {
    color: var(--primaryColor);
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
}
.auth_form-head .auth_form-desc {
    color: #333333;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 400;
    margin: 0;
}

.overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (min-width: 1200px) {
    .overview-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}
@media (max-width: 1199px) {
    .overview-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}
@media (max-width: 991px) and (min-width: 768px) {
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}
@media (max-width: 991px) {
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 767px) {
    .overview-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .overview-cards {
        gap: 8px;
    }
}

.overview-card {
    display: flex;
    padding: 24px;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: 16px;
    background-color: #fff;
    border-radius: 16px;
    flex: 1;
    transition: all 0.3s ease-in-out;
}
.overview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1199px) {
    .overview-card {
        padding: 20px;
        gap: 12px;
    }
}
@media (max-width: 991px) {
    .overview-card {
        padding: 20px;
        gap: 12px;
    }
}
@media (max-width: 767px) {
    .overview-card {
        padding: 16px;
        gap: 8px;
        border-radius: 12px;
    }
}
@media (max-width: 480px) {
    .overview-card {
        padding: 12px;
        gap: 6px;
        border-radius: 8px;
    }
}

.overview-card-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--primaryColor);
    margin: 0;
    line-height: 33.6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (max-width: 1199px) {
    .overview-card-title {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0.3px;
    }
}
@media (max-width: 991px) {
    .overview-card-title {
        font-size: 18px;
        line-height: 25px;
        letter-spacing: 0.2px;
    }
}
@media (max-width: 767px) {
    .overview-card-title {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.1px;
    }
}
@media (max-width: 480px) {
    .overview-card-title {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0px;
    }
}

.overview-card-desc {
    font-size: 24px;
    font-weight: 700;
    color: var(--textColor);
    line-height: 33.6px;
    margin: 0;
}
@media (max-width: 1199px) {
    .overview-card-desc {
        font-size: 20px;
        line-height: 28px;
    }
}
@media (max-width: 991px) {
    .overview-card-desc {
        font-size: 18px;
        line-height: 25px;
    }
}
@media (max-width: 767px) {
    .overview-card-desc {
        font-size: 16px;
        line-height: 22px;
    }
}
@media (max-width: 480px) {
    .overview-card-desc {
        font-size: 14px;
        line-height: 20px;
    }
}

.dashboard_main-body_charts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
@media (max-width: 1199px) {
    .dashboard_main-body_charts {
        gap: 20px;
    }
}
@media (max-width: 991px) and (min-width: 768px) {
    .dashboard_main-body_charts {
        grid-template-columns: 1.5fr 1fr;
        gap: 18px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_charts {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_charts {
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_charts {
        gap: 8px;
    }
}

.dashboard_main-body_chart_performance {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    background-color: #fff;
    padding: 24px;
    border-radius: 16px;
    grid-column: 1;
}
@media (max-width: 1199px) {
    .dashboard_main-body_chart_performance {
        padding: 20px;
        border-radius: 14px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_chart_performance {
        grid-column: 1;
        padding: 20px;
        border-radius: 12px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_chart_performance {
        padding: 16px;
        border-radius: 10px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_chart_performance {
        padding: 12px;
        border-radius: 8px;
    }
}

.dashboard_main-body_chart_distribution {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    background-color: #fff;
    padding: 24px;
    border-radius: 16px;
}
@media (max-width: 1199px) {
    .dashboard_main-body_chart_distribution {
        padding: 20px;
        border-radius: 14px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_chart_distribution {
        grid-column: 1;
        padding: 20px;
        border-radius: 12px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_chart_distribution {
        padding: 16px;
        border-radius: 10px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_chart_distribution {
        padding: 12px;
        border-radius: 8px;
    }
}

.dashboard_main-body_chart_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    width: 100%;
}

.dashboard_main-body_chart_header_title {
    color: #212b36;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    flex-shrink: 0;
}
@media (max-width: 1199px) {
    .dashboard_main-body_chart_header_title {
        font-size: 16px;
        line-height: 20px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_chart_header_title {
        font-size: 16px;
        line-height: 20px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_chart_header_title {
        font-size: 14px;
        line-height: 18px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_chart_header_title {
        font-size: 13px;
        line-height: 17px;
    }
}

.chart-period-selector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.period-select {
    background: rgba(145, 158, 171, 0.08);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #212b36;
    cursor: pointer;
    min-width: 110px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23637481' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}
.period-select:focus {
    outline: none;
}
@media (max-width: 1199px) {
    .period-select {
        font-size: 13px;
        padding: 6px 10px;
        padding-right: 28px;
        min-width: 100px;
    }
}
@media (max-width: 991px) {
    .period-select {
        font-size: 13px;
        padding: 6px 10px;
        padding-right: 28px;
        min-width: 95px;
    }
}
@media (max-width: 767px) {
    .period-select {
        font-size: 12px;
        padding: 5px 8px;
        padding-right: 24px;
        min-width: 85px;
        border-radius: 6px;
    }
}
@media (max-width: 480px) {
    .period-select {
        font-size: 11px;
        padding: 4px 6px;
        padding-right: 20px;
        min-width: 80px;
        border-radius: 4px;
    }
}

.dashboard_main-body_chart_performance-chart {
    width: 100%;
    height: 350px;
}
@media (max-width: 1199px) {
    .dashboard_main-body_chart_performance-chart {
        height: 300px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_chart_performance-chart {
        height: 280px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_chart_performance-chart {
        height: 250px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_chart_performance-chart {
        height: 220px;
    }
}

.dashboard_main-body_chart_distribution-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 350px;
}
@media (max-width: 1199px) {
    .dashboard_main-body_chart_distribution-chart {
        height: 300px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_chart_distribution-chart {
        height: 280px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_chart_distribution-chart {
        height: 250px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_chart_distribution-chart {
        height: 220px;
    }
}

.dashboard_main-body_tables {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
@media (max-width: 1199px) {
    .dashboard_main-body_tables {
        gap: 20px;
    }
}
@media (max-width: 991px) and (min-width: 768px) {
    .dashboard_main-body_tables {
        grid-template-columns: 1.5fr 1fr;
        gap: 18px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_tables {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_tables {
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_tables {
        gap: 8px;
    }
}

.dashboard_main-body_table-overview {
    background-color: #fff;
    border-radius: 16px;
    padding: 24px;
}
@media (max-width: 1199px) {
    .dashboard_main-body_table-overview {
        padding: 20px;
        border-radius: 14px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_table-overview {
        padding: 20px;
        border-radius: 12px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_table-overview {
        padding: 16px;
        border-radius: 10px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_table-overview {
        padding: 12px;
        border-radius: 8px;
    }
}

.dashboard_main-body_table-activity {
    background-color: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.dashboard_main-body_table-activity .dashboard_main-body_table_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.dashboard_main-body_table-activity
    .dashboard_main-body_table_header
    .dashboard_main-body_table_header_title {
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    margin: 0;
}
.dashboard_main-body_table-activity
    .dashboard_main-body_table_header
    .activity-expand-icon {
    width: 32px;
    height: 32px;
    background-color: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.dashboard_main-body_table-activity
    .dashboard_main-body_table_header
    .activity-expand-icon:hover {
    background-color: #e5e5e5;
}
.dashboard_main-body_table-activity .activity-timeline {
    position: relative;
}
.dashboard_main-body_table-activity .activity-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background-color: #e5e5e5;
}
.dashboard_main-body_table-activity .activity-timeline .activity-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}
.dashboard_main-body_table-activity
    .activity-timeline
    .activity-item:last-child {
    margin-bottom: 0;
}
.dashboard_main-body_table-activity
    .activity-timeline
    .activity-item
    .activity-dot {
    position: absolute;
    left: 0px;
    top: 6px;
    width: 12px;
    height: 12px;
    background-color: #7b4d9e;
    border-radius: 50%;
    z-index: 1;
}
.dashboard_main-body_table-activity
    .activity-timeline
    .activity-item
    .activity-content {
    flex: 1;
    margin-left: 16px;
}
.dashboard_main-body_table-activity
    .activity-timeline
    .activity-item
    .activity-content
    .activity-main-text {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin-bottom: 4px;
    line-height: 1.4;
}
.dashboard_main-body_table-activity
    .activity-timeline
    .activity-item
    .activity-content
    .activity-sub-text {
    font-weight: 400;
    font-size: 12px;
    color: #888888;
    margin-bottom: 2px;
    line-height: 1.4;
}
.dashboard_main-body_table-activity
    .activity-timeline
    .activity-item
    .activity-content
    .activity-time {
    font-weight: 400;
    font-size: 12px;
    color: #888888;
    line-height: 1.4;
}
@media (max-width: 1199px) {
    .dashboard_main-body_table-activity {
        padding: 20px;
        border-radius: 14px;
    }
    .dashboard_main-body_table-activity .dashboard_main-body_table_header {
        margin-bottom: 20px;
    }
    .dashboard_main-body_table-activity
        .dashboard_main-body_table_header
        .dashboard_main-body_table_header_title {
        font-size: 16px;
    }
    .dashboard_main-body_table-activity .activity-timeline .activity-item {
        margin-bottom: 18px;
    }
    .dashboard_main-body_table-activity
        .activity-timeline
        .activity-item
        .activity-content
        .activity-main-text {
        font-size: 13px;
    }
    .dashboard_main-body_table-activity
        .activity-timeline
        .activity-item
        .activity-content
        .activity-sub-text,
    .dashboard_main-body_table-activity
        .activity-timeline
        .activity-item
        .activity-content
        .activity-time {
        font-size: 11px;
    }
}
@media (max-width: 991px) {
    .dashboard_main-body_table-activity {
        padding: 20px;
        border-radius: 12px;
    }
    .dashboard_main-body_table-activity .dashboard_main-body_table_header {
        margin-bottom: 18px;
    }
    .dashboard_main-body_table-activity
        .dashboard_main-body_table_header
        .dashboard_main-body_table_header_title {
        font-size: 15px;
    }
    .dashboard_main-body_table-activity .activity-timeline::before {
        left: 4px;
        top: 10px;
        bottom: 10px;
    }
    .dashboard_main-body_table-activity .activity-timeline .activity-item {
        margin-bottom: 16px;
    }
    .dashboard_main-body_table-activity
        .activity-timeline
        .activity-item
        .activity-dot {
        left: 0px;
        width: 10px;
        height: 10px;
    }
    .dashboard_main-body_table-activity
        .activity-timeline
        .activity-item
        .activity-content {
        margin-left: 14px;
    }
    .dashboard_main-body_table-activity
        .activity-timeline
        .activity-item
        .activity-content
        .activity-main-text {
        font-size: 13px;
    }
    .dashboard_main-body_table-activity
        .activity-timeline
        .activity-item
        .activity-content
        .activity-sub-text,
    .dashboard_main-body_table-activity
        .activity-timeline
        .activity-item
        .activity-content
        .activity-time {
        font-size: 11px;
    }
}
@media (max-width: 767px) {
    .dashboard_main-body_table-activity {
        padding: 16px;
        border-radius: 10px;
    }
}
@media (max-width: 480px) {
    .dashboard_main-body_table-activity {
        padding: 12px;
        border-radius: 8px;
    }
}

.dashboard_main-body_table_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    width: 100%;
}

.dashboard_main-body_table_header_title {
    color: #212b36;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    flex-shrink: 0;
}

.overview-events-content {
    width: 100%;
}

.event-item {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 12px;
}

.event-item:last-child {
    border-bottom: none;
}

.event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.event-info {
    flex: 1;
    min-width: 0;
}

.event-title {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.event-details {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    flex-shrink: 0;
}

.event-date {
    font-weight: 500;
}

.event-separator {
    width: 1px;
    height: 20px;
    background-color: #d1d5db;
    border-radius: 0.5px;
}

.event-location {
    color: #6b7280;
}

.event-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.event-progress {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.progress-bar {
    width: 80%;
    height: 4px;
    background-color: #f3f4f6;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-fill.green {
    background-color: #27ae60;
}

.progress-fill.purple {
    background-color: #69499e;
}

.progress-text {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.event-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.event-action:hover {
    transform: translateX(2px);
}

.event-action .svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.overview-event-item {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 12px;
}

.overview-event-item:last-child {
    border-bottom: none;
}

.overview-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.overview-event-info {
    flex: 1;
    min-width: 0;
}

.overview-event-title {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.overview-event-details {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    flex-shrink: 0;
}

.overview-event-date {
    font-weight: 500;
}

.overview-event-separator {
    width: 1px;
    height: 20px;
    background-color: #d1d5db;
    border-radius: 0.5px;
}

.overview-event-location {
    color: #6b7280;
}

.overview-event-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.overview-event-progress {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.overview-progress-bar {
    width: 80%;
    height: 4px;
    background-color: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.overview-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.overview-progress-fill.green {
    background-color: #27ae60;
}

.overview-progress-fill.purple {
    background-color: #69499e;
}

.overview-progress-text {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.overview-event-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.overview-event-action:hover {
    transform: translateX(2px);
}

.overview-event-action .svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

@media (max-width: 1199px) {
    .event-item,
    .overview-event-item {
        padding: 14px 0;
        gap: 10px;
    }
    .event-title,
    .overview-event-title {
        font-size: 15px;
    }
    .event-details,
    .overview-event-details {
        font-size: 13px;
    }
    .event-progress,
    .overview-event-progress {
        gap: 10px;
    }
    .progress-bar,
    .overview-progress-bar {
        width: 75%;
    }
    .progress-text,
    .overview-progress-text {
        font-size: 11px;
    }
}
@media (max-width: 991px) {
    .event-item,
    .overview-event-item {
        padding: 12px 0;
        gap: 8px;
    }
    .event-title,
    .overview-event-title {
        font-size: 14px;
    }
    .event-details,
    .overview-event-details {
        font-size: 12px;
    }
    .event-progress,
    .overview-event-progress {
        gap: 8px;
    }
    .progress-bar,
    .overview-progress-bar {
        width: 70%;
        height: 6px;
    }
    .progress-text,
    .overview-progress-text {
        font-size: 10px;
    }
}
@media (max-width: 767px) {
    .event-item,
    .overview-event-item {
        gap: 8px;
        padding: 12px 0;
    }
    .event-bottom,
    .overview-event-bottom {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .event-progress,
    .overview-event-progress {
        gap: 6px;
    }
    .progress-bar,
    .overview-progress-bar {
        width: 65%;
    }
}
@media (max-width: 480px) {
    .event-item,
    .overview-event-item {
        padding: 10px 0;
        gap: 6px;
    }
    .event-title,
    .overview-event-title {
        font-size: 13px;
    }
    .event-details,
    .overview-event-details {
        font-size: 11px;
    }
    .progress-text,
    .overview-progress-text {
        font-size: 9px;
    }
}
.details-card {
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    padding: 24px;
}
@media (max-width: 767px) {
    .details-card {
        padding: 20px 15px;
    }
}

.vendor_details-head {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 4px 8px;
    min-height: 32px;
    margin-bottom: 24px;
}
@media (max-width: 767px) {
    .vendor_details-head {
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
.vendor_details-head .vendor_details-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
}
@media (max-width: 767px) {
    .vendor_details-head .vendor_details-title {
        font-size: 18px;
        order: 1;
    }
}
.vendor_details-head .vendor_details-date {
    font-size: 12px;
    line-height: 1.3;
    color: #77838d;
}
@media (max-width: 767px) {
    .vendor_details-head .vendor_details-date {
        width: 100%;
        order: 3;
    }
}
.vendor_details-head .vendor_details-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    margin-inline-start: auto;
}
.vendor_details-head .vendor_details-status .icon {
    font-size: 13px;
    width: 16px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 767px) {
    .vendor_details-head .vendor_details-status {
        margin: 0;
        order: 2;
    }
}

.vendor_details-body {
    display: grid;
    grid-template-columns: 344px 1fr;
    gap: 24px;
}
@media (max-width: 1199px) {
    .vendor_details-body {
        grid-template-columns: 1fr 2fr;
        gap: 16px;
    }
}
@media (max-width: 991px) {
    .vendor_details-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.vendor_details-media {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.vendor_details-media .vendor_details-img {
    width: 100%;
    aspect-ratio: 344/411;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.vendor_details-media .vendor_details-colors {
    display: flex;
    align-items: center;
    gap: 24px;
}
.vendor_details-media .vendor_details-color_item {
    flex: 1;
    aspect-ratio: 68/50;
    border-radius: 8px;
    display: block;
}
@media (max-width: 1199px) {
    .vendor_details-media {
        gap: 8px;
    }
    .vendor_details-media .vendor_details-colors {
        gap: 8px;
    }
}
@media (max-width: 991px) {
    .vendor_details-media {
        width: 100%;
        max-width: 344px;
    }
}

.vendor_details-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.vendor_details-info .title {
    font-size: 14px;
    font-weight: 400;
    color: #77838d;
    line-height: 20px;
}
.vendor_details-info .value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 20px;
}
.vendor_details-info .value a {
    color: inherit;
    transition: all 0.3s ease-in-out;
}
.vendor_details-info .value a:focus {
    color: inherit;
}
.vendor_details-info .value a:hover {
    color: var(--primaryColor);
}
.vendor_details-info .copy-btn {
    margin-inline-start: auto;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #4d4d4d;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.vendor_details-info .copy-btn:hover {
    color: var(--primaryColor);
}
.vendor_details-info .vendor_details-list {
    display: flex;
    flex-direction: column;
    width: -moz-fit-content;
    width: fit-content;
    gap: 8px;
}
.vendor_details-info .vendor_details-list li {
    display: flex;
    align-items: start;
    width: 100%;
    gap: 8px;
    min-height: 24px;
}
.vendor_details-info .vendor_details-list li .title {
    width: 60px;
}
html[dir="rtl"] .vendor_details-info .vendor_details-list li .title {
    width: 120px;
}
.vendor_details-info .vendor_details-desc {
    color: #77838d;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}
.vendor_details-info .vendor_details-address {
    padding: 24px 0 0;
    border-top: 1px solid rgba(145, 158, 171, 0.1607843137);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 24px;
}
.vendor_details-info .address-text {
    display: flex;
    align-items: start;
    gap: 8px;
}
.vendor_details-info .address-map {
    flex: 1;
    width: 100%;
    min-height: 200px;
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 991px) {
    .vendor_details-info .address-map {
        min-height: 250px;
    }
}
@media (max-width: 1199px) {
    .vendor_details-info {
        gap: 20px;
    }
    .vendor_details-info .vendor_details-address {
        padding: 20px 0 0;
        gap: 20px;
    }
}

.event_details-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.event_details-card_img {
    width: 100%;
    aspect-ratio: 1080/200;
    display: flex;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
@media (max-width: 767px) {
    .event_details-card_img {
        aspect-ratio: 1080/250;
    }
}

.event_details-card_body {
    border: 1px solid var(--borderColor);
    border-top: none;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}
@media (max-width: 1199px) {
    .event_details-card_body {
        padding: 20px 15px;
        gap: 20px;
    }
}
.event_details-card_body .event_details-card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    --gap: 24px;
    gap: var(--gap);
}
@media (max-width: 1199px) {
    .event_details-card_body .event_details-card_head {
        flex-direction: column;
        justify-content: start;
        align-items: start;
        --gap: 8px;
    }
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_head_info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
}
@media (max-width: 991px) {
    .event_details-card_body
        .event_details-card_head
        .event_details-card_head_info {
        flex-direction: column;
        align-items: start;
    }
}
.event_details-card_body .event_details-card_head .event_details-card_title {
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
    margin: 0;
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_title
    ~ .event_details-card_desc::before {
    content: "";
    display: block;
    width: 1px;
    height: 27px;
    background-color: rgba(145, 158, 171, 0.1607843137);
    margin: 0 8px;
}
@media (max-width: 991px) {
    .event_details-card_body
        .event_details-card_head
        .event_details-card_title
        ~ .event_details-card_desc::before {
        display: none;
    }
}
@media (max-width: 991px) {
    .event_details-card_body
        .event_details-card_head
        .event_details-card_title {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
    }
}
.event_details-card_body .event_details-card_head .event_details-card_desc {
    color: #333333;
    font-size: 20px;
    font-weight: 400;
    line-height: 27px;
    display: flex;
    align-items: center;
    margin: 0;
}
@media (max-width: 991px) {
    .event_details-card_body .event_details-card_head .event_details-card_desc {
        font-size: 16px;
        line-height: 1.5;
    }
}
.event_details-card_body .event_details-card_head .event_details-card_tags {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_tags
    span {
    color: #666666;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin: 0;
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_tags
    span
    ~ span::before {
    content: "";
    display: block;
    width: 1px;
    height: 18px;
    background-color: rgba(145, 158, 171, 0.1607843137);
    margin: 0 4px;
}
@media (max-width: 991px) {
    .event_details-card_body
        .event_details-card_head
        .event_details-card_tags
        span {
        font-size: 12px;
    }
}
@media (max-width: 991px) {
    .event_details-card_body .event_details-card_head .event_details-card_tags {
        width: auto;
    }
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_head_data {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--gap);
}
@media (max-width: 991px) {
    .event_details-card_body
        .event_details-card_head
        .event_details-card_head_data {
        width: 100%;
        justify-content: space-between;
    }
}
.event_details-card_body .event_details-card_head .event_details-card_id {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_id
    .title {
    font-size: 14px;
    color: #77838d;
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_id
    .value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_id
    .copy-btn {
    margin-inline-start: 16px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #4d4d4d;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.event_details-card_body
    .event_details-card_head
    .event_details-card_id
    .copy-btn:hover {
    color: var(--primaryColor);
}
.event_details-card_body .event_details-card_head .event_details-card_status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--primaryColor_16);
    color: var(--primaryColor);
}
.event_details-card_body .event_details-desc {
    width: 100%;
    max-width: 600px;
    font-size: 14px;
    color: #4d4d4d;
    line-height: 20px;
    margin: 0;
}
.event_details-card_body .event_details-address {
    padding: 24px 0 0;
    border-top: 1px solid rgba(145, 158, 171, 0.1607843137);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 24px;
}
@media (max-width: 991px) {
    .event_details-card_body .event_details-address {
        padding: 16px 0 0;
        gap: 16px;
    }
}
.event_details-card_body .event_details-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: -moz-fit-content;
    width: fit-content;
    gap: 24px;
}
@media (max-width: 991px) {
    .event_details-card_body .event_details-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}
.event_details-card_body .event_details-list li {
    display: flex;
    align-items: start;
    width: 100%;
    gap: 8px;
    min-height: 24px;
    width: -moz-fit-content;
    width: fit-content;
}
.event_details-card_body .event_details-list li .title {
    font-size: 14px;
    font-weight: 400;
    color: #77838d;
    line-height: 20px;
}
.event_details-card_body .event_details-list li .value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 20px;
}
.event_details-card_body .event_details-list li .value a {
    color: inherit;
    transition: all 0.3s ease-in-out;
}
.event_details-card_body .event_details-list li .value a:focus {
    color: inherit;
}
.event_details-card_body .event_details-list li .value a:hover {
    color: var(--primaryColor);
}
.event_details-card_body .event_details-list .full-w {
    grid-column: 1/-1;
}
.event_details-card_body .address-map {
    display: flex;
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 991px) {
    .event_details-card_body .address-map {
        min-height: 250px;
    }
}
.event_details-card_body .event_details-progress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
}
@media (max-width: 1199px) {
    .event_details-card_body .event_details-progress {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.event_details-card_body .event_details-item {
    border: 1px solid var(--borderColor);
    padding: 20px;
    border-radius: 16px;
}
.event_details-card_body .event_details-item .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.event_details-card_body .event_details-item .title {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}
.event_details-card_body .event_details-item .value {
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
}
.event_details-card_body .event_details-item .body {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
@media (max-width: 991px) {
    .event_details-card_body .event_details-item .body {
        flex-direction: column;
        align-items: start;
    }
}
.event_details-card_body .event_details-item .progress {
    width: 200px;
    background-color: var(--primaryColor_16);
    height: 4px;
    border-radius: 10px;
    display: flex;
}
@media (max-width: 991px) {
    .event_details-card_body .event_details-item .progress {
        width: 100%;
    }
}
.event_details-card_body .event_details-item .progress::after {
    content: "";
    width: var(--width);
    height: 100%;
    background-color: var(--primaryColor);
    border-radius: 10px;
}
.event_details-card_body .event_details-item .label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #333;
}
.event_details-card_body .event_details-switchers {
    display: flex;
    flex-direction: column;
}

.ticket_details-card_body {
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}
@media (max-width: 1199px) {
    .ticket_details-card_body {
        padding: 20px 15px;
        gap: 20px;
    }
}
.ticket_details-card_body .ticket_details-card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    --gap: 24px;
    gap: var(--gap);
}
@media (max-width: 1199px) {
    .ticket_details-card_body .ticket_details-card_head {
        flex-direction: column;
        justify-content: start;
        align-items: start;
        --gap: 8px;
    }
}
.ticket_details-card_body
    .ticket_details-card_head
    .ticket_details-card_head_info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
}
@media (max-width: 991px) {
    .ticket_details-card_body
        .ticket_details-card_head
        .ticket_details-card_head_info {
        flex-direction: column;
        align-items: start;
    }
}
.ticket_details-card_body .ticket_details-card_head .ticket_details-card_title {
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
    margin: 0;
}
@media (max-width: 991px) {
    .ticket_details-card_body
        .ticket_details-card_head
        .ticket_details-card_title {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
    }
}
.ticket_details-card_body .ticket_details-card_head .ticket_details-card_price {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    line-height: 27px;
    display: flex;
    align-items: center;
    margin: 0;
}
@media (max-width: 991px) {
    .ticket_details-card_body
        .ticket_details-card_head
        .ticket_details-card_price {
        font-size: 20px;
        line-height: 1.5;
    }
}
.ticket_details-card_body
    .ticket_details-card_head
    .ticket_details-card_category {
    width: 100%;
    color: #666666;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
}
@media (max-width: 991px) {
    .ticket_details-card_body
        .ticket_details-card_head
        .ticket_details-card_category {
        font-size: 12px;
    }
}
.ticket_details-card_body
    .ticket_details-card_head
    .ticket_details-card_head_data {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--gap);
}
@media (max-width: 991px) {
    .ticket_details-card_body
        .ticket_details-card_head
        .ticket_details-card_head_data {
        width: 100%;
        justify-content: space-between;
    }
}
.ticket_details-card_body .ticket_details-card_head .ticket_details-card_id {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.ticket_details-card_body
    .ticket_details-card_head
    .ticket_details-card_id
    .title {
    font-size: 14px;
    color: #77838d;
}
.ticket_details-card_body
    .ticket_details-card_head
    .ticket_details-card_id
    .value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}
.ticket_details-card_body
    .ticket_details-card_head
    .ticket_details-card_id
    .copy-btn {
    margin-inline-start: 16px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #4d4d4d;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.ticket_details-card_body
    .ticket_details-card_head
    .ticket_details-card_id
    .copy-btn:hover {
    color: var(--primaryColor);
}
.ticket_details-card_body
    .ticket_details-card_head
    .ticket_details-card_status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
}
.ticket_details-card_body .ticket_details-desc {
    width: 100%;
    max-width: 600px;
    font-size: 14px;
    color: #4d4d4d;
    line-height: 20px;
    margin: 0;
}
.ticket_details-card_body .ticket_details-features {
    padding: 24px 0 0;
    border-top: 1px solid rgba(145, 158, 171, 0.1607843137);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 991px) {
    .ticket_details-card_body .ticket_details-features {
        gap: 16px;
    }
}
.ticket_details-card_body .ticket_details-features_title {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
    margin: 0;
}
.ticket_details-card_body .ticket_details-features_list {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
@media (max-width: 767px) {
    .ticket_details-card_body .ticket_details-features_list {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 0;
    }
}
.ticket_details-card_body .ticket_details-features_list li {
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 9px 10px;
    font-size: 14px;
}
.ticket_details-card_body .ticket_details-features_list li::before {
    font-family: var(--fa-family-classic);
    font-weight: 900;
    content: "\f00c";
    width: 16px;
    aspect-ratio: 1;
    border-radius: 2px;
    background-color: var(--primaryColor);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
    cursor: pointer;
    margin: 4px 0;
    transition: all 0.3s ease-in-out;
}

.booking_details-card_body {
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}
@media (max-width: 1199px) {
    .booking_details-card_body {
        padding: 20px 15px;
        gap: 20px;
    }
}
.booking_details-card_body .booking_details-card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
@media (max-width: 1199px) {
    .booking_details-card_body .booking_details-card_head {
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_head_info {
    display: flex;
    flex-direction: column;
    gap: 8px 0;
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_title {
    color: #333333;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_price {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    line-height: 19px;
    margin: 0;
}
@media (max-width: 991px) {
    .booking_details-card_body
        .booking_details-card_head
        .booking_details-card_price {
        font-size: 20px;
    }
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_head_data {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 24px;
}
@media (max-width: 991px) {
    .booking_details-card_body
        .booking_details-card_head
        .booking_details-card_head_data {
        width: 100%;
        flex-direction: column;
        gap: 8px;
        align-items: start;
    }
}
.booking_details-card_body .booking_details-card_head .booking_details-card_id {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_id
    .title {
    font-size: 14px;
    color: #77838d;
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_id
    .value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_id
    .copy-btn {
    margin-inline-start: 16px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #4d4d4d;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_id
    .copy-btn:hover {
    color: var(--primaryColor);
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_statuses {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 24px;
}
@media (max-width: 767px) {
    .booking_details-card_body
        .booking_details-card_head
        .booking_details-card_statuses {
        gap: 8px;
    }
}
.booking_details-card_body
    .booking_details-card_head
    .booking_details-card_status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
}
.booking_details-card_body .booking_details-card_content {
    padding: 24px 0 0;
    border-top: 1px solid rgba(145, 158, 171, 0.1607843137);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 24px;
}
@media (max-width: 991px) {
    .booking_details-card_body .booking_details-card_content {
        grid-template-columns: 1fr;
    }
}
.booking_details-card_body .booking_event-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.booking_details-card_body .booking_event-name {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    margin: 0;
}
.booking_details-card_body .booking_event-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.booking_details-card_body .booking_event-features li {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}
.booking_details-card_body .booking_event-features li span {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 110px;
}
.booking_details-card_body .booking_event-features li span:nth-of-type(2) {
    width: auto;
}
.booking_details-card_body
    .booking_event-features
    li
    span:nth-of-type(2)::before {
    content: "";
    width: 1px;
    height: 14px;
    border-radius: 50%;
    background-color: #919eab;
    margin: 0 8px;
}
.booking_details-card_body .booking_event-features li .icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.booking_details-card_body .booking_details-title {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 24px;
}
.booking_details-card_body .booking_atendee-details-user {
    display: flex;
    align-items: center;
    gap: 4px;
}
.booking_details-card_body .booking_atendee-details-user .user-img {
    width: 36px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--borderColor);
    overflow: hidden;
}
.booking_details-card_body .booking_atendee-details-user .user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.booking_details-card_body .booking_atendee-details-user .user-info strong {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    color: #333333;
}
.booking_details-card_body .booking_atendee-details-user .user-info span {
    font-size: 12px;
    font-weight: 500;
    color: #737373;
}
.booking_details-card_body .booking_atendee-details-contacts {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px 24px;
    flex-wrap: wrap;
    padding: 12px 0 0;
}
.booking_details-card_body .booking_atendee-details-contacts a,
.booking_details-card_body .booking_atendee-details-contacts span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    transition: all 0.3s ease-in-out;
}
.booking_details-card_body .booking_atendee-details-contacts a .icon,
.booking_details-card_body .booking_atendee-details-contacts span .icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.booking_details-card_body .booking_atendee-details-contacts a:hover {
    color: var(--primaryColor);
}
.booking_details-card_body .booking_tickets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.booking_details-card_body .booking_tickets-list li {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.booking_details-card_body .booking_tickets-list li div {
    display: flex;
    align-items: center;
    gap: 4px;
}
.booking_details-card_body .booking_tickets-list li span {
    font-size: 14px;
    font-weight: 400;
    color: #77838d;
}
.booking_details-card_body .booking_tickets-list li strong {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}
.booking_details-card_body .booking_payment-details {
    padding: 24px;
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 1199px) {
    .booking_details-card_body .booking_payment-details {
        padding: 20px;
    }
}
.booking_details-card_body .booking_payment-details-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 24px;
}
.booking_details-card_body
    .booking_payment-details-head
    .booking_details-title {
    margin-bottom: 0;
}
.booking_details-card_body .download-invoice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    color: var(--primaryColor);
    transition: all 0.3s ease-in-out;
}
.booking_details-card_body .download-invoice:focus {
    color: var(--primaryColor);
}
.booking_details-card_body .download-invoice .icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.booking_details-card_body .download-invoice:hover {
    color: var(--primaryColor);
    text-decoration: none;
}
.booking_details-card_body .booking_payment-details-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.booking_details-card_body .booking_payment-details-list div {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: space-between;
}
.booking_details-card_body .booking_payment-details-list div span {
    font-size: 14px;
    font-weight: 400;
    color: #77838d;
}
.booking_details-card_body .booking_payment-details-list div strong {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}
.booking_details-card_body .booking_payment-details-list hr {
    margin: 0;
    background-color: rgba(145, 158, 171, 0.1607843137);
    width: 100%;
    height: 1px;
}

.transaction_details-card_body {
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}
@media (max-width: 1199px) {
    .transaction_details-card_body {
        padding: 20px 15px;
        gap: 20px;
    }
}
.transaction_details-card_body .transaction_details-card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
@media (max-width: 1199px) {
    .transaction_details-card_body .transaction_details-card_head {
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_head_info {
    display: flex;
    flex-direction: column;
    gap: 8px 0;
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_title {
    color: #333333;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_price {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    line-height: 19px;
    margin: 0;
}
@media (max-width: 991px) {
    .transaction_details-card_body
        .transaction_details-card_head
        .transaction_details-card_price {
        font-size: 20px;
    }
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_head_data {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 24px;
}
@media (max-width: 991px) {
    .transaction_details-card_body
        .transaction_details-card_head
        .transaction_details-card_head_data {
        width: 100%;
        gap: 8px;
        justify-content: space-between;
    }
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_id {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_id
    .title {
    font-size: 14px;
    color: #77838d;
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_id
    .value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_id
    .copy-btn {
    margin-inline-start: 16px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #4d4d4d;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_id
    .copy-btn:hover {
    color: var(--primaryColor);
}
.transaction_details-card_body
    .transaction_details-card_head
    .transaction_details-card_status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
}
.transaction_details-card_body .transaction_details-card_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 991px) {
    .transaction_details-card_body .transaction_details-card_content {
        grid-template-columns: 1fr;
    }
}
.transaction_details-card_body .transaction_details-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 24px;
}
.transaction_details-card_body
    .transaction_details-head
    .transaction_details-title {
    margin-bottom: 0;
}
.transaction_details-card_body .transaction_details-title {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 24px;
}
.transaction_details-card_body .transaction_details-card {
    padding: 24px;
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 1199px) {
    .transaction_details-card_body .transaction_details-card {
        padding: 20px;
    }
}
.transaction_details-card_body .transaction_booking-details {
    padding-bottom: 24px;
}
.transaction_details-card_body .transaction_details-booking_id {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.transaction_details-card_body .transaction_details-booking_id .title {
    font-size: 14px;
    color: #77838d;
}
.transaction_details-card_body .transaction_details-booking_id .value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}
.transaction_details-card_body .transaction_details-booking_id .copy-btn {
    margin-inline-start: 16px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #4d4d4d;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.transaction_details-card_body .transaction_details-booking_id .copy-btn:hover {
    color: var(--primaryColor);
}
.transaction_details-card_body .transaction_event-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.transaction_details-card_body .transaction_event-name {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    margin: 0;
}
.transaction_details-card_body .transaction_event-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.transaction_details-card_body .transaction_event-features li {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}
@media (max-width: 767px) {
    .transaction_details-card_body .transaction_event-features li {
        flex-direction: column;
        align-items: start;
    }
}
.transaction_details-card_body .transaction_event-features li span {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 110px;
}
.transaction_details-card_body
    .transaction_event-features
    li
    span:nth-of-type(2) {
    width: auto;
}
.transaction_details-card_body
    .transaction_event-features
    li
    span:nth-of-type(2)::before {
    content: "";
    width: 1px;
    height: 14px;
    border-radius: 50%;
    background-color: #919eab;
    margin: 0 8px;
}
@media (max-width: 767px) {
    .transaction_details-card_body
        .transaction_event-features
        li
        span:nth-of-type(2)::before {
        display: none;
    }
}
@media (max-width: 767px) {
    .transaction_details-card_body .transaction_event-features li span {
        width: auto;
    }
}
.transaction_details-card_body .transaction_event-features li .icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.transaction_details-card_body .transaction_atendee-details {
    padding: 24px 0 0;
    border-top: 1px solid var(--borderColor);
}
.transaction_details-card_body .transaction_atendee-details-user {
    display: flex;
    align-items: center;
    gap: 4px;
}
.transaction_details-card_body .transaction_atendee-details-user .user-img {
    width: 36px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--borderColor);
    overflow: hidden;
}
.transaction_details-card_body .transaction_atendee-details-user .user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.transaction_details-card_body
    .transaction_atendee-details-user
    .user-info
    strong {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    color: #333333;
}
.transaction_details-card_body
    .transaction_atendee-details-user
    .user-info
    span {
    font-size: 12px;
    font-weight: 500;
    color: #737373;
}
.transaction_details-card_body .transaction_atendee-details-contacts {
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: 8px 24px;
    flex-wrap: wrap;
    padding: 12px 0 0;
}
.transaction_details-card_body .transaction_atendee-details-contacts a,
.transaction_details-card_body .transaction_atendee-details-contacts span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    transition: all 0.3s ease-in-out;
}
.transaction_details-card_body .transaction_atendee-details-contacts a .icon,
.transaction_details-card_body
    .transaction_atendee-details-contacts
    span
    .icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.transaction_details-card_body .transaction_atendee-details-contacts a:hover {
    color: var(--primaryColor);
}
.transaction_details-card_body .transaction_payment-details {
    padding: 24px;
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 1199px) {
    .transaction_details-card_body .transaction_payment-details {
        padding: 20px;
    }
}
.transaction_details-card_body .download-invoice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    color: var(--primaryColor);
    transition: all 0.3s ease-in-out;
}
.transaction_details-card_body .download-invoice:focus {
    color: var(--primaryColor);
}
.transaction_details-card_body .download-invoice .icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.transaction_details-card_body .download-invoice:hover {
    color: var(--primaryColor);
    text-decoration: none;
}
.transaction_details-card_body .transaction_payment-details-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.transaction_details-card_body .transaction_payment-details-list div {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: space-between;
}
.transaction_details-card_body .transaction_payment-details-list div span {
    font-size: 14px;
    font-weight: 400;
    color: #77838d;
}
.transaction_details-card_body .transaction_payment-details-list div strong {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}
.transaction_details-card_body .transaction_payment-details-list hr {
    margin: 0;
    background-color: rgba(145, 158, 171, 0.1607843137);
    width: 100%;
    height: 1px;
}

.question_accordion-list {
    display: grid;
    align-items: start;
    grid-template-columns: 60fr 40fr;
}
@media (max-width: 1199px) {
    .question_accordion-list {
        grid-template-columns: 1fr;
    }
}

.questions-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.questions-list .question-item {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--borderColor);
}
.questions-list .question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}
.questions-list .question span {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
}
.questions-list .remove-q {
    width: 24px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.questions-list .remove-q:hover {
    color: var(--primaryColor);
}
.questions-list .form-radios,
.questions-list .form-checkboxs {
    flex-direction: column;
    align-items: start;
    gap: 0 24px;
    margin: 0;
}
.questions-list .yes_no .form-radios {
    flex-direction: row;
    align-items: center;
}

.dashboard_tab-content {
    border: 1px solid var(--borderColor);
    border-radius: 16px;
    padding: 24px;
}
.dashboard_tab-content .dashboard_tab-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 28px;
    margin: 0 0 24px;
}

.integrations-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.integrations-list .integration-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.integrations-list .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}
.integrations-list .link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 157px;
    padding: 0 16px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid var(--primaryColor);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--primaryColor);
    transition: all 0.3s ease-in-out;
}
.integrations-list .link:focus {
    color: var(--primaryColor);
}
.integrations-list .link:hover {
    background-color: var(--primaryColor);
    color: #fff;
}

.form-control.is-invalid,
.clr-field:has(.form-control.is-invalid):after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fe3b29'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23B81111' stroke='none'/%3E%3C/svg%3E");
    border-color: #fe3b29;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
textarea.form-control.is-invalid {
    background-position: right calc(0.375em + 0.1875rem) top
        calc(0.375em + 0.1875rem);
}

.file-uploader:has(.is-invalid),
textarea.form-control.is-invalid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fe3b29'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23B81111' stroke='none'/%3E%3C/svg%3E");
    border-color: #fe3b29;
    background-position: right calc(0.375em + 0.1875rem) top
        calc(0.375em + 0.1875rem);
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

html[dir="rtl"] .form-control.is-invalid,
html[dir="rtl"] .clr-field:has(.form-control.is-invalid):after {
    background-position: left calc(0.375em + 0.1875rem) center;
}
html[dir="rtl"] .file-uploader:has(.is-invalid),
html[dir="rtl"] textarea.form-control.is-invalid {
    background-position: left calc(0.375em + 0.1875rem) top
        calc(0.375em + 0.1875rem);
}

#permissions:has(.just-validate-error-label) .form-grid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fe3b29'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23B81111' stroke='none'/%3E%3C/svg%3E");
    border: 1px solid #fe3b29;
    padding: 12px;
    border-radius: 8px;
    background-position: right calc(0.375em + 0.1875rem) top
        calc(0.375em + 0.1875rem);
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

html[dir="rtl"] #permissions:has(.just-validate-error-label) .form-grid {
    background-position: left calc(0.375em + 0.1875rem) top
        calc(0.375em + 0.1875rem);
}