/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.bg-warning-light { background: rgb(248, 234, 174); }
.bg-primary-light { background: rgb(190, 223, 243);  }
.bg-success-light { background: rgb(205, 243, 189);  }
.bg-danger-light { background: rgb(255, 208, 208);  }
.ibg-warning-light { background: rgb(245, 225, 160); }
.ibg-primary-light { background: rgb(193, 215, 230);  }
.ibg-success-light { background: rgb(217, 243, 207);  }
.ibg-danger-light { background: rgb(241, 214, 214);  }
.ibg-pink-light { background: rgb(250, 200, 255); }
.ibg-purple-light { background: rgb(179, 152, 201); }
.ibg-info-light { background: rgb(152, 189, 201); }
.ibg-gray { background: rgb(186, 186, 186);  }
.ibg-gray-light { background: rgb(218, 218, 218);  }
.bg-purple { background: rgb(139, 0, 252); }
.bg-pink { background: rgb(231, 0, 252); }
.bg-orange { background: rgb(252, 113, 0); }
.bg-yellow { background: rgb(236, 233, 5); }
.bg-blue-dark { background: rgb(25, 38, 109); }
.border-warning { border: 2px solid rgb(236, 144, 5); }
.border-orange { border:2px solid  rgb(236, 113, 5); }
.border-primary { border:2px solid  rgb(5, 105, 236); }
.border-info { border:2px solid  rgb(7, 148, 208); }
.border-purple { border:2px solid  rgb(137, 29, 230); }
.border-pink { border:2px solid  rgb(189, 20, 186); }
.border-danger { border:2px solid  rgb(181, 4, 4); }
.border-blue-dark { border:2px solid  rgb(5, 21, 171); }
.border-success { border:2px solid  rgb(70, 164, 3); }
.border-yellow { border:2px solid  rgb(236, 220, 5); }

.table-sm {
  font-size: 12px;
}
.box-menu {
  margin:2px;
}

.box-row{
    margin:2px;
}
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.line-top { border-top: 1px solid #D1D1D1; }
.line-bottom { border-bottom: 1px solid #D1D1D1; }
.line-left { border-left: 1px solid #D1D1D1; }
.line-right { border-right: 1px solid #D1D1D1; }

.img-gray { 
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.miniimg { width:65px !important; margin-right:4px; }
body {
  margin-bottom:80px;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
  overflow:scroll;

  height: 1000px; /* Make this site really long */
  overflow-y: auto;
  overflow-x: hidden;
  margin-top:107px; 

}
td{ vertical-align:middle !important; }
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  }

  .product-img{ 
    max-height:26vh !important; 
    text-align: center;
  }
.product-img img{ 
  max-height:20vh !important; 
  margin-left: auto;
  margin-right: auto;
}


.page { 
  align-items: center;  
  justify-content: center; 
  margin-left:0;
  margin-right:0;
  margin-bottom:0;
  padding-top:0vw;
  padding-bottom:100px;
  padding-left:0.8vw;
  padding-right:0.8vw;
  min-height:100vh;
}

.btn { 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  font-size: 12px;
}

.steel {
  box-shadow: -61px -32px 126px -39px rgba(0,0,0,0.32) inset;
  -webkit-box-shadow: -61px -32px 126px -39px rgba(0,0,0,0.32) inset;
  -moz-box-shadow: -61px -32px 126px -39px rgba(0,0,0,0.32) inset;
}
.card {
  box-shadow: 1px 3px 129px -27px rgba(0,0,0,0.17) inset;
-webkit-box-shadow: 1px 3px 129px -27px rgba(0,0,0,0.17) inset;
-moz-box-shadow: 1px 3px 129px -27px rgba(0,0,0,0.17) inset;
}

.card .btn, .shadow { 
  -webkit-box-shadow: 0px 0px 14px -4px rgba(0,0,0,0.56);
  -moz-box-shadow: 0px 0px 14px -4px rgba(0,0,0,0.56);
  box-shadow: 0px 0px 14px -4px rgba(0,0,0,0.56);
}

.shadow_in_top {
  box-shadow: -39px 73px 132px -41px rgba(0,0,0,0.73) inset;
  -webkit-box-shadow: -39px 73px 132px -41px rgba(0,0,0,0.73) inset;
  -moz-box-shadow: -39px 73px 132px -41px rgba(0,0,0,0.73) inset;
}

.shadow_bottom {
  box-shadow: 1px 29px 26px -32px rgba(0,0,0,0.75);
  -webkit-box-shadow: 1px 29px 26px -32px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 29px 26px -32px rgba(0,0,0,0.75);
  }

.shadow_in_botom {
  box-shadow: 1px -32px 26px -32px rgba(0,0,0,0.75) inset;
  -webkit-box-shadow: 1px -32px 26px -32px rgba(0,0,0,0.75) inset;
  -moz-box-shadow: 1px -32px 26px -32px rgba(0,0,0,0.75) inset;
  }

.btn-main, .box-menu, .inshadow {
-webkit-box-shadow: inset 0px 0px 18px -4px rgba(0,0,0,0.56);
-moz-box-shadow: inset 0px 0px 18px -4px rgba(0,0,0,0.56);
box-shadow: inset 0px 0px 18px -4px rgba(0,0,0,0.56);
}

.card-body {
  padding: 0.5rem;
}
.input-group-text{
  font-size: 12px;
}
.btn-menu:active {
  background-color:#999999 !important;
}

.btn-main { 
  width:100%;
}

.btn-main:active {
  background-color:#aa0000 !important;
}

.progress{ display:none; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; border-radius:50%; width:15vw; height:15vw; box-shadow: black; position:absolute; z-index:5; right:40vw; top:20vh; padding:0; font-size:4vw; line-height: 15vw; font-weight: bold; }
.upload-pic-wrapper{ position:relative; width:100%; margin: auto; }
.upload-pic-wrapper img{ width:100%; margin:4px; }
.custom-file-btn{ position:absolute; right:4px; top:4px;  }
.custom-file-input{ position:absolute;  right:4px; top:4px; }

[data-toggle="collapse"] .fa:before {  
  content: "\f13a";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f138";
}

#progressbar {
  margin-bottom: 30px;
  padding-left:0;
  overflow: hidden;
  color: #999999;
  text-align: center;
}

#progressbar .active {
  color: #660000;
}

#progressbar li {
  list-style-type: none;
  font-size: 12px;
  width: 25%;
  float: left;
  position: relative;
}

#progressbar #account:before {
  content: "1"
}

#progressbar #personal:before {
  content: "2"
}

#progressbar #payment:before {
  content: "3"
}

#progressbar #confirm:before {
  content: "4"
}

#progressbar li:before {
  width: 30px;
  height: 30px;
  line-height: 25px;
  display: block;
  font-size: 12px;
  color: #ffffff;
  background: #999999;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 15px;
  z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #660000;
}

.card { margin-top:4px; }
.card-body.btn-center {
  text-align: center;
}
.edit {
  float: right;
}

.box{
  width: 100%;
  padding:6px;
}

.middle{
  vertical-align: middle;
  text-align: center;
}
.logo{ height:auto;  }

#top:after{  position:absolute; color:#FFFFFF; left:20px; font-size:12px !important; }
.pic-info{ margin-bottom:2vw; font-size: 0.8rem; text-align: center; }

.btn-full { margin:2px; padding:6px; width:100%; }

/* desktop */
@media only screen and (min-width: 1200px) {
  .logo{ width:150px;  }
  #top:after{ content:"";  }
  .btn-menu { padding:2vw; width:100%; }
  .btn-bar { padding:2vw; font-size: 1vw; }
  .btn-main { padding:1vw; font-size: 1vw !important; }
}

/* tablet landscape */
@media only screen and (max-width: 1200px) {
  .logo{ width:12%;  }
  #top:after{ content:""; }
  .btn-menu { padding:2vw; width:100%; }
  .btn-bar { padding:1.5vw; font-size: 1.6vw; }
  .btn-main { padding:1vw; font-size: 1.3vw !important; }
}

/* tablet portrait */
@media only screen and (max-width: 780px) {
  .logo{ width:26%;  }
  #top:after{ content:""; }
  .btn-menu { padding:2vw; width:100%; }
  .btn-bar { padding:2vw; font-size: 2vw; }
  .btn-main { padding:1vw; font-size: 2vw !important; }
}

/* Mobile */
@media only screen and (max-width: 480px) {
  .logo{ width:35%;  }
  #top:after{ content:""; }
  .btn-menu { padding:2vw; width:100%; }
  .btn-bar { padding:2vw; font-size: 3.6vw; }
  .btn-main { padding:1vw; font-size: 3vw !important; }
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

td.tdtop {
  border-top: 0;
}

.minibar {
  width: 100%;
}

#comment,
#comment:focus   
{
         background: #f5f3dc;
         border-radius: 3px;
         border: 1px #a9ac62 solid;
         outline-width: 0;
         width: 100% !important;
         overflow: hidden;
}

.press:hover {
  background-color: rgb(206, 206, 206) !important;
}

.press:active {
  background-color: orange !important;
}

.hidden { display:none; }

#signature {
  width:auto;
  margin:0;
  text-align:center;
  min-height:350px !important;
  min-width:340px;
  transition:.2s;
}

.jSignature { height: 350px !important;  }

.radioBtn .notActive{
  color: #d3aeae !important;
  background-color: rgb(235, 209, 209) !important;
  border: #976666 !important;
}

.news-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.news-list>.item {
  border-bottom: 1px solid rgba(0, 0, 0, .125);
  margin: 0 !important;
  padding: 6px 0 !important;
}

.news-list>.item img {
  width: 100%;
}

.news-list>.item.new-title {
  font-weight: bold;
}

.news-list>.item span {
  font-weight: normal;
}

.news-list>.item div {
  margin: 0 !important;
  padding: 6px !important;
}

/* Mini Portrait */
@media only screen 
  and (min-device-width: 160px) 
  and (max-device-width: 444px) 
  and (-webkit-min-device-pixel-ratio: 1)
  and (orientation: portrait) { 
    #device::before { content:'ดูผ่านหน้าจอขนาดเล็ก'; }

    .child {
    flex: 1 1 auto;
    flex-basis: 50%;
    }

    .navbar {
      padding: 0.1rem 0.1rem;
  }

    .hicontent {
      height:76vh;
  }

}


/* Mobile Portrait */
@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 844px) 
  and (-webkit-min-device-pixel-ratio: 1)
  and (orientation: portrait) { 
    #device::before { content:'ดูผ่านมือถือในแนวตั้ง'; }

    .child {
    flex: 1 1 auto;
    flex-basis: 40%;
    }

    .hicontent {
        height:76vh;
    }

}

/* Mobile Landscape */
@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 915px) 
  and (-webkit-min-device-pixel-ratio: 1)
  and (orientation: landscape) { 
    #device::before { content:'ดูผ่านมือในแนวนอน'; }

    .child {
    flex: 1 1 160px;
    flex-basis: 18%;
    }

    .hicontent {
        height:56vh;
    }

}

/* Tablet Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #device::before { content:'ดูผ่านแท๊ปเล็ตในแนวตั้ง'; }

    .child {
    flex: 1 1 160px;
    flex-basis: 40%;
    }

    .hicontent {
      height:82vh;
  }

}

/* Tablet Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1180px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #device::before { content:'ดูผ่านแท๊ปเล็ตในแนวนอน'; }

    .child {
    flex: 1 1 16px;
    flex-basis: 20%;
    }

    .hicontent {
      height:70vh;
  }
}

/* Laptop Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1940px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    #device::before { content:'ดูผ่านหน้าจอขนาดใหญ่'; }

    .child {
    flex: 1 1 16px;
    flex-basis: 20%;
    align-items:center;
    }

    .hicontent {
        height:80vh;
    }

}

.parent{
  width:100%;  display: flex; flex-wrap: wrap;
}

.parent btn { margin:1px; }

.hicontent{
    width:100%;  display: flex; flex-wrap: wrap;
}

.modal-backdrop {
  /* bug fix - no overlay */    
  display: none;   
}

.nav-tabs .nav-link:not(.active) {
  border-color: transparent !important;
}

.table td, .table th {
  padding: 0.55rem;
}