.calc_body {
    background-color: bisque;
    border-radius: 50px;
    padding: 30px;
    margin-top: 30px;
}

.math_controls, .math_params {
    max-width: 400px;
    margin: 0 auto 20px;
}
.math_controls input {
    width: 48%;
}
.math_params span {
  display: inline-block;
  flex-grow: 1;
}
.math_params div {
  display: flex;
  margin-right: 12px;
}
.math_params input {
  width: 40px;
  text-align: center;
  display: inline-block;
}

.base-timer {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 10px;
  }
  
  .base-timer__svg {
    transform: scaleX(-1);
  }
  
  .base-timer__circle {
    fill: none;
    stroke: none;
  }
  
  .base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: grey;
  }
  
  .base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
  }
  
  .base-timer__path-remaining.green {
    color: rgb(65, 184, 131);
  }
  
  .base-timer__path-remaining.orange {
    color: orange;
  }
  
  .base-timer__path-remaining.red {
    color: red;
  }
  
  .base-timer__label {
    position: absolute;
    width: 130px;
    height: 130px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgb(65, 184, 131);
  }

.math_example {
    font-size: 35pt;
    color: black;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    margin: 20px 0;
}

#math_result_value {
    text-align: center;
    vertical-align: top;
    height: 50px;
    line-height: 30px;
    width: 80px;
    font-size: 30px;
    padding: 0;
    margin-right: 0;
}
#math_result_value.correct {
    color:greenyellow;
}
#math_result_value.wrong {
    color: indianred;
}

#btnsubmit {
    width: 24px;
    height: 48px;
    vertical-align: top;
    margin: 0;
}

.keyboard {
    max-width: 400px;
    font-size: 20pt;
    margin: 0 auto;
}
.keyboard input {
    width: 31%;
    height: 40px;
    margin: 0;
    padding: 0;
    font-size: 20px;
    -webkit-appearance: button;
}
.keyboard input.invisible {
    opacity: 0;
    cursor: pointer;
}

.stopped #math_timer,
.stopped .math_example,
.stopped .keyboard
{
    opacity: 0.5;
}

.total_result {
    margin-top: 20px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    color: grey;
}
#correct_answers, .correct {
    color: green;
}
#wrong_answers, .wrong {
    color: red;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.winbox.modern .wb-body {
  color: #000 !important;
  background: #e4e5e5 !important;
  padding: 20px;
}

.math_stats {
  margin-bottom: 30px;
}
.math_stats > div {
  width: 25%;
  position: relative;
  display: inline-block;
  margin: 0 3%;
  border: 3px solid #FFF;
  border-radius: 20px;
  background: rgb(16,191,0);
  background: linear-gradient(33deg, rgba(16,191,0,1) 0%, rgba(11,255,72,1) 71%, rgba(1,171,24,1) 100%);
  text-align: center;
}
.math_stats > div.tries {
  background: rgb(0,65,191);
  background: linear-gradient(33deg, rgba(0,65,191,1) 0%, rgba(11,143,255,1) 71%, rgba(1,53,171,1) 100%);
}
.math_stats > div.rating {
  background: rgb(93,0,191);
  background: linear-gradient(33deg, rgba(93,0,191,1) 0%, rgba(220,11,255,1) 71%, rgba(123,1,171,1) 100%);
}

.math_stats .stats_header {
  position: relative;
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
  text-align: right;
  padding-right: 10px;
}
.math_stats .stats_value {
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 32px;
  margin-bottom: 10px;
}
.math_stats .pr .stats_value:before {
  content: "";
  width: 32px;
  height: 32px;
  margin-right: 5px;
  vertical-align: middle;
  background: url("/img/record.png") no-repeat;
  display: inline-block;
}
.math_stats .tries .stats_value:before {
  content: "";
  width: 32px;
  height: 32px;
  margin-right: 5px;
  vertical-align: middle;
  background: url("/img/bars.png") no-repeat;
  display: inline-block;
}
.math_stats .rating .stats_value:before {
  content: "";
  width: 32px;
  height: 32px;
  margin-right: 5px;
  vertical-align: middle;
  background: url("/img/medal.png") no-repeat;
  display: inline-block;
}

.math_controls input {
  height: 40px;
  border: 1px solid rgb(185, 185, 185);
  background: rgb(219,255,170);
  background: linear-gradient(0deg, rgba(219,255,170,1) 0%, rgba(247,255,228,1) 71%, rgba(232,255,178,1) 100%);
}
.math_controls input:hover {
  background: rgb(219,255,170);
  background: linear-gradient(180deg, rgba(219,255,170,1) 0%, rgba(247,255,228,1) 71%, rgba(232,255,178,1) 100%);
}
.math_controls input:disabled:hover {
  cursor:default;
}
.math_controls input:disabled {
  background: rgb(215,215,215);
  background: linear-gradient(0deg, rgba(215,215,215,1) 0%, rgba(247,255,228,1) 71%, rgba(221,221,221,1) 100%);
}

.chartcontainer {
  background: #FFF;
  border-radius: 20px;
  margin-top: 30px;
}


.rating_table {
  margin-top: 40px;
  font-size: 14px;
  border-collapse: collapse;
  border-spacing: 0;
}
.rating_table th {
  padding: 5px;
  background-color: darkseagreen;
  text-align: center;
}
.rating_table td {
  padding: 10px;
  background: rgb(242,207,255);
  background: linear-gradient(0deg, rgba(242,207,255,1) 0%, rgba(232,193,255,1) 100%, rgba(221,221,221,1) 100%);
  text-align: center;
}
.rating_table tr:first-child th:first-child { border-top-left-radius: 10px; }
.rating_table tr:first-child th:last-child { border-top-right-radius: 10px; }
.rating_table tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.rating_table tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.rating_table .username {
  font-weight: bold;
  font-size: larger;
}
.rating_table td .userinfo div {
  text-align: left;
}
.rating_table .placerating {
  font-size: large;
  max-width: 80px;
}
.rating_table .maxcorrect {
  font-size: large;
  font-weight: bold;
}
.rating_table .currentuser td {
  background: rgb(204,212,255);
  background: linear-gradient(0deg, rgba(204,212,255,1) 0%, rgba(230,220,255,1) 72%, rgba(183,183,255,1) 100%, rgba(238,173,255,1) 100%);
}
.rating_table .currentuser .placerating {
  font-weight: bold;
  font-size: xx-large;
}

.congrats {
  margin: 0;
}
.shareresult {
  margin-bottom: 20px;
}

@media (max-width: 570px) {  
  .math_stats > div .stats_header {
    text-align: center;
    padding: 3px 0;
    font-size: 12px;
  } 
  .math_stats > div.pr {
    width: 32%;
    margin: 0;
  } 
  .math_stats > div.tries {
    width: 31%;
    margin: 0 5px;
  }
  .math_stats > div.rating {
    width: 31%;
    margin: 0;
  }
  .math_stats .tries .stats_value:before {
    content: "";
    width: 32px;
    height: 32px;
    margin: 0 auto;
    display: block;
  }
  .math_stats .rating .stats_value:before {
    content: "";
    width: 32px;
    height: 32px;
    margin: 0 auto;
    display: block;
  }
  .math_stats .pr .stats_value:before {
    content: "";
    width: 32px;
    height: 32px;
    margin: 0 auto;
    display: block;
  }
  
  .rating_table {
    font-size: 10px;
  }
}