.hidden {
    display: none;
}

body {
    background-color: var(--main-bg-color) !important;
}

.app-button {
    border-radius: 4px;
    border: 1px solid var(--button-color);
    background-color: var(--button-color);
    color: var(--button-text-color);
}

.app-button:hover {
    background-color: var(--button-hover-color);
}

.app-text {
    color: var(--text-color);
}

.app-text-shadow {
    color: var(--text-color);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.app-link-white {
    color: var(--text-color);
}

.app-link-white:hover {
    color: var(--text-hover-color);
}

.app-link-blue {
    color: var(--text-color);
}

.app-link-blue:hover {
    color: var(--text-hover-blue-color);
}

.app-link-red {
    color: var(--text-color);
}

.app-link-red:hover {
    color: var(--text-hover-red-color);
}

.app-link-white-active {
    color: var(--text-hover-color) !important;
}

.app-link-blue-active {
    color: var(--text-hover-blue-color) !important;
}

.app-link-red-active {
    color: var(--text-hover-red-color) !important;
}

.app-input {
    font-size: 0.85rem;
    color: var(--text-color);
    background-color: var(--input-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
}

.app-input[readonly] {
    background-color: var(--input-color);
    opacity: 0.85;
    cursor: not-allowed;
}

.buttons-container,
.colors-container {
    display: flex;
    width: fit-content;
    border: 1px solid var(--color-button-color);
    margin-bottom: 12px;
}

.buttons-container {
    height: 28px;
}

.buttons-container > *,
.colors-container > * {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--color-button-color);
}

.buttons-container > *:last-child,
.colors-container > *:last-child {
    border-right: none;
}

.item-button,
.color-button {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 100%;
    display: block;
}

.color-button {
    padding: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

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

.color-button-active {
    border-color: var(--color-button-active-color);
}

.error-input {
    border-color: var(--input-error-color) !important;
    border-width: 1px !important;
}

.error-checkbox {
    outline: 1px solid var(--input-error-color) !important;
    outline-offset: 1px;
}