:root {
    --black: #323232;
    --white: #ffffff;
    --yellow: #fdbf47;
    --cyan: #34a8e0;
    --cyanLight: #edf7fd;
    --purple: #b349c5;
    --purpleLight: #f9edfc;
    --violet: #7948ec;
    --violetLight: #f2ecff;
    --orange: #fe8700;
    --orangeLight: #fff4e8;
    --green: #24b07c;
    --greenLight: #e2f5ef;
    --gray: #7c7c7c;
    --grayDisabled: #d0d0d0;
    --blueDivider: #f1f1fa;
    --blueLight: #e5e5ff;
    --blue: #4957d3;
    --red: #d34949;
    --redLight: #ffe5e5;
    --screen: 480px;
    --container-padding: 16px;
}

/* wrapper */

.wrapper {
    max-height: 100%;
    max-width: var(--screen);
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0 auto;
    font-family: SFProText;
    position: relative;
    background: var(--white);
}
.wrapper[data-popper-placement="top-start"] {
    height: fit-content;
    inset: auto auto 18px 0px!important;
    width: auto;
}
.wrapper::-webkit-scrollbar {
    display: none;
}
.wrapper.primary-hide::before {
    content: "";
    background: rgba(50, 50, 50, 0.3490196078);
    max-width: var(--screen);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    z-index: 2;
}
.wrapper.secondary-hide::before {
    content: "";
    background: rgba(50, 50, 50, 0.3490196078);
    max-width: var(--screen);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    z-index: 4;
}
.wrapper.full-hide::before {
    content: "";
    background: rgba(50, 50, 50, 0.3490196078);
    max-width: var(--screen);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    z-index: 6;
}
.wrapper.settings-hide::before {
    content: "";
    background: rgba(50, 50, 50, 0.3490196078);
    max-width: var(--screen);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    z-index: 6;
}
.wrapper.alert-hide::before {
    content: "";
    background: rgba(50, 50, 50, 0.3490196078);
    max-width: var(--screen);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    z-index: 6;
}
.container {
    width: 100%;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* pop-up/over */

.popover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 200px;
    border: 1px solid var(--blueDivider);
    border-radius: 14px;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 5;
    background: var(--white);
    display: none;
}
.popover a {
    height: 56px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 16px;
}
.popover a:not(:last-child) {
    border-bottom: 1px solid var(--blueDivider);
}
.full-popup {
    padding-bottom: 20px;
    max-width: var(--screen);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 4;
    background: var(--white);
    display: none;
    overflow-x: hidden;
    overflow-y: scroll;
}
.full-popup::-webkit-scrollbar {
    display: none;
}

/* text */

.body-sm {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--black);
}
.body-md {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0.25px;
    color: var(--black);
}
.body-lg {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--black);
}
.label-sm {
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.label-md {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.label-lg {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.1px;
}
.title-sm {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.1px;
}
.title-md {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: 0.15px;
}
.title-lg {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
}
.head-sm {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
}
.head-md {
    font-size: 28px;
    line-height: 36px;
    font-weight: 400;
}
.head-lg {
    font-size: 32px;
    line-height: 40px;
    font-weight: 400;
}

.last-message-indicator {
    color: var(--violet);
}

/* primary elements */

/* .....primary-user */

.primary-user-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--blueLight);
    position: relative;
    cursor: pointer;
}
.primary-user-item .primary-user-content .body-sm {
    color: var(--gray);
}
.primary-user-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}
.primary-user-item .primary-user-actions {
    margin-left: auto;
    padding-right: 8px;
}
.primary-user-item .primary-user-actions img {
    width: auto;
    height: auto;
}
.primary-user-item .primary-user-push {
    width: 24px;
    height: 16px;
    border-radius: 50px;
    background: var(--violet);
    position: absolute;
    right: 0;
    top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: var(--white);
}

/* .....primary-invite */

.primary-invite-item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 8px;
}
.primary-invite-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}
.primary-invite-item .body-md {
    padding-left: 8px;
}
.primary-invite-item .primary-invite-actions .invite-user.load *, 
.primary-invite-item .primary-invite-actions .approve-user.load * {
    display: none;
}
.primary-invite-item .primary-invite-actions .invite-user.load, 
.primary-invite-item .primary-invite-actions .approve-user.load {
    display: block;
    position: relative;
    width: 32px;
    height: 32px;
}
.primary-invite-item .primary-invite-actions .invite-user.load::before, 
.primary-invite-item .primary-invite-actions .approve-user.load::before {
    display: block;
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTYiIGZpbGw9IiNFMkY1RUYiLz4KPGc+CjxwYXRoIGQ9Ik0xNC44MzEgMjMuMTY4NkMxMy44NDExIDIzLjAwOTEgMTIuODk1IDIyLjY0NjQgMTIuMDUyMSAyMi4xMDM1QzExLjIwOTMgMjEuNTYwNiAxMC40ODc5IDIwLjg0OTEgOS45MzMyOCAyMC4wMTM4QzkuMzc4NzEgMTkuMTc4NSA5LjAwMjk3IDE4LjIzNzUgOC44Mjk3MiAxNy4yNUM4LjY1NjQ2IDE2LjI2MjUgOC42ODk0MiAxNS4yNDk4IDguOTI2NTMgMTQuMjc1NkM5LjIyODMzIDEyLjkyMzEgOS45MjE2IDExLjY4OTQgMTAuOTE5OSAxMC43MjgyQzExLjkxODIgOS43NjcxIDEzLjE3NzMgOS4xMjExIDE0LjU0MDMgOC44NzA3OUMxNS40OTY3IDguNjc1NjMgMTYuNDgyNyA4LjY3NTE3IDE3LjQzOTMgOC44Njk0M0MxOC4zOTYgOS4wNjM3IDE5LjMwMzcgOS40NDg3IDIwLjEwODIgMTAuMDAxNUMyMC45MTI4IDEwLjU1NDIgMjEuNTk3OCAxMS4yNjM0IDIyLjEyMjIgMTIuMDg2OEMyMi42NDY3IDEyLjkxMDEgMjIuOTk5OSAxMy44MzA2IDIzLjE2MDggMTQuNzkzNEMyMy4yMDggMTUuMTIxMSAyMy4zNjk5IDE1LjQyMTQgMjMuNjE3NyAxNS42NDFDMjMuODY1NiAxNS44NjA2IDI0LjE4MzIgMTUuOTg1MSAyNC41MTQzIDE1Ljk5MjVIMjQuNjMyM0MyNC44MTA0IDE1Ljk5NTEgMjQuOTg2OSAxNS45NTk2IDI1LjE1IDE1Ljg4ODJDMjUuMzEzMSAxNS44MTY4IDI1LjQ1OSAxNS43MTEyIDI1LjU3NzkgMTUuNTc4NkMyNS42OTY3IDE1LjQ0NiAyNS43ODU3IDE1LjI4OTUgMjUuODM4OCAxNS4xMTk1QzI1Ljg5MiAxNC45NDk2IDI1LjkwOCAxNC43NzAyIDI1Ljg4NTkgMTQuNTkzNkMyNS42Mjc1IDEyLjc2NTMgMjQuODY3NSAxMS4wNDQ0IDIzLjY5MDQgOS42MjE5QzIyLjUxMzIgOC4xOTkzNiAyMC45NjUgNy4xMzA4MSAxOS4yMTc0IDYuNTM0ODNDMTcuNDY5OCA1LjkzODg1IDE1LjU5MTIgNS44Mzg3NSAxMy43OTAyIDYuMjQ1NjRDMTEuOTg5MiA2LjY1MjUzIDEwLjMzNjEgNy41NTA0OSA5LjAxNDQ2IDguODM5ODhDNy42OTI4MSAxMC4xMjkzIDYuNzU0MjggMTEuNzU5NiA2LjMwMzAyIDEzLjU1MDFDNS44NTE3NSAxNS4zNDA1IDUuOTA1NDEgMTcuMjIwOSA2LjQ1ODAzIDE4Ljk4MjdDNy4wMTA2NSAyMC43NDQ1IDguMDQwNjIgMjIuMzE4NyA5LjQzMzY0IDIzLjUzMDZDMTAuODI2NyAyNC43NDI2IDEyLjUyODIgMjUuNTQ0OCAxNC4zNDk1IDI1Ljg0ODNDMTQuNTUwNCAyNS44ODQxIDE0Ljc1NjYgMjUuODc1NSAxNC45NTM4IDI1LjgyMzJDMTUuMTUxIDI1Ljc3MDggMTUuMzM0MyAyNS42NzYgMTUuNDkwOSAyNS41NDUzQzE1LjY0NzYgMjUuNDE0NiAxNS43NzM4IDI1LjI1MTIgMTUuODYwNiAyNS4wNjY2QzE1Ljk0NzUgMjQuODgyIDE1Ljk5MjkgMjQuNjgwNyAxNS45OTM3IDI0LjQ3NjdDMTUuOTg5OCAyNC4xNTUyIDE1Ljg3MDEgMjMuODQ1OSAxNS42NTY1IDIzLjYwNTZDMTUuNDQyOSAyMy4zNjUzIDE1LjE0OTggMjMuMjEwMiAxNC44MzEgMjMuMTY4NloiIGZpbGw9IiMyNEIwN0MiLz4KPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGR1cj0iMC43NXMiIHZhbHVlcz0iMCAxNiAxNjszNjAgMTYgMTYiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CjwvZz4KPC9zdmc+CiAgICA=");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.primary-invite-item .primary-invite-actions .remove-user.load *,
.primary-invite-item .primary-invite-actions .decline-user.load * {
    display: none;
}
.primary-invite-item .primary-invite-actions .remove-user.load, 
.primary-invite-item .primary-invite-actions .decline-user.load {
    display: block;
    position: relative;
    width: 32px;
    height: 32px;
}
.primary-invite-item .primary-invite-actions .remove-user.load::before, 
.primary-invite-item .primary-invite-actions .decline-user.load::before {
    display: block;
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTYiIGZpbGw9IiNGRkU2RTYiLz4KPGc+CjxwYXRoIGQ9Ik0xNC44MzEgMjMuMTY4NkMxMy44NDExIDIzLjAwOTEgMTIuODk1IDIyLjY0NjQgMTIuMDUyMSAyMi4xMDM1QzExLjIwOTMgMjEuNTYwNiAxMC40ODc5IDIwLjg0OTEgOS45MzMyOCAyMC4wMTM4QzkuMzc4NzEgMTkuMTc4NSA5LjAwMjk3IDE4LjIzNzUgOC44Mjk3MiAxNy4yNUM4LjY1NjQ2IDE2LjI2MjUgOC42ODk0MiAxNS4yNDk4IDguOTI2NTMgMTQuMjc1NkM5LjIyODMzIDEyLjkyMzEgOS45MjE2IDExLjY4OTQgMTAuOTE5OSAxMC43MjgyQzExLjkxODIgOS43NjcxIDEzLjE3NzMgOS4xMjExIDE0LjU0MDMgOC44NzA3OUMxNS40OTY3IDguNjc1NjMgMTYuNDgyNyA4LjY3NTE3IDE3LjQzOTMgOC44Njk0M0MxOC4zOTYgOS4wNjM3IDE5LjMwMzcgOS40NDg3IDIwLjEwODIgMTAuMDAxNUMyMC45MTI4IDEwLjU1NDIgMjEuNTk3OCAxMS4yNjM0IDIyLjEyMjIgMTIuMDg2OEMyMi42NDY3IDEyLjkxMDEgMjIuOTk5OSAxMy44MzA2IDIzLjE2MDggMTQuNzkzNEMyMy4yMDggMTUuMTIxMSAyMy4zNjk5IDE1LjQyMTQgMjMuNjE3NyAxNS42NDFDMjMuODY1NiAxNS44NjA2IDI0LjE4MzIgMTUuOTg1MSAyNC41MTQzIDE1Ljk5MjVIMjQuNjMyM0MyNC44MTA0IDE1Ljk5NTEgMjQuOTg2OSAxNS45NTk2IDI1LjE1IDE1Ljg4ODJDMjUuMzEzMSAxNS44MTY4IDI1LjQ1OSAxNS43MTEyIDI1LjU3NzkgMTUuNTc4NkMyNS42OTY3IDE1LjQ0NiAyNS43ODU3IDE1LjI4OTUgMjUuODM4OCAxNS4xMTk1QzI1Ljg5MiAxNC45NDk2IDI1LjkwOCAxNC43NzAyIDI1Ljg4NTkgMTQuNTkzNkMyNS42Mjc1IDEyLjc2NTMgMjQuODY3NSAxMS4wNDQ0IDIzLjY5MDQgOS42MjE5QzIyLjUxMzIgOC4xOTkzNiAyMC45NjUgNy4xMzA4MSAxOS4yMTc0IDYuNTM0ODNDMTcuNDY5OCA1LjkzODg1IDE1LjU5MTIgNS44Mzg3NSAxMy43OTAyIDYuMjQ1NjRDMTEuOTg5MiA2LjY1MjUzIDEwLjMzNjEgNy41NTA0OSA5LjAxNDQ2IDguODM5ODhDNy42OTI4MSAxMC4xMjkzIDYuNzU0MjggMTEuNzU5NiA2LjMwMzAyIDEzLjU1MDFDNS44NTE3NSAxNS4zNDA1IDUuOTA1NDEgMTcuMjIwOSA2LjQ1ODAzIDE4Ljk4MjdDNy4wMTA2NSAyMC43NDQ1IDguMDQwNjIgMjIuMzE4NyA5LjQzMzY0IDIzLjUzMDZDMTAuODI2NyAyNC43NDI2IDEyLjUyODIgMjUuNTQ0OCAxNC4zNDk1IDI1Ljg0ODNDMTQuNTUwNCAyNS44ODQxIDE0Ljc1NjYgMjUuODc1NSAxNC45NTM4IDI1LjgyMzJDMTUuMTUxIDI1Ljc3MDggMTUuMzM0MyAyNS42NzYgMTUuNDkwOSAyNS41NDUzQzE1LjY0NzYgMjUuNDE0NiAxNS43NzM4IDI1LjI1MTIgMTUuODYwNiAyNS4wNjY2QzE1Ljk0NzUgMjQuODgyIDE1Ljk5MjkgMjQuNjgwNyAxNS45OTM3IDI0LjQ3NjdDMTUuOTg5OCAyNC4xNTUyIDE1Ljg3MDEgMjMuODQ1OSAxNS42NTY1IDIzLjYwNTZDMTUuNDQyOSAyMy4zNjUzIDE1LjE0OTggMjMuMjEwMiAxNC44MzEgMjMuMTY4NloiIGZpbGw9IiNEMzQ5NDkiLz4KPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGR1cj0iMC43NXMiIHZhbHVlcz0iMCAxNiAxNjszNjAgMTYgMTYiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CjwvZz4KPC9zdmc+Cg==");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.primary-invite-item .primary-invite-actions {
    margin-left: auto;
    margin-right: 8px;
    display: flex;
    gap: 8px;
}
.primary-invite-item .primary-invite-actions img {
    width: auto;
    height: auto;
}
.event-invite .primary-invite-item img {
    width: 32px;
    height: 32px;
}
/* .....primary-radio */

input.radio {
    display: none;
}
input.radio:checked + label::after {
    display: block;
}
label.radio {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 16px 0;
}
label.radio::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--violetLight);
}
label.radio::after {
    content: '';
    display: none;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--violet);
}

/* .....primary-checbox */

.checkbox input {
    display: none;
}
.checkbox label {
    width: 18px;
    height: 18px;
    border: 1px solid var(--blueDivider);
    border-radius: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
}
.checkbox label svg {
    display: none;
}
.checkbox input:checked + label {
    border: none;
    background: var(--green);
}
.checkbox input:checked + label svg {
    display: block;
}

/* .....primary-tags */

.tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}
.tags input {
    display: none;
}
.tags input:checked + label {
    background: var(--violet);
    color: var(--white);
}
.tags input:checked + label svg {
    display: block;
}
.tags label {
    padding: 6px 16px;
    background: var(--blueDivider);
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    color: var(--black);
    cursor: pointer;
}
.tags label svg {
    display: none;
}

/* .....primary-switcher */

.switcher {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.switcher .switcher-text {
    color: var(--green);
}
.switcher input {
    display: none;
}
.switcher input:checked + .switcher-text {
    color: var(--red);
}
.switcher input:checked + .switcher-text + .slider {
    background-color: var(--red);
}
.switcher input:checked + .switcher-text + .slider::before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}
.switcher .slider {
    width: 51px;
    height: 31px;
    cursor: pointer;
    background-color: var(--green);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    border-radius: 31px;
    position: relative;
}
.switcher .slider::before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0px 3px 8px 0px #00000026;
}

/* primary navigation */

.secondary-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 64px;
    z-index: 5;
    background: var(--white);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.secondary-nav.fixed-nav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--screen);
    width: 100%;
}
.secondary-nav a.goback, .secondary-nav a.close-popups {
    position: absolute;
    left: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.secondary-nav .actions {
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.main-nav {
    width: 100%;
    height: 64px;
    position: relative;
    z-index: 5;
    background: var(--white);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.main-nav .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}
.main-nav .nav-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

/* buttons */

.btn-sm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--violet);
    -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1490196078);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1490196078);
    border-radius: 14px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.btn-sm.preload {
    pointer-events: none;
    cursor: default;
    background-color: transparent;
    background-image: linear-gradient(270deg, var(--violetLight), var(--blueDivider), var(--blueLight));
    background-size: 400% 100%;
    animation: loading 8s ease-in-out infinite;
}
.btn-sm.preload * {
    display: none;
}

.btn-sm svg {
    width: 24px;
    height: 24px;
}
.btn-sm img {
    width: 24px;
}
.btn-sm.load {
    pointer-events: none;
    cursor: default;
    background: #D1C2F4;
    position: relative;
}
.btn-sm.load * {
    display: none;
    font-size: 0;
    font-weight: 0;
    line-height: 0;
}
.btn-sm.load::before {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_aj0A%7Btransform-origin:center;animation:spinner_KYSC .75s infinite linear%7D@keyframes spinner_KYSC%7B100%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cpath d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z' class='spinner_aj0A' fill='white'/%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn-sm.disabled {
    background: var(--grayDisabled);
}
.btn-lg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    background: var(--violet);
    border-radius: 14px;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    outline: 0;
    border: none;
    color: var(--white);
}
.btn-lg.btn-disabled {
    background: #D0D0D0;
    color: var(--white);
    pointer-events: none;
}
.btn-lg.load {
    pointer-events: none;
    cursor: default;
    position: relative;
    font-size: 0;
    font-weight: 0;
    line-height: 0;
    background: #D1C2F4;
}
.btn-lg.load::before {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_aj0A%7Btransform-origin:center;animation:spinner_KYSC .75s infinite linear%7D@keyframes spinner_KYSC%7B100%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cpath d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z' class='spinner_aj0A' fill='white'/%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn-dang {
    background: var(--redLight);
    color: var(--red);
}
.btn-lg.disabled {
    background: var(--grayDisabled);
}
.btn-lg.btn-alert {
    background: var(--red);
    color: var(--white);
}
.btn-lg.loaded,
.btn-lg:hover {
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background: var(--violetLight);
    color: var(--violet) !important;
}

/* wysiwyg editor */

.wysiwyg-editor {
    position: fixed;
    max-width: var(--screen);
    padding: 0 16px;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 6;
    display: none;
}
.wysiwyg-editor .container {
    background: var(--white);
    border-radius: 14px;
    -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15),
        0 3px 1px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.06);
    padding: 16px;
}
.wysiwyg-editor .btn-lg {
    margin-top: 16px;
}

.wysiwyg-editor #toolbar {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    border-radius: 14px;
    padding: 8px 14px;
    background: var(--blueDivider);
}

.wysiwyg-editor #editor .ql-editor {
    color: var(--black);
    font-family: SFProText;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    margin-top: 6px;
    width: 100%;
    min-height: 224px;
    background: var(--blueDivider);
    padding: 8px 14px;
    border-radius: 14px;
    outline: none;
}

/* inputs */

.input-row {
    width: 100%;
    position: relative;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.input-row.loading::after {
    content: '';
    display: block;
    height: 60px;
    background-image: linear-gradient(270deg, var(--violetLight), var(--blueDivider), var(--blueLight));
    background-size: 400% 100%;
    animation: loading 8s ease-in-out infinite;
    overflow: hidden;
    border-radius: 14px;
}

.input-row.loading *:not(label) {
    display: none!important;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
.input-row .action.static {
    position: absolute;
    right: 16px;
    top: 40px;
    z-index: 2;
    width: 24px;
    height: 24px;
}
.input-row .action.static a {
    display: block;
    width: 24px;
    height: 24px;
}
.input-row.with-btn .action {
    position: absolute;
    top: 24px;
    right: 0;
}
.input-row.with-btn input {
    width: calc(100% - 60px);
}
.input-row-half {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.input-row-half .input-row {
    width: calc(50% - 4px);
}
.input-row label {
    display: block;
    margin-bottom: 8px;
}
.input-row .btn-lg {
    margin-top: 12px;
}
.input-row.with-btn .select2-container {
    width: calc(100% - 60px) !important;
}
.input-row input {
    font-family: SFProText;
    height: 56px;
    width: 100%;
    border-radius: 14px;
    padding: 15px 35px 15px 15px;
    background: var(--blueDivider);
    color: var(--black);
}
.input-row .textarea-wrapper {
    width: 100%;
    padding: 16px;
    background: var(--blueDivider);
    border-radius: 14px;
}
.input-row .textarea-wrapper .textarea-content {
    width: 100%;
    margin-bottom: 16px;
    line-height: 20px;
    letter-spacing: 0.25px;
    font-size: 14px;
    color: var(--black);
    font-weight: 400;
}
.input-row textarea {
    width: 100%;
    height: 112px;
    padding: 15px;
    resize: none;
    background: var(--blueDivider);
    font-family: SFProText;
    border-radius: 14px;
    outline: 0;
}
.input-row .select2-container {
    height: 56px;
    width: 100% !important;
    border-radius: 14px;
    background: var(--blueDivider);
    color: var(--black);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: SFProText;
    padding: 15px;
}

.input-row .select2-container.select2-container--open {
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--cyan);
    border-width: 1px 1px 0 1px;
}

.select2-dropdown {
    border-color: var(--cyan);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.select2-dropdown ul li {
    background: var(--blueDivider);
    padding: 8px 15px 8px 15px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--black);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--blueLight);
    color: var(--black);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--blueLight);
}

.select2-search--dropdown  {
    background: var(--blueLight);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--black);
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0.25px;
    color: var(--black);
    font-family: SFProText;
}

.input-row.error input,
.input-row.error .select2-container,
.input-row.error .btn-add-wrap {
    border: 1px solid var(--red);
}

.input-row.error .error {
    color: var(--red);
    margin-top: 8px;
}

.input-row.error.with-wysiwyg .textarea-wrapper {
    border: 1px solid var(--red);
}

.input-row.with-wysiwyg .btn-lg {
    margin: 0;
}

.input-row .select2-container .select2-selection {
    background: 0 0;
    border: none;
    outline: 0;
}
.input-row
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.input-row .select2-container .select2-selection__arrow {
    width: 24px;
    height: 24px;
    right: 16px;
    left: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.select2-selection--multiple .select2-search__field {
    height: 100%;
    min-width: 110px;
    border-radius: 0px!important;
    margin: 0!important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.select2-container .select2-selection--multiple {
    min-height: auto;
}
.select2-selection.select2-selection--multiple {
    height: 100%;
}
.select2-selection.select2-selection--multiple .select2-selection__rendered  {
    height: 100%;
}
.select2-selection.select2-selection--multiple .select2-selection__rendered li  {
    height: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--violet);
    border: none;
    outline: none;
    height: 100%;
    margin: 0 5px 0 0;
    padding: 0;
    padding: 3px 5px;
    box-sizing: border-box;
    color: var(--white);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0.25px;
}
.select2 .selection {
    display: block;
    height: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}
.select2-selection--multiple .select2-search__field::placeholder {
    color: #999;
}
.input-row .select2-container .select2-selection__arrow b {
    border: none;
    outline: 0;
    background: 0 0;
    background: url(../../icons/down-arrow-v.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    display: block;
}

.input-row .select2-container .select2-selection__arrow b {
    border: none;
    outline: 0;
    background: 0 0;
    background: url(../../icons/down-arrow-v.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    display: block;
}
.input-row
    .select2-container--default.select2-container--open
    .select2-selection--single
    .select2-selection__arrow
    b {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.input-row.untouch .select2-container .select2-selection__arrow {
    display: none;
}
.input-row.untouch .mapboxgl-ctrl-geocoder--button {
    display: none !important;
}
.input-row.untouch .select2-container {
    -ms-touch-action: none;
    touch-action: none;
    cursor: default;
}
.select2-results {
    font-family: SFProText;
}
.input-row select::-ms-expand {
    display: none;
}
.input-row input::-webkit-input-placeholder,
.input-row textarea::-webkit-input-placeholder {
    color: var(--gray);
}
.input-row input::-moz-placeholder,
.input-row textarea::-moz-placeholder {
    color: var(--gray);
}
.input-row input:-ms-input-placeholder,
.input-row textarea:-ms-input-placeholder {
    color: var(--gray);
}
.input-row input::-ms-input-placeholder,
.input-row textarea::-ms-input-placeholder {
    color: var(--gray);
}
.input-row input::placeholder,
.input-row textarea::placeholder {
    color: var(--gray);
}
.input-row input:focus,
.input-row select:focus {
    outline: 0;
    border: 1px solid var(--cyan);
}
.input-row input.untouch:focus,
.input-row select.untouch:focus {
    border: none;
}
.input-row input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}
.input-row .mapboxgl-ctrl-geocoder--button {
    background: 0 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 16px;
    width: 16px;
    height: 16px;
}
.input-row .mapboxgl-ctrl-geocoder--button .mapboxgl-ctrl-geocoder--icon {
    fill: var(--violet);
    margin: 0;
    top: auto;
    left: auto;
}
.input-row .mapboxgl-ctrl-geocoder--button:hover {
    background-color: transparent !important;
}

/* tabs */

.tabs {
    width: 100%;
}
.tabs .tabs-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 64px;
    border-bottom: 1px solid var(--blueLight);
    margin-bottom: 15px;
}
.tabs .tabs-nav a {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 10px;
    position: relative;
    color: var(--gray);
    text-align: center;
}
.tabs .tabs-nav a.active {
    color: var(--violet);
}
.tabs .tabs-nav a.active::before {
    content: "";
    position: absolute;
    width: 131px;
    height: 3px;
    background: var(--violet);
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 5px 5px 0 0;
}
.tabs .tabs-wrapper {
    padding-bottom: 168px;
}
.tabs .tabs-nav a.active::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 8px;
    background: var(--violetLight);
    top: 16px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50px;
}
.tabs .tabs-item {
    width: 100%;
}