.disable-select {
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select:none;
}

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

html, body {margin: 0; height: 100%; overflow: hidden}
body {
  background-color: #000;
  color: #ddd;
  font-size:13px;
  font-family: 'Ruda', sans-serif;

  user-select: none; /* supported by Chrome and Opera */
 -webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* Internet Explorer/Edge */
}
button {
  background-color: #222;
  border: 1px solid #333;
  height:34px;
  min-width: 64px;
  color:white;
}
button:focus {
  outline: 0;
}
button:hover {
  border:1px solid #888;
}

#wrapper { position:absolute; left:0px; top:0px; display: none;}
#mainbarContainer { width:1286px; position:absolute; left:0px; top:2px; height:40px;}
#canvasContainer { z-index: 1; position:absolute; left:0px; top:42px; width:960px; height:600px;}
#glcanvas { touch-action:none; z-index: 2; position:absolute; left:0px; top:0px; width:960px; height:600px; background-color:black; border:1px solid #333; }

#rightsideContainer {
    position:absolute; left:964px; top:42px; width:320px;
}

#viewportContainer {
    position:absolute; left:0px; top:0px; width:960px;
}

#rightsideContainer .toolbarheader { height:13px; width:322px; margin-bottom:0px; margin-top:2px;}
#header_brushtypes { background-image:url('../images/UI/header1.png'); }
#header_dithertypes { background-image:url('../images/UI/header2.png'); }
#header_tooltypes { background-image:url('../images/UI/header3.png'); }


#previewContainer { width:320px; height:200px; background-color:black; border: 1px solid #333;}
#toolbarContainer { width:322px; }
#toolbarContainer #brushtypes { height:34px; margin-top:2px;}
#toolbarContainer #dithertypes { height:34px; margin-top:2px;}
#toolbarContainer #tooltypes { margin-top:2px;}

#propertiesContainer { width:322px; height:209px; background-color:#111; }
#propertiesContainerSeparator { width:322px; height:4px; background-color:#333; margin-bottom:2px;}
#logoContainer { width:322px; height:100px; background-color:#111; background-image:url('../images/ui/mcdraw.png');}
#paletteContainer { position:absolute; left:0px; top:0px; width:1286px; height:36px; margin-top:2px;}
#paletteFBContainer { position:absolute; left:576px; top:0px; width:68px; height:34px; margin-top:2px; background-color:#111;}
#paletteFBContainer #foreground { position:absolute; background-color:white; width:52; height:18; left:6px; top:6px; }
#paletteFBContainer #background { position:absolute; background-color:black; width:64px; height:30px; left:2px; top:2px; }
#paletteToolbarContainer { position:absolute; left:646px; top:0px; width:604px; height:34px; margin-top:2px;}
#footerContainer { width:1286px; position:absolute; left:0px; top:646px; height:38px; color:#555; border-top:4px solid #333; border-bottom:4px solid #333;}
#coords { margin-top:7px; float:right; width:560px; text-align: right; font-size:18px; color:#ddd; overflow: hidden;}
.swatch { margin-right:2px; margin-bottom:2px; width:32px; height:32px; float:left; background-color: white; border:1px solid #333; }
#foregroundIcon {position:absolute; background-image: url('../images/UI/foregroundIcon.png'); width:32px; height:16px; pointer-events: none; }
#backgroundIcon {position:absolute; background-image: url('../images/UI/backgroundIcon.png'); width:32px; height:16px; top:17px; pointer-events: none; }
#globalbackgroundIcon {position:absolute; background-image: url('../images/UI/globalbackgroundIcon.png'); width:32px; height:16px; top:17px; pointer-events: none; }
#propertiesContainer .inner { padding:20px; }

#bossOverlay {
  display: none;
  position: fixed;
  z-index: 35000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

#bossOverlay .inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url('../images/garfield.png') no-repeat center;
}

.propertypanel { display: none; }
.propertypanel p {
  margin:0px;
  margin-bottom:5px;
}

.toolbarButton {
  float:left;
  width:32px;
  height:32px;
  border:1px solid #333;
  background-color: #222;
  margin-left: 2px;
  background-image:url('../images/UI/toolbarbuttons.png?1');
  background-position: left 0px;
  margin-bottom:2px;
}
.toolbarButton:first-of-type {
  margin-left: 0;
}
.toolbarButton.active {
  border:1px solid #888;
  background-color:#555;
}
.toolbarButton:hover {
  border:1px solid #888;
}

.toolbarButton .colorblock {
  background-color: black;
  border:1px solid black;
  width:26px;
  margin-left:2px;
  margin-top:18px;
  height:10px;
}

hr {
  border:0px;
  height:4px;
  background:#333;
  margin:2px 0px;
  padding:0px;
}

/* jquery ui overrides */

#custom-handle {
    width: 2em;
    height: 1.4em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.4em;
}

input:focus, textarea:focus {
  outline: none !important;
  border:1px solid #777;
  box-shadow: 0 0 10px #777;
}

/* jquery ui overrides */

.checkbox-container {
  margin-bottom:10px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
  border-radius: 0;
}

/* checkbox styling */

.input-title {
    clear: both;
    margin-left:24px;
    padding: 0px 0px 0px 0px;
    font-size: 13px;
    line-height: 18px;
}

.checkbox-label {
    position: relative;
    margin: 0;
    cursor: pointer;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    width: 14px;
    clear: both;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 14px;
    width: 14px;
    background-color: #333;

    border: 2px solid #777;
}


.checkbox-label input:checked ~ .checkbox-custom {
    background-color: #333;
    -webkit-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity:1;
    border: 2px solid #777;
}


.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border: solid #333;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
}


.checkbox-label input:checked ~ .checkbox-custom::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:1;
  left: 3px;
  top: -2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  background-color: transparent;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 25000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden;; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  font-size:14px;
  position:absolute;
  background-color: black;
  /*margin: 10% auto;*/ /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #333;
  overflow: auto;
  width: 600px; /* Could be more or less, depending on screen size */
  min-height:100px;
  -webkit-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.95);
  -moz-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.95);
  box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.95);
}

.modal-content .modal_inner {
  padding: 20px;
  overflow: auto;
}

#splashScreen {
  cursor:pointer;
}

/* The Close Button */
.modal .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modal .close:hover,
.modal .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.ui-slider-handle {
  background:#777 !important;
  outline:0 !important;
  border:1px solid #777 !important;
}

.ui-slider {
  background:#333 !important;
  border:1px solid #333 !important;
}

.resetbutton {
  min-width: 60px !important;
}