#content_wrapper { height: 100vh; max-height: 100vh; width: calc(100vw - (100vw - 100%)); display: flex; flex-direction: column; }

#content_wrapper #content_topbar { width: calc(100vw - (100vw - 100%)); height: 28px; min-height: 28px; line-height: 28px; background: blue; color: white; text-align: center; font-weight: 700; font-size: 14px; }

#content_wrapper #content { width: calc(100vw - (100vw - 100%)); flex-grow: 1; position: relative; overflow: hidden; }

#content_wrapper #content #content_inner { overflow: hidden; width: 100%; height: 100%; display: flex; flex-direction: column; }

#content_wrapper #content #content_inner #content_left { position: absolute; top: 0; left: 0; height: 100%; }

#content_wrapper #content #content_inner #content_right { width: calc(100vw - (100vw - 100%) - $menu_left_width); flex-grow: 1; overflow-y: auto; padding-left: calc(240px); padding-right: 8px; padding-top: 8px; padding-bottom: 8px; }

#content_wrapper #content #content_inner #content_right.wide { width: calc(100vw - (100vw - 100%) - 76px); min-width: auto; }

#content_wrapper #content #content_inner #content_right #content_right_inner { border-radius: 12px; border: 1px solid #e4e4e7; background: white; min-height: 100%; overflow: hidden; }

#content_top { width: 100%; height: 47px; border-bottom: 1px solid #e4e4e7; display: block; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding-left: 24px; padding-right: 24px; column-gap: 8px; }

#content_top a { color: #09090b; }

#content_top.content_top_big { flex-direction: column; row-gap: 0; align-items: flex-start; justify-content: flex-start; border-bottom: none; height: auto; padding: 48px 24px 24px 24px; }

#content_container { padding: 24px; width: 100%; display: flex; flex-direction: row; column-gap: 16px; row-gap: 16px; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; }

#content_container.center { justify-content: center; }

#content_container.content_container_stretch { align-items: stretch; justify-content: stretch; }

#content_container h1 { margin-top: 50px; }

#content_container .content_container_column { display: flex; flex-direction: column; row-gap: 16px; }

#content_container .content_container_column .content_container_subrow { display: flex; flex-direction: row; column-gap: 16px; width: 100%; }

#content_container .content_container_column .content_container_subrow > * { flex: 1; /* Each item takes equal share of available space */ }

.flex_right { margin-left: auto; }

.box { display: inline-block; border-radius: 12px; background: white; }

.box > div { padding: 24px; }

.box > div:not(:first-child) { padding-top: 0; }

.box > div.nop { padding: 0 !important; }

.box > div.noy { padding-top: 0 !important; padding-bottom: 0 !important; }

.box > div.nob { padding-bottom: 0 !important; }

.box > div.not { padding-top: 0 !important; }

.box > div.pt { padding-top: 24px  !important; }

.box:not(.box_borderless) { border: 1px solid #e4e4e7; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }

.box.box_no_outside { border-radius: 0; border: none; box-shadow: none; }

.box.box_no_outside > div { padding: 24px 0; }

.box.box_no_outside > div:not(:first-child) { padding-top: 0; }

.box.box_full_width { width: 100%; }

.box.box-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.box .box_title { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

.box .header_icon { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; column-gap: 12px; }

.box .header_icon h2 { margin-right: 24px; user-select: none; }

.box .box_footer { display: flex; flex-direction: row; column-gap: 24px; }

.box .box_footer .button { margin: 0; }

.box h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.6px; line-height: 32px; }

.box h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.6px; line-height: 16px; }

.box .h3_subtitle { font-size: 14px; line-height: 20px; color: #7d7073; margin-top: 8px; }

.box p { line-height: 19px; }

.box p, .box span, .box li { font-size: 14px; color: #09090b; }

.box a { color: #09090b; }

.box .box_divider { width: 100%; height: 1px; border-bottom: 1px solid #e4e4e7; padding: 0; }

.box .box_divider.box_divider_transparent { border-bottom: none; }

.box .box_divider.box_divider_margin { margin: 24px 0; }

.box .box_divider.box_divider_margin_bottom { margin-bottom: 24px; }

.box .box_footer_buttons .button { margin-top: 0 !important; margin-bottom: 0 !important; }

.submenu { width: 100%; height: 52px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0px; row-gap: 0px; padding: 12px 0; border-bottom: 1px solid rgba(228, 228, 231, 0.5); }

.submenu.submenu_lower { border-top: 1px solid rgba(228, 228, 231, 0.5); margin-left: -24px; margin-right: -24px; margin-top: 8px; margin-bottom: 8px; width: calc(100% + 48px); }

.submenu .submenu_button { height: 28px; line-height: 28px; color: #71717a; font-size: 14px; font-weight: 500; padding: 0 16px; border-radius: 100px; user-select: none; }

.submenu .submenu_button.disabled { pointer-events: none; opacity: 0.6; }

.submenu .submenu_button a { text-decoration: none; color: #71717a; transition-property: color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: .15s; }

.submenu .submenu_button a:hover { color: #18181b; }

.submenu .submenu_button.active { background: #f4f4f5; }

.submenu .submenu_button.active a { color: #18181b; }

a { color: #09090b; }