@charset "utf-8";
/* CSS Document */

:root {
    --regular-button-color: var(--btn-secondary, var(--df-btn-secondary));
    --tertiary-button-color: var(--btn-tertiary, var(--df-btn-tertiary));
    
    --regular-button-text-color: var(--header-fg, var(--df-header-fg));
    --regular-button-disabled-color: #666;
    --regular-button-disabled-text-color: #333;
    --grid-button-color: var(--highlight, var(--df-header-bg));

;
    --grid-button-color-hover: rgb(128,128,255);
    --grid-button-color-hover:white;
    --grid-button-color-off: #fefefe;
    --grid-button-shadow: rgba(128, 128, 128, 0.5);
    --border-color: #CCC;

}

button,
.rounded_frame,
.img_button,
.lnk_button,
input,
textarea,
select {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    padding: 5px;
    outline: none;
    text-decoration: none;
    min-width: 30px;
    cursor: pointer;
    font-family: "Nunito", sans-serif;
}

button {
    background-color: var(--regular-button-color);
    color: var(--regular-button-text-color);
    text-transform: uppercase;
}

button:disabled,
button[disabled] {
    background-color: var(--regular-button-disabled-color);
    color: var(--regular-button-disabled-text-color);
    cursor: none;
}

.buttons_section_container {
    padding: 0px 0px 0px 0px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.button_inner_container {
    padding: 0px 1px 0px 1px;
    text-decoration: none;
}

.button_inner_container {
    align-self: bottom
}

.header-button-pri {
    background-color: var(--btn-primary, var(--df-btn-primary));
    color: var(--regular-button-text-color);
}

.header-button-sec {
    background-color: var(--btn-secondary, var(--df-btn-secondary));
    color: var(--regular-button-text-color);
}

.header-button-ter {
    background-color: var(--btn-tertiary, var(--df-btn-tertiary));
    color: var(--regular-button-text-color);
}

.header-button {
    text-transform: uppercase;
    border: none;
    transition: color 0.3s ease;
    font-size: 0.8rem;
}

.header-button:hover {
    filter: brightness(85%);
}

.buttons_container {
    display: flex;
    background-color: var(--header-bg, var(--df-header-bg));

;
    align-items: center;
    justify-content: center;

}

/* ---------- */
/*   top menu    */
/* ---------- */

.top-menu-button {
    text-transform: uppercase;
    border: none;
    transition: color 0.3s ease;
    font-size: 0.8rem;
    background-color: var(--header-bg, var(--df-header-bg));
}

.top-menu-button:hover {
    filter: brightness(85%);
}

/* ---------- */
/*   grid    */
/* ---------- */

.grid_buttons_header {
    font-size: inherit;
}

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

.grid_buttons_inner_container {
    float: right;
}

.grid_button {
    color: var(--grid-button-color);
    margin-right: 5px;
}

.grid_button:hover {
    color: var(--grid-button-color-hover);
}


.grid_button_off {
    color: var(--grid-button-color-off);
    margin-right: 5px;
}

.grid_header_button {
    user-select: none;
    border: none;
    box-shadow: 2px 2px 3px 0px var(--grid-button-shadow);
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 1px 0 1px;
}

.grid_header_button :hover {
    -webkit-filter: brightness(70%);
    filter: brightness(70%);
}

.page-btn {
    background-color: var(--tertiary-button-color);
}

.page-btn-on {
    background-color: var(--tertiary-button-color);
}

.big_button {
    font-size: larger;
    font-size: 2 rem;
}

/* ---------- */
/*   form     */
/* ---------- */

.form-button-pri {
    background-color: var(--btn-primary, var(--df-btn-primary));
    color: var(--regular-button-text-color);
}

.form-button-sec {
    background-color: var(--btn-secondary, var(--df-btn-secondary));
    color: var(--regular-button-text-color);
}

.form-button-ter {
    background-color: var(--btn-tertiary, var(--df-btn-tertiary));
    color: var(--regular-button-text-color);
}