/*** sof Progress bar ***/

.pwrap {
  width: 100%;
  min-height: 40px;
  z-index: -2;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 15px;
}

.pwrap div:first-child {
  margin-left: -2%;
}

.pprogress {
  margin: 0;
  margin-left: 0.5%;
  height: 40px;
  position: relative;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  transition: all 0.8s;
  color: #a5a5a5;
}

.pprogress:before,
.pprogress:after {
  content: "";
  position: absolute;
  transition: all 0.8s;
  /*z-index:-1;*/
}

.pprogress:before {
  height: 50%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.07);
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
}

.pprogress:after {
  height: 50%;
  width: 100%;
  top: 50%;
  left: 0;
  background: rgba(0, 0, 0, 0.07);
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}

.pwrap .active:before,
.pwrap .active:after {
  background: rgba(0, 155, 250, 1);
  content: "";
  position: absolute;
  transition: all 0.8s;
  z-index: -1;
}

.active.pprogress::after {
  top: 48% !important;
}

.pwrap .active {
  color: #fff !important;
  z-index: 99;
}

.pwrap .arrow-down {
  display: none;
}

@media all and (max-width: 600px) {

  .mobi-only {
    display: inline-block !important;
  }
  .desktop-only {
    display: none !important;
  }

  .pwrap {
    height: auto;
    white-space: normal;
    overflow: show;
  }
  .pprogress {
    width: 99% !important;
    height: auto;
    background: #efefef;
    text-align: left;
    padding-left: 20px;
  }

  .pprogress:before,
  .pprogress:after {
    display: none;
  }

  .pwrap div:first-child {
    margin-left: 0;
  }

  .pwrap .active {
    background: rgba(0, 142, 208, 1);
  }

  .pwrap .arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #efefef;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1px;
    margin-top: 1px;
  }

  .pwrap .arrow-down:last-child {
    display: none;
  }
}

/*** eof Progress bar ***/

/* show input value in confirmation page */

.dy-value {
  /*font-family: Menlo, Monaco, Consolas, "Courier New", monospace, 微軟正黑體;*/
  color: green;
  
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

}

.dy-section {
  background: #fff;
  padding: 10px;
}

.dy-group {
  background: #fff;
  border-bottom: 0px solid #efefef;
  margin: 0px;
  padding: 0px;
  clear: both;
}

.dy-group-standard,
.dy-group-inline {
  background: #eee !important;
  border-radius: 10px;
  padding: 15px 20px 20px 20px;
  margin: 20px 0px 20px 0px !important;
}

.dy-show-value .form-group {
  margin-bottom: 0;
}

.dy-show-value .dy-section {
  padding: 0
}

.dy-show-value .dy-label {
  color: #666;
  font-size: 0.8em;
}


.form-horizontal .checkbox {
  margin-left: 0px;
}

.primary-color {
  color: #0055a9
}

.input-group.date {
  max-width: 200px;
}

/* datepicker for BookingEnroll */

.DayQuotaFull .ui-state-default {
  background: #333 !important;
  color: #fff !important;
}

td.DayQuotaFull {
  opacity: 1 !important;
}

td.DayNotAva {
  opacity: 0.3 !important;
}

a.ui-state-default {
  background: green !important;
  color: #fff !important;
}

.DayLabel .ui-state-default {
  background: #aaa !important;
  color: #fff !important;
}

td.DayLabel {
  opacity: 1 !important;
}

.booking-legend {
  width: 20px;
  height: 20px;
}

.booking-legend-ok {
  background: green;
}

.booking-legend-full {
  background: #333;
}

.booking-legend-label {
  background: #aaa;
}

@media all and (max-width: 992px) {
  .logo {
    text-align: center !important;
  }

  /* Datepicker responsive */
  .ui-datepicker-inline {
    width: 100% !important;
  }

  .ui-datepicker-multi-2 .ui-datepicker-group {
    width: 99%;
  }
  .ui-datepicker-multi .ui-datepicker-group {
    float: none;
  }
}

.table tr.success>th,
.table tr.success>td,
.table tr.info>th,
.table tr.info>td,
.table tr.danger>th,
.table tr.danger>td,
.table tr.warning>th,
.table tr.warning>td {
  color: #333;
}