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

body {
    background-color: transparent;
}

button {
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Courier New", monospace;
    font-size: 1rem;
    max-width: 100%;
}

#cg {
    background-color: rgba(240,240,240, 1);
    font-family: "Courier New", monospace;
    font-size: 1rem;
    height: 100%;
}

#cg > div:first-child {
    background: repeating-linear-gradient(-45deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 5%, rgba(0,0,0,0) 10%);
}

.cg-state-wall-selecting {
    cursor: crosshair;
    filter: invert(100%);
}

#cg>div:first-child {
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

#cg>div:first-child>div:first-child {
    display: table-row;
    width: 100%;
}

#cg-header {
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 2rem;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.4), -1px -1px 1px rgba(0,0,0,0.4);
}

#cg-header-wrapper {
    overflow: hidden;
}

#cg-header-wrapper>h2:first-child {
    display: inline;
    padding-left: 1ch;
    padding-right: 0.5ch;
}

#cg-body-wrapper {
    display: table-row;
    width: 100%;
    height: 100%;
}

#cg-body-wrapper>div:first-child {
    width: 100%;
    height: 100%;
    position: relative;
}

#cg-body {
    font-size: 1rem;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;

    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    background: rgb(240, 240, 240);
    border-radius: 0.75rem;
    border-style: inset;
    border-color: rgba(240, 240, 240, 0.33);
    border-width: medium 0rem;
}

#cg-body-texture {
    width: 100%;
    height: 100%;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);
}

#cg-body-shade {
    width: 100%;
    height: 100%;
    text-align: center;
    background: radial-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.66), rgba(255,255,255,0.33));
}

#cg-main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.64rem;
}

#cg-main-initializer {
    display:table;
    width: 100%;
    height: 100%;
}

#cg-main-initializer>div:first-child {
    display:table-cell;
    vertical-align:middle;
}

#cg-main-initializer>div:first-child>div:first-child {
    margin-left:auto;
    margin-right:auto;
}

#cg-footer-wrapper {
    display: table-row;
    width: 100%;
}

#cg-footer {
    font-size: 1rem;
    width: 100%;
    height: 100%;
    min-height: 2.2rem;
    overflow: hidden;
    text-align: center;
}

#cg-footer > span:first-child {
    display: inline-block;
    width: 0%;
    height: 100%;
    min-height: 2.2rem;
    vertical-align: middle;
}

#cg-footer-status {
    display: inline-block;
    width: 33%;
    vertical-align: middle;
}

#cg-footer-status::after {
   content: attr(data-status);
   margin-left: 0.5rem;
}

#cg-footer-toolbar {
    display: inline-block;
    width: 34%;
    vertical-align: middle;
    padding-bottom: 0.2rem;
}

#cg-credits {
    display: inline-block;
    vertical-align: middle;
}

#cg-title-link {
    display: inline-block;
    vertical-align: bottom;
    font-size: 0.5rem;
    width: calc(100% - 5ch);
}

#cg-title-img {
    vertical-align: bottom;
    max-width: 100%;
    height: 2rem;
}

#cg-version {
    display: inline;
    width: 0ch;
    opacity: 0;
    font-size: 0.5rem;
    color: rgba(0,0,0,0.5);
    overflow: hidden;
    -webkit-transition: width 1s;
    transition: width 1s;
    vertical-align: middle;
}

.cg-borderbox {
    margin-left: auto;
    margin-right: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.cg-tab {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: auto;
    padding: 0.5rem;
}

.cg-tab.cg-inactive-tab {
    display: none;
}

.cg-appear {
    opacity: 0;
    -webkit-animation-name: cg-appear-anim;
    -webkit-animation-duration: 0.250s;
    animation-name: cg-appear-anim;
    animation-duration: 0.250s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes cg-appear-anim {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes cg-appear-anim {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.cg-disappear {
    opacity: 1;
    -webkit-animation-name: cg-disappear-anim;
    -webkit-animation-duration: 0.250s;
    animation-name: cg-disappear-anim;
    animation-duration: 0.250s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.cg-hidden {
    opacity: 0.0;
}

@-webkit-keyframes cg-disappear-anim {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes cg-disappear-anim {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}

.cg-btn {
    width: 0ch;
    opacity: 0;
    -webkit-animation-name: cg-btn-anim;
    -webkit-animation-duration: 0.200s;
    animation-name: cg-btn-anim;
    animation-duration: 0.200s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.cg-state-wall-selecting .cg-btn {
    pointer-events: none;
}

@-webkit-keyframes cg-btn-anim {
    0%   {width: 0ch; opacity: 0;}
    100% {width: 12ch; opacity: 1;}
}
@keyframes cg-btn-anim {
    0%   {width: 0ch; opacity: 0;}
    100% {width: 12ch; opacity: 1;}
}

.cg-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 0rem solid red;
    font-size: 1rem;
}

.cg-spacer-poofin {
    flex: 0 0 auto;
    -webkit-animation-name: cg-spacer-poofin-anim;
    -webkit-animation-duration: 1.0s;
    animation-name: cg-spacer-poofin-anim;
    animation-duration: 1.0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes cg-spacer-poofin-anim {
    0%   {flex: 0 0 auto;}
    100% {flex: 1 1 auto;}
}

@keyframes cg-spacer-poofin-anim {
    0%   {flex: 0 0 auto;}
    100% {flex: 1 1 auto;}
}

.cg-spacer-poofout {
    flex: 1 1 auto;
    -webkit-animation-name: cg-spacer-poofout-anim;
    -webkit-animation-duration: 1.0s;
    animation-name: cg-spacer-poofout-anim;
    animation-duration: 1.0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes cg-spacer-poofout-anim {
    0%   {flex: 1 1 auto;}
    100% {flex: 0 0 auto;}
}

@keyframes cg-spacer-poofout-anim {
    0%   {flex: 1 1 auto;}
    100% {flex: 0 0 auto;}
}

.cg-status-warning {
    color: red;
}

.cg-status-alert {
    color: blue;
}

.cg-status {
    opacity: 0;
    border: 0rem solid blue;
    overflow: hidden;
    text-align: left;
    -webkit-animation-name: cg-appear-anim;
    -webkit-animation-duration: 1.0s;
    animation-name: cg-appear-anim;
    animation-duration: 1.0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-transition: color 250ms linear;
    -moz-transition: color 250ms linear;
    -o-transition: color 250ms linear;
    -ms-transition: color 250ms linear;
    transition: color 250ms linear;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.cg-poofin {
    -webkit-animation-name: cg-poofin-anim;
    -webkit-animation-duration: 0.2s;
    animation-name: cg-poofin-anim;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes cg-poofin-anim {
    0%   {-webkit-transform: scale(0.1); opacity: 0;}
    100% {-webkit-transform: scale(1.0); opacity: 1;}
}

@keyframes cg-poofin-anim {
    0%   {transform: scale(0.1); opacity: 0;}
    100% {transform: scale(1.0); opacity: 1;}
}

.cg-poofout {
    -webkit-animation-name: cg-poofout-anim;
    -webkit-animation-duration: 0.2s;
    animation-name: cg-poofout-anim;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes cg-poofout-anim {
    0%   {-webkit-transform: scale(1.0); opacity: 1;}
    100% {-webkit-transform: scale(0.1); opacity: 0;}
}

@keyframes cg-poofout-anim {
    0%   {transform: scale(1.0); opacity: 1;}
    100% {transform: scale(0.1); opacity: 0;}
}


.hvr-glow {
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 0ch rgba(0, 128, 255, 0);
    background-color:   rgba(0, 128, 255, 0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: box-shadow, background-color;
    transition-property: box-shadow, background-color;
}

.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
    box-shadow: 0 0 0.5ch rgba(0, 128, 255, 1);
    background-color:     rgba(0, 128, 255, 0.5);
}

/*
.cg-moneybutton-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 1ch;
}

.cg-moneybutton-wrapper > span:nth-child(1) {
    width: 0;
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

#cg-moneybutton {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: #dad8d8;
    border-radius: 100vmax;
    border: 1px solid #4772f6;
    width: 0;
    height: 50px;
    -webkit-transition: width 0.5s, height 0.5s;
    transition: width 0.5s, height 0.5s;
    overflow: hidden;
    opacity: 0;
}
*/

.cg-footer-languages {
    display: inline-block;
    width: 33%;
    text-align: right;
    vertical-align: middle;
}
.cg-footer-languages img {
    height: 1rem;
    border: thin outset white;
    border-radius: 20%;
}
