/* Style the buttons */
.ButtonDefault {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: rgb(255, 255, 255);
    border: 1px solid rgb(217, 217, 217);
    border-radius: var(--size-07);

    font-size: var(--font-size-button);
    font-weight: 600;
    text-align: center;

    padding-top: var(--size-07);
    padding-bottom: var(--size-07);
    padding-left: var(--size-17);
    padding-right: var(--size-17);

    transition: 0.4s;
}

@media screen and (max-width: 650px){
    .ButtonDefault {
        padding-top: var(--size-04);
        padding-bottom: var(--size-04);
        padding-left: var(--size-07);
        padding-right: var(--size-07);
    }
}

    .ButtonDefault:hover {
        transition: 0.2s;
        background: rgb(245, 245, 245);
        color: rgb(57, 57, 57);
    }

    .ButtonDefault > img {
        width: 100%;
        height: auto;
        min-width: var(--icon-button-size);
        max-width: var(--icon-button-size);

        margin-right: var(--size-04);
    }

.ButtonActive {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: rgb(57, 57, 57);
    border: unset;
    border-radius: var(--size-07);

    color: rgb(245, 245, 245);
    font-size: var(--font-size-button);
    font-weight: 600;
    text-align: center;

    padding-top: var(--size-07);
    padding-bottom: var(--size-07);
    padding-left: var(--size-17);
    padding-right: var(--size-17);

    transition: 0.4s;
}

@media screen and (max-width: 650px){
    .ButtonActive {
        padding-top: var(--size-04);
        padding-bottom: var(--size-04);
        padding-left: var(--size-07);
        padding-right: var(--size-07);
    }
}

    .ButtonActive:hover {
        transition: 0.2s;
        color: rgb(245, 245, 245);
        background: rgb(37, 37, 37);
    }

    .ButtonActive > img {
        width: 100%;
        height: auto;
        min-width: var(--icon-button-size);
        max-width: var(--icon-button-size);

        margin-right: var(--size-04);
    }

.ButtonInput {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    background: rgb(245, 245, 245);
    border: unset;
    border-radius: var(--size-07);

    padding-top: var(--size-07);
    padding-bottom: var(--size-07);
    padding-left: var(--size-17);
    padding-right: var(--size-07);

    transition: 0.4s;
}

    .ButtonInput:hover {
        transition: 0.2s;
        background: rgb(235, 235, 235);
    }

    .ButtonInput > span {
        color: rgb(127, 127, 127);
        font-size: var(--font-size-button);
        text-align: left;

        margin-right: var(--size-07);

        transition: 0.4s;
    }

        .ButtonInput:hover > span {
            transition: 0.2s;
            color: rgb(97, 97, 97);
        }

    .ButtonInput > input {
        background: unset;
        border: unset;
        border-radius: unset;
        
        color: rgb(127, 127, 127);
        font-size: var(--font-size-button);

        width: 100%;
        min-width: unset;

        padding: unset;
        margin-right: var(--size-07);

        box-sizing: border-box;
    }

        .ButtonInput > input:hover {
            background: unset;
        }

        .ButtonInput > input:hover,
        .ButtonInput > input:focus {
            color: rgb(57, 57, 57);
        }

    .ButtonInput > img {
        width: 100%;
        height: auto;
        min-width: var(--icon-button-size);
        max-width: var(--icon-button-size);

        opacity: 0.7;
        transition: 0.4s;
    }

        .ButtonInput:hover > img {
            transition: 0.2s;
            opacity: 1.0;
        }

.ButtonContext {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: rgb(255, 255, 255);
    border: 1px solid rgb(217, 217, 217);
    border-radius: var(--size-07);

    font-size: var(--font-size-button-context);

    min-width: var(--size-17);
    min-height: var(--size-17);

    padding: var(--size-03);

    transition: 0.4s;
}

    .ButtonContext:hover {
        transition: 0.2s;
        background: rgb(245, 245, 245);
    }

    .ButtonContext > img {
        width: 100%;
        height: auto;
        min-width: var(--icon-button-size);
        max-width: var(--icon-button-size);
    }

.ButtonNulled {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: unset;
    border: unset;
    border-radius: unset;

    font-size: var(--font-size-button-context);

    padding: unset;
    margin: unset;
}

    .ButtonNulled:hover {
        background: unset;
    }

    .ButtonNulled > img {
        width: 100%;
        height: auto;
        min-width: var(--icon-button-size-options);
        max-width: var(--icon-button-size-options);

        opacity: 0.7;
        transition: 0.4s;
    }

        .ButtonNulled:hover > img {
            transition: 0.2s;
            opacity: 1.0;
        }

.ButtonFunction {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: unset;
    border: unset;
    border-radius: unset;

    font-size: var(--font-size-button-context);

    padding: unset;
    margin: unset;
}

    .ButtonFunction:hover {
        background: unset;
    }

    .ButtonFunction > img {
        width: 100%;
        height: auto;
        min-width: var(--icon-button-size);
        max-width: var(--icon-button-size);

        opacity: 0.7;
        transition: 0.4s;
    }

        .ButtonFunction:hover > img {
            transition: 0.2s;
            opacity: 1.0;
        }

.ButtonMessage {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: rgb(57, 57, 57);
    border: unset;
    border-radius: 100%;

    padding: var(--size-07);
    margin: unset;

    transition: 0.4s;
}

    .ButtonMessage:hover {
        transition: 0.2s;
        background: rgb(37, 37, 37);
    }

    .ButtonMessage > img {
        width: 100%;
        height: auto;
        max-width: var(--icon-button-size-options);
    }

.ButtonTabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgba(250, 250, 250);
    border: 1px solid rgba(237, 237, 237);
    border-radius: var(--size-07);

    font-weight: 500;
    text-align: center;

    padding-top: var(--size-04);
    padding-bottom: var(--size-04);
    padding-left: var(--size-07);
    padding-right: var(--size-07);

    transition: 0.4s;
}

    .ButtonTabs:hover {
        transition: 0.2s;
        background: rgba(57, 127, 237, 0.1);
        border: 1px solid rgba(57, 127, 237, 0.2);
    }

    .ButtonTabs > img {
        width: 100%;
        height: auto;
        min-width: var(--icon-button-size-options);
        max-width: var(--icon-button-size-options);

        opacity: 0.7;
        transition: 0.4s;
    }

        .ButtonTabs:hover > img {
            transition: 0.2s;
            opacity: 1.0;
        }

.ButtonTabsActive {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgba(57, 127, 237, 0.1);
    border: 1px solid rgba(57, 127, 237, 0.3);
    border-radius: var(--size-07);

    font-weight: 500;
    text-align: center;

    padding-top: var(--size-04);
    padding-bottom: var(--size-04);
    padding-left: var(--size-07);
    padding-right: var(--size-07);

    transition: 0.4s;
}

    .ButtonTabsActive:hover {
        transition: 0.2s;
        background: rgba(57, 127, 237, 0.2);
        border: 1px solid rgba(57, 127, 237, 0.4);
    }

    .ButtonTabsActive > img {
        width: 100%;
        height: auto;
        min-width: var(--icon-button-size-options);
        max-width: var(--icon-button-size-options);

        opacity: 0.7;
        transition: 0.4s;
    }

        .ButtonTabsActive:hover > img {
            transition: 0.2s;
            opacity: 1.0;
        }