.wrap { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; height: 100%; }

.nav-panel { flex-shrink: 0; display: flex; flex-direction: column; width: 250px; background: var(--neutral-900); }
.nav-panel .logo { display: flex; box-sizing: border-box; width: 100%; height: 96px; padding: 35px 30px 25px 30px; }
.nav-panel .logo a { display: flex; width: 100%; height: 100%; }
.nav-panel .logo img { max-width: 100%; max-height: 100%; }

.nav-panel nav { flex-grow: 1; display: flex; flex-direction: column; width: 100%; padding: 24px 0; overflow-y: auto; scrollbar-color: var(--neutral-500) var(--neutral-700); scrollbar-width: thin; }
.nav-panel nav ul { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; width: 100%; list-style: none; }
.nav-panel nav ul li { display: flex; flex-direction: column; width: 100%; user-select: none; }
.nav-panel nav ul li a,
.nav-panel nav ul li button { display: flex; flex-wrap: nowrap; align-items: center; box-sizing: border-box; width: 100%; padding: 16px 32px; background: transparent; border: 0; color: var(--neutral-25); font-weight: 500; line-height: 18px; }
.nav-panel nav ul li .icon { flex-shrink: 0; display: flex; justify-content: center; width: 22px; margin-right: 16px; font-size: 18px; }
.nav-panel nav ul li .arrow { flex-shrink: 0; flex-grow: 1; display: flex; justify-content: flex-end; margin-left: 16px; }
.nav-panel nav ul li:has(> ul.visible) > a .arrow svg,
.nav-panel nav ul li:has(> ul.visible) > button .arrow svg { transform: rotate(90deg); }

.nav-panel nav ul li > ul.submenu:not(.visible) { display: none; }

.nav-panel nav ul.submenu { gap: 0; padding: 0 32px 16px 70px; }
.nav-panel nav ul.submenu li a,
.nav-panel nav ul.submenu li button { padding: 11px 0; }

.nav-panel nav ul.submenu li ul.submenu { gap: 16px; margin: 8px 0; padding: 5px 16px; border-left: 1px solid var(--neutral-700); }
.nav-panel nav ul.submenu li ul.submenu li a,
.nav-panel nav ul.submenu li ul.submenu li button { padding: 0; }

.nav-panel .bottom { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; padding: 30px; }
.nav-panel .user-menu { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; }
.nav-panel .user-menu .image { flex-shrink: 0; display: flex; width: 36px; height: 36px; margin-right: 12px; border-radius: 50%; overflow: hidden; }
.nav-panel .user-menu .image img { width: 100%; height: 100%; object-fit: cover; }
.nav-panel .user-menu .details { color: var(--neutral-25); font-weight: 600; line-height: 18px; }
.nav-panel .user-menu .icon { flex-shrink: 0; flex-grow: 1; justify-content: flex-end; display: flex; margin-left: 12px; color: var(--neutral-25); }

.page-container { display: flex; flex-direction: column; position: relative; width: 100%; }

.page { flex-grow: 1; display: flex; flex-direction: column; width: 100%; border-top: 8px solid var(--neutral-900); }
.page .title { flex-shrink: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; box-sizing: border-box; width: 100%; min-height: 80px; padding: 16px 20px; background: var(--neutral-25); }
.page .title .item { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.page .title h1 { padding-left: 4px; font-size: 36px; font-weight: 500; line-height: 42px; letter-spacing: -0.72px; }
.page .title .breadcrumbs { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 10px; }
.page .title .breadcrumbs .arrow { display: flex; align-items: center; min-height: 20px; color: var(--neutral-400); font-size: 12px; }
.page .title .breadcrumbs .breadcrumb { color: var(--neutral-400); font-weight: 500; line-height: 20px; letter-spacing: -0.32px; }

.page .headline { display: flex; flex-wrap: wrap; width: 100%; }
.page .headline h2 { font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -0.48px; }
.page .headline h3 { font-size: 13px; font-weight: 500; font-family: var(--secondary-font); line-height: 28px; text-transform: uppercase; letter-spacing: 1.3px; }
.page .headline h3:before { content: "["; }
.page .headline h3:after { content: "]"; }

.page .content-container { flex-grow: 1; display: flex; flex-wrap: nowrap; align-items: stretch; box-sizing: border-box; width: 100%; height: 0; padding-top: 12px; background: var(--neutral-75); }
.page .content-container aside { flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; width: 380px; padding: 24px; background: var(--neutral-25); overflow: auto; }
.page .content-container aside.wide { width: 420px; }
.page .content-container .content { flex-grow: 1; display: flex; flex-wrap: wrap; box-sizing: border-box; width: 0; height: 100%; padding: 0 12px 12px 12px; }
.page .content-container .content .inner { flex-grow: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; width: 0; height: 100%; overflow: auto; }

.summary-box { flex-grow: 1; flex-basis: 420px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; width: calc(33.33% - 8px); padding: 24px; background: var(--neutral-25); border-left: 2px solid var(--brand-100); }
.summary-box.grey { border-color: var(--neutral-100); }
.summary-box .value { font-size: 36px; font-weight: 500; font-family: var(--secondary-font); line-height: 42px; letter-spacing: -0.72px; }
.summary-box .text { margin-top: 4px; color: var(--neutral-500); line-height: 26px; }

.content-box { flex-grow: 1; flex-basis: 420px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; width: calc(50% - 6px); padding: 24px; background: var(--neutral-25); }
.table-box { display: flex; flex-direction: column; width: 100%; background: var(--neutral-25); }

.box-container { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--neutral-25); }
.box-container .content-box { flex-grow: 1; width: 100%; }

.table-box .box-title,
.box-container .box-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; box-sizing: border-box; width: 100%; padding: 24px; border-bottom: 1px solid var(--neutral-75); }
.box-container .box-title { padding-top: 16px; padding-bottom: 16px; }
.table-box .box-title .item,
.box-container .box-title .item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.table-box .box-title h2,
.box-container .box-title h2 { font-size: 30px; font-weight: 500; line-height: 36px; letter-spacing: -0.6px; }
.table-box .box-title h3,
.box-container .box-title h3 { font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -0.48px; }
.table-box .box-title h2 span,
.box-container .box-title h2 span { display: inline-block; margin-right: 12px; color: var(--brand-100); }
.table-box .box-title .input-item,
.box-container .box-title .input-item { display: flex; width: 200px; }

.calendar-box { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--neutral-25); }
.calendar-box .box-title { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 10px; box-sizing: border-box; width: 100%; padding: 16px 24px; border-bottom: 1px solid var(--neutral-75); }
.calendar-box .box-title .item { display: flex; flex-wrap: nowrap; align-items: center; gap: 30px; }
.calendar-box .box-title .item:nth-child(1),
.calendar-box .box-title .item:nth-child(3) { flex-basis: 0; flex-grow: 1; flex-shrink: 0; }
.calendar-box .box-title .item:nth-child(3) { justify-content: flex-end; }
.calendar-box .box-title h3 { font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -0.48px; text-align: center; }

.tabs-box { display: flex; flex-direction: column; width: 100%; background: var(--neutral-25); }
.tabs-box .tabs-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; box-sizing: border-box; width: 100%; padding: 24px 24px 16px 24px; }
.tabs-box .tabs-header .details-container { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; width: 0; }
.tabs-box .tabs-header .details-container .image { flex-shrink: 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100px; height: 100px; background: var(--neutral-50); border: 1px solid var(--neutral-75); color: var(--neutral-100); font-size: 36px; }
.tabs-box .tabs-header .details-container .image img { width: 100%; height: 100%; object-fit: cover; }
.tabs-box .tabs-header .details-container .details { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; width: 0; }
.tabs-box .tabs-header .details-container .details h3 { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; line-height: 28px; letter-spacing: -0.48px }
.tabs-box .tabs-header .details-container .details h3 .icon { display: flex; color: var(--lime-500); font-size: 20px; }
.tabs-box .tabs-header .details-container .details .location { color: var(--neutral-500); line-height: 26px; }

.tabs-box .tabs { display: flex; flex-direction: column; position: relative; box-sizing: border-box; width: 100%; padding: 0 24px; }
.tabs-box .tabs:after { content: ""; position: absolute; z-index: 10; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--neutral-75); }
.tabs-box .tabs ul { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 20px; position: relative; z-index: 20; width: 100%; min-height: 60px; list-style: none; }
.tabs-box .tabs ul li { transition: border-color 0.2s ease-in-out; display: flex; align-items: center; padding: 10px; border-bottom: 2px solid transparent; color: var(--neutral-500); font-size: 18px; font-weight: 600; line-height: 22px; text-align: center; cursor: pointer; }
.tabs-box .tabs ul li:hover { border-color: var(--neutral-200); }
.tabs-box .tabs ul li.active { border-color: var(--brand-100); color: var(--neutral-900); }

.tabs-box .tab-content { display: flex; flex-direction: column; width: 100%; }

.content-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; }
.content-nav .arrow,
.content-nav .current { background: transparent; border: 0; }
.content-nav .arrow { transition: color 0.2s ease-in-out; color: var(--neutral-400); }
.content-nav .arrow:hover { color: var(--neutral-900); }
.content-nav .current { font-weight: 500; line-height: 26px; }

table.table thead { position: sticky; z-index: 800; top: 0; }
table.table tr th,
table.table tr td { position: relative; padding: 14px 24px; background: var(--neutral-25); line-height: 18px; }
table.table tr th { border-bottom: 1px solid var(--neutral-75); border-right: 1px solid var(--neutral-75); font-size: 13px; font-weight: 400; font-family: var(--secondary-font); text-transform: uppercase; }
table.table tr th:last-child,
table.table tr td:last-child { border-right: 0; }
table.table tr td { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--neutral-50); border-right: 1px solid var(--neutral-50); color: var(--neutral-500); }
table.table tr:last-child td { border-bottom: 0; }
table.table tr:hover td { background: var(--neutral-50-t50); }
table.table tr td[align="right"] .buttons { justify-content: flex-end; }
table.table tr td a.whole { position: absolute; z-index: 500; top: 0; left: 0; width: 100%; height: 100%; }
table.table tr td .thumb { max-height: 50px; }
table.table tr td .input { height: 36px; padding: 0; background: transparent; border: 0; color: var(--neutral-500); }
table.table tr td .input.small { height: 26px; }
table.table tr td .select { height: 36px; }
table.table tr td .input::placeholder { color: var(--neutral-400); }
table.table tr td[align="right"] .input { text-align: right; }
table.table tfoot tr td { padding: 8px; background: var(--neutral-25) !important; border: 0; border-top: 1px solid var(--neutral-50); color: var(--neutral-600); }
table.table tfoot tr td table tr td { padding: 12px 16px; background: var(--neutral-50) !important; border: 0; }
table.table tfoot tr td table tr:first-child td { padding-top: 20px; }
table.table tfoot tr td table tr:last-child td { padding-bottom: 20px; }
table.table tfoot tr td table tr:last-child td { padding-bottom: 20px; }
table.table tfoot tr td .total-container { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-bottom: 10px; padding-right: 20px; border-right: 4px solid var(--brand-100); color: var(--neutral-900); font-weight: 500; text-align: right; }
table.table tfoot tr td .total-container .amount { font-size: 30px; font-family: var(--secondary-font); line-height: 24px; letter-spacing: -0.6px; }

.calendar { flex-grow: 1; display: flex; flex-direction: column; width: 100%; overflow: auto; }
.calendar .calendar-body { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: stretch; box-sizing: border-box; width: 100%; min-width: 1610px; }
.calendar .calendar-body .day { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; box-sizing: border-box; width: 14.28%; min-height: 114px; padding: 6px; border-right: 1px solid var(--neutral-50); border-top: 1px solid var(--neutral-50); }
.calendar .calendar-body .day:last-child { border-right: 0; }
.calendar .calendar-body .day:nth-child(1),
.calendar .calendar-body .day:nth-child(2),
.calendar .calendar-body .day:nth-child(3),
.calendar .calendar-body .day:nth-child(4),
.calendar .calendar-body .day:nth-child(5),
.calendar .calendar-body .day:nth-child(6),
.calendar .calendar-body .day:nth-child(7) { border-top: 0; }
.calendar .calendar-body .day .date { box-sizing: border-box; width: 100%; padding: 0 6px; font-size: 14px; font-family: var(--secondary-font); line-height: 22px; }
.calendar .calendar-body .day.inactive .date { color: var(--neutral-300); }
.calendar .calendar-body .day.active .date { background: var(--brand-100); color: var(--neutral-25); font-weight: 750; }
.calendar .calendar-body .day .events { flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-sizing: border-box; width: 100%; padding: 6px; }
.calendar .calendar-body .day .events .event { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; padding: 6px; border: 1px solid var(--neutral-100); }
.calendar .calendar-body .day .events .event .specifications { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4px; box-sizing: border-box; width: 100%; padding: 8px; background: var(--neutral-50); }
.calendar .calendar-body .day .events .event .specifications .icon { display: flex; justify-content: center; align-items: center; box-sizing: border-box; min-width: 24px; min-height: 24px; font-size: 14px; }
.calendar .calendar-body .day .events .event .image { display: flex; flex-direction: column; position: relative; width: 100%; background: var(--neutral-900); }
.calendar .calendar-body .day .events .event .image .img { width: 100%; }
.calendar .calendar-body .day .events .event .image .specifications { position: absolute; bottom: 0; left: 0; background: transparent; }
.calendar .calendar-body .day .events .event .image .specifications .icon { background: var(--neutral-900-t50); border: 1px solid var(--neutral-900-t10); color: var(--neutral-25); }
.calendar .calendar-body .day .events .event .details { display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; width: 100%; padding: 6px; }
.calendar .calendar-body .day .events .event .details .heading { font-size: 14px; line-height: 22px; }
.calendar .calendar-body .day .events .event .details .time { margin-bottom: 6px; font-size: 14px; font-weight: 600; font-family: var(--secondary-font); line-height: 22px; text-transform: uppercase; }
.calendar .calendar-body .day .toggle-link { transition: color 0.2s ease-in-out; padding: 0 6px; background: transparent; border: 0; color: var(--brand-100); font-size: 14px; font-weight: 500; line-height: 22px; }
.calendar .calendar-body .day .toggle-link:hover { color: var(--neutral-900); }
.calendar .calendar-head { flex-grow: 0; position: sticky; z-index: 100; top: 0; background: var(--neutral-25); }
.calendar .calendar-head .day { justify-content: center; min-height: 48px; padding: 8px 12px; border-color: var(--neutral-75); border-bottom: 1px solid var(--neutral-75); }
.calendar .calendar-head .day .date { padding: 2px 10px; font-size: 13px; line-height: 26px; font-family: var(--secondary-font); text-transform: uppercase; text-align: center; }

.form-container { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 20px; width: 100%; }
.form-container .form-item { display: flex; flex-direction: column; justify-content: flex-end; width: calc(25% - 15px); max-width: 100%; }
.form-container .form-item.width-full,
.page .content-container aside .form-container .form-item { width: 100%; }
.form-container .form-item .item-heading { margin-bottom: 5px; color: var(--neutral-500); line-height: 26px; }

.messages-container { flex-grow: 1; display: flex; flex-direction: column; gap: 20px; width: 100%; margin-top: 2px; overflow: auto; }
.messages-container .message { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px; width: 100%; }
.messages-container .message .message-image { flex-shrink: 0; display: flex; width: 30px; }
.messages-container .message .message-image img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.messages-container .message .message-data { display: flex; flex-direction: column; gap: 8px; min-width: 200px; max-width: 300px; padding-top: 1px; }
.messages-container .message .message-data .message-details { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 10px; width: 100%; }
.messages-container .message .message-data .message-details .message-name { font-size: 14px; font-weight: 600; line-height: 16px; letter-spacing: -0.28px; }
.messages-container .message .message-data .message-details .message-time { color: var(--neutral-400); font-size: 13px; font-family: var(--secondary-font); line-height: 16px; }
.messages-container .message .message-data .message-text { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; padding: 11px 16px; background: var(--neutral-50); border-radius: 0 8px 8px 8px; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; }
.messages-container .message .message-data .message-attachments { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid var(--neutral-75); border-radius: 0 8px 8px 8px; }
.messages-container .message .message-data .message-attachment { display: flex; flex-wrap: nowrap; gap: 12px; width: 100%; align-items: center; color: var(--neural-900); font-size: 14px; }
.messages-container .message .message-data .message-attachment .icon { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid var(--neutral-100); color: var(--red-500); }
.messages-container .message .message-data .message-attachment .text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; width: 0; }
.messages-container .message .message-data .message-attachment .text .name { font-weight: 600; line-height: 16px; letter-spacing: -0.28px; }
.messages-container .message .message-data .message-attachment .text .size { color: var(--neutral-500); font-size: 12px; font-family: var(--secondary-font); line-height: 14px; }

.messages-container .message.admin { justify-content: flex-end; }
.messages-container .message.admin .message-data .message-text { background: var(--neutral-900); border-radius: 8px 0 8px 8px; color: var(--neutral-25); }

.autocomplete-container { display: flex; flex-direction: column; width: 100%; }
.autocomplete-container .autocomplete-details { display: flex; flex-wrap: wrap; gap: 20px 30px; width: 100%; margin-top: 22px; }
.autocomplete-container .autocomplete-details .details { flex-grow: 1; flex-basis: 260px; display: flex; flex-direction: column; width: 50%; max-width: 100%; }
.autocomplete-container .autocomplete-details .details .heading { margin-bottom: 5px; font-weight: 500; line-height: 26px; }
.autocomplete-container .autocomplete-details .details .value { color: var(--neutral-600); line-height: 26px; }
.autocomplete-container .autocomplete-details .details .value .icon { display: inline-block; margin-left: 8px; color: var(--lime-500); }

.platform-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.platform-icon { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 24px; height: 24px; padding: 4px; background: var(--neutral-25); border: 1px solid var(--neutral-100); }
.platform-icon img { width: 100%; height: 100%; object-fit: contain; }

.badge { flex-shrink: 0; display: flex; justify-content: center; align-items: center; padding: 0 6px; margin-left: 8px; background: var(--brand-100); color: var(--neutral-25); font-size: 13px; font-weight: 650; font-family: var(--secondary-font); line-height: 20px; text-align: center; font-variant-numeric: slashed-zero; }

.labels { display: flex; flex-wrap: wrap; gap: 10px; }
.label-container { display: flex; flex-wrap: nowrap; align-items: stretch; }
.label-container .label + .label { font-weight: 500; }
.label { flex-shrink: 0; display: flex; flex-wrap: nowrap; align-items: center; padding: 4px 8px; background: var(--neutral-600); color: var(--neutral-25); font-size: 11px; font-weight: 650; line-height: 16px; font-family: var(--secondary-font); text-transform: uppercase; }
.label.black { background: var(--neutral-900); }
.label.grey { background: var(--neutral-200); }
.label.green { background: var(--lime-500); }
.label.red { background: var(--red-500); }
.label.red-dark { background: var(--red-600); }
.label.purple { background: var(--purple-500); }
.label.blue { background: var(--sky-500); }
.label .icon { flex-shrink: 0; display: flex; margin-right: 4px; font-size: 8px; }
.label .icon.large { margin-right: 6px; font-size: 10px; }

.value-container { display: flex; flex-wrap: nowrap; align-items: flex-start; color: var(--neutral-900); font-weight: 500; line-height: 24px; }
.value-container.mono { font-size: 13px; text-transform: uppercase; }
.value-container .icon { flex-shrink: 0; display: flex; justify-content: center; align-items: center; min-height: 24px; margin-right: 8px; }
.value-container.mono .icon { min-width: 24px; }

.buttons { display: flex; flex-wrap: nowrap; gap: 10px; }

.icon-button { transition: color 0.2s ease-in-out; background: transparent; border: 0; color: var(--neutral-400); font-size: 20px; }
.icon-button:hover { color: var(--neutral-900); }

.checkbox-container { display: flex; flex-wrap: nowrap; }
.checkbox-container input { display: none; }
.checkbox-container .checkbox-icon { display: flex; cursor: pointer; }
.checkbox-container input:checked + .checkbox-icon { color: var(--brand-100); }

.toggle-radio-container { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 4px; background: var(--neutral-50); border: 1px solid var(--neutral-75); }
.toggle-radio-container .toggle-item { display: flex; }
.toggle-radio-container .toggle-item input { display: none; }
.toggle-radio-container .toggle-item .toggle-button { display: flex; flex-wrap: nowrap; align-items: center; padding: 7px 16px; color: var(--neutral-500); font-size: 13px; font-weight: 750; font-family: var(--secondary-font); line-height: 26px; text-transform: uppercase; cursor: pointer; user-select: none; }
.toggle-radio-container .toggle-item .toggle-button:hover { color: var(--neutral-600); }
.toggle-radio-container .toggle-item .toggle-button .icon { flex-shrink: 0; display: flex; margin-right: 10px; }
.toggle-radio-container .toggle-item input:checked + .toggle-button { background: var(--neutral-25); color: var(--neutral-900); }

.input-container { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%; }
.input-container .icon { display: flex; background: transparent; border: 0; color: var(--neutral-500); font-size: 14px; }

.input-button-container { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%; }

.dropdown-container { display: flex; flex-direction: column; position: relative; width: 100%; }
.dropdown-container .dropdown-toggle { user-select: none; cursor: pointer; }
.dropdown-container .dropdown { display: flex; position: absolute; z-index: 1000; bottom: 100%; left: 0; width: 100%; padding-bottom: 20px; }
.dropdown-container .dropdown:not(.visible) { display: none; }
.dropdown-container .dropdown ul { display: flex; flex-direction: column; width: 100%; background: var(--neutral-800); list-style: none; }
.dropdown-container .dropdown ul li { display: flex; width: 100%; }
.dropdown-container .dropdown ul li a { transition: color 0.2s ease-in-out; display: flex; flex-wrap: nowrap; align-items: center; box-sizing: border-box; width: 100%; padding: 12px; color: var(--neutral-200); font-size: 14px; font-weight: 500; line-height: 14px; }
.dropdown-container .dropdown ul li.red a { color: var(--red-500); }
.dropdown-container .dropdown ul li a:hover { color: var(--neutral-25); }
.dropdown-container .dropdown ul li .icon { flex-shrink: 0; display: flex; margin-right: 12px; }

.modal { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background: var(--neutral-900-t50); }
.modal .modal-box { display: flex; flex-direction: column; width: 780px; max-width: 100%; max-height: 100%; background: var(--neutral-25); overflow: auto; }
.modal .modal-box .box-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; position: sticky; z-index: 100; top: 0; box-sizing: border-box; width: 100%; padding: 22px 24px; background: var(--neutral-25); border-bottom: 1px solid var(--neutral-75); }
.modal .modal-box .box-title .item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.modal .modal-box .box-title h3 { font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -0.48px; }
.modal .modal-box .box-title .close { display: flex; background: transparent; border: 0; font-size: 24px; cursor: pointer; }
.modal .content-box { width: 100%; }
.modal .form-container .form-item:not(.width-full) { width: calc(50% - 10px); }
.modal .button-box { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; position: sticky; z-index: 100; bottom: 0; box-sizing: border-box; width: 100%; padding: 24px; background: var(--neutral-25); border-top: 1px solid var(--neutral-75); }
.modal .button-box .item { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.modal .button-box .item:nth-child(2) { justify-content: flex-end; }

.hidden { display: none !important; }

#progressbar { position: absolute; z-index: 100; top: 5px; left: 0; width: 100%; height: 3px; }
#progressbar span { transition: width 0.2s ease-in-out; display: flex; width: 0; height: 100%; background: var(--brand-100); }