body, html {
     background-color: #EBECF0;
}
  body, p, input, select, textarea, button {
     font-family: monospace;
     letter-spacing: -0.2px;
     font-size: 14px;
}
 div, p {
     color: #BABECC;
     text-shadow: 1px 1px 1px #FFF;
} 
 h1 {
     font-size: 22px;
     margin: 0px 0px 20px 0px;
} 

 body, html {
  margin: 0;
  padding: 0;
} 

.container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.box {
  flex-basis: 32.66%;
  box-sizing: border-box;
  padding: 30px 20px 30px 20px;
}

.box-ads {
  text-align: center;
  flex-basis: 98%;
}

.ads img {
    height: 60px;
    width: 60px;
    margin: 10px;
	cursor: pointer;
}

button {
	background-color: white;
	border: none;
	padding: 10px;
	margin: 10px;
	cursor: pointer;
}


 form {
     margin: 0 auto;
}
 @font-face {
     font-family: monospace;
}
 .input-group-center {
	 width: 100%;
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;
     margin-bottom: 20px;
}
 .otp {
     font-size: 32px;
     font-family: monospace;
     color: royalblue;
     font-weight: 600;
}
 .segment {
     text-align: center;
	 padding-bottom: 20px;
}
 #qrcode-container {
     display: flex;
     justify-content: center;
     margin-bottom: 10px;
     min-height: 200px;
     border-radius: 20px;	 
     margin: 7px 7px 7px 0px;
     box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
     padding: 10px;

}
 button, input, select, textarea {
     border: 0;
     outline: 0;
     font-size: 10pt;
     border-radius: 20px;
     padding: 12px;
     background-color: #EBECF0;
     /* text-shadow: 1px 1px 0 #FFF; */
	 margin: 0px 4px 0px 4px;
	 box-sizing: border-box;
}

textarea {
    padding: 12px 0 12px 12px;
}
 label {
     display: block;
     width: 100%;
     color: grey;
     font-size: 9pt;
     padding-left: 22px;
}
 input, select, textarea {
     box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
     width: 100%; 
	 width: -moz-available;
     x-sizing: border-box;
     transition: all 0.2s ease-in-out;
     appearance: none;
     -webkit-appearance: none;
     margin-top: 3px;	 
     margin-bottom: 7px;
}

.w40 {
	width: 40%;
}

.w60 {
	width: 60%;
}

 select {
	cursor: pointer;
}
 input:focus {
     box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
 button {
     color: #61677C;
     font-weight: bold;
     box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
     transition: all 0.2s ease-in-out;
     cursor: pointer;
     font-weight: 600;
}
 button:hover {
     box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
 button:active {
     box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
 button .icon {
     margin-right: 8px;
}
 button.unit {
     line-height: 0;
     width: 52px;
     height: 52px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     margin: 0px 0px;
     font-size: 19.2px;
}
 button.unit .icon {
     margin-right: 0;
}
 button.mini {
     line-height: 0;
     width: 32px;
     height: 32px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     /*margin: 0 8px;*/
     font-size: 19.2px;
}
 button.clicked {
     box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
 button:disabled {
     color: lightgray;
     box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
 .input-group {
     display: flex;
     align-items: center;
     justify-content: flex-start;
}
 .input-group label {
     margin: 0;
     flex: 1;
}

/* progress */
 .animated-progress {
     width: 100%;
     height: 30px;
     border-radius: 20px;
     margin: 20px 10px;
     overflow: hidden;
     position: relative;
	 text-shadow: none;
     box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
     transition: all 0.2s ease-in-out;
}
 .animated-progress span {
     height: 100%;
     display: block;
     width: 0;
     color: rgb(255, 251, 251);
     line-height: 30px;
     position: absolute;
     text-align: center;
     padding-right: 5px;
     transition: width 1s ease-in-out;
}
 .progress-blue span {
     background-color: royalblue;
}

textarea
 textarea {
     resize: none; 
     width: 100% 
}
 .range {
     height: 300px;
     font-family: monospace;
	 font-size: 11px;
}
 .range2 {
     height: 130px;
     font-family: monospace;
	 font-size: 11px;
}
 .uri {
     height: 130px;
	 font-size: 11px;
}
validation
 input:invalid + .error-circle {
     display: inline-block;
}
 .error-circle {
     display: none;
     min-width: 20px;
     height: 20px;
     background-color: red;
     color: white;
     text-align: center;
     line-height: 20px;
     border-radius: 50%;
     margin-left: -36px;
     margin-right: 12px;
}

@media screen and (max-width: 1200px) {
  .box, .box-ads {
	flex-basis: 49%;
  }
} 

@media screen and (max-width: 800px) {
  .box, .box-ads {
	flex-basis: 98%;
  }
}

.box-ads {
/*   display: none; */
}