.upload_file_box button,
button.btn-default,
.tingle-btn,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    --btn-color-main            : #A56734;

    --btn-color-bg              : var(--btn-color-main);
    --btn-color-bg-hover        : color-mix(in srgb, var(--btn-color-main) 88%, white);
    --btn-color-bg-active       : color-mix(in srgb, var(--btn-color-main) 84%, black);

    --btn-color-border          : color-mix(in srgb, var(--btn-color-main) 86%, black);
    --btn-color-border-hover    : color-mix(in srgb, var(--btn-color-main) 76%, black);
    --btn-color-border-active   : color-mix(in srgb, var(--btn-color-main) 66%, black);

    --btn-color-focus-ring      : color-mix(in srgb, var(--btn-color-main) 35%, transparent);

    --btn-color-text            : #FFFFFF;

    --btn-color-disabled-bg     : #A99D94;
    --btn-color-disabled-border : #9A8F87;
    --btn-color-disabled-text   : rgba(255, 255, 255, 0.68);
}

.upload_file_box button,
button.btn-default,
.tingle-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 7px;

    min-width       : 76px;
    height          : 32px;
    margin          : 0 5px;
    padding         : 0 14px;

    border          : 1px solid var(--btn-color-border);
    border-radius   : 5px;

    background      : var(--btn-color-bg);
    color           : var(--btn-color-text);

    cursor          : pointer;
    user-select     : none;

    line-height     : 1;

    box-shadow      : none;
    transform       : none;

    transition      : background-color 0.16s ease,
                      border-color 0.16s ease,
                      color 0.16s ease,
                      box-shadow 0.16s ease,
                      opacity 0.16s ease;
}

/* Hover */
.upload_file_box button:not(:disabled):hover,
button.btn-default:not(:disabled):hover,
.tingle-btn:not(:disabled):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover {
    background   : var(--btn-color-bg-hover);
    border-color : var(--btn-color-border-hover);
}

/* Focus - alapból ne legyen zavaró outline */
.upload_file_box button:focus,
button.btn-default:focus,
.tingle-btn:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    outline : none;
}

/* Focus csak billentyűzetes navigációnál */
.upload_file_box button:not(:disabled):focus-visible,
button.btn-default:not(:disabled):focus-visible,
.tingle-btn:not(:disabled):focus-visible,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):focus-visible {
    outline    : none;
    box-shadow : 0 0 0 3px var(--btn-color-focus-ring);
}

/* Active legyen erősebb, mint a hover/focus */
.upload_file_box button:not(:disabled):active,
button.btn-default:not(:disabled):active,
.tingle-btn:not(:disabled):active,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):active {
    background   : var(--btn-color-bg-active);
    border-color : var(--btn-color-border-active);
    box-shadow   : none;
}

/* Disabled */
.upload_file_box button:disabled,
button.btn-default:disabled,
.tingle-btn:disabled {
    background   : var(--btn-color-disabled-bg);
    border-color : var(--btn-color-disabled-border);
    color        : var(--btn-color-disabled-text);

    cursor       : not-allowed;
    opacity      : 0.75;

    box-shadow   : none;
    transform    : none;
}

button.btn-secondary {
    --btn-color-main : #796E66;
}

/* ===================================================================================================================== LOADER */
button .button_loader {
    position        : absolute;

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

    background      : #A56734;

    top             : 0;
    right           : 0;
    bottom          : 0;
    left            : 0;
}

/* ===================================================================================================================== TINGLE DIALOG */
.tingle-btn {}

.dialog_1 .tingle-btn,
.dialog_2 .tingle-btn,
.dialog_3 .tingle-btn,
.dialog_5 .tingle-btn,
.dialog_6 .tingle-btn {}

.dialog_4 .tingle-btn {
    border             : none;
    box-shadow         : none;
    -webkit-box-shadow : none;
    background         : none;
    margin-bottom      : 10px;
    padding            : 0 10px;
    height             : auto;
    font-size          : inherit;
}

.dialog_4 .tingle-btn:focus {
    box-shadow  : none;
    text-shadow : 0 0 5px #000000,
    0 0 5px #000000,
    0 0 5px #000000,
    0 0 5px #000000;
}

.dialog_4 .tingle-btn:hover {
    background  : none;
    color       : #A56734;
    text-shadow : 0 0 5px #FFFFFF,
                  0 0 5px #FFFFFF,
                  0 0 5px #FFFFFF,
                  0 0 5px #FFFFFF,
                  0 0 5px #FFFFFF;
}

.tingle-btn--pull-left {
     float : left;
 }

.tingle-btn--pull-right {
    float : right;
}

.tingle-btn--danger {
    --btn-color-main : #A52A2A;
}

.tingle-btn--primary {
    /*--btn-color-main : #3498DB;*/
}

.tingle-btn--default {
    /*--btn-color-main : #34495E;*/
}

/* ===================================================================================================================== COUNTER */
.counter_button .next_send {
    display : none;
}

.counter_button.sent .first_send {
    display : none;
}

.counter_button.sent .next_send {
    display : block;
}

/* ===================================================================================================================== DELETE CONFIRM */
.delete_confirm_box {
    --closed-width : 32px;
    --open-width   : 130px;

    display         : inline-flex;
    align-items     : center;
    justify-content : flex-end;

    width           : var(--closed-width);
    height          : 40px;
    overflow        : hidden;

    position        : absolute;
    bottom          : 0;
    right           : 3px;

    transition      : width 0.25s ease;
}

.delete_confirm_box.confirm {
    width : var(--open-width);
}

.delete_confirm_box .toggle_icon {
    width       : var(--closed-width);
    text-align  : center;
    transition  : opacity 0.2s ease, transform 0.2s ease;
}

.delete_confirm_box .slide_button {
    position       : absolute;
    right          : 0;
    top            : 50%;

    transform      : translate(110%, -50%);
    opacity        : 0;
    pointer-events : none;

    transition     : transform 0.25s ease, opacity 0.2s ease;
}

.delete_confirm_box.confirm .toggle_icon {
    opacity        : 0;
    transform      : scale(0.8);
    pointer-events : none;
}

.delete_confirm_box.confirm .slide_button {
    transform      : translate(0, -50%);
    opacity        : 1;
    pointer-events : auto;
}

/* ===================================================================================================================== TOGGLE */
.view_toggle_container {
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : center;
    margin-bottom   : 25px;
}

.view-toggle {
    background            : #9A8E84;
    border                : 1px solid #796E66;
    border-radius         : 10px;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
    display               : inline-flex;
    overflow              : hidden;
    position              : relative;

    box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.25),
            inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}

.view-toggle button {
    align-items     : center;
    background      : none;
    border          : none;
    color           : #FFFFFF;
    cursor          : pointer;
    display         : inline-flex;
    font-weight     : 500;
    gap             : 5px;
    justify-content : center;
    padding         : 10px 18px;
    position        : relative;
    transition      : color 0.3s;
    vertical-align  : middle;
    z-index         : 2;
}

.view-toggle button.active {
    color : #1E1E1E;
}

.view-toggle button:hover:not(.active) {
    color      : #1E1E1E;
    background : rgba(255, 255, 255, 0.05);
}

.view-toggle .slider {
    background            : linear-gradient(145deg, #fff 0%, #eaeaea 100%);
    border-radius         : 10px;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
    height                : 100%;
    left                  : 0;
    position              : absolute;
    top                   : 0;
    transition            : transform 0.3s ease, width 0.3s ease;
    z-index               : 1;
}

/* ===================================================================================================================== DATATABLES */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    --btn-color-main : #796E66;

    background       : var(--btn-color-bg);
    border           : 1px solid var(--btn-color-border);
    border-radius    : 5px;

    color            : var(--btn-color-text);

    cursor           : pointer;

    display          : inline-block;

    min-width        : 24px;
    margin           : 0 2px;
    padding          : 8px 16px;

    text-align       : center;
    text-decoration  : none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:active {
    --btn-color-main : #A56734;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background   : var(--btn-color-disabled-bg);
    border-color : var(--btn-color-disabled-border);
    color        : var(--btn-color-disabled-text);

    cursor       : not-allowed;
    opacity      : 0.75;

    box-shadow   : none;
    transform    : none;
}

/* ===================================================================================================================== MEDIA */
@media (max-width : 768px) {
    /* ===== dataTable ===== */
    .paginate_button.previous,
    .paginate_button.next {
        display : none !important;
    }
}