﻿/* Define variables */

:root {
    --jex-button-background-color: var(--jex-common-button-background-color);
    --jex-button-background-color-hover: var(--jex-common-button-background-color-hover);
    --jex-button-background-color-active: var(--jex-common-button-background-color-active);
    --jex-button-background-color-selected: var(--jex-common-button-background-color-selected);
    --jex-button-border-color: var(--jex-common-button-border-color);
    --jex-button-border-color-hover: var(--jex-common-button-border-color-hover);
    --jex-button-text-color: var(--jex-common-button-text-color);
    --jex-button-text-color-hover: var(--jex-common-button-text-color-hover);
}

/* Define styles */

.button_t0 {
    cursor: pointer;
    padding: 0em;
    margin-left: 1em;
    margin-right: 1em;
    width: 90%;
    min-width: 100px;
    max-width: 140px;
    height: 32px;
    font-size: 1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, sans-serif;
    font-weight: 700;
    color: var(--jex-button-text-color);
}

.button_t0 {
    background-color: var(--jex-button-background-color);
    border-style: solid;
    border-width: 0px;
    border-color: var(--jex-button-border-color);
}

    .button_t0:hover {
        transition-duration: 0.0s;
        transition-timing-function: linear;
        color: var(--jex-button-text-color-hover);
    }

    .button_t0:focus {
        outline: none;
        color: var(--jex-button-text-color-hover);
    }


.button_t1, .button_t2 {
    cursor: pointer;
    padding: 0em;
    width: 90%;
    min-width: 100px;
    max-width: 140px;
    height: 32px;
    font-size: 1em;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    color: var(--jex-button-text-color);
}

.button_t1 {
    background-color: var(--jex-button-background-color);
    border-width: 1px;
    border-color: var(--jex-button-border-color);
    border-style: solid;
}


.button_t2 {
    background-color: var(--jex-button-background-color);
    border-width: 0px;
    border-color: var(--jex-button-border-color);
    border-style: solid;
}

.button_t1:hover {
    transition-duration: 0.2s;
    transition-timing-function: linear;
    background-color: var(--jex-button-background-color-hover);
    border-width: 0px;
    color: var(--jex-button-text-color-hover);
}

.button_t2:hover {
    transition-duration: 0.2s;
    transition-timing-function: linear;
    background-color: var(--jex-button-background-color-hover);
    border-width: 0px;
    color: var(--jex-button-text-color-hover);
}

.button_t1:focus, .button_t2:focus {
    outline: none;
    background-color: var(--jex-button-background-color-hover);
    border-width: 0px;
    color: var(--jex-button-text-color-hover);
}