:root {
  touch-action: pan-x pan-y;
  height: 100%
}

body {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-size: 18px;
  *background: #f6f6f6;
  background: white;
  padding-top: 16px;
  color: #194269;
  width: 100%;
  *height: auto;
  *text-align: center;
}

p {
  font-family: Raleway;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: left;
  color: #65809B;
  padding-top: 5px;
}

input ,
textarea {
  font-family: Raleway;
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  text-align: left;
  border: 2px solid #B8C4D1;
  background: #E8ECF0;
  color: #194269;
}

input::placeholder,
textarea::placeholder {
  color: #194269;
}

.input {
  font-family: Raleway;
  font-size: 18px;
  height: 60px;
}

.input_check {
  font-family: Raleway;
  font-size: 14px;
  color: #194269;
}

.input_check_red {
  font-family: Raleway;
  font-size: 14px;
  color: #E50050;
}

a {
  text-decoration: none;
}

textarea {
  padding-top: 12px;
  font-family: Raleway;
  font-size: 18px;
}

h1 {
  font-family: Comfortaa;
  font-size: 22px;
  font-weight: 700;
  color: #009ee3;
}

.champ-total {
  width: 100%;
  text-align: center;
  text-align :left;
}

.out {
  font-family: Raleway;
  font-size: 46px;
  font-weight: 800;
  color: #194269;
  *line-height: 60px;
}

.iconify {
  margin-top: -45px;
  margin-right: 60px;
  float: right;
  width: 30px;
  height: 30px;
}

#taux {
  height: 59px;
  width: 103%;
  padding-left: 20px;
  *margin-top:  5px;
  *margin-right: -11px;
  *margin-left: 11px;
  padding-right: 11px;
}

#nbs_interimaires, #nbs_heures_effectuee {
  margin-top: -10px;
  height:40px;
  text-align: center;
}

input[type='submit'],
input[type='button'] {
  font-family: Raleway;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 16px 24px;
  background: #E50050;
  border-radius: 40px;
  box-shadow: 0px;
  border: none;
  cursor: pointer;
  color: white;
  box-shadow: 0px 4px 41px 0px #00000029;
}

input[type='submit']:hover,
input[type='button']:hover {
  background-color: #009de0;
  transition: all .2s linear;
}

label {
  font-family: Raleway;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  color: #194269;
  padding-bottom: 8px;
}

form {
  background: #FFFFFF;
  box-shadow: 0px 8px 58px rgba(0, 0, 0,0.1);
  border-radius: 10px;
  *width: 500px;
  *max-width: 600px;
  padding: 10px;
  text-align: center;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 5;
}

.box {
  margin: 10px;
  padding-bottom: 10px;
  padding-top: 30px;
  background: #E6F5FC;
  border-radius: 10px;
}

.box label {
  padding: 0;
  text-align: center;
}

input {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  *width: 100%;
  *float: left;
}

.number-input,
.number-input * {
  *box-sizing: border-box;
}

.number-input button {
  *align-items: center;
  *justify-content: center;
  width: 1.9rem;
  height: 1.92rem;
  cursor: pointer;
  *margin: 0;
  *position: relative;
  float: right;
  border: 2px solid #B8C4D1;
  background: #E8ECF0;
  color: #194269;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #212121;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.moins {
  margin-top: -2px;
}

.number-input input[type=number] {
  max-width: 5rem;
}


@media screen and (max-width: 767px) {
  input[type='submit'],
  input[type='button']
  {
    font-family: Raleway;
    font-size: 14px;
  }

  .box_mobile {
    flex-direction: column;
  }
  .box {
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 10px;
		margin-bottom: 10px;
  }

}