@font-face { 
    font-family: 'Coolvetica';
    src: url('../fonts/coolvetica.ttf');
    font-weight: normal;
    font-style: normal;
}

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

:root {
    color-scheme: only light;
}

/* Reset styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-family:'Coolvetica','Helvetica';
}

:focus {
    outline: 0;
}

input {
    font-family:'Coolvetica','Helvetica';
}

#npcscriptfield, #npcscriptfield div, #npcscriptfield span {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

/* Containers */
body {background: #000000;}
#deathscreen { background-color: rgb(0 0 0 / 0.5) !important; }
#startscreen, #generalmessage, #deathscreen, #reconnectscreen, #errorscreen { position:absolute; left:0px; top:0px; width:100%; height: 100%; z-index:200; }
.parchment-back { width:844px; height:364px; position:absolute; top:55%; left:50%; margin-left:-422px; margin-top:-182px; font-size:20px; text-align:center; }
#underconstruction { font-size: 24px; color: #fffff0; margin-left:10px; margin-right:10px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 2px 0 #000, 1px 2px 0 #000; }
#generalmessage, #deathscreen, #reconnectscreen, #errorscreen { background-color:rgba(0,0,0,0.25);  }
.parchment-replacer { position:absolute; left:50%; top:0; width:692px; height:364px; margin-left:-346px; }

/* Logo */
#logo { position:absolute; background:url('../../files/gui/bbuilder_logosingle.png'); height:113px; width:454px; top:-90px; left:50%; margin-left:-229px; z-index:3; }

/* Play and revive buttons */
#playbutton {margin:10px auto 10px auto;}
#playbutton div {position:absolute;top:0;left:0;opacity:1;-moz-transition:0.4s linear opacity;-webkit-transition:0.4s linear opacity;-o-transition:0.4s linear opacity;-ms-transition:0.4s linear opacity;transition:0.4s linear opacity}
#playbutton img { display:none; }
#playbutton.loading img {display:block;position:absolute;left:332px;top:228px;}

#respawnbutton { position:absolute; height:96px; width:259px; bottom:40px; left:50%; margin-left:-260px; background:url(../../files/gui/bbuilder_revive_revivebutton.png?v=2); }
#unstickmebutton { position:absolute; height:96px; width:258px; bottom:40px; left:50%; margin-left:2px; background:url(../../files/gui/bbuilder_revive_homebutton.png?v=2); }

#reconnectbutton { margin:40px auto 0 auto; background:url(../../files/gui/reconnectbutton.png); }

.startbutton { background:url(../../files/gui/playbutton.png);width:336px;height:96px; }
.startbutton:hover { background:url(../../files/gui/playbutton_active.png);  }
.startbutton.loading { background:none; }

/* Game */
#gamecontainer {width:100%;height:calc(100% - 70px);margin-left:auto;margin-right:auto;position:absolute;overflow:hidden;}
#gamecontainer {-moz-transition:0.5s opacity linear 0.25s;-webkit-transition:0.5s opacity linear 0.25s;-o-transition:0.5s opacity linear 0.25s;-ms-transition:0.5s opacity linear 0.25s;transition:0.5s opacity linear 0.25s;}
canvas { position:absolute;image-rendering:optimizeSpeed;imageSmoothingEnabled:false;image-rendering:pixelated;}
#canvas {width:100%;height:100%;} 
#background { background: #000;}
#backgroundcontainer { display:inline-block; position:absolute; width:100%; height:100%; overflow:hidden;}
#background, #foreground { margin:0; padding:0;position:absolute;width:100%;height:100%;left:-32px;top:-32px;}
#guilayer { position:absolute; width:100%; height:100%; left:0px; top:0px; }   
#entities { image-rendering:optimizeSpeed;image-rendering:pixelated;imageSmoothingEnabled:false; width:100%; height:100%; left:0px; top:0px; }
#foreground { -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer; }

#canvas, #bar-container, #minimap, #minimapcanvas, #foreground, #background, #gamecontainer, #movementhelp, #showvs, #showvsclans, #showvswinner, #showvsclanwinner {-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;}

#bar-container { position:absolute; left:0; top:0; width:100%; height:100%; }

/* Minimap */    
#minimap { background:url('../../files/gui/bbuilder_minimap.png'); position:absolute; right:8px; top:8px; width:144px; height:144px; }
#minimapcanvas { image-rendering:optimizeSpeed;imageSmoothingEnabled:false; width:144px; height:144px; border: 2px solid #f5efeec0; border-radius: 4px; }

/* Chat */
#chatbox {background:url('../../files/gui/bbuilder_chatbar.png');background-size:100% 100%;position:absolute;z-index:100;height:32px;width:788px;max-width:90%;max-width:calc(100% - 312px);left:150px;top:12px;}
#chatbox input {font-size:20px;color:#eee;background:none;width:90%;border:0;margin-left:2%;padding:2px 0;}

#chatbox.bigchat {background:none;height:72px;width:100%;left:0px;right:0px;max-width:initial;top:120px;}
#chatbox.bigchat input {font-size:56px;height:72px;width:100%;margin-left:initial; color:white; text-align:center; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 2px 0 #000, 1px 2px 0 #000; }

/* Game GUI */
#coinscount {color:#ffffff;position:absolute;font-size:16px;right:257px;top:20px;width:120px;text-align:right;text-shadow:2px 2px 0 #000000;}

#movepad {background:url('../../files/gui/bbuilder_movepad.png') no-repeat bottom left;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute;}
#movepad {left:0px;bottom:0px;width:300px;height:300px; max-width:45vh; max-height:45vh; }

#weaponpad { background:url('../../files/gui/bbuilder_weaponpad.png') no-repeat bottom right;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute;}
#weaponpad {right:0px;bottom:0px;width:128px;height:128px;}

#shieldbutton {
    position: absolute;
    right: 100px;
    bottom: 100px;
    width: 96px;
    height: 96px;
    max-width: 30vh;
    max-height: 30vh;
    background: url(../../files/gui/bbuilder_shieldbutton.png) no-repeat bottom right;
    background-size: contain;
    image-rendering: -moz-crispt-edges;
}

#bombbutton { background:url('../../files/gui/bbuilder_bombbutton.png') no-repeat bottom right;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute;}
#bombbutton {right:0px;bottom:120px;width:96px;height:96px;max-width:30vh; max-height:30vh;}

#lightsbutton, #hornbutton { display:none; }

.scrollable { overflow-y:auto; -webkit-overflow-scrolling: touch; } /* -webkit-overflow-scrolling: touch; */

/* Input placeholder color */
::-webkit-input-placeholder { color: #BBB; }
:-moz-placeholder { color: #BBB; opacity: 1; }
::-moz-placeholder { color: #BBB; opacity: 1; }
:-ms-input-placeholder { color: #BBB; }
::-ms-input-placeholder { color: #BBB; }

/* Health bar */

#healthbar {height:26px;width:204px;left:50%;margin-left:-102px;top:4px;position:absolute;pointer-events: none;}

#healthbarbar { position:absolute;width:100%; height:100%; background:url('../../files/gui/bbuilder_healthbar.png'); image-rendering:-moz-crisp-edges; }
#hitpoints {width:0px;height:19px;top:3px;left:32px;position:absolute;background:#d83939;-moz-transition:.5s width ease;-webkit-transition:.5s width ease;-o-transition:.5s width ease;-ms-transition:.5s width ease;transition:.5s width ease;pointer-events: none;}

/* ------- */

.resizablewindow {
    background-color: rgba(200, 200, 200, 0.45) !important;
    backdrop-filter: blur(3px);
}

.ace-tm {
    /* Editor Background Color */
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.ace-tm .ace_gutter {
    /* Editor Sidebar Background Color */
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.ace-tm .ace_gutter-active-line {
    /* Editor Sidebar Active Cell Background Color */
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.resizablewindowtitle {
    font-family: Arial, Augusta, Coolvetica, monospace !important;
    padding-top: 5px !important;
}

input[value="Server"], input[value="Client"],
input[value="💾 Update*"], form + input[value="💾 Update"],
input[value="📚 Docs"] { 
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: 0.2s all !important;
    height: 25px !important; 
}

input[value="Server"]:hover, input[value="Client"]:hover,
input[value="💾 Update*"]:hover, form + input[value="💾 Update"]:hover,
input[value="📚 Docs"]:hover {
    font-size: 21px !important;
    background-color: rgba(255, 255, 255, 0.45) !important;
}

/* Temp Fix */
.ace_tooltip {
    display: none !important;
    width: 0px;
    height: 0px;
}
.ace_tooltip::before {
    display: none !important;
    width: 0px;
    height: 0px;
}
.ace_tooltip::after {
    display: none !important;
    width: 0px;
    height: 0px;
}

.ace-tm .ace_indent-guide {
    background: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.ace-tm .ace_storage, 
.ace-tm .ace_keyword {
    color: rgb(44, 125, 197) !important;
}

.ace-tm .ace_comment,
.ace-tm .ace_support.ace_function {
    color: rgb(93, 93, 93) !important;
}

.ace-tm .ace_variable {
    color: rgb(82, 98, 227) !important;
    font-weight: bold !important;
}

.ace-tm .ace_string,
.ace-tm .ace_entity.ace_name.ace_function {
    color: rgb(51, 166, 155) !important;
}

.ace-tm .ace_constant.ace_numeric,
.ace-tm .ace_constant.ace_language {
    color: rgb(94, 94, 205) !important;
}

.ace-tm .ace_support.ace_constant {
    color: rgb(118, 110, 173) !important;
}

input[value="Client"] {
    right: 35px !important;
}

input[value="Server"] {
    right: 148px !important;
}