@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

/* BOX-SIZING ##################*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*:focus {
  outline: none;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Color styles */
:root {
  --dark: #131321;
  --dark-60: rgba(19, 19, 33, 0.6);
  --dark-20: rgba(19, 19, 33, 0.2);
  --white: #ffffff;
  --white-60: rgba(255, 255, 255, 0.6);
  --white-20: rgba(255, 255, 255, 0.2);
  --oliva: #365149;
  --oliva-60: rgba(54, 81, 73, 0.6);
  --oliva-20: rgba(54, 81, 73, 0.2);
  --liquen: #99b7b1;
  --liquen-60: rgba(153, 183, 177, 0.6);
  --liquen-20: rgba(153, 183, 177, 0.2);
  --esmeralda: #439f8e;
  --esmeralda-60: rgba(67, 159, 142, 0.6);
  --esmeralda-20: rgba(67, 159, 142, 0.2);
  --turquesa: #56b3ba;
  --turquesa-60: rgba(86, 179, 186, 0.6);
  --turquesa-20: rgba(86, 179, 186, 0.2);
  --jambo: #d3aaa8;
  --jambo-60: rgba(211, 170, 168, 0.6);
  --jambo-20: rgba(211, 170, 168, 0.2);
  --manga: #eeb250;
  --manga-60: rgba(238, 178, 80, 0.6);
  --manga-20: rgba(238, 178, 80, 0.2);
  --grena: #7c4d4d;
  --grena-60: rgba(124, 77, 77, 0.6);
  --grena-20: rgba(124, 77, 77, 0.2);
  --coral: #dd7e6f;
  --coral-60: rgba(221, 126, 111, 0.6);
  --coral-20: rgba(221, 126, 111, 0.2);
  --lavanda: #a8a7d0;
  --lavanda-60: rgba(168, 167, 208, 0.6);
  --lavanda-20: rgba(168, 167, 208, 0.2);
  --azul-beira-mar: #81b5c3;
  --azul-beira-mar-60: rgba(129, 181, 195, 0.6);
  --azul-beira-mar-20: rgba(129, 181, 195, 0.2);
  --indigo: #1f2648;
  --indigo-60: rgba(31, 38, 72, 0.6);
  --indigo-20: rgba(31, 38, 72, 0.2);
  --azul-celeste: #598fb4;
  --azul-celeste-60: rgba(89, 143, 180, 0.6);
  --azul-celeste-20: rgba(89, 143, 180, 0.2);
  --success: #13b279;
  --success-60: rgba(19, 178, 121, 0.6);
  --success-20: rgba(19, 178, 121, 0.2);
  --warning: #c2bb00;
  --warning-60: rgba(194, 187, 0, 0.6);
  --warning-20: rgba(194, 187, 0, 0.2);
  --info: #5489d9;
  --info-60: rgba(84, 137, 217, 0.6);
  --info-20: rgba(84, 137, 217, 0.2);
  --h1: 1.25rem;
  --h2: 1.125rem;
  --h3: 1.25rem;
  --h4: 1.125rem;
  --h5: 1rem;
  --h6: 0.875rem;
  --display-1: 2.25rem;
  --display-2: 1.875rem;
  --tooltip: 0.6875rem;
  --sm: 0.6875rem;
  --md: 0.75rem;
  --lg: 0.8125rem;
  --xl: 0.875rem;
  --paragraph-lg: 1.125rem;
  --paragraph-md: 1rem;
  --paragraph-sm: 0.875rem;
  --paragraph-xs: 0.75rem;
  --paragraph-xxs: 0.6875rem;
  --subtitle: 1.25rem;
  --subheader: 0.8125rem;
  --button-md: 0.8125rem;
  --button-sm: 0.75rem;
  --button-xs: 0.6875rem;
  --button-xxs: 0.625rem;
  --light-system-danger-100: #ea2a00;
  --light-system-warning-100: #c2bb00;
  --light-uibg-accent: rgba(6, 25, 119, 0.15);
}

@media (prefers-color-scheme: light) {
  :root {
    --border: #e1e1eb;
    --border-60: rgba(225, 225, 235, 0.6);
    --border-20: rgba(225, 225, 235, 0.2);
    --bg-contrast: #ffffff;
    --bg-contrast-60: rgba(255, 255, 255, 0.6);
    --bg-contrast-20: rgba(255, 255, 255, 0.2);
    --bg-default: #f2f2f6;
    --bg-default-60: rgba(242, 242, 246, 0.6);
    --bg-default-20: rgba(242, 242, 246, 0.2);
    --bg-highlight: rgba(16, 41, 161, 0.03);
    --bg-highlight-60: rgba(16, 41, 161, 0.6);
    --bg-highlight-20: rgba(16, 41, 161, 0.2);
    --bg-accent: rgba(6, 25, 119, 0.1);
    --bg-accent-60: rgba(6, 25, 119, 0.6);
    --bg-accent-20: rgba(6, 25, 119, 0.2);
    --text-placeholder: rgba(82, 82, 107, 0.4);
    --text-placeholder-60: rgba(82, 82, 107, 0.6);
    --text-placeholder-20: rgba(82, 82, 107, 0.2);
    --text-default: #52526b;
    --text-default-60: rgba(82, 82, 107, 0.6);
    --text-default-20: rgba(82, 82, 107, 0.2);
    --text-light: #8c8ba7;
    --text-light-60: rgba(140, 139, 167, 0.6);
    --text-light-20: rgba(140, 139, 167, 0.2);
    --danger: #ea2a00;
    --danger-60: rgba(234, 42, 0, 0.6);
    --danger-20: rgba(234, 42, 0, 0.2);
    --gray: #cfd4e0;
    --gray-60: rgba(207, 212, 224, 0.6);
    --gray-20: rgba(207, 212, 224, 0.2);
    --gray-alternative: #82899c;
    --gray-alternative-60: rgba(130, 137, 156, 0.6);
    --gray-alternative-20: rgba(130, 137, 156, 0.2);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --border: #626783;
    --border-60: rgba(98, 103, 131, 0.6);
    --border-20: rgba(98, 103, 131, 0.2);
    --bg-contrast: #41455b;
    --bg-contrast-60: rgba(65, 69, 91, 0.6);
    --bg-contrast-20: rgba(65, 69, 91, 0.2);
    --bg-default: #2c2f3e;
    --bg-default-60: rgba(44, 47, 62, 0.6);
    --bg-default-20: rgba(44, 47, 62, 0.2);
    --bg-highlight: rgba(215, 221, 255, 0.07);
    --bg-highlight-60: rgba(215, 221, 255, 0.6);
    --bg-highlight-20: rgba(215, 221, 255, 0.2);
    --bg-accent: rgba(215, 221, 255, 0.2);
    --bg-accent-60: rgba(215, 221, 255, 0.6);
    --bg-accent-20: rgba(215, 221, 255, 0.2);
    --text-placeholder: rgba(194, 194, 211, 0.4);
    --text-placeholder-60: rgba(194, 194, 211, 0.6);
    --text-placeholder-20: rgba(194, 194, 211, 0.2);
    --text-default: #e9e9f2;
    --text-default-60: rgba(233, 233, 242, 0.6);
    --text-default-20: rgba(233, 233, 242, 0.2);
    --text-light: #85849f;
    --text-light-60: rgba(133, 132, 159, 0.6);
    --text-light-20: rgba(133, 132, 159, 0.2);
    --danger: #ff5530;
    --danger-60: rgba(255, 85, 48, 0.6);
    --danger-20: rgba(255, 85, 48, 0.2);
    --gray: #656a7b;
    --gray-60: rgba(101, 106, 123, 0.6);
    --gray-20: rgba(101, 106, 123, 0.2);
    --gray-alternative: #9ea4ba;
    --gray-alternative-60: rgba(158, 164, 186, 0.6);
    --gray-alternative-20: rgba(158, 164, 186, 0.2);
  }
}

.light {
  --border: #e1e1eb;
  --border-60: rgba(225, 225, 235, 0.6);
  --border-20: rgba(225, 225, 235, 0.2);
  --bg-contrast: #ffffff;
  --bg-contrast-60: rgba(255, 255, 255, 0.6);
  --bg-contrast-20: rgba(255, 255, 255, 0.2);
  --bg-default: #f2f2f6;
  --bg-default-60: rgba(242, 242, 246, 0.6);
  --bg-default-20: rgba(242, 242, 246, 0.2);
  --bg-highlight: rgba(16, 41, 161, 0.03);
  --bg-highlight-60: rgba(16, 41, 161, 0.6);
  --bg-highlight-20: rgba(16, 41, 161, 0.2);
  --bg-accent: rgba(6, 25, 119, 0.1);
  --bg-accent-60: rgba(6, 25, 119, 0.6);
  --bg-accent-20: rgba(6, 25, 119, 0.2);
  --text-placeholder: rgba(82, 82, 107, 0.4);
  --text-placeholder-60: rgba(82, 82, 107, 0.6);
  --text-placeholder-20: rgba(82, 82, 107, 0.2);
  --text-default: #52526b;
  --text-default-60: rgba(82, 82, 107, 0.6);
  --text-default-20: rgba(82, 82, 107, 0.2);
  --text-light: #8c8ba7;
  --text-light-60: rgba(140, 139, 167, 0.6);
  --text-light-20: rgba(140, 139, 167, 0.2);
  --danger: #ea2a00;
  --danger-60: rgba(234, 42, 0, 0.6);
  --danger-20: rgba(234, 42, 0, 0.2);
  --gray: #cfd4e0;
  --gray-60: rgba(207, 212, 224, 0.6);
  --gray-20: rgba(207, 212, 224, 0.2);
  --gray-alternative: #82899c;
  --gray-alternative-60: rgba(130, 137, 156, 0.6);
  --gray-alternative-20: rgba(130, 137, 156, 0.2);
}

.dark {
  --border: #626783;
  --border-60: rgba(98, 103, 131, 0.6);
  --border-20: rgba(98, 103, 131, 0.2);
  --bg-contrast: #41455b;
  --bg-contrast-60: rgba(65, 69, 91, 0.6);
  --bg-contrast-20: rgba(65, 69, 91, 0.2);
  --bg-default: #2c2f3e;
  --bg-default-60: rgba(44, 47, 62, 0.6);
  --bg-default-20: rgba(44, 47, 62, 0.2);
  --bg-highlight: rgba(215, 221, 255, 0.07);
  --bg-highlight-60: rgba(215, 221, 255, 0.6);
  --bg-highlight-20: rgba(215, 221, 255, 0.2);
  --bg-accent: rgba(215, 221, 255, 0.2);
  --bg-accent-60: rgba(215, 221, 255, 0.6);
  --bg-accent-20: rgba(215, 221, 255, 0.2);
  --text-placeholder: rgba(194, 194, 211, 0.4);
  --text-placeholder-60: rgba(194, 194, 211, 0.6);
  --text-placeholder-20: rgba(194, 194, 211, 0.2);
  --text-default: #e9e9f2;
  --text-default-60: rgba(233, 233, 242, 0.6);
  --text-default-20: rgba(233, 233, 242, 0.2);
  --text-light: #85849f;
  --text-light-60: rgba(133, 132, 159, 0.6);
  --text-light-20: rgba(133, 132, 159, 0.2);
  --danger: #ff5530;
  --danger-60: rgba(255, 85, 48, 0.6);
  --danger-20: rgba(255, 85, 48, 0.2);
  --gray: #656a7b;
  --gray-60: rgba(101, 106, 123, 0.6);
  --gray-20: rgba(101, 106, 123, 0.2);
  --gray-alternative: #9ea4ba;
  --gray-alternative-60: rgba(158, 164, 186, 0.6);
  --gray-alternative-20: rgba(158, 164, 186, 0.2);
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.container-fluid {
  margin: 0;
  max-width: 100%;
}

.row {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
}

@media only screen and (min-width: 0) {
  .col-xs-1 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: calc(8.33333% - 16px);
  }

  .col-xs-2 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: calc(16.66667% - 16px);
  }

  .col-xs-3 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: calc(25% - 16px);
  }

  .col-xs-4 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: calc(33.33333% - 16px);
  }

  .col-xs-5 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: calc(41.66667% - 16px);
  }

  .col-xs-6 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: calc(50% - 16px);
  }

  .col-xs-7 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: calc(58.33333% - 16px);
  }

  .col-xs-8 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: calc(66.66667% - 16px);
  }

  .col-xs-9 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: calc(75% - 16px);
  }

  .col-xs-10 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: calc(83.33333% - 16px);
  }

  .col-xs-11 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: calc(91.66667% - 16px);
  }

  .col-xs-12 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 769px) {
  .col-sm-1 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: calc(8.33333% - 16px);
  }

  .col-sm-2 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: calc(16.66667% - 16px);
  }

  .col-sm-3 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: calc(25% - 16px);
  }

  .col-sm-4 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: calc(33.33333% - 16px);
  }

  .col-sm-5 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: calc(41.66667% - 16px);
  }

  .col-sm-6 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: calc(50% - 16px);
  }

  .col-sm-7 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: calc(58.33333% - 16px);
  }

  .col-sm-8 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: calc(66.66667% - 16px);
  }

  .col-sm-9 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: calc(75% - 16px);
  }

  .col-sm-10 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: calc(83.33333% - 16px);
  }

  .col-sm-11 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: calc(91.66667% - 16px);
  }

  .col-sm-12 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 1025px) {
  .col-md-1 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: calc(8.33333% - 16px);
  }

  .col-md-2 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: calc(16.66667% - 16px);
  }

  .col-md-3 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: calc(25% - 16px);
  }

  .col-md-4 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: calc(33.33333% - 16px);
  }

  .col-md-5 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: calc(41.66667% - 16px);
  }

  .col-md-6 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: calc(50% - 16px);
  }

  .col-md-7 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: calc(58.33333% - 16px);
  }

  .col-md-8 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: calc(66.66667% - 16px);
  }

  .col-md-9 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: calc(75% - 16px);
  }

  .col-md-10 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: calc(83.33333% - 16px);
  }

  .col-md-11 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: calc(91.66667% - 16px);
  }

  .col-md-12 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 1441px) {
  .col-lg-1 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: calc(8.33333% - 16px);
  }

  .col-lg-2 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: calc(16.66667% - 16px);
  }

  .col-lg-3 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: calc(25% - 16px);
  }

  .col-lg-4 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: calc(33.33333% - 16px);
  }

  .col-lg-5 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: calc(41.66667% - 16px);
  }

  .col-lg-6 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: calc(50% - 16px);
  }

  .col-lg-7 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: calc(58.33333% - 16px);
  }

  .col-lg-8 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: calc(66.66667% - 16px);
  }

  .col-lg-9 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: calc(75% - 16px);
  }

  .col-lg-10 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: calc(83.33333% - 16px);
  }

  .col-lg-11 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: calc(91.66667% - 16px);
  }

  .col-lg-12 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 1921px) {
  .col-xl-1 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: calc(8.33333% - 16px);
  }

  .col-xl-2 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: calc(16.66667% - 16px);
  }

  .col-xl-3 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: calc(25% - 16px);
  }

  .col-xl-4 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: calc(33.33333% - 16px);
  }

  .col-xl-5 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: calc(41.66667% - 16px);
  }

  .col-xl-6 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: calc(50% - 16px);
  }

  .col-xl-7 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: calc(58.33333% - 16px);
  }

  .col-xl-8 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: calc(66.66667% - 16px);
  }

  .col-xl-9 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: calc(75% - 16px);
  }

  .col-xl-10 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: calc(83.33333% - 16px);
  }

  .col-xl-11 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: calc(91.66667% - 16px);
  }

  .col-xl-12 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.d-flex-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.d-none {
  display: none;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.flex-grow-1 {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.flex-shrink-0 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.align-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.justify-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.position-relative {
  position: relative;
}

.gap-16 {
  gap: 1rem;
}

.gap-4 {
  gap: 0.25rem;
}

.gap-8 {
  gap: 0.5rem;
}

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

.ml-0 {
  margin-left: 0rem !important;
}

.mr-0 {
  margin-right: 0rem !important;
}

.mt-0 {
  margin-top: 0rem !important;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.pl-0 {
  padding-left: 0rem !important;
}

.pr-0 {
  padding-right: 0rem !important;
}

.pt-0 {
  padding-top: 0rem !important;
}

.pb-0 {
  padding-bottom: 0rem !important;
}

.pa-0 {
  padding: 0rem !important;
}

.ml-1 {
  margin-left: 0.5rem !important;
}

.mr-1 {
  margin-right: 0.5rem !important;
}

.mt-1 {
  margin-top: 0.5rem !important;
}

.mb-1 {
  margin-bottom: 0.5rem !important;
}

.pl-1 {
  padding-left: 0.5rem !important;
}

.pr-1 {
  padding-right: 0.5rem !important;
}

.pt-1 {
  padding-top: 0.5rem !important;
}

.pb-1 {
  padding-bottom: 0.5rem !important;
}

.pa-1 {
  padding: 0.5rem !important;
}

.ml-2 {
  margin-left: 1rem !important;
}

.mr-2 {
  margin-right: 1rem !important;
}

.mt-2 {
  margin-top: 1rem !important;
}

.mb-2 {
  margin-bottom: 1rem !important;
}

.pl-2 {
  padding-left: 1rem !important;
}

.pr-2 {
  padding-right: 1rem !important;
}

.pt-2 {
  padding-top: 1rem !important;
}

.pb-2 {
  padding-bottom: 1rem !important;
}

.pa-2 {
  padding: 1rem !important;
}

.ml-3 {
  margin-left: 1.5rem !important;
}

.mr-3 {
  margin-right: 1.5rem !important;
}

.mt-3 {
  margin-top: 1.5rem !important;
}

.mb-3 {
  margin-bottom: 1.5rem !important;
}

.pl-3 {
  padding-left: 1.5rem !important;
}

.pr-3 {
  padding-right: 1.5rem !important;
}

.pt-3 {
  padding-top: 1.5rem !important;
}

.pb-3 {
  padding-bottom: 1.5rem !important;
}

.pa-3 {
  padding: 1.5rem !important;
}

.ml-4 {
  margin-left: 2rem !important;
}

.mr-4 {
  margin-right: 2rem !important;
}

.mt-4 {
  margin-top: 2rem !important;
}

.mb-4 {
  margin-bottom: 2rem !important;
}

.pl-4 {
  padding-left: 2rem !important;
}

.pr-4 {
  padding-right: 2rem !important;
}

.pt-4 {
  padding-top: 2rem !important;
}

.pb-4 {
  padding-bottom: 2rem !important;
}

.pa-4 {
  padding: 2rem !important;
}

.mb-xs {
  margin-bottom: 0.25rem !important;
}

.mt-xs {
  margin-top: 0.25rem !important;
}

.ml-xs {
  margin-left: 0.25rem !important;
}

.mr-xs {
  margin-right: 0.25rem !important;
}

.bg-dark {
  background-color: var(--dark) !important;
}

.border-dark {
  border-color: var(--dark) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.border-white {
  border-color: var(--white) !important;
}

.bg-oliva {
  background-color: var(--oliva) !important;
}

.border-oliva {
  border-color: var(--oliva) !important;
}

.bg-liquen {
  background-color: var(--liquen) !important;
}

.border-liquen {
  border-color: var(--liquen) !important;
}

.bg-esmeralda {
  background-color: var(--esmeralda) !important;
}

.border-esmeralda {
  border-color: var(--esmeralda) !important;
}

.bg-turquesa {
  background-color: var(--turquesa) !important;
}

.border-turquesa {
  border-color: var(--turquesa) !important;
}

.bg-jambo {
  background-color: var(--jambo) !important;
}

.border-jambo {
  border-color: var(--jambo) !important;
}

.bg-manga {
  background-color: var(--manga) !important;
}

.border-manga {
  border-color: var(--manga) !important;
}

.bg-grena {
  background-color: var(--grena) !important;
}

.border-grena {
  border-color: var(--grena) !important;
}

.bg-coral {
  background-color: var(--coral) !important;
}

.border-coral {
  border-color: var(--coral) !important;
}

.bg-lavanda {
  background-color: var(--lavanda) !important;
}

.border-lavanda {
  border-color: var(--lavanda) !important;
}

.bg-azul-beira-mar {
  background-color: var(--azul-beira-mar) !important;
}

.border-azul-beira-mar {
  border-color: var(--azul-beira-mar) !important;
}

.bg-indigo {
  background-color: var(--indigo) !important;
}

.border-indigo {
  border-color: var(--indigo) !important;
}

.bg-azul-celeste {
  background-color: var(--azul-celeste) !important;
}

.border-azul-celeste {
  border-color: var(--azul-celeste) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

.border-success {
  border-color: var(--success) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.border-warning {
  border-color: var(--warning) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

.border-info {
  border-color: var(--info) !important;
}

.bg-contrast {
  background-color: var(--bg-contrast) !important;
}

.bg-default {
  background-color: var(--bg-default) !important;
}

.bg-accent {
  background-color: var(--bg-accent) !important;
}

.bg-danger {
  background-color: var(--danger) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-highlight {
  background-color: var(--bg-highlight) !important;
}

.align-self-start {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.cursor-disabled {
  cursor: not-allowed !important;
}

.cursor-disabled input {
  cursor: not-allowed !important;
}

.w-100 {
  width: 100%;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--border);
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.divider.v {
  width: 1px;
  height: 100%;
}

.shadow {
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.fixed {
  position: fixed;
  z-index: 1;
}

.fixed.right {
  right: 0;
}

.fixed.bottom {
  bottom: 0;
}

.fill-height {
  height: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

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

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

.center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media only screen and (min-width: 769px) {
  .border-right {
    border-right: 1px solid var(--border);
  }
}

.font-support {
  font-family: 'Roboto Mono', sans-serif;
}

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

.text-left {
  text-align: left !important;
}

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

.text-uppercase {
  text-transform: uppercase !important;
}

.text-italic {
  font-style: italic !important;
}

.text-none {
  text-decoration: none;
}

.text-underline {
  text-decoration: underline;
}

.f-h1 {
  font-size: 20px !important;
}

.f-h2 {
  font-size: 18px !important;
}

.f-h3 {
  font-size: 20px !important;
}

.f-h4 {
  font-size: 18px !important;
}

.f-h5 {
  font-size: 16px !important;
}

.f-h6 {
  font-size: 14px !important;
}

.f-display-1 {
  font-size: 36px !important;
}

.f-display-2 {
  font-size: 30px !important;
}

.f-tooltip {
  font-size: 11px !important;
}

.f-sm {
  font-size: 11px !important;
}

.f-md {
  font-size: 12px !important;
}

.f-lg {
  font-size: 13px !important;
}

.f-xl {
  font-size: 14px !important;
}

.f-paragraph-lg {
  font-size: 18px !important;
}

.f-paragraph-md {
  font-size: 16px !important;
}

.f-paragraph-sm {
  font-size: 14px !important;
}

.f-paragraph-xs {
  font-size: 12px !important;
}

.f-paragraph-xxs {
  font-size: 11px !important;
}

.f-subtitle {
  font-size: 20px !important;
}

.f-subheader {
  font-size: 13px !important;
}

.f-button-md {
  font-size: 13px !important;
}

.f-button-sm {
  font-size: 12px !important;
}

.f-button-xs {
  font-size: 11px !important;
}

.f-button-xxs {
  font-size: 10px !important;
}

/*####################################################
FONT-WEIGHT
####################################################*/
.font-weight-100 {
  font-weight: 100 !important;
}

.font-weight-200 {
  font-weight: 200 !important;
}

.font-weight-300 {
  font-weight: 300 !important;
}

.font-weight-400 {
  font-weight: 400 !important;
}

.font-weight-500 {
  font-weight: 500 !important;
}

.font-weight-600 {
  font-weight: 600 !important;
}

.font-weight-700 {
  font-weight: 700 !important;
}

.font-weight-800 {
  font-weight: 800 !important;
}

.font-weight-900 {
  font-weight: 900 !important;
}

/*####################################################
LINE HEIGHT
####################################################*/
.lh-1_1 {
  line-height: 1.1;
}

.lh-1_2 {
  line-height: 1.2;
}

.lh-1_3 {
  line-height: 1.3;
}

.lh-1_4 {
  line-height: 1.4;
}

.lh-1_5 {
  line-height: 1.5;
}

.lh-1_6 {
  line-height: 1.6;
}

.lh-1_7 {
  line-height: 1.7;
}

.lh-1_8 {
  line-height: 1.8;
}

.lh-1_9 {
  line-height: 1.9;
}

.lh-2 {
  line-height: 2;
}

/*####################################################
TEXT COLORS
####################################################*/
.text-color-dark {
  color: var(--dark) !important;
}

.text-color-white {
  color: var(--white) !important;
}

.text-color-oliva {
  color: var(--oliva) !important;
}

.text-color-liquen {
  color: var(--liquen) !important;
}

.text-color-esmeralda {
  color: var(--esmeralda) !important;
}

.text-color-turquesa {
  color: var(--turquesa) !important;
}

.text-color-jambo {
  color: var(--jambo) !important;
}

.text-color-manga {
  color: var(--manga) !important;
}

.text-color-grena {
  color: var(--grena) !important;
}

.text-color-coral {
  color: var(--coral) !important;
}

.text-color-lavanda {
  color: var(--lavanda) !important;
}

.text-color-azul-beira-mar {
  color: var(--azul-beira-mar) !important;
}

.text-color-indigo {
  color: var(--indigo) !important;
}

.text-color-azul-celeste {
  color: var(--azul-celeste) !important;
}

.text-color-success {
  color: var(--success) !important;
}

.text-color-warning {
  color: var(--warning) !important;
}

.text-color-info {
  color: var(--info) !important;
}

.text-color-white {
  color: white !important;
}

.text-color-danger {
  color: var(--danger) !important;
}

.text-color-light {
  color: var(--text-light) !important;
}

.text-color-default {
  color: var(--text-default) !important;
}

.text-color-placeholder {
  color: var(--text-placeholder) !important;
}

.text-color-transparent {
  color: transparent !important;
}

/*####################################################
COMMA SEPARATOR & TRUNCATE
####################################################*/
.comma:before {
  content: '\00a0';
}

.comma:not(:last-of-type)::after {
  content: ',';
  letter-spacing: -1rem;
}

.truncate {
  overflow: hidden;
  display: -webkit-box;
}

.truncate-after {
  position: relative;
  -webkit-box-orient: vertical;
}

.truncate-after.lines-1 {
  -webkit-line-clamp: 1;
  max-height: 2em;
}

.truncate-after.lines-2 {
  -webkit-line-clamp: 2;
  max-height: 3em;
}

.truncate-after.lines-3 {
  -webkit-line-clamp: 3;
  max-height: 4em;
}

.truncate-after.lines-4 {
  -webkit-line-clamp: 4;
  max-height: 5em;
}

.truncate-after.lines-5 {
  -webkit-line-clamp: 5;
  max-height: 6em;
}

.truncate-after.lines-6 {
  -webkit-line-clamp: 6;
  max-height: 7em;
}

.truncate-after.lines-7 {
  -webkit-line-clamp: 7;
  max-height: 8em;
}

.truncate-after.lines-8 {
  -webkit-line-clamp: 8;
  max-height: 9em;
}

.truncate-after.lines-9 {
  -webkit-line-clamp: 9;
  max-height: 10em;
}

.truncate-after.lines-10 {
  -webkit-line-clamp: 10;
  max-height: 11em;
}

.truncate-after.lines-11 {
  -webkit-line-clamp: 11;
  max-height: 12em;
}

.truncate-after.lines-12 {
  -webkit-line-clamp: 12;
  max-height: 13em;
}

.truncate-after.lines-13 {
  -webkit-line-clamp: 13;
  max-height: 14em;
}

.truncate-after.lines-14 {
  -webkit-line-clamp: 14;
  max-height: 15em;
}

.title,
.subtitle,
.section-title {
  font-family: 'Beatrice', sans-serif;
  font-weight: 300;
  font-size: var(--display-1);
  line-height: 1.2;
  letter-spacing: -0.01em;
  -webkit-font-feature-settings:
    'ss01' on,
    'titl' on;
  font-feature-settings:
    'ss01' on,
    'titl' on;
  color: var(--text-default);
}

.title::after,
.subtitle::after,
.section-title::after {
  content: '';
  height: 8px;
  width: 60px;
  display: block;
  background-color: var(--coral);
  margin-top: 8px;
}

.title.dark::after,
.dark.subtitle::after,
.dark.section-title::after {
  background-color: var(--dark) !important;
}

.title.white::after,
.white.subtitle::after,
.white.section-title::after {
  background-color: var(--white) !important;
}

.title.oliva::after,
.oliva.subtitle::after,
.oliva.section-title::after {
  background-color: var(--oliva) !important;
}

.title.liquen::after,
.liquen.subtitle::after,
.liquen.section-title::after {
  background-color: var(--liquen) !important;
}

.title.esmeralda::after,
.esmeralda.subtitle::after,
.esmeralda.section-title::after {
  background-color: var(--esmeralda) !important;
}

.title.turquesa::after,
.turquesa.subtitle::after,
.turquesa.section-title::after {
  background-color: var(--turquesa) !important;
}

.title.jambo::after,
.jambo.subtitle::after,
.jambo.section-title::after {
  background-color: var(--jambo) !important;
}

.title.manga::after,
.manga.subtitle::after,
.manga.section-title::after {
  background-color: var(--manga) !important;
}

.title.grena::after,
.grena.subtitle::after,
.grena.section-title::after {
  background-color: var(--grena) !important;
}

.title.coral::after,
.coral.subtitle::after,
.coral.section-title::after {
  background-color: var(--coral) !important;
}

.title.lavanda::after,
.lavanda.subtitle::after,
.lavanda.section-title::after {
  background-color: var(--lavanda) !important;
}

.title.azul-beira-mar::after,
.azul-beira-mar.subtitle::after,
.azul-beira-mar.section-title::after {
  background-color: var(--azul-beira-mar) !important;
}

.title.indigo::after,
.indigo.subtitle::after,
.indigo.section-title::after {
  background-color: var(--indigo) !important;
}

.title.azul-celeste::after,
.azul-celeste.subtitle::after,
.azul-celeste.section-title::after {
  background-color: var(--azul-celeste) !important;
}

.title.success::after,
.success.subtitle::after,
.success.section-title::after {
  background-color: var(--success) !important;
}

.title.warning::after,
.warning.subtitle::after,
.warning.section-title::after {
  background-color: var(--warning) !important;
}

.title.info::after,
.info.subtitle::after,
.info.section-title::after {
  background-color: var(--info) !important;
}

.subtitle,
.section-title {
  letter-spacing: -0.01em;
  font-size: var(--h3);
  line-height: 1.1;
  font-weight: 600;
}

.section-title {
  font-size: var(--h4);
}

.subheader {
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-size: var(--subheader);
  color: var(--text-light);
  font-weight: 600;
}

.subheader::after {
  content: '';
  height: 2px;
  width: 60px;
  display: block;
  background-color: var(--coral);
  margin-top: 8px;
}

.subheader.md {
  font-size: var(--subheader-md);
}

.subheader.md::after {
  display: none;
}

.subheader.title,
.subheader.subtitle,
.subheader.section-title {
  font-weight: 600;
  text-transform: none;
  font-size: 18px;
  color: var(--text-default);
}

.subheader.title::after,
.subheader.subtitle::after,
.subheader.section-title::after {
  height: 8px;
  background-color: var(--lavanda);
}

.paragraph {
  font-size: var(--paragraph-sm);
  line-height: 1.4;
  color: var(--text-default);
}

.paragraph.md {
  font-size: var(--paragraph-md);
}

.paragraph.xs {
  font-size: var(--paragraph-xs);
}

.paragraph.lg {
  font-size: var(--paragraph-lg);
}

h4,
.h4 {
  font-family: 'Beatrice', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
}

.title-text {
  font-family: 'Beatrice', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
}

.fs-8 {
  font-size: 0.5rem !important;
}

.fs-12 {
  font-size: 0.75rem !important;
}

.fs-18 {
  font-size: 1.125rem !important;
}

.fs-20 {
  font-size: 1.25rem !important;
}

.fs-24 {
  font-size: 1.5rem !important;
}

h1,
.h1 {
  font-family: 'Beatrice', sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
}

p {
  margin-bottom: 0.7rem;
}

.text-capitalize::first-letter {
  text-transform: uppercase;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.slide-fade-enter-active,
.slide-fade-leave-active,
.slide-fade-top-enter-active,
.slide-fade-top-leave-active,
.slide-fade-bottom-enter-active,
.slide-fade-bottom-leave-active,
.slide-fade-left-enter-active,
.slide-fade-left-leave-active,
.slide-fade-right-enter-active,
.slide-fade-right-leave-active {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to,
.slide-fade-top-enter-from,
.slide-fade-top-leave-to,
.slide-fade-bottom-enter-from,
.slide-fade-bottom-leave-to,
.slide-fade-left-enter-from,
.slide-fade-left-leave-to,
.slide-fade-right-enter-from,
.slide-fade-right-leave-to {
  opacity: 0;
  visibility: hidden;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}

.slide-fade-top-enter-from,
.slide-fade-top-leave-to {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

.slide-fade-bottom-enter-from,
.slide-fade-bottom-leave-to {
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.slide-fade-left-enter-from,
.slide-fade-left-leave-to {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}

.slide-fade-right-enter-from,
.slide-fade-right-leave-to {
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
}

.width-enter-active,
.width-leave-active {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.width-enter-from,
.width-leave-to {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
}

* {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
}

body {
  font-family: 'Inter', sans-serif;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-weight: 400;
  font-size: 0.875rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

main {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

a {
  text-decoration: none;
}

.page {
  height: 100vh;
  background-color: var(--bg-default);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  color: var(--text-default);
}

.page-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

[data-count] {
  position: relative;
}

[data-count]::before {
  content: attr(data-count);
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 16px;
  border-radius: 20px;
  padding: 0px 1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--danger);
  letter-spacing: -0.02em;
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--white);
  font-family: 'Roboto Mono', sans-serif;
  display: none;
}

[data-count]:not([data-count='0'])::before {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 16px;
  background-color: var(--bg-contrast);
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}

@media only screen and (min-width: 769px) {
  .toolbar {
    height: 72px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media only screen and (min-width: 769px) {
  .toolbar.md {
    height: 88px;
  }
}

.toolbar-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  width: 100%;
  align-items: center;
}

@media only screen and (min-width: 769px) {
  .toolbar-left {
    width: auto;
  }
}

.toolbar-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.toolbar-icon {
  font-size: 1.25rem;
  color: var(--coral);
}

.toolbar-title {
  letter-spacing: -0.01em;
  text-transform: uppercase;
  -webkit-font-feature-settings:
    'ss01' on,
    'titl' on;
  font-feature-settings:
    'ss01' on,
    'titl' on;
  font-family: 'Beatrice', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
}

.expansion-panels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

@media only screen and (min-width: 769px) {
  .expansion-panels {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.expansion-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  height: 40px;
  position: relative;
}

@media only screen and (min-width: 769px) {
  .expansion-panel {
    width: 40px;
    height: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.expansion-panel.active {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.expansion-panel-header {
  border-right: 1px solid var(--bg-default);
  background-color: var(--lavanda);
  color: var(--white);
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (min-width: 769px) {
  .expansion-panel-header {
    width: 40px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.expansion-panel-header .count {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.02em;
  font-family: 'Roboto Mono', sans-serif;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.expansion-panel-header .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}

@media only screen and (min-width: 769px) {
  .expansion-panel-header .content {
    padding: 1rem 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.expansion-panel-header .icon {
  font-size: 1.125rem;
}

@media only screen and (min-width: 769px) {
  .expansion-panel-header .icon {
    margin-bottom: 1rem;
  }
}

.expansion-panel-header .name {
  font-size: var(--subheader);
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media only screen and (min-width: 769px) {
  .expansion-panel-header .name {
    text-transform: uppercase;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.expansion-panel-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media only screen and (min-width: 769px) {
  .expansion-panel-content {
    position: absolute;
    width: calc(100vw - 51px * 5);
    left: 40px;
    height: 100%;
  }
}

.expansion-panel-content-body {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.expansion-panel-content-body:not(.expansion-panel-content-body-kanban) {
  padding: 24px;
  height: 200px;
}

.expansion-panel-content-body::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

.expansion-panel-content-body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px var(--bg-contrast);
}

.expansion-panel-content-body::-webkit-scrollbar-thumb {
  background-color: var(--lavanda);
  outline: 1px solid var(--bg-contrast);
  border-radius: 5rem;
}

.contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 8px;
}

.contacts .contact {
  padding: 0px 16px;
  width: calc(100% / 4);
}

.tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.tab-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 8px 0px;
  gap: 1px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow-x: auto;
}

.tab-header::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.tab-header .btn {
  background-color: var(--bg-accent);
}

.tab-header .btn:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.tab-header .btn.active {
  background-color: var(--coral);
}

.tab-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.spacer {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.thumb {
  width: 120px;
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid var(--border);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.5rem;
}

.thumb img {
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.label-status {
  padding: 0px 8px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 0.6875rem;
  color: var(--dark);
}

.label-status:not(.bg-warning) {
  color: var(--white);
}

.label-status.outlined {
  border: 1px solid var(--border);
  color: var(--text-default);
}

.label-status-line {
  width: 4px;
  background-color: var(--border);
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

.custom-scroll::-webkit-scrollbar {
  height: 8px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  background-clip: padding-box;
  background-color: transparent;
  border-radius: 1rem;
}

.custom-scroll:hover::-webkit-scrollbar-thumb {
  background-color: var(--gray);
}

.custom-scroll:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-alternative);
}

.scrollable,
.dropdown .list {
  overflow-y: auto;
  overflow-x: hidden;
  overflow-y: overlay;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 200px;
}

.scrollable::-webkit-scrollbar *,
.dropdown .list::-webkit-scrollbar * {
  background: transparent;
}

.scrollable::-webkit-scrollbar,
.dropdown .list::-webkit-scrollbar {
  width: 1.5rem;
}

.scrollable::-webkit-scrollbar-track,
.dropdown .list::-webkit-scrollbar-track {
  background: trasparent;
  display: none;
}

.scrollable::-webkit-scrollbar-thumb,
.dropdown .list::-webkit-scrollbar-thumb {
  border: 0.5rem solid transparent;
  background-clip: content-box;
  background-color: transparent;
  border-radius: 1rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.scrollable:hover::-webkit-scrollbar-thumb,
.dropdown .list:hover::-webkit-scrollbar-thumb {
  background-color: var(--text-light);
}

.scrollable:hover::-webkit-scrollbar-thumb:hover,
.dropdown .list:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-default);
}

.badge {
  padding: 0px 1px;
  width: 18px;
  height: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 20px;
  background: #8c8ba7;
  color: var(--white);
  font-weight: 600;
  font-size: 11px;
  font-family: 'Roboto Mono', sans-serif;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.badge.md {
  height: 24px;
  padding: 0px 8px;
  width: auto;
}

.empty {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.empty-content {
  max-width: 300px;
  text-align: center;
  margin: 2rem 1rem;
}

.read-status {
  width: 8px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.bar {
  --value: 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.bar-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bar-line-label {
  max-width: 120px;
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-weight: 400;
  font-size: 11px;
}

.bar-line-progress {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 16px;
  background-color: var(--bg-highlight);
  margin: 0 8px 0 0;
  position: relative;
  color: red;
}

.bar-line-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--value);
  display: block;
  background-color: currentColor;
  height: 100%;
}

.bar-line-value {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-weight: 400;
  font-size: 12px;
}

.bar-vertical {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 280px;
  overflow: auto;
  gap: 0;
}

.bar-vertical .bar-line {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bar-vertical .bar-line-value {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.bar-vertical .bar-line-progress {
  width: 20px;
  margin: 8px 0 0;
}

.bar-vertical .bar-line-progress::after {
  width: 100%;
  height: var(--value);
  top: auto;
  bottom: 0;
}

.bar-vertical .bar-line-label {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  min-height: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bar-vertical .bars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  gap: 1px;
}

.bar-vertical .bars .bar-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.bar-vertical .bars .bar-line-progress {
  width: 60px;
}

.chart-line {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.chart-line-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--white);
}

.chart-line-header .name {
  color: var(--white);
  opacity: 0.7;
}

.chart-line-header .total {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.chart-line-header .btn-icon em {
  color: var(--white);
}

.chart-line .vue-apexcharts {
  min-height: 215px;
  position: absolute;
  bottom: -30px;
  left: -22px;
}

.poster {
  width: 180px;
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--bg-highlight);
  position: relative;
  overflow: hidden;
}

.poster img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 1;
}

.poster .icon {
  font-size: 20px;
  color: var(--text-light);
}

.poster .btn-camera {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: absolute;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  bottom: 0;
  left: 0;
  background-color: var(--bg-highlight);
  z-index: 2;
}

.label {
  font-weight: 400;
  font-size: var(--paragraph-xs);
  color: var(--text-default);
  display: block;
  margin-bottom: 2px;
}

[list]::-webkit-calendar-picker-indicator,
[list]::-webkit-list-button {
  display: none;
  opacity: 0;
}

.form-group {
  margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
  .form-group {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}

.form-group label {
  font-weight: 400;
  font-size: var(--paragraph-xs);
  color: var(--text-default);
  display: block;
  margin-bottom: 2px;
}

.form-group .input-field {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--bg-contrast);
  border: 1px solid var(--border);
}

.form-group .input-field::before {
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  left: 1rem;
  font-weight: 900;
  display: none;
}

.form-group .input-field.has-icon .icon {
  position: absolute;
  right: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 1rem;
  pointer-events: none;
}

.form-group .input-field.has-icon .form-control {
  padding-right: 2.5rem;
}

.form-group .input-field>em {
  position: absolute;
  left: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 1rem;
}

.form-group .input-field>em+.form-control {
  padding-left: 3rem;
}

.form-group .form-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0;
  font-size: 0.875rem;
  color: var(--text-default);
  background-color: var(--bg-contrast);
  border: none;
  height: 52px;
  -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  transition:
    box-shadow 0.3s ease-in-out,
    -webkit-box-shadow 0.3s ease-in-out;
  padding: 1rem;
  width: 100%;
  caret-color: var(--text-default);
  font-family: 'Inter', sans-serif;
}

.form-group .form-control:focus {
  -webkit-box-shadow: inset 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
}

.form-group .form-control::-webkit-input-placeholder {
  color: var(--text-placeholder);
}

.form-group .form-control:-ms-input-placeholder {
  color: var(--text-placeholder);
}

.form-group .form-control::-ms-input-placeholder {
  color: var(--text-placeholder);
}

.form-group .form-control::placeholder {
  color: var(--text-placeholder);
}

.form-group .form-control:disabled,
.form-group .form-control .disabled {
  background-color: var(--bg-highlight);
}

.form-group .hint {
  font-size: var(--paragraph-xs);
  color: var(--text-light);
  display: none;
  margin-top: 2px;
}

.form-group .hint.persintent {
  display: block;
}

.form-group.sm .form-control {
  height: 36px;
}

.form-group.xs .form-control {
  height: 32px;
  font-size: 0.75rem;
}

.form-group.has-error label {
  color: var(--danger);
}

.form-group.has-error .input-field {
  border-color: var(--danger);
}

.form-group.has-error .input-field::before {
  content: '\f06a';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--danger);
}

.form-group.has-error .form-control {
  border-color: var(--danger);
  padding-left: 2.5rem;
  caret-color: var(--danger);
}

.form-group.has-error .hint {
  color: var(--danger);
  display: block;
}

.form-group.has-success .input-field::before {
  content: '\f058';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--success);
}

.form-group.has-success .form-control {
  padding-left: 2.5rem;
}

.form-group.coral .input-field,
.form-group.coral .form-control {
  border-color: var(--coral);
  color: var(--coral);
}

.form-group.coral .icon {
  color: var(--coral) !important;
}

.form-group select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 1rem;
}

.form-group select.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-group select.form-control:invalid {
  color: var(--text-placeholder);
}

.form-group input[type='search']::-webkit-search-cancel-button {
  position: relative;
  height: 12px;
  width: 12px;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--text-light);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.8438 10.875C10.6562 11.0625 10.3125 11.0625 10.125 10.875L6 6.71875L1.84375 10.875C1.65625 11.0625 1.3125 11.0625 1.125 10.875C0.9375 10.6875 0.9375 10.3438 1.125 10.1562L5.28125 6L1.125 1.875C0.9375 1.6875 0.9375 1.34375 1.125 1.15625C1.3125 0.96875 1.65625 0.96875 1.84375 1.15625L6 5.3125L10.125 1.15625C10.3125 0.96875 10.6562 0.96875 10.8438 1.15625C11.0312 1.34375 11.0312 1.6875 10.8438 1.875L6.6875 6L10.8438 10.1562C11.0312 10.3438 11.0312 10.6875 10.8438 10.875Z" fill="white"/></svg>');
  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.8438 10.875C10.6562 11.0625 10.3125 11.0625 10.125 10.875L6 6.71875L1.84375 10.875C1.65625 11.0625 1.3125 11.0625 1.125 10.875C0.9375 10.6875 0.9375 10.3438 1.125 10.1562L5.28125 6L1.125 1.875C0.9375 1.6875 0.9375 1.34375 1.125 1.15625C1.3125 0.96875 1.65625 0.96875 1.84375 1.15625L6 5.3125L10.125 1.15625C10.3125 0.96875 10.6562 0.96875 10.8438 1.15625C11.0312 1.34375 11.0312 1.6875 10.8438 1.875L6.6875 6L10.8438 10.1562C11.0312 10.3438 11.0312 10.6875 10.8438 10.875Z" fill="white"/></svg>');
}

.form-group .input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 8px;
}

.form-group .input-group .input-field {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.form-group textarea.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: auto;
  min-height: 116px;
  resize: none;
}

.form-group.icon-click .icon {
  pointer-events: all !important;
}

.checkbox {
  width: 100%;
}

.checkbox label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  cursor: pointer;
  width: 100%;
}

.checkbox label::before {
  content: '\f0c8';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  font-size: 1.25rem;
  margin-right: 1rem;
  color: var(--text-light);
}

.checkbox input {
  display: none;
}

.checkbox input:checked+label::before {
  content: '\f14a';
  font-weight: 900;
  color: var(--coral);
}

.checkbox.invert label::before {
  display: none;
}

.checkbox.invert label::after {
  content: '\f0c8';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  font-size: 1.25rem;
  margin-right: 1rem;
  color: var(--text-light);
  margin-right: 0rem;
  margin-left: 1rem;
}

.checkbox.invert input:checked+label::after {
  content: '\f14a';
  font-weight: 900;
  color: var(--coral);
}

.checkbox.radio label::before {
  content: '\f111';
}

.checkbox.radio input:checked+label::before {
  content: '\f058';
}

.checkbox.radio.invert label::after {
  content: '\f111';
}

.checkbox.radio.invert input:checked+label::after {
  content: '\f058';
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

.number-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}

.number-box .form-group {
  margin-top: 0;
  margin-bottom: 0;
  width: 40px;
  height: 40px;
}

.number-box .form-group .form-control {
  height: 40px;
  padding: 0 4px;
  text-align: center;
}

.number-box .form-group .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.switch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.switch input {
  display: none;
}

.switch label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 48px;
  height: 28px;
  background-color: var(--bg-accent);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 40px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: relative;
  padding: 2px;
}

.switch label:before {
  content: '';
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--bg-contrast);
  border-radius: 40px;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.switch input:disabled+label,
.switch input.disabled+label {
  cursor: not-allowed;
  background-color: red;
}

.switch input:checked+label {
  background-color: var(--coral);
}

.switch input:checked+label:before {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}

.input-range {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  height: 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

input[type='range'] {
  -webkit-appearance: none;
  margin-right: 15px;
  width: 100%;
  height: 4px;
  background: var(--bg-contrast);
  border-radius: 5px;
  background-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--coral)),
      to(var(--coral)));
  background-image: linear-gradient(var(--coral), var(--coral));
  background-size: 70% 100%;
  background-repeat: no-repeat;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
  width: 16px;
  height: 16px;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  border: 1px solid var(--bg-contrast);
  background-color: var(--coral);
}

input[type='range']::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  cursor: ew-resize;
  width: 16px;
  height: 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  border: 1px solid var(--bg-contrast);
  background-color: var(--coral);
}

input[type='range']::-ms-thumb {
  appearance: none;
  cursor: ew-resize;
  width: 16px;
  height: 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  border: 1px solid var(--bg-contrast);
  background-color: var(--coral);
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input[type='range']::-moz-range-track {
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input[type='range']::-ms-track {
  appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.trumbowyg-box {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid var(--border);
  background-color: var(--bg-contrast);
}

.trumbowyg-box .trumbowyg-button-pane {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  border-top: 1px solid var(--border);
  border-bottom: none;
  background-color: var(--bg-contrast);
}

.trumbowyg-box .trumbowyg-button-pane::after,
.trumbowyg-box .trumbowyg-button-pane::before {
  background: var(--border);
}

.trumbowyg-box .trumbowyg-button-pane::after {
  display: none;
}

.trumbowyg-box svg {
  width: auto !important;
  fill: var(--text-light) !important;
}

.trumbowyg-box .trumbowyg-button-pane .trumbowyg-open-dropdown::after {
  display: none;
}

.trumbowyg-box ol li {
  list-style-type: decimal !important;
}

.trumbowyg-box ul li {
  list-style-type: disc !important;
}

.autocomplite {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0;
  font-size: 0.875rem;
  color: var(--text-default);
  background-color: var(--bg-contrast);
  border: none;
  height: 52px;
  -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  transition:
    box-shadow 0.3s ease-in-out,
    -webkit-box-shadow 0.3s ease-in-out;
  padding: 1rem;
  width: 100%;
  caret-color: var(--text-default);
  font-family: 'Inter', sans-serif;
}

.autocomplite:focus {
  -webkit-box-shadow: inset 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
}

.autocomplite::-webkit-input-placeholder {
  color: var(--text-placeholder);
}

.autocomplite:-ms-input-placeholder {
  color: var(--text-placeholder);
}

.autocomplite::-ms-input-placeholder {
  color: var(--text-placeholder);
}

.autocomplite::placeholder {
  color: var(--text-placeholder);
}

.autocomplite:disabled,
.autocomplite .disabled {
  background-color: var(--bg-highlight);
}

.grid-cards {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(270px, 1fr)) [auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
}

.expansion-panel-content-body.no-scrollbar {
  overflow-y: hidden;
}

.kanban-cards {
  display: flex;
  align-items: stretch;
  justify-content: start;
  overflow-x: auto;
}

.kanban-cards::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

.kanban-cards::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px var(--bg-contrast);
}

.kanban-cards::-webkit-scrollbar-thumb {
  background-color: var(--lavanda);
  outline: 1px solid var(--bg-contrast);
  border-radius: 5rem;
}

.kanban-cards .kanban-row {
  position: relative;
  border-right: 1px solid var(--light-ui-border, #e1e1eb);
  background: var(--light-uibg-default, #f2f2f6);
  min-width: 320px;
  /* max-height: 73dvh; */
  overflow-y: auto;
}

.kanban-cards .kanban-row::-webkit-scrollbar {
  visibility: hidden;
  width: 0;
}

.kanban-cards .kanban-row .kanban-header {
  position: sticky;
  top: 0;
  max-width: 100%;
  display: flex;
  width: 100%;
  height: 40px;
  padding: 0px 16px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--light-ui-border, #e1e1eb);
  background: var(--light-uibg-contrast, #fff);
  min-height: 56px;
  z-index: 50;
  margin-bottom: 16px;
}

.kanban-cards .kanban-row .kanban-body {
  display: flex;
  padding: 0 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  gap: 8px;
}

.kanban-cards .kanban-row .kanban-header h2 {
  color: var(--light-text-default, #52526b);
  /* Paragraph/XS/400 */
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 15.6px */
}

.list-cards {
  display: flex;
  flex-direction: column;
}

.list-cards .list-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list-cards .list-row .list-header {
  display: flex;
  width: 16.875rem;
  padding: 1.5rem 0rem 0.5rem 0rem;
  align-items: center;
  gap: 0.5rem;
}

.list-cards .list-row .list-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  gap: 0.5rem;
}

.list-cards .list-row .list-header h2 {
  color: var(--text-default, #52526b);
  /* Paragraph/SM/600 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

.grid-cards.sm {
  -ms-grid-columns: (minmax(240px, 1fr)) [auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  width: 100%;
}

.card {
  width: 100%;
  height: 100%;
  max-height: 380px;
  border-top: 8px solid transparent;
  -webkit-box-shadow:
    0px 2px 3px -1px rgba(0, 0, 0, 0.05),
    0px 3px 10px -4px rgba(0, 0, 0, 0.04);
  box-shadow:
    0px 2px 3px -1px rgba(0, 0, 0, 0.05),
    0px 3px 10px -4px rgba(0, 0, 0, 0.04);
  background: var(--bg-contrast);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: space-between;
}

.card .card-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card.stretch .card-content {
  display: flex;
  flex-direction: row;
  position: relative;
}

.card-header {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.card.stretch .card-header {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: static;
}

.card-header .favorite {
  width: 20px;
  height: 20px;
  background-color: var(--manga);
  color: var(--white);
  font-size: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: -8px;
  left: 1rem;
}

.card-header .priority {
  position: absolute;
  width: 8px;
  height: 24px;
  background-color: var(--bg-accent);
  left: -16px;
  top: 0px;
}

.card-header .priority.danger {
  background-color: var(--danger);
}

.card-header .priority.warning {
  background-color: var(--manga);
}

.card-header .priority.normal {
  background-color: var(--warning);
}

.card-header .priority.success {
  background-color: var(--success);
}

.card-header-left {
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 450;
}

.card-header-left .highlight {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 140%;
}

.card-header-left .code {
  font-family: 'Roboto Mono', sans-serif;
}

.card-header-right {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.card.stretch .card-header-right {
  -ms-flex-item-align: center;
  align-self: center;
  position: absolute;
  right: 1rem;
}

.card-header-right .icon {
  color: var(--text-light);
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 4px;
}

.card-header-right .icon:hover {
  background: var(--bg-highlight-20);
}

.card-body {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 0px 1rem 1rem;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.card.stretch .card-body {
  flex-grow: unset;
  padding: 1rem 3.5rem 1rem 1rem;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.card-body .counters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card.stretch .card-body .counters {
  margin-bottom: 0;
  padding: 0rem 1rem 0rem 1rem;
}

.card-body .counters .item-counter {
  font-size: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: currentColor;
  padding: 0;
}

.card-body .counters .item-counter em {
  font-size: 0.875rem;
}

.card-body .counters .spacer {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.card-body .team {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 8px;
}

.card.stretch .card-body .team {
  gap: 1rem;
}

.card .user-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1.3;
  gap: 8px;
}

.card .user-info .name {
  font-weight: 500;
}

.card .user-info .email {
  color: var(--text-light);
}

.card-footer {
  background-color: var(--bg-highlight);
  border-top: 1px solid var(--border);
  padding: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 8px;
}

.card-footer .time {
  color: var(--text-light);
  font-size: 0.75rem;
}

.card-footer .status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
}

.card-footer .status em {
  font-size: 0.875rem;
  color: var(--text-light);
}

.card.disabled {
  opacity: 0.5;
}

button {
  border: none;
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn {
  height: 52px;
  padding: 0px 24px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: var(--lavanda);
  color: white;
  font-weight: 500;
  font-size: var(--button-md);
  font-family: 'Beatrice', sans-serif;
  text-decoration: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.btn * {
  pointer-events: none;
}

.btn:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--lavanda-60);
  box-shadow: 0px 0px 0px 4px var(--lavanda-60);
}

.btn.rounded {
  border-radius: 100px;
}

.btn .fal,
.btn .fas,
.btn .far {
  font-size: 1rem;
}

.btn-dark {
  background: var(--dark) !important;
}

.btn-dark:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--dark-60);
  box-shadow: 0px 0px 0px 4px var(--dark-60);
}

.btn-white {
  background: var(--white) !important;
}

.btn-white:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--white-60);
  box-shadow: 0px 0px 0px 4px var(--white-60);
}

.btn-oliva {
  background: var(--oliva) !important;
}

.btn-oliva:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--oliva-60);
  box-shadow: 0px 0px 0px 4px var(--oliva-60);
}

.btn-liquen {
  background: var(--liquen) !important;
}

.btn-liquen:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--liquen-60);
  box-shadow: 0px 0px 0px 4px var(--liquen-60);
}

.btn-esmeralda {
  background: var(--esmeralda) !important;
}

.btn-esmeralda:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--esmeralda-60);
  box-shadow: 0px 0px 0px 4px var(--esmeralda-60);
}

.btn-turquesa {
  background: var(--turquesa) !important;
}

.btn-turquesa:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--turquesa-60);
  box-shadow: 0px 0px 0px 4px var(--turquesa-60);
}

.btn-jambo {
  background: var(--jambo) !important;
}

.btn-jambo:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--jambo-60);
  box-shadow: 0px 0px 0px 4px var(--jambo-60);
}

.btn-manga {
  background: var(--manga) !important;
}

.btn-manga:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--manga-60);
  box-shadow: 0px 0px 0px 4px var(--manga-60);
}

.btn-grena {
  background: var(--grena) !important;
}

.btn-grena:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--grena-60);
  box-shadow: 0px 0px 0px 4px var(--grena-60);
}

.btn-coral {
  background: var(--coral) !important;
}

.btn-coral:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--coral-60);
  box-shadow: 0px 0px 0px 4px var(--coral-60);
}

.btn-lavanda {
  background: var(--lavanda) !important;
}

.btn-lavanda:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--lavanda-60);
  box-shadow: 0px 0px 0px 4px var(--lavanda-60);
}

.btn-azul-beira-mar {
  background: var(--azul-beira-mar) !important;
}

.btn-azul-beira-mar:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--azul-beira-mar-60);
  box-shadow: 0px 0px 0px 4px var(--azul-beira-mar-60);
}

.btn-indigo {
  background: var(--indigo) !important;
}

.btn-indigo:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--indigo-60);
  box-shadow: 0px 0px 0px 4px var(--indigo-60);
}

.btn-azul-celeste {
  background: var(--azul-celeste) !important;
}

.btn-azul-celeste:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--azul-celeste-60);
  box-shadow: 0px 0px 0px 4px var(--azul-celeste-60);
}

.btn-success {
  background: var(--success) !important;
}

.btn-success:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--success-60);
  box-shadow: 0px 0px 0px 4px var(--success-60);
}

.btn-warning {
  background: var(--warning) !important;
}

.btn-warning:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--warning-60);
  box-shadow: 0px 0px 0px 4px var(--warning-60);
}

.btn-info {
  background: var(--info) !important;
}

.btn-info:hover {
  -webkit-box-shadow: 0px 0px 0px 4px var(--info-60);
  box-shadow: 0px 0px 0px 4px var(--info-60);
}

.btn.text {
  border: none !important;
  background: transparent !important;
  padding: 0;
  color: var(--text-default);
}

.btn.text:hover {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
}

.btn.text.btn-dark {
  color: var(--dark) !important;
}

.btn.text.btn-white {
  color: var(--white) !important;
}

.btn.text.btn-oliva {
  color: var(--oliva) !important;
}

.btn.text.btn-liquen {
  color: var(--liquen) !important;
}

.btn.text.btn-esmeralda {
  color: var(--esmeralda) !important;
}

.btn.text.btn-turquesa {
  color: var(--turquesa) !important;
}

.btn.text.btn-jambo {
  color: var(--jambo) !important;
}

.btn.text.btn-manga {
  color: var(--manga) !important;
}

.btn.text.btn-grena {
  color: var(--grena) !important;
}

.btn.text.btn-coral {
  color: var(--coral) !important;
}

.btn.text.btn-lavanda {
  color: var(--lavanda) !important;
}

.btn.text.btn-azul-beira-mar {
  color: var(--azul-beira-mar) !important;
}

.btn.text.btn-indigo {
  color: var(--indigo) !important;
}

.btn.text.btn-azul-celeste {
  color: var(--azul-celeste) !important;
}

.btn.text.btn-success {
  color: var(--success) !important;
}

.btn.text.btn-warning {
  color: var(--warning) !important;
}

.btn.text.btn-info {
  color: var(--info) !important;
}

.btn.disabled,
.btn:disabled {
  background-color: var(--bg-accent) !important;
  pointer-events: none;
}

.btn.outlined {
  border: 1px solid var(--border);
  background-color: transparent !important;
  color: var(--text-light);
}

.btn.outlined:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-dark {
  color: var(--dark);
  border-color: var(--dark-60);
}

.btn.outlined.btn-dark:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-white {
  color: var(--white);
  border-color: var(--white-60);
}

.btn.outlined.btn-white:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-oliva {
  color: var(--oliva);
  border-color: var(--oliva-60);
}

.btn.outlined.btn-oliva:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-liquen {
  color: var(--liquen);
  border-color: var(--liquen-60);
}

.btn.outlined.btn-liquen:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-esmeralda {
  color: var(--esmeralda);
  border-color: var(--esmeralda-60);
}

.btn.outlined.btn-esmeralda:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-turquesa {
  color: var(--turquesa);
  border-color: var(--turquesa-60);
}

.btn.outlined.btn-turquesa:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-jambo {
  color: var(--jambo);
  border-color: var(--jambo-60);
}

.btn.outlined.btn-jambo:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-manga {
  color: var(--manga);
  border-color: var(--manga-60);
}

.btn.outlined.btn-manga:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-grena {
  color: var(--grena);
  border-color: var(--grena-60);
}

.btn.outlined.btn-grena:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-coral {
  color: var(--coral);
  border-color: var(--coral-60);
}

.btn.outlined.btn-coral:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-lavanda {
  color: var(--lavanda);
  border-color: var(--lavanda-60);
}

.btn.outlined.btn-lavanda:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-azul-beira-mar {
  color: var(--azul-beira-mar);
  border-color: var(--azul-beira-mar-60);
}

.btn.outlined.btn-azul-beira-mar:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-indigo {
  color: var(--indigo);
  border-color: var(--indigo-60);
}

.btn.outlined.btn-indigo:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-azul-celeste {
  color: var(--azul-celeste);
  border-color: var(--azul-celeste-60);
}

.btn.outlined.btn-azul-celeste:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-success {
  color: var(--success);
  border-color: var(--success-60);
}

.btn.outlined.btn-success:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-warning {
  color: var(--warning);
  border-color: var(--warning-60);
}

.btn.outlined.btn-warning:hover {
  background-color: transparent !important;
}

.btn.outlined.btn-info {
  color: var(--info);
  border-color: var(--info-60);
}

.btn.outlined.btn-info:hover {
  background-color: transparent !important;
}

.btn.sm {
  padding: 0px 16px;
  height: 40px;
  font-size: var(--button-sm);
}

.btn.xs {
  padding: 0px 12px;
  height: 24px;
  font-size: var(--button-xs);
}

.btn.icon {
  width: 52px;
  height: 52px;
  background-color: var(--bg-highlight);
  color: var(--text-light);
  font-size: 1.125rem;
}

.btn.icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn.icon:hover {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(6, 25, 119, 0.15);
  box-shadow: 0px 0px 0px 1px rgba(6, 25, 119, 0.15);
}

.btn.icon.btn-dark {
  background-color: var(--dark);
  color: var(--white);
}

.btn.icon.btn-dark:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--dark-60);
  box-shadow: 0px 0px 0px 2px var(--dark-60);
}

.btn.icon.btn-white {
  background-color: var(--white);
  color: var(--white);
}

.btn.icon.btn-white:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--white-60);
  box-shadow: 0px 0px 0px 2px var(--white-60);
}

.btn.icon.btn-oliva {
  background-color: var(--oliva);
  color: var(--white);
}

.btn.icon.btn-oliva:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--oliva-60);
  box-shadow: 0px 0px 0px 2px var(--oliva-60);
}

.btn.icon.btn-liquen {
  background-color: var(--liquen);
  color: var(--white);
}

.btn.icon.btn-liquen:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--liquen-60);
  box-shadow: 0px 0px 0px 2px var(--liquen-60);
}

.btn.icon.btn-esmeralda {
  background-color: var(--esmeralda);
  color: var(--white);
}

.btn.icon.btn-esmeralda:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--esmeralda-60);
  box-shadow: 0px 0px 0px 2px var(--esmeralda-60);
}

.btn.icon.btn-turquesa {
  background-color: var(--turquesa);
  color: var(--white);
}

.btn.icon.btn-turquesa:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--turquesa-60);
  box-shadow: 0px 0px 0px 2px var(--turquesa-60);
}

.btn.icon.btn-jambo {
  background-color: var(--jambo);
  color: var(--white);
}

.btn.icon.btn-jambo:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--jambo-60);
  box-shadow: 0px 0px 0px 2px var(--jambo-60);
}

.btn.icon.btn-manga {
  background-color: var(--manga);
  color: var(--white);
}

.btn.icon.btn-manga:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--manga-60);
  box-shadow: 0px 0px 0px 2px var(--manga-60);
}

.btn.icon.btn-grena {
  background-color: var(--grena);
  color: var(--white);
}

.btn.icon.btn-grena:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--grena-60);
  box-shadow: 0px 0px 0px 2px var(--grena-60);
}

.btn.icon.btn-coral {
  background-color: var(--coral);
  color: var(--white);
}

.btn.icon.btn-coral:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--coral-60);
  box-shadow: 0px 0px 0px 2px var(--coral-60);
}

.btn.icon.btn-lavanda {
  background-color: var(--lavanda);
  color: var(--white);
}

.btn.icon.btn-lavanda:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--lavanda-60);
  box-shadow: 0px 0px 0px 2px var(--lavanda-60);
}

.btn.icon.btn-azul-beira-mar {
  background-color: var(--azul-beira-mar);
  color: var(--white);
}

.btn.icon.btn-azul-beira-mar:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--azul-beira-mar-60);
  box-shadow: 0px 0px 0px 2px var(--azul-beira-mar-60);
}

.btn.icon.btn-indigo {
  background-color: var(--indigo);
  color: var(--white);
}

.btn.icon.btn-indigo:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--indigo-60);
  box-shadow: 0px 0px 0px 2px var(--indigo-60);
}

.btn.icon.btn-azul-celeste {
  background-color: var(--azul-celeste);
  color: var(--white);
}

.btn.icon.btn-azul-celeste:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--azul-celeste-60);
  box-shadow: 0px 0px 0px 2px var(--azul-celeste-60);
}

.btn.icon.btn-success {
  background-color: var(--success);
  color: var(--white);
}

.btn.icon.btn-success:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--success-60);
  box-shadow: 0px 0px 0px 2px var(--success-60);
}

.btn.icon.btn-warning {
  background-color: var(--warning);
  color: var(--white);
}

.btn.icon.btn-warning:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--warning-60);
  box-shadow: 0px 0px 0px 2px var(--warning-60);
}

.btn.icon.btn-info {
  background-color: var(--info);
  color: var(--white);
}

.btn.icon.btn-info:hover {
  -webkit-box-shadow: 0px 0px 0px 2px var(--info-60);
  box-shadow: 0px 0px 0px 2px var(--info-60);
}

.btn.icon.xxl {
  width: 100px;
  height: 100px;
  font-size: 1.25rem;
}

.btn.icon.xl {
  width: 64px;
  height: 64px;
  font-size: 1.25rem;
}

.btn.icon.sm {
  width: 40px;
  height: 40px;
}

.btn.icon.xs {
  width: 32px;
  height: 32px;
}

.btn.icon.xxs {
  width: 24px;
  height: 24px;
}

.btn.icon.xxs em {
  font-size: 0.75rem;
}

.btn.block {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
}

.btn.loading {
  cursor: progress !important;
  color: transparent !important;
  position: relative;
  pointer-events: none;
}

.btn.loading:after {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 2px solid var(--white);
  border-right-color: transparent !important;
  -webkit-animation: rotate 0.5s linear infinite;
  animation: rotate 0.5s linear infinite;
}

.btn.favorite {
  color: var(--white);
  background-color: transparent;
}

.btn.favorite em {
  font-weight: 300;
}

.btn.favorite.active,
.btn.favorite:hover {
  background-color: var(--manga);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn.favorite.active em,
.btn.favorite:hover em {
  font-weight: 900;
}

.btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
}

.btn.no-hover {
  cursor: default;
}

.btn.no-hover:hover {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
}

.btn-icon {
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-icon * {
  pointer-events: none;
}

.btn-icon em {
  font-size: 1rem;
  color: var(--text-light);
}

.login-bg {
  background: #121617;
  overflow: auto;
  background-image: url('../images/login.jpg');
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
}

.login-bg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
  background-color: var(--indigo);
  opacity: 0.6;
}

.login-bg .login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  color: var(--text-default);
  z-index: 1;
}

.login-bg .login-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow: auto;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.login-bg .login-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.login-bg .login-content-header img {
  max-height: 56px;
  margin-bottom: 2rem;
}

.login-bg .login-content-body {
  background: var(--bg-contrast);
  -webkit-box-shadow: 0px 16px 32px -4px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 16px 32px -4px rgba(0, 0, 0, 0.5);
  padding: 40px;
  isolation: isolate;
  width: 100%;
  position: relative;
}

.login-bg .login-content-body.fade {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.login-bg .login-content-body::before {
  content: '';
  height: 8px;
  width: 80px;
  background-color: var(--coral);
  position: absolute;
  top: -8px;
  right: 0;
}

.login-bg .login-footer {
  border-bottom: 16px solid var(--coral);
}

.login-bg .login-footer .copy {
  text-align: center;
  padding: 0.5rem 1rem;
  font-weight: 400;
  font-size: var(--paragraph-xs);
  color: var(--white);
  opacity: 0.5;
}

.login-bg .forgot {
  text-align: right;
}

.login-bg .forgot a {
  color: var(--text-light);
  text-decoration: none;
  font-size: var(--paragraph-sm);
}

.login-bg .forgot a:hover {
  text-decoration: underline;
}

.sidebar {
  background-color: var(--indigo);
  height: 100vh;
  width: 60px;
  padding: 16px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  z-index: 999;
}

.sidebar .logo {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.sidebar .logo img {
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  height: 40px;
}

.sidebar .menu {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar .menu li {
  margin-bottom: 1rem;
}

.sidebar .menu li:last-child {
  margin-bottom: 0;
}

.sidebar .menu li a {
  width: 40px;
  height: 40px;
  text-decoration: none;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.125rem;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent;
}

.sidebar .menu li a.active,
.sidebar .menu li a.router-link-active {
  color: var(--white);
  background-color: var(--coral);
}

.sidebar .menu li a:hover {
  border-color: var(--coral);
}

.sidebar .menu li a * {
  pointer-events: none;
}

.sidebar .menu li ul {
  position: absolute;
  left: 54px;
  background-color: var(--indigo);
  width: 220px;
  margin-top: -40px;
  -webkit-box-shadow:
    0px 8px 16px -2px rgba(0, 0, 0, 0.08),
    0px 4px 6px -1px rgba(0, 0, 0, 0.08);
  box-shadow:
    0px 8px 16px -2px rgba(0, 0, 0, 0.08),
    0px 4px 6px -1px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.sidebar .menu li ul.active {
  opacity: 1;
  visibility: visible;
}

.sidebar .menu li ul img {
  max-width: 40px;
}

.sidebar .menu li ul li {
  margin-bottom: 0;
}

.sidebar .menu li ul.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(110px, 1fr)) [auto-fit];
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.sidebar .menu li ul.grid li {
  width: 100%;
  height: 96px;
}

.sidebar .menu li ul.grid a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.sidebar .menu li ul.grid span {
  font-size: var(--paragraph-xs);
  display: block;
  margin-top: 8px;
  color: var(--white);
  opacity: 0.8;
}

.sidebar .menu li ul.list {
  padding: 8px 0px;
}

.sidebar .menu li ul.list li a {
  padding: 0px 1rem;
  width: 100%;
  height: 42px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  cursor: pointer;
}

.sidebar .menu li ul.list span {
  font-size: var(--paragraph-xs);
  color: var(--white);
}

.sidebar .menu li ul.list .icon {
  width: 20px;
  margin-right: 1rem;
}

.sidebar .footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.sidebar .footer .menu {
  height: auto;
}

.sidebar .footer .menu.ellipsis {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sidebar .footer .menu.ellipsis li ul {
  margin-top: -180px;
}

.sidebar .footer .menu.ellipsis li ul .avatar {
  width: 20px;
  height: 20px;
}

.sidebar .footer .menu.ellipsis li ul [data-count]::before {
  right: 1rem;
  top: auto;
}

@media screen and (min-height: 730px) {
  .sidebar .footer .menu.ellipsis {
    display: none;
  }
}

.sidebar .footer .menu.profile {
  display: none;
}

.sidebar .footer .menu.profile span {
  display: none;
}

@media screen and (min-height: 730px) {
  .sidebar .footer .menu.profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.sidebar .divider {
  background-color: var(--white);
  opacity: 0.3;
  margin: 1rem 0;
}

.dialog {
  position: fixed;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  background-color: rgba(34, 34, 37, 0.85);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}

.dialog-content {
  background-color: var(--bg-contrast);
  -webkit-box-shadow:
    0px 4px 8px rgba(0, 0, 0, 0.15),
    0px 16px 32px -4px rgba(0, 0, 0, 0.3);
  box-shadow:
    0px 4px 8px rgba(0, 0, 0, 0.15),
    0px 16px 32px -4px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  position: relative;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.dialog-content:not(.no-line):before {
  content: '';
  position: absolute;
  background-color: var(--coral);
  width: 80px;
  height: 8px;
  right: 0;
  top: -8px;
  z-index: -1;
}

.dialog-content.xxl {
  max-width: 980px;
}

.dialog-content.xl {
  max-width: 760px;
}

.dialog-content.xl2 {
  max-width: 840px;
}

.dialog-content.lg {
  max-width: 560px;
}

.dialog-content.md {
  max-width: 420px;
}

.dialog-content.sm {
  max-width: 240px;
}

.dialog-content-image {
  height: 180px;
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.dialog-content-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.dialog-content-body {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow-y: auto;
  background-color: var(--bg-default);
}

.dialog-content-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}

.dialog.active {
  opacity: 1;
  visibility: visible;
}

.dialog.active .dialog-content {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.dialog-user {
  background-color: transparent;
  width: auto;
  height: auto;
  bottom: 0;
  top: auto;
  left: 60px;
}

.dialog-user .dialog-content {
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  width: 100vw;
}

.dialog-user .dialog-content::before {
  left: 0;
}

.light-border .image-box:before {
  background-color: var(--text-light);
}

.oliva .image-box:before {
  background-color: var(--oliva);
}

.image-box {
  height: 180px;
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.image-box:before {
  content: '';
  position: absolute;
  background-color: var(--coral);
  width: 80px;
  height: 8px;
  left: 0;
  top: -8px;
}

.image-bottom-bar,
.image-top-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  z-index: 1;
}

.image-bottom-bar .flag,
.image-top-bar .flag {
  width: 32px;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--bg-contrast);
  font-size: 1rem;
}

.image-top-bar {
  top: 0;
}

.drawer {
  position: fixed;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  background-color: rgba(34, 34, 37, 0.85);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

.drawer-content {
  width: 100%;
  max-width: 560px;
  height: 100%;
  background-color: var(--bg-default);
  -webkit-box-shadow:
    0px 8px 16px -2px rgba(0, 0, 0, 0.08),
    0px 4px 6px -1px rgba(0, 0, 0, 0.08);
  box-shadow:
    0px 8px 16px -2px rgba(0, 0, 0, 0.08),
    0px 4px 6px -1px rgba(0, 0, 0, 0.08);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
}

.drawer-content.lg {
  max-width: 860px;
}

.drawer-content-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.drawer-content-header .btn-highlight {
  color: var(--white);
  background: rgba(0, 0, 0, 0.15);
}

.drawer-content-body {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.drawer-content-body>.row {
  height: 100%;
}

.drawer-content-footer {
  padding: 16px;
  gap: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.drawer.active {
  opacity: 1;
  visibility: visible;
}

.drawer.active .drawer-content {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--bg-highlight);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.avatar img:not([src]) {
  display: none;
}

.avatar.text-light:after {
  color: var(--text-light);
}

.avatar.square {
  border-radius: 0;
  width: 96px;
  height: 96px;
}

.avatar.square img {
  border-radius: 0;
}

.avatar.square.lg {
  width: 180px;
  height: 180px;
}

.avatar * {
  pointer-events: none;
}

.avatar:after {
  content: attr(data-initials);
  text-transform: uppercase;
  color: var(--white);
  font-size: 0.6875rem;
  letter-spacing: -0.02em;
}

.avatar.lg {
  width: 100px;
  height: 100px;
}

.avatar.lg em {
  font-size: 1.25rem;
  color: var(--text-light);
}

.avatar.lg:after {
  font-size: 1.25rem;
}

.avatar.md {
  width: 56px;
  height: 56px;
}

.avatar.md::after {
  font-size: 1.375rem;
}

.avatar.sm {
  width: 40px;
  height: 40px;
}

.avatar.xs {
  width: 32px;
  height: 32px;
}

.avatar.xxs {
  width: 28px;
  height: 28px;
}

.avatar.full {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.avatar.full:after {
  font-size: 2.25rem;
}

.avatar.full img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
}

.avatar.fs-200:after {
  font-size: 200%;
}

.avatar.with-border {
  border: 2px solid var(--bg-default);
}

.avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
}

.avatar img[src=''] {
  visibility: hidden;
}

.avatar.select {
  -webkit-box-shadow: 0 0 0 2px var(--coral-60);
  box-shadow: 0 0 0 2px var(--coral-60);
}

.avatar.select img {
  border: 2px solid var(--bg-default);
}

.avatar.plonge::after {
  content: '';
  background-image: url('/images/p.svg');
  background-color: #131321;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  position: absolute;
  width: 18px;
  height: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  right: 0;
}

.avatar.plonge-lg::after {
  width: 32px;
  height: 32px;
  border-radius: 0px;
}

.avatar-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.avatar-group .avatar {
  margin-left: -0.4rem;
}

.list {
  padding: 4px 0;
}

.list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 42px;
  text-decoration: none;
  gap: 1rem;
  padding: 8px 16px;
  color: var(--text-default);
  font-size: 0.75rem;
  position: relative;
}

.list-item-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 42px;
  text-decoration: none;
  gap: 1rem;
  padding: 8px 16px;
  color: var(--text-default);
  font-size: 0.75rem;
  position: relative;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0px;
}

.list-item .divider.v {
  height: 24px;
}

.list-item .paragraph {
  line-height: normal;
}

.list-item>em {
  color: var(--text-light);
  font-size: 1rem;
}

.list-item .icon:not(.btn) em {
  color: var(--text-placeholder);
  font-size: 0.75rem;
}

.list-item.conector::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 32px;
  bottom: -32px;
  border-right: 2px solid var(--info);
}

.list-item.conector:last-child::after {
  border-right-style: dashed;
}

.list a.list-item,
.list button.list-item,
.list .checkbox.list-item {
  cursor: pointer;
}

.list a.list-item:hover,
.list button.list-item:hover,
.list .checkbox.list-item:hover {
  background-color: var(--bg-highlight);
}

.list-flat .list-item {
  background-color: var(--bg-contrast);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.list-with-shadow .list-item {
  background-color: var(--bg-contrast);
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.list-with-shadow .list-item.hover-effect:hover,
.list-flat .list-item.hover-effect:hover {
  transform: scale(1.01);
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.08);
}

.list-with-divider .list-item {
  border-bottom: 1px solid var(--border);
}

.list-item.activity {
  color: var(--text-light);
  position: relative;
}

.list-item.activity.future .date,
.list-item.activity.future .icon {
  color: var(--success) !important;
}

.list-item.activity.future::before {
  background-color: var(--success);
}

.list-item.activity.late,
.list-item.activity.late .icon {
  color: var(--danger) !important;
}

.list-item.activity.late::before {
  background-color: var(--danger);
}

.list-item.activity::before {
  background-color: transparent;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  width: 5px;
}

.tooltip {
  position: absolute;
  background: var(--text-light);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  display: none;
  gap: 1rem;
  font-size: 0.75rem;
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 450;
  max-width: 290px;
  z-index: 10000;
}

@media only screen and (min-width: 769px) {
  .tooltip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.tooltip.top::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-light);
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -5px;
}

.tooltip.bottom::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--text-light);
  position: absolute;
  top: -4px;
  left: 50%;
  margin-left: -5px;
}

.tooltip.left::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--text-light);
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: -5px;
}

.tooltip.right::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--text-light);
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: -10px;
  left: auto;
}

.dropdown {
  position: absolute;
  width: 210px;
  background: var(--bg-default);
  border: 1px solid var(--border);
  -webkit-box-shadow:
    0px 8px 16px -2px rgba(0, 0, 0, 0.08),
    0px 4px 6px -1px rgba(0, 0, 0, 0.08);
  box-shadow:
    0px 8px 16px -2px rgba(0, 0, 0, 0.08),
    0px 4px 6px -1px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  z-index: 9999;
  max-height: 70vh;
  overflow: auto;
}

.dropdown.sm {
  width: 180px;
}

.dropdown.md {
  width: 320px;
}

.dropdown .list {
  max-height: 60vh;
  height: auto;
}

.snackbar {
  background-color: #131321;
  bottom: 20px;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  left: 10px;
  margin: 0px auto;
  max-width: 500px;
  padding: 1rem;
  position: absolute;
  right: 10px;
  z-index: 9999;
}

.snackbar button {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.snackbar em {
  color: #ffffff;
  font-size: 1.3em;
}

.snackbar .content {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.snackbar.info {
  background-color: #5489d9;
}

.snackbar.error {
  background-color: #ea2a00;
}

.snackbar.success {
  background-color: #13b379;
}

.snackbar.warn {
  background-color: #c2bb00;
  color: #131321;
}

.snackbar.warn em {
  color: #131321;
}

.vanilla-calendar-header {
  grid-area: header;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
}

.vanilla-calendar-header__content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.vanilla-calendar-arrow {
  position: relative;
  display: block;
  color: var(--text-light);
}

.vanilla-calendar-arrow::before {
  content: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5303 4.21967C15.8232 4.51256 15.8232 4.98744 15.5303 5.28033L8.81066 12L15.5303 18.7197C15.8232 19.0126 15.8232 19.4874 15.5303 19.7803C15.2374 20.0732 14.7626 20.0732 14.4697 19.7803L7.21967 12.5303C6.92678 12.2374 6.92678 11.7626 7.21967 11.4697L14.4697 4.21967C14.7626 3.92678 15.2374 3.92678 15.5303 4.21967Z" fill="currentColor"/></svg>');
}

.vanilla-calendar-arrow_next {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.vanilla-calendar-week {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr) [7];
  grid-template-columns: repeat(7, 1fr);
  grid-column-gap: 5px;
  -webkit-column-gap: 5px;
  column-gap: 5px;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 700;
  font-size: 12px;
  height: 40px;
  color: var(--text-default);
}

.vanilla-calendar-days {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr) [7];
  grid-template-columns: repeat(7, 1fr);
  grid-column-gap: 5px;
  -webkit-column-gap: 5px;
  column-gap: 5px;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-size: 12px;
}

.vanilla-calendar-day {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 600;
  margin-top: 2px;
  cursor: pointer;
}

.vanilla-calendar-day * {
  font-size: 13px !important;
}

.vanilla-calendar-day button {
  width: 100%;
  height: 100%;
  color: var(--text-default);
}

.vanilla-calendar-day__btn_disabled {
  cursor: default;
  background-color: transparent;
  pointer-events: none;
  font-weight: 400;
  color: var(--text-light) !important;
}

.vanilla-calendar-day__btn_selected {
  background-color: var(--coral);
  color: var(--white) !important;
  font-weight: 600;
}

.vanilla-calendar-day__btn_today {
  font-weight: 600;
  color: var(--coral) !important;
}

.vanilla-calendar-day__btn_prev,
.vanilla-calendar-day__btn_next {
  opacity: 0.5;
  color: var(--text-light) !important;
  font-weight: 400;
  background-color: transparent;
}

/*# sourceMappingURL=main.css.map */
.light-list {
  border-left: 4px solid var(--palette-mar-lavanda-100, #a8a7d0);
  background: var(--light-uibg-contrast, #fff);
  /* Light/List */
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.light-list.hover-effect:hover {
  transform: scale(1.01);
  /* Light/List */
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.08);
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-75 {
  opacity: 0.75;
}

.disabled-simple {
  opacity: 0.4;
}

.disabled-full {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.max-md {
  max-width: 680px;
}