@import url('https://fonts.googleapis.com/css?family=Ubuntu:400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kalam:700&display=swap');
body {margin:28px 0px 0 0px; padding:0px 10px 0px 10px; background-color:#f2ecec}
body {font-family:'Ubuntu', sans-serif; font-size:19px; color:#661217; box-sizing:border-box; display: inline-block;}
sup {color:#ff0000; vertical-align:top}

input, textarea {border:1px solid #aa565c; background-color:#ffffff; width:250px; font-family:'Ubuntu', sans-serif; font-size:19px;color:#661217;}
textarea {height:200px; overflow:auto; width:90%; resize: none;}
.submit {background-color:#aa565c; border:1px solid #aa565c; width:150px; color:#f2ecec}
.check {width:auto; border:none;}
input#half {width:150px !important}
select {border:1px solid #C7CA5E; background-color:#ffffff;}
select,option {font-family:'Ubuntu', sans-serif; font-size:19px; color:#446c51; min-width:50px;}
::placeholder {color: #eef3e1; font-size: 17px;}
input[type="date"] {text-align:center;}
input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}

h1 {
    font-family: 'Kalam', cursive;
    font-weight: 700;
    font-size: 38px;
    margin: 0;
    padding: 50px 0 19px 0;
    color: #661217;
}

.key {float:right; margin-right:10px;}

.row {
    float: left;
    width: 100%;
    box-sizing:border-box;
    border:0px dotted #f00;
    padding:0 0 10px 0;
}
.col-sm-4 {
    float: left;
    width: 33%;
    box-sizing:border-box;
    border:0px dotted #ff0;
}
.col-sm-8 {
    float: left;
    width: 66%;
    box-sizing:border-box;
    border:0px dotted #ff0;
}
.col-sm-12 {
    float: left;
    width: 100%;
    box-sizing:border-box;
    border:0px dotted #00f;
}


input[type="checkbox"] {
  display:none;
}
input[type="checkbox"] + label::before {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 2px solid #8cad2d;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
}
input[type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #8cad2d;
}

@media(max-width:719px) {
 body {width:100%; /*font-size:1vh;*/}
 .row {padding:0 0 20px 0;}
 .col-sm-12 {            text-align:center;}
 .col-sm-4  {width:100%; text-align:center;}
 .col-sm-8  {width:100%; text-align:center;}
 input#half {width:250px !important}
 .key {float:none; margin-right:0px;}
 input[type="checkbox"] + label::before {
  display: inline-block;
  float:none;
  vertical-align: top;
 }
}