/*สีพื้นหลัง ช่องเลือก recep เลือก regis เนื้อหา*/
.moontreebody{
    background-color: #ffffff;
    border: 1px solid  #ffffff;
    border-radius: 11px;
    min-height : 100px;
    padding : 20px;
    margin-bottom : 30px;
}

.img-responsive{ /* logo*/
    max-width: 70%; height:auto; max-height:162px
}
/*ขนาด font ตรง label*/
.selectreception label{
    font-weight: 500;
}
/*สีพื้นหลัง input*/
.selectreception .form-control{
    background-color: #E5E5E5;
}

/*สีพื้นหลัง input ตอนโฟกัส*/
.selectreception .form-control:focus {
  background-color: #ffffff;
}

/* ขนาดอักศรของปุ่ม */
.selectreception button{
    font-size: 16px !important;
}
/* ปุ่มสีดำ */
.btn-dark{
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    color : white;

}
.btn-dark:hover {
  background: rgb(0, 0, 0);
  color: rgb(204, 204, 204);
}
/* ตอน focus ปุ่ม*/
  .btn-dark:focus {
    outline: none;
    color : white;
  }

  /*  สี panal ฉบับ moontree*/
.panel-moontree {
    border-color: #8B6F91;
}

.panel-moontree>.panel-heading {
    color: #fff;
    background-color: #8B6F91;
    border-color: #8B6F91;
}

/* erro  ข้อความแจ้งเตือน*/
.chip{
    color:#d93025; margin-bottom:5px;
}

/* ในส่วนหน้า thank เป็นความสูงของพื้นที่ว่าง*/
.savethankHeader{
   /* background-color: rgb(103, 58, 183);*/
    height: 50vh;
}

/* ในส่วนหน้า thank ตั้งค่าเริ่มต้น*/
.savethank{

    max-width: 80vw;
    width: 340px;
    height:auto;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.savethank .btn-dark{
    font-weight: bold;
}
.savethankPadding{ /* padding ข้อความ*/
    padding: 14px;
    font: 400 14px/20px Helvetica,Arial,sans-serif;
}
.savethankImage{
    margin-bottom: 20px;
}
.savethankPadding .img-responsive{
    max-width: 64px; height:auto; max-height:64px; /* ขนาดรูปภาพ*/
}

.savethankContent{ /*เนื้อหาข้อความ */
    text-align :center;
    font-size:130%;
    color:#54207D;
    margin-bottom: 20px;
    
}

.savethankTabcolor{ /*แถบสีเล็กๆ */
    background-color : rgb(174, 121, 255);
    height: 8px;
}
/* ในส่วนหน้า thank ตั้งค่าเริ่มต้น*/

/* radio */
.btn:focus {
    outline: none;
  }
@keyframes ripple {
    0% {
      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);
    }
    50% {
      box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
    }
    100% {
      box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
    }
  }
  .md-radio {
    margin: 15px 0;
    margin-bottom: 0px;
  }
  .md-radio.md-radio-inline {
    display: inline-block;
  }
  .md-radio input[type="radio"] {
    display: none;
  }
  .md-radio input[type="radio"]:checked + label:before {
    border-color: #8B6F91;
    animation: ripple 0.2s linear forwards;
  }
  .md-radio input[type="radio"]:checked + label:after {
    transform: scale(1);
  }
  .md-radio label {
    display: inline-block;
    height: 20px;
    position: relative;
    padding: 0 20px 0 28px;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
  }
  .md-radio label:before, .md-radio label:after {
    position: absolute;
    content: '';
    border-radius: 50%;
    transition: all 0.3s ease;
    transition-property: transform, border-color;
  }
  .md-radio label:before {
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.54);
  }
  .md-radio label:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    transform: scale(0);
    background: #8B6F91;
  }
  /*radio*/

.img-minus{
  width:auto;
  height:23px;
}
  .clear{clear:both; line-height:0; height:0; font-size: 1px}/*เคลีย float*/

  
    
/* ลายเซน */
*, *:before, *:after {
  box-sizing: border-box;
}

#frame {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
height: 260px;
width: 100%;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
margin-bottom: 8px;
margin-top: 20px;

}

*,
*::before,
*::after {
box-sizing: border-box;
}
.signature-crop {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
font-size: 10px;
width: 100%;
height: 100%;
max-width: 100%; /*ปรับความกว่างของลายเซนตรงนี้ด้วย */
max-height: 260px;
border: 1px solid #e8e8e8;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
border-radius: 4px;
padding: 10px;
}

.signature-crop::before,
.signature-crop::after {
position: absolute;
z-index: -1;
content: "";
width: 40%;
height: 10px;
bottom: 100px;
background: transparent;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-crop::before {
left: 20px;
-webkit-transform: skew(-3deg) rotate(-3deg);
        transform: skew(-3deg) rotate(-3deg);
}

.signature-crop::after {
right: 20px;
-webkit-transform: skew(3deg) rotate(3deg);
        transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
position: relative;
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
border: 1px solid #f4f4f4;
}

.signature-pad--body
canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
max-width: 100%;  /*ปรับความกว่างของลายเซนตรงนี้ด้วย */
max-height: 200px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
margin-top: 8px;
}

/* ลายเซน> */