/* #region Buttons */
.buttonex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--default-gap);
    padding: var(--default-padding) var(--large-padding);
    border-radius: var(--default-radius);
    margin-right: var(--default-margin);
    border: 1px solid var(--default-border-color);
    background-color: var(--button-back-color);
    cursor: pointer
}
.buttonex:last-child {
    margin-right: 0
}
.default-button {
    border-color: transparent;
    background: linear-gradient(135deg, var(--shade-back-color) 0, var(--dark-shade-back-color) 100%);
    box-shadow: 0 2px 4px var(--shade-back-color);
    transition: all .2s ease
}
.default-button:hover {
    border-color: var(--default-border-color);
    box-shadow: 0 4px 8px var(--dark-shade-back-color)
}
.action-button {
    background: linear-gradient(135deg, #de2127 0, #b91c1c 100%);
    color: #fff;
    border-color: transparent;
    transition: all .2s ease;
    box-shadow: 0 2px 4px rgba(222, 33, 39, .3)
}
.action-button:visited {
    color: var(--highlight-bg-text) !important
}
.action-button:hover {
    border-color: #de2127;
    box-shadow: 0 4px 8px rgba(222, 33, 39, .4)
}
.action-button:active {
    border-color: #de2127;
    box-shadow: 0 4px 8px rgba(222, 33, 39, .6)
}
.action-button>* {
    color: var(--highlight-bg-text) !important
}
.action-button>svg {
    stroke: var(--highlight-bg-text);
}
.tb-button {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin-right: var(--small-margin);
    border: none;
    background-color: transparent;
    position: relative;
    cursor: pointer
}

.tb-button:last-child {
    margin-right: 0
}

.tb-button:hover {
    background-color: var(--hover-bg-color)
}

.tb-button:active {
    background-color: var(--hover-bg-color-dark)
}

.tb-button>* {
    cursor: pointer
}

.tb-button:active>* {
    transform: translateY(1px) translateX(1px)
}

.tb-button.small {
    padding: var(--small-padding);
    border-radius: var(--small-radius)
}

.tb-button.large {
    padding: var(--large-padding);
    border-radius: var(--default-radius)
}

.tb-button.rounded-border-full {
    padding: var(--default-padding) var(--small-padding) !important
}

.tb-button:disabled:hover {
    background-color: transparent
}

.tb-button:disabled:active>* {
    transform: translateY(0) translateX(0)
}

.tb-button:disabled>svg {
    stroke: var(--shade-back-color)
}

.tb-button.lowlight {
    background-color: var(--default-background-color)
}
.tb-button.disabled:active {
    pointer-events: none !important;
    box-shadow: none !important;
    background: 0 0 !important
}

.tb-button.disabled:hover {
    cursor: default !important;
    background: 0 0 !important
}
@media only screen and (max-width:768px) {
    svg.icon, svg {
        transform: scale(120%);
        stroke-width: 1.5px;
        stroke: var(--normal-svg-stroke)
    }
    .tb-button {
        padding: var(--default-padding) !important
    }
}
/* #endregion */