*, ::after, ::before {
    box-sizing: initial;
    -webkit-font-smoothing: antialiased;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    color: Black;
    font-size: 15px;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    width: 100%;
    background-color: #c9c9c9;
    padding: 0;
    margin: 0;
    text-align: center;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(140, 140, 140, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(140, 140, 140, 1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(140, 140, 140, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(140, 140, 140, 1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(140, 140, 140, 1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(140, 140, 140, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#bbbbbb', GradientType=0); /* IE6-9 fallback on horizontal gradient */
    background-attachment: fixed;
}

#header {
    width: 100%;
}

#header.deleted {
    width: 100%;
    background: none;
}

#header p {
    padding: 10px;
    margin: 0;
}

div.description p {
    font-size: 12px;
    text-align: center;
    padding: 0 10px;
}

.pointer_events canvas {
    pointer-events: all !important;
}

#images:not(.grid) canvas {
    display: inline;
    margin-bottom: 10px;
    border: none;
    max-width: 100%;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .6);
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .6);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .6);
    pointer-events: none;
}

#images:not(.grid) i {
    display: none;
}

#images:not(.grid) .canvas_container {
    width: auto !important;
    height: auto !important;
}

#images.grid {
    text-align: justify;
    display: flex;
    flex-wrap: wrap;
}

#images.grid::after {
    content: '';
    flex-grow: 999999999;
}

#images.grid .image_container {
    margin: 1px;
    position: relative;
}

#images.grid .image_container i {
    display: block;
}

#images.grid .image_container canvas {
    position: absolute;
    top: 0;
    width: 100%;
    vertical-align: bottom;
}

#screen {
    z-index: 99;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

#screen.front {
    z-index: 9999;
    opacity: .9;
}

img.paint.yes {
    right: 70px;
    display: none;
}

img.paint.no {
    display: none;
}

h2 {
    color: #444;
}

a {
    color: #F36532;
    position: relative;
    z-index: 100;
}

#imgMessage {
    display: none;
    position: fixed;
    top: 0;
    font-size: 12px;
    width: 100%;
    background: repeating-linear-gradient(
            -45deg,
            #E06100,
            #E06100 10px,
            #FF6F00 10px,
            #FF6F00 20px
    );
    height: 30px;
    line-height: 30px;
    color: White;
    opacity: .6;
    z-index: 101;

    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5);

    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    text-align: center;
}

#imgHL {

    width: 30px;
    height: 30px;
    z-index: 101;
    cursor: pointer;

    background: top left url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEuUlEQVRYR+2WX0xbdRTHz+3fbQyGU3ggY7KYsahBmW7EBU3UJVPMTBYVE50Lxj0s8U/wERMnJibqZnhxIZCBiw8ziwynGDJd3Op8WBYDZrJMa8kYBUop0D+3ve39f38/z7ltEQckLXvYC7c9uf/afj/ne87v3ApwlzfhLuvDGsCaA2sOrDlQkAP++rYaBkajyazthmWVWm5BAsYDZsa41DjWPXcnw2xFgF+f/ti1AzyHDUt/RxN4HQN8MQaccwCnA6DEDZbFmDIb7xeSUmtD8OvIakCWBYg2n3jWkOSvFEWtsTIqWKoOlmECRwDGGYADv+Z1gXNTCcA6F8gzsXlNlp96cvxUoFiIJQDxN3va1FD0MwQAphlZQcYBk7V/m1kMLG4hDAd6OcsRAmGSU3P/7JnoefCOAKTWMx8qI+OfWKqGdnM0HTcSRCH0G/f5czyy33jH4uCqKIO0mAQ9LR94Itg7UAzEggPq54PPqVfHfmaJzEK2FopizqiNAKRtn5MLi2DQDcHrAYXpoErS6YabJw+tBkCQ2/pvadcmagSymuylhsOwrV9UgjxEForgEEoQIC0YoJp6dPf1LyuKBtCOnT+g+cPf87QGAjY4cDSGob0GihgWMN3AY2xC7AfisfPPlYD29PE5JQmu+++F2KDP/QxcNguFsEugfHSu25wWjwhOJ3Y4AaA+Zi1g/ZlugqChuIIQ2BvczDpj54/3qVM0XYep5DxsrK1SHxlsX1+oOH3OBsi8d+Y89zqa7PWNdtJVgZoQxQTMnKkIgEtRSOsIghDoDmCOnADQlcnELIjhWdi4Y4tv15Uv9hYNILX09rkeqGwGFwI4CIJcwD5AAEAHuIrZowMsg+Jp1T4nQFoh82IMQuNBcK73woaq+954/Mrxb4oGSDZ3vuuuqz7huGdDdsrRoKEymNjhaD8jABkdIAAMhhCAcAkxAaHAGKipNJQ+tPVaw9WOx4oRXyhBbF9HtWd75aSnYRs2FAIghF0bBCBxQcFJmAfARjVTMiRCaPv4NCiSBNomT+rb+EhDV3R4NNtBhW8LcyD5SucF796H9znrtwBgrRmKCmi/vcdg1IRJGYxgFKSbYZBjImiKCpKgp1qnf3x5SJ39PSdO84uCVkL+eEWiBQDxUM82V2XZsPfF+s3O2krg2AskyCMpsP4Og+EPAwvFwYylQVcU0A0D/lLmrr89dvZI0EjdyinkBfN7mlw6hrESwf+eBakPztV666r6XLtqHqXVwBP4PJhE0RtTwCbiwFOK3QshVYTv2NjQ0d9Ov4o/nB2P/2V7+zmJZ3L3l3As+zQ0L/r3Q9m6l2IzczvT4fkKazrOI6PB2eHJwA2/IFrVL+x5KxqLa70nuxtlWU4sAlgORikaYBEmjSUarZsx3BgE7Br4YeCiPzBafsnn6/jlwk+9t9U+X3/KHJeLnX1hJVihTh68Xo5RiuHFcLS0tLz/2usHD/t8l2eOH/v0+ZwAiVBQzTUMypyO864s+/MF/SXLZU4gFO6SkpKtQ0PDf/Sd7Xd0d3Xuj0Qif+L1dE6Qup+ioOVYKMAS+q6uroOimDrV3n50t67r9E+Isi56WzUAKTU1Ne0cGRkJhMNhuWjl3Bf+BdZDyz9Ne9g1AAAAAElFTkSuQmCC) no-repeat;

    position: absolute;
    display: none;
}

.canvas_container {
    margin: 0;
    padding: 0;
    border: none;
    pointer-events: none;
    position: relative;
    z-index: 98;
}

.canvas_container.front {
    z-index: 9999;
}

.centered {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

img.paint {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    display: block;
    width: 32px !important;
    border-radius: 20px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .8);
    z-index: 9999;
    cursor: pointer !important;
    pointer-events: all !important;
}

canvas.draw {
    cursor: cell;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;;
    box-shadow: none !important;;
    pointer-events: all;
}

iframe {
    position: relative;
    z-index: 1;
}

.toggle_grid,
.report {
    color: Maroon !important;
    font-weight: bold;
    position: fixed;
    top: 40px;
    right: 20px;
    text-decoration: none;
    font-size: 8px;
    opacity: .8;
}

.report:before {
    content: '🚨';
    text-decoration: none;
    font-size: 20px;
    vertical-align: middle;
    padding: 5px;
}

.report:hover {
    opacity: 1;
}

.space.button {
    margin-bottom: 135px;
}

@font-face {
    font-family: 'pixel';
    src: url('pixel.ttf');
    font-weight: normal;
    font-style: normal;
}

#font_preloader:before {
    content: "test";
}

#font_preloader {
    font-family: 'pixel';
    position: absolute;
    top: -100px;
    left: -100px;
    opacity: 0;
}

.toggle_grid:hover {
    opacity: 1;
}

.toggle_grid {
    background: no-repeat center center url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAPUlEQVRYhe3VIRIAIAgAQfFV/D/xK60mkmNxrzEQthGZuUZTVcU5376f3fJFAAAAUvgFAADfAyS/AAAAYAM8bR0jaWU3twAAAABJRU5ErkJggg==');
    z-index: 100;
    width: 36px;
    height: 36px;
    left: 10px;
    opacity: .7;
    cursor: pointer;
}

.mgbox {
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .6);
}

#button_container {
    display: none;
}

.acb {
    max-width: 800px;
    padding: 0 12px;
    margin: 0 auto;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .6);
    background-color: #FFF;
}

.modal-card {
    max-height: calc(100vh - 200px) !important;
    text-align: left;
}