.calculator-credit {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  height: 400px;
  width: 800px;
  background: #f8f8f8;
  border-radius: 10px;
  border: 1px solid #c7c7c7;
  padding: 20px 0px;
  user-select: none;
}

.block {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  /*margin: auto;*/
  height: 88px;
  width: 700px;
}


.label {
  font: bold 14px sans-serif;
  width: 240px;
  color: #000000;
}

.slider {
  height: 40px;
  width: 360px;
  border-radius: 5px;
}

.ruler {
  position: relative;
  height: 40px;
  width: 300px;
  border-radius: 5px;
}

.ruler-handle {
  position: absolute;
  height: 40px;
  width: 20px;
  background: #ff9920;
  border-radius: 8px;
  z-index: 1;
}

.ruler-bar {
  position: absolute;
  height: 20px;
  width: 300px;
  background: #FFFFFF;
  border-radius: 5px;
  border: 1px solid #c7c7c7;
  top: 10px;
  left: 0px;
}

.ruler-scale {
  position: absolute;
  /*background: #ffd821;*/
  height: 40px;
  width: 300px;
}
.ruler-scale-labels {
  position: absolute;
  top: -20px;
  height: 20px;
  width: 10000px;
  font: normal 14px sans-serif;
  color: #c7c7c7;
}

.scale-label {
  position: absolute;
}

.scale-section {
  position: absolute;
  height: 40px;
  width: 2px;
  background-color: #c7c7c7;
}

.area-number {
  font: bold 20px sans-serif;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  border: 1px solid #c7c7c7;
  text-align: center;
  color: #000000;
}

.block-4,
.block-5,
.block-6 {
  width: 460px;
  justify-content: space-between;
}

.credit-label {
  font: bold 18px sans-serif;
}

.payment-label {
  font: bold 20px sans-serif;
  color: #ff7f00;
}

.credit-area,
.payment-area {
  display: flex;
  height: 50px;
  width: 100px;
  background-color: white;
  border-radius: 10px;
  border: 1px solid #c7c7c7;
}

.overPayment-area {
  display: flex;
  justify-content: space-around;
  height: 40px;
  width: 220px;
}

.overPayment-num,
.overPayment-percent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 90px;
  background-color: #f8f8f8;
  border-radius: 10px;
  border: 1px solid #c7c7c7;
  margin: auto;
  font: normal 14px sans-serif;
  color: #555555;
}

.credit-sum {
  margin: auto;
  font: bold 20px sans-serif;
}

.payment-sum {
  margin: auto;
  font: bold 26px sans-serif;
  color: #ff7f00;
}