/* --------------------------------------
=========================================
FONTS
=========================================
-----------------------------------------*/
@font-face {
    font-family: 'wonkaregular';
    src: url('../assets/fonts/wonkaFont/willywonka-webfont.woff2') format('woff2'),
         url('../assets/fonts/wonkaFont/willywonka-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*  DESIGN COLOURS

Dark gold - for progress bar unfilled and joystick bar inner - #d7b000
Gold for joystick bar inside and counter - #fedf00
Joystick bar border - #f4c826
Background - #f2efe9
Red - #db2600
Green - #0aa645
Blue - #25b5b0
Purple - #a543b2
*/

/* --------------------------------------
=========================================
GENERAL STYLES
=========================================
-----------------------------------------*/
/* UNIVERSAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
  background-image: url(../assets/cc-interface_v04.jpg);
  background-repeat: no-repeat;
  background-color: #EEEBE7;
  background-size: contain;
  background-position: center top;
}


html {
    font-size: 100%;
    width: auto !important;
    overflow-x: hidden !important;
}

body,h1,h2,h3,batch-count {
    height: 100%;
   /* background: #ffffff;    Now replaced with image */
    font-family: 'wonkaregular'; 
    font-weight: 200;  
    font-style: normal; 
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    width: auto !important;
    overflow-x: hidden !important;
    margin: auto !important;
}
h1 {
    line-height:56px;
    font-size:48px;
    color: #7030A0;
}
h2 {
    font-size:24px;
    color: #7030A0;
}
h3 {
    font-size:24px;
    color: #FF5D17;
}
batch-count {
    line-height:100px;
    outline-width:120%;
    font-size:48px;
    color: #a543b2;
    border: 3px solid #f4c826;
    border-radius: 10px;
    background: #fedf00;
}

#myProgress {
  width: 100%;
  border-radius: 10px;
  background-color: #d7b000;
}
#RedBar,#GreenBar,#BlueBar {
  width: 10%;
  height: 30px;
  text-align: center; /* To center it horizontally (if you want) */
  line-height: 30px; /* To center it vertically */
  color: white; 
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#RedBar {
    background-color: #db2600;
}
#GreenBar {
  background-color: #0aa645;
}
#BlueBar {
  background-color: #25b5b0;
}


input[type="radio"] {
    /* hide the inputs */
    opacity: 0;
}

/* style your lables/button */
input[type="radio"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: #efefef;
    color: #aaa;
    border-radius: 3px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0);
}


/* Progress bar Background  */
#prog-background {
  border-radius: 25px;
  border: 10px solid #fedf00;
  background: #f4c826;
  padding: 20px;
}


/*********************/
/* BATCH SIZE SLIDER */
/*********************/
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  border-radius: 10px;
  appearance: none;
  width: 100%; /* Full-width */
  height: 50px; /* Specified height */
  background: #fedf00; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  border-radius: 20px;
  appearance: none;
  width: 40px; /* Set a specific slider handle width */
  height: 80px; /* Slider handle height */
  background: #a543b2; /* slider handle colour */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #a543b2; 
  cursor: pointer; /* Cursor on hover */
}
.wrapper {
  position: relative;
}