table, th, td {
       padding: 5px;
       text-align: center;
       margin-top:20px;
       border: 1px solid black;
       margin-left: auto;
       margin-right: auto;
    }

/* ------------------------------------------
--------------For the instructions ----------
------------------------------------------*/
.instructions {
	width: 100%;
	height: 100%;
	background: rgba(255,255,245,0.25);
	margin: 40px auto;
    padding: 20px 20px 10px 20px;

    position:relative;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.05) inset;
       -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.05) inset;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.05) inset;

    -moz-border-radius: 5px;
         border-radius: 5px;
}

.figure {
    text-align: center;
}

.groupProbabilityContainer {
    text-align: center;
}

.pieChartInstruction {
    width: 59%;
    display: inline-block;
    border-width: thin;
    border-color: #000000;
    padding: 10px;

}

/* ----------------------------------------*/
/* --------For the input part--------------*/
/* ---------------------------------------*/

.inputsOuterContainer{
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    background-color: #eff5f5;
    padding: 10px;
}

.inputsDescription {
    padding: 10px;
}

.inputsGroupSizes{
    width: 99%;
    display: inline-block;
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    padding: 10px;
    margin: 5px;
    background-color: #e0ebeb;
    text-align: center;
}

.inputsGroupSizesBelief{
    width: 99%;
    display: inline-block;
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    padding: 10px;
    margin: 5px;
    background-color: #ffd9b3;
    text-align: center;
}

input[type=number]{
    width: 80px;
}


/* ---------------------------------------*/
/* ----For the probability calculator----*/
/* --------------------------------------*/

.label {
  color: white;
  padding: 8px;
}

.win {
    background-color: #59b300
}

.lose {
    background-color: #59b300
}

.groupSize_input {
	background-color: #2adece;
	border: none;
	color: white;
}

.calculatorOuterContainer {
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    background-color: #eff5f5; /*rgba(255,255,245,0.25); */
    padding: 10px;
}

.inputsCalcContainer{
    width: 50%;
    background-color: #eff5f5;
}

.pieChartsContainer {
    /*border-style: solid;
    border-width: thin;
    border-color: #000000;*/
    text-align: center;
    background-color: #eff5f5;
}

.pieCharts {
    width: 30%;
    display: inline-block;
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    padding: 10px;
    background-color: #e0ebeb;
}

/*---------------------------------*/
/*-------GroupSizeProbabilities----*/
/*--------------------------------*/

.left {
    width: 40%;
        font-size: medium;
    display: inline-block;

}

.right {
    width: 50%;
        font-size: medium;
    display: inline-block;

}


/*------------------------------*/
/*----- Results Section --------*/
/*------------------------------*/

.resultsContainer {
    /*border-style: solid;
    border-width: thin;*/
    /*font-size: x-large;*/
    padding: 10px;
    margin: 10px;
    border-color: #000000;
    border: solid 1px #555;
    border-radius:5px;
    text-align: center;
    background-color: #eff5f5;
      box-shadow:  0 0 5px  rgba(0,0,0,0.6);
      -moz-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
      -o-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
}

.resultsContainerWinner {
    /*border-style: solid;
    border-width: thin;*/
    font-size: x-large;
    padding: 10px;
    margin: 10px;
    border-color: #000000;
    border: solid 1px #555;
    border-radius:5px;
    text-align: center;
    background-color: #eff5f5;
      box-shadow:  0 0 5px  rgba(0,0,0,0.6);
      -moz-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
      -o-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
}

.resultsPieContainer {
    /*border-style: solid;
    border-width: thin;*/
    width: 50%;
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border-color: #000000;
    border: solid 1px #555;
    border-radius:5px;
    text-align: center;
    background-color: #eff5f5;
      box-shadow:  0 0 5px  rgba(0,0,0,0.6);
      -moz-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
      -o-box-shadow: 0 0 5px  rgba(0,0,0,0.6);
}

.active-contestants {
    width: 25%;
    font-size: medium;
    display: inline-block;
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    border-radius:5px;
    padding: 10px;
    background-color: #92C092;
    margin: 10px;
}

.levels-Contestants {
    width: 25%;
    font-size: medium;
    display: inline-block;
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    border-radius:5px;
    padding: 10px;
    background-color: #e0ebeb;
    margin: 10px;
}

.gewonnen {
    width: 25%;
    font-size: medium;
    display: inline-block;
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    border-radius:5px;
    padding: 10px;
    background-color: #f3d488;
    margin: 10px;
}

/*--- Have to call the donation levelsBonus and not levelsDonation otherwise interaction with the calculator  ---*/
.levels-bonus {
    width: 25%;
    font-size: medium;
    display: inline-block;
    border-style: solid;
    border-width: thin;
    border-color: #000000;
    border-radius:5px;
    padding: 10px;
    background-color: #e0ebeb; /*#dae6da;*/
    margin: 10px;
}

.payoffTable{
    padding: 15px;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid black;
}

/*-------- Others --------------*/


.center {
  margin: auto;
  width: 100%;
  padding: 10px;
}

/* slider for the calculator */
.sliderCalcOwn {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 60%; /* Full-width */
  height: 10px; /* Specified height */
  background: #d3d3d3; /* 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 */
.sliderCalcOwn {
  opacity: 1;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.sliderCalcOwn::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  border: 1px solid #000000;
  height: 20px;
  width: 10px;
  border-radius: 3px;
  background: #6495ED;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

.sliderCalcOwn::-moz-range-thumb {
  border: 1px solid #000000;
  height: 20px;
  width: 10px;
  border-radius: 3px;
  background: #6495ED;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

.sliderCalcOpponent {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 60%; /* Full-width */
  height: 10px; /* Specified height */
  background: #d3d3d3; /* 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 */
.sliderCalcOpponent {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.sliderCalcOpponent::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  border: 1px solid #000000;
  height: 20px;
  width: 10px;
  border-radius: 3px;
  background: #6495ED;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

.sliderCalcOpponent::-moz-range-thumb {
  border: 1px solid #000000;
  height: 20px;
  width: 10px;
  border-radius: 3px;
  background: #6495ED;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}