@charset "UTF-8";
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *=* require select2
 *= require_self
 */
/*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300..800&family=Bricolage+Grotesque:opsz,wght@12..96,600..800&display=swap");
.toastify {
  padding: 12px 20px;
  color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
  background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  max-width: calc(50% - 20px);
  z-index: 2147483647;
}

.toastify.on {
  opacity: 1;
}

.toast-close {
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  opacity: 0.4;
  padding: 0 5px;
}

.toastify-right {
  right: 15px;
}

.toastify-left {
  left: 15px;
}

.toastify-top {
  top: -150px;
}

.toastify-bottom {
  bottom: -150px;
}

.toastify-rounded {
  border-radius: 25px;
}

.toastify-avatar {
  width: 1.5em;
  height: 1.5em;
  margin: -7px 5px;
  border-radius: 2px;
}

.toastify-center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  max-width: fit-content;
  max-width: -moz-fit-content;
}

@media only screen and (max-width: 360px) {
  .toastify-right, .toastify-left {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}
/**
 * tom-select.css (v2.1.0)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff;
}

.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}

.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plugin-checkbox_options .option input {
  margin-right: 0.5rem;
}

.plugin-clear_button .ts-control {
  padding-right: calc(1em + 18px) !important;
}

.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 8px;
  right: 2px;
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}

.plugin-clear_button.single .clear-button {
  right: calc(2px + 2rem);
}

.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  border-radius: 3px 3px 0 0;
}

.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}

.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}

.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px 0;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}

.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}

.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
  color: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
  padding-right: 0 !important;
}

.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-left: 1px solid #d0d0d0;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
  margin-left: 6px;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ts-wrapper.plugin-remove_button .item.active .remove {
  border-left-color: #cacaca;
}

.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}

.ts-wrapper.plugin-remove_button.disabled .item .remove {
  border-left-color: white;
}

.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-smoothing: inherit;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: 6px 8px 3px;
}

.full .ts-control {
  background-color: #fff;
}

.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}

.focus .ts-control {
  box-shadow: none;
}

.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}

.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0px solid #d0d0d0;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0px solid #cacaca;
}

.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: #7d7d7d;
  background: white;
  border: 0px solid white;
}

.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}

.ts-control > input::-ms-clear {
  display: none;
}

.ts-control > input:focus {
  outline: none !important;
}

.has-items .ts-control > input {
  margin: 0px 4px !important;
}

.ts-control.rtl {
  text-align: right;
}

.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}

.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}

.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}

.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}

.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}

.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}

.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}

.ts-dropdown .active.create {
  color: #495c68;
}

.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}

.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}

.ts-dropdown .spinner:after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ts-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}


/**
 * Adapted from: https://codepen.io/chriscoyier/pen/uwJjr
 *
 * HTML example:
   <html>
     <head>
       Stuff
     </head>

     <div class="page_wrap">
       <nav>
         Olá
       </nav>

       <body>
         Stuff
       </body>
     </div>

     <footer>
       Adeus
     </footer>
   </html>
 *
 * Usage if you're using the default elements (previous example):
 * @include sticky-footer(30px);
 *
 * Usage if you want to define the elements:
 * @include sticky-footer(30px, '.page', '.footer');
 *
 */
/**
 * Adapted from: https://css-tricks.com/centering-css-complete-guide/, https://stackoverflow.com/questions/38221573/flexbox-vertical-centering-plus-a-sticky-footer
 *
 * HTML example:
   <div class="centered_div">
     <div class="child_centerer">
       Olá.
     </div>
   </div>
 *
 * CSS example:
   .centered_div{
    background-color: $x_primary-main;
    height: 500px;

    @include centerer-flexbox;

    .child_centerer
    {
       background-color: $x_warning-main;
    }

   }
 *
 * Usage if you're using the default elements (previous example):
 * @include centerer;
 *
 * Usage if you want to define the elements:
 * @include centerer(true, false);
 *
 */
/**
 * Adapted from: https://codepen.io/kristyjy/pen/rewVjX
 *
 * HTML example:
   <div class="hamburger hamburger-default"><span></span></div>
 *
 * Usage if you're using the default elements (previous example):
 * @include burger-icon;
 *
 * Usage if you want to define the elements:
 * @include burger-icon(25px,20px,$s_border);
 *
 */
/**
 * This stylesheet has 5 sections:
 *
 * 1.Neutral Colors - Where are defined the neutral colors
 * This colors could be or not in the project palette
 * Usually this colors are shades of white, gray and black but it could also be
 * shades of beige for example
 *
 * 2.Theme Colors - Where are defined the project palette
 *
 * 3.Other Colors - Where are defined other colors you need.
 * - Project-specific & general colors  -
 *
 * 4.Social Networks Colors - Where are defined the colors of social networks
 *
 * 5.Functions - Where are defined other color functions
 *   - Adaptative Color:
 *     Given a certain color, returns black* or white*, depending on the
 * contrast. You can also define the dark and light color that it should return.
 *     eg.:
 *       adaptative-color( theme-color() ) // returns black or white
 *
 *       adaptative-color( theme-color(), neutral-color($key: "600"), neutral-color($key: "200") ) // returns #4F4F4F or #ECECEC
 *
 *   - Color Shade:
 *     Given a certain color and percentage, returns a shade of the color based
 * on the percentage provided and the light and dark color.
 *     Positive percentages mix the color with the light one, while negative
 * percentages mix it with the dark.
 *
 *
 * HOW TO USE:
 * 1. Add a color to a section:
 *    - Choose a section and a name to the color, then add it to the map.merge
 * of the chosen section. Don't forget to add a comma on the end of the
 * previous line.
 *    eg.: $theme-colors: map.merge(
 *           (
 *             ... ,
 *             "name of the color": #COLORHEX / colorname
 *           ),
 *           $theme-colors
 *         );
 *
 * 2. Call the right color
 *    - function-name()
 *      to use the default color of the section
 *    eg.: theme-color() // = theme-color("blue") = #007bff
 *
 *    - function-name("color name")
 *      to use a specific color of the section
 *    eg.: theme-color("secondary") // = #828282
 *
 * 3. Request a Theme Color Shade
 *    You can call for shades of theme color
 *
 *    - Lighter shade (positive percentage)
 *    eg.: theme-color-shade("primary", 30%)
 *
 *    - Darker shade (negative percentage)
 *    eg.: theme-color-shade("primary", -30%)
 *
 *
 * TIP:
 * If it gets easier, you can use comments next to the colors as notes so you
 * can check more easily where you are using this color on the website.
 *
 * eg.: "white": white, //background -- sidebar, container...
 *
 */
/* NEUTRAL COLORS */
/* THEME COLORS */
/* OTHER COLORS */
/* SOCIAL NETWORKS COLORS */
/* FUNCTIONS */
/* Adaptative Color */
/* Color Shade */
/**
 * This stylesheet has 4 sections:
 *
 * 1.Breakpoints
 *
 * 2.Sizes
 *
 * 3.Spacing
 *
 * 4.Animation
 *
 *
 * How to declare variables:
 *   $a_name
 *
 *   a_: Should be the initial of the variable type
 *     b_  –— border
 *     c_  –— color
 *     d_  –— duration
 *     f_  –— font
 *     fw_ –— font-weight
 *     fs_ –— font-size
 *     h_  –— height
 *     w_  –— width
 *     s_  –— size
 *
 *   name: Should be the name of the variable.
 *         For more info on naming variables check the README file
 */
/* BREAKPOINTS */
/* SIZES */
/* SPACING */
/*
 * if you change this values and don't want to change your styles, don't forget
 * to change all the spacer(key_you_have_changed) to spacer(new_key_of_the_old_value)
 *
 * eg.:
 * ---- before changing values
 *   5: 64px                        .class { margin-right: spacer(6); // 152px }
 *   6: 152px
 *
 * ---- after changing values
 *   5: 64px                        .class { margin-right: spacer(6); //  72px }
 *   6: 72px                        -- you need to change the 6 to a 7 if you
 *   7: 152px                          want to keep the 152px margin-right    --
 *                                  .class { margin-right: spacer(7); // 152px }
 */
/* ANIMATION */
/* RADIUS */
/*
 * if you change this values and don't want to change your styles, don't forget
 * to change all the radius(key_you_have_changed) to radius(new_key_of_the_old_value)
 *
 * eg.:
 * ---- before changing values
 *   3: 10px                        .class { border-radius: radius(4); // 20px }
 *   4: 20px
 *
 * ---- after changing values
 *   3: 10px                        .class { border-radius: radius(4); // 16px }
 *   4: 16px                        -- you need to change the 4 to a 5 if you
 *   5: 20px                           want to keep the 20px border-radius    --
 *                                  .class { border-radius: radius(5); // 20px }
 */
/* MARGIN */
.m-0 {
  margin: 0 !important;
}

.m-x-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.m-y-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

/* PADDING */
.p-0 {
  padding: 0 !important;
}

.p-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-y-0 {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.p-t-0 {
  padding-top: 0 !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

/* GAP */
.gap-0 {
  gap: 0 !important;
}

.gap-y-0 {
  gap: 0 0 !important;
}

.gap-x-0 {
  gap: 0 0 !important;
}

.gap-0-0 {
  gap: 0 0 !important;
}

.gap-0-1 {
  gap: 0 8px !important;
}

.gap-0-2 {
  gap: 0 16px !important;
}

.gap-0-3 {
  gap: 0 24px !important;
}

.gap-0-4 {
  gap: 0 32px !important;
}

.gap-0-5 {
  gap: 0 40px !important;
}

.gap-0-6 {
  gap: 0 48px !important;
}

.gap-0-7 {
  gap: 0 56px !important;
}

.gap-0-8 {
  gap: 0 64px !important;
}

.gap-0-9 {
  gap: 0 72px !important;
}

.gap-0-10 {
  gap: 0 80px !important;
}

.gap-0-11 {
  gap: 0 88px !important;
}

.gap-0-12 {
  gap: 0 96px !important;
}

.gap-0-13 {
  gap: 0 104px !important;
}

.gap-0-auto {
  gap: 0 auto !important;
}

/* LETTER SPACING */
.letter-spacing-0 {
  letter-spacing: 0 !important;
}

/* MARGIN */
.m-1 {
  margin: 8px !important;
}

.m-x-1 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.m-y-1 {
  margin-bottom: 8px !important;
  margin-top: 8px !important;
}

.m-t-1 {
  margin-top: 8px !important;
}

.m-b-1 {
  margin-bottom: 8px !important;
}

.m-l-1 {
  margin-left: 8px !important;
}

.m-r-1 {
  margin-right: 8px !important;
}

/* PADDING */
.p-1 {
  padding: 8px !important;
}

.p-x-1 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.p-y-1 {
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}

.p-t-1 {
  padding-top: 8px !important;
}

.p-b-1 {
  padding-bottom: 8px !important;
}

.p-l-1 {
  padding-left: 8px !important;
}

.p-r-1 {
  padding-right: 8px !important;
}

/* GAP */
.gap-1 {
  gap: 8px !important;
}

.gap-y-1 {
  gap: 8px 0 !important;
}

.gap-x-1 {
  gap: 0 8px !important;
}

.gap-1-0 {
  gap: 8px 0 !important;
}

.gap-1-1 {
  gap: 8px 8px !important;
}

.gap-1-2 {
  gap: 8px 16px !important;
}

.gap-1-3 {
  gap: 8px 24px !important;
}

.gap-1-4 {
  gap: 8px 32px !important;
}

.gap-1-5 {
  gap: 8px 40px !important;
}

.gap-1-6 {
  gap: 8px 48px !important;
}

.gap-1-7 {
  gap: 8px 56px !important;
}

.gap-1-8 {
  gap: 8px 64px !important;
}

.gap-1-9 {
  gap: 8px 72px !important;
}

.gap-1-10 {
  gap: 8px 80px !important;
}

.gap-1-11 {
  gap: 8px 88px !important;
}

.gap-1-12 {
  gap: 8px 96px !important;
}

.gap-1-13 {
  gap: 8px 104px !important;
}

.gap-1-auto {
  gap: 8px auto !important;
}

/* LETTER SPACING */
.letter-spacing-1 {
  letter-spacing: 0.4px !important;
}

/* MARGIN */
.m-2 {
  margin: 16px !important;
}

.m-x-2 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.m-y-2 {
  margin-bottom: 16px !important;
  margin-top: 16px !important;
}

.m-t-2 {
  margin-top: 16px !important;
}

.m-b-2 {
  margin-bottom: 16px !important;
}

.m-l-2 {
  margin-left: 16px !important;
}

.m-r-2 {
  margin-right: 16px !important;
}

/* PADDING */
.p-2 {
  padding: 16px !important;
}

.p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.p-y-2 {
  padding-bottom: 16px !important;
  padding-top: 16px !important;
}

.p-t-2 {
  padding-top: 16px !important;
}

.p-b-2 {
  padding-bottom: 16px !important;
}

.p-l-2 {
  padding-left: 16px !important;
}

.p-r-2 {
  padding-right: 16px !important;
}

/* GAP */
.gap-2 {
  gap: 16px !important;
}

.gap-y-2 {
  gap: 16px 0 !important;
}

.gap-x-2 {
  gap: 0 16px !important;
}

.gap-2-0 {
  gap: 16px 0 !important;
}

.gap-2-1 {
  gap: 16px 8px !important;
}

.gap-2-2 {
  gap: 16px 16px !important;
}

.gap-2-3 {
  gap: 16px 24px !important;
}

.gap-2-4 {
  gap: 16px 32px !important;
}

.gap-2-5 {
  gap: 16px 40px !important;
}

.gap-2-6 {
  gap: 16px 48px !important;
}

.gap-2-7 {
  gap: 16px 56px !important;
}

.gap-2-8 {
  gap: 16px 64px !important;
}

.gap-2-9 {
  gap: 16px 72px !important;
}

.gap-2-10 {
  gap: 16px 80px !important;
}

.gap-2-11 {
  gap: 16px 88px !important;
}

.gap-2-12 {
  gap: 16px 96px !important;
}

.gap-2-13 {
  gap: 16px 104px !important;
}

.gap-2-auto {
  gap: 16px auto !important;
}

/* LETTER SPACING */
.letter-spacing-2 {
  letter-spacing: 0.8px !important;
}

/* MARGIN */
.m-3 {
  margin: 24px !important;
}

.m-x-3 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.m-y-3 {
  margin-bottom: 24px !important;
  margin-top: 24px !important;
}

.m-t-3 {
  margin-top: 24px !important;
}

.m-b-3 {
  margin-bottom: 24px !important;
}

.m-l-3 {
  margin-left: 24px !important;
}

.m-r-3 {
  margin-right: 24px !important;
}

/* PADDING */
.p-3 {
  padding: 24px !important;
}

.p-x-3 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.p-y-3 {
  padding-bottom: 24px !important;
  padding-top: 24px !important;
}

.p-t-3 {
  padding-top: 24px !important;
}

.p-b-3 {
  padding-bottom: 24px !important;
}

.p-l-3 {
  padding-left: 24px !important;
}

.p-r-3 {
  padding-right: 24px !important;
}

/* GAP */
.gap-3 {
  gap: 24px !important;
}

.gap-y-3 {
  gap: 24px 0 !important;
}

.gap-x-3 {
  gap: 0 24px !important;
}

.gap-3-0 {
  gap: 24px 0 !important;
}

.gap-3-1 {
  gap: 24px 8px !important;
}

.gap-3-2 {
  gap: 24px 16px !important;
}

.gap-3-3 {
  gap: 24px 24px !important;
}

.gap-3-4 {
  gap: 24px 32px !important;
}

.gap-3-5 {
  gap: 24px 40px !important;
}

.gap-3-6 {
  gap: 24px 48px !important;
}

.gap-3-7 {
  gap: 24px 56px !important;
}

.gap-3-8 {
  gap: 24px 64px !important;
}

.gap-3-9 {
  gap: 24px 72px !important;
}

.gap-3-10 {
  gap: 24px 80px !important;
}

.gap-3-11 {
  gap: 24px 88px !important;
}

.gap-3-12 {
  gap: 24px 96px !important;
}

.gap-3-13 {
  gap: 24px 104px !important;
}

.gap-3-auto {
  gap: 24px auto !important;
}

/* LETTER SPACING */
.letter-spacing-3 {
  letter-spacing: 1.2px !important;
}

/* MARGIN */
.m-4 {
  margin: 32px !important;
}

.m-x-4 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.m-y-4 {
  margin-bottom: 32px !important;
  margin-top: 32px !important;
}

.m-t-4 {
  margin-top: 32px !important;
}

.m-b-4 {
  margin-bottom: 32px !important;
}

.m-l-4 {
  margin-left: 32px !important;
}

.m-r-4 {
  margin-right: 32px !important;
}

/* PADDING */
.p-4 {
  padding: 32px !important;
}

.p-x-4 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.p-y-4 {
  padding-bottom: 32px !important;
  padding-top: 32px !important;
}

.p-t-4 {
  padding-top: 32px !important;
}

.p-b-4 {
  padding-bottom: 32px !important;
}

.p-l-4 {
  padding-left: 32px !important;
}

.p-r-4 {
  padding-right: 32px !important;
}

/* GAP */
.gap-4 {
  gap: 32px !important;
}

.gap-y-4 {
  gap: 32px 0 !important;
}

.gap-x-4 {
  gap: 0 32px !important;
}

.gap-4-0 {
  gap: 32px 0 !important;
}

.gap-4-1 {
  gap: 32px 8px !important;
}

.gap-4-2 {
  gap: 32px 16px !important;
}

.gap-4-3 {
  gap: 32px 24px !important;
}

.gap-4-4 {
  gap: 32px 32px !important;
}

.gap-4-5 {
  gap: 32px 40px !important;
}

.gap-4-6 {
  gap: 32px 48px !important;
}

.gap-4-7 {
  gap: 32px 56px !important;
}

.gap-4-8 {
  gap: 32px 64px !important;
}

.gap-4-9 {
  gap: 32px 72px !important;
}

.gap-4-10 {
  gap: 32px 80px !important;
}

.gap-4-11 {
  gap: 32px 88px !important;
}

.gap-4-12 {
  gap: 32px 96px !important;
}

.gap-4-13 {
  gap: 32px 104px !important;
}

.gap-4-auto {
  gap: 32px auto !important;
}

/* LETTER SPACING */
.letter-spacing-4 {
  letter-spacing: 1.6px !important;
}

/* MARGIN */
.m-5 {
  margin: 40px !important;
}

.m-x-5 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.m-y-5 {
  margin-bottom: 40px !important;
  margin-top: 40px !important;
}

.m-t-5 {
  margin-top: 40px !important;
}

.m-b-5 {
  margin-bottom: 40px !important;
}

.m-l-5 {
  margin-left: 40px !important;
}

.m-r-5 {
  margin-right: 40px !important;
}

/* PADDING */
.p-5 {
  padding: 40px !important;
}

.p-x-5 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.p-y-5 {
  padding-bottom: 40px !important;
  padding-top: 40px !important;
}

.p-t-5 {
  padding-top: 40px !important;
}

.p-b-5 {
  padding-bottom: 40px !important;
}

.p-l-5 {
  padding-left: 40px !important;
}

.p-r-5 {
  padding-right: 40px !important;
}

/* GAP */
.gap-5 {
  gap: 40px !important;
}

.gap-y-5 {
  gap: 40px 0 !important;
}

.gap-x-5 {
  gap: 0 40px !important;
}

.gap-5-0 {
  gap: 40px 0 !important;
}

.gap-5-1 {
  gap: 40px 8px !important;
}

.gap-5-2 {
  gap: 40px 16px !important;
}

.gap-5-3 {
  gap: 40px 24px !important;
}

.gap-5-4 {
  gap: 40px 32px !important;
}

.gap-5-5 {
  gap: 40px 40px !important;
}

.gap-5-6 {
  gap: 40px 48px !important;
}

.gap-5-7 {
  gap: 40px 56px !important;
}

.gap-5-8 {
  gap: 40px 64px !important;
}

.gap-5-9 {
  gap: 40px 72px !important;
}

.gap-5-10 {
  gap: 40px 80px !important;
}

.gap-5-11 {
  gap: 40px 88px !important;
}

.gap-5-12 {
  gap: 40px 96px !important;
}

.gap-5-13 {
  gap: 40px 104px !important;
}

.gap-5-auto {
  gap: 40px auto !important;
}

/* LETTER SPACING */
.letter-spacing-5 {
  letter-spacing: 2px !important;
}

/* MARGIN */
.m-6 {
  margin: 48px !important;
}

.m-x-6 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.m-y-6 {
  margin-bottom: 48px !important;
  margin-top: 48px !important;
}

.m-t-6 {
  margin-top: 48px !important;
}

.m-b-6 {
  margin-bottom: 48px !important;
}

.m-l-6 {
  margin-left: 48px !important;
}

.m-r-6 {
  margin-right: 48px !important;
}

/* PADDING */
.p-6 {
  padding: 48px !important;
}

.p-x-6 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.p-y-6 {
  padding-bottom: 48px !important;
  padding-top: 48px !important;
}

.p-t-6 {
  padding-top: 48px !important;
}

.p-b-6 {
  padding-bottom: 48px !important;
}

.p-l-6 {
  padding-left: 48px !important;
}

.p-r-6 {
  padding-right: 48px !important;
}

/* GAP */
.gap-6 {
  gap: 48px !important;
}

.gap-y-6 {
  gap: 48px 0 !important;
}

.gap-x-6 {
  gap: 0 48px !important;
}

.gap-6-0 {
  gap: 48px 0 !important;
}

.gap-6-1 {
  gap: 48px 8px !important;
}

.gap-6-2 {
  gap: 48px 16px !important;
}

.gap-6-3 {
  gap: 48px 24px !important;
}

.gap-6-4 {
  gap: 48px 32px !important;
}

.gap-6-5 {
  gap: 48px 40px !important;
}

.gap-6-6 {
  gap: 48px 48px !important;
}

.gap-6-7 {
  gap: 48px 56px !important;
}

.gap-6-8 {
  gap: 48px 64px !important;
}

.gap-6-9 {
  gap: 48px 72px !important;
}

.gap-6-10 {
  gap: 48px 80px !important;
}

.gap-6-11 {
  gap: 48px 88px !important;
}

.gap-6-12 {
  gap: 48px 96px !important;
}

.gap-6-13 {
  gap: 48px 104px !important;
}

.gap-6-auto {
  gap: 48px auto !important;
}

/* LETTER SPACING */
.letter-spacing-6 {
  letter-spacing: 2.4px !important;
}

/* MARGIN */
.m-7 {
  margin: 56px !important;
}

.m-x-7 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}

.m-y-7 {
  margin-bottom: 56px !important;
  margin-top: 56px !important;
}

.m-t-7 {
  margin-top: 56px !important;
}

.m-b-7 {
  margin-bottom: 56px !important;
}

.m-l-7 {
  margin-left: 56px !important;
}

.m-r-7 {
  margin-right: 56px !important;
}

/* PADDING */
.p-7 {
  padding: 56px !important;
}

.p-x-7 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}

.p-y-7 {
  padding-bottom: 56px !important;
  padding-top: 56px !important;
}

.p-t-7 {
  padding-top: 56px !important;
}

.p-b-7 {
  padding-bottom: 56px !important;
}

.p-l-7 {
  padding-left: 56px !important;
}

.p-r-7 {
  padding-right: 56px !important;
}

/* GAP */
.gap-7 {
  gap: 56px !important;
}

.gap-y-7 {
  gap: 56px 0 !important;
}

.gap-x-7 {
  gap: 0 56px !important;
}

.gap-7-0 {
  gap: 56px 0 !important;
}

.gap-7-1 {
  gap: 56px 8px !important;
}

.gap-7-2 {
  gap: 56px 16px !important;
}

.gap-7-3 {
  gap: 56px 24px !important;
}

.gap-7-4 {
  gap: 56px 32px !important;
}

.gap-7-5 {
  gap: 56px 40px !important;
}

.gap-7-6 {
  gap: 56px 48px !important;
}

.gap-7-7 {
  gap: 56px 56px !important;
}

.gap-7-8 {
  gap: 56px 64px !important;
}

.gap-7-9 {
  gap: 56px 72px !important;
}

.gap-7-10 {
  gap: 56px 80px !important;
}

.gap-7-11 {
  gap: 56px 88px !important;
}

.gap-7-12 {
  gap: 56px 96px !important;
}

.gap-7-13 {
  gap: 56px 104px !important;
}

.gap-7-auto {
  gap: 56px auto !important;
}

/* LETTER SPACING */
.letter-spacing-7 {
  letter-spacing: 2.8px !important;
}

/* MARGIN */
.m-8 {
  margin: 64px !important;
}

.m-x-8 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.m-y-8 {
  margin-bottom: 64px !important;
  margin-top: 64px !important;
}

.m-t-8 {
  margin-top: 64px !important;
}

.m-b-8 {
  margin-bottom: 64px !important;
}

.m-l-8 {
  margin-left: 64px !important;
}

.m-r-8 {
  margin-right: 64px !important;
}

/* PADDING */
.p-8 {
  padding: 64px !important;
}

.p-x-8 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.p-y-8 {
  padding-bottom: 64px !important;
  padding-top: 64px !important;
}

.p-t-8 {
  padding-top: 64px !important;
}

.p-b-8 {
  padding-bottom: 64px !important;
}

.p-l-8 {
  padding-left: 64px !important;
}

.p-r-8 {
  padding-right: 64px !important;
}

/* GAP */
.gap-8 {
  gap: 64px !important;
}

.gap-y-8 {
  gap: 64px 0 !important;
}

.gap-x-8 {
  gap: 0 64px !important;
}

.gap-8-0 {
  gap: 64px 0 !important;
}

.gap-8-1 {
  gap: 64px 8px !important;
}

.gap-8-2 {
  gap: 64px 16px !important;
}

.gap-8-3 {
  gap: 64px 24px !important;
}

.gap-8-4 {
  gap: 64px 32px !important;
}

.gap-8-5 {
  gap: 64px 40px !important;
}

.gap-8-6 {
  gap: 64px 48px !important;
}

.gap-8-7 {
  gap: 64px 56px !important;
}

.gap-8-8 {
  gap: 64px 64px !important;
}

.gap-8-9 {
  gap: 64px 72px !important;
}

.gap-8-10 {
  gap: 64px 80px !important;
}

.gap-8-11 {
  gap: 64px 88px !important;
}

.gap-8-12 {
  gap: 64px 96px !important;
}

.gap-8-13 {
  gap: 64px 104px !important;
}

.gap-8-auto {
  gap: 64px auto !important;
}

/* LETTER SPACING */
.letter-spacing-8 {
  letter-spacing: 3.2px !important;
}

/* MARGIN */
.m-9 {
  margin: 72px !important;
}

.m-x-9 {
  margin-left: 72px !important;
  margin-right: 72px !important;
}

.m-y-9 {
  margin-bottom: 72px !important;
  margin-top: 72px !important;
}

.m-t-9 {
  margin-top: 72px !important;
}

.m-b-9 {
  margin-bottom: 72px !important;
}

.m-l-9 {
  margin-left: 72px !important;
}

.m-r-9 {
  margin-right: 72px !important;
}

/* PADDING */
.p-9 {
  padding: 72px !important;
}

.p-x-9 {
  padding-left: 72px !important;
  padding-right: 72px !important;
}

.p-y-9 {
  padding-bottom: 72px !important;
  padding-top: 72px !important;
}

.p-t-9 {
  padding-top: 72px !important;
}

.p-b-9 {
  padding-bottom: 72px !important;
}

.p-l-9 {
  padding-left: 72px !important;
}

.p-r-9 {
  padding-right: 72px !important;
}

/* GAP */
.gap-9 {
  gap: 72px !important;
}

.gap-y-9 {
  gap: 72px 0 !important;
}

.gap-x-9 {
  gap: 0 72px !important;
}

.gap-9-0 {
  gap: 72px 0 !important;
}

.gap-9-1 {
  gap: 72px 8px !important;
}

.gap-9-2 {
  gap: 72px 16px !important;
}

.gap-9-3 {
  gap: 72px 24px !important;
}

.gap-9-4 {
  gap: 72px 32px !important;
}

.gap-9-5 {
  gap: 72px 40px !important;
}

.gap-9-6 {
  gap: 72px 48px !important;
}

.gap-9-7 {
  gap: 72px 56px !important;
}

.gap-9-8 {
  gap: 72px 64px !important;
}

.gap-9-9 {
  gap: 72px 72px !important;
}

.gap-9-10 {
  gap: 72px 80px !important;
}

.gap-9-11 {
  gap: 72px 88px !important;
}

.gap-9-12 {
  gap: 72px 96px !important;
}

.gap-9-13 {
  gap: 72px 104px !important;
}

.gap-9-auto {
  gap: 72px auto !important;
}

/* LETTER SPACING */
.letter-spacing-9 {
  letter-spacing: 3.6px !important;
}

/* MARGIN */
.m-10 {
  margin: 80px !important;
}

.m-x-10 {
  margin-left: 80px !important;
  margin-right: 80px !important;
}

.m-y-10 {
  margin-bottom: 80px !important;
  margin-top: 80px !important;
}

.m-t-10 {
  margin-top: 80px !important;
}

.m-b-10 {
  margin-bottom: 80px !important;
}

.m-l-10 {
  margin-left: 80px !important;
}

.m-r-10 {
  margin-right: 80px !important;
}

/* PADDING */
.p-10 {
  padding: 80px !important;
}

.p-x-10 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.p-y-10 {
  padding-bottom: 80px !important;
  padding-top: 80px !important;
}

.p-t-10 {
  padding-top: 80px !important;
}

.p-b-10 {
  padding-bottom: 80px !important;
}

.p-l-10 {
  padding-left: 80px !important;
}

.p-r-10 {
  padding-right: 80px !important;
}

/* GAP */
.gap-10 {
  gap: 80px !important;
}

.gap-y-10 {
  gap: 80px 0 !important;
}

.gap-x-10 {
  gap: 0 80px !important;
}

.gap-10-0 {
  gap: 80px 0 !important;
}

.gap-10-1 {
  gap: 80px 8px !important;
}

.gap-10-2 {
  gap: 80px 16px !important;
}

.gap-10-3 {
  gap: 80px 24px !important;
}

.gap-10-4 {
  gap: 80px 32px !important;
}

.gap-10-5 {
  gap: 80px 40px !important;
}

.gap-10-6 {
  gap: 80px 48px !important;
}

.gap-10-7 {
  gap: 80px 56px !important;
}

.gap-10-8 {
  gap: 80px 64px !important;
}

.gap-10-9 {
  gap: 80px 72px !important;
}

.gap-10-10 {
  gap: 80px 80px !important;
}

.gap-10-11 {
  gap: 80px 88px !important;
}

.gap-10-12 {
  gap: 80px 96px !important;
}

.gap-10-13 {
  gap: 80px 104px !important;
}

.gap-10-auto {
  gap: 80px auto !important;
}

/* LETTER SPACING */
.letter-spacing-10 {
  letter-spacing: 4px !important;
}

/* MARGIN */
.m-11 {
  margin: 88px !important;
}

.m-x-11 {
  margin-left: 88px !important;
  margin-right: 88px !important;
}

.m-y-11 {
  margin-bottom: 88px !important;
  margin-top: 88px !important;
}

.m-t-11 {
  margin-top: 88px !important;
}

.m-b-11 {
  margin-bottom: 88px !important;
}

.m-l-11 {
  margin-left: 88px !important;
}

.m-r-11 {
  margin-right: 88px !important;
}

/* PADDING */
.p-11 {
  padding: 88px !important;
}

.p-x-11 {
  padding-left: 88px !important;
  padding-right: 88px !important;
}

.p-y-11 {
  padding-bottom: 88px !important;
  padding-top: 88px !important;
}

.p-t-11 {
  padding-top: 88px !important;
}

.p-b-11 {
  padding-bottom: 88px !important;
}

.p-l-11 {
  padding-left: 88px !important;
}

.p-r-11 {
  padding-right: 88px !important;
}

/* GAP */
.gap-11 {
  gap: 88px !important;
}

.gap-y-11 {
  gap: 88px 0 !important;
}

.gap-x-11 {
  gap: 0 88px !important;
}

.gap-11-0 {
  gap: 88px 0 !important;
}

.gap-11-1 {
  gap: 88px 8px !important;
}

.gap-11-2 {
  gap: 88px 16px !important;
}

.gap-11-3 {
  gap: 88px 24px !important;
}

.gap-11-4 {
  gap: 88px 32px !important;
}

.gap-11-5 {
  gap: 88px 40px !important;
}

.gap-11-6 {
  gap: 88px 48px !important;
}

.gap-11-7 {
  gap: 88px 56px !important;
}

.gap-11-8 {
  gap: 88px 64px !important;
}

.gap-11-9 {
  gap: 88px 72px !important;
}

.gap-11-10 {
  gap: 88px 80px !important;
}

.gap-11-11 {
  gap: 88px 88px !important;
}

.gap-11-12 {
  gap: 88px 96px !important;
}

.gap-11-13 {
  gap: 88px 104px !important;
}

.gap-11-auto {
  gap: 88px auto !important;
}

/* LETTER SPACING */
.letter-spacing-11 {
  letter-spacing: 4.4px !important;
}

/* MARGIN */
.m-12 {
  margin: 96px !important;
}

.m-x-12 {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.m-y-12 {
  margin-bottom: 96px !important;
  margin-top: 96px !important;
}

.m-t-12 {
  margin-top: 96px !important;
}

.m-b-12 {
  margin-bottom: 96px !important;
}

.m-l-12 {
  margin-left: 96px !important;
}

.m-r-12 {
  margin-right: 96px !important;
}

/* PADDING */
.p-12 {
  padding: 96px !important;
}

.p-x-12 {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.p-y-12 {
  padding-bottom: 96px !important;
  padding-top: 96px !important;
}

.p-t-12 {
  padding-top: 96px !important;
}

.p-b-12 {
  padding-bottom: 96px !important;
}

.p-l-12 {
  padding-left: 96px !important;
}

.p-r-12 {
  padding-right: 96px !important;
}

/* GAP */
.gap-12 {
  gap: 96px !important;
}

.gap-y-12 {
  gap: 96px 0 !important;
}

.gap-x-12 {
  gap: 0 96px !important;
}

.gap-12-0 {
  gap: 96px 0 !important;
}

.gap-12-1 {
  gap: 96px 8px !important;
}

.gap-12-2 {
  gap: 96px 16px !important;
}

.gap-12-3 {
  gap: 96px 24px !important;
}

.gap-12-4 {
  gap: 96px 32px !important;
}

.gap-12-5 {
  gap: 96px 40px !important;
}

.gap-12-6 {
  gap: 96px 48px !important;
}

.gap-12-7 {
  gap: 96px 56px !important;
}

.gap-12-8 {
  gap: 96px 64px !important;
}

.gap-12-9 {
  gap: 96px 72px !important;
}

.gap-12-10 {
  gap: 96px 80px !important;
}

.gap-12-11 {
  gap: 96px 88px !important;
}

.gap-12-12 {
  gap: 96px 96px !important;
}

.gap-12-13 {
  gap: 96px 104px !important;
}

.gap-12-auto {
  gap: 96px auto !important;
}

/* LETTER SPACING */
.letter-spacing-12 {
  letter-spacing: 4.8px !important;
}

/* MARGIN */
.m-13 {
  margin: 104px !important;
}

.m-x-13 {
  margin-left: 104px !important;
  margin-right: 104px !important;
}

.m-y-13 {
  margin-bottom: 104px !important;
  margin-top: 104px !important;
}

.m-t-13 {
  margin-top: 104px !important;
}

.m-b-13 {
  margin-bottom: 104px !important;
}

.m-l-13 {
  margin-left: 104px !important;
}

.m-r-13 {
  margin-right: 104px !important;
}

/* PADDING */
.p-13 {
  padding: 104px !important;
}

.p-x-13 {
  padding-left: 104px !important;
  padding-right: 104px !important;
}

.p-y-13 {
  padding-bottom: 104px !important;
  padding-top: 104px !important;
}

.p-t-13 {
  padding-top: 104px !important;
}

.p-b-13 {
  padding-bottom: 104px !important;
}

.p-l-13 {
  padding-left: 104px !important;
}

.p-r-13 {
  padding-right: 104px !important;
}

/* GAP */
.gap-13 {
  gap: 104px !important;
}

.gap-y-13 {
  gap: 104px 0 !important;
}

.gap-x-13 {
  gap: 0 104px !important;
}

.gap-13-0 {
  gap: 104px 0 !important;
}

.gap-13-1 {
  gap: 104px 8px !important;
}

.gap-13-2 {
  gap: 104px 16px !important;
}

.gap-13-3 {
  gap: 104px 24px !important;
}

.gap-13-4 {
  gap: 104px 32px !important;
}

.gap-13-5 {
  gap: 104px 40px !important;
}

.gap-13-6 {
  gap: 104px 48px !important;
}

.gap-13-7 {
  gap: 104px 56px !important;
}

.gap-13-8 {
  gap: 104px 64px !important;
}

.gap-13-9 {
  gap: 104px 72px !important;
}

.gap-13-10 {
  gap: 104px 80px !important;
}

.gap-13-11 {
  gap: 104px 88px !important;
}

.gap-13-12 {
  gap: 104px 96px !important;
}

.gap-13-13 {
  gap: 104px 104px !important;
}

.gap-13-auto {
  gap: 104px auto !important;
}

/* LETTER SPACING */
.letter-spacing-13 {
  letter-spacing: 5.2px !important;
}

/* MARGIN */
.m-auto {
  margin: auto !important;
}

.m-x-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.m-y-auto {
  margin-bottom: auto !important;
  margin-top: auto !important;
}

.m-t-auto {
  margin-top: auto !important;
}

.m-b-auto {
  margin-bottom: auto !important;
}

.m-l-auto {
  margin-left: auto !important;
}

.m-r-auto {
  margin-right: auto !important;
}

/* PADDING */
.p-auto {
  padding: auto !important;
}

.p-x-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.p-y-auto {
  padding-bottom: auto !important;
  padding-top: auto !important;
}

.p-t-auto {
  padding-top: auto !important;
}

.p-b-auto {
  padding-bottom: auto !important;
}

.p-l-auto {
  padding-left: auto !important;
}

.p-r-auto {
  padding-right: auto !important;
}

/* GAP */
.gap-auto {
  gap: auto !important;
}

.gap-y-auto {
  gap: auto 0 !important;
}

.gap-x-auto {
  gap: 0 auto !important;
}

.gap-auto-0 {
  gap: auto 0 !important;
}

.gap-auto-1 {
  gap: auto 8px !important;
}

.gap-auto-2 {
  gap: auto 16px !important;
}

.gap-auto-3 {
  gap: auto 24px !important;
}

.gap-auto-4 {
  gap: auto 32px !important;
}

.gap-auto-5 {
  gap: auto 40px !important;
}

.gap-auto-6 {
  gap: auto 48px !important;
}

.gap-auto-7 {
  gap: auto 56px !important;
}

.gap-auto-8 {
  gap: auto 64px !important;
}

.gap-auto-9 {
  gap: auto 72px !important;
}

.gap-auto-10 {
  gap: auto 80px !important;
}

.gap-auto-11 {
  gap: auto 88px !important;
}

.gap-auto-12 {
  gap: auto 96px !important;
}

.gap-auto-13 {
  gap: auto 104px !important;
}

.gap-auto-auto {
  gap: auto auto !important;
}

/* LETTER SPACING */
.letter-spacing-auto {
  letter-spacing: calc(auto * 0.05) !important;
}

.d-grid {
  display: grid;
  gap: 16px;
}

/*  - USAGE -
    Use .d-grid.grid--2 on divs that always have 2 columns
    Add .grid--md-4 to some div that have 4 columns from breakpoints bigger than md (inclusive)

    You can use numbers present in $grid-n-columns, or add custom ones to the list.
*/
.grid--1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid--span-1 {
  grid-column-end: span 1;
}

.grid--start-1 {
  grid-column-start: 1;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-1 {
  grid-column-start: -2;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--span-2 {
  grid-column-end: span 2;
}

.grid--start-2 {
  grid-column-start: 2;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-2 {
  grid-column-start: -3;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--span-3 {
  grid-column-end: span 3;
}

.grid--start-3 {
  grid-column-start: 3;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-3 {
  grid-column-start: -4;
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--span-4 {
  grid-column-end: span 4;
}

.grid--start-4 {
  grid-column-start: 4;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-4 {
  grid-column-start: -5;
}

.grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid--span-5 {
  grid-column-end: span 5;
}

.grid--start-5 {
  grid-column-start: 5;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-5 {
  grid-column-start: -6;
}

.grid--6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid--span-6 {
  grid-column-end: span 6;
}

.grid--start-6 {
  grid-column-start: 6;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-6 {
  grid-column-start: -7;
}

.grid--7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid--span-7 {
  grid-column-end: span 7;
}

.grid--start-7 {
  grid-column-start: 7;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-7 {
  grid-column-start: -8;
}

.grid--8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid--span-8 {
  grid-column-end: span 8;
}

.grid--start-8 {
  grid-column-start: 8;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-8 {
  grid-column-start: -9;
}

.grid--9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid--span-9 {
  grid-column-end: span 9;
}

.grid--start-9 {
  grid-column-start: 9;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-9 {
  grid-column-start: -10;
}

.grid--10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid--span-10 {
  grid-column-end: span 10;
}

.grid--start-10 {
  grid-column-start: 10;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-10 {
  grid-column-start: -11;
}

.grid--11 {
  grid-template-columns: repeat(11, 1fr);
}

.grid--span-11 {
  grid-column-end: span 11;
}

.grid--start-11 {
  grid-column-start: 11;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-11 {
  grid-column-start: -12;
}

.grid--12 {
  grid-template-columns: repeat(12, 1fr);
}

.grid--span-12 {
  grid-column-end: span 12;
}

.grid--start-12 {
  grid-column-start: 12;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-12 {
  grid-column-start: -13;
}

/**
 * This stylesheet has 4 sections:
 *
 * 1.Ratios - Where are defined several default ratios
 *   You can use those with this functon:
 *     - ratio-by-name()
 *       to use the default ratio (1.125)
 *       eg.: ratio-by-name(minor-third) // = 1.2
 *
 * 2.Default Settings - Where are defined the default base, breakpoints
 * and ratios for each breakpoint
 *
 * 3.Functions - Where are defined functions that we need to calculate
 * the size taking into account the base and the breakpoint ratio
 *
 * 4.Mixin - Where are defined the mixin
 *   This mixin allows you to set a step and it automatically calculates
 * the sizes for all the defined breakpoints taking into account the ratio
 * of each breakpoint
 *
 *
 * HOW TO USE:
 * 1. Set your own settings ON YOUR FONTS FILE
 *    or just use the defaults (in this case, you can skip this step)
 *    eg.: $scale: (
 *           base: 16px,
 *           breakpoints: (
 *             $b_initial: ratio-by-name(),
 *             $b_very-small: 1.025,
 *             $b_small: ratio-by-name()
 *           )
 *         );
 *
 * 2. Include the mixin in your class
 *    eg.: h1 {
 *           @include font-scale(6);
 *         }
 */
/* stylelint-disable number-max-precision */
/* RATIOS */
/* DEFAULT SETTINGS */
/* FUNCTIONS */
/* Calculate pow -- this is needed in the font-scale-get-size function */
/* Calculate font-size for a specific step and breakpoint */
/* MIXIN
 * - This will define the font-size for every breakpoint you set in $scale
 */
/**
 * This variables are only assigned to FONT classes.
 *
 * The accent colors of the project are already assigned to internal variables
 * in the colors stylesheet of the styleguide
 * (e.g.: theme-color("primary"), neutral-color("lightest"),...).
 *
 *
 * The name of this variables should follow this rule:
 * $c_nav-text
 *
 *
 * The variable begins with the initial of the variable type c (color),
 * followed by the element, and the section of the element where will be applied
 * the color.
 *
 * $c_nav
 *
 * In this case this variable represents the background color of the element.
 */
/* TEXT COLORS */
/* stylelint-disable selector-no-vendor-prefix */
/**
 * Sheet to import fonts, define typography variables,
 * configure text styles, and provide typography utilities.
 *
 * Structure of the file
 *
 * 1. Fonts
 *    — Import font families and define their Sass variables.
 *    — Provide the ff() function to retrieve the mapped font family.
 *    — Configure the --f-family variable through font-family (.ff-*) utility classes.
 *
 * 2. Font weights
 *    — Define the available font-weight values.
 *    — Map semantic weights to each font family.
 *    — Provide the fw() function to retrieve the mapped font weight.
 *    — Generate .fw-* utility classes.
 *
 * 3. Font scale
 *    — Configure the responsive type scale and base breakpoints.
 *
 * 4. Text styles
 *    — Configure the type scale and font settings for headings and body text.
 *    — Generate .fs-* utility classes for text sizes.
 *    — Generate .fs-step* utility classes for scale-based font sizes.
 *
 * 5. Element styles
 *    — Configure typography for:
 *      - Labels
 *      - Notes
 *      - Inputs
 *      - Links
 *      - Lists
 *
 * 6. Typography utilities
 *    — Provide text color utilities (.text--*).
 *    — Provide text transformation utilities:
 *      - .uppercase
 *      - .capitalize
 *      - .line-through
 *
 *
 * Rules
 *
 * - Whenever you want to set a font family, USE the mixin ONLY.
 *     Example:
 *       @include font-family("primary");
 *   This allows the .fw-* utility classes to resolve the correct
 *   font weight through the fw() function.
 *
 * - Use fw() instead of hardcoding font-weight values whenever the
 *   weight depends on the selected font family.
 *
 * - Keep font-family declarations and their corresponding --f-family
 *   values in sync.
 *
 * - Use the configured font scale through font-scale() rather than
 *   hardcoding font sizes where a scale step is appropriate.
 *
 * - Add new font families to the font-weight mapping so that all
 *   supported families work consistently with fw().
 */
/* FONTS */
.ff-primary {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
}

.ff-secondary {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
}

/* FONT WEIGHTS */
/* FONT SCALE */
/* TEXT STYLES */
body {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  -moz-osx-font-smoothing: grayscale; /* (For Firefox) */
  -webkit-font-smoothing: antialiased; /* (For Chrome and Safari) */
  font-weight: 500;
  line-height: auto;
  transition: all 2s ease-in-out;
  color: #14181F;
}
@media (min-width: 0) {
  body {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  body {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  body {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
body * {
  font-family: var(--f-family);
}

/*
  p = 16px Regular
  h6 = 18px Bold // DEFAULT 18px
  h5 = 20px Medium // DEFAULT 20
  h4 = 23px Medium // DEFAULT 23
  h3 = 25px Medium
  h2 = 28px Regular
  h1 = 32px Medium
*/
p {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  p {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  p {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  p {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

/*
  .fs-p = 16
  .fs-h6 = 18 // DEFAULT 18
  .fs-h5 = 20 // DEFAULT 20
  .fs-h4 = 23 // DEFAULT 23
  ...
*/
@media (min-width: 0) {
  .fs-p {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .fs-p {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .fs-p {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

/*
  p = 16px Regular
  h6 = 18px Bold // DEFAULT 18px
  h5 = 20px Medium // DEFAULT 20
  h4 = 23px Medium // DEFAULT 23
  h3 = 25px Medium
  h2 = 28px Regular
  h1 = 32px Medium
*/
h6, .menu-sidenav .sidenav .nav-list a, .menu-sidenav .sidenav .nav-list-container .nav-list li .dropdown-button, .nav-list-container .menu-sidenav .sidenav .nav-list li .dropdown-button {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h6, .menu-sidenav .sidenav .nav-list a, .menu-sidenav .sidenav .nav-list-container .nav-list li .dropdown-button, .nav-list-container .menu-sidenav .sidenav .nav-list li .dropdown-button {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 600px) {
  h6, .menu-sidenav .sidenav .nav-list a, .menu-sidenav .sidenav .nav-list-container .nav-list li .dropdown-button, .nav-list-container .menu-sidenav .sidenav .nav-list li .dropdown-button {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 1200px) {
  h6, .menu-sidenav .sidenav .nav-list a, .menu-sidenav .sidenav .nav-list-container .nav-list li .dropdown-button, .nav-list-container .menu-sidenav .sidenav .nav-list li .dropdown-button {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}

/*
  .fs-p = 16
  .fs-h6 = 18 // DEFAULT 18
  .fs-h5 = 20 // DEFAULT 20
  .fs-h4 = 23 // DEFAULT 23
  ...
*/
@media (min-width: 0) {
  .fs-h6 {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 600px) {
  .fs-h6 {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 1200px) {
  .fs-h6 {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}

/*
  p = 16px Regular
  h6 = 18px Bold // DEFAULT 18px
  h5 = 20px Medium // DEFAULT 20
  h4 = 23px Medium // DEFAULT 23
  h3 = 25px Medium
  h2 = 28px Regular
  h1 = 32px Medium
*/
h5 {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h5 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
@media (min-width: 600px) {
  h5 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
@media (min-width: 1200px) {
  h5 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}

/*
  .fs-p = 16
  .fs-h6 = 18 // DEFAULT 18
  .fs-h5 = 20 // DEFAULT 20
  .fs-h4 = 23 // DEFAULT 23
  ...
*/
@media (min-width: 0) {
  .fs-h5 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
@media (min-width: 600px) {
  .fs-h5 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
@media (min-width: 1200px) {
  .fs-h5 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}

/*
  p = 16px Regular
  h6 = 18px Bold // DEFAULT 18px
  h5 = 20px Medium // DEFAULT 20
  h4 = 23px Medium // DEFAULT 23
  h3 = 25px Medium
  h2 = 28px Regular
  h1 = 32px Medium
*/
h4 {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h4 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}
@media (min-width: 600px) {
  h4 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}
@media (min-width: 1200px) {
  h4 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}

/*
  .fs-p = 16
  .fs-h6 = 18 // DEFAULT 18
  .fs-h5 = 20 // DEFAULT 20
  .fs-h4 = 23 // DEFAULT 23
  ...
*/
@media (min-width: 0) {
  .fs-h4 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}
@media (min-width: 600px) {
  .fs-h4 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}
@media (min-width: 1200px) {
  .fs-h4 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}

/*
  p = 16px Regular
  h6 = 18px Bold // DEFAULT 18px
  h5 = 20px Medium // DEFAULT 20
  h4 = 23px Medium // DEFAULT 23
  h3 = 25px Medium
  h2 = 28px Regular
  h1 = 32px Medium
*/
h3 {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h3 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}
@media (min-width: 600px) {
  h3 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}
@media (min-width: 1200px) {
  h3 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}

/*
  .fs-p = 16
  .fs-h6 = 18 // DEFAULT 18
  .fs-h5 = 20 // DEFAULT 20
  .fs-h4 = 23 // DEFAULT 23
  ...
*/
@media (min-width: 0) {
  .fs-h3 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}
@media (min-width: 600px) {
  .fs-h3 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}
@media (min-width: 1200px) {
  .fs-h3 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}

/*
  p = 16px Regular
  h6 = 18px Bold // DEFAULT 18px
  h5 = 20px Medium // DEFAULT 20
  h4 = 23px Medium // DEFAULT 23
  h3 = 25px Medium
  h2 = 28px Regular
  h1 = 32px Medium
*/
h2 {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h2 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}
@media (min-width: 600px) {
  h2 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}
@media (min-width: 1200px) {
  h2 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}

/*
  .fs-p = 16
  .fs-h6 = 18 // DEFAULT 18
  .fs-h5 = 20 // DEFAULT 20
  .fs-h4 = 23 // DEFAULT 23
  ...
*/
@media (min-width: 0) {
  .fs-h2 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}
@media (min-width: 600px) {
  .fs-h2 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}
@media (min-width: 1200px) {
  .fs-h2 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}

/*
  p = 16px Regular
  h6 = 18px Bold // DEFAULT 18px
  h5 = 20px Medium // DEFAULT 20
  h4 = 23px Medium // DEFAULT 23
  h3 = 25px Medium
  h2 = 28px Regular
  h1 = 32px Medium
*/
h1 {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h1 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}
@media (min-width: 600px) {
  h1 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}

/*
  .fs-p = 16
  .fs-h6 = 18 // DEFAULT 18
  .fs-h5 = 20 // DEFAULT 20
  .fs-h4 = 23 // DEFAULT 23
  ...
*/
@media (min-width: 0) {
  .fs-h1 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}
@media (min-width: 600px) {
  .fs-h1 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}
@media (min-width: 1200px) {
  .fs-h1 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}

@media (min-width: 0) {
  p,
  .fs-body {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  p,
  .fs-body {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  p,
  .fs-body {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

@media (min-width: 0) {
  .fs-body--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 600px) {
  .fs-body--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 1200px) {
  .fs-body--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}

@media (min-width: 0) {
  .fs-body--lg {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 600px) {
  .fs-body--lg {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 1200px) {
  .fs-body--lg {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}

p,
.fs-body,
.fs-body--sm,
.fs-body--lg {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.25;
}

/*
  .fs-step-4 = 10
  .fs-step-3 = 11
  .fs-step-2 = 12
  .fs-step-1 = 14
  .fs-step0 = 16 --- p      // DEFAULT p
  .fs-step1 = 18 --- h6     // DEFAULT h6
  .fs-step2 = 20 --- h5     // DEFAULT h5
  .fs-step3 = 23 --- h4     // DEFAULT h4
  .fs-step4 = 25 --- h3
  .fs-step5 = 28 --- h2
  .fs-step6 = 32 --- h1
*/
@media (min-width: 0) {
  .fs-step-4 {
    font-size: 9.9887212315px;
    letter-spacing: 0.1997744246px;
  }
}
@media (min-width: 600px) {
  .fs-step-4 {
    font-size: 9.9887212315px;
    letter-spacing: 0.1997744246px;
  }
}
@media (min-width: 1200px) {
  .fs-step-4 {
    font-size: 9.9887212315px;
    letter-spacing: 0.1997744246px;
  }
}

@media (min-width: 0) {
  .fs-step-3 {
    font-size: 11.2373113855px;
    letter-spacing: 0.2247462277px;
  }
}
@media (min-width: 600px) {
  .fs-step-3 {
    font-size: 11.2373113855px;
    letter-spacing: 0.2247462277px;
  }
}
@media (min-width: 1200px) {
  .fs-step-3 {
    font-size: 11.2373113855px;
    letter-spacing: 0.2247462277px;
  }
}

@media (min-width: 0) {
  .fs-step-2 {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
@media (min-width: 600px) {
  .fs-step-2 {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
@media (min-width: 1200px) {
  .fs-step-2 {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}

@media (min-width: 0) {
  .fs-step-1 {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 600px) {
  .fs-step-1 {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 1200px) {
  .fs-step-1 {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}

@media (min-width: 0) {
  .fs-step0 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .fs-step0 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .fs-step0 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

@media (min-width: 0) {
  .fs-step1 {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 600px) {
  .fs-step1 {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 1200px) {
  .fs-step1 {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}

@media (min-width: 0) {
  .fs-step2 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
@media (min-width: 600px) {
  .fs-step2 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
@media (min-width: 1200px) {
  .fs-step2 {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}

@media (min-width: 0) {
  .fs-step3 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}
@media (min-width: 600px) {
  .fs-step3 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}
@media (min-width: 1200px) {
  .fs-step3 {
    font-size: 22.78125px;
    letter-spacing: 0.455625px;
  }
}

@media (min-width: 0) {
  .fs-step4 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}
@media (min-width: 600px) {
  .fs-step4 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}
@media (min-width: 1200px) {
  .fs-step4 {
    font-size: 25.62890625px;
    letter-spacing: 0.512578125px;
  }
}

@media (min-width: 0) {
  .fs-step5 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}
@media (min-width: 600px) {
  .fs-step5 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}
@media (min-width: 1200px) {
  .fs-step5 {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}

@media (min-width: 0) {
  .fs-step6 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}
@media (min-width: 600px) {
  .fs-step6 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}
@media (min-width: 1200px) {
  .fs-step6 {
    font-size: 32.4365844727px;
    letter-spacing: 0.6487316895px;
  }
}

/* ELEMENT STYLES */
label,
.label-text {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
}
@media (min-width: 0) {
  label,
  .label-text {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 600px) {
  label,
  .label-text {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 1200px) {
  label,
  .label-text {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}

.note-text, .breadcrumb li a, .breadcrumb .nav-list-container .nav-list li .dropdown-button, .nav-list-container .nav-list .breadcrumb li .dropdown-button, .breadcrumb li {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  color: #14181F;
  font-weight: 500;
}
@media (min-width: 0) {
  .note-text, .breadcrumb li a, .breadcrumb .nav-list-container .nav-list li .dropdown-button, .nav-list-container .nav-list .breadcrumb li .dropdown-button, .breadcrumb li {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
@media (min-width: 600px) {
  .note-text, .breadcrumb li a, .breadcrumb .nav-list-container .nav-list li .dropdown-button, .nav-list-container .nav-list .breadcrumb li .dropdown-button, .breadcrumb li {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
@media (min-width: 1200px) {
  .note-text, .breadcrumb li a, .breadcrumb .nav-list-container .nav-list li .dropdown-button, .nav-list-container .nav-list .breadcrumb li .dropdown-button, .breadcrumb li {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}

input,
textarea,
.input-text,
.select2-container--flat .select2-selection--single .select2-selection__rendered,
.select2-container--flat span.select2-search input {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
}
@media (min-width: 0) {
  input,
  textarea,
  .input-text,
  .select2-container--flat .select2-selection--single .select2-selection__rendered,
  .select2-container--flat span.select2-search input {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  input,
  textarea,
  .input-text,
  .select2-container--flat .select2-selection--single .select2-selection__rendered,
  .select2-container--flat span.select2-search input {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  input,
  textarea,
  .input-text,
  .select2-container--flat .select2-selection--single .select2-selection__rendered,
  .select2-container--flat span.select2-search input {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
input::placeholder,
textarea::placeholder,
.input-text::placeholder,
.select2-container--flat .select2-selection--single .select2-selection__rendered::placeholder,
.select2-container--flat span.select2-search input::placeholder {
  font-weight: 300;
}

a:not([class*=btn]), .nav-list-container .nav-list li .dropdown-button:not([class*=btn]),
.link-text {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  color: inherit;
  color: #26418F;
  font-weight: 600;
}
a:not([class*=btn]) *, .nav-list-container .nav-list li .dropdown-button:not([class*=btn]) *,
.link-text * {
  pointer-events: none;
}

a:not([class*=btn]), .nav-list-container .nav-list li .dropdown-button:not([class*=btn]),
a:not([class*=btn]):hover,
a:not([class*=btn]):visited,
a:not([class*=btn]):link,
a:not([class*=btn]):active,
.link-text,
.link-text:hover,
.link-text:visited,
.link-text:link,
.link-text:active {
  color: #26418F;
  text-decoration: none;
}

a:not([class*=btn]):hover, .nav-list-container .nav-list li .dropdown-button:not([class*=btn]):hover,
.link-text:hover {
  color: #0E7C73;
  cursor: pointer;
}

@media (min-width: 0) {
  .link-text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .link-text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .link-text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

@media (min-width: 0) {
  .link-text--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 600px) {
  .link-text--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 1200px) {
  .link-text--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}

@media (min-width: 0) {
  .link-text--xs {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
@media (min-width: 600px) {
  .link-text--xs {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
@media (min-width: 1200px) {
  .link-text--xs {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}

ul {
  list-style: "— ";
}
ul ul {
  list-style: disc;
}

ol {
  list-style: decimal-leading-zero;
}
ol ol {
  list-style: lower-latin;
}

ul,
ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 0;
  padding-left: 2em;
}
@media (min-width: 0) {
  ul,
  ol {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  ul,
  ol {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  ul,
  ol {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
ul ::marker,
ol ::marker {
  color: #0E7C73;
}

/* TYPOGRAPHY UTILITIES  */
.text--white {
  color: white;
}

.text--black {
  color: black;
}

.text--lightest {
  color: white;
}

.text--darkest {
  color: #14181F;
}

.text--primary {
  color: #26418F;
}

.text--secondary {
  color: #5C6472;
}

.text--accent {
  color: #0E7C73;
}

.text--success {
  color: #0E7C73;
}

.text--info {
  color: #0DCAF0;
}

.text--warning {
  color: #8A5200;
}

.text--danger {
  color: #B3261E;
}

.text--light {
  color: #EDF0F5;
}

.text--dark {
  color: #14181F;
}

.text--disabled {
  color: #EDF0F5;
}

.text--bg-container {
  color: #F5F7FA;
}

.text--blue {
  color: #007BFF;
}

.text--indigo {
  color: #6610F2;
}

.text--purple {
  color: #6F42C1;
}

.text--pink {
  color: #E83E8C;
}

.text--red {
  color: #DC3545;
}

.text--orange {
  color: #FD7E14;
}

.text--yellow {
  color: #FFC107;
}

.text--green {
  color: #28A745;
}

.text--teal {
  color: #20C997;
}

.text--cyan {
  color: #17A2B8;
}

.text--white {
  color: white;
}

.text--gray {
  color: #DFE3EB;
}

.text--gray-dark {
  color: #737C8A;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.line-through {
  text-decoration: line-through;
}

/* Fixed classes */
.uppercase {
  text-transform: uppercase;
}

.center {
  text-align: center;
}

.min-width-full {
  min-width: 100%;
}

.left {
  float: left;
  text-align: left;
}

.right {
  float: right;
  text-align: right;
}

.text-right {
  text-align: right;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.no-wrap {
  flex-wrap: nowrap;
}

.d-flex--column {
  flex-direction: column;
}

.grow--1 {
  flex-grow: 1;
}

.justify-right {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

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

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center !important;
}

.align-baseline {
  align-items: baseline;
}

.align-end {
  align-items: end;
}

.align-self-end {
  align-self: end;
}

.place-self-end {
  place-self: end;
}

.relative {
  position: relative;
}

.border {
  border: solid 1px #5C6472;
}

.border-top {
  border-top: solid 1px #5C6472;
}

.border-left {
  border-left: solid 1px #5C6472;
}

.border-right {
  border-right: solid 1px #5C6472;
}

.border-bottom {
  border-bottom: solid 1px #5C6472;
}

.border-radius--0 {
  border-radius: 0;
}

.border-radius--1 {
  border-radius: 3px;
}

.border-radius--2 {
  border-radius: 8px;
}

.border-radius--3 {
  border-radius: 10px;
}

.border-radius--4 {
  border-radius: 20px;
}

.border-radius-tl--0 {
  border-top-left-radius: 0;
}

.border-radius-tl--1 {
  border-top-left-radius: 3px;
}

.border-radius-tl--2 {
  border-top-left-radius: 8px;
}

.border-radius-tl--3 {
  border-top-left-radius: 10px;
}

.border-radius-tl--4 {
  border-top-left-radius: 20px;
}

.border-radius-tr--0 {
  border-top-right-radius: 0;
}

.border-radius-tr--1 {
  border-top-right-radius: 3px;
}

.border-radius-tr--2 {
  border-top-right-radius: 8px;
}

.border-radius-tr--3 {
  border-top-right-radius: 10px;
}

.border-radius-tr--4 {
  border-top-right-radius: 20px;
}

.border-radius-br--0 {
  border-bottom-right-radius: 0;
}

.border-radius-br--1 {
  border-bottom-right-radius: 3px;
}

.border-radius-br--2 {
  border-bottom-right-radius: 8px;
}

.border-radius-br--3 {
  border-bottom-right-radius: 10px;
}

.border-radius-br--4 {
  border-bottom-right-radius: 20px;
}

.border-radius-bl--0 {
  border-bottom-left-radius: 0;
}

.border-radius-bl--1 {
  border-bottom-left-radius: 3px;
}

.border-radius-bl--2 {
  border-bottom-left-radius: 8px;
}

.border-radius-bl--3 {
  border-bottom-left-radius: 10px;
}

.border-radius-bl--4 {
  border-bottom-left-radius: 20px;
}

/* Containers */
.container-small {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 658px;
  padding: 0 32px;
  width: 100%;
}

.container-medium, .nav-list-container .nav-list, .navbar, .navbar-content {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1224px;
  padding: 0 32px;
  width: 100%;
}

.container-large {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1464px;
  padding: 0 32px;
  width: 100%;
}

.container--full-page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 32px;
}

.box {
  background-color: #F5F7FA;
  border-radius: 0;
  padding: 16px;
}

/* Title */
.box-title {
  align-items: center;
  color: #26418F;
  display: flex;
  gap: 16px;
  position: absolute;
  right: 24px;
  top: -24px;
}

/* container btns footer */
.container__btns-footer {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-between;
}

.container__btns-footer--center {
  gap: 8px;
  justify-content: center !important;
}

/* Background */
.bg--primary {
  background-color: #26418F;
}

.bg--secondary {
  background-color: #5C6472;
}

.bg--accent {
  background-color: #0E7C73;
}

.bg--success {
  background-color: #0E7C73;
}

.bg--info {
  background-color: #0DCAF0;
}

.bg--warning {
  background-color: #8A5200;
}

.bg--danger {
  background-color: #B3261E;
}

.bg--light {
  background-color: #EDF0F5;
}

.bg--dark {
  background-color: #14181F;
}

.bg--disabled {
  background-color: #EDF0F5;
}

.bg--lightest {
  background-color: white;
}

.bg--000 {
  background-color: white;
}

.bg--100 {
  background-color: #F5F7FA;
}

.bg--200 {
  background-color: #EDF0F5;
}

.bg--300 {
  background-color: #DFE3EB;
}

.bg--400 {
  background-color: #C7CDD8;
}

.bg--500 {
  background-color: #A9B0BC;
}

.bg--600 {
  background-color: #737C8A;
}

.bg--700 {
  background-color: #5C6472;
}

.bg--800 {
  background-color: #3E4652;
}

.bg--darkest {
  background-color: #14181F;
}

/* Badges */
.badge--primary {
  background-color: #26418F;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--primary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--primary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--primary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--secondary {
  background-color: #5C6472;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--accent {
  background-color: #0E7C73;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--success {
  background-color: #0E7C73;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--info {
  background-color: #0DCAF0;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--warning {
  background-color: #8A5200;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--danger {
  background-color: #B3261E;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--light {
  background-color: #EDF0F5;
  padding: 8px 24px;
  color: #14181F;
}
@media (min-width: 0) {
  .badge--light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--dark {
  background-color: #14181F;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--disabled {
  background-color: #EDF0F5;
  padding: 8px 24px;
  color: #14181F;
}
@media (min-width: 0) {
  .badge--disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--lightest {
  background-color: white;
  padding: 8px 24px;
  color: #14181F;
}
@media (min-width: 0) {
  .badge--lightest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--lightest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--lightest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--000 {
  background-color: white;
  padding: 8px 24px;
  color: #14181F;
}
@media (min-width: 0) {
  .badge--000 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--000 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--000 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--100 {
  background-color: #F5F7FA;
  padding: 8px 24px;
  color: #14181F;
}
@media (min-width: 0) {
  .badge--100 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--100 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--100 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--200 {
  background-color: #EDF0F5;
  padding: 8px 24px;
  color: #14181F;
}
@media (min-width: 0) {
  .badge--200 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--200 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--200 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--300 {
  background-color: #DFE3EB;
  padding: 8px 24px;
  color: #14181F;
}
@media (min-width: 0) {
  .badge--300 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--300 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--300 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--400 {
  background-color: #C7CDD8;
  padding: 8px 24px;
  color: #14181F;
}
@media (min-width: 0) {
  .badge--400 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--400 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--400 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--500 {
  background-color: #A9B0BC;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--500 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--500 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--500 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--600 {
  background-color: #737C8A;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--600 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--600 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--600 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--700 {
  background-color: #5C6472;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--700 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--700 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--700 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--800 {
  background-color: #3E4652;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--800 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--800 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--800 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--darkest {
  background-color: #14181F;
  padding: 8px 24px;
  color: white;
}
@media (min-width: 0) {
  .badge--darkest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--darkest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--darkest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

@media (min-width: 600px) {
  .box-title {
    right: 32px;
    top: -40px;
  }
}
/* stylelint-disable @stylistic/indentation */
/**
 * This variables are only assigned to BUTTONS.
 *
 * Some of these variables are used in the mixins and some others are used in the buttons.scss file.
 *
 * * How to declare variables:
 *     $a_name
 *
 *     a_: Should be the initial of the variable type
 *       b_  –— border
 *       fs_ –— font-size
 *       fw_ –— font-weight
 *       h_  –— height
 *       s_  –— size
 *
 *     name: Should be the name of the variable.
 *
 *     For more info on naming variables check the README file
 *
 * This sizes are based on the Material Design Guidelines (https://m3.material.io/components/buttons/specs)
 */
/* BUTTON SIZES */
/**
 * This variables are only assigned to BUTTONS.
 *
 * This file contains the colors of exceptions and states of the buttons used
 * in the buttons mixins and in the buttons.scss file.
 *
 * The accent colors of the project are already assigned to internal variables
 * (e.g.: theme-color("primary"), neutral-color("lightest"),...).
 *
 * The name of this variables should follow this rule:
 * $c_btn-text
 *
 * The variable begins with the initial of the variable type c (color),
 * followed by the element, and the section of the element where will be applied
 * the color.
 *
 * $c_btn
 *
 * In this case this variable represents the background color of the element.
 *
 * example:
 *   $c_btn-text--disabled: color of the text of the disabled button
 *   $c_btn-text--accent: color of the text of the button with accent theme
 *   $c_btn--primary: color of the background of the button with primary theme
 */
/* BUTTON COLORS */
/* Mixins Buttons */
/* Fix for Firefox */
@-moz-document url-prefix() { /* stylelint-disable-line */
  .btn {
    letter-spacing: 1px;
  }
}
/* Buttons */
.btn-primary, .btn, button {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #26418F;
  border: 2px solid #26418F;
  border-radius: 16px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-primary:hover, .btn:hover, button:hover, .btn-primary:active, .btn:active, button:active {
  background-color: rgb(29.4342541436, 50.3480662983, 110.7657458564);
  border-color: rgb(29.4342541436, 50.3480662983, 110.7657458564);
  color: white;
}
@media (min-width: 0) {
  .btn-primary, .btn, button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-primary, .btn, button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-primary, .btn, button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-primary:focus:not(:focus-visible), .btn:focus:not(:focus-visible), button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-primary:focus-visible, .btn:focus-visible, button:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-primary:active, .btn:active, button:active {
  border-radius: 12px;
}
.btn-primary i, .btn i, button i {
  margin-bottom: -0.2em;
}
.btn-primary i:before, .btn i:before, button i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-primary, .btn-outline {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #26418F;
  border-radius: 16px;
  box-sizing: border-box;
  color: #26418F;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-primary:hover, .btn-outline:hover, .btn-outline-primary:active, .btn-outline:active {
  background-color: rgb(179.05, 188.5, 215.8);
  border-color: #26418F;
  color: #26418F;
}
@media (min-width: 0) {
  .btn-outline-primary, .btn-outline {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-primary, .btn-outline {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-primary, .btn-outline {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-primary:focus:not(:focus-visible), .btn-outline:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-primary:focus-visible, .btn-outline:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-primary:active, .btn-outline:active {
  border-radius: 12px;
}
.btn-outline-primary i, .btn-outline i {
  margin-bottom: -0.2em;
}
.btn-outline-primary i:before, .btn-outline i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-secondary {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #5C6472;
  border: 2px solid #5C6472;
  border-radius: 16px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-secondary:hover, .btn-secondary:active {
  background-color: rgb(72.6342541436, 78.3480662983, 87.5657458564);
  border-color: rgb(72.6342541436, 78.3480662983, 87.5657458564);
  color: white;
}
@media (min-width: 0) {
  .btn-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-secondary:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-secondary:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-secondary:active {
  border-radius: 12px;
}
.btn-secondary i {
  margin-bottom: -0.2em;
}
.btn-secondary i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-secondary {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #5C6472;
  border-radius: 16px;
  box-sizing: border-box;
  color: #5C6472;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background-color: rgb(197.95, 200.75, 205.65);
  border-color: #5C6472;
  color: #5C6472;
}
@media (min-width: 0) {
  .btn-outline-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-secondary:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-secondary:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-secondary:active {
  border-radius: 12px;
}
.btn-outline-secondary i {
  margin-bottom: -0.2em;
}
.btn-outline-secondary i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-accent, input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #0E7C73;
  border: 2px solid #0E7C73;
  border-radius: 16px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-accent:hover, input[type=file]:hover::file-selector-button, input[type=file]:hover::-webkit-file-upload-button, .btn-accent:active, input[type=file]:active::file-selector-button, input[type=file]:active::-webkit-file-upload-button {
  background-color: rgb(10.2342541436, 97.5480662983, 88.3657458564);
  border-color: rgb(10.2342541436, 97.5480662983, 88.3657458564);
  color: white;
}
@media (min-width: 0) {
  .btn-accent, input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-accent, input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-accent, input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-accent:focus:not(:focus-visible), input[type=file]:focus:not(:focus-visible)::file-selector-button, input[type=file]:focus:not(:focus-visible)::-webkit-file-upload-button {
  outline: none;
  box-shadow: none;
}
.btn-accent:focus-visible, input[type=file]:focus-visible::file-selector-button, input[type=file]:focus-visible::-webkit-file-upload-button {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-accent:active, input[type=file]:active::file-selector-button, input[type=file]:active::-webkit-file-upload-button {
  border-radius: 12px;
}
.btn-accent i, input[type=file]::file-selector-button i, input[type=file]::-webkit-file-upload-button i {
  margin-bottom: -0.2em;
}
.btn-accent i:before, input[type=file]::file-selector-button i:before, input[type=file]::-webkit-file-upload-button i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-accent {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #0E7C73;
  border-radius: 16px;
  box-sizing: border-box;
  color: #0E7C73;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-accent:hover, .btn-outline-accent:active {
  background-color: rgb(170.65, 209.15, 206);
  border-color: #0E7C73;
  color: #0E7C73;
}
@media (min-width: 0) {
  .btn-outline-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-accent:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-accent:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-accent:active {
  border-radius: 12px;
}
.btn-outline-accent i {
  margin-bottom: -0.2em;
}
.btn-outline-accent i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-success {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #0E7C73;
  border: 2px solid #0E7C73;
  border-radius: 16px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-success:hover, .btn-success:active {
  background-color: rgb(10.2342541436, 97.5480662983, 88.3657458564);
  border-color: rgb(10.2342541436, 97.5480662983, 88.3657458564);
  color: white;
}
@media (min-width: 0) {
  .btn-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-success:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-success:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-success:active {
  border-radius: 12px;
}
.btn-success i {
  margin-bottom: -0.2em;
}
.btn-success i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-success {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #0E7C73;
  border-radius: 16px;
  box-sizing: border-box;
  color: #0E7C73;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-success:hover, .btn-outline-success:active {
  background-color: rgb(170.65, 209.15, 206);
  border-color: #0E7C73;
  color: #0E7C73;
}
@media (min-width: 0) {
  .btn-outline-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-success:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-success:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-success:active {
  border-radius: 12px;
}
.btn-outline-success i {
  margin-bottom: -0.2em;
}
.btn-outline-success i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-info {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #0DCAF0;
  border: 2px solid #0DCAF0;
  border-radius: 16px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-info:hover, .btn-info:active {
  background-color: rgb(9.4342541436, 159.9480662983, 188.3657458564);
  border-color: rgb(9.4342541436, 159.9480662983, 188.3657458564);
  color: white;
}
@media (min-width: 0) {
  .btn-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-info:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-info:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-info:active {
  border-radius: 12px;
}
.btn-info i {
  margin-bottom: -0.2em;
}
.btn-info i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-info {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #0DCAF0;
  border-radius: 16px;
  box-sizing: border-box;
  color: #0DCAF0;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-info:hover, .btn-outline-info:active {
  background-color: rgb(170.3, 236.45, 249.75);
  border-color: #0DCAF0;
  color: #0DCAF0;
}
@media (min-width: 0) {
  .btn-outline-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-info:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-info:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-info:active {
  border-radius: 12px;
}
.btn-outline-info i {
  margin-bottom: -0.2em;
}
.btn-outline-info i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-warning {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #8A5200;
  border: 2px solid #8A5200;
  border-radius: 16px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-warning:hover, .btn-warning:active {
  background-color: hsl(35.8626755402, 106.8700456402%, 20.7450980392%);
  border-color: hsl(35.8626755402, 106.8700456402%, 20.7450980392%);
  color: white;
}
@media (min-width: 0) {
  .btn-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-warning:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-warning:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-warning:active {
  border-radius: 12px;
}
.btn-warning i {
  margin-bottom: -0.2em;
}
.btn-warning i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-warning {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #8A5200;
  border-radius: 16px;
  box-sizing: border-box;
  color: #8A5200;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-warning:hover, .btn-outline-warning:active {
  background-color: rgb(214.05, 194.45, 165.75);
  border-color: #8A5200;
  color: #8A5200;
}
@media (min-width: 0) {
  .btn-outline-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-warning:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-warning:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-warning:active {
  border-radius: 12px;
}
.btn-outline-warning i {
  margin-bottom: -0.2em;
}
.btn-outline-warning i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-danger {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #B3261E;
  border: 2px solid #B3261E;
  border-radius: 16px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-danger:hover, .btn-danger:active {
  background-color: rgb(142.2342541436, 28.7480662983, 20.3657458564);
  border-color: rgb(142.2342541436, 28.7480662983, 20.3657458564);
  color: white;
}
@media (min-width: 0) {
  .btn-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-danger:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-danger:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-danger:active {
  border-radius: 12px;
}
.btn-danger i {
  margin-bottom: -0.2em;
}
.btn-danger i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-danger {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #B3261E;
  border-radius: 16px;
  box-sizing: border-box;
  color: #B3261E;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-danger:hover, .btn-outline-danger:active {
  background-color: rgb(228.4, 179.05, 176.25);
  border-color: #B3261E;
  color: #B3261E;
}
@media (min-width: 0) {
  .btn-outline-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-danger:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-danger:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-danger:active {
  border-radius: 12px;
}
.btn-outline-danger i {
  margin-bottom: -0.2em;
}
.btn-outline-danger i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-light {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #EDF0F5;
  border: 2px solid #EDF0F5;
  border-radius: 16px;
  box-sizing: border-box;
  color: #14181F;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-light:hover, .btn-light:active {
  background-color: rgb(188.6342541436, 190.3480662983, 192.3657458564);
  border-color: rgb(188.6342541436, 190.3480662983, 192.3657458564);
  color: #14181F;
}
@media (min-width: 0) {
  .btn-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-light:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-light:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-light:active {
  border-radius: 12px;
}
.btn-light i {
  margin-bottom: -0.2em;
}
.btn-light i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-light {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #EDF0F5;
  border-radius: 16px;
  box-sizing: border-box;
  color: #EDF0F5;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-light:hover, .btn-outline-light:active {
  background-color: rgb(248.7, 249.75, 251.5);
  border-color: #EDF0F5;
  color: #EDF0F5;
}
@media (min-width: 0) {
  .btn-outline-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-light:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-light:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-light:active {
  border-radius: 12px;
}
.btn-outline-light i {
  margin-bottom: -0.2em;
}
.btn-outline-light i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-dark {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #14181F;
  border: 2px solid #14181F;
  border-radius: 16px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
}
.btn-dark:hover, .btn-dark:active {
  background-color: rgb(43.5, 47.1, 53.4);
  border-color: rgb(43.5, 47.1, 53.4);
  color: white;
}
@media (min-width: 0) {
  .btn-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-dark:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-dark:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-dark:active {
  border-radius: 12px;
}
.btn-dark i {
  margin-bottom: -0.2em;
}
.btn-dark i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-dark {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #14181F;
  border-radius: 16px;
  box-sizing: border-box;
  color: #14181F;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-dark:hover, .btn-outline-dark:active {
  background-color: rgb(172.75, 174.15, 176.6);
  border-color: #14181F;
  color: #14181F;
}
@media (min-width: 0) {
  .btn-outline-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-dark:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.btn-outline-dark:focus-visible {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-dark:active {
  border-radius: 12px;
}
.btn-outline-dark i {
  margin-bottom: -0.2em;
}
.btn-outline-dark i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-disabled, input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button, button:disabled.btn--xl, button[class^=btn-outline].btn--xl:disabled,
button[class*=" btn-outline"].btn--xl:disabled,
.btn:disabled.btn--xl,
.btn[class^=btn-outline].btn--xl:disabled,
.btn[class*=" btn-outline"].btn--xl:disabled, button:disabled.btn--lg, button[class^=btn-outline].btn--lg:disabled,
button[class*=" btn-outline"].btn--lg:disabled,
.btn:disabled.btn--lg,
.btn[class^=btn-outline].btn--lg:disabled,
.btn[class*=" btn-outline"].btn--lg:disabled, button:disabled.btn--sm, button[class^=btn-outline].btn--sm:disabled,
button[class*=" btn-outline"].btn--sm:disabled,
.btn:disabled.btn--sm,
.btn[class^=btn-outline].btn--sm:disabled,
.btn[class*=" btn-outline"].btn--sm:disabled, button:disabled.btn--xs, button[class^=btn-outline].btn--xs:disabled,
button[class*=" btn-outline"].btn--xs:disabled,
.btn:disabled.btn--xs,
.btn[class^=btn-outline].btn--xs:disabled,
.btn[class*=" btn-outline"].btn--xs:disabled, button:disabled,
.btn:disabled {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: #EDF0F5;
  border: 2px solid #EDF0F5;
  border-radius: 16px;
  box-sizing: border-box;
  color: #14181F;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  color: rgb(188.6342541436, 190.3480662983, 192.3657458564);
  pointer-events: none;
}
.btn-disabled:hover, input[type=file]:hover:disabled::file-selector-button, input[type=file]:hover:disabled::-webkit-file-upload-button, button:hover:disabled,
.btn:hover:disabled, .btn-disabled:active, input[type=file]:active:disabled::file-selector-button, input[type=file]:active:disabled::-webkit-file-upload-button, button:active:disabled,
.btn:active:disabled {
  background-color: rgb(188.6342541436, 190.3480662983, 192.3657458564);
  border-color: rgb(188.6342541436, 190.3480662983, 192.3657458564);
  color: #14181F;
}
@media (min-width: 0) {
  .btn-disabled, input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button, button:disabled.btn--xl, button[class^=btn-outline].btn--xl:disabled,
  button[class*=" btn-outline"].btn--xl:disabled,
  .btn:disabled.btn--xl,
  .btn[class^=btn-outline].btn--xl:disabled,
  .btn[class*=" btn-outline"].btn--xl:disabled, button:disabled.btn--lg, button[class^=btn-outline].btn--lg:disabled,
  button[class*=" btn-outline"].btn--lg:disabled,
  .btn:disabled.btn--lg,
  .btn[class^=btn-outline].btn--lg:disabled,
  .btn[class*=" btn-outline"].btn--lg:disabled, button:disabled.btn--sm, button[class^=btn-outline].btn--sm:disabled,
  button[class*=" btn-outline"].btn--sm:disabled,
  .btn:disabled.btn--sm,
  .btn[class^=btn-outline].btn--sm:disabled,
  .btn[class*=" btn-outline"].btn--sm:disabled, button:disabled.btn--xs, button[class^=btn-outline].btn--xs:disabled,
  button[class*=" btn-outline"].btn--xs:disabled,
  .btn:disabled.btn--xs,
  .btn[class^=btn-outline].btn--xs:disabled,
  .btn[class*=" btn-outline"].btn--xs:disabled, button:disabled,
  .btn:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-disabled, input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button, button:disabled.btn--xl, button[class^=btn-outline].btn--xl:disabled,
  button[class*=" btn-outline"].btn--xl:disabled,
  .btn:disabled.btn--xl,
  .btn[class^=btn-outline].btn--xl:disabled,
  .btn[class*=" btn-outline"].btn--xl:disabled, button:disabled.btn--lg, button[class^=btn-outline].btn--lg:disabled,
  button[class*=" btn-outline"].btn--lg:disabled,
  .btn:disabled.btn--lg,
  .btn[class^=btn-outline].btn--lg:disabled,
  .btn[class*=" btn-outline"].btn--lg:disabled, button:disabled.btn--sm, button[class^=btn-outline].btn--sm:disabled,
  button[class*=" btn-outline"].btn--sm:disabled,
  .btn:disabled.btn--sm,
  .btn[class^=btn-outline].btn--sm:disabled,
  .btn[class*=" btn-outline"].btn--sm:disabled, button:disabled.btn--xs, button[class^=btn-outline].btn--xs:disabled,
  button[class*=" btn-outline"].btn--xs:disabled,
  .btn:disabled.btn--xs,
  .btn[class^=btn-outline].btn--xs:disabled,
  .btn[class*=" btn-outline"].btn--xs:disabled, button:disabled,
  .btn:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-disabled, input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button, button:disabled.btn--xl, button[class^=btn-outline].btn--xl:disabled,
  button[class*=" btn-outline"].btn--xl:disabled,
  .btn:disabled.btn--xl,
  .btn[class^=btn-outline].btn--xl:disabled,
  .btn[class*=" btn-outline"].btn--xl:disabled, button:disabled.btn--lg, button[class^=btn-outline].btn--lg:disabled,
  button[class*=" btn-outline"].btn--lg:disabled,
  .btn:disabled.btn--lg,
  .btn[class^=btn-outline].btn--lg:disabled,
  .btn[class*=" btn-outline"].btn--lg:disabled, button:disabled.btn--sm, button[class^=btn-outline].btn--sm:disabled,
  button[class*=" btn-outline"].btn--sm:disabled,
  .btn:disabled.btn--sm,
  .btn[class^=btn-outline].btn--sm:disabled,
  .btn[class*=" btn-outline"].btn--sm:disabled, button:disabled.btn--xs, button[class^=btn-outline].btn--xs:disabled,
  button[class*=" btn-outline"].btn--xs:disabled,
  .btn:disabled.btn--xs,
  .btn[class^=btn-outline].btn--xs:disabled,
  .btn[class*=" btn-outline"].btn--xs:disabled, button:disabled,
  .btn:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-disabled:focus:not(:focus-visible), input[type=file]:focus:not(:focus-visible):disabled::file-selector-button, input[type=file]:focus:not(:focus-visible):disabled::-webkit-file-upload-button, button:focus:not(:focus-visible):disabled,
.btn:focus:not(:focus-visible):disabled {
  outline: none;
  box-shadow: none;
}
.btn-disabled:focus-visible, input[type=file]:focus-visible:disabled::file-selector-button, input[type=file]:focus-visible:disabled::-webkit-file-upload-button, button:focus-visible:disabled,
.btn:focus-visible:disabled {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-disabled:active, input[type=file]:active:disabled::file-selector-button, input[type=file]:active:disabled::-webkit-file-upload-button, button:active:disabled,
.btn:active:disabled {
  border-radius: 12px;
}
.btn-disabled i, input[type=file]:disabled::file-selector-button i, input[type=file]:disabled::-webkit-file-upload-button i, button:disabled.btn--xl i, button[class^=btn-outline].btn--xl:disabled i,
button[class*=" btn-outline"].btn--xl:disabled i, button:disabled.btn--lg i, button[class^=btn-outline].btn--lg:disabled i,
button[class*=" btn-outline"].btn--lg:disabled i, button:disabled.btn--sm i, button[class^=btn-outline].btn--sm:disabled i,
button[class*=" btn-outline"].btn--sm:disabled i, button:disabled.btn--xs i, button[class^=btn-outline].btn--xs:disabled i,
button[class*=" btn-outline"].btn--xs:disabled i, button:disabled i,
.btn:disabled i {
  margin-bottom: -0.2em;
}
.btn-disabled i:before, input[type=file]:disabled::file-selector-button i:before, input[type=file]:disabled::-webkit-file-upload-button i:before, button:disabled.btn--xl i:before, button[class^=btn-outline].btn--xl:disabled i:before,
button[class*=" btn-outline"].btn--xl:disabled i:before, button:disabled.btn--lg i:before, button[class^=btn-outline].btn--lg:disabled i:before,
button[class*=" btn-outline"].btn--lg:disabled i:before, button:disabled.btn--sm i:before, button[class^=btn-outline].btn--sm:disabled i:before,
button[class*=" btn-outline"].btn--sm:disabled i:before, button:disabled.btn--xs i:before, button[class^=btn-outline].btn--xs:disabled i:before,
button[class*=" btn-outline"].btn--xs:disabled i:before, button:disabled i:before,
.btn:disabled i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-outline-disabled, button[class^=btn-outline]:disabled.btn--xl,
button[class*=" btn-outline"]:disabled.btn--xl,
[class^=btn-outline]:disabled.btn--xl,
[class^=btn-outline].btn--xl:disabled,
[class^=btn-outline][class*=" btn-outline"].btn--xl:disabled,
[class^=btn-outline].btn.btn--xl:disabled,
[class*=" btn-outline"]:disabled.btn--xl,
[class*=" btn-outline"].btn--xl:disabled,
[class*=" btn-outline"].btn.btn--xl:disabled, button[class^=btn-outline]:disabled.btn--lg,
button[class*=" btn-outline"]:disabled.btn--lg,
[class^=btn-outline]:disabled.btn--lg,
[class^=btn-outline].btn--lg:disabled,
[class^=btn-outline][class*=" btn-outline"].btn--lg:disabled,
[class^=btn-outline].btn.btn--lg:disabled,
[class*=" btn-outline"]:disabled.btn--lg,
[class*=" btn-outline"].btn--lg:disabled,
[class*=" btn-outline"].btn.btn--lg:disabled, button[class^=btn-outline]:disabled.btn--sm,
button[class*=" btn-outline"]:disabled.btn--sm,
[class^=btn-outline]:disabled.btn--sm,
[class^=btn-outline].btn--sm:disabled,
[class^=btn-outline][class*=" btn-outline"].btn--sm:disabled,
[class^=btn-outline].btn.btn--sm:disabled,
[class*=" btn-outline"]:disabled.btn--sm,
[class*=" btn-outline"].btn--sm:disabled,
[class*=" btn-outline"].btn.btn--sm:disabled, button[class^=btn-outline]:disabled.btn--xs,
button[class*=" btn-outline"]:disabled.btn--xs,
[class^=btn-outline]:disabled.btn--xs,
input[class^=btn-outline][type=file]:disabled::file-selector-button,
input[class^=btn-outline][type=file]:disabled::-webkit-file-upload-button,
[class^=btn-outline].btn--xs:disabled,
[class^=btn-outline][class*=" btn-outline"].btn--xs:disabled,
[class^=btn-outline].btn.btn--xs:disabled,
[class*=" btn-outline"]:disabled.btn--xs,
input[class*=" btn-outline"][type=file]:disabled::file-selector-button,
input[class*=" btn-outline"][type=file]:disabled::-webkit-file-upload-button,
[class*=" btn-outline"].btn--xs:disabled,
[class*=" btn-outline"].btn.btn--xs:disabled, button[class^=btn-outline]:disabled,
button[class*=" btn-outline"]:disabled,
[class^=btn-outline]:disabled,
[class*=" btn-outline"]:disabled {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  align-items: center;
  background-color: transparent;
  border: 2px solid #EDF0F5;
  border-radius: 16px;
  box-sizing: border-box;
  color: #EDF0F5;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding: 16px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
  background-color: rgb(248.7, 249.75, 251.5);
  color: rgb(212.8171270718, 215.1740331492, 218.6828729282);
  pointer-events: none;
}
.btn-outline-disabled:hover,
[class^=btn-outline].btn--xl:hover:disabled,
[class*=" btn-outline"].btn--xl:hover:disabled,
[class^=btn-outline].btn--lg:hover:disabled,
[class*=" btn-outline"].btn--lg:hover:disabled,
[class^=btn-outline].btn--sm:hover:disabled,
[class*=" btn-outline"].btn--sm:hover:disabled,
[class^=btn-outline].btn--xs:hover:disabled,
input[class^=btn-outline][type=file]:hover:disabled::file-selector-button,
input[class^=btn-outline][type=file]:hover:disabled::-webkit-file-upload-button,
[class*=" btn-outline"].btn--xs:hover:disabled,
input[class*=" btn-outline"][type=file]:hover:disabled::file-selector-button,
input[class*=" btn-outline"][type=file]:hover:disabled::-webkit-file-upload-button,
[class^=btn-outline]:hover:disabled,
[class*=" btn-outline"]:hover:disabled, .btn-outline-disabled:active,
[class^=btn-outline].btn--xl:active:disabled,
[class*=" btn-outline"].btn--xl:active:disabled,
[class^=btn-outline].btn--lg:active:disabled,
[class*=" btn-outline"].btn--lg:active:disabled,
[class^=btn-outline].btn--sm:active:disabled,
[class*=" btn-outline"].btn--sm:active:disabled,
[class^=btn-outline].btn--xs:active:disabled,
input[class^=btn-outline][type=file]:active:disabled::file-selector-button,
input[class^=btn-outline][type=file]:active:disabled::-webkit-file-upload-button,
[class*=" btn-outline"].btn--xs:active:disabled,
input[class*=" btn-outline"][type=file]:active:disabled::file-selector-button,
input[class*=" btn-outline"][type=file]:active:disabled::-webkit-file-upload-button,
[class^=btn-outline]:active:disabled,
[class*=" btn-outline"]:active:disabled {
  background-color: rgb(248.7, 249.75, 251.5);
  border-color: #EDF0F5;
  color: #EDF0F5;
}
@media (min-width: 0) {
  .btn-outline-disabled, button[class^=btn-outline]:disabled.btn--xl,
  button[class*=" btn-outline"]:disabled.btn--xl,
  [class^=btn-outline]:disabled.btn--xl,
  [class^=btn-outline].btn--xl:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xl:disabled,
  [class^=btn-outline].btn.btn--xl:disabled,
  [class*=" btn-outline"]:disabled.btn--xl,
  [class*=" btn-outline"].btn--xl:disabled,
  [class*=" btn-outline"].btn.btn--xl:disabled, button[class^=btn-outline]:disabled.btn--lg,
  button[class*=" btn-outline"]:disabled.btn--lg,
  [class^=btn-outline]:disabled.btn--lg,
  [class^=btn-outline].btn--lg:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--lg:disabled,
  [class^=btn-outline].btn.btn--lg:disabled,
  [class*=" btn-outline"]:disabled.btn--lg,
  [class*=" btn-outline"].btn--lg:disabled,
  [class*=" btn-outline"].btn.btn--lg:disabled, button[class^=btn-outline]:disabled.btn--sm,
  button[class*=" btn-outline"]:disabled.btn--sm,
  [class^=btn-outline]:disabled.btn--sm,
  [class^=btn-outline].btn--sm:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--sm:disabled,
  [class^=btn-outline].btn.btn--sm:disabled,
  [class*=" btn-outline"]:disabled.btn--sm,
  [class*=" btn-outline"].btn--sm:disabled,
  [class*=" btn-outline"].btn.btn--sm:disabled, button[class^=btn-outline]:disabled.btn--xs,
  button[class*=" btn-outline"]:disabled.btn--xs,
  [class^=btn-outline]:disabled.btn--xs,
  input[class^=btn-outline][type=file]:disabled::file-selector-button,
  input[class^=btn-outline][type=file]:disabled::-webkit-file-upload-button,
  [class^=btn-outline].btn--xs:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xs:disabled,
  [class^=btn-outline].btn.btn--xs:disabled,
  [class*=" btn-outline"]:disabled.btn--xs,
  input[class*=" btn-outline"][type=file]:disabled::file-selector-button,
  input[class*=" btn-outline"][type=file]:disabled::-webkit-file-upload-button,
  [class*=" btn-outline"].btn--xs:disabled,
  [class*=" btn-outline"].btn.btn--xs:disabled, button[class^=btn-outline]:disabled,
  button[class*=" btn-outline"]:disabled,
  [class^=btn-outline]:disabled,
  [class*=" btn-outline"]:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-disabled, button[class^=btn-outline]:disabled.btn--xl,
  button[class*=" btn-outline"]:disabled.btn--xl,
  [class^=btn-outline]:disabled.btn--xl,
  [class^=btn-outline].btn--xl:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xl:disabled,
  [class^=btn-outline].btn.btn--xl:disabled,
  [class*=" btn-outline"]:disabled.btn--xl,
  [class*=" btn-outline"].btn--xl:disabled,
  [class*=" btn-outline"].btn.btn--xl:disabled, button[class^=btn-outline]:disabled.btn--lg,
  button[class*=" btn-outline"]:disabled.btn--lg,
  [class^=btn-outline]:disabled.btn--lg,
  [class^=btn-outline].btn--lg:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--lg:disabled,
  [class^=btn-outline].btn.btn--lg:disabled,
  [class*=" btn-outline"]:disabled.btn--lg,
  [class*=" btn-outline"].btn--lg:disabled,
  [class*=" btn-outline"].btn.btn--lg:disabled, button[class^=btn-outline]:disabled.btn--sm,
  button[class*=" btn-outline"]:disabled.btn--sm,
  [class^=btn-outline]:disabled.btn--sm,
  [class^=btn-outline].btn--sm:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--sm:disabled,
  [class^=btn-outline].btn.btn--sm:disabled,
  [class*=" btn-outline"]:disabled.btn--sm,
  [class*=" btn-outline"].btn--sm:disabled,
  [class*=" btn-outline"].btn.btn--sm:disabled, button[class^=btn-outline]:disabled.btn--xs,
  button[class*=" btn-outline"]:disabled.btn--xs,
  [class^=btn-outline]:disabled.btn--xs,
  input[class^=btn-outline][type=file]:disabled::file-selector-button,
  input[class^=btn-outline][type=file]:disabled::-webkit-file-upload-button,
  [class^=btn-outline].btn--xs:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xs:disabled,
  [class^=btn-outline].btn.btn--xs:disabled,
  [class*=" btn-outline"]:disabled.btn--xs,
  input[class*=" btn-outline"][type=file]:disabled::file-selector-button,
  input[class*=" btn-outline"][type=file]:disabled::-webkit-file-upload-button,
  [class*=" btn-outline"].btn--xs:disabled,
  [class*=" btn-outline"].btn.btn--xs:disabled, button[class^=btn-outline]:disabled,
  button[class*=" btn-outline"]:disabled,
  [class^=btn-outline]:disabled,
  [class*=" btn-outline"]:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-disabled, button[class^=btn-outline]:disabled.btn--xl,
  button[class*=" btn-outline"]:disabled.btn--xl,
  [class^=btn-outline]:disabled.btn--xl,
  [class^=btn-outline].btn--xl:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xl:disabled,
  [class^=btn-outline].btn.btn--xl:disabled,
  [class*=" btn-outline"]:disabled.btn--xl,
  [class*=" btn-outline"].btn--xl:disabled,
  [class*=" btn-outline"].btn.btn--xl:disabled, button[class^=btn-outline]:disabled.btn--lg,
  button[class*=" btn-outline"]:disabled.btn--lg,
  [class^=btn-outline]:disabled.btn--lg,
  [class^=btn-outline].btn--lg:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--lg:disabled,
  [class^=btn-outline].btn.btn--lg:disabled,
  [class*=" btn-outline"]:disabled.btn--lg,
  [class*=" btn-outline"].btn--lg:disabled,
  [class*=" btn-outline"].btn.btn--lg:disabled, button[class^=btn-outline]:disabled.btn--sm,
  button[class*=" btn-outline"]:disabled.btn--sm,
  [class^=btn-outline]:disabled.btn--sm,
  [class^=btn-outline].btn--sm:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--sm:disabled,
  [class^=btn-outline].btn.btn--sm:disabled,
  [class*=" btn-outline"]:disabled.btn--sm,
  [class*=" btn-outline"].btn--sm:disabled,
  [class*=" btn-outline"].btn.btn--sm:disabled, button[class^=btn-outline]:disabled.btn--xs,
  button[class*=" btn-outline"]:disabled.btn--xs,
  [class^=btn-outline]:disabled.btn--xs,
  input[class^=btn-outline][type=file]:disabled::file-selector-button,
  input[class^=btn-outline][type=file]:disabled::-webkit-file-upload-button,
  [class^=btn-outline].btn--xs:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xs:disabled,
  [class^=btn-outline].btn.btn--xs:disabled,
  [class*=" btn-outline"]:disabled.btn--xs,
  input[class*=" btn-outline"][type=file]:disabled::file-selector-button,
  input[class*=" btn-outline"][type=file]:disabled::-webkit-file-upload-button,
  [class*=" btn-outline"].btn--xs:disabled,
  [class*=" btn-outline"].btn.btn--xs:disabled, button[class^=btn-outline]:disabled,
  button[class*=" btn-outline"]:disabled,
  [class^=btn-outline]:disabled,
  [class*=" btn-outline"]:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-disabled:focus:not(:focus-visible),
[class^=btn-outline]:focus:not(:focus-visible):disabled,
[class*=" btn-outline"]:focus:not(:focus-visible):disabled {
  outline: none;
  box-shadow: none;
}
.btn-outline-disabled:focus-visible,
[class^=btn-outline].btn--xl:focus-visible:disabled,
[class*=" btn-outline"].btn--xl:focus-visible:disabled,
[class^=btn-outline].btn--lg:focus-visible:disabled,
[class*=" btn-outline"].btn--lg:focus-visible:disabled,
[class^=btn-outline].btn--sm:focus-visible:disabled,
[class*=" btn-outline"].btn--sm:focus-visible:disabled,
[class^=btn-outline].btn--xs:focus-visible:disabled,
input[class^=btn-outline][type=file]:focus-visible:disabled::file-selector-button,
input[class^=btn-outline][type=file]:focus-visible:disabled::-webkit-file-upload-button,
[class*=" btn-outline"].btn--xs:focus-visible:disabled,
input[class*=" btn-outline"][type=file]:focus-visible:disabled::file-selector-button,
input[class*=" btn-outline"][type=file]:focus-visible:disabled::-webkit-file-upload-button,
[class^=btn-outline]:focus-visible:disabled,
[class*=" btn-outline"]:focus-visible:disabled {
  outline-offset: 0.25em;
  outline: 2px solid #0E7C73;
  box-shadow: none;
}
.btn-outline-disabled:active,
[class^=btn-outline].btn--xl:active:disabled,
[class*=" btn-outline"].btn--xl:active:disabled,
[class^=btn-outline].btn--lg:active:disabled,
[class*=" btn-outline"].btn--lg:active:disabled,
[class^=btn-outline].btn--sm:active:disabled,
[class*=" btn-outline"].btn--sm:active:disabled,
[class^=btn-outline].btn--xs:active:disabled,
input[class^=btn-outline][type=file]:active:disabled::file-selector-button,
input[class^=btn-outline][type=file]:active:disabled::-webkit-file-upload-button,
[class*=" btn-outline"].btn--xs:active:disabled,
input[class*=" btn-outline"][type=file]:active:disabled::file-selector-button,
input[class*=" btn-outline"][type=file]:active:disabled::-webkit-file-upload-button,
[class^=btn-outline]:active:disabled,
[class*=" btn-outline"]:active:disabled {
  border-radius: 12px;
}
.btn-outline-disabled i,
[class^=btn-outline]:disabled.btn--xl i,
[class*=" btn-outline"]:disabled.btn--xl i,
[class^=btn-outline]:disabled.btn--lg i,
[class*=" btn-outline"]:disabled.btn--lg i,
[class^=btn-outline]:disabled.btn--sm i,
[class*=" btn-outline"]:disabled.btn--sm i,
[class^=btn-outline]:disabled.btn--xs i,
input[class^=btn-outline][type=file]:disabled::file-selector-button i,
input[class^=btn-outline][type=file]:disabled::-webkit-file-upload-button i,
[class*=" btn-outline"]:disabled.btn--xs i,
input[class*=" btn-outline"][type=file]:disabled::file-selector-button i,
input[class*=" btn-outline"][type=file]:disabled::-webkit-file-upload-button i,
[class^=btn-outline]:disabled i,
[class*=" btn-outline"]:disabled i {
  margin-bottom: -0.2em;
}
.btn-outline-disabled i:before,
[class^=btn-outline]:disabled.btn--xl i:before,
[class*=" btn-outline"]:disabled.btn--xl i:before,
[class^=btn-outline]:disabled.btn--lg i:before,
[class*=" btn-outline"]:disabled.btn--lg i:before,
[class^=btn-outline]:disabled.btn--sm i:before,
[class*=" btn-outline"]:disabled.btn--sm i:before,
[class^=btn-outline]:disabled.btn--xs i:before,
input[class^=btn-outline][type=file]:disabled::file-selector-button i:before,
input[class^=btn-outline][type=file]:disabled::-webkit-file-upload-button i:before,
[class*=" btn-outline"]:disabled.btn--xs i:before,
input[class*=" btn-outline"][type=file]:disabled::file-selector-button i:before,
input[class*=" btn-outline"][type=file]:disabled::-webkit-file-upload-button i:before,
[class^=btn-outline]:disabled i:before,
[class*=" btn-outline"]:disabled i:before {
  font-weight: 600;
  font-size: 1.244em;
}

.btn-icon {
  box-sizing: border-box;
  display: inline-flex !important;
  gap: 8px;
  padding: 16px 16px;
  aspect-ratio: 1/1;
  line-height: normal;
  min-width: 24px;
  place-content: center;
  transition: all 0.3s;
}
.btn-icon i {
  max-width: 24px;
  display: flex;
  justify-content: center;
}
.btn-icon i:before {
  font-weight: 600;
  font-size: 24px;
}

.btn--xs, input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button, input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button, button[class^=btn-outline]:disabled.btn--xs,
button[class*=" btn-outline"]:disabled.btn--xs,
[class^=btn-outline]:disabled.btn--xs,
[class*=" btn-outline"]:disabled.btn--xs,
.btn[class^=btn-outline].btn--xs:disabled,
.btn[class*=" btn-outline"].btn--xs:disabled,
[class^=btn-outline].btn--xs:disabled,
[class^=btn-outline][class*=" btn-outline"].btn--xs:disabled,
[class*=" btn-outline"].btn--xs:disabled, button:disabled.btn--xs,
.btn:disabled.btn--xs {
  padding: 6px 12px;
  gap: 4px;
}
@media (min-width: 0) {
  .btn--xs, input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button, input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button, button[class^=btn-outline]:disabled.btn--xs,
  button[class*=" btn-outline"]:disabled.btn--xs,
  [class^=btn-outline]:disabled.btn--xs,
  [class*=" btn-outline"]:disabled.btn--xs,
  .btn[class^=btn-outline].btn--xs:disabled,
  .btn[class*=" btn-outline"].btn--xs:disabled,
  [class^=btn-outline].btn--xs:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xs:disabled,
  [class*=" btn-outline"].btn--xs:disabled, button:disabled.btn--xs,
  .btn:disabled.btn--xs {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
@media (min-width: 600px) {
  .btn--xs, input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button, input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button, button[class^=btn-outline]:disabled.btn--xs,
  button[class*=" btn-outline"]:disabled.btn--xs,
  [class^=btn-outline]:disabled.btn--xs,
  [class*=" btn-outline"]:disabled.btn--xs,
  .btn[class^=btn-outline].btn--xs:disabled,
  .btn[class*=" btn-outline"].btn--xs:disabled,
  [class^=btn-outline].btn--xs:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xs:disabled,
  [class*=" btn-outline"].btn--xs:disabled, button:disabled.btn--xs,
  .btn:disabled.btn--xs {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
@media (min-width: 1200px) {
  .btn--xs, input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button, input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button, button[class^=btn-outline]:disabled.btn--xs,
  button[class*=" btn-outline"]:disabled.btn--xs,
  [class^=btn-outline]:disabled.btn--xs,
  [class*=" btn-outline"]:disabled.btn--xs,
  .btn[class^=btn-outline].btn--xs:disabled,
  .btn[class*=" btn-outline"].btn--xs:disabled,
  [class^=btn-outline].btn--xs:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xs:disabled,
  [class*=" btn-outline"].btn--xs:disabled, button:disabled.btn--xs,
  .btn:disabled.btn--xs {
    font-size: 12.6419753086px;
    letter-spacing: 0.2528395062px;
  }
}
.btn--xs.btn-icon, input.btn-icon[type=file]::file-selector-button, input.btn-icon[type=file]::-webkit-file-upload-button,
.btn-icon[class^=btn-outline].btn--xs:disabled,
.btn-icon[class*=" btn-outline"].btn--xs:disabled, button.btn-icon.btn--xs:disabled,
.btn-icon.btn.btn--xs:disabled {
  padding: 6px 6px;
  min-width: 20px;
}
.btn--xs.btn-icon i:before, input.btn-icon[type=file]::file-selector-button i:before, input.btn-icon[type=file]::-webkit-file-upload-button i:before,
.btn-icon[class^=btn-outline].btn--xs:disabled i:before,
.btn-icon[class*=" btn-outline"].btn--xs:disabled i:before {
  font-size: 20px;
}

.btn--sm, button[class^=btn-outline]:disabled.btn--sm,
button[class*=" btn-outline"]:disabled.btn--sm,
[class^=btn-outline]:disabled.btn--sm,
[class*=" btn-outline"]:disabled.btn--sm,
.btn[class^=btn-outline].btn--sm:disabled,
.btn[class*=" btn-outline"].btn--sm:disabled,
[class^=btn-outline].btn--sm:disabled,
[class^=btn-outline][class*=" btn-outline"].btn--sm:disabled,
[class*=" btn-outline"].btn--sm:disabled, button:disabled.btn--sm,
.btn:disabled.btn--sm {
  padding: 10px 16px;
  gap: 8px;
}
@media (min-width: 0) {
  .btn--sm, button[class^=btn-outline]:disabled.btn--sm,
  button[class*=" btn-outline"]:disabled.btn--sm,
  [class^=btn-outline]:disabled.btn--sm,
  [class*=" btn-outline"]:disabled.btn--sm,
  .btn[class^=btn-outline].btn--sm:disabled,
  .btn[class*=" btn-outline"].btn--sm:disabled,
  [class^=btn-outline].btn--sm:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--sm:disabled,
  [class*=" btn-outline"].btn--sm:disabled, button:disabled.btn--sm,
  .btn:disabled.btn--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 600px) {
  .btn--sm, button[class^=btn-outline]:disabled.btn--sm,
  button[class*=" btn-outline"]:disabled.btn--sm,
  [class^=btn-outline]:disabled.btn--sm,
  [class*=" btn-outline"]:disabled.btn--sm,
  .btn[class^=btn-outline].btn--sm:disabled,
  .btn[class*=" btn-outline"].btn--sm:disabled,
  [class^=btn-outline].btn--sm:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--sm:disabled,
  [class*=" btn-outline"].btn--sm:disabled, button:disabled.btn--sm,
  .btn:disabled.btn--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
@media (min-width: 1200px) {
  .btn--sm, button[class^=btn-outline]:disabled.btn--sm,
  button[class*=" btn-outline"]:disabled.btn--sm,
  [class^=btn-outline]:disabled.btn--sm,
  [class*=" btn-outline"]:disabled.btn--sm,
  .btn[class^=btn-outline].btn--sm:disabled,
  .btn[class*=" btn-outline"].btn--sm:disabled,
  [class^=btn-outline].btn--sm:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--sm:disabled,
  [class*=" btn-outline"].btn--sm:disabled, button:disabled.btn--sm,
  .btn:disabled.btn--sm {
    font-size: 14.2222222222px;
    letter-spacing: 0.2844444444px;
  }
}
.btn--sm.btn-icon,
.btn-icon[class^=btn-outline].btn--sm:disabled,
.btn-icon[class*=" btn-outline"].btn--sm:disabled, button.btn-icon.btn--sm:disabled,
.btn-icon.btn.btn--sm:disabled {
  padding: 10px 10px;
  min-width: 20px;
}
.btn--sm.btn-icon i:before,
.btn-icon[class^=btn-outline].btn--sm:disabled i:before,
.btn-icon[class*=" btn-outline"].btn--sm:disabled i:before {
  font-size: 20px;
}

.btn--lg, button[class^=btn-outline]:disabled.btn--lg,
button[class*=" btn-outline"]:disabled.btn--lg,
[class^=btn-outline]:disabled.btn--lg,
[class*=" btn-outline"]:disabled.btn--lg,
.btn[class^=btn-outline].btn--lg:disabled,
.btn[class*=" btn-outline"].btn--lg:disabled,
[class^=btn-outline].btn--lg:disabled,
[class^=btn-outline][class*=" btn-outline"].btn--lg:disabled,
[class*=" btn-outline"].btn--lg:disabled, button:disabled.btn--lg,
.btn:disabled.btn--lg {
  padding: 32px 48px;
  gap: 12px;
}
@media (min-width: 0) {
  .btn--lg, button[class^=btn-outline]:disabled.btn--lg,
  button[class*=" btn-outline"]:disabled.btn--lg,
  [class^=btn-outline]:disabled.btn--lg,
  [class*=" btn-outline"]:disabled.btn--lg,
  .btn[class^=btn-outline].btn--lg:disabled,
  .btn[class*=" btn-outline"].btn--lg:disabled,
  [class^=btn-outline].btn--lg:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--lg:disabled,
  [class*=" btn-outline"].btn--lg:disabled, button:disabled.btn--lg,
  .btn:disabled.btn--lg {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 600px) {
  .btn--lg, button[class^=btn-outline]:disabled.btn--lg,
  button[class*=" btn-outline"]:disabled.btn--lg,
  [class^=btn-outline]:disabled.btn--lg,
  [class*=" btn-outline"]:disabled.btn--lg,
  .btn[class^=btn-outline].btn--lg:disabled,
  .btn[class*=" btn-outline"].btn--lg:disabled,
  [class^=btn-outline].btn--lg:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--lg:disabled,
  [class*=" btn-outline"].btn--lg:disabled, button:disabled.btn--lg,
  .btn:disabled.btn--lg {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
@media (min-width: 1200px) {
  .btn--lg, button[class^=btn-outline]:disabled.btn--lg,
  button[class*=" btn-outline"]:disabled.btn--lg,
  [class^=btn-outline]:disabled.btn--lg,
  [class*=" btn-outline"]:disabled.btn--lg,
  .btn[class^=btn-outline].btn--lg:disabled,
  .btn[class*=" btn-outline"].btn--lg:disabled,
  [class^=btn-outline].btn--lg:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--lg:disabled,
  [class*=" btn-outline"].btn--lg:disabled, button:disabled.btn--lg,
  .btn:disabled.btn--lg {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
.btn--lg.btn-icon,
.btn-icon[class^=btn-outline].btn--lg:disabled,
.btn-icon[class*=" btn-outline"].btn--lg:disabled, button.btn-icon.btn--lg:disabled,
.btn-icon.btn.btn--lg:disabled {
  padding: 32px 32px;
  min-width: 32px;
}
.btn--lg.btn-icon i:before,
.btn-icon[class^=btn-outline].btn--lg:disabled i:before,
.btn-icon[class*=" btn-outline"].btn--lg:disabled i:before {
  font-size: 32px;
}

.btn--xl, button[class^=btn-outline]:disabled.btn--xl,
button[class*=" btn-outline"]:disabled.btn--xl,
[class^=btn-outline]:disabled.btn--xl,
[class*=" btn-outline"]:disabled.btn--xl,
.btn[class^=btn-outline].btn--xl:disabled,
.btn[class*=" btn-outline"].btn--xl:disabled,
[class^=btn-outline].btn--xl:disabled,
[class^=btn-outline][class*=" btn-outline"].btn--xl:disabled,
[class*=" btn-outline"].btn--xl:disabled, button:disabled.btn--xl,
.btn:disabled.btn--xl {
  padding: 48px 64px;
  gap: 16px;
}
@media (min-width: 0) {
  .btn--xl, button[class^=btn-outline]:disabled.btn--xl,
  button[class*=" btn-outline"]:disabled.btn--xl,
  [class^=btn-outline]:disabled.btn--xl,
  [class*=" btn-outline"]:disabled.btn--xl,
  .btn[class^=btn-outline].btn--xl:disabled,
  .btn[class*=" btn-outline"].btn--xl:disabled,
  [class^=btn-outline].btn--xl:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xl:disabled,
  [class*=" btn-outline"].btn--xl:disabled, button:disabled.btn--xl,
  .btn:disabled.btn--xl {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
@media (min-width: 600px) {
  .btn--xl, button[class^=btn-outline]:disabled.btn--xl,
  button[class*=" btn-outline"]:disabled.btn--xl,
  [class^=btn-outline]:disabled.btn--xl,
  [class*=" btn-outline"]:disabled.btn--xl,
  .btn[class^=btn-outline].btn--xl:disabled,
  .btn[class*=" btn-outline"].btn--xl:disabled,
  [class^=btn-outline].btn--xl:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xl:disabled,
  [class*=" btn-outline"].btn--xl:disabled, button:disabled.btn--xl,
  .btn:disabled.btn--xl {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
@media (min-width: 1200px) {
  .btn--xl, button[class^=btn-outline]:disabled.btn--xl,
  button[class*=" btn-outline"]:disabled.btn--xl,
  [class^=btn-outline]:disabled.btn--xl,
  [class*=" btn-outline"]:disabled.btn--xl,
  .btn[class^=btn-outline].btn--xl:disabled,
  .btn[class*=" btn-outline"].btn--xl:disabled,
  [class^=btn-outline].btn--xl:disabled,
  [class^=btn-outline][class*=" btn-outline"].btn--xl:disabled,
  [class*=" btn-outline"].btn--xl:disabled, button:disabled.btn--xl,
  .btn:disabled.btn--xl {
    font-size: 20.25px;
    letter-spacing: 0.405px;
  }
}
.btn--xl.btn-icon,
.btn-icon[class^=btn-outline].btn--xl:disabled,
.btn-icon[class*=" btn-outline"].btn--xl:disabled, button.btn-icon.btn--xl:disabled,
.btn-icon.btn.btn--xl:disabled {
  padding: 48px 48px;
  min-width: 40px;
}
.btn--xl.btn-icon i:before,
.btn-icon[class^=btn-outline].btn--xl:disabled i:before,
.btn-icon[class*=" btn-outline"].btn--xl:disabled i:before {
  font-size: 40px;
}

.btn--full-width {
  width: 100%;
}

.btn--overlap {
  box-shadow: 0 0 9px 3px #c7cdd8;
  z-index: 2;
}

.btn--no-border {
  border: 0;
}

/**
 * This variables are only assigned to FORM elements.
 *
 * The accent colors of the project are already assigned to internal variables
 * in the colors stylesheet of the styleguide
 * (e.g.: theme-color("primary"), neutral-color("lightest"),...).
 *
 *
 * The name of this variables should follow this rule:
 * $c_nav-text
 *
 *
 * The variable begins with the initial of the variable type c (color),
 * followed by the element, and the section of the element where will be applied
 * the color.
 *
 * $c_nav
 *
 * In this case this variable represents the background color of the element.
 */
/* INPUT COLORS */
/* SELECT2 COLORS */
/* DATEPICKER COLORS */
/**
 * This variables are only assigned to FORM elements.
 */
/** Radio and Checkbox Buttons
 * Adapted from: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
 *
 * HTML example:
  <div class="control_group checkbox_group">
    <label class="control control-checkbox label-text">First checkbox
      <input type="checkbox" checked="checked"/>
      <div class="control-indicator"></div>
    </label>
  </div>

  <div class="control_group radio_group">
  	<label class="control control-radio label-text">First radio
  		<input type="radio" name="radio" checked="checked"/>
  		<div class="control-indicator"></div>
  	</label>
  </div>
 *
 * To update the colors of the inputs, the variables should changed on colors.scss
 *
 */
.control {
  cursor: pointer;
  display: block;
  margin-bottom: 15px;
  padding-left: calc(20px + 10px);
  position: relative;
}
.control input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.control input:checked ~ .control-indicator:after {
  display: block;
}
.control input:disabled ~ .control-indicator {
  border: 2px solid #A9B0BC;
  opacity: 0.6;
  pointer-events: none;
}
.control:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(24.347826087, 215.652173913, 200);
}
.control:has(input:disabled) {
  pointer-events: none;
}

/* stylelint-disable-next-line no-descending-specificity */
.control-indicator {
  background: transparent;
  border: 2px solid #14181F;
  border-radius: 4px;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-indicator:after {
  content: "";
  display: none;
  position: absolute;
}

.control-radio {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-radio .control-indicator {
  border-radius: 50%;
  border-color: #0E7C73;
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-radio .control-indicator:after {
  background: #0E7C73;
  border-radius: 50%;
  box-sizing: border-box;
  height: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}
.control-radio input:disabled ~ .control-indicator {
  background-color: rgba(199, 205, 216, 0.6);
  border-color: #C7CDD8;
}
.control-radio input:disabled ~ .control-indicator:after {
  background-color: #C7CDD8;
}

.control-radio--primary .control-indicator {
  border-color: #26418F;
}
.control-radio--primary .control-indicator:after {
  background: #26418F;
}
.control-radio--primary:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(66.1071823204, 91.7663456985, 165.8928176796);
}

.control-radio--secondary .control-indicator {
  border-color: #5C6472;
}
.control-radio--secondary .control-indicator:after {
  background: #5C6472;
}
.control-radio--secondary:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(128.5, 128.5, 128.5);
}

.control-radio--accent .control-indicator {
  border-color: #0E7C73;
}
.control-radio--accent .control-indicator:after {
  background: #0E7C73;
}
.control-radio--accent:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(33.3489130435, 155.6510869565, 145.6445454545);
}

.control-radio--success .control-indicator {
  border-color: #0E7C73;
}
.control-radio--success .control-indicator:after {
  background: #0E7C73;
}
.control-radio--success:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(33.3489130435, 155.6510869565, 145.6445454545);
}

.control-radio--info .control-indicator {
  border-color: #0DCAF0;
}
.control-radio--info .control-indicator:after {
  background: #0DCAF0;
}
.control-radio--info:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(75.0349802372, 203.1969955251, 228.9650197628);
}

.control-radio--warning .control-indicator {
  border-color: #8A5200;
}
.control-radio--warning .control-indicator:after {
  background: #8A5200;
}
.control-radio--warning:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(174.825, 109.6336956522, 14.175);
}

.control-radio--danger .control-indicator {
  border-color: #B3261E;
}
.control-radio--danger .control-indicator:after {
  background: #B3261E;
}
.control-radio--danger:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(200.3648325359, 67.1911226358, 59.6351674641);
}

.control-radio--light .control-indicator {
  border-color: #EDF0F5;
}
.control-radio--light .control-indicator:after {
  background: #EDF0F5;
}
.control-radio--light:hover input:not([disabled]) ~ .control-indicator {
  background: hsl(217.5, 13.5714285714%, 104.5098039216%);
}

.control-radio--dark .control-indicator {
  border-color: #14181F;
}
.control-radio--dark .control-indicator:after {
  background: #14181F;
}
.control-radio--dark:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(47.65, 50.0863636364, 54.35);
}

.control-radio--disabled .control-indicator {
  border-color: #EDF0F5;
}
.control-radio--disabled .control-indicator:after {
  background: #EDF0F5;
}
.control-radio--disabled:hover input:not([disabled]) ~ .control-indicator {
  background: hsl(217.5, 13.5714285714%, 104.5098039216%);
}

.control-checkbox {
  /* stylelint-disable-next-line no-descending-specificity */
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox .control-indicator {
  border-color: #0E7C73;
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox .control-indicator:after {
  border: solid white;
  border-width: 0 2px 2px 0;
  height: 9px;
  left: 0;
  top: 0;
  transform: translate(80%, 25%) rotate(45deg);
  width: 6px;
}
.control-checkbox input:checked ~ .control-indicator {
  background-color: #0E7C73;
}
.control-checkbox input:disabled ~ .control-indicator {
  background-color: rgba(199, 205, 216, 0.6);
  border-color: #C7CDD8;
}
.control-checkbox input:disabled ~ .control-indicator:after {
  border-color: #C7CDD8;
}

.control-checkbox--no-text {
  margin-top: 8px;
  min-height: 26px;
}

.control-checkbox--primary {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--primary .control-indicator {
  border-color: #26418F;
}
.control-checkbox--primary .control-indicator:after {
  border-color: white;
}
.control-checkbox--primary input:checked ~ .control-indicator {
  background-color: #26418F;
}
.control-checkbox--primary:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(93.3860497238, 111.5732241515, 164.1139502762);
}

.control-checkbox--secondary {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--secondary .control-indicator {
  border-color: #5C6472;
}
.control-checkbox--secondary .control-indicator:after {
  border-color: white;
}
.control-checkbox--secondary input:checked ~ .control-indicator {
  background-color: #5C6472;
}
.control-checkbox--secondary:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(141.25, 141.25, 141.25);
}

.control-checkbox--accent {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--accent .control-indicator {
  border-color: #0E7C73;
}
.control-checkbox--accent .control-indicator:after {
  border-color: white;
}
.control-checkbox--accent input:checked ~ .control-indicator {
  background-color: #0E7C73;
}
.control-checkbox--accent:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(53.9358695652, 160.5641304348, 151.84);
}

.control-checkbox--success {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--success .control-indicator {
  border-color: #0E7C73;
}
.control-checkbox--success .control-indicator:after {
  border-color: white;
}
.control-checkbox--success input:checked ~ .control-indicator {
  background-color: #0E7C73;
}
.control-checkbox--success:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(53.9358695652, 160.5641304348, 151.84);
}

.control-checkbox--info {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--info .control-indicator {
  border-color: #0DCAF0;
}
.control-checkbox--info .control-indicator:after {
  border-color: white;
}
.control-checkbox--info input:checked ~ .control-indicator {
  background-color: #0DCAF0;
}
.control-checkbox--info:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(110.8497035573, 200.6043822152, 218.6502964427);
}

.control-checkbox--warning {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--warning .control-indicator {
  border-color: #8A5200;
}
.control-checkbox--warning .control-indicator:after {
  border-color: white;
}
.control-checkbox--warning input:checked ~ .control-indicator {
  background-color: #8A5200;
}
.control-checkbox--warning:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(182.325, 121.3945652174, 32.175);
}

.control-checkbox--danger {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--danger .control-indicator {
  border-color: #B3261E;
}
.control-checkbox--danger .control-indicator:after {
  border-color: white;
}
.control-checkbox--danger input:checked ~ .control-indicator {
  background-color: #B3261E;
}
.control-checkbox--danger:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(189.1001196172, 101.3770744356, 96.3998803828);
}

.control-checkbox--light {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--light .control-indicator {
  border-color: #EDF0F5;
}
.control-checkbox--light .control-indicator:after {
  border-color: #14181F;
}
.control-checkbox--light input:checked ~ .control-indicator {
  background-color: #EDF0F5;
}
.control-checkbox--light:hover input:not([disabled]) ~ .control-indicator {
  background: hsl(0, 0%, 109.5098039216%);
}

.control-checkbox--dark {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--dark .control-indicator {
  border-color: #14181F;
}
.control-checkbox--dark .control-indicator:after {
  border-color: white;
}
.control-checkbox--dark input:checked ~ .control-indicator {
  background-color: #14181F;
}
.control-checkbox--dark:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(63.75, 63.75, 63.75);
}

.control-checkbox--disabled {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--disabled .control-indicator {
  border-color: #EDF0F5;
}
.control-checkbox--disabled .control-indicator:after {
  border-color: #14181F;
}
.control-checkbox--disabled input:checked ~ .control-indicator {
  background-color: #EDF0F5;
}
.control-checkbox--disabled:hover input:not([disabled]) ~ .control-indicator {
  background: hsl(0, 0%, 109.5098039216%);
}

/* stylelint-disable no-descending-specificity */
/**  Buttons
 *
 * HTML example:

  <label class="control control-toggle label-text">Toggle Text
    <input type="checkbox" checked="checked"/>
    <div class="control-indicator"></div>
  </label>

 *
 * To update the colors of the inputs, the variables should changed on colors.scss
 *
 */
.control-toggle {
  --f-family: Hanken Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  padding-left: 54px;
}
@media (min-width: 0) {
  .control-toggle {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .control-toggle {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .control-toggle {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.control-toggle .control-indicator {
  background: none;
  border-radius: 12px;
  border-color: #0E7C73;
  box-sizing: border-box;
  height: 24px;
  width: 44px;
  padding: 2px;
  top: 1px;
  transition: all 0.2s ease-in-out;
}
.control-toggle .control-indicator:after {
  background: #0E7C73;
  border-radius: 50%;
  box-sizing: border-box;
  height: 16px;
  left: 4px;
  top: 4px;
  width: 16px;
  transition: all 0.2s ease-in-out;
}
.control-toggle input ~ .control-indicator:after {
  display: block;
}
.control-toggle input:checked ~ .control-indicator {
  background: #0E7C73;
}
.control-toggle input:checked ~ .control-indicator:after {
  background: white;
  left: calc(100% - 20px);
}
.control-toggle input:disabled ~ .control-indicator:after {
  background: #C7CDD8;
}

.control-toggle:hover input:not([disabled]) ~ .control-indicator,
.control-toggle:hover input:checked ~ .control-indicator:after {
  background: rgb(24.347826087, 215.652173913, 200);
}

.control-toggle:hover input ~ .control-indicator,
.control-toggle:hover input:checked ~ .control-indicator,
.control-toggle:hover input ~ .control-indicator:after {
  background: #0E7C73;
}

.control-toggle--primary .control-indicator {
  border: 2px solid #26418F;
}
.control-toggle--primary .control-indicator:after {
  background: #26418F;
}
.control-toggle--primary input:checked ~ .control-indicator {
  background: #26418F;
}
.control-toggle--primary input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--primary:hover input:not([disabled]) ~ .control-indicator, .control-toggle--primary:hover input:checked ~ .control-indicator:after {
  background: rgb(87.0074585635, 115.0321941594, 195.9925414365);
}
.control-toggle--primary:hover input ~ .control-indicator, .control-toggle--primary:hover input:checked ~ .control-indicator, .control-toggle--primary:hover input ~ .control-indicator:after {
  background: #26418F;
}

.control-toggle--secondary .control-indicator {
  border: 2px solid #5C6472;
}
.control-toggle--secondary .control-indicator:after {
  background: #5C6472;
}
.control-toggle--secondary input:checked ~ .control-indicator {
  background: #5C6472;
}
.control-toggle--secondary input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--secondary:hover input:not([disabled]) ~ .control-indicator, .control-toggle--secondary:hover input:checked ~ .control-indicator:after {
  background: rgb(153.313592233, 153.8127978817, 154.686407767);
}
.control-toggle--secondary:hover input ~ .control-indicator, .control-toggle--secondary:hover input:checked ~ .control-indicator, .control-toggle--secondary:hover input ~ .control-indicator:after {
  background: #5C6472;
}

.control-toggle--accent .control-indicator {
  border: 2px solid #0E7C73;
}
.control-toggle--accent .control-indicator:after {
  background: #0E7C73;
}
.control-toggle--accent input:checked ~ .control-indicator {
  background: #0E7C73;
}
.control-toggle--accent input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--accent:hover input:not([disabled]) ~ .control-indicator, .control-toggle--accent:hover input:checked ~ .control-indicator:after {
  background: rgb(36.347826087, 203.652173913, 189.9636363636);
}
.control-toggle--accent:hover input ~ .control-indicator, .control-toggle--accent:hover input:checked ~ .control-indicator, .control-toggle--accent:hover input ~ .control-indicator:after {
  background: #0E7C73;
}

.control-toggle--success .control-indicator {
  border: 2px solid #0E7C73;
}
.control-toggle--success .control-indicator:after {
  background: #0E7C73;
}
.control-toggle--success input:checked ~ .control-indicator {
  background: #0E7C73;
}
.control-toggle--success input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--success:hover input:not([disabled]) ~ .control-indicator, .control-toggle--success:hover input:checked ~ .control-indicator:after {
  background: rgb(36.347826087, 203.652173913, 189.9636363636);
}
.control-toggle--success:hover input ~ .control-indicator, .control-toggle--success:hover input:checked ~ .control-indicator, .control-toggle--success:hover input ~ .control-indicator:after {
  background: #0E7C73;
}

.control-toggle--info .control-indicator {
  border: 2px solid #0DCAF0;
}
.control-toggle--info .control-indicator:after {
  background: #0DCAF0;
}
.control-toggle--info input:checked ~ .control-indicator {
  background: #0DCAF0;
}
.control-toggle--info input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--info:hover input:not([disabled]) ~ .control-indicator, .control-toggle--info:hover input:checked ~ .control-indicator:after {
  background: rgb(115.7144268775, 218.5996543678, 239.2855731225);
}
.control-toggle--info:hover input ~ .control-indicator, .control-toggle--info:hover input:checked ~ .control-indicator, .control-toggle--info:hover input ~ .control-indicator:after {
  background: #0DCAF0;
}

.control-toggle--warning .control-indicator {
  border: 2px solid #8A5200;
}
.control-toggle--warning .control-indicator:after {
  background: #8A5200;
}
.control-toggle--warning input:checked ~ .control-indicator {
  background: #8A5200;
}
.control-toggle--warning input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--warning:hover input:not([disabled]) ~ .control-indicator, .control-toggle--warning:hover input:checked ~ .control-indicator:after {
  background: rgb(228, 140.347826087, 12);
}
.control-toggle--warning:hover input ~ .control-indicator, .control-toggle--warning:hover input:checked ~ .control-indicator, .control-toggle--warning:hover input ~ .control-indicator:after {
  background: #8A5200;
}

.control-toggle--danger .control-indicator {
  border: 2px solid #B3261E;
}
.control-toggle--danger .control-indicator:after {
  background: #B3261E;
}
.control-toggle--danger input:checked ~ .control-indicator {
  background: #B3261E;
}
.control-toggle--danger input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--danger:hover input:not([disabled]) ~ .control-indicator, .control-toggle--danger:hover input:checked ~ .control-indicator:after {
  background: rgb(216.4854066986, 101.063361806, 94.5145933014);
}
.control-toggle--danger:hover input ~ .control-indicator, .control-toggle--danger:hover input:checked ~ .control-indicator, .control-toggle--danger:hover input ~ .control-indicator:after {
  background: #B3261E;
}

.control-toggle--light .control-indicator {
  border: 2px solid #EDF0F5;
}
.control-toggle--light .control-indicator:after {
  background: #EDF0F5;
}
.control-toggle--light input:checked ~ .control-indicator {
  background: #EDF0F5;
}
.control-toggle--light input:checked ~ .control-indicator:after {
  background: #14181F;
}
.control-toggle--light:hover input:not([disabled]) ~ .control-indicator, .control-toggle--light:hover input:checked ~ .control-indicator:after {
  background: hsl(217.5, 18.5714285714%, 114.5098039216%);
}
.control-toggle--light:hover input ~ .control-indicator, .control-toggle--light:hover input:checked ~ .control-indicator, .control-toggle--light:hover input ~ .control-indicator:after {
  background: #EDF0F5;
}

.control-toggle--dark .control-indicator {
  border: 2px solid #14181F;
}
.control-toggle--dark .control-indicator:after {
  background: #14181F;
}
.control-toggle--dark input:checked ~ .control-indicator {
  background: #14181F;
}
.control-toggle--dark input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--dark:hover input:not([disabled]) ~ .control-indicator, .control-toggle--dark:hover input:checked ~ .control-indicator:after {
  background: rgb(67.65, 74.0863636364, 85.35);
}
.control-toggle--dark:hover input ~ .control-indicator, .control-toggle--dark:hover input:checked ~ .control-indicator, .control-toggle--dark:hover input ~ .control-indicator:after {
  background: #14181F;
}

.control-toggle--disabled .control-indicator {
  border: 2px solid #EDF0F5;
}
.control-toggle--disabled .control-indicator:after {
  background: #EDF0F5;
}
.control-toggle--disabled input:checked ~ .control-indicator {
  background: #EDF0F5;
}
.control-toggle--disabled input:checked ~ .control-indicator:after {
  background: #14181F;
}
.control-toggle--disabled:hover input:not([disabled]) ~ .control-indicator, .control-toggle--disabled:hover input:checked ~ .control-indicator:after {
  background: hsl(217.5, 18.5714285714%, 114.5098039216%);
}
.control-toggle--disabled:hover input ~ .control-indicator, .control-toggle--disabled:hover input:checked ~ .control-indicator, .control-toggle--disabled:hover input ~ .control-indicator:after {
  background: #EDF0F5;
}

/*!
 * Datetimepicker for Bootstrap 3
 * version : 4.17.47
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */
[data-action=togglePicker],
[data-action=incrementHours],
[data-action=decrementHours],
[data-action=incrementMinutes],
[data-action=decrementMinutes] {
  display: inline-block;
  min-width: 100%;
}

[data-action=togglePicker]:hover,
[data-action=incrementHours]:hover,
[data-action=decrementHours]:hover,
[data-action=incrementMinutes]:hover,
[data-action=decrementMinutes]:hover {
  background: #F8F9FA;
  cursor: pointer;
}

input:not([type=checkbox], [type=radio], [type=submit]) {
  background-color: transparent;
  border: 2px solid #14181F;
  border-radius: 8px;
  box-sizing: border-box;
  height: auto;
  margin-top: 10px;
  padding: 0.75em 20px;
  width: 100%;
}
input:not([type=checkbox], [type=radio], [type=submit])::placeholder {
  color: #14181F;
}
input:not([type=checkbox], [type=radio], [type=submit]):focus, input:not([type=checkbox], [type=radio], [type=submit]):active {
  border-color: #0E7C73;
  outline: none;
}
input:not([type=checkbox], [type=radio], [type=submit]):disabled {
  border-color: #A9B0BC;
  color: #A9B0BC;
  pointer-events: none;
}
input:not([type=checkbox], [type=radio], [type=submit]):disabled::placeholder {
  opacity: 0.6;
}

textarea {
  background-color: transparent;
  border: 2px solid #14181F;
  border-radius: 8px;
  box-sizing: border-box;
  height: 6em;
  margin-top: 10px;
  padding: 0.75em 20px;
  width: 100%;
  border-radius: 8px 12px 8px 8px;
}
textarea::placeholder {
  color: #14181F;
}
textarea:focus, textarea:active {
  border-color: #0E7C73;
  outline: none;
}
textarea:disabled {
  border-color: #A9B0BC;
  color: #A9B0BC;
  pointer-events: none;
}
textarea:disabled::placeholder {
  opacity: 0.6;
}

input::placeholder,
textarea::placeholder {
  opacity: 0.6;
}

input[type=file] {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
  margin: 0 -5px;
  padding: 5px;
}
input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
  display: inline-flex;
  margin-right: 8px;
}
input[type=file]:disabled {
  color: #A9B0BC;
  pointer-events: none;
}
input[type=file]:disabled::file-selector-button, input[type=file]:disabled::-webkit-file-upload-button {
  display: inline-flex;
  margin-right: 8px;
  pointer-events: none;
}

input[type=range] {
  appearance: none;
  border: 0;
  background-color: transparent;
  padding: 0;
  width: 100%;
}
input[type=range]::-webkit-slider-runnable-track {
  background-color: transparent;
  border: 2px solid #14181F;
  border-radius: 8px;
  height: 0.15em;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  background-color: #0E7C73;
  border-radius: 8px;
  cursor: pointer;
  height: 1.5em;
  transform: translateY(-50%);
  width: 1.5em;
}
input[type=range]:focus::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb {
  background-color: rgb(24.347826087, 215.652173913, 200);
}
input[type=range]:hover::-webkit-slider-thumb {
  background-color: rgb(24.347826087, 215.652173913, 200);
}
input[type=range]:disabled::-webkit-slider-runnable-track {
  border-color: #A9B0BC;
}
input[type=range]:disabled::-webkit-slider-thumb {
  background-color: #C7CDD8;
}

input[type=color] {
  background-color: transparent;
  border: 2px solid #14181F;
  border-radius: 8px;
  box-sizing: border-box;
  height: 2.5em;
  margin-top: 10px;
  padding: 0;
  width: 100%;
  appearance: none;
  cursor: pointer;
}
input[type=color]::placeholder {
  color: #14181F;
}
input[type=color]:focus, input[type=color]:active {
  border-color: #0E7C73;
  outline: none;
}
input[type=color]:disabled {
  border-color: #A9B0BC;
  color: #A9B0BC;
  pointer-events: none;
}
input[type=color]:disabled::placeholder {
  opacity: 0.6;
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 6px;
}
input[type=color]::-webkit-color-swatch {
  border: 0;
  border-radius: 8px;
}

/** Select Box
 * Adapted from: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
 *
 * HTML example:
  <div class="control-group">
   <div class="select">
     <select class="input-text">
       <option>First select</option>
       <option>Option</option>
       <option>Option</option>
     </select>
     <div class="select__arrow"></div>
   </div>
  </div>
 *
 *
 * To update the colors of the inputs, the variables should be changed on colors.scss
 *
 */
.select {
  display: inline-block;
  position: relative;
  width: 100%;
}
.select select {
  background-color: transparent;
  border: 2px solid #14181F;
  border-radius: 8px;
  box-sizing: border-box;
  height: auto;
  margin-top: 10px;
  padding: 0.75em 20px;
  width: 100%;
  appearance: none;
  cursor: pointer;
  outline: 0;
}
.select select::placeholder {
  color: #14181F;
}
.select select:focus, .select select:active {
  border-color: #0E7C73;
  outline: none;
}
.select select:disabled {
  border-color: #A9B0BC;
  color: #A9B0BC;
  pointer-events: none;
}
.select select:disabled::placeholder {
  opacity: 0.6;
}
.select .select__arrow {
  position: absolute;
  border: solid #14181F;
  border-width: 0 2px 2px 0;
  right: 20px;
  top: 50%;
  height: 9px;
  width: 9px;
  transform: rotate(45deg);
}
.select select::-ms-expand {
  display: none;
}
.select select:hover {
  background: rgb(24.347826087, 215.652173913, 200);
}
.select select:disabled {
  color: #C7CDD8;
}
.select select:disabled ~ .select__arrow {
  border-top-color: #C7CDD8;
}
.select select[multiple] {
  border-radius: 12px;
  padding: 4px;
}
.select select[multiple] ~ .select__arrow {
  display: none;
}
.select select[multiple]:hover {
  background-color: transparent;
}
.select select[multiple] option {
  padding: 0 20px;
  margin: 4px;
}
.select select[multiple] option:checked {
  background-color: rgb(24.347826087, 215.652173913, 200) !important;
}

/**
 * Author : Techhysahil
 * Link : http://techhysahil.com
 * Select2 Override style
 */
/* Assign min-width to container */
.select2-container {
  min-width: 100%;
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
  background: transparent;
  border: 2px solid #C7CDD8;
  border-radius: 8px;
  border-top: 0;
}

.select2-container--flat .select2-results__option--highlighted[aria-selected] {
  background: #26418F !important;
  color: white;
}
.select2-container--flat .select2-results__option[aria-selected=true] {
  background: rgb(24.347826087, 215.652173913, 200);
  color: white;
}
.select2-container--flat.select2-container--open .select2-selection__arrow b {
  transform: rotate(180deg);
}
.select2-container--flat span.select2-search input {
  height: 2.25em !important;
  padding: 0.5em 10px;
}
.select2-container--flat .select2-selection--single {
  background-color: transparent;
  border: 2px solid #14181F;
  border-radius: 8px;
  box-sizing: border-box;
  height: auto;
  margin-top: 10px;
  padding: 0.75em 20px;
  width: 100%;
}
.select2-container--flat .select2-selection--single::placeholder {
  color: #14181F;
}
.select2-container--flat .select2-selection--single:focus, .select2-container--flat .select2-selection--single:active {
  border-color: #0E7C73;
  outline: none;
}
.select2-container--flat .select2-selection--single:disabled {
  border-color: #A9B0BC;
  color: #A9B0BC;
  pointer-events: none;
}
.select2-container--flat .select2-selection--single:disabled::placeholder {
  opacity: 0.6;
}
.select2-container--flat .select2-selection--single .select2-selection__rendered {
  padding: 0;
}
.select2-container--flat .select2-selection--single .select2-selection__placeholder {
  color: #14181F;
}
.select2-container--flat .select2-selection--single .select2-selection__arrow {
  position: absolute;
  right: calc(20px + 10px);
  top: 30px;
}
.select2-container--flat .select2-selection--single .select2-selection__arrow b {
  border-color: #0E7C73 transparent transparent transparent;
  border-style: solid;
  border-width: 8px 5px 0;
  height: 0;
  position: absolute;
  width: 0;
}
.select2-container--flat .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  margin-right: 20px;
}

.select2-search {
  margin-top: 0;
  /* stylelint-disable-next-line no-descending-specificity */
}
.select2-search input {
  border: 2px solid #C7CDD8;
  border-radius: 8px;
  /* stylelint-disable-next-line no-descending-specificity */
}
.select2-search input:active {
  border-color: #0E7C73;
  outline: none;
  outline-width: 0;
}

/**
 * This variables are only assigned to NAVIGATION elements.
 *
 * The accent colors of the project are already assigned to internal variables
 * in the colors stylesheet of the styleguide
 * (e.g.: theme-color("primary"), neutral-color("lightest"),...).
 *
 *
 * The name of this variables should follow this rule:
 * $c_nav-text
 *
 *
 * The variable begins with the initial of the variable type c (color),
 * followed by the element, and the section of the element where will be applied
 * the color.
 *
 * $c_nav
 *
 * In this case this variable represents the background color of the element.
 */
/* FOOTER COLORS */
/* NAV COLORS */
/* PAGINATION COLORS */
/* BREADCRUMB COLORS */
/* SIDENAV COLORS */
/* Footer */
footer {
  background-color: #F5F7FA;
  color: #DFE3EB;
  padding: 80px 0;
}
footer .container-medium, footer .nav-list-container .nav-list, .nav-list-container footer .nav-list, footer .navbar, footer .navbar-content {
  justify-content: space-between;
}
footer .footer-logo div {
  min-height: 62.61px;
  max-width: 200px;
}
footer .footer-links {
  align-content: center;
  gap: 48px;
}

.navbar-container {
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.6s ease;
}

.navbar-content {
  padding-top: 40px;
  padding-bottom: 40px;
  display: contents;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.nav-logo {
  display: FLEX;
  order: 1;
}
.nav-logo .nav-logo--logo {
  max-height: 60px;
  height: 100%;
}

.burger-menu {
  cursor: pointer;
  height: 16px;
  overflow: hidden;
  position: relative;
  width: 21px;
  margin: 2px;
  order: 2;
  display: inline-block;
}
.burger-menu span {
  background-color: #0E7C73;
  height: 4px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  top: 6px;
}
.burger-menu span:before {
  background-color: #0E7C73;
  height: 4px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  content: "";
  top: -6px;
}
.burger-menu span:after {
  background-color: #0E7C73;
  height: 4px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  bottom: -6px;
  content: "";
}
.burger-menu.open span {
  left: -21px;
}
.burger-menu.open span:before {
  left: 100%;
  top: 0;
  transform: rotate(45deg);
}
.burger-menu.open span:after {
  bottom: 0;
  left: 100%;
  transform: rotate(-45deg);
}
.burger-menu:hover span,
.burger-menu:hover span:before,
.burger-menu:hover span:after {
  background-color: rgb(46.5657458564, 79.6519337017, 175.2342541436);
}

.nav-divider {
  order: 2;
  height: 2px;
  background-color: #F5F7FA;
}

.nav-list-container {
  order: 3;
  background-color: white;
  height: 0;
  overflow: auto;
  flex-grow: initial;
  transition: all 0.6s ease;
  /* stylelint-disable-next-line selector-max-compound-selectors */
  /* stylelint-disable-next-line selector-max-compound-selectors */
}
.nav-list-container .nav-list {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 24px 48px;
}
.nav-list-container .nav-list li {
  list-style: none;
}
.nav-list-container .nav-list li .nav-link {
  color: #14181F;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}
@media (min-width: 0) {
  .nav-list-container .nav-list li .nav-link {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .nav-list-container .nav-list li .nav-link {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .nav-list-container .nav-list li .nav-link {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.nav-list-container .nav-list li .nav-link:hover {
  color: #0E7C73;
}
.nav-list-container .nav-list li:not(.nav-dropdown) .nav-link:not(.dropdown-button):hover,
.nav-list-container .nav-list li .nav-link--active:hover,
.nav-list-container .nav-list li .nav-link--active {
  padding-left: 8px;
  color: #0E7C73;
}
.nav-list-container .nav-list li .dropdown-content {
  flex-direction: column;
  gap: 16px;
  max-height: 0;
  height: auto !important;
  overflow: hidden;
  padding: 0;
  transition: all 0.6s ease;
  /* stylelint-disable-next-line selector-max-compound-selectors */
}
.nav-list-container .nav-list li .dropdown-content li {
  padding: 12px 0 0 24px;
}
.nav-list-container .nav-list li .dropdown-button {
  align-items: start;
  display: flex;
  gap: 8px;
}
.nav-list-container .nav-list li .dropdown-button i {
  transform: rotate(90deg);
  transition: all 0.2s ease-in-out;
  /* stylelint-disable-next-line selector-max-compound-selectors */
}
.nav-list-container .nav-list li .dropdown-button i:before {
  font-weight: 700;
}
@media (min-width: 0) {
  .nav-list-container .nav-list li .dropdown-button i:before {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .nav-list-container .nav-list li .dropdown-button i:before {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .nav-list-container .nav-list li .dropdown-button i:before {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.nav-list-container .nav-list li .dropdown-button.active-dropdown i {
  transform: rotate(270deg);
  transition: all 0.2s ease-in-out;
}
.nav-list-container .nav-list li .dropdown-content-active {
  height: auto !important;
  max-height: 100dvh !important;
}

.nav--open.navbar-container {
  min-height: 100dvh;
}
.nav--open.navbar-container .nav-list-container {
  flex-grow: 1;
}

@media (min-width: 900px) {
  .navbar-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .navbar-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .burger-menu {
    display: none !important;
  }
  .navbar,
  .nav-list-container {
    order: 1;
    width: auto;
    flex: 0 0 auto; /* width based on content */
    margin: 0;
    padding: 0;
    height: auto;
    display: flex;
    overflow: visible;
  }
  .nav-divider {
    flex: 1 1 100%; /* width based on content */
  }
  .nav-list-container {
    height: auto;
    display: flex;
    height: auto !important;
    overflow: visible !important;
    flex-grow: 0 !important;
    display: flex !important;
  }
  .nav-list-container .nav-list {
    align-items: center;
    flex-direction: row;
    padding: 0;
  }
  .nav-list-container .nav-list > li {
    position: relative;
    padding: 0;
  }
  .nav-list-container .nav-list > li:not(.nav-dropdown) > .nav-link:not(.dropdown-button):before, .nav-list-container .nav-list > li:not(.nav-dropdown) > .nav-link--active:before {
    position: absolute;
    left: calc(50% - 2px);
    top: 100%;
  }
  .nav-list-container .nav-list > li:not(.nav-dropdown) > .nav-link:not(.dropdown-button):hover, .nav-list-container .nav-list > li:not(.nav-dropdown) > .nav-link--active:hover,
  .nav-list-container .nav-list > li .nav-link--active {
    padding-left: 0;
  }
  .nav-list-container .dropdown-content {
    background-color: white;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    gap: 0;
    height: 0;
    min-width: 220px;
    border-radius: 0 20px;
    top: calc(100% + 8px);
    position: absolute;
    z-index: 1;
  }
  .nav-list-container .dropdown-content .nav-link:hover {
    padding-left: 0;
  }
  .nav-list-container .dropdown-content .nav-link:before {
    display: none;
  }
  .nav-list-container .dropdown-content li:first-child {
    padding: 16px 16px 12px !important;
  }
  .nav-list-container .dropdown-content li {
    padding: 0 16px 12px !important;
  }
  .nav-list-container .dropdown-content li:last-child {
    padding: 0 16px 16px !important;
  }
  .nav--open.navbar-container {
    min-height: auto;
  }
  .nav--open.navbar-container .nav-list-container {
    flex-grow: 0;
  }
}
.pagination {
  text-align: center;
}
.pagination .pagination__list {
  display: inline-block;
}
.pagination .pagination__list a, .pagination .pagination__list .nav-list-container .nav-list li .dropdown-button, .nav-list-container .nav-list li .pagination .pagination__list .dropdown-button {
  border-radius: 2px;
  color: #14181F;
  float: left;
  margin: 0 4px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.pagination .pagination__list a.active-page, .pagination .pagination__list .nav-list-container .nav-list li .active-page.dropdown-button, .nav-list-container .nav-list li .pagination .pagination__list .active-page.dropdown-button {
  background-color: #26418F;
  color: white;
}
.pagination .pagination__list a:hover:not(.active-page), .pagination .pagination__list .nav-list-container .nav-list li .dropdown-button:hover:not(.active-page), .nav-list-container .nav-list li .pagination .pagination__list .dropdown-button:hover:not(.active-page) {
  background-color: #C7CDD8;
}

.breadcrumb {
  list-style: none;
  padding: 0;
}
.breadcrumb li {
  display: inline;
  /* stylelint-disable-next-line no-descending-specificity */
}
.breadcrumb li a:hover, .breadcrumb .nav-list-container .nav-list li .dropdown-button:hover, .nav-list-container .nav-list .breadcrumb li .dropdown-button:hover {
  color: rgb(29.4342541436, 50.3480662983, 110.7657458564);
}
.breadcrumb li + li:before {
  color: #14181F;
  content: ">";
  padding: 8px;
}

/* Side Navigation */
.menu-sidenav {
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 2;
}
.menu-sidenav .burger-box {
  background-color: white;
  cursor: pointer;
  display: inline-block;
  left: 0;
  padding: 20px 20px 18px;
  position: absolute;
  transition: 0.6s all;
}
.menu-sidenav .burger-box .burger-sidenav {
  cursor: pointer;
  height: 16px;
  overflow: hidden;
  position: relative;
  width: 21px;
  margin: 2px;
  display: inline-block;
}
.menu-sidenav .burger-box .burger-sidenav span {
  background-color: #0E7C73;
  height: 2px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  top: 7px;
}
.menu-sidenav .burger-box .burger-sidenav span:before {
  background-color: #0E7C73;
  height: 2px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  content: "";
  top: -7px;
}
.menu-sidenav .burger-box .burger-sidenav span:after {
  background-color: #0E7C73;
  height: 2px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  bottom: -7px;
  content: "";
}
.menu-sidenav .burger-box .burger-sidenav.open span {
  left: -21px;
}
.menu-sidenav .burger-box .burger-sidenav.open span:before {
  left: 100%;
  top: 0;
  transform: rotate(45deg);
}
.menu-sidenav .burger-box .burger-sidenav.open span:after {
  bottom: 0;
  left: 100%;
  transform: rotate(-45deg);
}
.menu-sidenav .burger-box .burger-sidenav:hover span,
.menu-sidenav .burger-box .burger-sidenav:hover span:before,
.menu-sidenav .burger-box .burger-sidenav:hover span:after {
  background-color: rgb(46.5657458564, 79.6519337017, 175.2342541436);
}
.menu-sidenav .logo {
  margin-top: 20px;
  vertical-align: top;
  width: 40px;
}
.menu-sidenav .sidenav {
  background-color: rgb(29.4342541436, 50.3480662983, 110.7657458564);
  height: 100%;
  left: 0;
  overflow-x: hidden;
  padding-top: 30px;
  position: fixed;
  top: 0;
  transition: 0.6s all;
  width: 0;
  z-index: 1;
}
.menu-sidenav .sidenav .nav-list {
  padding: 0 50px;
}
.menu-sidenav .sidenav .nav-list li {
  list-style: none;
}
.menu-sidenav .sidenav .nav-list a, .menu-sidenav .sidenav .nav-list-container .nav-list li .dropdown-button, .nav-list-container .menu-sidenav .sidenav .nav-list li .dropdown-button {
  border-bottom: 2px solid transparent;
  color: #14181F;
  display: block;
  margin: 10px 0;
  padding: 10px 0;
  text-align: left;
  transition: 0.2s all;
}
.menu-sidenav .sidenav .nav-list a:hover, .menu-sidenav .sidenav .nav-list-container .nav-list li .dropdown-button:hover, .nav-list-container .menu-sidenav .sidenav .nav-list li .dropdown-button:hover {
  border-bottom: 2px solid #F5F7FA;
}

/**
 * Meerkeep design tokens (Web v1, shared by every tool).
 * Theme colours live in general/core/_colors.scss; these are the app-specific extras.
 */
/* Page bodies of the Meerkeep screens + small resets on top of the template defaults */
.app-body,
.auth-body {
  background-color: #EDF0F5;
  color: #14181F;
  min-height: 100dvh;
  min-width: 0;
}

.app-body.drawer-locked {
  overflow: hidden;
}

.app-body [hidden],
.auth-body [hidden] {
  display: none !important;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.app-body .skip-link,
.app-body .skip-link:hover {
  background: #14181F;
  border-radius: 0 0 14px;
  color: white;
  left: 0;
  padding: 8px 16px;
  position: absolute;
  top: -100px;
  z-index: 100;
}

.app-body .skip-link:focus {
  top: 0;
}

.inline-form {
  display: contents;
}

.plain-list, .bd-cal__rows, .bd-day__list, .bd-late__list, .bd-due__list, .by-project, .alerts, .project-bars, .legend, .pending-list, .project-tasks, .people-chips, .member-list, .who-members, .tool-cards, .auth-tools, .progress-list, .chip-list, .filter-list {
  display: block;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.icon {
  display: block;
  flex-shrink: 0;
}

/* Brand: the meerkat mark, the wordmark, and the small per-tool badges */
.app-body .brand,
.auth-body .brand,
.landing-body .brand,
.app-body .brand:hover,
.auth-body .brand:hover,
.landing-body .brand:hover {
  align-items: center;
  color: #14181F;
  display: inline-flex;
  gap: 10px;
  text-decoration: none;
}

.brand--large {
  gap: 14px;
}

.brand__name {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.brand--large .brand__name {
  font-size: 30px;
}

.app-sidebar .brand__name {
  font-size: 17px;
  white-space: nowrap;
}

.brand__tool--teal {
  color: #0E7C73;
}

.brand__tool--blue {
  color: #26418F;
}

.brand__tool--violet {
  color: #4C2D9E;
}

.logo-mark {
  display: block;
}

.logo-mark__tile {
  fill: #14181F;
}

.logo-mark__body {
  fill: white;
}

.logo-mark__line {
  stroke: #14181F;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.logo-mark__spark {
  stroke: #7FA0F0;
  stroke-linecap: round;
  stroke-width: 3.4;
}

/* "Continuing to Time" badge on the auth card */
.tool-badge {
  align-items: center;
  align-self: flex-start;
  border-radius: 999px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
}

.tool-badge--teal {
  background: #DDF1EE;
  color: #0B6158;
}

.tool-badge--violet {
  background: #EBE6FA;
  color: #3E2384;
}

.tool-badge--blue {
  background: #E4E9F6;
  color: #1B2F6B;
}

.tool-badge--amber {
  background: #F5E8D3;
  color: #6E4200;
}

.tool-badge--rose {
  background: #FBE4EB;
  color: #8A2648;
}

.tool-badge--slate {
  background: #E3E7EE;
  color: #2B313B;
}

/* Modifiers for the template buttons */
.btn--pill {
  border-radius: 999px;
}

.btn--block {
  width: 100%;
}

.btn-primary, button, .btn {
  box-shadow: 0 6px 16px rgba(38, 65, 143, 0.3);
}

.btn-primary:hover, button:hover, .btn:hover,
.btn-primary:active,
button:active,
.btn:active {
  background-color: #1B2F6B;
  border-color: #1B2F6B;
}

.btn-outline {
  background-color: white;
}

/* Round icon-only buttons (also used on <summary> and <a>) */
.icon-btn {
  align-items: center;
  aspect-ratio: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  box-sizing: border-box;
  color: #5C6472;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  list-style: none;
  min-width: 0;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  width: 40px;
}

.icon-btn::-webkit-details-marker {
  display: none;
}

.icon-btn:hover,
.icon-btn:active {
  background: #E4E9F6;
  border-color: transparent;
  color: #26418F;
}

.icon-btn:focus-visible {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

.icon-btn--sm {
  height: 32px;
  width: 32px;
}

.icon-btn--primary {
  background: #26418F;
  color: white;
}

.icon-btn--primary:hover,
.icon-btn--primary:active {
  background: #1B2F6B;
  color: white;
}

.icon-btn--done {
  background: #DDF1EE;
  color: #0E7C73;
}

.icon-btn--done:hover {
  background: rgb(199.325, 232.075, 227.1625);
  color: #0B6158;
}

.icon-btn--danger:hover,
.icon-btn--danger:active {
  background: #F9E3E1;
  color: #B3261E;
}

/* Floating "New reminder" button (mobile only) */
.fab {
  align-items: center;
  background: #26418F;
  border-radius: 999px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 10px 24px rgba(38, 65, 143, 0.36);
  color: white;
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  gap: 9px;
  height: 54px;
  padding: 0 22px;
  position: fixed;
  right: 16px;
  text-decoration: none;
  z-index: 20;
}

.app-body .app-shell .fab,
.app-body .app-shell .fab:hover {
  color: white;
}

@media (min-width: 900px) {
  .fab {
    display: none;
  }
}
/* Social login */
.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-btn {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 14px;
  box-shadow: none;
  color: #14181F;
  cursor: pointer;
  display: flex;
  font-size: 15.5px;
  font-weight: 600;
  gap: 11px;
  height: 52px;
  justify-content: center;
  padding: 0 16px;
  width: 100%;
}

.social-btn:hover,
.social-btn:active {
  background: #F5F7FA;
  border-color: #DFE3EB;
  color: #14181F;
}

.social-btn--apple {
  background: #14181F;
  border-color: #14181F;
  color: white;
}

.social-btn--apple:hover,
.social-btn--apple:active {
  background: #2A2F3A;
  border-color: #2A2F3A;
  color: white;
}

/* Form fields used across the Meerkeep screens */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.field--grow {
  flex-grow: 1;
}

.field__label,
.field legend {
  color: #3E4652;
  font-size: 13.5px;
  font-weight: 600;
}

.field__label-row {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.field__aside-link {
  font-size: 13.5px;
  font-weight: 600;
}

.field .field__input,
.invite-email .field__input {
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 14px;
  box-sizing: border-box;
  color: #14181F;
  font-size: 16px;
  font-weight: 500;
  height: 52px;
  margin: 0;
  min-width: 0;
  padding: 0 16px;
  width: 100%;
}

.field textarea.field__input {
  height: auto;
  line-height: 1.4;
  min-height: 72px;
  padding: 12px 16px;
  resize: vertical;
}

.field .field__input:focus,
.invite-email .field__input:focus {
  border-color: #26418F;
  box-shadow: 0 0 0 3px #E4E9F6;
  outline: none;
}

.field .field__input:disabled {
  background: #F5F7FA;
  border-color: #E7EBF1;
  color: #14181F;
  pointer-events: none;
}

.field .field__input--lg {
  font-size: 19px;
  font-weight: 600;
  height: 58px;
}

.field .field__input--title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.field .field__input::placeholder {
  color: #737C8A;
  font-weight: 400;
  opacity: 1;
}

.field select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Search */
.search-field {
  align-items: center;
  display: flex;
  min-width: 0;
  position: relative;
}

.search-field__icon {
  color: #737C8A;
  left: 14px;
  pointer-events: none;
  position: absolute;
}

.search-field .search-field__input {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #DFE3EB;
  border-radius: 999px;
  box-sizing: border-box;
  color: #14181F;
  font-size: 15px;
  height: 46px;
  margin: 0;
  padding: 0 16px 0 44px;
  width: 100%;
}

.search-field .search-field__input:focus {
  border-color: #26418F;
  box-shadow: 0 0 0 3px #E4E9F6;
  outline: none;
}

.search-field .search-field__input::placeholder {
  color: #737C8A;
  opacity: 1;
}

/* Checkbox row (remember me) */
.checkbox-row {
  align-items: center;
  color: #5C6472;
  cursor: pointer;
  display: flex;
  font-size: 14.5px;
  font-weight: 500;
  gap: 10px;
}

.checkbox-row__input {
  accent-color: #26418F;
  height: 18px;
  margin: 0;
  width: 18px;
}

/* Switch row (toggle setting) */
.switch-row {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 0;
  position: relative;
}

.switch-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.switch-row__title {
  color: #14181F;
  font-size: 15px;
  font-weight: 600;
}

.switch-row__hint {
  color: #737C8A;
  font-size: 12.5px;
  font-weight: 400;
}

.switch-row .switch {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.switch__track {
  background: #C7CDD8;
  border-radius: 999px;
  display: block;
  flex-shrink: 0;
  height: 28px;
  position: relative;
  transition: background-color 0.2s ease;
  width: 48px;
}

.switch__track:after {
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
  content: "";
  height: 24px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.2s ease;
  width: 24px;
}

.switch-row .switch:checked ~ .switch__track {
  background: #0E7C73;
}

.switch-row .switch:checked ~ .switch__track:after {
  transform: translateX(20px);
}

.switch-row .switch:focus-visible ~ .switch__track {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

/* Colour swatches (group colour) */
.swatches {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.swatches__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.swatch {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.swatch__radio {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.swatch__dot {
  align-items: center;
  border: 2px solid transparent;
  border-radius: 50%;
  box-sizing: border-box;
  color: white;
  display: flex;
  height: 34px;
  justify-content: center;
  transition: transform 0.2s ease;
  width: 34px;
}

.swatch__dot .icon {
  opacity: 0;
}

.swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px currentcolor;
  transform: scale(1.05);
}

.swatch__radio:checked ~ .swatch__dot .icon {
  opacity: 1;
}

.swatch__radio:focus-visible ~ .swatch__dot {
  outline: 2px solid #26418F;
  outline-offset: 3px;
}

.swatch--teal .swatch__dot {
  background: #0E7C73;
  color: white;
}

.swatch--teal .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #0E7C73;
}

.swatch--violet .swatch__dot {
  background: #4C2D9E;
  color: white;
}

.swatch--violet .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #4C2D9E;
}

.swatch--blue .swatch__dot {
  background: #26418F;
  color: white;
}

.swatch--blue .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #26418F;
}

.swatch--amber .swatch__dot {
  background: #8A5200;
  color: white;
}

.swatch--amber .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #8A5200;
}

.swatch--rose .swatch__dot {
  background: #A8325A;
  color: white;
}

.swatch--rose .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #A8325A;
}

.swatch--slate .swatch__dot {
  background: #3E4652;
  color: white;
}

.swatch--slate .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #3E4652;
}

/* Avatars, avatar stacks and group markers */
.avatar {
  align-items: center;
  background: #E4E9F6;
  border-radius: 50%;
  box-sizing: border-box;
  color: #26418F;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  letter-spacing: 0.2px;
  width: 32px;
}

.avatar--xs {
  border: 2px solid white;
  font-size: 10px;
  height: 26px;
  width: 26px;
}

.avatar--sm {
  font-size: 11px;
  height: 30px;
  width: 30px;
}

.avatar--md {
  height: 36px;
  width: 36px;
}

.avatar--dark {
  background: #14181F;
  color: white;
}

.avatar--done {
  background: #DDF1EE;
  color: #0B6158;
}

.avatar--more {
  background: #EDF0F5;
  color: #5C6472;
}

.avatar--outline {
  background: transparent;
  border: 1px dashed #C7CDD8;
  color: #737C8A;
}

.avatar-stack {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
}

.avatar-stack .avatar + .avatar {
  margin-left: -8px;
}

.group-dot {
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

.group-dot--inline {
  height: 7px;
  margin-right: 2px;
  vertical-align: middle;
  width: 7px;
}

.group-badge {
  align-items: center;
  border-radius: 12px;
  color: white;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.group-badge--sm {
  border-radius: 8px;
  font-size: 11px;
  height: 24px;
  width: 24px;
}

.group-badge--lg {
  border-radius: 14px;
  font-size: 17px;
  height: 46px;
  width: 46px;
}

.group-badge--xl {
  border-radius: 20px;
  font-size: 26px;
  height: 72px;
  width: 72px;
}

.group-dot--teal {
  background: #0E7C73;
}

.group-badge--teal {
  background: #0E7C73;
}

.group-dot--violet {
  background: #4C2D9E;
}

.group-badge--violet {
  background: #4C2D9E;
}

.group-dot--blue {
  background: #26418F;
}

.group-badge--blue {
  background: #26418F;
}

.group-dot--amber {
  background: #8A5200;
}

.group-badge--amber {
  background: #8A5200;
}

.group-dot--rose {
  background: #A8325A;
}

.group-badge--rose {
  background: #A8325A;
}

.group-dot--slate {
  background: #3E4652;
}

.group-badge--slate {
  background: #3E4652;
}

/* Sidebar filter list (desktop) and chip row (mobile) */
.filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-body .app-sidebar .filter-link {
  align-items: center;
  border-radius: 12px;
  color: #14181F;
  display: flex;
  font-size: 14.5px;
  font-weight: 500;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.app-body .app-sidebar .filter-link:hover {
  background: rgba(20, 24, 31, 0.05);
  color: #14181F;
}

.app-body .app-sidebar .filter-link--active,
.app-body .app-sidebar .filter-link--active:hover {
  background: white;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  color: #14181F;
  font-weight: 700;
}

.filter-link__label {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-link__count {
  color: #737C8A;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.chip-row {
  margin: 0 -16px;
  overflow-x: auto;
  padding: 0 16px 12px;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip-list {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: max-content;
}

.app-body .chip-row .chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid #DFE3EB;
  border-radius: 999px;
  color: #14181F;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  text-decoration: none;
  white-space: nowrap;
}

.app-body .chip-row .chip--active {
  background: #14181F;
  border-color: #14181F;
  color: white;
  font-weight: 700;
}

@media (min-width: 900px) {
  .chip-row {
    display: none;
  }
}
/* <details> based dropdown menu */
.menu {
  position: relative;
}

.menu__list {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
}

.menu__list .menu__item {
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  color: #14181F;
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-weight: 500;
  justify-content: flex-start;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}

.menu__list .menu__item:hover,
.menu__list .menu__item:active {
  background: #F5F7FA;
  border-color: transparent;
  color: #14181F;
}

.menu__list .menu__item--danger {
  color: #B3261E;
}

.menu__list .menu__item--danger:hover {
  background: #F9E3E1;
  color: #B3261E;
}

/* App shell: sidebar + main column, drawer on small screens */
.app-shell {
  background-color: #EDF0F5;
  background-image: radial-gradient(90% 60% at 6% 0%, rgba(38, 65, 143, 0.14), rgba(38, 65, 143, 0) 62%), radial-gradient(80% 55% at 100% 100%, rgba(14, 124, 115, 0.14), rgba(14, 124, 115, 0) 60%);
  display: flex;
  min-height: 100dvh;
}

.app-sidebar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  border-right: 1px solid rgba(20, 24, 31, 0.07);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100dvh;
  left: 0;
  overflow-y: auto;
  padding: 20px 16px;
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  width: min(272px, 86vw);
  z-index: 40;
}

.drawer--open .app-sidebar {
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  transform: translateX(0);
}

.drawer-backdrop {
  background: rgba(20, 24, 31, 0.4);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.3s ease;
  z-index: 35;
}

.drawer--open .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.app-sidebar__brand {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-body .app-sidebar .app-nav__link {
  align-items: center;
  border-radius: 12px;
  color: #5C6472;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

button.app-nav__link {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.app-body .app-sidebar .app-nav__link:hover {
  background: rgba(20, 24, 31, 0.05);
  color: #14181F;
}

.app-body .app-sidebar .app-nav__link--active,
.app-body .app-sidebar .app-nav__link--active:hover {
  background: #26418F;
  box-shadow: 0 6px 16px rgba(38, 65, 143, 0.3);
  color: white;
}

.app-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-sidebar__label {
  color: #737C8A;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  padding: 0 12px;
  text-transform: uppercase;
}

.app-sidebar__spacer {
  flex-grow: 1;
}

.app-body .app-sidebar .app-sidebar__user {
  align-items: center;
  border-radius: 14px;
  color: #14181F;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.app-body .app-sidebar .app-sidebar__user:hover {
  background: rgba(20, 24, 31, 0.05);
  color: #14181F;
}

.app-sidebar__user-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-sidebar__user-name {
  font-size: 14.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar__user-email {
  color: #737C8A;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 100dvh;
  min-width: 0;
}

.app-topbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(20, 24, 31, 0.07);
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  height: 58px;
  padding: 0 12px 0 8px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.app-topbar .brand {
  flex-grow: 1;
}

.app-topbar .app-topbar__user {
  align-items: center;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.app-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  padding: 16px 16px 96px;
}

@media (min-width: 900px) {
  .app-sidebar {
    box-shadow: none;
    flex-shrink: 0;
    position: sticky;
    transform: none;
    width: 272px;
  }
  .app-sidebar__close,
  .app-topbar,
  .drawer-backdrop {
    display: none;
  }
  .app-content {
    padding: 32px;
  }
}
@media (min-width: 1200px) {
  .app-content {
    padding: 40px;
  }
}
/* List + side panel layout, page header, panel, empty states, section headings, progress lists */
.split-view {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 24px;
  min-width: 0;
}

.split-view__list {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px;
  min-width: 0;
}

.page-header {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.page-header__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-header__eyebrow {
  color: #5C6472;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.page-header__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

.page-header__actions {
  align-items: center;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  min-width: 0;
}

.page-header__actions .search-field {
  flex-grow: 1;
  max-width: 340px;
}

.page-header .page-header__new {
  display: none;
  flex-shrink: 0;
}

.section-heading {
  align-items: center;
  color: #5C6472;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 9px;
  letter-spacing: 1.2px;
  margin: 0;
  padding: 8px 4px 0;
  text-transform: uppercase;
}

.section-heading:after {
  background: #DFE3EB;
  content: "";
  flex-grow: 1;
  height: 1px;
}

.section-heading--overdue {
  color: #B3261E;
}

.reminder-sections,
.reminder-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Side panel (frame) */
.side-panel {
  display: block;
}

.side-panel:has(.panel) {
  background: #EDF0F5;
  background-image: radial-gradient(90% 60% at 6% 0%, rgba(38, 65, 143, 0.14), rgba(38, 65, 143, 0) 62%), radial-gradient(80% 55% at 100% 100%, rgba(14, 124, 115, 0.14), rgba(14, 124, 115, 0) 60%);
  inset: 0;
  overflow-y: auto;
  padding: 16px;
  position: fixed;
  z-index: 45;
}

.panel-empty {
  display: none;
}

.panel {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.panel__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.panel__title {
  color: #5C6472;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

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

.panel__save {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.panel__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel__actions .btn-primary, .panel__actions button, .panel__actions .btn,
.panel__actions .btn-outline,
.panel__actions .btn-outline-danger {
  flex: 1 1 120px;
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
}

.panel__actions .panel__delete {
  margin-left: auto;
}

.panel__actions--footer {
  border-top: 1px solid #E7EBF1;
  padding-top: 16px;
}

.panel__footnote {
  color: #737C8A;
  font-size: 12.5px;
}

/* Detail cards inside the panel (When / Repeats / Who) */
.detail-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-card {
  background: #F5F7FA;
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
}

.detail-card--static {
  cursor: default;
  grid-column: 1/-1;
}

.detail-card__label {
  align-items: center;
  color: #737C8A;
  display: flex;
  font-size: 11.5px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.detail-card .detail-card__input {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: #14181F;
  font-size: 14.5px;
  font-weight: 600;
  height: auto;
  margin: 0;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.detail-card .detail-card__input:focus {
  outline: none;
}

.detail-card .detail-card__input:disabled {
  color: #14181F;
  opacity: 1;
}

.detail-card__value {
  align-items: center;
  color: #14181F;
  display: flex;
  font-size: 14.5px;
  font-weight: 600;
  gap: 8px;
}

/* Progress list */
.progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress__header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.progress__title {
  font-size: 15px;
  font-weight: 700;
}

.progress__count {
  color: #737C8A;
  font-size: 13px;
  font-weight: 600;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.progress-item {
  align-items: center;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  padding: 8px 4px;
}

.progress-item__name {
  flex-grow: 1;
  font-size: 14.5px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-item__status {
  color: #737C8A;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.progress-item--done .progress-item__status {
  color: #0B6158;
  font-weight: 600;
}

/* Empty state */
.empty-state {
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed #C7CDD8;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 40px 24px;
  text-align: center;
}

.empty-state__title {
  font-size: 16px;
  font-weight: 700;
}

.empty-state__body {
  color: #5C6472;
  font-size: 14px;
}

@media (min-width: 900px) {
  .split-view {
    align-items: flex-start;
    flex-direction: row;
    gap: 24px;
  }
  .page-header .page-header__new {
    display: inline-flex;
  }
  .side-panel {
    flex-shrink: 0;
    position: sticky;
    top: 32px;
    width: 360px;
  }
  .side-panel:has(.panel) {
    background: none;
    inset: auto;
    overflow: visible;
    padding: 0;
    position: sticky;
    z-index: auto;
  }
  .panel-empty {
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed #C7CDD8;
    border-radius: 20px;
    box-sizing: border-box;
    color: #737C8A;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 12px;
    justify-content: center;
    min-height: 320px;
    padding: 32px;
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .side-panel {
    width: 420px;
  }
}
/* Page */
* {
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-width: 100dvh;
}

.container {
  float: none;
  width: 100%;
}

/* Log in / sign up / password pages (layout: auth) */
.auth-split {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.auth-hero {
  background-color: #EDF0F5;
  background-image: radial-gradient(90% 60% at 6% 0%, rgba(38, 65, 143, 0.14), rgba(38, 65, 143, 0) 62%), radial-gradient(80% 55% at 100% 100%, rgba(14, 124, 115, 0.14), rgba(14, 124, 115, 0) 60%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  padding: 24px 20px;
}

.auth-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}

.auth-hero__headline {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.05;
  text-wrap: pretty;
}

.auth-hero__footer {
  color: #5C6472;
  font-size: 13px;
}

.auth-tools {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.auth-tool {
  align-items: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid transparent;
  border-radius: 18px;
  display: flex;
  gap: 14px;
  padding: 14px 16px;
}

.auth-tool--current {
  background: white;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
}

.auth-tool__icon {
  align-items: center;
  border-radius: 12px;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.auth-tool__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
}

.auth-tool__name {
  font-size: 17px;
  font-weight: 700;
}

.auth-tool__tagline {
  color: #5C6472;
  font-size: 14px;
}

.auth-tool__domain {
  color: #5C6472;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.auth-tool-- .auth-tool__icon {
  background: #DDF1EE;
  color: #0B6158;
}

.auth-tool--current.auth-tool-- {
  border-color: #0E7C73;
}

.auth-tool--current.auth-tool-- .auth-tool__icon {
  background: #0E7C73;
  color: white;
}

.auth-tool--current.auth-tool-- .auth-tool__domain {
  color: #0E7C73;
  font-weight: 700;
}

.auth-tool-- .auth-tool__icon {
  background: #EBE6FA;
  color: #3E2384;
}

.auth-tool--current.auth-tool-- {
  border-color: #4C2D9E;
}

.auth-tool--current.auth-tool-- .auth-tool__icon {
  background: #4C2D9E;
  color: white;
}

.auth-tool--current.auth-tool-- .auth-tool__domain {
  color: #4C2D9E;
  font-weight: 700;
}

.auth-tool-- .auth-tool__icon {
  background: #E4E9F6;
  color: #1B2F6B;
}

.auth-tool--current.auth-tool-- {
  border-color: #26418F;
}

.auth-tool--current.auth-tool-- .auth-tool__icon {
  background: #26418F;
  color: white;
}

.auth-tool--current.auth-tool-- .auth-tool__domain {
  color: #26418F;
  font-weight: 700;
}

.auth-tool-- .auth-tool__icon {
  background: #F5E8D3;
  color: #6E4200;
}

.auth-tool--current.auth-tool-- {
  border-color: #8A5200;
}

.auth-tool--current.auth-tool-- .auth-tool__icon {
  background: #8A5200;
  color: white;
}

.auth-tool--current.auth-tool-- .auth-tool__domain {
  color: #8A5200;
  font-weight: 700;
}

.auth-tool-- .auth-tool__icon {
  background: #FBE4EB;
  color: #8A2648;
}

.auth-tool--current.auth-tool-- {
  border-color: #A8325A;
}

.auth-tool--current.auth-tool-- .auth-tool__icon {
  background: #A8325A;
  color: white;
}

.auth-tool--current.auth-tool-- .auth-tool__domain {
  color: #A8325A;
  font-weight: 700;
}

.auth-tool-- .auth-tool__icon {
  background: #E3E7EE;
  color: #2B313B;
}

.auth-tool--current.auth-tool-- {
  border-color: #3E4652;
}

.auth-tool--current.auth-tool-- .auth-tool__icon {
  background: #3E4652;
  color: white;
}

.auth-tool--current.auth-tool-- .auth-tool__domain {
  color: #3E4652;
  font-weight: 700;
}

.auth-main {
  align-items: center;
  background: white;
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding: 32px 20px;
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 460px;
  width: 100%;
}

.auth-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-card__title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.1;
}

.auth-card__subtitle {
  color: #5C6472;
  font-size: 15.5px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-divider {
  align-items: center;
  color: #737C8A;
  display: flex;
  font-size: 11.5px;
  font-weight: 700;
  gap: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.auth-divider:before,
.auth-divider:after {
  background: #DFE3EB;
  content: "";
  flex-grow: 1;
  height: 1px;
}

.auth-legal {
  color: #737C8A;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.auth-switch {
  align-items: center;
  color: #5C6472;
  display: flex;
  font-size: 14.5px;
  gap: 7px;
  justify-content: center;
}

.auth-card .auth-switch__link {
  font-weight: 700;
}

/* Join a group via invite link */
.join-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.join-card .btn-primary, .join-card button, .join-card .btn {
  margin-top: 8px;
}

@media (min-width: 900px) {
  .auth-split {
    flex-direction: row;
  }
  .auth-hero {
    flex-shrink: 0;
    min-height: 100dvh;
    padding: 48px;
    position: sticky;
    top: 0;
    width: 44%;
  }
  .auth-hero__headline {
    font-size: 48px;
    letter-spacing: -2px;
  }
  .auth-tools {
    display: flex;
    padding-top: 8px;
  }
  .auth-main {
    padding: 48px;
  }
}
/* meerkeep.com — the brand page with a door into each tool */
.landing-body {
  background-color: #EDF0F5;
  background-image: radial-gradient(90% 60% at 6% 0%, rgba(38, 65, 143, 0.14), rgba(38, 65, 143, 0) 62%), radial-gradient(80% 55% at 100% 100%, rgba(14, 124, 115, 0.14), rgba(14, 124, 115, 0) 60%);
  color: #14181F;
  min-height: 100dvh;
  min-width: 0;
}

.landing-body [hidden] {
  display: none !important;
}

.landing {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0 auto;
  max-width: 1040px;
  min-height: 100dvh;
  padding: 24px 20px 32px;
  width: 100%;
}

.landing__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.landing__account {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing__signed-in {
  color: #5C6472;
  font-size: 14px;
  font-weight: 500;
}

.landing__hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.landing__headline {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.05;
  text-wrap: pretty;
}

.landing__subline {
  color: #5C6472;
  font-size: 17px;
  line-height: 1.5;
}

.landing__footer {
  color: #5C6472;
  font-size: 13px;
  margin-top: auto;
}

.tool-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.landing-body .tool-card,
.landing-body .tool-card:hover {
  background: white;
  border: 1.5px solid #E7EBF1;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  color: #14181F;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  min-height: 220px;
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.landing-body a.tool-card:hover, .landing-body .nav-list-container .nav-list li .tool-card.dropdown-button:hover, .nav-list-container .nav-list li .landing-body .tool-card.dropdown-button:hover {
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  transform: translateY(-2px);
}

.landing-body .tool-card--soon {
  background: rgba(255, 255, 255, 0.55);
  border-style: dashed;
  color: #5C6472;
}

.tool-card__icon {
  align-items: center;
  border-radius: 14px;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.tool-card__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
}

.tool-card__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.tool-card__tagline {
  color: #5C6472;
  font-size: 15px;
  line-height: 1.45;
}

.tool-card__go {
  align-items: center;
  display: inline-flex;
  font-size: 14.5px;
  font-weight: 700;
  gap: 6px;
}

.tool-card--teal .tool-card__icon {
  background: #DDF1EE;
  color: #0B6158;
}

.tool-card--teal .tool-card__go {
  color: #0E7C73;
}

.landing-body a.tool-card--teal:hover, .landing-body .nav-list-container .nav-list li .tool-card--teal.dropdown-button:hover, .nav-list-container .nav-list li .landing-body .tool-card--teal.dropdown-button:hover {
  border-color: #0E7C73;
}

.tool-card--violet .tool-card__icon {
  background: #EBE6FA;
  color: #3E2384;
}

.tool-card--violet .tool-card__go {
  color: #4C2D9E;
}

.landing-body a.tool-card--violet:hover, .landing-body .nav-list-container .nav-list li .tool-card--violet.dropdown-button:hover, .nav-list-container .nav-list li .landing-body .tool-card--violet.dropdown-button:hover {
  border-color: #4C2D9E;
}

.tool-card--blue .tool-card__icon {
  background: #E4E9F6;
  color: #1B2F6B;
}

.tool-card--blue .tool-card__go {
  color: #26418F;
}

.landing-body a.tool-card--blue:hover, .landing-body .nav-list-container .nav-list li .tool-card--blue.dropdown-button:hover, .nav-list-container .nav-list li .landing-body .tool-card--blue.dropdown-button:hover {
  border-color: #26418F;
}

.tool-card--amber .tool-card__icon {
  background: #F5E8D3;
  color: #6E4200;
}

.tool-card--amber .tool-card__go {
  color: #8A5200;
}

.landing-body a.tool-card--amber:hover, .landing-body .nav-list-container .nav-list li .tool-card--amber.dropdown-button:hover, .nav-list-container .nav-list li .landing-body .tool-card--amber.dropdown-button:hover {
  border-color: #8A5200;
}

.tool-card--rose .tool-card__icon {
  background: #FBE4EB;
  color: #8A2648;
}

.tool-card--rose .tool-card__go {
  color: #A8325A;
}

.landing-body a.tool-card--rose:hover, .landing-body .nav-list-container .nav-list li .tool-card--rose.dropdown-button:hover, .nav-list-container .nav-list li .landing-body .tool-card--rose.dropdown-button:hover {
  border-color: #A8325A;
}

.tool-card--slate .tool-card__icon {
  background: #E3E7EE;
  color: #2B313B;
}

.tool-card--slate .tool-card__go {
  color: #3E4652;
}

.landing-body a.tool-card--slate:hover, .landing-body .nav-list-container .nav-list li .tool-card--slate.dropdown-button:hover, .nav-list-container .nav-list li .landing-body .tool-card--slate.dropdown-button:hover {
  border-color: #3E4652;
}

.landing-body .tool-card--soon .tool-card__go {
  color: #737C8A;
}

@media (min-width: 600px) {
  .tool-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .landing {
    padding: 40px 32px 48px;
  }
  .landing__headline {
    font-size: 52px;
    letter-spacing: -2.2px;
  }
}
/* Reminder rows on the home list */
.reminder-row {
  align-items: center;
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  min-height: 66px;
  padding: 8px 10px 8px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reminder-row:hover {
  border-color: #C7CDD8;
}

.reminder-row--selected {
  border-color: #26418F;
  box-shadow: 0 0 0 3px #E4E9F6;
}

.reminder-row--done {
  background: rgba(255, 255, 255, 0.55);
  border-color: transparent;
  box-shadow: none;
}

.reminder-row__time {
  color: #14181F;
  flex-shrink: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  width: 46px;
}

.reminder-row--overdue .reminder-row__time {
  color: #B3261E;
}

.reminder-row--done .reminder-row__time {
  color: #A9B0BC;
}

.app-body .reminder-row .reminder-row__main {
  color: #14181F;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
}

.app-body .reminder-row .reminder-row__main:hover {
  color: #14181F;
}

.reminder-row__title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reminder-row--done .reminder-row__title {
  color: #A9B0BC;
  text-decoration: line-through;
}

.reminder-row__meta {
  color: #737C8A;
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reminder-row__audience {
  align-items: center;
  color: #5C6472;
  display: none;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reminder-row .avatar-stack {
  display: none;
}

.reminder-row__actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 2px;
}

.reminder-row__actions .menu {
  display: none;
}

@media (min-width: 600px) {
  .reminder-row__actions .menu {
    display: block;
  }
}
@media (min-width: 1200px) {
  .reminder-row__audience,
  .reminder-row .avatar-stack {
    display: inline-flex;
  }
}
/* New reminder page */
.compose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  max-width: 1120px;
  width: 100%;
}

.compose__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.compose__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
}

.compose__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.compose__card {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
}

.compose__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.compose__section-title {
  color: #5C6472;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.compose__hint {
  color: #5C6472;
  font-size: 14px;
}

.compose__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.compose__note {
  color: #737C8A;
  font-size: 13px;
}

.compose__buttons {
  display: flex;
  flex-grow: 1;
  gap: 12px;
  justify-content: flex-end;
}

.compose__buttons .btn-primary, .compose__buttons button, .compose__buttons .btn {
  min-width: 200px;
}

/* Quick picks */
.quick-picks {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-picks .quick-pick {
  align-items: flex-start;
  background: #F5F7FA;
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  box-shadow: none;
  color: #14181F;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 60px;
  padding: 10px 12px;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.quick-picks .quick-pick:hover {
  background: white;
  border-color: #C7CDD8;
  color: #14181F;
}

.quick-picks .quick-pick[aria-pressed=true] {
  background: #E4E9F6;
  border-color: #26418F;
  box-shadow: 0 0 0 2px #E4E9F6;
  color: #1B2F6B;
}

.quick-pick__label {
  font-size: 14.5px;
  font-weight: 700;
}

.quick-pick__time {
  color: #737C8A;
  font-size: 12.5px;
  font-weight: 500;
}

.quick-picks .quick-pick[aria-pressed=true] .quick-pick__time {
  color: #26418F;
}

/* Who */
.who-option {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.who-option:hover {
  background: #F5F7FA;
}

.who-option__radio {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.who-option__icon {
  align-items: center;
  background: #EDF0F5;
  border-radius: 50%;
  color: #5C6472;
  display: flex;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.who-option__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1px;
  min-width: 0;
}

.who-option__title {
  font-size: 15px;
  font-weight: 600;
}

.who-option__hint {
  color: #737C8A;
  font-size: 12.5px;
}

.who-option__check {
  align-items: center;
  border: 2px solid #C7CDD8;
  border-radius: 50%;
  box-sizing: border-box;
  color: white;
  display: flex;
  flex-shrink: 0;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.who-option__check .icon {
  opacity: 0;
}

.who-option:has(.who-option__radio:checked) {
  background: #E4E9F6;
  border-color: #26418F;
}

.who-option:has(.who-option__radio:checked) .who-option__check {
  background: #26418F;
  border-color: #26418F;
}

.who-option:has(.who-option__radio:checked) .who-option__check .icon {
  opacity: 1;
}

.who-option:has(.who-option__radio:focus-visible) {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

.who-group {
  border: 1px solid #E7EBF1;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  transition: border-color 0.2s ease;
}

.who-group--active {
  border-color: #26418F;
}

.who-group__header {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 4px 6px 10px;
}

.who-group__text {
  display: flex;
  flex-direction: column;
}

.who-group__name {
  font-size: 15px;
  font-weight: 700;
}

.who-group__meta {
  color: #737C8A;
  font-size: 12.5px;
}

.who-group__locked {
  color: #737C8A;
  font-size: 13px;
  padding: 0 6px 8px;
}

.who-members {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-left: 12px;
}

.who-member {
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  position: relative;
}

.who-member:hover {
  background: #F5F7FA;
}

.who-member__checkbox {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.who-member__name {
  flex-grow: 1;
  font-size: 14.5px;
  font-weight: 500;
}

.who-member__check {
  align-items: center;
  border: 2px solid #C7CDD8;
  border-radius: 6px;
  box-sizing: border-box;
  color: white;
  display: flex;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.who-member__check .icon {
  opacity: 0;
}

.who-member:has(.who-member__checkbox:checked) .who-member__check {
  background: #26418F;
  border-color: #26418F;
}

.who-member:has(.who-member__checkbox:checked) .who-member__check .icon {
  opacity: 1;
}

.who-member:has(.who-member__checkbox:focus-visible) {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

@media (min-width: 600px) {
  .quick-picks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .compose__grid {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Groups list, group panel, members and invites */
.group-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-body .group-cards .group-card {
  align-items: center;
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  color: #14181F;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-body .group-cards .group-card:hover {
  border-color: #C7CDD8;
  color: #14181F;
}

.app-body .group-cards .group-card--selected {
  border-color: #26418F;
  box-shadow: 0 0 0 3px #E4E9F6;
}

.group-card__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
}

.group-card__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.group-card__meta {
  color: #737C8A;
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-name-row {
  align-items: flex-end;
  display: flex;
  gap: 12px;
}

/* Members */
.members {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.members__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.members__title {
  font-size: 15px;
  font-weight: 700;
}

.members__hint {
  color: #737C8A;
  font-size: 12.5px;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-row {
  align-items: center;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  min-height: 44px;
  padding: 4px;
}

.member-row__name {
  flex-grow: 1;
  font-size: 14.5px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-row__role {
  border-radius: 999px;
  color: #737C8A;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  text-transform: uppercase;
}

.member-row__role--admin {
  background: #E4E9F6;
  color: #26418F;
}

.member-row__role--invited {
  background: #F5E8D3;
  color: #6E4200;
}

.member-row--invited .member-row__name {
  color: #5C6472;
  font-weight: 500;
}

/* Invite */
.invite {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite__title {
  font-size: 15px;
  font-weight: 700;
}

.invite-link {
  align-items: center;
  background: #F5F7FA;
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  display: flex;
  gap: 8px;
  padding: 6px 6px 6px 12px;
}

.invite-link__icon {
  color: #737C8A;
  flex-shrink: 0;
}

.invite-link .invite-link__input {
  background: transparent;
  border: 0;
  color: #14181F;
  flex-grow: 1;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.invite-link .invite-link__input:focus {
  outline: none;
}

.invite-email {
  display: flex;
  gap: 8px;
}

.invite-email .field__input {
  flex-grow: 1;
  height: 44px;
}

.invite-email .btn-primary, .invite-email button, .invite-email .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Settings page */
.settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  max-width: 720px;
  width: 100%;
}

.settings-card {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.settings-card--danger {
  border-color: #F9E3E1;
}

.settings-card__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.settings-card__hint {
  color: #5C6472;
  font-size: 14px;
}

.settings-card__status {
  background: #DDF1EE;
  border-radius: 12px;
  color: #0B6158;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
}

.settings-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-form .btn-primary, .settings-form button, .settings-form .btn,
.settings-form .btn-outline {
  align-self: flex-start;
}

/* Time tracker shell: workspace switcher, sidebar sections, running badge, and the small markers
   (project dots and chips, role pills, workspace / client badges) reused by every time screen */
.workspace-switcher {
  position: relative;
}

.workspace-switcher .workspace-switcher__button {
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #E7EBF1;
  border-radius: 15px;
  box-sizing: border-box;
  color: #14181F;
  cursor: pointer;
  display: flex;
  gap: 11px;
  height: 58px;
  list-style: none;
  padding: 0 12px 0 10px;
  text-align: left;
}

.workspace-switcher .workspace-switcher__button::-webkit-details-marker {
  display: none;
}

.workspace-switcher[open] .workspace-switcher__button {
  border-color: #26418F;
}

.workspace-switcher__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1px;
  min-width: 0;
}

.workspace-switcher__label {
  color: #737C8A;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.workspace-switcher__name {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-switcher .workspace-switcher__menu {
  left: 0;
  min-width: 0;
  right: 0;
  top: calc(100% + 6px);
}

.workspace-switcher .workspace-switcher__item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  color: #14181F;
  cursor: pointer;
  display: flex;
  gap: 10px;
  height: 52px;
  justify-content: flex-start;
  padding: 0 8px;
  text-align: left;
  width: 100%;
}

.workspace-switcher .workspace-switcher__item:hover,
.workspace-switcher .workspace-switcher__item--current {
  background: #F5F7FA;
  color: #14181F;
}

.workspace-switcher__item-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.workspace-switcher__item-name {
  font-size: 14.5px;
  font-weight: 700;
}

.workspace-switcher__item-meta {
  color: #737C8A;
  font-size: 12px;
}

.app-body .workspace-switcher .workspace-switcher__create {
  align-items: center;
  border-radius: 11px;
  border-top: 1px solid #E7EBF1;
  color: #26418F;
  display: flex;
  font-size: 14.5px;
  font-weight: 700;
  gap: 10px;
  height: 44px;
  margin-top: 4px;
  padding: 0 10px;
  text-decoration: none;
}

.app-nav .app-sidebar__label {
  padding-bottom: 6px;
}

.app-nav__badge {
  background: #E4E9F6;
  border-radius: 11px;
  color: #26418F;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  height: 22px;
  line-height: 22px;
  margin-left: auto;
  padding: 0 8px;
}

.app-nav__link--active .app-nav__badge {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

/* Badges and markers */
.workspace-badge {
  align-items: center;
  background: #14181F;
  border-radius: 11px;
  color: white;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.workspace-badge--sm {
  border-radius: 9px;
  font-size: 11px;
  height: 32px;
  width: 32px;
}

.client-badge {
  align-items: center;
  background: #E4E9F6;
  border-radius: 12px;
  color: #1B2F6B;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.client-badge--lg {
  border-radius: 16px;
  font-size: 17px;
  height: 56px;
  width: 56px;
}

.role-pill {
  align-items: center;
  background: #EDF0F5;
  border-radius: 11px;
  color: #3E4652;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 22px;
  padding: 0 8px;
}

.role-pill--owner {
  background: #14181F;
  color: white;
}

.role-pill--admin {
  background: #E4E9F6;
  color: #26418F;
}

.project-dot {
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 9px;
  width: 9px;
}

.project-chip {
  align-items: center;
  border-radius: 12px;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  white-space: nowrap;
}

.project-chip .project-dot {
  height: 7px;
  width: 7px;
}

.project-dot--teal {
  background: #0E7C73;
}

.project-chip--teal {
  background: #DDF1EE;
  color: #0B6158;
}

.project-chip--teal .project-dot {
  background: #0E7C73;
}

.project-dot--violet {
  background: #4C2D9E;
}

.project-chip--violet {
  background: #EBE6FA;
  color: #3E2384;
}

.project-chip--violet .project-dot {
  background: #4C2D9E;
}

.project-dot--blue {
  background: #26418F;
}

.project-chip--blue {
  background: #E4E9F6;
  color: #1B2F6B;
}

.project-chip--blue .project-dot {
  background: #26418F;
}

.project-dot--amber {
  background: #8A5200;
}

.project-chip--amber {
  background: #F5E8D3;
  color: #6E4200;
}

.project-chip--amber .project-dot {
  background: #8A5200;
}

.project-dot--rose {
  background: #A8325A;
}

.project-chip--rose {
  background: #FBE4EB;
  color: #8A2648;
}

.project-chip--rose .project-dot {
  background: #A8325A;
}

.project-dot--slate {
  background: #3E4652;
}

.project-chip--slate {
  background: #E3E7EE;
  color: #2B313B;
}

.project-chip--slate .project-dot {
  background: #3E4652;
}

/* Full-width time pages (projects list, project page) */
.tt-page {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.tt-page--narrow {
  max-width: 760px;
}

.app-body .tt-page__back {
  align-self: flex-start;
  color: #5C6472;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-decoration: none;
  text-transform: uppercase;
}

.app-body .tt-page__back:hover {
  color: #26418F;
}

/* Cards and tables shared by the time screens */
.tt-card {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
}

.tt-card--soft {
  background: rgba(255, 255, 255, 0.7);
}

.tt-card__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.tt-card__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.tt-eyebrow {
  color: #737C8A;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.tt-stat {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.tt-table {
  border-collapse: collapse;
  width: 100%;
}

.tt-table th {
  color: #737C8A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 6px 4px;
  text-align: left;
  text-transform: uppercase;
}

.tt-table td {
  border-top: 1px solid #F5F7FA;
  font-size: 14.5px;
  padding: 10px 4px;
  vertical-align: middle;
}

.tt-table .tt-table__num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tt-table .tt-table__strong {
  font-weight: 700;
}

.tt-table__scroll {
  overflow-x: auto;
}

.tt-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.tt-layout__main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px;
  min-width: 0;
}

.tt-layout__aside {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 1200px) {
  .tt-layout {
    align-items: flex-start;
    flex-direction: row;
  }
  .tt-layout__aside {
    position: sticky;
    top: 40px;
    width: 400px;
  }
}
/* Timer screen: the timer bar, task suggestions, "Add time manually" popover, week chart and tasks list */
.timer-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Timer bar */
.timer-bar {
  align-items: center;
  background: white;
  border: 1.5px solid #E7EBF1;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  position: relative;
  z-index: 2;
}

.timer-bar--running {
  border-color: #26418F;
}

.timer-bar__project {
  align-items: stretch;
  background: #F5F7FA;
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 56px;
  justify-content: center;
  padding: 0 14px;
  width: 100%;
}

.timer-bar__project-label {
  color: #737C8A;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}

.timer-bar .timer-bar__select {
  appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737C8A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
  border: 0;
  color: #14181F;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  height: 26px;
  margin: 0;
  min-width: 0;
  padding: 0 24px 0 0;
  width: 100%;
}

.timer-bar .timer-bar__select:focus {
  outline: none;
}

.timer-bar__project:focus-within {
  border-color: #26418F;
  box-shadow: 0 0 0 3px #E4E9F6;
}

.timer-bar__task {
  flex-basis: 100%;
  flex-grow: 1;
  min-width: 0;
}

.timer-bar .timer-bar__input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  box-sizing: border-box;
  color: #14181F;
  font-size: 20px;
  font-weight: 700;
  height: 56px;
  letter-spacing: -0.4px;
  margin: 0;
  padding: 0 12px;
  width: 100%;
}

.timer-bar .timer-bar__input::placeholder {
  color: #737C8A;
  font-weight: 500;
}

.timer-bar .timer-bar__input:focus {
  border-color: #E7EBF1;
  outline: none;
}

.timer-bar__current {
  align-items: center;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  gap: 12px;
  min-width: 0;
}

.timer-bar__current-task {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-bar__clock {
  color: #14181F;
  flex-shrink: 0;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -1px;
  margin-left: auto;
  text-align: right;
}

.timer-bar__clock--idle {
  color: #A9B0BC;
}

.timer-bar__hint {
  color: #5C6472;
  flex-grow: 1;
  font-size: 14.5px;
  order: -1;
}

.timer-bar .timer-bar__button {
  align-items: center;
  background: #26418F;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(38, 65, 143, 0.3);
  color: white;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 60px;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease;
  width: 60px;
}

.timer-bar .timer-bar__button:hover {
  background: #1B2F6B;
}

.timer-bar .timer-bar__button:focus-visible {
  outline: 2px solid #26418F;
  outline-offset: 3px;
}

.timer-bar .timer-bar__button--stop {
  background: #B3261E;
  box-shadow: 0 6px 16px rgba(179, 38, 30, 0.3);
}

.timer-bar .timer-bar__button--stop:hover {
  background: #931E18;
}

@media (min-width: 900px) {
  .timer-bar {
    flex-wrap: nowrap;
    height: 88px;
    padding: 0 14px;
  }
  .timer-bar__project {
    width: 250px;
  }
  .timer-bar__task {
    flex-basis: 0;
  }
  .timer-bar__clock {
    font-size: 34px;
    width: 170px;
  }
}
/* Task suggestions listbox */
.suggestions {
  position: relative;
}

.suggestions .suggestions__list {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  left: 0;
  max-width: 560px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
}

.suggestions__heading {
  color: #737C8A;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 8px 10px 6px;
  text-transform: uppercase;
}

.suggestions .suggestions__item,
.suggestions .suggestions__create {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  box-sizing: border-box;
  color: #14181F;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 10px;
  height: 46px;
  justify-content: flex-start;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

.suggestions .suggestions__item:hover,
.suggestions .suggestions__item--active {
  background: #F5F7FA;
  color: #14181F;
}

.suggestions__task {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestions__total {
  color: #737C8A;
  flex-shrink: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.suggestions .suggestions__create {
  background: #F5F7FA;
  border: 1px dashed #C7CDD8;
  color: #26418F;
  font-weight: 700;
  margin-top: 4px;
}

.suggestions .suggestions__create:hover,
.suggestions .suggestions__create[aria-selected=true] {
  background: #E4E9F6;
  color: #1B2F6B;
}

/* "Add time manually" popover */
.manual-entry .manual-entry__toggle {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 9px;
  list-style: none;
  white-space: nowrap;
}

.manual-entry .manual-entry__toggle::-webkit-details-marker {
  display: none;
}

.manual-entry .manual-entry__panel {
  padding: 20px;
  width: min(460px, 100vw - 32px);
}

.manual-entry__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.manual-entry__duration {
  align-items: center;
  background: #F5F7FA;
  border-radius: 16px;
  color: #5C6472;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: space-between;
  padding: 12px 16px;
}

.manual-entry__duration strong {
  color: #14181F;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.manual-entry__actions {
  display: flex;
  justify-content: flex-end;
}

/* Started / Stopped date + time pairs */
.time-fields {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

.time-fields__group {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.time-fields__pair {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.time-fields .time-fields__date {
  flex-grow: 1;
  font-size: 15px;
  padding: 0 12px;
}

.time-fields .time-fields__time {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  padding: 0 12px;
  width: 118px;
}

@media (min-width: 600px) {
  .time-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Week card */
.week-card {
  gap: 18px;
}

.week-card__header {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.week-card__rule {
  background: #F5F7FA;
  border: 0;
  height: 1px;
  margin: 0;
}

.week-chart {
  position: relative;
}

.week-chart__target {
  border-top: 1.5px dashed #9FB0DA;
  bottom: calc(150px + 22px);
  left: 0;
  position: absolute;
  right: 0;
}

.week-chart__target-label {
  bottom: calc(150px + 26px);
  color: #5C6472;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  right: 0;
}

.week-chart__columns {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 210px;
  list-style: none;
  margin: 0;
  padding: 0 2px;
}

.week-col {
  align-items: center;
  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
  position: relative;
}

.week-col__hours {
  color: #3E4652;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-height: 14px;
  white-space: nowrap;
}

.week-col__bar {
  background: #AEBCE0;
  border-radius: 8px;
  display: block;
  width: 100%;
}

.week-col__bar--empty {
  background: #F5F7FA;
}

.week-col--today .week-col__bar {
  background: #26418F;
}

.week-col--today .week-col__bar--empty {
  background: #E4E9F6;
}

.week-col__bar--h0 {
  height: 6px;
}

.week-col__bar--h5 {
  height: 7.5px;
}

.week-col__bar--h10 {
  height: 15px;
}

.week-col__bar--h15 {
  height: 22.5px;
}

.week-col__bar--h20 {
  height: 30px;
}

.week-col__bar--h25 {
  height: 37.5px;
}

.week-col__bar--h30 {
  height: 45px;
}

.week-col__bar--h35 {
  height: 52.5px;
}

.week-col__bar--h40 {
  height: 60px;
}

.week-col__bar--h45 {
  height: 67.5px;
}

.week-col__bar--h50 {
  height: 75px;
}

.week-col__bar--h55 {
  height: 82.5px;
}

.week-col__bar--h60 {
  height: 90px;
}

.week-col__bar--h65 {
  height: 97.5px;
}

.week-col__bar--h70 {
  height: 105px;
}

.week-col__bar--h75 {
  height: 112.5px;
}

.week-col__bar--h80 {
  height: 120px;
}

.week-col__bar--h85 {
  height: 127.5px;
}

.week-col__bar--h90 {
  height: 135px;
}

.week-col__bar--h95 {
  height: 142.5px;
}

.week-col__bar--h100 {
  height: 150px;
}

.week-col__bar--h105 {
  height: 157.5px;
}

.week-col__bar--h110 {
  height: 165px;
}

.week-col__day {
  color: #737C8A;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.week-col--today .week-col__day {
  color: #14181F;
}

/* Tasks this week */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-list__header {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: 6px;
}

.task-list__hint,
.task-list__empty {
  color: #737C8A;
  font-size: 12.5px;
}

.task-row {
  align-items: center;
  border-bottom: 1px solid #F5F7FA;
  display: flex;
  gap: 12px;
  min-height: 50px;
}

.task-row__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1px;
  min-width: 0;
}

.task-row__name {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row__meta {
  color: #737C8A;
  font-size: 12px;
}

.task-row__total {
  flex-shrink: 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Time entries: day groups, rows and badges, the "too long" banner, and the edit screen */
/* Day groups */
.entry-days,
.entry-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entry-day__header {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 12px 6px 2px;
}

.entry-day__label {
  color: #5C6472;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.entry-day__rule {
  background: #DFE3EB;
  display: block;
  flex-grow: 1;
  height: 1px;
}

.entry-day__total {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* Rows */
.entry-row {
  align-items: center;
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 58px;
  padding: 10px 8px 10px 16px;
}

.entry-row--running {
  border: 1.5px solid #26418F;
}

.entry-row--flagged {
  background: #FFFBF4;
  border: 1.5px solid #E8B970;
}

.entry-row--current {
  border: 2px solid #26418F;
  opacity: 1;
}

.entry-row__task {
  flex-basis: 100%;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-row--current .entry-row__task {
  font-weight: 700;
}

.entry-row__badge {
  align-items: center;
  border-radius: 12px;
  color: white;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  white-space: nowrap;
}

.entry-row__badge--running {
  background: #26418F;
}

.entry-row__badge--flag {
  background: #8A5200;
}

.entry-row__pulse {
  animation: entry-pulse 1.6s ease-in-out infinite;
  background: white;
  border-radius: 50%;
  display: block;
  height: 7px;
  width: 7px;
}

@keyframes entry-pulse {
  50% {
    opacity: 0.35;
  }
}
.entry-row__range {
  color: #5C6472;
  flex-shrink: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

.entry-row__duration {
  flex-shrink: 0;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.entry-row__actions {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
}

.entry-row .entry-row__resume,
.entry-row .entry-row__stop,
.entry-row .entry-row__edit {
  align-items: center;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 38px;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  width: 38px;
}

.entry-row .entry-row__resume {
  background: #F5F7FA;
  color: #26418F;
}

.entry-row .entry-row__resume:hover {
  background: #E4E9F6;
  color: #1B2F6B;
}

.entry-row .entry-row__stop {
  background: #FBE9E7;
  color: #B3261E;
}

.entry-row .entry-row__stop:hover {
  background: #F9E3E1;
  color: #B3261E;
}

.entry-row .entry-row__edit {
  border: 1px solid #DFE3EB;
  color: #5C6472;
}

.entry-row .entry-row__edit:hover {
  background: #E4E9F6;
  border-color: transparent;
  color: #26418F;
}

.entry-row .entry-row__resume:focus-visible,
.entry-row .entry-row__stop:focus-visible,
.entry-row .entry-row__edit:focus-visible {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .entry-row {
    flex-wrap: nowrap;
    gap: 14px;
    padding: 0 8px 0 16px;
  }
  .entry-row__task {
    flex-basis: auto;
    flex-grow: 1;
  }
  .entry-row__range {
    margin-left: 0;
    width: 190px;
  }
  .entry-row__duration {
    width: 84px;
  }
}
/* "Too long" banner */
.too-long-banner {
  align-items: center;
  background: #FDF4E7;
  border: 1px solid #F1D9B5;
  border-radius: 16px;
  box-sizing: border-box;
  color: #8A5200;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 12px 12px 16px;
}

.too-long-banner__text {
  color: #5A3A06;
  flex-basis: 0;
  flex-grow: 1;
  font-size: 14.5px;
  line-height: 1.4;
  min-width: 200px;
}

.app-body .too-long-banner .too-long-banner__link,
.app-body .too-long-banner .too-long-banner__link:hover {
  align-items: center;
  background: #8A5200;
  border-radius: 12px;
  color: white;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  padding: 0 16px;
  text-decoration: none;
}

.app-body .too-long-banner .too-long-banner__dismiss {
  background: none;
  border: 0;
  box-shadow: none;
  color: #5A3A06;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  padding: 0 8px;
}

.app-body .too-long-banner .too-long-banner__dismiss:hover {
  text-decoration: underline;
}

/* Edit screen */
.entry-edit {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.entry-edit__context {
  display: none;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
  min-width: 0;
  opacity: 0.55;
}

.entry-edit__card {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
  box-sizing: border-box;
  flex-shrink: 0;
  min-width: 0;
  padding: 26px;
  width: 100%;
}

.entry-edit__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.entry-edit__header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.entry-edit__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin: 0;
}

.entry-edit__duration {
  align-items: center;
  background: #F5F7FA;
  border-radius: 16px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 18px;
}

.entry-edit__duration-label {
  color: #5C6472;
  font-size: 14px;
  font-weight: 600;
}

.entry-edit .entry-edit__duration-value {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #14181F;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -1px;
  max-width: 100%;
  min-width: 0;
  padding: 0 4px;
  text-align: right;
  width: auto;
}

.entry-edit .entry-edit__duration-value::-webkit-calendar-picker-indicator {
  display: none;
}

.entry-edit .entry-edit__duration-value:focus {
  box-shadow: 0 0 0 3px #E4E9F6;
  outline: none;
}

.entry-edit__duration--warn .entry-edit__duration-value {
  color: #8A5200;
}

.entry-edit__hint {
  background: #FDF4E7;
  border: 1px solid #F1D9B5;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}

.entry-edit__hint-text {
  color: #5A3A06;
  font-size: 14.5px;
  line-height: 1.45;
}

.entry-edit__picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.entry-edit .entry-edit__pick {
  background: white;
  border: 1px solid #E8B970;
  border-radius: 12px;
  box-shadow: none;
  color: #5A3A06;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 700;
  gap: 2px;
  min-height: 42px;
  padding: 8px 16px;
  text-align: left;
}

.entry-edit__pick-note {
  font-size: 12.5px;
  font-weight: 500;
}

.entry-edit .entry-edit__dismiss {
  align-self: flex-start;
  background: none;
  border: 0;
  box-shadow: none;
  color: #5A3A06;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.entry-edit .entry-edit__pick:hover {
  background: #FDF4E7;
  border-color: #8A5200;
  color: #5A3A06;
}

.entry-edit__footnote {
  color: #737C8A;
  font-size: 13px;
  line-height: 1.4;
}

.entry-edit__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.entry-edit__actions .entry-edit__save {
  flex-grow: 1;
}

.entry-edit .entry-edit__delete {
  align-items: center;
  background: rgba(179, 38, 30, 0.06);
  border: 1px solid rgba(179, 38, 30, 0.24);
  border-radius: 14px;
  box-shadow: none;
  color: #B3261E;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 52px;
  justify-content: center;
  padding: 0;
  width: 52px;
}

.entry-edit .entry-edit__delete:hover {
  background: #F9E3E1;
  border-color: #B3261E;
  color: #B3261E;
}

@media (min-width: 1500px) {
  .entry-edit {
    align-items: flex-start;
    flex-direction: row;
  }
  .entry-edit__context {
    display: flex;
    overflow: hidden;
  }
  .entry-edit__card {
    flex-shrink: 0;
    width: 620px;
  }
}
/* Time tracker: clients list + panel, projects table + panel, and the small pieces they share
   (panel header, edit toggle, rate field, chip radios, billing box, people chips, task rows) */
/* Shared: wide side panel and panel header */
.tt-panel {
  gap: 18px;
}

.tt-panel__header {
  align-items: center;
  display: flex;
  gap: 12px;
}

.tt-panel__heading {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
}

.tt-panel__name {
  align-items: center;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  font-size: 24px;
  font-weight: 800;
  gap: 10px;
  letter-spacing: -0.8px;
  line-height: 1.15;
  min-width: 0;
}

.tt-panel .tt-panel__dot {
  border-radius: 5px;
  height: 14px;
  width: 14px;
}

.app-body .tt-panel .tt-panel__link {
  color: #26418F;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.tt-panel__muted {
  color: #737C8A;
  font-size: 14px;
  font-weight: 600;
}

.tt-panel .tt-panel__close {
  margin-left: auto;
}

.tt-pill {
  align-items: center;
  background: #EDF0F5;
  border-radius: 11px;
  color: #5C6472;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  height: 22px;
  letter-spacing: 0;
  padding: 0 8px;
  text-transform: none;
}

.tt-footnote {
  border: 1px dashed #C7CDD8;
  border-radius: 16px;
  color: #5C6472;
  font-size: 14px;
  padding: 14px 20px;
}

/* "Edit" toggle that reveals the form inside the panel */
.tt-edit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tt-edit .tt-edit__toggle {
  align-self: flex-start;
  cursor: pointer;
  list-style: none;
}

.tt-edit .tt-edit__toggle::-webkit-details-marker {
  display: none;
}

.tt-edit[open] .tt-edit__toggle {
  background: #E4E9F6;
  border-color: #26418F;
  color: #26418F;
}

.tt-edit__body {
  background: #F5F7FA;
  border: 1px solid #E7EBF1;
  border-radius: 16px;
  padding: 16px;
}

.tt-detail .detail-card__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sections inside the panel (projects table, people, tasks) */
.tt-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tt-section__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.app-body .tt-section .tt-section__link {
  color: #26418F;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.tt-section__hint {
  color: #737C8A;
  font-size: 13px;
}

.tt-section__empty {
  color: #737C8A;
  font-size: 14px;
}

/* Rate input: "€ [ 45.00 ] /h" */
.rate-field {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 13px;
  box-sizing: border-box;
  display: flex;
  gap: 6px;
  height: 50px;
  max-width: 220px;
  padding: 0 14px;
}

.rate-field:focus-within {
  border-color: #26418F;
  box-shadow: 0 0 0 3px #E4E9F6;
}

.rate-field--sm {
  height: 46px;
  max-width: 190px;
}

.rate-field__unit {
  color: #5C6472;
  font-size: 16px;
  font-weight: 700;
}

.rate-field__suffix {
  color: #737C8A;
  font-size: 13px;
}

.rate-field .rate-field__input {
  appearance: textfield;
  background: transparent;
  border: 0;
  color: #14181F;
  flex-grow: 1;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.rate-field .rate-field__input:focus {
  outline: none;
}

.rate-field .rate-field__input::-webkit-inner-spin-button,
.rate-field .rate-field__input::-webkit-outer-spin-button {
  appearance: none;
}

.field__optional {
  color: #737C8A;
  font-weight: 500;
}

.field__hint {
  color: #737C8A;
  font-size: 13px;
}

/* Clients list */
.client-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-body .client-cards .client-card {
  align-items: center;
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  color: #14181F;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-body .client-cards .client-card:hover {
  border-color: #C7CDD8;
  color: #14181F;
}

.app-body .client-cards .client-card--selected {
  border-color: #26418F;
  box-shadow: 0 6px 20px rgba(38, 65, 143, 0.14);
}

.app-body .client-cards .client-card--archived {
  background: rgba(255, 255, 255, 0.6);
}

.client-card__text {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.client-card__stats {
  display: flex;
  flex: 1 1 100%;
  gap: 16px;
}

.client-card__name {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: -0.3px;
}

.client-card__meta {
  color: #5C6472;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-card__stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
}

.client-card__stat--end {
  text-align: right;
}

.client-card__label {
  color: #737C8A;
  font-size: 12px;
}

.client-card__value {
  font-size: 16px;
  font-weight: 700;
}

.client-card__value--num {
  font-variant-numeric: tabular-nums;
}

.client-card__value--money {
  color: #0B6158;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Client panel: projects table */
.app-body .client-projects .client-projects__name {
  align-items: center;
  color: #14181F;
  display: flex;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.app-body .client-projects .client-projects__name:hover {
  color: #26418F;
}

.client-projects__label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-projects .client-projects__total td {
  border-top: 2px solid #EDF0F5;
  font-size: 15px;
}

.client-projects .client-projects__money {
  color: #0B6158;
  font-size: 17px;
  font-weight: 800;
}

/* Projects: header tabs and client filter chips */
.status-tabs {
  background: #E3E8F0;
  border-radius: 14px;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.app-body .status-tabs .status-tabs__tab {
  align-items: center;
  border-radius: 10px;
  color: #5C6472;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  height: 38px;
  padding: 0 14px;
  text-decoration: none;
  white-space: nowrap;
}

.app-body .status-tabs .status-tabs__tab--active {
  background: white;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  color: #14181F;
  font-weight: 700;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-body .filter-chips .filter-chips__chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid #DFE3EB;
  border-radius: 999px;
  color: #14181F;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  height: 38px;
  padding: 0 14px;
  text-decoration: none;
  white-space: nowrap;
}

.app-body .filter-chips .filter-chips__chip:hover {
  border-color: #C7CDD8;
  color: #14181F;
}

.app-body .filter-chips .filter-chips__chip--active {
  background: #14181F;
  border-color: #14181F;
  color: white;
  font-weight: 700;
}

/* Projects table */
.project-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-rows__head {
  color: #737C8A;
  display: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 0 18px 4px;
  text-transform: uppercase;
}

.project-rows__num {
  text-align: right;
}

.app-body .project-rows .project-row {
  align-items: center;
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  color: #14181F;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 70px;
  padding: 12px 18px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-body .project-rows .project-row:hover {
  border-color: #C7CDD8;
  color: #14181F;
}

.app-body .project-rows .project-row--selected {
  border-color: #26418F;
  box-shadow: 0 6px 20px rgba(38, 65, 143, 0.14);
}

.project-row__main {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.project-row .project-row__dot {
  border-radius: 4px;
  height: 12px;
  width: 12px;
}

.project-row__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.project-row__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row__meta {
  color: #737C8A;
  font-size: 12.5px;
}

.project-row__client {
  font-size: 14.5px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row__client--none {
  color: #A9B0BC;
}

.project-row__billing,
.project-row__people,
.project-row__num {
  display: none;
}

.project-row__num {
  color: #5C6472;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.project-row__num--strong {
  color: #14181F;
  font-weight: 700;
}

.project-row__people .avatar-stack {
  padding-left: 8px;
}

.billing-chip {
  align-items: center;
  background: #EDF0F5;
  border-radius: 13px;
  color: #737C8A;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  height: 26px;
  padding: 0 10px;
  white-space: nowrap;
}

.billing-chip--billable {
  background: #DDF1EE;
  color: #0B6158;
}

/* Project panel: billing box (also used inside the form) */
.billing-box {
  background: #F5F7FA;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}

.billing-box__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.billing-box .billing-box__switch {
  padding: 0;
}

.billing-box__row {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.billing-box__row .field {
  flex-shrink: 0;
}

.billing-box__row .rate-field {
  background: white;
}

.billing-box__amounts {
  display: grid;
  flex-grow: 1;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-box__amount {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.billing-box__label {
  color: #5C6472;
  font-size: 12.5px;
}

.billing-box__value {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Project panel: people chips + add someone */
.people-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.people-chip {
  align-items: center;
  background: #F5F7FA;
  border-radius: 19px;
  box-sizing: border-box;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 38px;
  padding: 0 8px 0 5px;
}

.people-chip__form {
  display: flex;
}

.people-chip .people-chip__remove {
  height: 26px;
  width: 26px;
}

.add-person {
  display: flex;
  gap: 8px;
}

.add-person .add-person__select {
  appearance: none;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid #DFE3EB;
  border-radius: 12px;
  box-sizing: border-box;
  color: #14181F;
  flex-grow: 1;
  font-size: 14.5px;
  height: 44px;
  margin: 0;
  min-width: 0;
  padding: 0 40px 0 14px;
}

.add-person .add-person__select:focus {
  border-color: #26418F;
  box-shadow: 0 0 0 3px #E4E9F6;
  outline: none;
}

.add-person .add-person__button {
  flex-shrink: 0;
}

/* Project panel: tasks */
.project-tasks {
  display: flex;
  flex-direction: column;
}

.project-task {
  align-items: center;
  border-bottom: 1px solid #F5F7FA;
  display: flex;
  gap: 12px;
  min-height: 44px;
}

.project-task__name {
  flex-grow: 1;
  font-size: 14.5px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-task__count {
  color: #737C8A;
  font-size: 13px;
  white-space: nowrap;
}

.project-task__hours {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 70px;
  text-align: right;
}

/* Project form: client chips, square swatches, people picker */
.chip-radios,
.people-picker {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.chip-radios__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-radio {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.chip-radio__input {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.chip-radio__label {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 12px;
  box-sizing: border-box;
  color: #3E4652;
  display: inline-flex;
  font-size: 14.5px;
  font-weight: 700;
  height: 42px;
  padding: 0 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.chip-radio__input:checked ~ .chip-radio__label {
  background: #26418F;
  border-color: #26418F;
  color: white;
}

.chip-radio__input:focus-visible ~ .chip-radio__label {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

.app-body .chip-radios .chip-radio__new {
  align-items: center;
  border: 1px dashed #C7CDD8;
  border-radius: 12px;
  box-sizing: border-box;
  color: #26418F;
  display: inline-flex;
  font-size: 14.5px;
  font-weight: 700;
  height: 42px;
  padding: 0 14px;
  text-decoration: none;
}

.swatch .swatch__dot--square {
  border-radius: 10px;
}

.people-picker__list {
  display: grid;
  gap: 2px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.people-picker__item {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14.5px;
  font-weight: 500;
  gap: 10px;
  min-height: 38px;
}

.people-picker__checkbox {
  accent-color: #26418F;
  flex-shrink: 0;
  height: 18px;
  margin: 0;
  width: 18px;
}

@container (min-width: 640px) {
  .project-rows__head,
  .app-body .project-rows .project-row {
    column-gap: 10px;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto 88px 88px;
  }
  .project-rows__head {
    display: grid;
  }
  .project-row__billing,
  .project-row__people {
    display: flex;
  }
  .project-row__num {
    display: block;
  }
}
@media (min-width: 1200px) {
  .side-panel--wide {
    width: 480px;
  }
  .client-card__stats {
    flex: 0 0 auto;
  }
  .client-card__stat {
    flex: 0 0 130px;
  }
}
/* Time tracker: people, roles and workspace invitations */
.people {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Everyone table */
.people-card .people-search {
  width: 100%;
}

.people-card .search-field__input {
  background: white;
  border-radius: 12px;
  height: 42px;
}

.people-table th:first-child,
.people-table td:first-child {
  padding-left: 4px;
}

.people-table td {
  min-height: 66px;
  padding: 10px 6px;
}

.people-row__last {
  color: #3E4652;
  white-space: nowrap;
}

.people-table .people-row__actions {
  padding-right: 0;
  text-align: right;
  width: 44px;
}

.app-body .people-table .person {
  align-items: center;
  color: #14181F;
  display: flex;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}

.app-body .people-table .person:hover .person__name {
  color: #26418F;
}

.person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.person__name {
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
}

.person__note {
  color: #737C8A;
  font-size: 12.5px;
}

/* Role select (details menu) */
.role-menu .role-select {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 11px;
  box-sizing: border-box;
  color: #3E4652;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 6px;
  height: 36px;
  justify-content: space-between;
  list-style: none;
  min-width: 108px;
  padding: 0 10px 0 12px;
}

.role-menu .role-select::-webkit-details-marker {
  display: none;
}

.role-menu[open] .role-select,
.role-menu .role-select:hover {
  border-color: #26418F;
}

.role-menu .role-select:focus-visible {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

.role-menu .role-select--owner {
  background: #14181F;
  border-color: #14181F;
  color: white;
}

.role-menu .role-select--admin {
  background: #E4E9F6;
  border-color: #C9D3EC;
  color: #26418F;
}

.role-menu .menu__list {
  left: 0;
  right: auto;
}

/* Project chips and the add menu */
.person-projects {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 220px;
}

.project-menu .project-add {
  background: transparent;
  border: 1px dashed #C7CDD8;
  border-radius: 12px;
  box-sizing: border-box;
  color: #26418F;
  cursor: pointer;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  height: 24px;
  line-height: 22px;
  list-style: none;
  padding: 0 9px;
  white-space: nowrap;
}

.project-menu .project-add::-webkit-details-marker {
  display: none;
}

.project-menu .project-add:hover,
.project-menu[open] .project-add {
  background: #E4E9F6;
  border-style: solid;
}

.project-menu .project-add:focus-visible {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

.project-menu .menu__list {
  left: 0;
  right: auto;
}

.menu__list .menu__item--project {
  align-items: center;
  display: flex;
  gap: 9px;
}

/* Invite card */
.invite-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.invite-form .field__input {
  font-size: 15px;
  height: 48px;
}

.invite-form .invite-form__roles,
.invite-form .invite-form__projects {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.invite-form .invite-form__projects {
  gap: 4px;
}

.invite-form__optional {
  color: #737C8A;
  font-weight: 500;
}

.invite-form .invite-form__project {
  color: #14181F;
  min-height: 36px;
}

.segmented {
  background: #F5F7FA;
  border-radius: 13px;
  display: grid;
  gap: 4px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 4px;
}

.segmented__option {
  cursor: pointer;
  display: flex;
  min-width: 0;
  position: relative;
}

.segmented__radio {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.segmented__label {
  align-items: center;
  border-radius: 10px;
  color: #5C6472;
  display: flex;
  flex-grow: 1;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.segmented__radio:checked ~ .segmented__label {
  background: white;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  color: #14181F;
}

.segmented__radio:focus-visible ~ .segmented__label {
  outline: 2px solid #26418F;
  outline-offset: 1px;
}

/* Invitations waiting */
.pending-list {
  border-top: 1px solid #F5F7FA;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}

.pending-row {
  align-items: center;
  display: flex;
  gap: 10px;
  min-height: 44px;
}

.pending-row__email {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-row__status {
  color: #737C8A;
  flex-shrink: 0;
  font-size: 13px;
  white-space: nowrap;
}

/* Roles explainer */
.roles-card {
  gap: 13px;
}

.roles-card__row {
  display: flex;
  gap: 12px;
}

.roles-card .role-pill {
  font-size: 12.5px;
  height: 26px;
  justify-content: center;
  width: 76px;
}

.roles-card__text {
  color: #3E4652;
  font-size: 14px;
  line-height: 1.45;
}

/* Join page */
.workspace-badge--xl {
  border-radius: 20px;
  font-size: 24px;
  height: 72px;
  width: 72px;
}

@media (min-width: 900px) {
  .people-card .people-search {
    width: 240px;
  }
}
@media (min-width: 1200px) {
  .people .tt-layout__aside {
    width: 440px;
  }
}
/* Time tracker reports: team dashboard and one person's week (KPI tiles, hours table, heatmap,
   project bars, alerts, day chart, timeline). Bars, cells and blocks take step classes, never inline styles. */
.report {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.report__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.report__main {
  flex-grow: 1;
  min-width: 0;
}

.report__aside {
  flex-shrink: 0;
  min-width: 0;
}

.report__intro {
  color: #5C6472;
  font-size: 13.5px;
}

.report__empty {
  color: #737C8A;
  font-size: 14px;
  padding: 16px 0;
}

.app-body .report__link {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.tt-card__header--start {
  align-items: baseline;
  justify-content: flex-start;
}

/* Header controls */
.report-filter {
  display: flex;
  min-width: 0;
}

.report-filter .report-filter__select {
  appearance: none;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737C8A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid #DFE3EB;
  border-radius: 14px;
  color: #14181F;
  font-size: 15px;
  font-weight: 600;
  height: 46px;
  margin: 0;
  max-width: 220px;
  padding: 0 40px 0 16px;
}

.week-nav {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 14px;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  height: 46px;
}

.app-body .week-nav__arrow {
  align-items: center;
  border-radius: 12px;
  color: #5C6472;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.app-body .week-nav__arrow:hover {
  background: #F5F7FA;
  color: #14181F;
}

.week-nav__arrow--next .icon {
  transform: scaleX(-1);
}

.week-nav__label {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 0 6px;
  white-space: nowrap;
}

/* KPI tiles */
.kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpi {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
}

.kpi__label {
  color: #5C6472;
  font-size: 13px;
  font-weight: 600;
}

.kpi__value {
  color: #14181F;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
}

.kpi--under .kpi__value {
  color: #8A5200;
}

.kpi--ok .kpi__value {
  color: #0B6158;
}

.kpi--danger .kpi__value {
  color: #B3261E;
}

.kpi__note {
  color: #737C8A;
  font-size: 13px;
}

/* Legend */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.legend__item {
  align-items: center;
  color: #5C6472;
  display: flex;
  font-size: 12.5px;
  gap: 6px;
}

.legend__swatch {
  border: 1px solid rgba(20, 24, 31, 0.12);
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  height: 12px;
  width: 12px;
}

.legend__swatch--teal {
  background: #0E7C73;
  border-color: #0E7C73;
}

.legend__swatch--violet {
  background: #4C2D9E;
  border-color: #4C2D9E;
}

.legend__swatch--blue {
  background: #26418F;
  border-color: #26418F;
}

.legend__swatch--amber {
  background: #8A5200;
  border-color: #8A5200;
}

.legend__swatch--rose {
  background: #A8325A;
  border-color: #A8325A;
}

.legend__swatch--slate {
  background: #3E4652;
  border-color: #3E4652;
}

/* Hours per person, per day */
.hours-table {
  border-collapse: separate;
  border-spacing: 6px 4px;
  font-variant-numeric: tabular-nums;
  margin: 0 -6px;
  width: calc(100% + 12px);
}

.hours-table th {
  color: #737C8A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 0 4px 4px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.hours-table td {
  padding: 0 4px;
  vertical-align: middle;
}

.hours-table .hours-table__day {
  min-width: 58px;
  padding: 0;
  text-align: center;
}

.hours-table .hours-table__num {
  text-align: right;
}

.hours-table__total {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.app-body .hours-table__person {
  align-items: center;
  color: #14181F;
  display: flex;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.app-body .hours-table__person:hover .hours-table__name {
  color: #26418F;
}

.hours-table__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hours-table__name {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hours-table__role {
  color: #737C8A;
  font-size: 12px;
}

.hours-cell {
  align-items: center;
  border-radius: 10px;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  min-width: 58px;
}

.hours-cell--0 {
  background: #F5F7FA;
  color: #A9B0BC;
}

.hours-cell--1 {
  background: #FBEEDC;
  color: #8A5200;
}

.hours-cell--2 {
  background: #E4E9F6;
  color: #26418F;
}

.hours-cell--3 {
  background: #DDF1EE;
  color: #0B6158;
}

.hours-cell--4 {
  background: #EBE6FA;
  color: #4C2D9E;
}

.target-bar {
  background: #F5F7FA;
  border-radius: 4px;
  display: block;
  height: 8px;
  min-width: 90px;
  overflow: hidden;
  position: relative;
}

.target-bar__fill {
  background: #0E7C73;
  border-radius: 4px;
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

.target-bar--under .target-bar__fill {
  background: #C77A12;
}

.target-bar--over .target-bar__fill {
  background: #4C2D9E;
}

.target-bar__fill--h0 {
  width: 0%;
}

.target-bar__fill--h5 {
  width: 5%;
}

.target-bar__fill--h10 {
  width: 10%;
}

.target-bar__fill--h15 {
  width: 15%;
}

.target-bar__fill--h20 {
  width: 20%;
}

.target-bar__fill--h25 {
  width: 25%;
}

.target-bar__fill--h30 {
  width: 30%;
}

.target-bar__fill--h35 {
  width: 35%;
}

.target-bar__fill--h40 {
  width: 40%;
}

.target-bar__fill--h45 {
  width: 45%;
}

.target-bar__fill--h50 {
  width: 50%;
}

.target-bar__fill--h55 {
  width: 55%;
}

.target-bar__fill--h60 {
  width: 60%;
}

.target-bar__fill--h65 {
  width: 65%;
}

.target-bar__fill--h70 {
  width: 70%;
}

.target-bar__fill--h75 {
  width: 75%;
}

.target-bar__fill--h80 {
  width: 80%;
}

.target-bar__fill--h85 {
  width: 85%;
}

.target-bar__fill--h90 {
  width: 90%;
}

.target-bar__fill--h95 {
  width: 95%;
}

.target-bar__fill--h100 {
  width: 100%;
}

/* When the team tracks */
.heatmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.heatmap__row {
  align-items: center;
  display: flex;
  gap: 4px;
}

.heatmap__day {
  color: #5C6472;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  width: 40px;
}

.heatmap__hour {
  color: #737C8A;
  flex: 1 1 0;
  font-size: 11px;
  font-weight: 700;
  min-width: 0;
  text-align: center;
}

.heat {
  aspect-ratio: 1;
  border-radius: 8px;
  display: block;
  flex: 1 1 0;
  max-width: 32px;
  min-width: 0;
}

.heat--key {
  aspect-ratio: auto;
  border-radius: 4px;
  flex: 0 0 18px;
  height: 12px;
}

.heat--0 {
  background: rgba(38, 65, 143, 0.06);
}

.heat--1 {
  background: rgba(38, 65, 143, 0.1842857143);
}

.heat--2 {
  background: rgba(38, 65, 143, 0.3085714286);
}

.heat--3 {
  background: rgba(38, 65, 143, 0.4328571429);
}

.heat--4 {
  background: rgba(38, 65, 143, 0.5571428571);
}

.heat--5 {
  background: rgba(38, 65, 143, 0.6814285714);
}

.heat--6 {
  background: rgba(38, 65, 143, 0.8057142857);
}

.heat--7 {
  background: rgba(38, 65, 143, 0.93);
}

.heatmap__scale {
  align-items: center;
  color: #737C8A;
  display: flex;
  font-size: 12px;
  gap: 8px;
  padding: 4px 0 0 44px;
}

/* Projects this week */
.project-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-bar {
  align-items: center;
  display: grid;
  gap: 6px 14px;
  grid-template-areas: "name hours" "track track" "note note";
  grid-template-columns: minmax(0, 1fr) auto;
}

.project-bar__name {
  align-items: center;
  display: flex;
  font-size: 14.5px;
  font-weight: 600;
  gap: 9px;
  grid-area: name;
  min-width: 0;
}

.project-bar__track {
  background: #F5F7FA;
  border-radius: 7px;
  display: block;
  grid-area: track;
  height: 22px;
  overflow: hidden;
  position: relative;
}

.project-bar__fill {
  border-radius: 7px;
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

.project-bar__hours {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  grid-area: hours;
  text-align: right;
  white-space: nowrap;
}

.project-bar__note {
  color: #737C8A;
  font-size: 13px;
  grid-area: note;
}

.project-bar__fill--teal,
.by-project__fill--teal,
.day-chart__seg--teal,
.tl-block--teal {
  background: #0E7C73;
}

.project-bar__fill--violet,
.by-project__fill--violet,
.day-chart__seg--violet,
.tl-block--violet {
  background: #4C2D9E;
}

.project-bar__fill--blue,
.by-project__fill--blue,
.day-chart__seg--blue,
.tl-block--blue {
  background: #26418F;
}

.project-bar__fill--amber,
.by-project__fill--amber,
.day-chart__seg--amber,
.tl-block--amber {
  background: #8A5200;
}

.project-bar__fill--rose,
.by-project__fill--rose,
.day-chart__seg--rose,
.tl-block--rose {
  background: #A8325A;
}

.project-bar__fill--slate,
.by-project__fill--slate,
.day-chart__seg--slate,
.tl-block--slate {
  background: #3E4652;
}

.project-bar__fill--h0,
.by-project__fill--h0 {
  width: 0%;
}

.project-bar__fill--h5,
.by-project__fill--h5 {
  width: 5%;
}

.project-bar__fill--h10,
.by-project__fill--h10 {
  width: 10%;
}

.project-bar__fill--h15,
.by-project__fill--h15 {
  width: 15%;
}

.project-bar__fill--h20,
.by-project__fill--h20 {
  width: 20%;
}

.project-bar__fill--h25,
.by-project__fill--h25 {
  width: 25%;
}

.project-bar__fill--h30,
.by-project__fill--h30 {
  width: 30%;
}

.project-bar__fill--h35,
.by-project__fill--h35 {
  width: 35%;
}

.project-bar__fill--h40,
.by-project__fill--h40 {
  width: 40%;
}

.project-bar__fill--h45,
.by-project__fill--h45 {
  width: 45%;
}

.project-bar__fill--h50,
.by-project__fill--h50 {
  width: 50%;
}

.project-bar__fill--h55,
.by-project__fill--h55 {
  width: 55%;
}

.project-bar__fill--h60,
.by-project__fill--h60 {
  width: 60%;
}

.project-bar__fill--h65,
.by-project__fill--h65 {
  width: 65%;
}

.project-bar__fill--h70,
.by-project__fill--h70 {
  width: 70%;
}

.project-bar__fill--h75,
.by-project__fill--h75 {
  width: 75%;
}

.project-bar__fill--h80,
.by-project__fill--h80 {
  width: 80%;
}

.project-bar__fill--h85,
.by-project__fill--h85 {
  width: 85%;
}

.project-bar__fill--h90,
.by-project__fill--h90 {
  width: 90%;
}

.project-bar__fill--h95,
.by-project__fill--h95 {
  width: 95%;
}

.project-bar__fill--h100,
.by-project__fill--h100 {
  width: 100%;
}

/* Needs a look */
.alerts {
  display: flex;
  flex-direction: column;
}

.alert-row {
  align-items: center;
  border-bottom: 1px solid #F5F7FA;
  display: flex;
  gap: 12px;
  min-height: 50px;
  padding: 6px 0;
}

.alert-row:last-child {
  border-bottom: 0;
}

.alert-row__dot {
  background: #737C8A;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

.alert-row__dot--danger {
  background: #B3261E;
}

.alert-row__dot--warning {
  background: #C77A12;
}

.alert-row__dot--over {
  background: #4C2D9E;
}

.alert-row__text {
  color: #3E4652;
  flex-grow: 1;
  font-size: 14.5px;
  min-width: 0;
}

.alert-row__who {
  color: #14181F;
  font-weight: 700;
}

.app-body .alert-row__action {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.app-body .alert-row__dismiss {
  background: none;
  border: 0;
  box-shadow: none;
  color: #737C8A;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
}

.app-body .alert-row__dismiss:hover {
  color: #14181F;
}

/* One person's week: header */
.person-header__identity {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
}

.app-body .person-header__avatar {
  font-size: 26px;
  font-weight: 800;
  height: 64px;
  width: 64px;
}

.app-body .person-header__back {
  text-decoration: none;
}

.app-body .person-header__back:hover {
  color: #26418F;
}

.person-header__badge {
  align-items: center;
  align-self: flex-end;
  background: #EDF0F5;
  border-radius: 13px;
  color: #3E4652;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  height: 26px;
  margin-bottom: 4px;
  padding: 0 11px;
  white-space: nowrap;
}

.app-body .person-header__export {
  flex-shrink: 0;
  gap: 9px;
}

/* Hours per day */
.day-chart {
  align-items: flex-end;
  display: flex;
  gap: 12px;
  padding: 24px 44px 0 8px;
  position: relative;
}

.day-chart__target {
  border-top: 1.5px dashed #9FB0DA;
  bottom: calc(18px + 6px + 154px);
  display: block;
  left: 0;
  position: absolute;
  right: 0;
}

.day-chart__target-label {
  color: #5C6472;
  font-size: 11.5px;
  font-weight: 700;
  position: absolute;
  right: 0;
  top: -18px;
}

.day-chart__col {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.day-chart__total {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  height: 16px;
  white-space: nowrap;
}

.day-chart__stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  height: 220px;
  justify-content: flex-start;
  max-width: 88px;
  overflow: hidden;
  width: 100%;
}

.day-chart__seg {
  border-radius: 6px;
  display: block;
  flex-shrink: 0;
}

.day-chart__seg--h5 {
  height: calc(5% - 2px);
}

.day-chart__seg--h10 {
  height: calc(10% - 2px);
}

.day-chart__seg--h15 {
  height: calc(15% - 2px);
}

.day-chart__seg--h20 {
  height: calc(20% - 2px);
}

.day-chart__seg--h25 {
  height: calc(25% - 2px);
}

.day-chart__seg--h30 {
  height: calc(30% - 2px);
}

.day-chart__seg--h35 {
  height: calc(35% - 2px);
}

.day-chart__seg--h40 {
  height: calc(40% - 2px);
}

.day-chart__seg--h45 {
  height: calc(45% - 2px);
}

.day-chart__seg--h50 {
  height: calc(50% - 2px);
}

.day-chart__seg--h55 {
  height: calc(55% - 2px);
}

.day-chart__seg--h60 {
  height: calc(60% - 2px);
}

.day-chart__seg--h65 {
  height: calc(65% - 2px);
}

.day-chart__seg--h70 {
  height: calc(70% - 2px);
}

.day-chart__seg--h75 {
  height: calc(75% - 2px);
}

.day-chart__seg--h80 {
  height: calc(80% - 2px);
}

.day-chart__seg--h85 {
  height: calc(85% - 2px);
}

.day-chart__seg--h90 {
  height: calc(90% - 2px);
}

.day-chart__seg--h95 {
  height: calc(95% - 2px);
}

.day-chart__seg--h100 {
  height: calc(100% - 2px);
}

.day-chart__empty {
  background: #F5F7FA;
  border-radius: 3px;
  display: block;
  height: 6px;
}

.day-chart__day {
  color: #5C6472;
  font-size: 12.5px;
  font-weight: 700;
  height: 18px;
  line-height: 18px;
}

/* By project */
.by-project {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.by-project__row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.by-project__head {
  align-items: baseline;
  display: flex;
  gap: 10px;
}

.by-project__name {
  flex-grow: 1;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
}

.by-project__share {
  color: #737C8A;
  font-size: 13px;
}

.by-project__hours {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 74px;
  text-align: right;
}

.by-project__track {
  background: #F5F7FA;
  border-radius: 5px;
  display: block;
  height: 10px;
  overflow: hidden;
  position: relative;
}

.by-project__fill {
  border-radius: 5px;
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

/* When X tracked */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline__axis {
  height: 16px;
  margin-left: 56px;
  position: relative;
}

.timeline__tick {
  color: #737C8A;
  font-size: 11.5px;
  font-weight: 700;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.timeline__tick--7 {
  left: 0%;
}

.timeline__tick--8 {
  left: 7.6923076923%;
}

.timeline__tick--9 {
  left: 15.3846153846%;
}

.timeline__tick--10 {
  left: 23.0769230769%;
}

.timeline__tick--11 {
  left: 30.7692307692%;
}

.timeline__tick--12 {
  left: 38.4615384615%;
}

.timeline__tick--13 {
  left: 46.1538461538%;
}

.timeline__tick--14 {
  left: 53.8461538462%;
}

.timeline__tick--15 {
  left: 61.5384615385%;
}

.timeline__tick--16 {
  left: 69.2307692308%;
}

.timeline__tick--17 {
  left: 76.9230769231%;
}

.timeline__tick--18 {
  left: 84.6153846154%;
}

.timeline__tick--19 {
  left: 92.3076923077%;
}

.timeline__tick--20 {
  left: 100%;
}

.timeline__lane {
  align-items: center;
  display: flex;
  gap: 16px;
}

.timeline__day {
  color: #5C6472;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  width: calc(56px - 16px);
}

.timeline__track {
  background: #F5F7FA;
  border-radius: 8px;
  flex-grow: 1;
  height: 26px;
  min-width: 0;
  position: relative;
}

.tl-block {
  border-radius: 6px;
  bottom: 3px;
  display: block;
  position: absolute;
  top: 3px;
}

.tl-block--l0 {
  left: 0%;
}

.tl-block--w0 {
  width: calc(0% - 2px);
}

.tl-block--l1 {
  left: 1%;
}

.tl-block--w1 {
  width: calc(1% - 2px);
}

.tl-block--l2 {
  left: 2%;
}

.tl-block--w2 {
  width: calc(2% - 2px);
}

.tl-block--l3 {
  left: 3%;
}

.tl-block--w3 {
  width: calc(3% - 2px);
}

.tl-block--l4 {
  left: 4%;
}

.tl-block--w4 {
  width: calc(4% - 2px);
}

.tl-block--l5 {
  left: 5%;
}

.tl-block--w5 {
  width: calc(5% - 2px);
}

.tl-block--l6 {
  left: 6%;
}

.tl-block--w6 {
  width: calc(6% - 2px);
}

.tl-block--l7 {
  left: 7%;
}

.tl-block--w7 {
  width: calc(7% - 2px);
}

.tl-block--l8 {
  left: 8%;
}

.tl-block--w8 {
  width: calc(8% - 2px);
}

.tl-block--l9 {
  left: 9%;
}

.tl-block--w9 {
  width: calc(9% - 2px);
}

.tl-block--l10 {
  left: 10%;
}

.tl-block--w10 {
  width: calc(10% - 2px);
}

.tl-block--l11 {
  left: 11%;
}

.tl-block--w11 {
  width: calc(11% - 2px);
}

.tl-block--l12 {
  left: 12%;
}

.tl-block--w12 {
  width: calc(12% - 2px);
}

.tl-block--l13 {
  left: 13%;
}

.tl-block--w13 {
  width: calc(13% - 2px);
}

.tl-block--l14 {
  left: 14%;
}

.tl-block--w14 {
  width: calc(14% - 2px);
}

.tl-block--l15 {
  left: 15%;
}

.tl-block--w15 {
  width: calc(15% - 2px);
}

.tl-block--l16 {
  left: 16%;
}

.tl-block--w16 {
  width: calc(16% - 2px);
}

.tl-block--l17 {
  left: 17%;
}

.tl-block--w17 {
  width: calc(17% - 2px);
}

.tl-block--l18 {
  left: 18%;
}

.tl-block--w18 {
  width: calc(18% - 2px);
}

.tl-block--l19 {
  left: 19%;
}

.tl-block--w19 {
  width: calc(19% - 2px);
}

.tl-block--l20 {
  left: 20%;
}

.tl-block--w20 {
  width: calc(20% - 2px);
}

.tl-block--l21 {
  left: 21%;
}

.tl-block--w21 {
  width: calc(21% - 2px);
}

.tl-block--l22 {
  left: 22%;
}

.tl-block--w22 {
  width: calc(22% - 2px);
}

.tl-block--l23 {
  left: 23%;
}

.tl-block--w23 {
  width: calc(23% - 2px);
}

.tl-block--l24 {
  left: 24%;
}

.tl-block--w24 {
  width: calc(24% - 2px);
}

.tl-block--l25 {
  left: 25%;
}

.tl-block--w25 {
  width: calc(25% - 2px);
}

.tl-block--l26 {
  left: 26%;
}

.tl-block--w26 {
  width: calc(26% - 2px);
}

.tl-block--l27 {
  left: 27%;
}

.tl-block--w27 {
  width: calc(27% - 2px);
}

.tl-block--l28 {
  left: 28%;
}

.tl-block--w28 {
  width: calc(28% - 2px);
}

.tl-block--l29 {
  left: 29%;
}

.tl-block--w29 {
  width: calc(29% - 2px);
}

.tl-block--l30 {
  left: 30%;
}

.tl-block--w30 {
  width: calc(30% - 2px);
}

.tl-block--l31 {
  left: 31%;
}

.tl-block--w31 {
  width: calc(31% - 2px);
}

.tl-block--l32 {
  left: 32%;
}

.tl-block--w32 {
  width: calc(32% - 2px);
}

.tl-block--l33 {
  left: 33%;
}

.tl-block--w33 {
  width: calc(33% - 2px);
}

.tl-block--l34 {
  left: 34%;
}

.tl-block--w34 {
  width: calc(34% - 2px);
}

.tl-block--l35 {
  left: 35%;
}

.tl-block--w35 {
  width: calc(35% - 2px);
}

.tl-block--l36 {
  left: 36%;
}

.tl-block--w36 {
  width: calc(36% - 2px);
}

.tl-block--l37 {
  left: 37%;
}

.tl-block--w37 {
  width: calc(37% - 2px);
}

.tl-block--l38 {
  left: 38%;
}

.tl-block--w38 {
  width: calc(38% - 2px);
}

.tl-block--l39 {
  left: 39%;
}

.tl-block--w39 {
  width: calc(39% - 2px);
}

.tl-block--l40 {
  left: 40%;
}

.tl-block--w40 {
  width: calc(40% - 2px);
}

.tl-block--l41 {
  left: 41%;
}

.tl-block--w41 {
  width: calc(41% - 2px);
}

.tl-block--l42 {
  left: 42%;
}

.tl-block--w42 {
  width: calc(42% - 2px);
}

.tl-block--l43 {
  left: 43%;
}

.tl-block--w43 {
  width: calc(43% - 2px);
}

.tl-block--l44 {
  left: 44%;
}

.tl-block--w44 {
  width: calc(44% - 2px);
}

.tl-block--l45 {
  left: 45%;
}

.tl-block--w45 {
  width: calc(45% - 2px);
}

.tl-block--l46 {
  left: 46%;
}

.tl-block--w46 {
  width: calc(46% - 2px);
}

.tl-block--l47 {
  left: 47%;
}

.tl-block--w47 {
  width: calc(47% - 2px);
}

.tl-block--l48 {
  left: 48%;
}

.tl-block--w48 {
  width: calc(48% - 2px);
}

.tl-block--l49 {
  left: 49%;
}

.tl-block--w49 {
  width: calc(49% - 2px);
}

.tl-block--l50 {
  left: 50%;
}

.tl-block--w50 {
  width: calc(50% - 2px);
}

.tl-block--l51 {
  left: 51%;
}

.tl-block--w51 {
  width: calc(51% - 2px);
}

.tl-block--l52 {
  left: 52%;
}

.tl-block--w52 {
  width: calc(52% - 2px);
}

.tl-block--l53 {
  left: 53%;
}

.tl-block--w53 {
  width: calc(53% - 2px);
}

.tl-block--l54 {
  left: 54%;
}

.tl-block--w54 {
  width: calc(54% - 2px);
}

.tl-block--l55 {
  left: 55%;
}

.tl-block--w55 {
  width: calc(55% - 2px);
}

.tl-block--l56 {
  left: 56%;
}

.tl-block--w56 {
  width: calc(56% - 2px);
}

.tl-block--l57 {
  left: 57%;
}

.tl-block--w57 {
  width: calc(57% - 2px);
}

.tl-block--l58 {
  left: 58%;
}

.tl-block--w58 {
  width: calc(58% - 2px);
}

.tl-block--l59 {
  left: 59%;
}

.tl-block--w59 {
  width: calc(59% - 2px);
}

.tl-block--l60 {
  left: 60%;
}

.tl-block--w60 {
  width: calc(60% - 2px);
}

.tl-block--l61 {
  left: 61%;
}

.tl-block--w61 {
  width: calc(61% - 2px);
}

.tl-block--l62 {
  left: 62%;
}

.tl-block--w62 {
  width: calc(62% - 2px);
}

.tl-block--l63 {
  left: 63%;
}

.tl-block--w63 {
  width: calc(63% - 2px);
}

.tl-block--l64 {
  left: 64%;
}

.tl-block--w64 {
  width: calc(64% - 2px);
}

.tl-block--l65 {
  left: 65%;
}

.tl-block--w65 {
  width: calc(65% - 2px);
}

.tl-block--l66 {
  left: 66%;
}

.tl-block--w66 {
  width: calc(66% - 2px);
}

.tl-block--l67 {
  left: 67%;
}

.tl-block--w67 {
  width: calc(67% - 2px);
}

.tl-block--l68 {
  left: 68%;
}

.tl-block--w68 {
  width: calc(68% - 2px);
}

.tl-block--l69 {
  left: 69%;
}

.tl-block--w69 {
  width: calc(69% - 2px);
}

.tl-block--l70 {
  left: 70%;
}

.tl-block--w70 {
  width: calc(70% - 2px);
}

.tl-block--l71 {
  left: 71%;
}

.tl-block--w71 {
  width: calc(71% - 2px);
}

.tl-block--l72 {
  left: 72%;
}

.tl-block--w72 {
  width: calc(72% - 2px);
}

.tl-block--l73 {
  left: 73%;
}

.tl-block--w73 {
  width: calc(73% - 2px);
}

.tl-block--l74 {
  left: 74%;
}

.tl-block--w74 {
  width: calc(74% - 2px);
}

.tl-block--l75 {
  left: 75%;
}

.tl-block--w75 {
  width: calc(75% - 2px);
}

.tl-block--l76 {
  left: 76%;
}

.tl-block--w76 {
  width: calc(76% - 2px);
}

.tl-block--l77 {
  left: 77%;
}

.tl-block--w77 {
  width: calc(77% - 2px);
}

.tl-block--l78 {
  left: 78%;
}

.tl-block--w78 {
  width: calc(78% - 2px);
}

.tl-block--l79 {
  left: 79%;
}

.tl-block--w79 {
  width: calc(79% - 2px);
}

.tl-block--l80 {
  left: 80%;
}

.tl-block--w80 {
  width: calc(80% - 2px);
}

.tl-block--l81 {
  left: 81%;
}

.tl-block--w81 {
  width: calc(81% - 2px);
}

.tl-block--l82 {
  left: 82%;
}

.tl-block--w82 {
  width: calc(82% - 2px);
}

.tl-block--l83 {
  left: 83%;
}

.tl-block--w83 {
  width: calc(83% - 2px);
}

.tl-block--l84 {
  left: 84%;
}

.tl-block--w84 {
  width: calc(84% - 2px);
}

.tl-block--l85 {
  left: 85%;
}

.tl-block--w85 {
  width: calc(85% - 2px);
}

.tl-block--l86 {
  left: 86%;
}

.tl-block--w86 {
  width: calc(86% - 2px);
}

.tl-block--l87 {
  left: 87%;
}

.tl-block--w87 {
  width: calc(87% - 2px);
}

.tl-block--l88 {
  left: 88%;
}

.tl-block--w88 {
  width: calc(88% - 2px);
}

.tl-block--l89 {
  left: 89%;
}

.tl-block--w89 {
  width: calc(89% - 2px);
}

.tl-block--l90 {
  left: 90%;
}

.tl-block--w90 {
  width: calc(90% - 2px);
}

.tl-block--l91 {
  left: 91%;
}

.tl-block--w91 {
  width: calc(91% - 2px);
}

.tl-block--l92 {
  left: 92%;
}

.tl-block--w92 {
  width: calc(92% - 2px);
}

.tl-block--l93 {
  left: 93%;
}

.tl-block--w93 {
  width: calc(93% - 2px);
}

.tl-block--l94 {
  left: 94%;
}

.tl-block--w94 {
  width: calc(94% - 2px);
}

.tl-block--l95 {
  left: 95%;
}

.tl-block--w95 {
  width: calc(95% - 2px);
}

.tl-block--l96 {
  left: 96%;
}

.tl-block--w96 {
  width: calc(96% - 2px);
}

.tl-block--l97 {
  left: 97%;
}

.tl-block--w97 {
  width: calc(97% - 2px);
}

.tl-block--l98 {
  left: 98%;
}

.tl-block--w98 {
  width: calc(98% - 2px);
}

.tl-block--l99 {
  left: 99%;
}

.tl-block--w99 {
  width: calc(99% - 2px);
}

.tl-block--l100 {
  left: 100%;
}

.tl-block--w100 {
  width: calc(100% - 2px);
}

@media (min-width: 600px) {
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .project-bar {
    grid-template-areas: "name track hours note";
    grid-template-columns: 190px minmax(0, 1fr) 80px minmax(0, 170px);
  }
  .project-bar__note {
    text-align: right;
  }
}
@media (min-width: 1200px) {
  .report__row {
    align-items: stretch;
    flex-direction: row;
  }
  .report__aside {
    width: 480px;
  }
  .report__aside--narrow {
    width: 400px;
  }
}
/* Time tracker: export screen (period chips, filter cards, preview table) */
.export {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.export__download {
  display: flex;
}

.app-body .export__download .btn-primary, .app-body .export__download button, .app-body .export__download .btn {
  gap: 9px;
}

.export__filters {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Period */
.export-period {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 20px;
}

.export-period__label {
  flex-shrink: 0;
  min-width: 64px;
}

.chip-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-choice__item {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.chip-choice__input {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.chip-choice__chip {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 12px;
  color: #3E4652;
  display: inline-flex;
  font-size: 14.5px;
  font-weight: 700;
  height: 40px;
  padding: 0 15px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.chip-choice__input:checked ~ .chip-choice__chip {
  background: #26418F;
  border-color: #26418F;
  color: white;
}

.chip-choice__input:focus-visible ~ .chip-choice__chip {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

.export-period__dates {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.export-period__date-label {
  color: #5C6472;
  font-size: 13.5px;
  font-weight: 600;
}

.export-period .export-period__date {
  border: 1px solid #DFE3EB;
  border-radius: 12px;
  box-sizing: border-box;
  color: #14181F;
  font-size: 14.5px;
  height: 40px;
  margin: 0;
  padding: 0 10px;
}

.export-period .export-period__date:focus {
  border-color: #26418F;
  box-shadow: 0 0 0 3px #E4E9F6;
  outline: none;
}

/* Filter cards */
.export-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.export-fieldset {
  gap: 4px;
  margin: 0;
  padding: 18px 20px;
}

.export-fieldset__legend {
  float: left;
  padding: 0 0 10px;
  width: 100%;
}

.export-fieldset__hint {
  color: #737C8A;
  font-size: 13px;
  padding-top: 8px;
}

.export-fieldset .export-fieldset__switch {
  border-top: 1px solid #F5F7FA;
  margin-top: 4px;
  padding: 10px 0 0;
}

.export-fieldset__task {
  padding-top: 8px;
}

.export-fieldset .field__label {
  color: #5C6472;
  font-size: 12.5px;
}

.export-fieldset .field__input {
  font-size: 14.5px;
  height: 40px;
  padding: 0 12px;
}

.choice-row {
  align-items: center;
  color: #3E4652;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 500;
  gap: 11px;
  min-height: 40px;
}

.choice-row--static {
  cursor: default;
}

.choice-row__input {
  accent-color: #26418F;
  flex-shrink: 0;
  height: 18px;
  margin: 0;
  width: 18px;
}

.choice-row:has(.choice-row__input:checked) {
  color: #14181F;
  font-weight: 600;
}

.choice-row__label {
  align-items: center;
  display: inline-flex;
  gap: 9px;
  min-width: 0;
}

/* Preview */
.export-preview {
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.07);
}

.export-preview__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.export-preview__summary {
  color: #3E4652;
  flex-grow: 1;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
}

.export-preview__file {
  color: #737C8A;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.export-table th,
.export-table td {
  white-space: nowrap;
}

.export-table td {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.export-preview__more {
  color: #737C8A;
  font-size: 13.5px;
}

@media (min-width: 600px) {
  .export-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .export-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Time tracker: import screens (upload form, run status, counts, history table) */
.imports__run {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.imports__status {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.imports__error {
  background: #F9E3E1;
  border-radius: 12px;
  color: #B3261E;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
}

.field__input--file {
  cursor: pointer;
  padding: 8px;
}

/* Counts */
.imports-counts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.imports-counts__item {
  background: #F5F7FA;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
}

.imports-counts__label {
  color: #5C6472;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.imports-counts__value {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0;
}

.imports-counts__item--imported .imports-counts__value {
  color: #26418F;
}

.imports-counts__item--skipped .imports-counts__value {
  color: #B3261E;
}

/* Status pill */
.status-pill {
  align-items: center;
  background: #EDF0F5;
  border-radius: 11px;
  color: #3E4652;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  white-space: nowrap;
}

.status-pill--running {
  background: #E4E9F6;
  color: #26418F;
}

.status-pill--done {
  background: #DDF1EE;
  color: #0B6158;
}

.status-pill--failed {
  background: #F9E3E1;
  color: #B3261E;
}

.status-pill__pulse {
  animation: status-pill-pulse 1.2s ease-in-out infinite;
  background: currentcolor;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

@keyframes status-pill-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* History table */
.imports-table__link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.imports-table__link:hover {
  text-decoration: underline;
}

.imports-table__file {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.imports-table__provider {
  color: #5C6472;
  font-size: 12px;
}

@media (max-width: 640px) {
  .imports-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Boards: board colours (key badge, sidebar dot, colour swatches) and the sidebar link touches */
.board-key {
  align-items: center;
  border-radius: 12px;
  color: white;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  letter-spacing: 0.3px;
  min-width: 42px;
  padding: 0 6px;
}

.board-dot {
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
  display: inline-block;
  flex-shrink: 0;
  height: 19px;
  width: 19px;
}

.board-key-input {
  text-transform: uppercase;
}

.board-key--blue,
.board-dot--blue {
  background: #26418F;
}

.swatch--board-blue .swatch__dot {
  background: #26418F;
  color: white;
}

.swatch--board-blue .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #26418F;
}

.board-key--sky,
.board-dot--sky {
  background: #4F7FD9;
}

.swatch--board-sky .swatch__dot {
  background: #4F7FD9;
  color: white;
}

.swatch--board-sky .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #4F7FD9;
}

.board-key--teal,
.board-dot--teal {
  background: #0E7C73;
}

.swatch--board-teal .swatch__dot {
  background: #0E7C73;
  color: white;
}

.swatch--board-teal .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #0E7C73;
}

.board-key--violet,
.board-dot--violet {
  background: #4C2D9E;
}

.swatch--board-violet .swatch__dot {
  background: #4C2D9E;
  color: white;
}

.swatch--board-violet .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #4C2D9E;
}

.board-key--amber,
.board-dot--amber {
  background: #B86E00;
}

.swatch--board-amber .swatch__dot {
  background: #B86E00;
  color: white;
}

.swatch--board-amber .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #B86E00;
}

.board-key--rose,
.board-dot--rose {
  background: #C2185B;
}

.swatch--board-rose .swatch__dot {
  background: #C2185B;
  color: white;
}

.swatch--board-rose .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #C2185B;
}

.board-key--ink,
.board-dot--ink {
  background: #14181F;
}

.swatch--board-ink .swatch__dot {
  background: #14181F;
  color: white;
}

.swatch--board-ink .swatch__radio:checked ~ .swatch__dot {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #14181F;
}

.app-nav__text {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-body .app-sidebar .app-nav__link--action {
  color: #26418F;
  font-weight: 700;
}

.icon--filled {
  fill: currentcolor;
}

/* Boards: all-boards page (tiles and the "Due for you" panel) */
.bd-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.bd-home {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
  .bd-home {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}
.bd-home__boards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.bd-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bd-empty {
  color: #5C6472;
  font-size: 14.5px;
}

.bd-tiles {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.bd-tile {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  height: 176px;
  overflow: hidden;
  position: relative;
}

.app-body .bd-tile__link {
  box-sizing: border-box;
  color: #14181F;
  display: flex;
  flex-direction: column;
  gap: 12px;
  inset: 0;
  padding: 20px;
  position: absolute;
  text-decoration: none;
}

.app-body .bd-tile__link:hover {
  background: #F5F7FA;
  color: #14181F;
}

.bd-tile__head {
  align-items: center;
  display: flex;
  gap: 12px;
  padding-right: 40px;
}

.bd-tile__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-tile__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bd-tile__foot {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

.bd-tile__updated {
  color: #737C8A;
  font-size: 12.5px;
}

.bd-tile__star {
  position: absolute;
  right: 14px;
  top: 14px;
}

.app-body .bd-tile--create {
  align-items: center;
  background: rgba(255, 255, 255, 0.45);
  border: 1.5px dashed #BFC8DA;
  box-shadow: none;
  color: #26418F;
  display: flex;
  flex-direction: column;
  font-size: 15.5px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  text-decoration: none;
}

.bd-tile__create-hint {
  color: #5C6472;
  font-size: 13px;
  font-weight: 500;
}

.bd-pill {
  align-items: center;
  background: #F5F7FA;
  border-radius: 13px;
  color: #3E4652;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  height: 26px;
  padding: 0 10px;
}

.bd-pill--due {
  background: #E4E9F6;
  color: #26418F;
}

.bd-pill--late {
  background: #FDF4E7;
  color: #8A5200;
}

/* Star toggle (tile and board header) */
.icon-btn.bd-star {
  color: #A9B0BC;
}

.icon-btn.bd-star--on {
  background: #FDF4E7;
  color: #B86E00;
}

/* Due for you */
.bd-due {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}

.bd-due__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.bd-due__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd-due__label {
  color: #5C6472;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin: 0;
  padding-top: 8px;
  text-transform: uppercase;
}

.bd-due__label--overdue {
  color: #8A5200;
}

.bd-due__label--today {
  color: #26418F;
}

.bd-due__list {
  display: flex;
  flex-direction: column;
}

.app-body .bd-due__item {
  align-items: center;
  border-bottom: 1px solid #F0F2F6;
  box-sizing: border-box;
  color: #14181F;
  display: flex;
  gap: 12px;
  min-height: 52px;
  padding: 8px 4px;
  text-decoration: none;
}

.app-body .bd-due__item:hover {
  color: #14181F;
}

.bd-due__item .board-dot {
  border-radius: 50%;
  box-shadow: none;
  height: 9px;
  width: 9px;
}

.bd-due__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1px;
  min-width: 0;
}

.bd-due__card {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-due__number {
  color: #5C6472;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  margin-right: 6px;
}

.bd-due__meta {
  color: #737C8A;
  font-size: 12px;
}

.bd-due__when {
  color: #3E4652;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Boards: board page (header, toolbar, filter popover, chips, columns) */
/* Every ancestor must be allowed to shrink so only the columns scroll horizontally */
.bd-page--board {
  flex-grow: 1;
  min-height: 0;
  min-width: 0;
}

.bd-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bd-header__row {
  align-items: center;
  display: flex;
  gap: 12px;
}

.bd-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Toolbar */
.bd-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bd-toolbar__members {
  display: inline-flex;
}

.bd-toolbar .bd-toolbar__search {
  flex-grow: 1;
  max-width: 340px;
  min-width: 200px;
}

.app-body .bd-toggle {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 999px;
  color: #14181F;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 8px;
  text-decoration: none;
}

.app-body .bd-toggle--on,
.app-body .bd-toggle--on:hover {
  background: #E4E9F6;
  border-color: #26418F;
  color: #1B2F6B;
}

/* Filter popover */
.bd-filter .bd-filter__button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  list-style: none;
}

.bd-filter .bd-filter__button::-webkit-details-marker {
  display: none;
}

.bd-filter__count {
  align-items: center;
  background: #26418F;
  border-radius: 10px;
  color: white;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  min-width: 20px;
}

.bd-filter .bd-filter__panel {
  box-sizing: border-box;
  gap: 16px;
  left: 0;
  max-width: calc(100vw - 32px);
  padding: 16px;
  right: auto;
  width: 340px;
}

.bd-filter__group {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.bd-filter__legend {
  color: #737C8A;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 0 0 6px;
  text-transform: uppercase;
}

.bd-filter__option {
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-height: 36px;
  padding: 0 6px;
}

.bd-filter__option:hover {
  background: #F5F7FA;
}

.bd-filter__label {
  flex-grow: 1;
  font-size: 14.5px;
  font-weight: 500;
  min-width: 0;
}

.bd-filter__number {
  color: #737C8A;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.bd-segmented {
  background: #F5F7FA;
  border-radius: 999px;
  display: flex;
  padding: 3px;
}

.bd-segmented__option {
  cursor: pointer;
  flex: 1;
  position: relative;
}

.bd-segmented__radio {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.bd-segmented__label {
  align-items: center;
  border-radius: 999px;
  color: #5C6472;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  height: 34px;
  justify-content: center;
}

.bd-segmented__radio:checked + .bd-segmented__label {
  background: #14181F;
  color: white;
}

.bd-segmented__radio:focus-visible + .bd-segmented__label {
  outline: 2px solid #26418F;
  outline-offset: 2px;
}

.bd-filter__footer {
  align-items: center;
  border-top: 1px solid #E7EBF1;
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
}

.bd-filter__result {
  color: #5C6472;
  font-size: 13px;
}

.app-body .bd-filter__clear,
.app-body .bd-chips__clear {
  color: #26418F;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

/* Active filter chips */
.bd-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-chips__result {
  color: #5C6472;
  font-size: 13.5px;
  margin-right: 4px;
}

.bd-chip {
  align-items: center;
  background: #E4E9F6;
  border-radius: 999px;
  color: #1B2F6B;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  height: 30px;
  padding: 0 6px 0 12px;
}

.app-body .bd-chip__remove {
  align-items: center;
  border-radius: 50%;
  color: #1B2F6B;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.app-body .bd-chip__remove:hover {
  background: rgba(38, 65, 143, 0.14);
}

/* Columns */
.bd-lists {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 16px;
}

.bd-list {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #E7EBF1;
  border-radius: 20px;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 300px;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  width: 300px;
}

.bd-list__header {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 0 4px;
}

.bd-list__name {
  flex-grow: 1;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-list__count {
  background: #EDF0F5;
  border-radius: 11px;
  color: #3E4652;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
}

.bd-list__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 56px;
}

.bd-list__cards:not(:has(.card-tile)):before {
  align-items: center;
  border: 1.5px dashed #C7CDD8;
  border-radius: 14px;
  box-sizing: border-box;
  color: #737C8A;
  content: attr(data-empty-label);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  height: 56px;
  justify-content: center;
}

/* Add a card */
.bd-composer__open {
  align-items: center;
  border-radius: 12px;
  color: #26418F;
  cursor: pointer;
  display: flex;
  font-size: 14.5px;
  font-weight: 700;
  gap: 8px;
  height: 40px;
  list-style: none;
  padding: 0 8px;
}

.bd-composer__open::-webkit-details-marker {
  display: none;
}

.bd-composer__open:hover {
  background: rgba(20, 24, 31, 0.05);
}

.bd-composer[open] .bd-composer__open {
  display: none;
}

.bd-composer__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bd-composer__form .field__input {
  font-size: 14.5px;
}

.bd-composer__error {
  color: #B3261E;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.bd-composer__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-composer__hint {
  color: #737C8A;
  font-size: 12px;
  margin-left: auto;
}

/* Add another list */
.bd-addlist {
  flex: 0 0 300px;
  width: 300px;
}

.bd-addlist__button {
  align-items: center;
  background: rgba(255, 255, 255, 0.45);
  border: 1.5px dashed #BFC8DA;
  border-radius: 20px;
  box-sizing: border-box;
  color: #26418F;
  cursor: pointer;
  display: flex;
  font-size: 14.5px;
  font-weight: 700;
  gap: 8px;
  height: 52px;
  justify-content: center;
  list-style: none;
}

.bd-addlist__button::-webkit-details-marker {
  display: none;
}

.bd-addlist[open] .bd-addlist__button {
  display: none;
}

.bd-addlist__form {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #E7EBF1;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.bd-addlist__form .btn-primary, .bd-addlist__form button, .bd-addlist__form .btn {
  align-self: flex-start;
}

/* Boards: card tiles inside the lists */
.app-body a.card-tile, .app-body .nav-list-container .nav-list li .card-tile.dropdown-button, .nav-list-container .nav-list li .app-body .card-tile.dropdown-button {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  color: #14181F;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  text-decoration: none;
}

.card-tile:hover {
  border-color: #DFE3EB;
}

.card-tile.is-ghost {
  opacity: 0.4;
}

.card-tile.is-dragging {
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
}

.card-tile__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-tile__people {
  display: inline-flex;
  margin-left: auto;
}

.card-stat {
  align-items: center;
  color: #5C6472;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 4px;
}

.card-stat--done {
  color: #0B6158;
}

.card-tile__number {
  color: #5C6472;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.card-tile__title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.card-tile__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card-due {
  align-items: center;
  background: #F5F7FA;
  border-radius: 12px;
  color: #3E4652;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  white-space: nowrap;
}

.card-due--today {
  background: #E4E9F6;
  color: #26418F;
}

.card-due--overdue {
  background: #FDF4E7;
  color: #8A5200;
}

.card-due--completed {
  background: #DDF1EE;
  color: #0B6158;
}

/* Boards: label chips and the card modal (top bar, sections, checklist, files, activity, right rail) */
/* Label chips (tiles, filter, modal) */
.label-chip {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  height: 24px;
  max-width: 100%;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-chip--sm {
  border-radius: 10px;
  font-size: 11.5px;
  height: 20px;
  padding: 0 8px;
}

.label-chip--lg {
  font-size: 13.5px;
  height: 34px;
  padding: 0 12px;
}

.label-chip--blue {
  background: #E4E9F6;
  color: #26418F;
}

.label-chip--sky {
  background: #E3EEFC;
  color: #2D5BB8;
}

.label-chip--teal {
  background: #DDF1EE;
  color: #0B6158;
}

.label-chip--violet {
  background: #EBE6FA;
  color: #4C2D9E;
}

.label-chip--amber {
  background: #FBEEDC;
  color: #8A5200;
}

.label-chip--rose {
  background: #FBE9E7;
  color: #B3261E;
}

.label-chip--ink {
  background: #EEF1F5;
  color: #14181F;
}

/* Card text: #links and @mentions */
.card-text {
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.app-body .card-link {
  font-weight: 700;
  text-decoration: none;
}

.card-mention {
  background: #E4E9F6;
  border-radius: 6px;
  color: #26418F;
  font-weight: 700;
  padding: 0 4px;
}

/* Modal shell */
body.has-card-modal {
  overflow: hidden;
}

.cm {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 60;
}

.cm__backdrop {
  background: rgba(20, 24, 31, 0.42);
  inset: 0;
  position: absolute;
}

.cm__dialog {
  background: white;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(16, 24, 40, 0.32);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  outline: 0;
  overflow: hidden;
  position: relative;
  width: min(1060px, 100%);
}

.cm__title {
  flex-shrink: 0;
  padding: 16px 32px 0;
}

.cm__alert {
  background: #F9E3E1;
  border-radius: 12px;
  color: #B3261E;
  font-size: 14px;
  font-weight: 600;
  margin: 12px 32px 0;
  padding: 10px 14px;
}

.cm__body {
  display: flex;
  flex-grow: 1;
  gap: 28px;
  min-height: 0;
  padding: 18px 32px 28px;
}

.cm__main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 24px;
  min-width: 0;
  overflow-y: auto;
  padding-right: 6px;
}

/* Top bar */
.cm-top {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 22px 0 32px;
}

.cm-top__muted {
  color: #5C6472;
  font-size: 14.5px;
}

.cm-top__spacer {
  flex-grow: 1;
}

.cm-top__form {
  display: inline-flex;
}

.app-body .cm-top__board {
  align-items: center;
  color: #26418F;
  display: inline-flex;
  font-size: 14.5px;
  font-weight: 700;
  gap: 8px;
  text-decoration: none;
}

.cm-top__list {
  font-size: 14.5px;
  font-weight: 700;
}

.cm-number {
  align-items: center;
  background: #F6F8FB;
  border: 1px solid #DFE3EB;
  border-radius: 10px;
  color: #14181F;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  height: 34px;
  padding: 0 12px;
}

.cm-select {
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 10px;
  color: #14181F;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  height: 34px;
  padding: 0 10px;
}

.cm-watch {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 12px;
  color: #14181F;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
}

.cm-watch--on {
  background: #E4E9F6;
  border-color: #C9D3EC;
  color: #26418F;
}

.app-body .cm-close {
  align-items: center;
  background: #F1F3F8;
  border-radius: 50%;
  color: #3E4652;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.cm-title {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  box-sizing: border-box;
  color: #14181F;
  font: inherit;
  font-size: 30px;
  font-weight: 800;
  height: 52px;
  letter-spacing: -0.9px;
  margin-left: -10px;
  padding: 0 10px;
  width: calc(100% + 10px);
}

.cm-title:hover {
  border-color: #DFE3EB;
}

.cm-title:focus {
  background: white;
  border-color: #26418F;
  outline: 0;
}

.cm-title--static {
  height: auto;
  line-height: 52px;
  margin-top: 0;
}

/* Meta row */
.cm-eyebrow {
  color: #737C8A;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.cm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.cm-meta__group {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-meta__items {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cm-meta__person {
  display: inline-flex;
}

.cm-meta__empty,
.cm-meta__hint {
  color: #737C8A;
  font-size: 13.5px;
}

.cm-meta__empty {
  line-height: 34px;
}

.cm-due {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 10px;
}

.cm-due--upcoming {
  background: #F1F3F8;
  color: #3E4652;
}

.cm-due--today {
  background: #E4E9F6;
  color: #26418F;
}

.cm-due--overdue {
  background: #FDF4E7;
  color: #8A5200;
}

.cm-due--completed {
  background: #DDF1EE;
  color: #0B6158;
}

.cm-due__tag {
  align-items: center;
  background: white;
  border-radius: 7px;
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 800;
  height: 22px;
  padding: 0 8px;
}

/* Sections */
.cm-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cm-section__head {
  align-items: center;
  display: flex;
  gap: 12px;
}

.cm-section__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin: 0;
}

.cm-placeholder {
  color: #737C8A;
  margin: 0;
}

.cm-edit__summary {
  background: #F6F8FB;
  border: 1px solid #EEF1F5;
  border-radius: 14px;
  color: #2A313C;
  cursor: pointer;
  display: block;
  list-style: none;
  padding: 14px 16px;
}

.cm-edit__summary::-webkit-details-marker {
  display: none;
}

.cm-edit[open] > .cm-edit__summary {
  display: none;
}

.cm-edit__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cm-edit__actions {
  display: flex;
  gap: 8px;
}

/* Checklist */
.cm-count {
  color: #5C6472;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.cm-progress {
  appearance: none;
  background: #EEF1F5;
  border: 0;
  border-radius: 4px;
  flex-grow: 1;
  height: 8px;
  overflow: hidden;
}

.cm-progress::-webkit-progress-bar {
  background: #EEF1F5;
}

.cm-progress::-webkit-progress-value {
  background: #26418F;
  border-radius: 4px;
}

.cm-progress::-moz-progress-bar {
  background: #26418F;
  border-radius: 4px;
}

.cm-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-check {
  align-items: center;
  border-radius: 11px;
  display: flex;
  min-height: 42px;
  padding: 0 10px;
}

.cm-check:hover {
  background: #F6F8FB;
}

.cm-check__form {
  flex-grow: 1;
  min-width: 0;
}

.cm-check__label {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  gap: 12px;
  min-height: 42px;
}

.cm-check__box {
  accent-color: #26418F;
  flex-shrink: 0;
  height: 18px;
  margin: 0;
  width: 18px;
}

.cm-check--done .cm-check__label {
  color: #737C8A;
  text-decoration: line-through;
}

.cm-check__delete {
  display: inline-flex;
}

.cm-check__remove {
  color: #737C8A;
}

.cm-add {
  align-items: center;
  display: flex;
  gap: 8px;
}

.cm-add .field__input {
  flex-grow: 1;
}

/* Attachments */
.cm-files {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-file {
  align-items: center;
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  display: flex;
  gap: 12px;
  min-height: 64px;
  padding: 0 14px;
}

.cm-file__badge {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  width: 44px;
}

.cm-file__badge--blue {
  background: #E4E9F6;
  color: #26418F;
}

.cm-file__badge--sky {
  background: #E3EEFC;
  color: #2D5BB8;
}

.cm-file__badge--teal {
  background: #DDF1EE;
  color: #0B6158;
}

.cm-file__badge--violet {
  background: #EBE6FA;
  color: #4C2D9E;
}

.cm-file__badge--amber {
  background: #FBEEDC;
  color: #8A5200;
}

.cm-file__badge--rose {
  background: #FBE9E7;
  color: #B3261E;
}

.cm-file__badge--ink {
  background: #EEF1F5;
  color: #14181F;
}

.cm-file__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1px;
  min-width: 0;
}

.app-body .cm-file__name {
  color: #14181F;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-file__meta {
  color: #737C8A;
  font-size: 12.5px;
}

.cm-file__delete {
  display: inline-flex;
}

.cm-file__remove {
  color: #737C8A;
}

.cm-upload__button {
  align-items: center;
  align-self: flex-start;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
}

.cm-upload {
  display: flex;
}

/* Activity */
.cm-entry {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.cm-entry__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 5px;
  min-width: 0;
  padding-top: 7px;
}

.cm-entry__line {
  color: #3E4652;
  font-size: 14px;
  margin: 0;
}

.cm-entry__line strong {
  color: #14181F;
}

.cm-entry__time {
  color: #737C8A;
}

.cm-bubble {
  align-self: flex-start;
  background: #F6F8FB;
  border: 1px solid #EEF1F5;
  border-radius: 4px 14px 14px;
  padding: 10px 14px;
}

.cm-composer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
  min-width: 0;
}

.cm-composer__field {
  position: relative;
}

.cm-composer__field .field__input {
  resize: vertical;
}

.cm-composer__submit {
  align-self: flex-start;
}

.cm-composer__submit[hidden] {
  display: none;
}

.cm-mentions {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  left: 0;
  list-style: none;
  margin: 4px 0 0;
  min-width: 220px;
  padding: 4px;
  position: absolute;
  top: 100%;
  z-index: 20;
}

.cm-mentions[hidden] {
  display: none;
}

.cm-mentions__option {
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 10px;
}

.cm-mentions__option[aria-selected=true],
.cm-mentions__option:hover {
  background: #E4E9F6;
  color: #26418F;
}

/* Right rail */
.cm-rail {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  width: 210px;
}

.cm-rail__title {
  padding: 0 2px 4px;
}

.cm-rail__title--actions {
  padding-top: 16px;
}

.cm-rail__spacer {
  flex-grow: 1;
}

.cm-rail__footer {
  color: #737C8A;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  padding: 0 2px;
}

.cm-rail__copy,
.cm-rail__form {
  display: flex;
  flex-direction: column;
}

.app-body .cm-rail__button {
  align-items: center;
  background: #F1F3F8;
  border: 0;
  border-radius: 11px;
  box-sizing: border-box;
  color: #14181F;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  gap: 10px;
  height: 40px;
  list-style: none;
  padding: 0 12px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.cm-rail__button:hover {
  background: #E7EBF3;
}

.cm-rail__button::-webkit-details-marker {
  display: none;
}

.cm-pop {
  position: relative;
}

.cm-pop__panel {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
  position: absolute;
  right: calc(100% + 10px);
  top: 0;
  width: 280px;
  z-index: 30;
}

.cm-pop__title {
  font-size: 13px;
  font-weight: 800;
  margin: 0;
}

.cm-pop__empty,
.cm-pop__hint {
  color: #737C8A;
  font-size: 12.5px;
  margin: 0;
}

.cm-pop__form {
  display: flex;
}

.cm-pop__option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #14181F;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  min-height: 36px;
  padding: 0 8px;
  text-align: left;
  width: 100%;
}

.cm-pop__option:hover {
  background: #F6F8FB;
}

.cm-pop__option--on {
  background: #F1F4FA;
}

.cm-pop__name {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-pop__new {
  border-top: 1px solid #E7EBF1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 12px;
}

.cm-pop__panel > .cm-pop__new:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.cm-pop__actions,
.cm-pop__remove {
  display: flex;
  gap: 8px;
}

.cm-pop__remove {
  margin-top: 8px;
}

@media (max-width: 860px) {
  .cm {
    padding: 0;
  }
  .cm__dialog {
    border-radius: 0;
    height: 100%;
  }
  .cm__body {
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 20px 24px;
  }
  .cm__main {
    overflow: visible;
  }
  .cm__title,
  .cm__alert {
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 0;
    padding-right: 0;
  }
  .cm-top {
    padding: 16px 20px 0;
  }
  .cm-rail {
    width: 100%;
  }
  .cm-pop__panel {
    right: 0;
    top: calc(100% + 6px);
  }
  .cm-files {
    grid-template-columns: 1fr;
  }
}
/* Boards: My tasks and calendar */
/* Board name pill (board colour tint) shared by tasks, calendar rows and calendar chips */
.board-pill {
  align-items: center;
  border-radius: 11px;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
}

.board-pill .board-dot {
  border-radius: 50%;
  box-shadow: none;
  height: 7px;
  width: 7px;
}

.board-pill--blue {
  background: #E4E9F6;
  color: #26418F;
}

.board-pill--sky {
  background: #E3ECFB;
  color: #2C5BB0;
}

.board-pill--teal {
  background: #DDF1EE;
  color: #0B6158;
}

.board-pill--violet {
  background: #EBE6FA;
  color: #4C2D9E;
}

.board-pill--amber {
  background: #FBEEDC;
  color: #8A5200;
}

.board-pill--rose {
  background: #FBE4EE;
  color: #A3154D;
}

.board-pill--ink {
  background: #E7E9EE;
  color: #14181F;
}

/* My tasks */
.bd-scope {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #DFE3EB;
  border-radius: 15px;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.app-body a.bd-scope__link, .app-body .nav-list-container .nav-list li .bd-scope__link.dropdown-button, .nav-list-container .nav-list li .app-body .bd-scope__link.dropdown-button {
  align-items: center;
  border-radius: 11px;
  color: #3E4652;
  display: inline-flex;
  font-size: 14.5px;
  font-weight: 700;
  height: 38px;
  padding: 0 16px;
  text-decoration: none;
}

.app-body a.bd-scope__link--on, .app-body .nav-list-container .nav-list li .bd-scope__link--on.dropdown-button, .nav-list-container .nav-list li .app-body .bd-scope__link--on.dropdown-button {
  background: #14181F;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  color: white;
}

.bd-late {
  align-items: center;
  background: #FDF4E7;
  border: 1px solid #F1D9B5;
  border-radius: 16px;
  color: #8A5200;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 12px 12px 16px;
}

.bd-late__title {
  color: #5A3A06;
  font-size: 14.5px;
  font-weight: 700;
}

.bd-late__list {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  gap: 8px;
  min-width: 0;
}

.app-body a.bd-late__chip, .app-body .nav-list-container .nav-list li .bd-late__chip.dropdown-button, .nav-list-container .nav-list li .app-body .bd-late__chip.dropdown-button {
  align-items: center;
  background: white;
  border: 1px solid #F1D9B5;
  border-radius: 10px;
  color: #14181F;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  text-decoration: none;
}

.bd-late__number {
  color: #8A5200;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.bd-late__text {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-late__when {
  color: #8A5200;
  font-size: 12.5px;
  font-weight: 700;
}

.bd-late__button {
  background: #8A5200;
  border: 0;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  padding: 0 16px;
}

.bd-days {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
  .bd-days {
    align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.bd-day {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #E7EBF1;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 18px 18px;
}

.bd-day--today {
  background: white;
}

.bd-day__head {
  align-items: flex-end;
  display: flex;
  gap: 12px;
  padding: 0 6px;
}

.bd-day__heading {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 3px;
}

.bd-day__date {
  color: #5C6472;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin: 0;
  text-transform: uppercase;
}

.bd-day--today .bd-day__date {
  color: #26418F;
}

.bd-day__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.05;
}

.bd-day__summary {
  color: #5C6472;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.bd-day__progress {
  flex-shrink: 0;
  height: 6px;
  margin: 0 6px;
}

.bd-day__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bd-day__empty {
  border: 1.5px dashed #D3D9E3;
  border-radius: 16px;
  color: #5C6472;
  font-size: 14.5px;
  padding: 28px 12px;
  text-align: center;
}

.bd-task {
  align-items: flex-start;
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 16px;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  padding: 12px 10px 12px 12px;
}

.bd-task__form {
  display: contents;
}

.bd-task__check {
  align-items: center;
  background: transparent;
  border: 2px solid #BFC8DA;
  border-radius: 50%;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  margin-top: 1px;
  padding: 0;
  width: 28px;
}

.bd-task__check:hover {
  border-color: #26418F;
  color: #26418F;
}

.bd-task__check--done,
.bd-task__check--done:hover {
  background: #26418F;
  border-color: #26418F;
  color: white;
  cursor: default;
}

.bd-task__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
  min-width: 0;
}

.app-body a.bd-task__title, .app-body .nav-list-container .nav-list li .bd-task__title.dropdown-button, .nav-list-container .nav-list li .app-body .bd-task__title.dropdown-button {
  color: #14181F;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.app-body .bd-task--done a.bd-task__title, .app-body .bd-task--done .nav-list-container .nav-list li .bd-task__title.dropdown-button, .nav-list-container .nav-list li .app-body .bd-task--done .bd-task__title.dropdown-button {
  color: #5C6472;
}

.bd-task__number {
  color: #5C6472;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  margin-right: 7px;
}

.bd-task__meta {
  align-items: center;
  color: #5C6472;
  display: flex;
  flex-wrap: wrap;
  font-size: 12.5px;
  gap: 8px;
  margin: 0;
}

.bd-task__list {
  font-weight: 600;
}

.bd-task__side {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
}

.bd-task__time {
  color: #3E4652;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding-top: 3px;
}

.bd-task__push {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 9px;
  color: #3E4652;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
}

.bd-task__push:hover {
  border-color: #26418F;
  color: #26418F;
}

/* "All my tasks" link in the Due for you panel */
.app-body a.bd-due__all, .app-body .nav-list-container .nav-list li .bd-due__all.dropdown-button, .nav-list-container .nav-list li .app-body .bd-due__all.dropdown-button {
  align-items: center;
  color: #26418F;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 6px;
  text-decoration: none;
}

/* Calendar */
.bd-cal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bd-cal__body {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
  .bd-cal__body {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}
.bd-cal__month {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.bd-cal__weekdays,
.bd-cal__grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.bd-cal__weekday {
  color: #5C6472;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 10px 4px;
  text-transform: uppercase;
}

.bd-cal__weekday--weekend {
  color: #737C8A;
}

.bd-cal__day {
  background: white;
  border: 1.5px solid #EEF1F5;
  border-radius: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 118px;
  min-width: 0;
  overflow: hidden;
  padding: 8px;
}

.bd-cal__day--selected {
  background: #F1F4FA;
  border-color: #26418F;
}

.app-body a.bd-cal__num, .app-body .nav-list-container .nav-list li .bd-cal__num.dropdown-button, .nav-list-container .nav-list li .app-body .bd-cal__num.dropdown-button {
  align-items: center;
  align-self: flex-start;
  border-radius: 15px;
  box-sizing: border-box;
  color: #14181F;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 0 7px;
  text-decoration: none;
}

.app-body .bd-cal__day--dim a.bd-cal__num, .app-body .bd-cal__day--dim .nav-list-container .nav-list li .bd-cal__num.dropdown-button, .nav-list-container .nav-list li .app-body .bd-cal__day--dim .bd-cal__num.dropdown-button {
  color: #737C8A;
}

.app-body a.bd-cal__num--today, .app-body .nav-list-container .nav-list li .bd-cal__num--today.dropdown-button, .nav-list-container .nav-list li .app-body .bd-cal__num--today.dropdown-button {
  background: #26418F;
  color: white;
}

.app-body a.cal-chip, .app-body .nav-list-container .nav-list li .cal-chip.dropdown-button, .nav-list-container .nav-list li .app-body .cal-chip.dropdown-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  gap: 5px;
  height: 24px;
  overflow: hidden;
  padding: 0 7px;
  text-decoration: none;
  white-space: nowrap;
}

.cal-chip__number {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.cal-chip__title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-body a.cal-chip--done, .app-body .nav-list-container .nav-list li .cal-chip--done.dropdown-button, .nav-list-container .nav-list li .app-body .cal-chip--done.dropdown-button {
  color: #5C6472;
}

.app-body a.cal-chip--overdue, .app-body .nav-list-container .nav-list li .cal-chip--overdue.dropdown-button, .nav-list-container .nav-list li .app-body .cal-chip--overdue.dropdown-button {
  border-color: #D9893A;
}

.app-body a.cal-more, .app-body .nav-list-container .nav-list li .cal-more.dropdown-button, .nav-list-container .nav-list li .app-body .cal-more.dropdown-button {
  color: #5C6472;
  font-size: 12px;
  font-weight: 700;
  padding: 0 4px;
  text-decoration: none;
}

.bd-cal__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.bd-cal__panel {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

.bd-cal__show {
  gap: 6px;
  padding: 20px 22px;
}

.bd-cal__panel-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.bd-cal__panel-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.bd-cal__panel-count {
  color: #5C6472;
  font-size: 13.5px;
  font-weight: 700;
}

.bd-cal__show-title {
  font-size: 16px;
  font-weight: 800;
}

.bd-cal__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-body a.bd-cal__row, .app-body .nav-list-container .nav-list li .bd-cal__row.dropdown-button, .nav-list-container .nav-list li .app-body .bd-cal__row.dropdown-button {
  border: 1px solid #E7EBF1;
  border-radius: 15px;
  color: #14181F;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  text-decoration: none;
}

.app-body a.bd-cal__row--done, .app-body .nav-list-container .nav-list li .bd-cal__row--done.dropdown-button, .nav-list-container .nav-list li .app-body .bd-cal__row--done.dropdown-button {
  color: #5C6472;
}

.bd-cal__row-top {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.bd-cal__row-top .bd-task__number {
  font-size: 13px;
  margin-right: 0;
}

.bd-cal__row-title {
  flex-grow: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bd-cal__row-top .bd-task__time {
  font-size: 13px;
  padding-top: 0;
}

.bd-cal__row-top .bd-cal__late {
  color: #8A5200;
}

.bd-cal__row-people {
  display: inline-flex;
  margin-left: auto;
}

.bd-cal__option {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14.5px;
  gap: 10px;
  min-height: 34px;
}

.bd-cal__dot {
  border-radius: 4px;
  box-shadow: none;
  height: 12px;
  width: 12px;
}

.bd-cal__option-name {
  flex-grow: 1;
  font-weight: 600;
}

.bd-cal__option-count {
  color: #737C8A;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.app-body .cal-chip.board-pill--blue {
  color: #26418F;
}

.app-body .cal-chip.board-pill--sky {
  color: #2C5BB0;
}

.app-body .cal-chip.board-pill--teal {
  color: #0B6158;
}

.app-body .cal-chip.board-pill--violet {
  color: #4C2D9E;
}

.app-body .cal-chip.board-pill--amber {
  color: #8A5200;
}

.app-body .cal-chip.board-pill--rose {
  color: #A3154D;
}

.app-body .cal-chip.board-pill--ink {
  color: #14181F;
}

/* Boards: Assistant page */
.as-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.as-layout {
  align-items: flex-start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.as-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (max-width: 900px) {
  .as-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.as-notice {
  background: #FDF4E7;
  color: #8A5200;
}

.as-connection__head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.as-connection__who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.as-connection__who .settings-card__title {
  overflow-wrap: anywhere;
}

.as-connection__meta {
  align-items: center;
  color: #5C6472;
  display: flex;
  flex-wrap: wrap;
  font-size: 13.5px;
  gap: 10px;
}

.as-status {
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 9px;
}

.as-status--active {
  background: #DDF1EE;
  color: #0B6158;
}

.as-status--paused {
  background: #FDF4E7;
  color: #8A5200;
}

.as-status--disconnected {
  background: #F9E3E1;
  color: #B3261E;
}

.as-prompt {
  min-height: 160px;
  resize: vertical;
}

.as-activity {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.as-activity__item {
  border-top: 1px solid #E7EBF1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
}

.as-activity__item:first-child {
  border-top: 0;
}

.app-body a.as-activity__title, .app-body .nav-list-container .nav-list li .as-activity__title.dropdown-button, .nav-list-container .nav-list li .app-body .as-activity__title.dropdown-button,
.as-activity__title {
  color: #14181F;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.as-activity__title--archived {
  color: #5C6472;
}

.as-activity__number {
  color: #5C6472;
  margin-right: 6px;
}

.as-activity__meta {
  align-items: center;
  color: #5C6472;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 10px;
}

.as-suggestion {
  border-top: 1px solid #E7EBF1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
}

.as-suggestion:first-child {
  border-top: 0;
}

.as-suggestion__proposal {
  color: #14181F;
  font-size: 14.5px;
  font-weight: 600;
}

.as-suggestion__reason {
  color: #5C6472;
  font-size: 13.5px;
}

.as-suggestion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.as-proposal__comment {
  display: block;
  font-weight: 400;
  margin-top: 4px;
  white-space: pre-wrap;
}

.as-proposal__comment:before,
.as-proposal__comment:after {
  content: none;
}

.as-activity__what {
  color: #14181F;
  font-size: 13.5px;
}

.as-resolution {
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  margin-right: 6px;
  padding: 3px 9px;
}

.as-resolution--accepted,
.as-resolution--created {
  background: #DDF1EE;
  color: #0B6158;
}

.as-resolution--dismissed {
  background: #E7EBF1;
  color: #5C6472;
}

.as-privacy {
  color: #5C6472;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.as-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}

.as-paste-text {
  min-height: 220px;
  resize: vertical;
}

.as-resolution--pending,
.as-resolution--processing {
  background: #E7EBF1;
  color: #5C6472;
}

.as-resolution--done {
  background: #DDF1EE;
  color: #0B6158;
}

.as-resolution--failed {
  background: #F9E3E1;
  color: #B3261E;
}

.as-paste__cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.as-paste__card {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Boards: people page extras, board settings and the archived boards list */
/* People: board chips and open cards */
.app-body a.bd-chip, .app-body .nav-list-container .nav-list li .bd-chip.dropdown-button, .nav-list-container .nav-list li .app-body .bd-chip.dropdown-button,
.bd-chip {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 12px;
  box-sizing: border-box;
  color: #14181F;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  text-decoration: none;
  white-space: nowrap;
}

.app-body a.bd-chip:hover, .app-body .nav-list-container .nav-list li .bd-chip.dropdown-button:hover, .nav-list-container .nav-list li .app-body .bd-chip.dropdown-button:hover {
  border-color: #26418F;
  color: #26418F;
}

.board-dot--sm {
  border-radius: 4px;
  height: 11px;
  width: 11px;
}

.bd-overdue {
  color: #B3261E;
  font-weight: 700;
}

.menu__item--project .board-dot {
  margin-right: 8px;
}

/* Archived boards on the all boards page */
.bd-archived__summary {
  color: #26418F;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
}

.bd-archived__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.bd-archived__item {
  align-items: center;
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 16px;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
}

.app-body a.bd-archived__name, .app-body .nav-list-container .nav-list li .bd-archived__name.dropdown-button, .nav-list-container .nav-list li .app-body .bd-archived__name.dropdown-button {
  color: #14181F;
  flex-grow: 1;
  font-weight: 600;
  text-decoration: none;
}

/* Board settings */
.bs-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.bs-layout {
  align-items: flex-start;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bs-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (max-width: 1280px) {
  .bs-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .bs-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bs-picker {
  align-items: center;
  display: flex;
  gap: 10px;
}

.bs-picker__label {
  color: #5C6472;
  font-size: 13.5px;
  font-weight: 600;
}

.bs-picker__select {
  min-width: 200px;
}

.field__input--sm {
  font-size: 14px;
  height: 38px;
}

.bs-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 110px;
}

.bs-card-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.bs-count {
  background: #F5F7FA;
  border-radius: 999px;
  color: #5C6472;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 10px;
}

.bs-next {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 0;
}

.bs-next__sample {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.bs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bs-member,
.bs-listrow,
.bs-labelrow,
.bs-archived {
  align-items: center;
  display: flex;
  gap: 10px;
}

.bs-member__text,
.bs-archived__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.bs-member__name,
.bs-archived__title {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-archived__number {
  color: #5C6472;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 52px;
}

.bs-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bs-add__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-chip--button {
  cursor: pointer;
  height: 32px;
  padding: 0 12px 0 6px;
}

.bs-listrow {
  background: white;
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  padding: 8px 10px;
}

.bs-listrow.is-ghost {
  opacity: 0.4;
}

.bs-listrow__handle {
  color: #737C8A;
  cursor: grab;
  display: inline-flex;
}

.bs-listrow__form,
.bs-labelrow__form {
  align-items: center;
  display: flex;
  flex-grow: 1;
  gap: 8px;
  min-width: 0;
}

.bs-listrow__form .field__input,
.bs-labelrow__form .field__input:not(.bs-labelrow__color) {
  flex-grow: 1;
  min-width: 0;
}

.bs-listrow__count {
  color: #5C6472;
  font-size: 12.5px;
  white-space: nowrap;
}

.bs-labelrow__color {
  flex-shrink: 0;
  width: 96px;
}

.bs-inline-form {
  align-items: center;
  display: flex;
  gap: 8px;
}

.bs-inline-form .field__input:first-of-type {
  flex-grow: 1;
  min-width: 0;
}

.settings-form fieldset.field {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.cookies {
  align-items: center;
  background: white;
  border: 1px solid #DFE3EB;
  border-radius: 20px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  left: 16px;
  margin: 0 auto;
  max-width: 760px;
  padding: 20px;
  position: fixed;
  right: 16px;
  z-index: 900;
}

.cookies-disclaimer-text {
  color: #5C6472;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.cookies-disclaimer-buttons {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  width: 100%;
}

.cookies-disclaimer-buttons .cookies-button {
  flex: 1;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .cookies {
    flex-direction: row;
    gap: 24px;
  }
  .cookies-disclaimer-buttons {
    width: auto;
  }
  .cookies-disclaimer-buttons .cookies-button {
    flex: none;
  }
}
/* Toastify overrides (turbo_streams/toast.js) */
.toastify {
  align-items: center;
  border-radius: 16px;
  display: flex;
  gap: 12px;
}

.toastify .toast-close {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: white;
  flex-shrink: 0;
  height: auto;
  min-width: 0;
  padding: 0;
  width: auto;
}

.toastify .toast-close:hover,
.toastify .toast-close:active {
  background: transparent;
  border-color: transparent;
  color: white;
}

/* ===== modal container fade ===== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  /* Animation */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

/* ===== modal content slide animation ===== */
.modal-content {
  background: white;
  padding: 40px;
  width: 80%;
  max-height: 80%;
  overflow-y: auto;
  position: relative;
  /* Start slightly down + transparent */
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}

/* Close button */
.modal-close {
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 0;
}
@media (min-width: 0) {
  .modal-close {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}
@media (min-width: 600px) {
  .modal-close {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}
@media (min-width: 1200px) {
  .modal-close {
    font-size: 28.8325195313px;
    letter-spacing: 0.5766503906px;
  }
}

/**
 * Shame stylesheet is reserved just for hacky code.
 * The code written to get the release out on time,
 * but the code that makes you ashamed.
 *
 * This is a temporary stylesheet to be clean as soon as possible.
 *
 * Comment every code added here, by answering these questions:
 * 1. What part of the codebase does it relate to?
 * 2. Why was this needed?
 * 3. How does this fix it?
 * 4. How might you fix it properly, given more time?
 *
 */
.page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
}

.page-grid__block {
  grid-column: 1/-1;
}

@media (min-width: 768px) {
  .page-grid__block {
    grid-column: var(--col-start)/span var(--col-span);
    grid-row: var(--row-start)/span var(--row-span);
    order: 0;
  }
}
/**
 * Swiper 12.1.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 18, 2026
 */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: "";
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode {
  .swiper-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
}

.swiper-virtual.swiper-css-mode.swiper-horizontal {
  .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
}

.swiper-virtual.swiper-css-mode.swiper-vertical {
  .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size);
  }
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
}

.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}

.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}

.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}

.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - var(--swiper-navigation-size) / 2);
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }
  &:only-child {
    display: none !important;
  }
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition: 200ms transform, 200ms top;
    }
  }
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition: 200ms transform, 200ms left;
    }
  }
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}

/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}

.swiper-pagination-lock {
  display: none;
}

:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  .swiper-scrollbar-disabled > &,
  &.swiper-scrollbar-disabled {
    display: none !important;
  }
  .swiper-horizontal > &,
  &.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
  .swiper-vertical > &,
  &.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

/* Zoom container styles start */
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  > img,
  > svg,
  > canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* Zoom container styles end */
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-thumbs {
  .swiper-slide-thumb-active {
    /* Styles for active thumb slide */
  }
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade {
  &.swiper-free-mode {
    .swiper-slide {
      transition-timing-function: ease-out;
    }
  }
  .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    pointer-events: auto;
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}

.swiper.swiper-cube {
  overflow: visible;
}

.swiper-cube {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    .swiper-slide {
      pointer-events: none;
    }
  }
  &.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
  .swiper-slide-active,
  .swiper-slide-next,
  .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }
  .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
    &:before {
      content: "";
      background: #000;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      filter: blur(50px);
    }
  }
}

.swiper-cube {
  .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
  }
}

/* Cube slide shadows start */
.swiper-cube {
  .swiper-slide-shadow-cube.swiper-slide-shadow-top,
  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  .swiper-slide-shadow-cube.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}

/* Cube slide shadows end */
.swiper.swiper-flip {
  overflow: visible;
}

.swiper-flip {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}

/* Flip slide shadows start */
.swiper-flip {
  .swiper-slide-shadow-flip.swiper-slide-shadow-top,
  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
  .swiper-slide-shadow-flip.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}

/* Flip slide shadows end */
.swiper-creative {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height;
  }
}

.swiper.swiper-cards {
  overflow: visible;
}

.swiper-cards {
  .swiper-slide {
    transform-origin: center bottom;
    backface-visibility: hidden;
    overflow: hidden;
  }
}