body {
    min-height: 100vh;
    margin: 0;
    background-color: var(--gc-bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    display: flex;
    flex-direction: column;
}

i svg {
    height: 1em;
}

.text-icon {
    vertical-align: middle;
    width: 1em;
    display: inline-flex;
    justify-content: center;
    color: var(--gc-grey);
}

.header-icon {
    vertical-align: middle;
    width: 1em;
    justify-content: center;
}

.circle-icon {
    align-self: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.table-icon {
    display: block;
    text-align: center;
    background-color: transparent !important;
}

.table-icon-a i svg {
    vertical-align: top !important;
}

.generic-container {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin: 0 auto 6em auto;
    text-align: center;
    width: 100%;
}

.lucky-btn {
    background-color: white;
    border-radius: 28px;
    border: 1px solid var(--gc-orange);
    cursor: pointer;
    color: var(--gc-orange);
    font-size: 17px;
    padding: 12px 31px;
    text-decoration: none;
}

.lucky-btn:hover {
    background-color: var(--gc-orange);
    color: white;
}

.ani-slide-down {
    animation: slideDown 0.4s linear;
}

.ani-slide-up {
    animation: close 0.3s linear;
}

.ani-rotate-180 {
    animation: rotate180 0.3s linear;
}

.ani-rotate-180r {
    animation: rotate180r 0.3s linear;
}

.progressbar {
    width: 80%;
    margin-bottom: 5px;
    height: 5px;
    accent-color: var(--gc-orange);
    -webkit-appearance: none;
    align-self: center;
}

.progressbar::-webkit-progress-bar {
    background-color: var(--gc-pie-bg);
}

.progressbar::-webkit-progress-value {
    background-color: var(--gc-orange);
}

.progressbar-percentage-value {
    color: var(--gc-font);
}

.hide {
    display: none !important;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.color-grey {
    color: var(--gc-text-secondary);
}

.color-red {
    color: var(--status-failed);
}