@font-face {
    font-family: 'poppins';
    src: url('../fonts/poppins-light.woff2') format('woff2'),
        url('../fonts/poppins-light.woff') format('woff'),
        url('../fonts/poppins-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'poppins';
    src: url('../fonts/poppins-regular.woff2') format('woff2'),
        url('../fonts/poppins-regular.woff') format('woff'),
        url('../fonts/poppins-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'poppins';
    src: url('../fonts/poppins-medium.woff2') format('woff2'),
        url('../fonts/poppins-medium.woff') format('woff'),
        url('../fonts/poppins-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'poppins';
    src: url('../fonts/poppins-semibold.woff') format('woff2'),
        url('../fonts/poppins-semibold.woff') format('woff'),
        url('../fonts/poppins-semibolditalic.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'poppins';
    src: url('../fonts/poppins-bold.woff2') format('woff2'),
        url('../fonts/poppins-bold.woff') format('woff'),
        url('../fonts/poppins-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --primaryColor: #5BBE0E;
    --primary-color-light: #CCEBB4;
    --white: #FFF;
    --gray: #b8bbc2;
    --danger-extralight: #FFB7B7;
    --danger-light: #EB5454;
    --danger: #FE1717;
    --space: 10px;
}

html {
    box-sizing: border-box;
    color: var(--white);
    font-family: "poppins", sans-serif;
    font-size: 10px;
    font-weight: 300;
    line-height: 1.5;
    scroll-behavior: smooth;
}

*,
::before,
::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
}

/* For browsers that support `scrollbar-*` properties */
@supports (scrollbar-color: auto) {
    body {
        scrollbar-color: var(--primaryColor) #FFF;
        scrollbar-width: thin;
    }
}

/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
        width: 2px;
        height: 4px;
        background: #FFF;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--primaryColor);
    }

    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px #ddd;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--primaryColor);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #a5aaad;
    }
}

h1 {
    font-weight: 700;
}

h2 {
    font-weight: 600;
}

a {
    display: inline-block;
    color: #000;
    text-decoration: none;
    font-weight: 400;
}

ul {
    list-style: none;
}

form {
    width: 100%;
    max-width: 740px;
    height: auto;
    padding: 1rem;
}

.form-message-wrapper {
    height: auto;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: .5rem;
    color: var(--white);
    position: relative;
}

.form-message-wrapper.success-message {
    background-color: var(--primaryColor);
}

.form-message-wrapper.error-message {
    background-color: var(--danger);
}

.form-message-wrapper .close-button {
    position: absolute;
    top: .5rem;
    right: 1rem;
}

button,
label,
input,
select,
progress,
meter {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 5px;
    border: 1px solid #b8bbc2;
    border-radius: .5rem;
    font-family: inherit;
    font-size: 100%;
}

input {
    height: 40px;
    padding: 10px;
}

button {
    width: 60%;
    height: 40px;
    padding: 1rem;
    border: none;
    border-radius: 5px;
    background-color: #FFF;
    color: #000;
    cursor: pointer;
}

button.reset {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.btn-primary {
    width: 100%;
    padding: 10px 35px;
    border-radius: 5px;
    background-color: var(--primaryColor);
    color: #FFF;
    font-size: 1.6rem;
}

.btn-secondary {
    color: var(--primaryColor);
    background: none;
    border: 2px solid var(--primaryColor);
    border-radius: 5px;
    padding: 10px 35px;
}

button.icon-only {
    transition: all .3s ease-out;
}

button.icon-only:hover {
    transform: scale(1.1);
}

button.close-button:hover svg path {
    fill: var(--danger);
    transition: all .3s ease-out;
}

/* input[type="radio"], */
input[type="checkbox"],
input[type="search"],
select {
    appearance: none;
}

input[type="radio"]::before {
    content: '';
    width: 9px;
    height: 9px;
    background-color: var(--primaryColor);
    display: block;
    border-radius: 50%;
    transform: translate(1px, 1px) scale(0);
    transition: transform .2s ease-in;
}

input[type="radio"]:checked::before {
    transform: translate(1px, 1px) scale(1);
}

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    width: 15px;
    height: 15px;
}

input[type="radio"] {
    appearance: none;
    padding: 0;
    border: 2px solid gray;
    border-radius: 50%;
}

input[type="checkbox"] {
    padding: 0;
    vertical-align: middle;
    position: relative;
    /* Adjusts the position of the checkboxes on the text baseline */
    vertical-align: -2px;
    /* Set here so that Windows' High-Contrast Mode can override */
    color: green;
}
  
input[type="checkbox"]::before {
    content: "✔";
    position: absolute;
    font-size: 2rem;
    right: -3px;
    top: -6px;
    visibility: hidden;
}

input[type="checkbox"]:checked::before {
    /* Use `visibility` instead of `display` to avoid recalculating layout */
    visibility: visible;
}
  
input[type="checkbox"]:disabled {
    border-color: black;
    background: #ddd;
    color: gray;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="file"] {
    height: 0;
    padding: 0;
    opacity: 0;
}

label {
    border: none;
}

label[for="file"] {
    box-shadow: 1px 1px 3px #ccc;
    background: linear-gradient(to bottom, #eee, #ccc);
    border: 1px solid rgb(169, 169, 169);
    border-radius: 5px;
    text-align: center;
    line-height: 1.5;
}

label[for="file"]:hover {
    background: linear-gradient(to bottom, #fff, #ddd);
}

label[for="file"]:active {
    box-shadow: inset 1px 1px 3px #ccc;
}

textarea {
    display: block;
    overflow: auto;
    font-family: inherit;
}

input:focus,
textarea:focus {
    border-radius: 5px;
    background: rgb(0, 0, 0 / 10%);
}

/* input:required { */
/*   border: 1px solid black; */
/* } */

/* input:optional { */
/*   border: 1px solid silver; */
/* } */

input[type="text"]:disabled {
    background: #eee;
    border: 1px solid #ccc;
}

input.error,
input[type="radio"].error,
input[type="checkbox"].error,
select.error,
textarea.error {
    border: 2px solid #FE1717;
}

.disabled-label {
    color: #aaa;
}

a[href=""],
:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.user .avatar {
    display: inline-block;
    vertical-align: middle;
}

.user .avatar {
    flex: 0 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    border-radius: 50%;
    background-color: #FFDBB8;
}

.user .avatar img {
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
}

.user .username {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    line-height: 1;
}

/* input:read-only, */
/* textarea:read-only { */
/*   border: 0; */
/*   box-shadow: none; */
/*   background-color: white; */
/* } */

/* textarea:read-write { */
/*   box-shadow: inset 1px 1px 3px #ccc; */
/*   border-radius: 5px; */
/* } */

.hidden {
    display: none;
}

.sr-only:not(:focus):not(:active),
.sr-only.always {
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

.column-gap>*+* {
    margin-right: 10px;
}

.row-gap>*+* {
    margin-bottom: 30px;
}

.space-x {
    margin-left: 20px;
}

.space-x-xl {
    margin-left: 40px;
}

.space-y-sm {
    margin-top: 10px;
}

.space-y {
    margin-top: 20px;
}

.space-y-xl {
    margin-top: 40px;
}

.error:not(input, select, textarea),
.message.error {
    color: #FE1717;
}

.full-width {
    width: 100%;
}

.full-size {
    width: 100%;
    height: 100%;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rounded {
    border-radius: 50%;
}

.asterix {
    color: #FE1717;
}

.close-button {
    width: 40px;
    height: 40px;
}

.close-button svg {
    width: 20px;
    height: 20px;
}

.close-button svg.sm {
    width: 15px;
    height: 15px;
}

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

td,
th {
    padding: 2rem 1rem;
}

th {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: start;
    background-color: white;
    color: black;
}

table tr:nth-child(even) {
    background-color: #f2f2f2;
}

table tr:hover {
    background-color: #ddd;
}

/* Animations */
/* Ripple effect */
.ripple {
    background-position: center;
    transition: background 0.4s;
}

.ripple:hover {
    background: #4ca00b radial-gradient(circle, transparent 1%, #4ca00b 1%) center/15000%;
}

.ripple:active {
    background-color: var(--primaryColor);
    background-size: 100%;
    transition: background 0s;
}

.loader.spinner {
    position: relative;
}

.loader.spinner::before {
    content: '';
    display: inline-block;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--primaryColor) 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--primaryColor));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: spinner 1s infinite linear;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
}

button.loader.spinner::before {
    left: calc(50% + 40px);
}

button.loader.spinner.loader-only span,
button.loader.spinner.loader-only svg.icon {
    visibility: hidden;
}

button.loader.spinner.loader-only::before {
    top: calc(50% - 10px);
    left: calc(50% - 10px);
}

.btn-primary.loader.spinner::before {
    background: radial-gradient(farthest-side, var(--white) 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--white));
}

.form-field-wrapper.select.loader.spinner::before {
    left: auto;
    right: 40px;
    top: 10px;
}

.message.notification {
    min-width: 300px;
    max-width: 450px;
    padding: 20px;
    padding-right: 50px;
    border-radius: 10px;
    background-color: #CCEBB4;
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.16);
    position: absolute;
    /* Header height + space */
    top: 110px;
    right: 20px;
    transform: translateX(150%);
}

.message.notification.error {
    background-color: var(--danger-light);
    color: var(--white);
}

.message.notification.active {
    transform: translateX(0);
    transition: all .4s ease-in;
}

.message.notification button.close-button {
    width: 25px;
    height: 25px;
    background-color: var(--primaryColor);
    padding: 5px;
    position: absolute;
    top: 5px;
    right: 5px;
}

.message.notification button.close-button {
    width: 25px;
    height: 25px;
    background-color: var(--primaryColor);
    padding: 5px;
}

.message.notification.error button.close-button {
    background-color: var(--white);
}

.message.notification.error button.close-button svg path {
    fill: var(--danger);
}

@keyframes spinner {
    100% {
        transform: rotate(1turn)
    }
}

.sr-only {
    position: absolute;
    top: -2000em;
    left: -3000em;
}
  
.datepicker {
    margin-top: 1em;
    position: relative;
}
  
.datepicker .group {
    display: inline-block;
    width: 13em;
    position: relative;
}
  
.datepicker label {
    display: block;
}
  
.datepicker input {
    background-color: white;
    color: black;
}
  
.datepicker button.icon {
    margin: 0;
    padding: 4px;
    border: 0 solid #005a9c;
    border-radius: 5px;
    background-color: white;
    position: relative;
    top: 0.25em;
  }
  
.datepicker .desc {
    position: absolute;
    left: 0;
    top: 2em;
}
  
.datepicker button.icon:focus {
    outline: none;
    padding: 2px;
    border-width: 2px;
    background-color: #def;
  }
  
.datepicker-dialog {
    width: 320px;
    margin-top: 0.15em;
    padding: 0;
    border: 3px solid var(--primaryColor);
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    clear: both;
}
  
.datepicker-dialog .header {
    display: flex;
    justify-content: space-around;
    padding: 7px;
    background-color: var(--primaryColor);
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    cursor: default;
}
  
.datepicker-dialog h2 {
    margin: 0;
    padding: 0;
    display: inline-block;
    font-size: 1em;
    color: white;
    text-transform: none;
    font-weight: bold;
    border: none;
}
  
.datepicker-dialog button {
    border-style: none;
    background: transparent;
}
  
  .datepicker-dialog button::-moz-focus-inner {
    border: 0;
}
  
.datepicker-dialog .dates {
    width: 320px;
}
  
.datepicker-dialog .prev-year,
.datepicker-dialog .prev-month,
.datepicker-dialog .next-month,
.datepicker-dialog .next-year {
    padding: 4px;
    width: 24px;
    height: 24px;
    color: white;
  }
  
  .datepicker-dialog .prev-year:focus,
  .datepicker-dialog .prev-month:focus,
  .datepicker-dialog .next-month:focus,
  .datepicker-dialog .next-year:focus {
    padding: 2px;
    border: 2px solid white;
    border-radius: 4px;
    outline: 0;
  }
  
  .datepicker-dialog .prev-year:hover,
  .datepicker-dialog .prev-month:hover,
  .datepicker-dialog .next-month:hover,
  .datepicker-dialog .next-year:hover {
    padding: 3px;
    border: 1px solid white;
    border-radius: 4px;
  }
  
  .datepicker-dialog .dialog-ok-cancel-group {
    text-align: right;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
  }
  
  .datepicker-dialog .dialog-ok-cancel-group button {
    padding: 6px;
    margin-left: 1em;
    width: 5em;
    background-color: hsl(216deg 80% 92%);
    font-size: 0.85em;
    color: black;
    outline: none;
    border-radius: 5px;
  }
  
  .datepicker-dialog .dialog-button:focus {
    padding: 4px;
    border: 2px solid black;
  }
  
  .datepicker-dialog .dialog-button:hover {
    padding: 5px;
    border: 1px solid black;
  }
  
  
.datepicker-dialog .month-year {
    display: inline-block;
    width: 12em;
    text-align: center;
}
  
  .datepicker-dialog table.dates {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    border: none;
    border-collapse: separate;
  }
  
  .datepicker-dialog table.dates th,
  .datepicker-dialog table.dates td {
    text-align: center;
    background: white;
    color: black;
    border: none;
  }
  
  .datepicker-dialog table.dates tr {
    border: 1px solid black;
  }
  
  .datepicker-dialog table.dates td {
    padding: 3px;
    margin: 0;
    line-height: inherit;
    height: 40px;
    width: 40px;
    border-radius: 5px;
    font-size: 15px;
    background: #eee;
  }
  
  .datepicker-dialog table.dates td.disabled {
    padding: 2px;
    border: none;
    height: 41px;
    width: 41px;
  }
  
  .datepicker-dialog table.dates td:focus,
  .datepicker-dialog table.dates td:hover {
    padding: 0;
    background-color: var(--primary-color-light);
    color: black;
  }
  
  .datepicker-dialog table.dates td:focus {
    padding: 1px;
    border: 2px solid rgb(100 100 100);
    outline: 0;
  }
  
  .datepicker-dialog table.dates td:not(.disabled):hover {
    padding: 2px;
    border: 1px solid rgb(100 100 100);
  }
  
  .datepicker-dialog table.dates td[aria-selected] {
    padding: 1px;
    border: 2px dotted var(--primary-color-light);
  }
  
  .datepicker-dialog table.dates td[aria-selected]:focus {
    padding: 1px;
    border: 2px solid rgb(100 100 100);
  }
  
  .datepicker-dialog table.dates td[tabindex="0"] {
    background-color: var(--primaryColor);
    color: white;
  }
  
  .datepicker-dialog .dialog-message {
    padding-top: 0.25em;
    padding-left: 1em;
    height: 1.75em;
    background: hsl(216deg 80% 51%);
    color: white;
  }