body {
  background-color: #222224;
font-size: 14px;
color: #DDDDDE;
font-family: Arial, Helvetica, sans-serif;
-webkit-user-select: none;
user-select: none;
}

.slidecontainer {
  width: 100%;
  margin-top: 3px;
  margin-bottom: 3px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin-top: 5px;
  margin-bottom: 5px;
}

.slider:disabled {
  background-color: #59595B;
  pointer-events: none;
}

.slider:disabled::-webkit-slider-thumb{
  background-color: #55243F;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #984071;
  cursor: pointer;
}



/* slider toolbar */

#toolbar .slider {
  height: 10px;
  width: 70%;
}

#toolbar .slider:hover {
  opacity: 1;
}

#toolbar .slider::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
}

#toolbar .slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
}


/* SELECT */

select {
   -webkit-appearance:none;
   -moz-appearance:none;
   -ms-appearance:none;
   appearance:none;
   outline:0;
   box-shadow:none;
   border:0!important;
   background: #59595B;
   background-image: none;
   flex: 1;
   padding: 0 .5em;
   color:#fff;
   cursor:pointer;
   font-size: 1em;
}
select::-ms-expand {
   display: none;
}

.hide {
  display: none;
  visibility: hidden;
}

.select {
   position: relative;
   display: flex;
   width: 100%;
   height: 25px;
   line-height: 2;
   background: #59595B;
   overflow: hidden;
   border-radius: .25em;
   border: 1px solid #1D1D1E;
   border-radius: 0px;
   margin-top: 10px;
   margin-bottom: 10px;
}
.select::after {
   content: '\25BC';
   position: absolute;
   top: 0;
   right: 0;
   padding: 0 0.4em;
   background: none;
   cursor:pointer;
   pointer-events:none;
   transition:.25s all ease;
}
.select:hover::after {
   color: #984071;
}

/* SWITCH */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 23px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switchSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.switchSlider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .switchSlider {
  background-color: #984071;
}

input:focus + .switchSlider {
  box-shadow: 0 0 1px #984071;
}

input:checked + .switchSlider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.switchSlider.round {
  border-radius: 0px;
}

.switchSlider.round:before {
  border-radius: 0%;
}

/* Settings */

.settingsContainer {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 3px;
}

.settingsItemContainer {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
  margin-bottom: 3px;
}
.settingName {
  width: 50%;
  float: left;
  text-align: left;
  line-height: 24px;
}

.settingValue {
  width: 50%;
  float: left;
  text-align: right;
  line-height: 24px;
}

.settingsItemContainer::after {
  content: "";
  clear: both;
  display: table;
}

/* Buttons */
.buttons {
  background-color: #DF529E;
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor:pointer;
  width: 100%;
  display: block;
  margin-top: 10px;
  transition:.25s all ease;
}

.buttons:disabled {
  background-color: #55243F;
  color: #DF529E;
  pointer-events: none;
}

.buttons:hover {
  background-color: #984071;
  cursor: pointer;
}

/* Progress bar */

.progressContainer {
  width: 100%;
  height: 8px;
  background-color: #d3d3d3;
  padding: 0px;
  margin-top: 10px;
}

.progressbar {
  background-color: #53B281;
  width: 0%;
  height: 8px;
}

/* TOOLBAR */

#toolbar {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 30px;
  background-color: #1D1D1E;
  margin-left: auto;
  margin-right: auto;
  margin: 0px;
  border-top: 1px solid #0F0F10;
}

#toolbar .col {
  float: left;
  width: 50%;
  text-align: center;
  line-height: 30px;
}

/* Scroll bars */

/* width */
::-webkit-scrollbar {
  width: 11px
}

/* Track */
::-webkit-scrollbar-track {
  background: #59595B;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #984071;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #55243F;
}

::-webkit-scrollbar-corner {
  background: #59595B;
}

#upgrade {
  background-color: #53B281!important;
}