
:root
{
    --light1: #272727;
    --light2: lightgray;
    --light3: #403d3d;
    --light4: white;
    --blue: #2177AD;
    --blueshade: #495b67;

    --borderColor: black;
}

Body
{
    font-family: Helvetica,Arial,sans-serif;
    font-size: 1.0em;
    color: white;
    background-color: black;
}

.content
{
    margin: 2px;
}

/* ----------------------- */
/* VDR FB */

.vdrContent {
    text-align: -webkit-center;
}

.vdrFbContainer
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 5px;
    width: 90%;
    max-width: 450px;
}

.vdrFbContainer > div
{
    overflow: hidden;
    width: 31%;
    margin: 2px;
}

.vdrButtonColorDiv
{
    width: 23% !important;
    height: 60px;
    margin: 2px;
}

.vdrButton
{
    border-radius: 15px;
    border-color: var(--borderColor);
    border-style: solid;
    background-color: var(--blueshade);
    color: var(--light4);
    text-decoration: none;
    font-size: 5.0vh;
    height: 100%;
    width: 100%;
    padding: 0px;
}

.vdrCommandButtonDiv {
    width: 90% !important;
    height: 60px;
}

.vdrCommandButton {
    font-size: xx-large;
}

.vdrButton:active {
    background-color: var(--blue);
    transform: translateY(2px);
}

.vdrButton:hover
{
    /* background-color: var(--blue); */
}

.vdrButtonRound
{
    border-radius: 100px;
}

.vdrArrowButton
{
    background-color: var(--light3);
}

.vdrArrowButtonUp    { border-radius: 100px 100px 15px 15px; }
.vdrArrowButtonDown   { border-radius: 15px 15px 100px 100px; }
.vdrArrowButtonLeft   { border-radius: 100px 15px 15px 100px; }
.vdrArrowButtonRight  { border-radius: 15px 100px 100px 15px; }

.vdrColorButtonRed    { background-color: red; }
.vdrColorButtonGreen  { background-color: green; }
.vdrColorButtonYellow { background-color: darkgoldenrod; }
.vdrColorButtonBlue   { background-color: darkblue; }
