/* NEW EDITOR BUTTONS AND MORE - DON'T EDIT */

.scriptclasses_container {
    border-radius: 3px;
  display: block;
  bottom: 5px;
  left: 5px;
  pointer-events: none;
  position: fixed;
  background: rgba(100, 128, 173, 0.1);
  top: 35px;
}

.scriptclasses_list_element {
    color: white;
    text-indent: 0px;
    width: 100%;
    height: 20px;
    line-height: 100%;
    align-content: center;
    text-align: center;
    margin-bottom: 5px;
    border-radius: 3px;
    pointer-events: all;
  cursor: pointer;
  transition: 0.25s background;
}

.scriptclasses_list_element:hover {
    background: rgba(0, 0, 0, 0.3);
}

.scriptclasses_list {
    display: block;
  top: 5px;
  left: 5px;
  bottom: 38px;
  width: calc(100% - 10px);
  position: absolute;
}

.scriptclasses_add {
    width: calc(100% - 10px);
    height: 25px;
    background: rgb(100, 128, 173);
    position: absolute;
  bottom: 5px;
  left: 5px;
  cursor: pointer !important;
  color: white;
  line-height: 26px;
  content-visibility: visible;
  text-indent: 0px;
  align-content: center;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  pointer-events: all;
}

.button.scriptclasses_button {
	background: rgba(20, 20, 20, 0.4) !important;
	font-size: 15px !important;
	box-shadow: none !important;
	height: 20px !important;
	border-radius: 4px !important;
	line-height: 0px !important;
	width: 70px !important;
	box-sizing: border-box;
	height: 20px !important;
	border: none !important;
	position: absolute;
  right: 191px;
  color: white;
  justify-content: center;
  text-align: center;
  top: 2px;
}

.savescriptclass_button {
    position: absolute;
  width: calc(100% - 10px);
  left: 5px;
  bottom: 5px;
  cursor: pointer;
  color: white;
  font-size: 14px;
  text-align: center;
  background: rgb(100, 128, 173);
  height: 24px;
  border-radius: 3px;
  align-content: center;
}

.savescriptclass_input {
    width: calc(100% - 10px);
  box-sizing: border-box;
  border: none;
  color: white;
  position: absolute;
  top: 5px;
  left: 5px;
  height:24px;
  background: rgba(0,0,0,0.4);
  border-radius: 3px;
  font-size: 14px !important;
  padding-left: 5px;
  padding-right: 5px;
}

.resizablewindowicon {
    width: 25px;
    height: 25px;
    position: absolute;
    display:block;
    background-size: contain !important;
    top: 0;
    left: 5px;
    transform: scale(0.65);
}

.resizablewindowicon.scripticon {
    background: url('../../files/gui/kala_window-script1.png');
}

.scriptclassswindow {
    width: 100% !important;
    box-sizing: border-box;
    resize: none;
    font-size: 14px;
    background: none;
    border: none;
    color: white;
    height: 100% !important;
    overflow-x: auto;
    text-wrap: nowrap;
    padding-left: 5px;
}

.resizablewindowicon.savescripticon {
    background: url('../../files/gui/kala_window-save.png');
}

.scriptclasswindow_button {
    position: absolute;
  display: block;
    box-sizing: border-box !important;
  box-shadow: none !important;
  border: none !important;
  font-size: 15px !important;
  width: 120px !important;
  height: 30px !important;
  border-radius: 4px !important;
  right: 5px !important;
  text-align:center;
  align-content: center;
  backdrop-filter: blur(4px);
  color: white;
  bottom: 5px !important;
  background: rgba(20, 20, 20, 0.4) !important;
  cursor: pointer;
}

.resizablewindowicon.scriptviewericon {
    background: url('../../files/gui/kala_window-script2.png');
}

.resizablewindowtitle[title="Client-Script"]::after,
.resizablewindowtitle[title="Server-Script"]::after,
.resizablewindowtitle[title^="Script Viewer"]::after,
.resizablewindowtitle[title="Save Script"]::after {
    padding-left: 22px;
}

/* ANY QUESTIONS - ASK LUMINE DIRECTLY */


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

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

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

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

/* 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;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    font-family: 'CabinetGrotesk', 'CabinetGroteskMedium', 'Coolvetica', 'Helvetica';
}

/*
*:not(#canvas):not([id^="scriptcontainer"]) {
    font-family: 'CabinetGrotesk';
}

[id^="scriptcontainer"], [id^="scriptcontainer"] * {
    font-family: inherit !important;
}*/

:focus {
    outline: 0;
}

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

#canvas {
    font-family: 'Coolvetica'; 
}

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

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

/* Containers */
body {
    background: #000000;
    overflow: hidden; 
}

#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: 50%;
    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);
}

/* Scroll background */
.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: 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: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* hmm...
#startscreen { 
    background: black !important;
    display: block !important;
    transition: 100s opacity ease-in-out !important;
}

#startscreen[style*="display:none"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
*/

/* Hide the original spinner image */
#playbutton img {
    display: none !important;
}

#playbutton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative; 
}

/* Spinner */
#playbutton::before {
    content: "";
    width: 80px;
    height: 80px;
    border: 5px solid rgb(255 255 255 / 10%);
    border-left-color: #ffb357;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Centered background image */
#playbutton::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 32px; 
    height: 32px; 
    background-image: url(https://files.iappsbeats.com/Servers/server_4/Files/gui/kala_ac-klogo.png); /* Set the desired background image */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1; 
}

@keyframes spin {
    to {
          transform: rotate(360deg);
    }
}

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

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

#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: 100%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    overflow: hidden;
    /*background: black;*/
}

#gamecontainer, #canvas {
    -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: .75s all linear 0s;
}

canvas {
    position: absolute;
    image-rendering: optimizeSpeed;
    imageSmoothingEnabled: false;
    image-rendering: pixelated;
}

/* Testtt */
#canvas {
    width: 100%;
    height: 100%;
    opacity: 0%; 
    -webkit-filter: blur(10px) grayscale(1);
    filter: blur(10px) grayscale(1);
    transform: scale(3);
}

#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%;
    opacity: 0; 
    transition: 0.5s opacity linear 0.25s;
}

/* Minimap */
#minimap {
    display: none;
}

#minimapcanvas {
    display: none;
}

/* Chat */
#chatbox {
    /*background: url('../../files/gui/general/kala_chatbar.png');*/
    background: #b5b5b5; 
    position: absolute;
    z-index: 122;
    height: 64px;
    width: 480px;
    max-width: 90%;
    left: 164px;
    top: 12px;
    border-radius: 16px; 
    text-indent: 3px; 
    line-height: 4.25; 
}

#chatbox form {
    box-shadow: inset 0px 0px 0px 1px rgb(86 86 86 / 50%), inset 0 0 8px 4px rgb(50 50 50 / 50%) !important;
    border: 1px solid rgb(33 33 33 / 80%) !important;
    box-sizing: border-box !important;
    background-color: rgb(33 33 33 / 95%) !important;
    height: 64px !important;
    border-radius: 16px;
}

#chatbox input {
    font-size: 20px;
    color: #c4c9d9;;
    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 {
    display: none;
}

#movepad {
    background: url('../../files/gui/bbuilder_movepad.png') no-repeat bottom left;
    background-size: contain;
    image-rendering: -moz-crispt-edges;
    position: absolute;
}

#movepad {
    left: 12px;
    bottom: 12px;
    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: 10px;
    bottom: 10px;
    width: 128px;
    height: 128px;
}

#bombbutton {
    background-size: contain;
    image-rendering: -moz-crispt-edges;
    position: absolute;
}

#bombbutton {
    top: calc(64px * 2 + 12px * 3);
    left: 12px;
    width: 64px;
    cursor: pointer;
    height: 64px;
    max-width: 30vh;
    max-height: 30vh;
}

#lightsbutton,
#hornbutton {
    display: none;
}

.scrollable {
    overflow-y: scroll;
}

/* -webkit-overflow-scrolling: touch; */
.scrollable::-webkit-scrollbar {
    width: 12px;
    /* Set the width of the scrollbar */
}

.scrollable::-webkit-scrollbar-track {
    background: transparent;
    /* Make the scrollbar track transparent */
}

/* Style the scrollbar thumb (the draggable part) */
.scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent thumb color */
    border-radius: 10px;
    /* Optional: round the thumb */
}

.scrollable:has(label[for="KeySettingMoveLeft"]) {
    overflow: hidden !important;
}

/* 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: 10px;
    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;
    border-radius: 10px;
    height: 18px;
    top: 2px;
    left: 22px;
    position: absolute;
    background: #54a63b;
    -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;
}

#staff_news_window {
    background: rgba(37, 37, 37, 0.86) !important;
    min-width: 500px;
    min-height: 400px;
    height: 400px;
    border: none !important;
}

.ac_error_window {
    background: rgba(37, 37, 37, 0.86) !important;
    min-width: 300px !important;
    min-height: 200px !important;
    resize: none !important;
    width: 300px !important;
    height: 200px !important;
    border: none !important;
}

#reconnectscreen p {
    color: transparent;
}

#reconnectscreen p::after {
    content: "The connection has been lost.";
    color: white;
    font-size: 30px;
    font-weight: bold;
    display: inline-block;
    font-family: coolvetica;
}

.windowborder.disconnectwindow {
    background-color: darkred !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#reconnectscreen {
    background-color: black !important;
}

.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
    background-color: #24283b;
    z-index: 1
}

.ace_editor.ace_autocomplete .ace_line-hover {
    margin-top: -1px;
    background: rgba(171,191,254,.1);
    position: absolute;
    z-index: 2
}

.ace_completion-meta {
    opacity: .5;
    margin: .9em
}

.ace_completion-message {
    color: blue
}

.ace_editor.ace_autocomplete .ace_completion-highlight {
    color: #7aa2f7
}

.ace_editor.ace_autocomplete {
    width: 300px;
    z-index: 200000;
    border: 1px #272727 solid;
    position: fixed;
    box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    line-height: 1.4;
    background: #1f2333;
    color: #d2d2d2;
}

.ace-tm .ace_paren,.ace-tm .ace_lparen {
    color: #7dcfff;
}

.ace-tm .ace_gutter {
    background: rgba(0, 0, 0, 0.2);
    color: rgb(100, 128, 173);
}

.ace-tm .ace_fold {
    background-color: #6b72e6
}

.ace-tm {
    background-color: transparent;
  color: rgb(158, 186, 231);
}

.ace-tm .ace_cursor {
    color: #c0caf5
}

.ace-tm .ace_storage,.ace-tm .ace_keyword {
    color: #8c7cd8
}

.ace-tm .ace_entity.ace_name.ace_function {
    color: #7aa2f7
}

.ace-tm .ace_comment {
    color: #656565
}

.ace-tm .ace_string {
    color: #9ece6a
}

.ace-tm .ace_marker-layer .ace_selection {
    background: rgba(189,199,240,.2)
}

.ace-tm .ace_gutter-active-line {
    background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}

.ace-tm .ace_marker-layer .ace_selected-word {
    background: rgba(189,199,240,.11);
    border: 1px solid rgba(189,199,240,.11)
}

.ace-tm .ace_variable {
    color: #fff
}

.ace-tm .ace_constant.ace_numeric {
    color: #9ece6a
}

.ace-tm .ace_marker-layer .ace_active-line {
    background: rgba(134,134,134,.07)
}

.ace-tm .ace_print-margin {
    width: 1px;
    background: #1a1b26
}

.ace-tm .ace_invisible {
    color: #bfbfbf
}

.ace-tm .ace_constant {
    color: #c5060b
}

.ace-tm .ace_constant.ace_buildin {
    color: #5848f6
}

.ace-tm .ace_constant.ace_language {
    color: #7dcfff
}

.ace-tm .ace_constant.ace_library {
    color: #06960e
}

.ace-tm .ace_invalid {
    background-color: rgba(255,0,0,.1);
    color: red
}

.ace-tm .ace_support.ace_function {
    color: #7aa2f7
}

.ace-tm .ace_support.ace_constant {
    color: #cfc9c2
}

.ace-tm .ace_support.ace_type,.ace-tm .ace_support.ace_class {
    color: #6d79de
}

.ace-tm .ace_keyword.ace_operator {
    color: #687687
}

.ace-tm .ace_comment.ace_doc {
    color: #06f
}

.ace-tm .ace_comment.ace_doc.ace_tag {
    
}

.ace-tm .ace_xml-pe {
    color: #68685b
}

.ace-tm .ace_heading {
    color: #0c07ff
}

.ace-tm .ace_list {
    color: #b90690
}

.ace-tm .ace_meta.ace_tag {
    color: #00168e
}

.ace-tm .ace_string.ace_regex {
    color: red
}

.ace-tm.ace_multiselect .ace_selection.ace_start {
    box-shadow: 0 0 3px 0 #fff
}

.ace-tm .ace_marker-layer .ace_step {
    background: #fcff00
}

.ace-tm .ace_marker-layer .ace_stack {
    background: #a4e565
}

.ace-tm .ace_marker-layer .ace_bracket {
    margin: -1px 0 0 -1px;
    border: 1px solid rgba(169,177,214,.4)
}

.ace-tm .ace_string.ace_regexp {
    color: #b4f9f8
}

.ace-tm .ace_indent-guide {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR0IArs4c6QAAAA9JREFUGFdjCIvv/M8AIgAURwR7QOrUYQAAAABJRU5ErkJggg==) right repeat-y
}

.ace_scrollbar {
    contain: strict;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: default;
    z-index: 6
}

.ace_scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

.ace_scrollbar::-webkit-scrollbar-track {
    background: #24283b;
    border-radius: 3px
}

.ace_scrollbar::-webkit-scrollbar-thumb {
    background: #414868;
    border-radius: 3px
}

#mode2button .hotkeynumber {
    display: none; 
}

/* Temporary Placeholders */

#bombbutton[style*="bbuilder_reloadbutton.png"], #bombbutton[style*="bbuilder_reloadpcbutton.png"] {
    background-image: url('../../files/gui/kala_reloadplaceholder.png') !important;
    border-radius: 16px;
}

#menubutton {
    background-image: url('../../files/gui/kala_menuplaceholder.png') !important;
    border-radius: 16px;
}

#inventorybutton {
    background-image: url('../../files/gui/kala_hud-inventory.png') !important;
    border-radius: 16px;
    box-shadow: inset 0px 0px 0px 1px rgb(86 86 86 / 50%), inset 0 0 8px 4px rgb(50 50 50 / 50%);
    border: 1px solid rgb(33 33 33 / 80%);
    box-sizing: border-box;
    background-color: rgb(33 33 33 / 95%);
}

#chatbutton {
    background-image: url('../../files/gui/kala_hud-chat.png') !important;
    border-radius: 16px;
    box-shadow: inset 0px 0px 0px 1px rgb(86 86 86 / 50%), inset 0 0 8px 4px rgb(50 50 50 / 50%);
    border: 1px solid rgb(33 33 33 / 80%);
    box-sizing: border-box;
    background-color: rgb(33 33 33 / 95%);
}

#hotkey1, #hotkey2 {
    border-radius: 16px !important;
}

#bombbutton[style*="bbuilder_fistbutton.png"] {
    background-image: url('../../files/gui/kala_hud-grab.png') !important; /* REPLACE FOR GRAB BUTTON ICON */
    border-radius: 16px !important;
    cursor: pointer;
    box-shadow: inset 0px 0px 0px 1px rgb(86 86 86 / 50%), inset 0 0 8px 4px rgb(50 50 50 / 50%);
    border: 1px solid rgb(33 33 33 / 80%);
    box-sizing: border-box;
    background-color: rgb(33 33 33 / 95%);
} 
    
#weaponpad {
    background-image: url('../../files/gui/kala_hud-fire.png') !important;
    width: 128px !important;
    height: 128px !important;
    box-shadow: inset 0px 0px 0px 1px rgb(86 86 86 / 50%), inset 0 0 8px 4px rgb(50 50 50 / 50%) !important;
  border:1px solid rgb(33 33 33 / 80%) !important;
  box-sizing: border-box !important;
  background-size: 75px;
  background-color: rgb(33 33 33 / 95%) !important;
    border-radius: 50% !important;
    background-position: center !important;
}

#movepad {
    background-image: url('../../files/gui/kala_hud-move.png') !important;
    width: 128px !important;
    height: 128px !important;
    box-shadow: inset 0px 0px 0px 1px rgb(86 86 86 / 50%), inset 0 0 8px 4px rgb(50 50 50 / 50%) !important;
  border:1px solid rgb(33 33 33 / 80%) !important;
  box-sizing: border-box !important;
  background-size: 75px;
  background-color: rgb(33 33 33 / 95%) !important;
    border-radius: 50% !important;
    background-position: center !important;
}