@font-face {
  font-family: 'icons';
  src: url('/fonts/icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class*="icon-"]::before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




.icon-check:before { content: '\e800'}
.icon-location:before { content: '\e801'}
.icon-close:before { content: '\e802'}
.icon-hide:before { content: '\e803'}
.icon-warning:before { content: '\e804'}
.icon-headphones:before { content: '\e805'}
.icon-reveal:before { content: '\e806'}
.icon-tooltip:before { content: '\e807'}
.icon-msg-success:before { content: '\e808'}
.icon-msg-info:before { content: '\e809'}
.icon-msg-warning:before { content: '\e80a'}
.icon-msg-error:before { content: '\e80b'}
.icon-time:before { content: '\e80c'}
.icon-bookmark:before { content: '\e80d'}
.icon-to-top:before { content: '\e80e'}
.icon-calendar:before { content: '\e80f'}
.icon-contacts:before { content: '\e810'}
.icon-right-open:before { content: '\e811'}
.icon-down-open:before { content: '\e812'}
.icon-back:before { content: '\e813'}
.icon-enter:before { content: '\e814'}
.icon-qrcode:before { content: '\e815'}
.icon-lock:before { content: '\e816'}
.icon-unlock:before { content: '\e817'}
.icon-spin:before { content: '\e834'}

* {
  margin: 0;
  padding: 0;
}

a {
  color: var(--color-green);
  text-decoration: inherit;
}
a.link :hover {
  text-decoration: underline;
  font-style: italic;
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

button {
  all: unset;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
}

h1, h2, h3, h4, p, li, ol {
  margin-block: 0.8em;
  line-height: 1.5em;
}

hr {
  border-top: 1px solid var(--color-green);
  margin-bottom: 1rem;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: 300;
  padding: 0.2em;
}

input[readonly] {
  cursor: not-allowed;
  background-color: var(--color-grey-300);
  color: var(--color-grey-700);
  outline: none;
  opacity: 0.4;
  pointer-events: none;
}

select {
  width: 100%;
}

textarea {
  resize: vertical;
}

ul:not(.list), ol:not(.list) {
  list-style-type: none;
}

ul.list, ol.list {
  padding-left: 2em;
}

html {
  --margin-inline: Clamp(40px, 8vw, 200px);
  /* colors */
  --color-green: #25b216;
  --color-light-green: #e8f6e6;
  --color-dark-green: #197e0e;
  --color-black: #000;
  --color-white: #fff;
  --color-grey-700: #797979;
  --color-grey-500: #c6c6c6;
  --color-grey-300: #efefef;
  --color-red: #ec2024;
  --color-status-approved: var(--color-green);
  --color-status-rejected: #c60e0e;
  --color-status-pending: #ffc700;
  --color-status-payment: #600381;
  --color-primary: #007bff;
  --color-info: #17a2b8;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-warning-light: #ffe9b8;
  --color-danger: #dc3545;
  --dialog-background: #0000003b;
  /* box shadow */
  --box-shadow: 0px 5px 10px rgba(80, 80, 80, 0.05);
  /* font weight */
  --font-normal: 300;
  --font-bold: 500;
}
@media screen and (max-width: 480px) {
  html {
    --margin-inline: 1.5rem;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  html {
    --font-normal: 200;
    --font-bold: 400;
  }
}

.h1 {
  font-size: 4rem;
}
@media screen and (max-width: 768px) {
  .h1 {
    font-size: 2rem;
  }
}

.h2 {
  font-size: 2.5rem;
}
@media screen and (max-width: 768px) {
  .h2 {
    font-size: 1.5rem;
  }
}

.h3 {
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  .h3 {
    font-size: 1.25rem;
  }
}

.body-subtitle {
  font-size: 1.5rem;
}

.body {
  font-size: 1rem;
}

.body-small {
  font-size: 0.75rem;
}

.very-large-text {
  font-size: 3.75rem;
  text-transform: uppercase;
  margin-block: 0;
  line-height: 1.1em;
}
@media screen and (max-width: 480px) {
  .very-large-text {
    font-size: 2.5rem;
    text-align: center;
  }
}

.link-text {
  cursor: pointer;
  text-decoration: underline;
}

.colored-text {
  color: var(--color-green);
}

.bold {
  font-weight: var(--font-bold);
}

.display-contents {
  display: contents;
}

html {
  font-family: "Inter", sans-serif;
  font-weight: var(--font-normal);
  color: var(--color-black);
  font-size: 16px;
}

.scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb, var(--color-green));
}

.no-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tag {
  font-size: 0.75rem;
  color: var(--tag-color, white);
  background-color: var(--tag-bg, var(--color-green));
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 1rem;
}

.btn, .btn-large, .btn-medium, .btn-small {
  --btn-padding: 1em;
  padding: var(--btn-padding);
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  font-weight: var(--font-bold);
}
.btn-small {
  font-size: 0.75rem;
}
.btn-medium {
  font-size: 1rem;
}
.btn-large {
  font-size: 1.5rem;
}
.btn-default {
  background-color: var(--color-green);
  --btn-color: white;
  color: var(--btn-color);
  transition: background-color 0.2s;
}
.btn-default:hover {
  background-color: var(--color-dark-green);
}
.btn[class*=icon], [class*=icon].btn-small, [class*=icon].btn-medium, [class*=icon].btn-large {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 0.5rem;
}

.contents {
  display: contents;
}

.link {
  color: var(--color-green);
  text-align: center;
  cursor: pointer;
  transition: font-weight 0.1s;
}
.link:hover {
  font-weight: var(--font-bold);
}

@keyframes spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
.v-select {
  margin-block: 0.5rem 1.5rem;
  --vs-border-color: transparent;
  --vs-actions-padding: 4px 1rem 0 0;
  --vs-disabled-bg: var(--color-grey-300);
}

div.vs__dropdown-toggle { /* div because precedence issue*/
  background-color: white;
  height: 48px;
  border-radius: 1.5rem;
}

.vs__selected {
  margin: 0;
  padding-inline: 1rem;
}

.vs__clear {
  display: none;
}