.trform_div{
  width:90vw;
  margin:20vw auto;
  background:#c44;
  border:2px solid #004;
  border-radius:10px;
  padding:10px;
  text-align:center;
}
.trform_table{
  width:70vw;
  margin:1vw auto;
  border-collapse:separate;
  border-spacing:5px;
  border:2px solid #000;
  border-radius:10px;
  background:#dfd;
  font-size:1.6vw;
}
.trform_table td{
  border:1px solid #00f;
  padding:0 0 0 3px;
  text-align:left;
}
.trform_table td:nth-child(1){
  width:22vw;
}
.trform_table td:nth-child(2){
  width:20vw;
  font-size:1.5vw;
}
.trform_table td:nth-child(3){
  width:8vw;
  font-size:1.5vw;
  text-align:center;
}

.trform_table td:nth-child(4){
  border:none;
  text-align:center;
}
.trform_table caption{
  font-size:2vw;
  font-weight:normal;
  color:#fc0;
}

.trform_table2{
  width:70vw;
  margin:1vw auto;
  border-collapse:separate;
  border-spacing:5px;
  border:2px solid #000;
  border-radius:10px;
  background:#bbd;
  font-size:1.4vw;
}
.trform_table2 td{
  border:1px solid #aab;
  padding:0 0 0 3px;
  text-align:left;
}
.trform_table2 td:nth-child(1){
  width:22vw;
}
.trform_table2 td:nth-child(2){
  font-size:1.3vw;
}










.t2 label{ margin:10px;}
.t2 { cursor: pointer; display: inline-block; font-size: 1.3vw; height: 1.3vw; }
.t2 input[type=checkbox] { display: none; }
.t2 .text { vertical-align: top; }

.t2 span.value {
  position: relative;
  display: inline-block;
  top: 0.2vw;
  width: 7vw;
  height: 2.4vw;
  border-radius: 2.4vw;
  border: 1px solid #888;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 1.3vw;
}
.t2 span.value:before {
  position: absolute;
  display: block;
  content: '';
  width: 2.0vw;
  height: 2.0vw;
  border-radius: 2.0vw;
  margin: 0;
  transition: all 0.2s ease;
  background-color: #88f;
  border: 1px solid #88f;
  z-index: 1;
  left: 0px;
}
.t2 span.value:after {
  position: absolute;
  content: 'NO';
  line-height: 2.5vw;
  right: 5px;
  color: #000;
}
.t2 input:checked ~ span.value { background-color: blue; }
.t2 input:checked ~ span.value:before { left: 4.8vw; }
.t2 input:checked ~ span.value:after { content: 'YES'; color: white; opacity: 0.9; font-weight: bold; left: 5px; }

.field__input {
  --uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);
  background-color: transparent;
  border-radius: 0;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  font-size: inherit;
}

.field__input:focus::-webkit-input-placeholder {
  color: var(--uiFieldPlaceholderColor);
}

.field__input:focus::-moz-placeholder {
  color: var(--uiFieldPlaceholderColor);
}

/*
=====
CORE STYLES
=====
*/

.field {
  --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 1rem);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 0);
  --uiFieldBorderColorActive: var(
    --fieldBorderColorActive,
    rgba(22, 22, 22, 1)
  );

  display: var(--fieldDisplay, inline-flex);
  position: relative;
  font-size: var(--fieldFontSize, 1rem);
}

.field__input {
  box-sizing: border-box;
  width: var(--fieldWidth, 100%);
  height: var(--fieldHeight, 3rem);
  padding: var(--fieldPaddingTop, 1.25rem) var(--uiFieldPaddingRight)
    var(--fieldPaddingBottom, 0.5rem) var(--uiFieldPaddingLeft);
}

.field__input:focus {
  outline: none;
}

.field__input::-webkit-input-placeholder {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.field__input::-moz-placeholder {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.field__input:focus::-webkit-input-placeholder {
  opacity: 1;
  transition-delay: 0.2s;
}

.field__input:focus::-moz-placeholder {
  opacity: 1;
  transition-delay: 0.2s;
}

.field__label-wrap {
  box-sizing: border-box;
  pointer-events: none;
  cursor: text;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.field__label-wrap::after {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 0;
  opacity: 0;

  position: absolute;
  bottom: 0;
  left: 0;
}

.field__input:focus ~ .field__label-wrap::after {
  opacity: 1;
}

.field__label {
  position: absolute;
  left: var(--uiFieldPaddingLeft);
  top: calc(50% - 0.5em);

  line-height: 1;
  font-size: var(--fieldHintFontSize, inherit);

  transition: top 0.2s cubic-bezier(0.9, -0.15, 0.1, 1.15),
    opacity 0.2s ease-out, font-size 0.2s ease-out;
}

.field__input:focus ~ .field__label-wrap .field__label,
.field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label {
  --fieldHintFontSize: var(--fieldHintFontSizeFocused, 0.75rem);

  top: var(--fieldHintTopHover, 0.25rem);
}

/* effect 1 */

.field_v1 .field__label-wrap::after {

  transition: opacity 0.2s ease-out;
}


/* ===== LEVEL 4. SETTINGS ===== */

.field {
  --fieldBorderColor: #d1c4e9;
  --fieldBorderColorActive: #673ab7;
}

.regsubmit{
  padding: 2px;
  border: 1px solid #888;
  height:2.4vw;
  line-height:1.5vw;
  cursor: pointer;
  border-radius: 1vw;
  margin:0.5vw 2vw 0.5vw 1vw;
  width:15vw;
  color:#000;
  background: #99e0b2;
  font-size:1.5vw;
}
.regsubmit:hover{
  color:#99e0b2;
  background: #00f;
}

/* Hide div after 4 seconds */
.hidedivafter{
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 4s;
  position: absolute;
  background: rgba(0,0,255,.7);
  color:#fff;
  border:2px solid #f00;
  font-size:1.4vw;
  line-height:4vw;
  border-radius:10px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:5px 10px;
  width:30vw;
  z-index:9999;
  text-align:center;
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}