/* Products */
.OMBP li {
  white-space: nowrap;
  text-indent: -0.3rem;
  list-style-type: none;
}
.OMBP li::before {
  content: "• ";
  color: #ed1c24;
  font-size: x-large;
}
.border {
  color: #ed1c24;
  border-style: solid;
}
.border-rounded {
  color: #ed1c24;
  border-style: solid;
  border-radius: 10px;
}
.border-fq {
  border-bottom-style: solid;
  border-bottom-width: 1rem;
  border-bottom-color: #fcb040;
}
.txt-white {
  color: #FFF;
}
.txt-black {
  color: #000;
}
.image-cropper {
  width: 150px;
  height: 145px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.image-cropper-img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}
/* end Products */
/* FAQ */
.flip-container {
  perspective: 1000px;
}
/* flip the pane when hovered */
/*.flip-container.hover .back {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}*/
/*@media (min-width: 768px) {*/
  .flip-container .back, .flip-container:not(:hover) .back {
    color: transparent;
  }
  .flip-container:hover .back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    color: black;
  }
/*}*/
/*.flip-container.hover .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}*/
/*@media (min-width: 768px) {*/
  .flip-container:hover .front {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
/*}*/
/*.flip-container:hover .flipper,
.flip-container.hover .flipper {
	
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}*/
.flip-container,
.front,
.back {
  width: 100%;
  height: 350px;
}
/* flip speed goes here */
.flipper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */
.flip-container .front,
.flip-container .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
}
/* front pane, placed above back */
.flip-container .front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}
/* back, initially hidden pane */
.flip-container .back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.flipfront, .flipback {
  display: block;
}
.faq li {
  text-indent: -1.5rem;
  list-style-type: none;
  padding-right: 3rem;
}
.faq li::before {
  content: "• ";
  color: #fff;
  font-size: x-large;
}
.bottom-right {
  right: 0;
  bottom: 0;
  position: absolute;
}
/* end FAQ */
/* red* */
.marker,
.form-required {
  color: #f00;
}
.hyerlink-grey {
  color: #A9A9A9;
}
/* checkbox */
.btn span.glyphicon {
  opacity: 0;
}
.btn.active span.glyphicon {
  opacity: 1;
}
/* registration form progress bar */
@media (min-width: 768px) {
  .reg-form-progressbar-wrapper {
    width: 100%;
    float: right;
  }
  .reg-form-progressbar-wrapper li {
    width: 33.3%;
  }
}
/* default page - Knowledge */
.knowledge_img {
  width: 20%;
  margin: 0 auto;
  position: relative;
}
.btnWhiteBorder-xl {
  display: inline-block;
  border-radius: 2rem;
  padding: 0.7rem 25%;
  margin: 1.0rem auto;
  font-weight: bolder;
  font-size: 1.5rem;
  border: 1px solid transparent;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: transparent;
  color: #FFF;
  border: 1px solid #FFF;
}
.btnWhiteBorder-xl:hover {
  background-color: #FFF;
  color: #ed1c24;
  text-decoration: none;
}
/* end of default page - Knowledge */
/* Appointment */
.btnAppointmentSlotRed {
  padding: .5rem 4.8rem;
  background: #ed1c24;
  color: #FFF;
  border: 1px solid transparent;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btnAppointmentSlotRed:hover,
.btnAppointmentSlotRed:active {
  text-decoration: none;
  background: #FFF;
  color: #ed1c24;
  border-color: #ed1c24;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.btnAppointmentSlotYellow {
  padding: .5rem 4.8rem;
  background: #fcb040;
  color: #FFF;
  border: 1px solid transparent;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btnAppointmentSlotYellow:hover,
.btnAppointmentSlotYellow:active {
  text-decoration: none;
  background: #FFF;
  color: #ed1c24;
  border-color: #ed1c24;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
/* end of Appointment */
/* start Credit Limit Application */
.content-block {
  padding: 20px 40px;
  margin-bottom: 20px;
}
/* end of Credit Limit Application */
/* start CL Management */
.btnCL,
.btnSeller {
  border: 2px solid #eee;
  display: inline-block;
  padding: 10px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}
input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
  min-width: 60px;
  color: #a9a9a9;
}
input[type="radio"].toggle + label:hover {
  background: #fcb040;
  color: #000;
}
input[type="radio"].toggle + label:after {
  background: #ed1c24;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: -5px;
}
input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: #fff;
  background-color: #ed1c24;
  transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
  left: 0;
}
/* end of CL Management */
/* input fontawesome inside textfield */
input {
  font-family: 'FontAwesome', 'Microsoft JhengHei', '微軟正黑體', Verdana, Arial;
}
/* end of input fontawesome inside textfield */
/* radio-inline margin-bottom setting */
.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
  margin-bottom: 0;
}
/* end of radio-inline margin-bottom setting */
/* bg grey */
.bg-grey {
  background-color: #eee;
}
/* make appointment - date picker field width */
.fieldw_50 {
  width: 50%;
}
/* progress bar */
.reg-form-progressbar-wrapper li {
  width: 25%;
}
/* registration form - territory, district, email field length adjustment */
.territory,
.district,
.email,
.br_num,
.title {
  width: 50%;
}
/* end of registration form - territory, district, email field length adjustment */
/* thumb-outstanding-credit */
.thumb-credit {
  margin-top: -20px;
}