html, body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    background-color: #bababa;
    background-image: url('res/bigback.png');
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "NFont", "Arial", serif;
    font-weight: normal;
    letter-spacing: 0.1em;
}

td {
    margin: 0, 0, 0, 0;
    padding: 0, 0, 0, 0;
    width: 50%;
    height: 50%;
    float: top;
    white-space: nowrap;
    overflow: hidden;
}

tr {
    margin: 0, 0, 0, 0;
    padding: 0, 0, 0, 0;
}

a {
    color: #222222;
    size: 15px;
}

@font-face {
    font-family: 'NFont';
    src: url('res/7.ttf');
}

form {
    display: inline;
}

#NUM1 {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20pt;
    padding-left: 10px;
}

#NUM2 {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20pt;
    padding-left: 10px;
}

#NUM3 {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20pt;
    padding-left: 10px;
}

#WRAPPER {
    position: absolute;
    width: 98%;
    height: 90%;
    margin: 10px;
}

#HEADER {
    position: relative;
    height: 10px;
    width: 100%;
}

#LEFT {
    position: relative;
    width: 34%;
    height: 100%;
    float: left;
}

#BUTTONS {
    width: 30%;
    height: 30%;
    margin-left: 0;
    margin-top: 0px;
}

#CAN1 {
    float: left;
    width: 45%;
    height: 30%;
}

#CAN2 {
    margin-left: 45%;
    width: 45%;
    height: 30%;
}

#LEFTBOX {
    position: relative;
    height: 50%;
    border: 1px dotted black;
}

#RIGHTD {
    position: relative;
    width: 65%;
    height: 100%;
    float: right;
    background-image: url('res/smallback.png');
    background-repeat: repeat-x;
}

#FBL {
    position: relative;
    z-index: 4;
    margin-left: 35%;
    float: left;
    background-color: transparent;
    height: 26px;
    vertical-align: top;
}

#ACCOMPD {
    position: absolute;
    z-index: 3;
    top: 100%;
    margin-top: -4px;
    left: 35%;
    background-color: transparent;
    height: 10%;
    width: 65%;
    vertical-align: top;
}

#fbi {
    border: 0;
    background-color: #bababa;
    height: 26px;
    width: 50px;
}

/*
#MESSAGED {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 30%;
    z-index: 3;
    background-color: transparent;
    border: 0px transparent;
    display: block;
}

#picdialogue {
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: normal;
    text-align: left;
    height: 100%;
    width: 100%;
    padding: 10px, 10px, 10px, 10px;
}
*/

#NAVi {
    position: absolute;
    z-index: 4;
    bottom: 0%;
    margin-left: 0%;
    float: left;
    background-color: transparent;
    vertical-align: top;
}

#STATSD {
    position: absolute;
    visibility: hidden;
    top: 20%;
    left: 25%;
    width: 50%;
    height: 60%;
    z-index: -1;
    background-color: #222222;
    border: 0px transparent;
}

#OPTA1, #OPTA2, #OPTA3, #OPTA4, #OPTA5, #OPTA6, #OPTA7, #OPTA8, #OPTA9, #OPTA10, 
#OPTA11, #OPTA12, #OPTA13, #OPTA14, #OPTA15, #OPTA16, #OPTA17, #OPTA18, #OPTA19, 
#OPTA20, #OPTA21, #OPTA22, #OPTA23, #OPTA24 {
    z-index: 2;
}

#OPTB1, #OPTB2, #OPTB3, #OPTB4, #OPTB5, #OPTB6, #OPTB7, #OPTB8, #OPTB9, #OPTB10, 
#OPTB11, #OPTB12, #OPTB13, #OPTB14, #OPTB15, #OPTB16, #OPTB17, #OPTB18, #OPTB19, 
#OPTB20, #OPTB21, #OPTB22, #OPTB23, #OPTB24{
    z-index: -1;
}

#OPTC1, #OPTC2, #OPTC3, #OPTC4, #OPTC5, #OPTC6, #OPTC7, #OPTC8, #OPTC9, #OPTC10, 
#OPTC11, #OPTC12, #OPTC13, #OPTC14, #OPTC15, #OPTC16, #OPTC17, #OPTC18, #OPTC19, 
#OPTC20, #OPTC21, #OPTC22, #OPTC23, #OPTC24 {
    z-index: -1;
}

#OPTD1, #OPTD2, #OPTD3, #OPTD4, #OPTD5, #OPTD6, #OPTD7, #OPTD8, #OPTD9, #OPTD10, 
#OPTD11, #OPTD12, #OPTD13, #OPTD14, #OPTD15, #OPTD16, #OPTD17, #OPTD18, #OPTD19, 
#OPTD20, #OPTD21, #OPTD22, #OPTD23, #OPTD24 {
    z-index: -1;
} 

#OPTE1, #OPTE2, #OPTE3, #OPTE4, #OPTE5, #OPTE6, #OPTE7, #OPTE8, #OPTE9, #OPTE10, 
#OPTE11, #OPTE12, #OPTE13, #OPTE14, #OPTE15, #OPTE16, #OPTE17, #OPTE18, #OPTE19, 
#OPTE20, #OPTE21, #OPTE22, #OPTE23, #OPTE24 {
    z-index: -1;
}

.game-dialog {
    top: 5rem;
    background: transparent;
    border: 0;
    z-index: 100;
    margin: 0 auto;
    color: #fff;
    font-size: 1rem;
}

dialog.game-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.game-dialog--card {
    background: #222222;
    border: 3px solid #000000;
}

.game-dialog__header {
    /* Gradient from #505050 to #333333 back to #505050 */
    background: #505050;
    background: linear-gradient(180deg, #505050, #333333, #505050);
    color: #fff;
    padding: 2rem;
    font-size: 1rem;
    text-align: center;
    border-bottom: 1px solid #000000;
    font-family:"NFont", "Arial", serif;
    font-weight: normal;
}

.game-dialog__header form {
    display: inline;
}

.game-dialog__close-button {
    background: transparent;
    padding: 1rem;
    margin: -1rem;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.game-dialog__close-button img {
    width: 24px;
    height: 24px;
}

.game-dialog__content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.game-dialog__input {
    display: block;
    justify-self: center;
    padding: 0.5rem;
    margin: 0.5rem 0;
    font-size: 1rem;
    border: 1px solid #000000;
    background: #fff;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}

.primary-button {
    background-color: #4CAF50;
    background: linear-gradient(180deg, #4CAF50, #2b652d);
    border-radius: 30px / 50%;
    color: #fff;
    border: 2px solid #fff;
    text-transform: uppercase;
    font-weight: bolder;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

.primary-button:hover {
    background: linear-gradient(180deg, #3d8c3f, #1f4921);
}

.primary-button:active {
    background: linear-gradient(180deg, #2b652d, #4CAF50);
}

#auth-frame-container {
    width: 100%;
    height: 100%;
    width: 740px;
    height: 500px;
}

#auth-frame-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.5rem;
    color: #666;
    font-weight: bolder;
}

/*
|---------------------------------------------------
| Helper Classes (Inspired by Tailwind CSS)
|---------------------------------------------------
|
| Add more classes as needed.
|
*/

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.justify-center { justify-content: center; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.text-xs { font-size: 0.75rem; }

.text-left { text-align: left; }
.text-center { text-align: center; }

.w-full { width: 100%; }