html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

span {
    display: inline-block;
}

label, span {
    font-family: 'Roboto', sans-serif;
    color: var(--grey-2);
}

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

.centered-top-flexbox{
    display: flex;
    justify-content: center;
}

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

.vertical-top-flexbox{
    display: flex;
    flex-direction: column;
}

.vertical-top-centered-flexbox{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vertical-centered-flexbox{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.space-between-flexbox{
    display: flex;
    justify-content: space-between;
}

.available{
    width: 100%;
    -moz-available;
    -webkit-fill-available;
}.c-button-container{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
}

.c-button-label-container{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.c-button-icon{
    &.blue{
        color: var(--blue-3);
    }

    &.grey{
        color: var(--grey-2);
    }

    &.icon{
        font-size: 1.3rem;
    }
}

.c-button{
    font-size: 1rem;
    color: transparent;
    border: 0;
    background-color: transparent;
    border-radius: 10px;

    &.c-button-default{
        background-color: var(--blue-4);

        &:hover{
            background-color: var(--blue-3);
            cursor: pointer;
        }
    }

    &.c-button-default-disabled{
        background-color: var(--blue-4);
    }

    &.c-button-opposite{
        background-color: var(--grey-2);
        border: 1px solid #00666D;

        &:hover{
            background-color: var(--grey-1);
            cursor: pointer;
        }
    }

    &.c-button-opposite-disabled{
        background-color: var(--grey-2);
        border: 1px solid #00666D;
    }

    &.c-button-transparent{
        &:hover{
            cursor: pointer;
        }
    }

    &.c-button-transparent-disabled{}

    &.c-button-disabled-disabled{
        background-color: var(--grey-3);
    }

    &.c-button-icon{
        width: 25px;
        height: 25px;
        align-self: center;
    }

    &.c-button-small{
        width: 112px;
        height: 39px;
    }

    &.c-button-normal{
        width: 190px;
        height: 39px;
    }

    &.c-button-large{
        width: 268px;
        height: 39px;
    }

    &.c-button-small-thin{
        width: 112px;
        height: 26px;
    }

    &.c-button-normal-thin{
        width: 190px;
        height: 26px;
    }

    &.c-button-large-thin{
        width: 268px;
        height: 26px;
    }
}:root {
    --grey-1: #fff5fb;
    --grey-2: #e6dcdf;
    --grey-3: #7f7679;
    --grey-4: #4d4548;
    --grey-5: #211a1c;

    --blue-1: #00faff;
    --blue-2: #00c7cc;
    --blue-3: #00959b;
    --blue-4: #00666d;
    --blue-5: #003a43;

    --red-1: #ffebee;
    --red-2: #ffcdd2;
    --red-3: #ef9a9a;
    --red-4: #e57373;
    --red-5: #ef5350;
    --red-6: #f44336;
    --red-7: #e53935;
    --red-8: #d32f2f;
    --red-9: #c62828;
    --red-10: #b71c1c;

    --purple-1: #F3E5F5;
    --purple-2: #E1BEE7;
    --purple-3: #CE93D8;
    --purple-4: #BA68C8;
    --purple-5: #AB47BC;
    --purple-6: #9C27B0;
    --purple-7: #8E24AA;
    --purple-8: #7B1FA2;
    --purple-9: #6A1B9A;
    --purple-10: #4A148C;

}a {
    color: var(--blue-2);
    text-decoration: none;

    &:visited {
     color: var(--purple-3);
    }
}

.output-text{
    font-family: 'Roboto', sans-serif;
    margin: 0;

    &.output-text-h1-large{
        font-size: 4rem;
    }
    &.output-text-h1-normal{
        font-size: 3rem;
    }
    &.output-text-h1-small{
        font-size: 2rem;
    }

    &.output-text-h2-large{
        font-size: 3rem;
    }
    &.output-text-h2-normal{
        font-size: 2rem;
    }
    &.output-text-h2-small{
        font-size: 1.5rem;
    }

    &.output-text-h3-large{
        font-size: 2rem;
    }
    &.output-text-h3-normal{
        font-size: 1.5rem;
    }
    &.output-text-h3-small{
        font-size: 1.25rem;
    }

    &.output-text-h4-large{
        font-size: 1.5rem;
    }
    &.output-text-h4-normal{
        font-size: 1.25rem;
    }
    &.output-text-h4-small{
        font-size: 1rem;
    }

    &.output-text-h5-large{
        font-size: 1.25rem;
    }
    &.output-text-h5-normal{
        font-size: 1rem;
    }
    &.output-text-h5-small{
        font-size: .875rem;
    }

    &.output-text-h6-large{
        font-size: 1rem;
    }
    &.output-text-h6-normal{
        font-size: .875rem;
    }
    &.output-text-h6-small{
        font-size: .75rem;
    }

    &.output-text-p-large{
        font-size: 1.125rem;
    }
    &.output-text-p-normal{
        font-size: 1rem;
    }
    &.output-text-p-small{
        font-size: .875rem;
    }

    &.output-text-grey{
        color: var(--grey-1);
    }
    &.output-text-blue{
        color: var(--blue-3);
    }
    &.output-text-red{
        color: var(--red-5);
    }
    &.output-text-disabled{
        color: var(--grey-3);
    }
}.google-button{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 20px;
    border: 0;

    &.google-button-default{
        color: var(--grey-2);
        background-color: var(--blue-4);

        &:hover{
            background-color: var(--blue-3);
            cursor: pointer;
        }
    }

    &.google-button-opposite{
        color: var(--blue-4);
        background-color: var(--grey-2);
        border: 1px solid #00666D;

        &:hover{
            background-color: var(--grey-1);
            cursor: pointer;
        }
    }

    &.google-button-disabled{
        color: var(--grey-2);
        background-color: var(--grey-3);
    }

    &.google-button-small{
        width: 112px;
        height: 39px;
    }

    &.google-button-normal{
        width: 190px;
        height: 39px;

        gap: 5px;
    }

    &.google-button-large{
        width: 268px;
        height: 39px;

        gap: 10px;
    }
}.input {
    position: relative;
    display: flex;
    flex-direction: column;
}

.input-label {
    position: absolute;
    display: flex;
    align-items: baseline;
    gap: 10px;
    transition: left 0.3s, top 0.3s, font-size 0.3s;
    top: 7px;
    left: 10px;
    cursor: text;
    pointer-events: none;
}

.input-label > i,label {
    font-size: 1.25em;
}

.label-container-focus{
    left: 13px !important;
    top: -10px !important;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.label-focus{
    font-size: 1em !important;
}

.label-ok{
    color: var(--blue-2) !important;
}

.label-error{
    color: var(--red-5) !important;
}

.input > input,select {
    border: 1px solid var(--grey-3);
    background-color: transparent;
    font-family: 'Roboto', sans-serif;
    color: var(--grey-2);
    border-radius: 5px;
    font-size: 1.25em;
    padding-left: 0.5em;
    height: 35px;
}

.input > input:hover,select:hover{
    border: 1px solid var(--grey-1);
}

.input > input {
    cursor: text;
}

.input > select > option:first-child{
    display: none;
}
.input > select > option {
    color: black;
}

.input-ok {
    outline: none;
    border: 1px solid var(--blue-2) !important;
}

.input-error {
    outline: none;
    border: 1px solid var(--red-5) !important;
}

.input-text-small{
    width: 112px;
    height: 37px;
}

.input-text-normal{
    width: 225px;
    height: 37px;
}

.input-text-large{
    width: 450px;
    height: 37px;
}

.select-one-small{
    width: 112px;
    height: 37px;
}

.select-one-normal{
    width: 225px;
    height: 37px;
}

.select-one-large{
    width: 450px;
    height: 37px;
}.c-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(77, 69, 72, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.c-modal-content {
    display: flex:
    flex-direction: column;
    background-color: var(--grey-5);
    padding: 1rem;
    border-radius: 10px;
    position: relative;
    width: fit-content;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.c-modal-close {
    float: right;
    font-size: 1.5rem;
}

.c-modal-button{
    float: right;
}.c-tooltip-wrapper {
    position: relative;
}

.c-tooltip-content {
    position: absolute;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 999;
    padding: 6px 10px;
}

.c-tooltip-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.c-tooltip-right {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 8px;
}

.c-tooltip-wrapper:hover .c-tooltip-content {
    opacity: 1;
    visibility: visible;
}