.button_group_horizontal { display: flex; flex-direction: row; column-gap: 12px; }

.button_group_horizontal .button { margin: 0; }

.button_group_vertical { display: flex; flex-direction: column; row-gap: 12px; }

.button_group_vertical .button { margin: 0; }

.button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; column-gap: 8px; height: 36px; padding: 8px 16px; margin-bottom: 24px; margin-top: 24px; user-select: none; border-radius: 6px; border: 1px solid #e4e4e7; background: #18181b; color: white; font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: .15s; }

.button.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.button.hidden { display: none; }

.button.no_margin { margin: 0; }

.button.no_col_gap { column-gap: 0; }

.button.tiny { height: auto !important; width: auto !important; padding: 4px; line-height: 14px; margin: 0; }

.button.auto_width { width: auto !important; }

.button.button_medium { min-width: 200px; }

.button.button_medium_plus { width: 220px; }

.button.button_wide { width: 334px !important; }

.button.button_extra_wide { width: 400px !important; }

.button:not(.button_narrow, .button_medium, .button_medium_plus) { width: 300px; }

.button:hover:not(.disabled) { background-color: rgba(24, 24, 27, 0.9); }

.button span { color: white; }

.button.wide { width: 334px; }

.button.button_right { margin-left: auto !important; align-self: flex-end !important; }

.button.button_left { margin-right: auto !important; align-self: flex-start !important; }

.button.white { color: #18181b; border: 1px solid #e4e4e7; background: white; }

.button.white:hover:not(.disabled) { background: #f4f4f5; }

.button.white span { color: #18181b; }

.button.red { color: #18181b; border: 1px solid #e4e4e7; background: #f44531; }

.button.red:hover:not(.disabled) { background: rgba(244, 69, 49, 0.9); }

.button svg { width: 16px; height: 16px; }

button.btn_general { background: #18181b; border-radius: 6px; border: 1px solid #e4e4e7; font-size: 14px; padding: 8px 16px; line-height: 20px; height: 36px; display: block; color: white; width: 300px; margin-bottom: 24px; margin-top: 24px; cursor: pointer; font-family: "Geist", sans-serif; font-weight: 500; display: flex; flex-direction: row; align-items: center; justify-content: center; column-gap: 8px; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: .15s; }

button.btn_general span { color: white; }

button.btn_general svg { width: 16px; height: 16px; }

button.btn_general:hover { background-color: rgba(24, 24, 27, 0.9); }

button.btn_general.white { color: #18181b; border: 1px solid #e4e4e7; background: white; }

button.btn_general.white:hover { background: #f4f4f5; }

button.btn_general .text { color: #09090b; font-size: 14px; font-weight: 500; display: inline-block; }

button.btn_general.completed { background-color: #17a34a; pointer-events: none; }

.inrow_label { border: 1px solid #e5e5e5; color: #0a0a0a; font-size: 12px !important; font-weight: 500; padding: 2px 8px; border-radius: 8px; line-height: 16px; width: auto; }

.badge { position: relative; padding: 4px 10px 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1.4; display: inline-flex; align-content: center; align-items: center; }

.badge.smaller { font-size: 11px; padding: 2px 6px 2px 6px !important; }

.badge svg { height: 13px; width: 13px; vertical-align: middle; margin-right: 4px; }

.badge.green_dot, .badge.yellow_dot { padding: 4px 10px 4px 20px; }

.badge.green_dot::before, .badge.yellow_dot::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); }

.badge.green_dot { background-color: rgba(76, 175, 80, 0.1); }

.badge.green_dot::before { background-color: #4caf50; }

.badge.yellow_dot { background-color: rgba(255, 193, 7, 0.1); }

.badge.yellow_dot::before { background-color: #ffc107; }

.badge.orange_dot { background-color: rgba(255, 128, 0, 0.1); }

.badge.orange_dot::before { background-color: #ff8000; }

.badge.red_dot { background-color: rgba(220, 38, 37, 0.1); }

.badge.red_dot::before { background-color: #dc2625; }

.badge span.muted { color: #64748b; }

.badge.black { background-color: #0f172a; color: white; }

.badge.blackish { background-color: rgba(15, 23, 42, 0.7); color: white; }

.badge.red { color: #ae0a25; background: rgba(255, 0, 0, 0.3); }

.badge.yellow { color: #8d6d00; background: rgba(253, 196, 0, 0.4); }

.badge.green { color: #4d8c16; background: rgba(89, 162, 25, 0.2); }

.badge.orange { color: #a84a00; background: rgba(255, 128, 0, 0.3); }

.badge.blue { color: #1d5fb0; background: rgba(30, 120, 255, 0.2); }

.badge.purple { color: #7a2db0; background: rgba(150, 70, 230, 0.2); }

.badge.pink { color: #b0155f; background: rgba(240, 50, 140, 0.2); }

.badge.teal { color: #0d7066; background: rgba(20, 180, 160, 0.2); }

.badge.grey { color: #383838; background: rgba(56, 56, 56, 0.2); }

.badge.transparent { background-color: transparent !important; color: #09090b; }

.badge_mini { text-transform: uppercase; font-size: 8px; line-height: 8px; border-radius: 6px; padding: 1px 3px; color: #64748B; background-color: #f1f5f9; display: inline-block; }

.inrow_label.grey, .button.grey { background: #e4e4e7; color: #09090b; }

.inrow_label.black, .button.black { background: #09090b; color: white; }

.inrow_label.green_border, .button.green_border { border: 1px solid  #17a34a !important; }

.inrow_label.green, .button.green { background: rgba(89, 162, 25, 0.2); color: #4d8c16; }

.inrow_label.green_light, .button.green_light { background: rgba(23, 163, 74, 0.1); }

.inrow_label.red_border, .button.red_border { border: 1px solid #FF3B3F !important; }

.inrow_label.red, .button.red { background: #FF3B3F; color: white; }

.inrow_label.red_light, .button.red_light { background: rgba(220, 38, 37, 0.1); }

.inrow_label.orange_border, .button.orange_border { border: 1px solid #ff8000 !important; }

.inrow_label.orange, .button.orange { background: #ff8000; color: white; }

.inrow_label.yellow_border, .button.yellow_border { border: 1px solid #FFF200 !important; }

.inrow_label.yellow, .button.yellow { color: #09090b; background: #FFF200; }

.inrow_label.yellow_light, .button.yellow_light { background: rgba(250, 204, 22, 0.1); }

.inrow_label.blue_border, .button.blue_border { border: 1px solid #47C7FC !important; }

.inrow_label.blue, .button.blue { background: #47C7FC; color: #09090b; }

.inrow_label.blue_light, .button.blue_light { background: rgba(21, 93, 252, 0.1); }

.inrow_label.button:hover.blue, .button.button:hover.blue { background: rgba(21, 93, 252, 0.8); }

.inrow_label.button:hover.green, .button.button:hover.green { background: rgba(23, 163, 74, 0.8); }

.inrow_label.button:hover.orange, .button.button:hover.orange { background: rgba(255, 128, 0, 0.8); color: white; }

.button.green, .button.red, .button.orange, .button.yellow, .button.blue, .button.green_light, .button.blue_light, .button.yellow_light, .button.red_light { border: none; }

.button.yellow:hover { background: rgba(255, 242, 0, 0.99); }