.modal-wrapper {
  z-index:99999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}

.modal-wrapper.close {
  opacity: 1;
  visibility: hidden;
}

.modal {
  display: block;
  position: relative;
  top: 43%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0s ease-in-out;
   border:4px solid #EFEFEF; border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;
}

.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}

.head { 
  /*width: 100%;
  height: 56px;*/
  padding: 12px 30px;
  overflow: hidden;
  background: #51b087;
}

.btn-close {
  font-size: 20px;
  display: block;
  float: right;
  color: #fff;
}

.content {
  padding: 0%;
}


.layer_modal-wrapper {
  z-index:11;
  height: 100%;
  position: absolute;
  top: 0; 
  left: 0;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

.layer_modal-wrapper.open {
  opacity: 1;
}

.layer_modal-wrapper.close {
  opacity: 1;
  visibility: hidden;
}

.layer_modal {
  display: block;
  position: relative;
  background: #fff;
  transition: all 0s ease-in-out;
   border:4px solid #EFEFEF; border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;
}

.layer_modal-wrapper.open .modal {
  opacity: 1;
}

.layer_head { 
  /*width: 100%;
  height: 56px;*/
  padding: 4px 20px 4px 0px;
  overflow: hidden;
  background: #bbbbbb;
}

.layer_btn-close {
  font-size: 16px;
  display: block;
  float: right;
  color: #fff;
  font-weight:600;
}

.layer_content {
  padding: 0%;
}



.button-green1 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:.9rem;background:#48c975;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-green1{outline:0}
.button-green1:focus,.button-green1:hover{background:#169b45;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-green2 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:1rem;background:#48c975;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-green2{outline:0}
.button-green2:focus,.button-green2:hover{background:#169b45;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-green3 {display:inline-block;text-align:center;cursor:pointer;padding:.32em 1em;margin:0 0 0 0;font-size:1.2rem;background:#48c975;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-green3{outline:0}
.button-green3:focus,.button-green3:hover{background:#169b45;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }


.button-gray {display:inline-block;text-align:center; height:36px; min-width:50px; font-size:16px; border:1px solid #000; background:#c9c9c9;color:red;}


.button-gray1 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:.9rem;background:#c9c9c9;color:#000; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-gray1{outline:0}
.button-gray1:focus,.button-gray1:hover{background:#999999;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-gray2 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:1rem;background:#c9c9c9;color:#000; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-gray2{outline:0}
.button-gray2:focus,.button-gray2:hover{background:#999999;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-gray3 {display:inline-block;text-align:center;cursor:pointer;padding:.32em 1em;margin:0 0 0 0;font-size:1.2rem;background:#c9c9c9;color:#000; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-gray3{outline:0}
.button-gray3:focus,.button-gray3:hover{background:#999999;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-red1 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:.9rem;background:#e45331;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-red1{outline:0}
.button-red1:focus,.button-red1:hover{background:#c12c0a;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-red2 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:1rem;background:#e45331;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-red2{outline:0}
.button-red2:focus,.button-red2:hover{background:#c12c0a;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-red3 {display:inline-block;text-align:center;cursor:pointer;padding:.32em 1em;margin:0 0 0 0;font-size:1.2rem;background:#e45331;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-red3{outline:0}
.button-red3:focus,.button-red3:hover{background:#c12c0a;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-red4 {display:inline-block;text-align:center;cursor:pointer;padding:.7em 1.2em;margin:0 0 0 0;font-size:1.2rem;background:#e45331;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;font-weight: bold; }[data-whatinput=mouse] .button-red4{outline:0}
.button-red4:focus,.button-red4:hover{background:#c12c0a;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; font-weight: bold; }

.button-blue1 { display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:.9rem;background:#4b9cd2;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-blue1{outline:0}
.button-blue1:focus,.button-blue1:hover{background:#1583cc;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-blue2 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:1rem;background:#4b9cd2;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-blue2{outline:0}
.button-blue2:focus,.button-blue2:hover{background:#1583cc;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-blue3 {display:inline-block;text-align:center;cursor:pointer;padding:.32em 1em;margin:0 0 0 0;font-size:1.2rem;background:#4b9cd2;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-blue3{outline:0}
.button-blue3:focus,.button-blue3:hover{background:#1583cc;color:#000; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-blue4 {display:inline-block;text-align:center;cursor:pointer;padding:.7em 1.2em;margin:0 0 0 0;font-size:1.2rem;background:#4b9cd2;color:#fff; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;font-weight: bold; }[data-whatinput=mouse] .button-blue4{outline:0}
.button-blue4:focus,.button-blue4:hover{background:#1583cc;color:#fff; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; font-weight: bold; }


.button-orange1 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:.9rem;background:#f2ae35;color:#FFF; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-orange1{outline:0}
.button-orange1:focus,.button-orange1:hover{background:#d09021;color:#FFF; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-orange2 {display:inline-block;text-align:center;cursor:pointer;padding:4px 10px 6px 10px;margin:0 0 0 0;font-size:1rem;background:#f2ae35;color:#FFF; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-orange2{outline:0}
.button-orange2:focus,.button-orange2:hover{background:#d09021;color:#FFF; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-orange3 {display:inline-block;text-align:center;cursor:pointer;padding:.32em 1em;margin:0 0 0 0;font-size:1.2rem;background:#f2ae35;color:#FFF; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-orange3{outline:0}
.button-orange3:focus,.button-orange3:hover{background:#d09021;color:#FFF; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }

.button-orange4 {display:inline-block;text-align:center;cursor:pointer;padding:.7em 1.2em;margin:0 0 0 0;font-size:1.2rem;background:#f2ae35;color:#FFF; border:0px; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;font-weight: bold; }[data-whatinput=mouse] .button-orange4{outline:0}
.button-orange4:focus,.button-orange4:hover{background:#d09021;color:#FFF; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; font-weight: bold; }


.button-white2 {display:inline-block; padding:0 5px; margin:0 0 0 0; height:26px; background:#ffffff; color:#000; border-radius:3px 3px 3px 3px / 3px 3px 3px 3px; }[data-whatinput=mouse] .button-white2{outline:0}