@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
html,
body {
    margin: 0px;
    height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
    outline: 2px solid #4a90e2 !important;
    outline: -webkit-focus-ring-color auto 5px !important;
}
a {
    text-decoration: none;
}
.dashboard-builder {
    display: flex;
    min-height: 100vh;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    background-color: var(--variables-misc-body-bg);
}

.dashboard-builder .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--primitives-padding-padding-6);
    position: relative;
    flex: 1;
    align-self: stretch;
    flex-grow: 1;
}

.dashboard-builder .frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 34px;
    align-self: stretch;
    width: 100%;
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.dashboard-builder .div {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .text-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: -1.00px;
    font-family: var(--basic-typography-h1-font-family);
    font-weight: var(--basic-typography-h1-font-weight);
    color: var(--variables-theme-text-primary);
    font-size: var(--basic-typography-h1-font-size);
    letter-spacing: var(--basic-typography-h1-letter-spacing);
    line-height: var(--basic-typography-h1-line-height);
    white-space: nowrap;
    font-style: var(--basic-typography-h1-font-style);
}

.dashboard-builder .actios {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--variables-gap-gap-4);
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .default-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--variables-color-palette-primary-main);
    border-radius: var(--variables-border-radius-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--light-elevation-primary-primary-shadow-sm);
}

.dashboard-builder .btn-primary-btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 26px;
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .masked-icon {
    position: relative;
    width: 14px;
    height: 22px;
}

.dashboard-builder .user-search {
    position: absolute;
    top: 1px;
    left: -3px;
    width: 20px;
    height: 20px;
}

.dashboard-builder .button {
    color: var(--variables-misc-bg-white);
    font-size: var(--components-typography-btn-large-font-size);
    line-height: var(--components-typography-btn-large-line-height);
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: var(--components-typography-btn-large-font-family);
    font-weight: var(--components-typography-btn-large-font-weight);
    letter-spacing: var(--components-typography-btn-large-letter-spacing);
    white-space: nowrap;
    font-style: var(--components-typography-btn-large-font-style);
}

.dashboard-builder .frame-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    width: 100%;
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--variables-gap-gap-6);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.dashboard-builder .header {
    display: flex;
    align-items: center;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.dashboard-builder .heading-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--variables-gap-gap-1);
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.dashboard-builder .text-wrapper-2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin-top: -1.00px;
    font-family: var(--basic-typography-h4-font-family);
    font-weight: var(--basic-typography-h4-font-weight);
    color: var(--variables-theme-text-primary);
    font-size: var(--basic-typography-h4-font-size);
    letter-spacing: var(--basic-typography-h4-letter-spacing);
    line-height: var(--basic-typography-h4-line-height);
    font-style: var(--basic-typography-h4-font-style);
}

.dashboard-builder .actios-2 {
    position: relative;
    width: 392px;
    height: 38px;
    gap: var(--variables-gap-gap-4);
}

.dashboard-builder .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--variables-gap-gap-6);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    overflow-x: hidden;
}

.dashboard-builder .evento {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
    width: 267px;
    background-color: var(--variables-misc-paper);
    border-radius: var(--variables-border-radius-border-radius-md);
    box-shadow: var(--light-elevation-gray-shadow-md);
}

.dashboard-builder .card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: var(--variables-misc-card-header);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.dashboard-builder .rectangle {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 100px;
    background-color: #d9d9d9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dashboard-builder .text-wrapper-3 {
    position: relative;
    align-self: stretch;
    font-family: var(--basic-typography-h5-font-family);
    font-weight: var(--basic-typography-h5-font-weight);
    color: var(--variables-theme-text-primary);
    font-size: var(--basic-typography-h5-font-size);
    letter-spacing: var(--basic-typography-h5-letter-spacing);
    line-height: var(--basic-typography-h5-line-height);
    font-style: var(--basic-typography-h5-font-style);
}

.dashboard-builder .frame-3 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .frame-4 {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .check {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: var(--variables-color-palette-primary-main);
    border-radius: 50px;
}

.dashboard-builder .img {
    position: absolute;
    width: 78.57%;
    height: 78.57%;
    top: 10.71%;
    left: 10.71%;
}

.dashboard-builder .text-wrapper-4 {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: var(--basic-typography-toast-font-family);
    font-weight: var(--basic-typography-toast-font-weight);
    color: var(--variables-theme-text-primary);
    font-size: var(--basic-typography-toast-font-size);
    letter-spacing: var(--basic-typography-toast-letter-spacing);
    line-height: var(--basic-typography-toast-line-height);
    white-space: nowrap;
    font-style: var(--basic-typography-toast-font-style);
}

.dashboard-builder .text-wrapper-5 {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: var(--basic-typography-body-1-500-font-family);
    font-weight: var(--basic-typography-body-1-500-font-weight);
    color: var(--variables-theme-text-primary);
    font-size: var(--basic-typography-body-1-500-font-size);
    letter-spacing: var(--basic-typography-body-1-500-letter-spacing);
    line-height: var(--basic-typography-body-1-500-line-height);
    white-space: nowrap;
    font-style: var(--basic-typography-body-1-500-font-style);
}

.dashboard-builder .divider {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1px;
    background-color: var(--variables-theme-divider);
}

.dashboard-builder .frame-5 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    width: 100%;
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .label-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
    flex-grow: 1;
    background-color: var(--variables-color-palette-success-opacity-light);
    border-radius: var(--variables-border-radius-border-radius-sm);
    overflow: hidden;
}

.dashboard-builder .div-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    position: relative;
    flex: 0 0 auto;
}

.dashboard-builder .arrow-narrow-right-wrapper {
    position: relative;
    width: 10px;
    height: 16px;
}

.dashboard-builder .arrow-narrow-right {
    position: absolute;
    top: 1px;
    left: -2px;
    width: 14px;
    height: 14px;
}

.dashboard-builder .button-2 {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: var(--components-typography-btn-small-font-family);
    font-weight: var(--components-typography-btn-small-font-weight);
    color: var(--variables-color-palette-success-main);
    font-size: var(--components-typography-btn-small-font-size);
    letter-spacing: var(--components-typography-btn-small-letter-spacing);
    line-height: var(--components-typography-btn-small-line-height);
    white-space: nowrap;
    font-style: var(--components-typography-btn-small-font-style);
}

.dashboard-builder .btn-label-secondary-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
    flex-grow: 1;
    background-color: var(--variables-color-palette-secondary-opacity-light);
    border-radius: var(--variables-border-radius-border-radius-sm);
    overflow: hidden;
}

.dashboard-builder .button-3 {
    color: var(--variables-color-palette-secondary-main);
    font-size: var(--components-typography-btn-small-font-size);
    line-height: var(--components-typography-btn-small-line-height);
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: var(--components-typography-btn-small-font-family);
    font-weight: var(--components-typography-btn-small-font-weight);
    letter-spacing: var(--components-typography-btn-small-letter-spacing);
    white-space: nowrap;
    font-style: var(--components-typography-btn-small-font-style);
}

.dashboard-builder .img-2 {
    left: 10.72%;
    position: absolute;
    width: 78.57%;
    height: 78.57%;
    top: 10.71%;
}

.dashboard-builder .card-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
    width: 267px;
    background-color: var(--variables-misc-paper);
    border-radius: var(--variables-border-radius-border-radius-md);
    box-shadow: var(--light-elevation-gray-shadow-md);
}

.dashboard-builder .footer {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 24px;
    padding: 20px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: transparent;
}

.dashboard-builder .vector {
    position: relative;
    width: 146px;
    height: 35px;
}
:root {
    --doto: rgba(255, 0, 0, 1);
    --new-primary: rgba(0, 71, 255, 1);
    --basic-typography-h1-font-family: "Public Sans", Helvetica;
    --basic-typography-h1-font-weight: 500;
    --basic-typography-h1-font-size: 46px;
    --basic-typography-h1-letter-spacing: 0px;
    --basic-typography-h1-line-height: 68px;
    --basic-typography-h1-font-style: normal;
    --basic-typography-h2-font-family: "Public Sans", Helvetica;
    --basic-typography-h2-font-weight: 500;
    --basic-typography-h2-font-size: 38px;
    --basic-typography-h2-letter-spacing: 0px;
    --basic-typography-h2-line-height: 56px;
    --basic-typography-h2-font-style: normal;
    --basic-typography-h3-font-family: "Public Sans", Helvetica;
    --basic-typography-h3-font-weight: 500;
    --basic-typography-h3-font-size: 28px;
    --basic-typography-h3-letter-spacing: 0px;
    --basic-typography-h3-line-height: 42px;
    --basic-typography-h3-font-style: normal;
    --basic-typography-h4-font-family: "Public Sans", Helvetica;
    --basic-typography-h4-font-weight: 500;
    --basic-typography-h4-font-size: 24px;
    --basic-typography-h4-letter-spacing: 0px;
    --basic-typography-h4-line-height: 38px;
    --basic-typography-h4-font-style: normal;
    --basic-typography-h5-font-family: "Public Sans", Helvetica;
    --basic-typography-h5-font-weight: 500;
    --basic-typography-h5-font-size: 18px;
    --basic-typography-h5-letter-spacing: 0px;
    --basic-typography-h5-line-height: 28px;
    --basic-typography-h5-font-style: normal;
    --basic-typography-h6-font-family: "Public Sans", Helvetica;
    --basic-typography-h6-font-weight: 500;
    --basic-typography-h6-font-size: 15px;
    --basic-typography-h6-letter-spacing: 0px;
    --basic-typography-h6-line-height: 22px;
    --basic-typography-h6-font-style: normal;
    --basic-typography-body-1-font-family: "Public Sans", Helvetica;
    --basic-typography-body-1-font-weight: 400;
    --basic-typography-body-1-font-size: 15px;
    --basic-typography-body-1-letter-spacing: 0px;
    --basic-typography-body-1-line-height: 22px;
    --basic-typography-body-1-font-style: normal;
    --basic-typography-body-1-500-font-family: "Public Sans", Helvetica;
    --basic-typography-body-1-500-font-weight: 500;
    --basic-typography-body-1-500-font-size: 15px;
    --basic-typography-body-1-500-letter-spacing: 0px;
    --basic-typography-body-1-500-line-height: 22px;
    --basic-typography-body-1-500-font-style: normal;
    --basic-typography-body-2-font-family: "Public Sans", Helvetica;
    --basic-typography-body-2-font-weight: 400;
    --basic-typography-body-2-font-size: 13px;
    --basic-typography-body-2-letter-spacing: 0px;
    --basic-typography-body-2-line-height: 20px;
    --basic-typography-body-2-font-style: normal;
    --basic-typography-body-2-500-font-family: "Public Sans", Helvetica;
    --basic-typography-body-2-500-font-weight: 500;
    --basic-typography-body-2-500-font-size: 13px;
    --basic-typography-body-2-500-letter-spacing: 0px;
    --basic-typography-body-2-500-line-height: 20px;
    --basic-typography-body-2-500-font-style: normal;
    --basic-typography-subtitle-1-font-family: "Public Sans", Helvetica;
    --basic-typography-subtitle-1-font-weight: 400;
    --basic-typography-subtitle-1-font-size: 15px;
    --basic-typography-subtitle-1-letter-spacing: 0px;
    --basic-typography-subtitle-1-line-height: 22px;
    --basic-typography-subtitle-1-font-style: normal;
    --basic-typography-subtitle-2-font-family: "Public Sans", Helvetica;
    --basic-typography-subtitle-2-font-weight: 400;
    --basic-typography-subtitle-2-font-size: 13px;
    --basic-typography-subtitle-2-letter-spacing: 0px;
    --basic-typography-subtitle-2-line-height: 20px;
    --basic-typography-subtitle-2-font-style: normal;
    --basic-typography-overline-font-family: "Public Sans", Helvetica;
    --basic-typography-overline-font-weight: 400;
    --basic-typography-overline-font-size: 12px;
    --basic-typography-overline-letter-spacing: 0.800000011920929px;
    --basic-typography-overline-line-height: 14px;
    --basic-typography-overline-font-style: normal;
    --basic-typography-caption-font-family: "Public Sans", Helvetica;
    --basic-typography-caption-font-weight: 400;
    --basic-typography-caption-font-size: 13px;
    --basic-typography-caption-letter-spacing: 0.4000000059604645px;
    --basic-typography-caption-line-height: 18px;
    --basic-typography-caption-font-style: normal;
    --basic-typography-toast-font-family: "Public Sans", Helvetica;
    --basic-typography-toast-font-weight: 400;
    --basic-typography-toast-font-size: 15px;
    --basic-typography-toast-letter-spacing: 0px;
    --basic-typography-toast-line-height: 22px;
    --basic-typography-toast-font-style: normal;
    --components-typography-btn-small-font-family: "Public Sans", Helvetica;
    --components-typography-btn-small-font-weight: 500;
    --components-typography-btn-small-font-size: 13px;
    --components-typography-btn-small-letter-spacing: 0px;
    --components-typography-btn-small-line-height: 18px;
    --components-typography-btn-small-font-style: normal;
    --components-typography-btn-medium-font-family: "Public Sans", Helvetica;
    --components-typography-btn-medium-font-weight: 500;
    --components-typography-btn-medium-font-size: 15px;
    --components-typography-btn-medium-letter-spacing: 0px;
    --components-typography-btn-medium-line-height: 22px;
    --components-typography-btn-medium-font-style: normal;
    --components-typography-btn-large-font-family: "Public Sans", Helvetica;
    --components-typography-btn-large-font-weight: 500;
    --components-typography-btn-large-font-size: 17px;
    --components-typography-btn-large-letter-spacing: 0px;
    --components-typography-btn-large-line-height: 26px;
    --components-typography-btn-large-font-style: normal;
    --components-typography-input-label-font-family: "Public Sans", Helvetica;
    --components-typography-input-label-font-weight: 400;
    --components-typography-input-label-font-size: 13px;
    --components-typography-input-label-letter-spacing: 0px;
    --components-typography-input-label-line-height: 15px;
    --components-typography-input-label-font-style: normal;
    --components-typography-helper-text-font-family: "Public Sans", Helvetica;
    --components-typography-helper-text-font-weight: 400;
    --components-typography-helper-text-font-size: 13px;
    --components-typography-helper-text-letter-spacing: 0px;
    --components-typography-helper-text-line-height: 13px;
    --components-typography-helper-text-font-style: normal;
    --components-typography-input-text-large-font-family: "Public Sans", Helvetica;
    --components-typography-input-text-large-font-weight: 400;
    --components-typography-input-text-large-font-size: 17px;
    --components-typography-input-text-large-letter-spacing: 0px;
    --components-typography-input-text-large-line-height: 24px;
    --components-typography-input-text-large-font-style: normal;
    --components-typography-input-text-font-family: "Public Sans", Helvetica;
    --components-typography-input-text-font-weight: 400;
    --components-typography-input-text-font-size: 15px;
    --components-typography-input-text-letter-spacing: 0px;
    --components-typography-input-text-line-height: 24px;
    --components-typography-input-text-font-style: normal;
    --components-typography-input-text-small-font-family: "Public Sans", Helvetica;
    --components-typography-input-text-small-font-weight: 400;
    --components-typography-input-text-small-font-size: 13px;
    --components-typography-input-text-small-letter-spacing: 0px;
    --components-typography-input-text-small-line-height: 22px;
    --components-typography-input-text-small-font-style: normal;
    --components-typography-avatar-initials-font-family: "Public Sans", Helvetica;
    --components-typography-avatar-initials-font-weight: 400;
    --components-typography-avatar-initials-font-size: 15px;
    --components-typography-avatar-initials-letter-spacing: 0px;
    --components-typography-avatar-initials-line-height: 18px;
    --components-typography-avatar-initials-font-style: normal;
    --components-typography-chip-font-family: "Public Sans", Helvetica;
    --components-typography-chip-font-weight: 500;
    --components-typography-chip-font-size: 13px;
    --components-typography-chip-letter-spacing: 0px;
    --components-typography-chip-line-height: 20px;
    --components-typography-chip-font-style: normal;
    --components-typography-tooltip-font-family: "Public Sans", Helvetica;
    --components-typography-tooltip-font-weight: 500;
    --components-typography-tooltip-font-size: 13px;
    --components-typography-tooltip-letter-spacing: 0px;
    --components-typography-tooltip-line-height: 20px;
    --components-typography-tooltip-font-style: normal;
    --components-typography-alert-title-font-family: "Public Sans", Helvetica;
    --components-typography-alert-title-font-weight: 500;
    --components-typography-alert-title-font-size: 18px;
    --components-typography-alert-title-letter-spacing: 0px;
    --components-typography-alert-title-line-height: 24px;
    --components-typography-alert-title-font-style: normal;
    --components-typography-table-header-font-family: "Public Sans", Helvetica;
    --components-typography-table-header-font-weight: 500;
    --components-typography-table-header-font-size: 13px;
    --components-typography-table-header-letter-spacing: 0.20000000298023224px;
    --components-typography-table-header-line-height: 24px;
    --components-typography-table-header-font-style: normal;
    --components-typography-badge-label-font-family: "Public Sans", Helvetica;
    --components-typography-badge-label-font-weight: 500;
    --components-typography-badge-label-font-size: 13px;
    --components-typography-badge-label-letter-spacing: 0px;
    --components-typography-badge-label-line-height: 16px;
    --components-typography-badge-label-font-style: normal;
    --light-elevation-gray-shadow-xs: 0px 1px 6px 0px rgba(47, 43, 61, 0.1);
    --light-elevation-gray-shadow-sm: 0px 2px 8px 0px rgba(47, 43, 61, 0.12);
    --light-elevation-gray-shadow-md: 0px 3px 12px 0px rgba(47, 43, 61, 0.14);
    --light-elevation-gray-shadow-lg: 0px 4px 18px 0px rgba(47, 43, 61, 0.16);
    --light-elevation-gray-shadow-xl: 0px 5px 30px 0px rgba(47, 43, 61, 0.18);
    --light-elevation-primary-primary-shadow-md: 0px 4px 16px 0px
        rgba(115, 103, 240, 0.4);
    --light-elevation-primary-primary-shadow-lg: 0px 6px 20px 0px
        rgba(115, 103, 240, 0.5);
    --light-elevation-primary-primary-shadow-sm: 0px 2px 6px 0px
        rgba(115, 103, 240, 0.3);
    --light-elevation-info-info-shadow-sm: 0px 2px 6px 0px rgba(0, 186, 209, 0.3);
    --light-elevation-info-info-shadow-md: 0px 4px 16px 0px rgba(0, 186, 209, 0.4);
    --light-elevation-info-info-shadow-lg: 0px 6px 20px 0px rgba(0, 186, 209, 0.5);
    --light-elevation-secondary-secondary-shadow-sm: 0px 2px 6px 0px
        rgba(128, 131, 144, 0.3);
    --light-elevation-secondary-secondary-shadow-md: 0px 4px 16px 0px
        rgba(128, 131, 144, 0.4);
    --light-elevation-secondary-secondary-shadow-lg: 0px 6px 20px 0px
        rgba(128, 131, 144, 0.5);
    --light-elevation-success-success-shadow-sm: 0px 2px 6px 0px
        rgba(40, 199, 111, 0.3);
    --light-elevation-success-success-shadow-md: 0px 4px 16px 0px
        rgba(40, 199, 111, 0.4);
    --light-elevation-success-success-shadow-lg: 0px 6px 20px 0px
        rgba(40, 199, 111, 0.5);
    --light-elevation-warning-warning-shadow-sm: 0px 2px 6px 0px
        rgba(255, 159, 67, 0.3);
    --light-elevation-warning-warning-shadow-md: 0px 4px 16px 0px
        rgba(255, 159, 67, 0.4);
    --light-elevation-warning-warning-shadow-lg: 0px 6px 20px 0px
        rgba(255, 159, 67, 0.5);
    --light-elevation-error-error-shadow-sm: 0px 2px 6px 0px
        rgba(255, 76, 81, 0.3);
    --light-elevation-error-error-shadow-md: 0px 4px 16px 0px
        rgba(255, 76, 81, 0.4);
    --light-elevation-error-error-shadow-lg: 0px 6px 20px 0px
        rgba(255, 76, 81, 0.5);
    --dark-elevation-gray-shadow-xs: 0px 1px 6px 0px rgba(19, 17, 32, 0.16);
    --dark-elevation-gray-shadow-sm: 0px 2px 8px 0px rgba(19, 17, 32, 0.18);
    --dark-elevation-gray-shadow-md: 0px 3px 12px 0px rgba(19, 17, 32, 0.2);
    --dark-elevation-gray-shadow-lg: 0px 4px 18px 0px rgba(19, 17, 32, 0.22);
    --dark-elevation-gray-shadow-xl: 0px 5px 30px 0px rgba(19, 17, 32, 0.24);
    --variables-theme-chip-background: rgba(47, 43, 61, 0.08);
    --variables-theme-input-border: rgba(47, 43, 61, 0.22);
    --variables-theme-filled-input-bg: rgba(47, 43, 61, 0.06);
    --variables-theme-backdrop-overlay: rgba(47, 43, 61, 0.5);
    --variables-theme-outline-border: rgba(47, 43, 61, 0.24);
    --variables-theme-divider: rgba(47, 43, 61, 0.12);
    --variables-theme-action-focus: rgba(47, 43, 61, 0.1);
    --variables-theme-action-disabled-bg: rgba(47, 43, 61, 0.16);
    --variables-theme-action-disabled: rgba(47, 43, 61, 0.3);
    --variables-theme-action-selected: rgba(47, 43, 61, 0.08);
    --variables-theme-action-hover: rgba(47, 43, 61, 0.06);
    --variables-theme-text-disabled: rgba(47, 43, 61, 0.4);
    --variables-theme-text-subtitle: rgba(47, 43, 61, 0.55);
    --variables-theme-action-active: rgba(47, 43, 61, 0.6);
    --variables-theme-text-secondary: rgba(47, 43, 61, 0.7);
    --variables-theme-text-primary: rgba(47, 43, 61, 0.9);
    --variables-color-palette-gray-opacity-darker: var(
        --primitives-opacity-color-gray-gray-38
    );
    --variables-color-palette-gray-opacity-dark: var(
        --primitives-opacity-color-gray-gray-32
    );
    --variables-color-palette-gray-opacity-main: var(
        --primitives-opacity-color-gray-gray-24
    );
    --variables-color-palette-gray-opacity-light: var(
        --primitives-opacity-color-gray-gray-16
    );
    --variables-color-palette-gray-opacity-lighter: var(
        --primitives-opacity-color-gray-gray-8
    );
    --variables-color-palette-success-opacity-darker: var(
        --primitives-opacity-color-success-success-38
    );
    --variables-color-palette-success-opacity-dark: var(
        --primitives-opacity-color-success-success-32
    );
    --variables-color-palette-success-opacity-main: var(
        --primitives-opacity-color-success-success-24
    );
    --variables-color-palette-success-opacity-light: var(
        --primitives-opacity-color-success-success-16
    );
    --variables-color-palette-success-opacity-lighter: var(
        --primitives-opacity-color-success-success-8
    );
    --variables-color-palette-success-dark: var(
        --primitives-color-success-success-600
    );
    --variables-color-palette-success-main: var(
        --primitives-color-success-success-500
    );
    --variables-color-palette-success-light: var(
        --primitives-color-success-success-400
    );
    --variables-color-palette-info-opacity-darker: var(
        --primitives-opacity-color-info-info-38
    );
    --variables-color-palette-info-opacity-dark: var(
        --primitives-opacity-color-info-info-32
    );
    --variables-color-palette-info-opacity-main: var(
        --primitives-opacity-color-info-info-24
    );
    --variables-color-palette-info-opacity-light: var(
        --primitives-opacity-color-info-info-16
    );
    --variables-color-palette-info-opacity-lighter: var(
        --primitives-opacity-color-info-info-8
    );
    --variables-color-palette-info-dark: var(--primitives-color-info-info-600);
    --variables-color-palette-info-main: var(--primitives-color-info-info-500);
    --variables-color-palette-info-light: var(--primitives-color-info-info-400);
    --variables-color-palette-warning-opacity-darker: var(
        --primitives-opacity-color-warning-warning-38
    );
    --variables-color-palette-warning-opacity-dark: var(
        --primitives-opacity-color-warning-warning-32
    );
    --variables-color-palette-warning-opacity-main: var(
        --primitives-opacity-color-warning-warning-24
    );
    --variables-color-palette-warning-opacity-light: var(
        --primitives-opacity-color-warning-warning-16
    );
    --variables-color-palette-warning-opacity-lighter: var(
        --primitives-opacity-color-warning-warning-8
    );
    --variables-color-palette-warning-dark: var(
        --primitives-color-warning-warning-600
    );
    --variables-color-palette-warning-main: var(
        --primitives-color-warning-warning-500
    );
    --variables-color-palette-warning-light: var(
        --primitives-color-warning-warning-400
    );
    --variables-color-palette-error-opacity-darker: var(
        --primitives-opacity-color-error-error-38
    );
    --variables-color-palette-error-opacity-dark: var(
        --primitives-opacity-color-error-error-32
    );
    --variables-color-palette-error-opacity-main: var(
        --primitives-opacity-color-error-error-24
    );
    --variables-color-palette-error-opacity-light: var(
        --primitives-opacity-color-error-error-16
    );
    --variables-color-palette-error-opacity-lighter: var(
        --primitives-opacity-color-error-error-8
    );
    --variables-color-palette-error-dark: var(--primitives-color-error-error-600);
    --variables-color-palette-error-main: var(--primitives-color-error-error-500);
    --variables-color-palette-error-light: var(--primitives-color-error-error-400);
    --variables-color-palette-secondary-opacity-darker: var(
        --primitives-opacity-color-secondary-secondary-38
    );
    --variables-color-palette-secondary-opacity-dark: var(
        --primitives-opacity-color-secondary-secondary-32
    );
    --variables-color-palette-secondary-opacity-main: var(
        --primitives-opacity-color-secondary-secondary-24
    );
    --variables-color-palette-secondary-opacity-light: var(
        --primitives-opacity-color-secondary-secondary-16
    );
    --variables-color-palette-secondary-opacity-lighter: var(
        --primitives-opacity-color-secondary-secondary-8
    );
    --variables-color-palette-secondary-dark: var(
        --primitives-color-secondary-secondary-600
    );
    --variables-color-palette-secondary-main: var(
        --primitives-color-secondary-secondary-500
    );
    --variables-color-palette-secondary-light: var(
        --primitives-color-secondary-secondary-400
    );
    --variables-color-palette-primary-opacity-darker: var(
        --primitives-opacity-color-primary-primary-38
    );
    --variables-color-palette-primary-opacity-dark: var(
        --primitives-opacity-color-primary-primary-32
    );
    --variables-color-palette-primary-opacity-main: var(
        --primitives-opacity-color-primary-primary-24
    );
    --variables-color-palette-primary-opacity-light: var(
        --primitives-opacity-color-primary-primary-16
    );
    --variables-color-palette-primary-opacity-lighter: var(
        --primitives-opacity-color-primary-primary-8
    );
    --variables-color-palette-primary-dark: var(
        --primitives-color-primary-primary-600
    );
    --variables-color-palette-primary-main: var(
        --primitives-color-primary-primary-500
    );
    --variables-color-palette-primary-light: var(
        --primitives-color-primary-primary-400
    );
    --variables-padding-p-1: var(--primitives-padding-padding-1);
    --variables-padding-p-2: var(--primitives-padding-padding-2);
    --variables-padding-p-3: var(--primitives-padding-padding-3);
    --variables-padding-p-4: var(--primitives-padding-padding-4);
    --variables-padding-p-5: var(--primitives-padding-padding-5);
    --variables-padding-p-6: var(--primitives-padding-padding-6);
    --variables-padding-p-7: var(--primitives-padding-padding-7);
    --variables-padding-p-8: var(--primitives-padding-padding-8);
    --variables-padding-p-9: var(--primitives-padding-padding-9);
    --variables-padding-p-10: var(--primitives-padding-padding-10);
    --variables-padding-p-11: var(--primitives-padding-padding-11);
    --variables-padding-p-12: var(--primitives-padding-padding-12);
    --variables-padding-p-13: var(--primitives-padding-padding-13);
    --variables-padding-p-14: var(--primitives-padding-padding-14);
    --variables-padding-p-15: var(--primitives-padding-padding-15);
    --variables-padding-p-16: var(--primitives-padding-padding-16);
    --variables-padding-p-25: var(--primitives-padding-padding-25);
    --variables-gap-gap-1: var(--primitives-gap-gap-1-duplicate);
    --variables-gap-gap-2: var(--primitives-gap-gap-2-duplicate);
    --variables-gap-gap-3: var(--primitives-gap-gap-3-duplicate);
    --variables-gap-gap-4: var(--primitives-gap-gap-4-duplicate);
    --variables-gap-gap-5: var(--primitives-gap-gap-5-duplicate);
    --variables-gap-gap-6: var(--primitives-gap-gap-6-duplicate);
    --variables-gap-gap-7: var(--primitives-gap-gap-7-duplicate);
    --variables-gap-gap-8: var(--primitives-gap-gap-8-duplicate);
    --variables-gap-gap-9: var(--primitives-gap-gap-9-duplicate);
    --variables-gap-gap-10: var(--primitives-gap-gap-10-duplicate);
    --variables-gap-gap-11: var(--primitives-gap-gap-11-duplicate);
    --variables-gap-gap-12: var(--primitives-gap-gap-12-duplicate);
    --variables-gap-gap-13: var(--primitives-gap-gap-13-duplicate);
    --variables-gap-gap-14: var(--primitives-gap-gap-14-duplicate);
    --variables-gap-gap-15: var(--primitives-gap-gap-15-duplicate);
    --variables-gap-gap-16: var(--primitives-gap-gap-16-duplicate);
    --variables-border-radius-border-radius-xs: var(
        --primitives-border-radius-border-radius-xs-duplicate
    );
    --variables-border-radius-border-radius-sm: var(
        --primitives-border-radius-border-radius-sm-duplicate
    );
    --variables-border-radius-border-radius-md: var(
        --primitives-border-radius-border-radius-md-duplicate
    );
    --variables-border-radius-border-radius-lg: var(
        --primitives-border-radius-border-radius-lg-duplicate
    );
    --variables-border-radius-border-radius-xl: var(
        --primitives-border-radius-border-radius-xl-duplicate
    );
    --variables-border-radius-border-round: var(
        --primitives-border-radius-border-round-duplicate
    );
    --variables-misc-card-header: 24px;
    --variables-misc-card-padding: 24px;
    --variables-misc-card-footer: 24px;
    --variables-misc-form-gap: 24px;
    --variables-misc-container-xl: 1140px;
    --variables-misc-paper: rgba(255, 255, 255, 1);
    --variables-misc-body-bg: rgba(248, 247, 250, 1);
    --variables-misc-grey-light: rgba(250, 250, 250, 1);
    --variables-misc-bg-white: rgba(255, 255, 255, 1);
    --variables-misc-bg-black: rgba(0, 0, 0, 1);
    --variables-misc-chat-bg: rgba(243, 242, 245, 1);
    --variables-misc-bg-facebook: rgba(66, 103, 178, 1);
    --variables-misc-bg-twitter: rgba(29, 161, 242, 1);
    --variables-misc-bg-linkedin: rgba(0, 123, 182, 1);
    --variables-misc-track-bg: rgba(241, 240, 242, 1);
    --variables-misc-table-header: rgba(255, 255, 255, 1);
    --variables-misc-avatar-bg: rgba(238, 237, 240, 1);
    --variables-misc-snackbar: rgba(47, 43, 61, 1);
    --primitives-padding-padding-1: 4px;
    --primitives-padding-padding-2: 8px;
    --primitives-padding-padding-3: 12px;
    --primitives-padding-padding-4: 16px;
    --primitives-padding-padding-5: 20px;
    --primitives-padding-padding-6: 24px;
    --primitives-padding-padding-7: 28px;
    --primitives-padding-padding-8: 32px;
    --primitives-padding-padding-9: 36px;
    --primitives-padding-padding-10: 40px;
    --primitives-padding-padding-11: 44px;
    --primitives-padding-padding-12: 48px;
    --primitives-padding-padding-13: 52px;
    --primitives-padding-padding-14: 56px;
    --primitives-padding-padding-15: 60px;
    --primitives-padding-padding-16: 64px;
    --primitives-padding-padding-25: 100px;
    --primitives-gap-gap-1-duplicate: 4px;
    --primitives-gap-gap-2-duplicate: 8px;
    --primitives-gap-gap-3-duplicate: 12px;
    --primitives-gap-gap-4-duplicate: 16px;
    --primitives-gap-gap-5-duplicate: 20px;
    --primitives-gap-gap-6-duplicate: 24px;
    --primitives-gap-gap-7-duplicate: 28px;
    --primitives-gap-gap-8-duplicate: 32px;
    --primitives-gap-gap-9-duplicate: 36px;
    --primitives-gap-gap-10-duplicate: 40px;
    --primitives-gap-gap-11-duplicate: 44px;
    --primitives-gap-gap-12-duplicate: 48px;
    --primitives-gap-gap-13-duplicate: 52px;
    --primitives-gap-gap-14-duplicate: 56px;
    --primitives-gap-gap-15-duplicate: 60px;
    --primitives-gap-gap-16-duplicate: 64px;
    --primitives-gap-gap-25: 100px;
    --primitives-color-primary-primary-100: rgba(226, 255, 254, 1);
    --primitives-color-primary-primary-200: rgba(178, 255, 252, 1);
    --primitives-color-primary-primary-300: rgba(133, 249, 245, 1);
    --primitives-color-primary-primary-400: rgba(85, 224, 220, 1);
    --primitives-color-primary-primary-500: rgba(63, 191, 187, 1);
    --primitives-color-primary-primary-600: rgba(54, 175, 172, 1);
    --primitives-color-primary-primary-700: rgba(43, 152, 149, 1);
    --primitives-color-primary-primary-800: rgba(28, 129, 126, 1);
    --primitives-color-primary-primary-900: rgba(13, 151, 147, 1);
    --primitives-color-secondary-secondary-100: rgba(230, 230, 233, 1);
    --primitives-color-secondary-secondary-200: rgba(204, 205, 211, 1);
    --primitives-color-secondary-secondary-300: rgba(179, 181, 188, 1);
    --primitives-color-secondary-secondary-400: rgba(153, 156, 166, 1);
    --primitives-color-secondary-secondary-500: rgba(128, 131, 144, 1);
    --primitives-color-secondary-secondary-600: rgba(115, 118, 130, 1);
    --primitives-color-secondary-secondary-700: rgba(109, 111, 122, 1);
    --primitives-color-secondary-secondary-800: rgba(102, 105, 115, 1);
    --primitives-color-secondary-secondary-900: rgba(96, 98, 108, 1);
    --primitives-color-info-info-100: rgba(204, 241, 246, 1);
    --primitives-color-info-info-200: rgba(153, 227, 237, 1);
    --primitives-color-info-info-300: rgba(102, 214, 227, 1);
    --primitives-color-info-info-400: rgba(51, 200, 218, 1);
    --primitives-color-info-info-500: rgba(0, 186, 209, 1);
    --primitives-color-info-info-600: rgba(0, 167, 188, 1);
    --primitives-color-info-info-700: rgba(0, 158, 178, 1);
    --primitives-color-info-info-800: rgba(0, 149, 167, 1);
    --primitives-color-info-info-900: rgba(0, 140, 157, 1);
    --primitives-color-success-success-100: rgba(212, 244, 226, 1);
    --primitives-color-success-success-200: rgba(169, 233, 197, 1);
    --primitives-color-success-success-300: rgba(126, 221, 169, 1);
    --primitives-color-success-success-400: rgba(83, 210, 140, 1);
    --primitives-color-success-success-500: rgba(40, 199, 111, 1);
    --primitives-color-success-success-600: rgba(36, 179, 100, 1);
    --primitives-color-success-success-700: rgba(34, 169, 94, 1);
    --primitives-color-success-success-800: rgba(32, 159, 89, 1);
    --primitives-color-success-success-900: rgba(30, 149, 83, 1);
    --primitives-color-warning-warning-100: rgba(255, 236, 217, 1);
    --primitives-color-warning-warning-200: rgba(255, 217, 180, 1);
    --primitives-color-warning-warning-300: rgba(255, 197, 142, 1);
    --primitives-color-warning-warning-400: rgba(255, 178, 105, 1);
    --primitives-color-warning-warning-500: rgba(255, 159, 67, 1);
    --primitives-color-warning-warning-600: rgba(230, 143, 60, 1);
    --primitives-color-warning-warning-700: rgba(217, 135, 57, 1);
    --primitives-color-warning-warning-800: rgba(204, 127, 54, 1);
    --primitives-color-warning-warning-900: rgba(191, 119, 50, 1);
    --primitives-color-error-error-100: rgba(255, 219, 220, 1);
    --primitives-color-error-error-200: rgba(255, 183, 185, 1);
    --primitives-color-error-error-300: rgba(255, 148, 151, 1);
    --primitives-color-error-error-400: rgba(255, 112, 116, 1);
    --primitives-color-error-error-500: rgba(255, 76, 81, 1);
    --primitives-color-error-error-600: rgba(230, 68, 73, 1);
    --primitives-color-error-error-700: rgba(217, 65, 69, 1);
    --primitives-color-error-error-800: rgba(204, 61, 65, 1);
    --primitives-color-error-error-900: rgba(191, 57, 61, 1);
    --primitives-color-gray-gray-100: rgba(234, 234, 236, 1);
    --primitives-color-gray-gray-200: rgba(213, 212, 216, 1);
    --primitives-color-gray-gray-300: rgba(192, 190, 197, 1);
    --primitives-color-gray-gray-400: rgba(171, 168, 177, 1);
    --primitives-color-gray-gray-500: rgba(151, 147, 158, 1);
    --primitives-color-gray-gray-600: rgba(130, 125, 139, 1);
    --primitives-color-gray-gray-700: rgba(109, 103, 119, 1);
    --primitives-color-gray-gray-800: rgba(88, 81, 100, 1);
    --primitives-color-gray-gray-900: rgba(67, 60, 80, 1);
    --primitives-opacity-color-primary-primary-8: rgba(115, 103, 240, 0.08);
    --primitives-opacity-color-primary-primary-16: rgba(115, 103, 240, 0.16);
    --primitives-opacity-color-primary-primary-24: rgba(115, 103, 240, 0.24);
    --primitives-opacity-color-primary-primary-32: rgba(115, 103, 240, 0.32);
    --primitives-opacity-color-primary-primary-38: rgba(115, 103, 240, 0.38);
    --primitives-opacity-color-secondary-secondary-8: rgba(128, 131, 144, 0.08);
    --primitives-opacity-color-secondary-secondary-16: rgba(128, 131, 144, 0.16);
    --primitives-opacity-color-secondary-secondary-24: rgba(128, 131, 144, 0.24);
    --primitives-opacity-color-secondary-secondary-32: rgba(128, 131, 144, 0.32);
    --primitives-opacity-color-secondary-secondary-38: rgba(128, 131, 144, 0.38);
    --primitives-opacity-color-info-info-8: rgba(0, 186, 209, 0.08);
    --primitives-opacity-color-info-info-16: rgba(0, 186, 209, 0.16);
    --primitives-opacity-color-info-info-24: rgba(0, 186, 209, 0.24);
    --primitives-opacity-color-info-info-32: rgba(0, 186, 209, 0.32);
    --primitives-opacity-color-info-info-38: rgba(0, 186, 209, 0.38);
    --primitives-opacity-color-success-success-8: rgba(40, 199, 111, 0.08);
    --primitives-opacity-color-success-success-16: rgba(40, 199, 111, 0.16);
    --primitives-opacity-color-success-success-24: rgba(40, 199, 111, 0.24);
    --primitives-opacity-color-success-success-32: rgba(40, 199, 111, 0.32);
    --primitives-opacity-color-success-success-38: rgba(40, 199, 111, 0.38);
    --primitives-opacity-color-warning-warning-8: rgba(255, 159, 67, 0.08);
    --primitives-opacity-color-warning-warning-16: rgba(255, 159, 67, 0.16);
    --primitives-opacity-color-warning-warning-24: rgba(255, 159, 67, 0.24);
    --primitives-opacity-color-warning-warning-32: rgba(255, 159, 67, 0.32);
    --primitives-opacity-color-warning-warning-38: rgba(255, 159, 67, 0.38);
    --primitives-opacity-color-error-error-8: rgba(255, 76, 81, 0.08);
    --primitives-opacity-color-error-error-16: rgba(255, 76, 81, 0.16);
    --primitives-opacity-color-error-error-24: rgba(255, 76, 81, 0.24);
    --primitives-opacity-color-error-error-32: rgba(255, 76, 81, 0.32);
    --primitives-opacity-color-error-error-38: rgba(255, 76, 81, 0.38);
    --primitives-border-radius-border-radius-xs-duplicate: 2px;
    --primitives-border-radius-border-radius-sm-duplicate: 4px;
    --primitives-border-radius-border-radius-md-duplicate: 6px;
    --primitives-border-radius-border-radius-lg-duplicate: 8px;
    --primitives-border-radius-border-radius-xl-duplicate: 10px;
    --primitives-border-radius-border-round-duplicate: 500px;
    --primitives-opacity-color-gray-gray-8: rgba(46, 38, 61, 0.08);
    --primitives-opacity-color-gray-gray-16: rgba(46, 38, 61, 0.16);
    --primitives-opacity-color-gray-gray-24: rgba(46, 38, 61, 0.24);
    --primitives-opacity-color-gray-gray-32: rgba(46, 38, 61, 0.32);
    --primitives-opacity-color-gray-gray-38: rgba(46, 38, 61, 0.38);
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-variables-mode="light">
        <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-variables-mode="light"] {
    --variables-theme-chip-background: rgba(47, 43, 61, 0.08);
    --variables-theme-input-border: rgba(47, 43, 61, 0.22);
    --variables-theme-filled-input-bg: rgba(47, 43, 61, 0.06);
    --variables-theme-backdrop-overlay: rgba(47, 43, 61, 0.5);
    --variables-theme-outline-border: rgba(47, 43, 61, 0.24);
    --variables-theme-divider: rgba(47, 43, 61, 0.12);
    --variables-theme-action-focus: rgba(47, 43, 61, 0.1);
    --variables-theme-action-disabled-bg: rgba(47, 43, 61, 0.16);
    --variables-theme-action-disabled: rgba(47, 43, 61, 0.3);
    --variables-theme-action-selected: rgba(47, 43, 61, 0.08);
    --variables-theme-action-hover: rgba(47, 43, 61, 0.06);
    --variables-theme-text-disabled: rgba(47, 43, 61, 0.4);
    --variables-theme-text-subtitle: rgba(47, 43, 61, 0.55);
    --variables-theme-action-active: rgba(47, 43, 61, 0.6);
    --variables-theme-text-secondary: rgba(47, 43, 61, 0.7);
    --variables-theme-text-primary: rgba(47, 43, 61, 0.9);
    --variables-misc-paper: rgba(255, 255, 255, 1);
    --variables-misc-body-bg: rgba(248, 247, 250, 1);
    --variables-misc-grey-light: rgba(250, 250, 250, 1);
    --variables-misc-chat-bg: rgba(243, 242, 245, 1);
    --variables-misc-track-bg: rgba(241, 240, 242, 1);
    --variables-misc-table-header: rgba(255, 255, 255, 1);
    --variables-misc-avatar-bg: rgba(238, 237, 240, 1);
    --variables-misc-snackbar: rgba(47, 43, 61, 1);
}

[data-variables-mode="dark"] {
    --variables-theme-chip-background: rgba(225, 222, 245, 0.08);
    --variables-theme-input-border: rgba(225, 222, 245, 0.22);
    --variables-theme-filled-input-bg: rgba(225, 222, 245, 0.06);
    --variables-theme-backdrop-overlay: rgba(23, 25, 37, 0.6);
    --variables-theme-outline-border: rgba(225, 222, 245, 0.24);
    --variables-theme-divider: rgba(225, 222, 245, 0.12);
    --variables-theme-action-focus: rgba(225, 222, 245, 0.1);
    --variables-theme-action-disabled-bg: rgba(225, 222, 245, 0.16);
    --variables-theme-action-disabled: rgba(225, 222, 245, 0.3);
    --variables-theme-action-selected: rgba(225, 222, 245, 0.08);
    --variables-theme-action-hover: rgba(225, 222, 245, 0.06);
    --variables-theme-text-disabled: rgba(225, 222, 245, 0.4);
    --variables-theme-text-subtitle: rgba(225, 222, 245, 0.55);
    --variables-theme-action-active: rgba(225, 222, 245, 0.6);
    --variables-theme-text-secondary: rgba(225, 222, 245, 0.7);
    --variables-theme-text-primary: rgba(225, 222, 245, 0.9);
    --variables-misc-paper: rgba(47, 51, 73, 1);
    --variables-misc-body-bg: rgba(37, 41, 60, 1);
    --variables-misc-grey-light: rgba(53, 58, 82, 1);
    --variables-misc-chat-bg: rgba(32, 37, 52, 1);
    --variables-misc-track-bg: rgba(58, 63, 87, 1);
    --variables-misc-table-header: rgba(47, 51, 73, 1);
    --variables-misc-avatar-bg: rgba(55, 59, 80, 1);
    --variables-misc-snackbar: rgba(247, 244, 255, 1);
}

[data-primitives-mode="light"] {
    --primitives-color-gray-gray-100: rgba(234, 234, 236, 1);
    --primitives-color-gray-gray-200: rgba(213, 212, 216, 1);
    --primitives-color-gray-gray-300: rgba(192, 190, 197, 1);
    --primitives-color-gray-gray-400: rgba(171, 168, 177, 1);
    --primitives-color-gray-gray-500: rgba(151, 147, 158, 1);
    --primitives-color-gray-gray-600: rgba(130, 125, 139, 1);
    --primitives-color-gray-gray-700: rgba(109, 103, 119, 1);
    --primitives-color-gray-gray-800: rgba(88, 81, 100, 1);
    --primitives-color-gray-gray-900: rgba(67, 60, 80, 1);
    --primitives-opacity-color-primary-primary-38: rgba(115, 103, 240, 0.38);
    --primitives-opacity-color-gray-gray-8: rgba(46, 38, 61, 0.08);
    --primitives-opacity-color-gray-gray-16: rgba(46, 38, 61, 0.16);
    --primitives-opacity-color-gray-gray-24: rgba(46, 38, 61, 0.24);
    --primitives-opacity-color-gray-gray-32: rgba(46, 38, 61, 0.32);
    --primitives-opacity-color-gray-gray-38: rgba(46, 38, 61, 0.38);
}

[data-primitives-mode="dark"] {
    --primitives-color-gray-gray-100: rgba(83, 88, 118, 1);
    --primitives-color-gray-gray-200: rgba(99, 103, 132, 1);
    --primitives-color-gray-gray-300: rgba(114, 118, 146, 1);
    --primitives-color-gray-gray-400: rgba(130, 133, 160, 1);
    --primitives-color-gray-gray-500: rgba(146, 147, 174, 1);
    --primitives-color-gray-gray-600: rgba(162, 162, 189, 1);
    --primitives-color-gray-gray-700: rgba(178, 177, 203, 1);
    --primitives-color-gray-gray-800: rgba(193, 192, 217, 1);
    --primitives-color-gray-gray-900: rgba(207, 204, 228, 1);
    --primitives-opacity-color-primary-primary-38: rgba(101, 91, 211, 0.38);
    --primitives-opacity-color-gray-gray-8: rgba(231, 227, 252, 0.08);
    --primitives-opacity-color-gray-gray-16: rgba(231, 227, 252, 0.16);
    --primitives-opacity-color-gray-gray-24: rgba(231, 227, 252, 0.24);
    --primitives-opacity-color-gray-gray-32: rgba(231, 227, 252, 0.32);
    --primitives-opacity-color-gray-gray-38: rgba(231, 227, 252, 0.38);
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .dashboard-builder .evento,
    .dashboard-builder .card-header-wrapper {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    
    .dashboard-builder .row {
        flex-direction: column;
    }
    
    /* Modales responsive */
    #modalRegistroEvento > div,
    #modalParticipantes > div,
    #modalRegistroServicio > div {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 2vh auto !important;
    }
    
    #iframeRegistroEvento,
    #iframeParticipantes,
    #iframeRegistroServicio {
        height: 85vh !important;
    }
}

/* Responsive para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .dashboard-builder .evento,
    .dashboard-builder .card-header-wrapper {
        width: calc(50% - 12px);
        flex: 0 0 calc(50% - 12px);
    }
}

/* Estilos para tablas de participantes en modal */
#contenidoParticipantes .box {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#contenidoParticipantes .box-header {
    padding: 15px;
    border-bottom: 1px solid #f4f4f4;
}

#contenidoParticipantes .box-header .box-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

#contenidoParticipantes .box-body {
    padding: 15px;
}

#contenidoParticipantes .table-responsive {
    overflow-x: auto;
    min-height: 0.01%;
}

#contenidoParticipantes .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}

#contenidoParticipantes .table th,
#contenidoParticipantes .table td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

#contenidoParticipantes .table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
    background-color: #f9f9f9;
    font-weight: 600;
}

#contenidoParticipantes .table tbody tr:hover {
    background-color: #f5f5f5;
}

#contenidoParticipantes .table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

#contenidoParticipantes .table-striped tbody tr:nth-of-type(odd):hover {
    background-color: #f0f0f0;
}

#contenidoParticipantes .table-condensed th,
#contenidoParticipantes .table-condensed td {
    padding: 5px;
}

#contenidoParticipantes .text-center {
    text-align: center;
}

#contenidoParticipantes .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

#contenidoParticipantes .alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

#contenidoParticipantes .row {
    margin-right: -15px;
    margin-left: -15px;
}

#contenidoParticipantes .col-md-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
}