:root{
    
    --primary: #55FFFF;
    --secondary: #FF55FF;
    --tertiary: #5555FF;
    --quaternary: #FF5555;
    --quinary: #FFFF55;
    --senary: #555555;
    --septenary: #55FF55;
    --octonary: #00AA00;
    --nonary: #00AAAA;
    --denary: #AA0000;
    --undecimary: #AA00AA;
    --duodecimary: #AA5500;
    --tertiusdecimary: #0000AA;
    --quartadecimary: #AAAAAA;

    --app-black: #000000;
    --app-blue: #0d6efd;
    --app-indigo: #6610f2;
    --app-purple: #6f42c1;
    --app-pink: #d63384;
    --app-red: #dc3545;
    --app-orange: #fd7e14;
    --app-yellow: #ffc107;
    --app-green: #198754;
    --app-teal: #20c997;
    --app-cyan: #0dcaf0;
    --app-white: #ffffff;
    --app-gray: #6c757d;
    --app-gray-dark: #343a40;
    --app-gray-light: #adb5bd;
    --app-light: #f8f9fa;
    --app-dark: #212529;
    --app-transparent: #00000000;

    --font-default-size: 1vw;
    --font-normal: 1.2rem;
    
    --default-transition-duration: 0.25s;
    --default-transition-method: linear;
    --default-transition-target: all;
    --default-transition: var(--default-transition-target) var(--default-transition-duration) var(--default-transition-method);

    --sign-btn-size: 15vmin;

}

body {
    background-color: var(--app-white);
    color: var(--app-black);
    font-family: 'Roboto', sans-serif;
    height: 100%;
    margin: 0;
    max-height: 100%;
    min-height: 100%;
    padding: 0;
    overflow-x: hidden;
}

html {
    font-size: var(--font-default-size);
    height: 100%;
    margin: 0;
    max-height: 100%;
    min-height: 100%;
    padding: 0;
}

.content-area-game {
    padding: 2vmin;
    position: relative;
}

.content-bigbox {
    padding: 5vmin 20vmin 5vmin 20vmin;
}

.content-bigbox-body {
    max-height: 60vh;
    padding: 0 2vw 0 2vw;
    margin-bottom: 3vh;
    margin-top: 3vh;
}

.content-bigbox-btns {
    padding-bottom: 2vh;
    padding-top: 2vh;
    text-align: center;
}

.content-bigbox-card {
    background-color: var(--primary);
    color: var(--app-black);
    overflow: hidden;
    border-radius: 2vmin;
}

.content-bigbox-header {
    background-color: var(--nonary);
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.2vmin;
    padding-bottom: 1.5vmin;
    padding-top: 1.5vmin;
    text-align: center;
}

.content-btn {
    transition: var(--default-transition);
}

.content-btn-action {
    background-color: var(--nonary);
    color: var(--app-black);
    font-size: 1.25rem;
    font-weight: 600;
}

.content-btn-action:hover {
    background-color: var(--secondary);
    color: var(--app-white);
}

.content-btn-action-disabled {
    background-color: var(--nonary);
    color: var(--primary);
}

.content-btn-action-disabled:hover {
    background-color: var(--nonary);
    color: var(--app-gray);
}

.content-btn-bigbox {
    background-color: var(--nonary);
    color: var(--app-black);
    border-radius: 1vmin;
    margin-left: 4vh;
    margin-right: 4vh;
}

.content-btn-bigbox:hover {
    background-color: var(--app-black);
    color: var(--app-white);
}

.content-btn-sign {
    background-color: var(--nonary);
    border-radius: calc(0.5 * var(--sign-btn-size));
    color: var(--app-black);
    height: var(--sign-btn-size);
    margin: calc(-0.5 * var(--sign-btn-size));
    max-height: var(--sign-btn-size);
    max-width: var(--sign-btn-size);
    min-height: var(--sign-btn-size);
    min-width: var(--sign-btn-size);
    position: absolute;
    width: var(--sign-btn-size);
}

.content-btn-sign span {
    display: block;
    font-size: calc(0.45 * var(--sign-btn-size));
}

.content-form-sign-label {
    font-size: calc(0.15 * var(--sign-btn-size)) !important;
}

.content-form-sign-looser {
    background-color: var(--quaternary);
    color: var(--app-black);
}

.content-form-sign-looser:hover {
    background-color: var(--quaternary);
    color: var(--app-black);
}

.content-form-sign-selected {
    background-color: var(--app-black);
    color: var(--app-white);
}

.content-form-sign-selected:hover {
    background-color: var(--app-black);
    color: var(--app-white);
}

.content-form-sign-winner {
    background-color: var(--septenary);
    color: var(--app-black);
}

.content-form-sign-winner:hover {
    background-color: var(--septenary);
    color: var(--app-black);
}

.content-input-input input {
    background-color: var(--app-black);
    border: 0;
    border-radius: 1vmin;
    color: var(--primary);
    max-width: 100%;
    min-width: 100%;
    padding: 1vmin;
    transition: var(--default-transition);
    width: 100%;
}

.content-input-input input:focus {
    background-color: var(--secondary);
    color: var(--app-white);
}

.content-input-label {
    padding: 1vmin;
    text-align: right;
    vertical-align: center;
}

.content-input-row {
    padding-bottom: 2vh;
    padding-top: 2vh;
}

.content-line-helper {
    background-color: var(--app-transparent);
    height: 2px;
    margin: -1px;
    max-height: 2px;
    max-width: 2px;
    min-height: 2px;
    min-width: 2px;
    position: absolute;
    width: 2px;
}

.content-main-content {
    background-color: var(--primary);
}

.content-name {
    font-size: 1.5rem;
    padding-top: 1vmin;
}

.content-name span {
    color: var(--undecimary);
}

.content-page-top {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
}

.content-page-top-btn {
    border-radius: 1vmin;
    padding-bottom: 1vh;
    padding-top: 1vh;
}

.content-page-top-row {
    height: 10vh;
    max-height: 10vh;
    min-height: 10vh;
}

.content-value-results {
    color: var(--undecimary);
    padding-bottom: 1vmin;
}

.content-video {
    background-color: var(--nonary);
    height: 30vh;
    max-height: 30vh;
    min-height: 30vh;
}

.content-video video {
    max-height: 100%;
    max-width: 100%;
}

.rixel-cover {
    background-color: #00000080;
    height: 100%;
    left: 0;
    max-height: 100%;
    min-height: 100%;
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
    padding: 0;
    position: fixed;
    visibility: hidden;
    width: 100%;
    z-index: 200;
}

.rixel-cursor-default {
    cursor: default;
}

.rixel-disable-select {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.rixel-flip-horizontally {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.rixel-flip-vertically {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.rixel-full-height {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
}

.rixel-full-width {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.rixel-image-nest img {
    max-height: 100%;
    max-width: 100%;
}

.rixel-justify-text {
    text-align: justify;
}

.rixel-no-margin-and-padding {
    margin: 0;
    padding: 0;
}

.rixel-overflow-hidden {
    overflow: hidden;
}

.rixel-toast {
    background-color: #ffffff;
    border-radius: 0.5vmin;
    bottom: 5%;
    color: #000000;
    cursor: default;
    font-size: 0.5vmin;
    left: 50%;
    max-width: 33vw;
    min-width: 33vw;
    position: absolute;
    transform: translate(-50%, 0px);
    width: 33vw;
    z-index: 500;
}

.rixel-toast-body {
    font-size: 1vw;
    font-weight: 600;
    padding: 1vmin;
}