/* template */

@font-face {
  font-family: 'prompt';
  src: url('font/prompt/Prompt-Regular.ttf') format('truetype');
}

* {
  font-family: 'prompt', 'kanit', sans-serif !important;
}

html {
  font-size: 10px;
  /*font-size: 62.5%;*/
  touch-action: manipulation;
}

body {
  font-size: 1.6rem;
  overflow-x: hidden;
}

p {
  margin: 0px;
}

input {
  max-height: 32px;
}

img {
  cursor: pointer;
}

i {
  font-size: 2rem;
  top: 4px;
  position: relative;
}

label {
  font-weight: normal;
}

/* The container */

.chk {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */

.chk input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border: 1px solid #ddd;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */

.chk:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */

.chk input:checked~.checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */

.chk input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */

.chk .checkmark:after {
  left: 9px;
  top: 4px;
  width: 8px;
  height: 12px;
  border: solid #9966cb;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#btnProfile48 {
  display: block;
}

#btnProfile47 {
  display: none;
}

.form-group {
  margin: 0;
}

::-webkit-scrollbar {
  width: 0.2em;
}

::-webkit-scrollbar-thumb {
  background: #9966cb;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: inherit;
}

.btnMainOther {
  width: 100%;
  height: 100px;
  line-height: 90px;
  font-size: 2.5rem;
}

.glyphicon {
  font-family: 'Glyphicons Halflings' !important;
}

.swal2-popup .swal2-content {
  font-size: inherit !important;
}

.notePayment {
  text-align: center;
  color: #F40000;
  font-size: 1.8rem;
}

.payBill {
  width: 250px;
  height: 40px;
}

.cancelBill, .cancelCart {
  font-size: 1.2rem;
  padding-top: 10px;
  cursor: pointer;
  color: #676767;
}

.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
  background-color: #9966cb;
  background-image: -moz-linear-gradient(top, #9966cb, #9966cb);
  background-image: -ms-linear-gradient(top, #9966cb, #9966cb);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9966cb), to(#9966cb));
  background-image: -webkit-linear-gradient(top, #9966cb, #9966cb);
  background-image: -o-linear-gradient(top, #9966cb, #9966cb);
  background-image: linear-gradient(top, #9966cb, #9966cb);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9966cb', endColorstr='#9966cb', GradientType=0);
  border-color: #9966cb #9966cb #9966cb;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.bgBIB {
  width: 640px;
  height: 509px;
  background-size: contain;
  background-repeat: no-repeat;
}

.badgeCart {
  position: relative;
  padding: 3px 6px;
  top: -10px;
  background-color: #F40000;
}

.swal2-modal {
  max-width: 100%;
}

.blockOrder {
  max-width: 100%;
  display: inline;
}

.blockOrder img {
  width: 100%;
}

.deleteOrder {
  padding: 0;
}

.no-btn {
  background: unset;
}

.no-btn:active, .no-btn:focus {
  outline: unset;
  box-shadow: none;
}

.textMerchant {
  text-align: center;
  margin-bottom: 50px;
}

.textMerchant .head {
  font-size: 3rem;
}

.blockMerchandise {
  padding: 15px;
  margin: 0;
}

.blockProduct {
  padding: 15px;
  cursor: pointer;
}

.blockProduct:hover, .blockProduct:focus, .blockProduct:active {
  -webkit-box-shadow: 0 0 20px 0 #DDD;
  -moz-box-shadow: 0 0 20px 0 #DDD;
  box-shadow: 0 0 20px 0 #DDD;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.productImage {
  /*width: 100%;*/
  max-width: 100%;
  /*height: auto;*/
  max-height: 300px;
  cursor: pointer;
}

.blockProductName {
  text-align: center;
}

.blockProductPrice {
  text-align: center;
  font-size: 1.4rem;
}

.logoStore {
  max-width: 100%;
  height: 50px;
}

.productDetail {
  height: 500px;
  margin-bottom: 20px;
  overflow: scroll;
}

.productDetail .productDetailName {
  font-size: 3rem;
}

.productDetail .productDetailPrice {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.productDetail .productDetailDescription {
  font-size: 1.8rem;
  font-weight: lighter;
}

.barLogo {
  max-height: 50px;
  padding-left: 12px;
}

.chooseSize {
  margin: 0 10px 10px 10px;
  cursor: pointer;
}

.chooseSize.active {
  border-radius: 4px;
  border: 1px solid #9966cb;
  background-color: #9966cb;
  color: #FFF;
  padding: 0px 5px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.chooseColor {
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin: auto;
}

.chooseColorHead, .chooseColorView {
  display: inline-block;
  border-radius: 100%;
  width: 20px;
  height: 20px;
}

.chooseColorHead .chooseColor, .chooseColorView .chooseColor {
  margin-top: 5px;
}

.chooseColorHead.active, .chooseColorView.active {
  border: 1px solid #9966cb;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.chooseColorHead.active .chooseColor, .chooseColorView.active .chooseColor {
  margin-top: 4px;
}

.bootstrap-touchspin {
  width: 60%;
}

.bootstrap-touchspin-up, .bootstrap-touchspin-down {
  height: 32px;
}

.previewBIBImage {
  position: absolute;
  width: 132px;
  height: 132px;
  top: 57px;
  left: 87px;
}

.bibName {
  position: relative;
  font-size: 2rem;
  top: 111px;
  margin: 0;
  left: 116px;
}

.bibRange {
  position: absolute;
  left: 588px;
  font-size: 3rem;
  margin: 0;
  color: #000;
  top: 60px;
}

.bibRangeF {
  position: absolute;
  left: 28px;
  font-size: 3.5rem;
  line-height: 3.5rem;
  margin: 0;
  color: #000;
  top: 280px;
}

.bibRangeV {
  position: absolute;
  left: 55px;
  font-size: 5rem;
  line-height: 5rem;
  margin: 0;
  color: #000;
  top: 277px;
}

.bibNo {
  position: absolute;
  left: 36px;
  font-size: 18rem;
  margin: 0;
  color: #000;
  top: 130px;
}

.bibemscalls2 {
  position: absolute;
  width: 138px;
  height: 28px;
  left: 525px;
  top: 247px;
}

.bibShirt {
  position: absolute;
  color:#000;
  left: 504px;
  top: 426px;
  margin: 0;
  font-size: 1.4rem;
}

.bibShirt2 {
  position: absolute;
  color:#000;
  left: 510px;
  top: 444px;
  margin: 0;
  font-size: 1.4rem;
}

.bibPhone1 {
  position: absolute;
  left: 50px;
  top: 350px;
  margin: 0;
  font-size: 1.4rem;
}

.bibPhone2 {
  position: absolute;
  left: 544px;
  top: 250px;
  margin: 0;
}

/* ไม่ปวดตา */

/*.mainContainer, html, body {
  background-color: DIMGRAY !important;
}*/

.upload-demo-wrap, .upload-result {
  display: none;
}

.previewImgBib {
  width: 50%;
  border: 1px solid #DDD;
  max-width: 100%;
  margin-top: 20px;
  border-radius: 100%;
}

.aCrop, .bUpload {
  color: #FFF;
  text-align: center;
  width: 100%;
}

.aCrop #upload, #filePacer {
  visibility: hidden;
  height: 0;
}

.boxPayment {
  margin-top: 40px;
  border: 1px solid #DDD;
  border-radius: 2px;
  padding: 10px;
  color: #000 !important;
}

/* terms */

.blockTerm {
  padding: 15px;
  padding-top:0;
  width: 70%;
  margin: auto;
}

.blockTerm .head {
  color: #9966cb;
  font-size: 3rem;
  font-weight: bold;
  margin-right: 20px;
  margin-bottom: 6px;
}

.blockTerm .subHead {
  color: #676767;
  font-size: 1.6rem;
  font-weight: lighter;
}

.blockTerm .radio-block {
  margin-top: 20px;
}

.blockTerm .media-body {
  padding-top: 20px !important;
  padding-left: 30px;
}

.blockContentTerm {
  color: #000;
  height: 55vh;
  width: 100%;
  overflow: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 20px;
  -webkit-box-shadow: 0 0 10px 0px #DDD;
  -moz-box-shadow: 0px 0px 10px 0px #DDD;
  box-shadow: 0 0 10px 0px #DDD;
}

/* welcome back */

.blockBack {
  width: 60%;
  margin: auto;
}

.blockBack .head {
  color: #9966cb;
  font-size: 3rem;
  margin-right: 20px;
  margin-bottom: 20px;
}

.blockBack .subHead {
  color: #676767;
  font-size: 1.6rem;
}

.blockContentBack {
  width: 100%;
  overflow: auto;
  margin-top: 40px;
}

/* validator */

.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
  color: #f40000 !important;
}

.has-success .checkbox, .has-success .checkbox-inline, .has-success .control-label, .has-success .help-block, .has-success .radio, .has-success .radio-inline, .has-success.checkbox label, .has-success.checkbox-inline label, .has-success.radio label, .has-success.radio-inline label {
  color: #53b12f !important;
}

.has-error .form-control, .has-error .form-control:focus, .has-error .form-control:hover, .has-error .form-control:active {
  box-shadow: unset;
  outline: none;
}

.has-success .form-control, .has-success .form-control:focus, .has-success .form-control:hover, .has-success .form-control:active {
  box-shadow: unset;
  outline: none;
}

/*.container {
  margin: 0px 100px !important;
}*/

.intl-tel-input, .country-select, .select2-container {
  width: 100% !important;
}

.blockWizard {
  margin-bottom: 20px;
}

.blockWizard p:first-child {
  margin-top: 10px;
}

.blockWizard p:last-child {
  font-size: 1.2rem;
  color: #676767;
}

.hrWizard {
  position: relative;
  margin: 0;
  top: 24px;
  display: block;
  width: 70%;
  margin: auto;
  border-top: 2px solid #676767;
}

.lineHead {
  padding: 0;
  margin-top: 10px;
}

.blockInfo {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 15px;
}

.blockSearchInvoice .head, .blockRegistration .head, .blockEditProfile .head {
  color: #9966cb;
  font-size: 3rem;
  margin-bottom: 0px;
}

.blockRegistration label:not(.cursor):not(.labelPay):not(.aCrop):not(.bUpload):not(.head) {
  color: #000;
  font-size: 1.4rem;
  margin-bottom: 0;
}

.blockRegistration .note {
  color: #676767;
  font-size: 1.4rem;
}

.radioPay label i {
  font-size: 3.5rem;
  margin-right: 10px;
  margin-left: 10px;
  top: 6px;
}

.radio-block.radioPay input[type="radio"]:checked+label {
  color: #9966cb;
}

.step {
  font-size: 3.5rem;
  color: #676767;
  margin-bottom: 20px;
  background-color: #FFF;
  padding: 0 20px;
}

.step.active {
  color: #9966cb;
}

.blockSearchInvoice {
  -webkit-box-shadow: 0px 0px 10px 1px #DDD;
  -moz-box-shadow: 0px 0px 10px 1px #DDD;
  box-shadow: 0px 0px 10px 1px #DDD;
  padding: 40px;
  width: 480px;
  margin: auto;
}

.blockSearchInvoice .head {
  color: #9966cb;
  font-size: 3rem;
  margin-bottom: 40px;
}

.blockSearchInvoice .note {
  font-size: 1.4rem;
  color: #9966cb;
}

.blockSearchInvoice button {
  margin: 20px 0px;
}

.blockSearchInvoice .input-group {
  margin-bottom: 20px;
}

.blockSearchInvoice input, .formDim {
  border: 0;
  outline: none;
  box-shadow: unset;
  background-color: #ffefb2;
  color: #9966cb;
}

.blockSearchInvoice input:hover, .blockSearchInvoice input:focus, .blockSearchInvoice input:active, .formDim:hover, .formDim:focus, .formDim:active {
  outline: none;
  box-shadow: unset;
}

.blockSearchInvoice label {
  color: #676767;
  font-size: 1.2rem;
}

.blockSearchInvoice .input-group-addon, .input-group-addon {
  background-color: #ffefb2;
  border: 0;
  outline: none;
  box-shadow: unset;
  color: #9966cb;
  font-weight: bold;
}

.blockSearchInvoice .input-group-addon:hover, .blockSearchInvoice .input-group-addon:focus, .blockSearchInvoice .input-group-addon:active {
  outline: none;
  box-shadow: unset;
}

.input-group-addon {
  background-color: #FFF;
  border: 0;
  border-radius: 0px;
  outline: none;
  box-shadow: unset;
  color: #9966cb;
  font-weight: bold;
  border-bottom: 1px solid #DDD;
}

.input-group-addon:hover, .input-group-addon:focus, .input-group-addon:active {
  outline: none;
  box-shadow: unset;
  border-color: #9966cb;
}

/* Contact */

.contactHead {
  font-weight: bolder;
  font-style: italic;
  font-size: 3rem;
  margin-bottom: 20px;
}

.bgContact {
  width: 100vw;
  height: 91.5vh;
  background-image: url("../img/Logo_sunset-run_2.png");
  background-repeat: no-repeat;
  background-position: 5% 22%;
  /* background-color: #FF0000; */
  background-size: 30%;
}

.blockContact {
  border-radius: 6px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  -webkit-box-shadow: 0 0 10px 5px #DEDEDE;
  box-shadow: 0 0 10px 5px #DEDEDE;
}

.blockContact .head {
  color: #9966cb;
  font-size: 2.6rem;
}

.blockContact .mediaHead {
  font-weight: bold;
}

.blockContact label {
  font-weight: normal;
  margin: 0;
}

.blockContact .mediaSub {
  color: #676767;
}

.blockContact .media {
  margin-bottom: 20px;
}

.blockContact a {
  margin-right: 20px;
}

.media .media-body {
  padding-top: 10px;
}

.media i {
  font-size: 5rem;
}

.socialContact {
  width: 30px;
}

.customContainer {
  width: 100vw !important;
  padding: 0;
}

.runnerType li:hover, .runnerType li:focus, .runnerType li:active, .runnerType li a:hover, .runnerType li a:focus, .runnerType li a:active, .runnerType li.active a:hover, .runnerType li.active a:focus, .runnerType li.active a:active {
  background-color: inherit;
  color: #9966cb;
}

.runnerType li.active a {
  background-color: inherit;
  color: #9966cb;
}

.blankImage {
  max-width: 100%;
}

.bgTopic {
  background-image: url("../img/BGTopic_Purple.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 35%;
  height: 40px;
  margin-bottom: 0px !important;
  padding: 6px 15px;
}

/* Login */

.signWith {
  color: #FFF !important;
  font-size: 1.8rem !important;
  margin-bottom: 10px;
  margin-top: 10px;
}

.bgLogin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("../img/BG_8May18_Login.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* background-color: #FF0000; */
}

.blockforgot {
  position: relative;
  top: 7%;
  margin: auto;
  padding: 48px;
  width: 480px;
  background-color: unset;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  -webkit-box-shadow: 0 0 10px 5px #DEDEDE;
  box-shadow: 0 0 10px 5px #DEDEDE;
}

.blockSignUp.active, .blockforgot.active {
  display: block;
}

.blockSignUp, .blockforgot {
  display: none;
}

.blockSignUp {
  position: relative;
  top: 5%;
  margin: auto;
  padding: 48px;
  width: 770px;
  background-color: unset;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  -webkit-box-shadow: 0 0 10px 5px #DEDEDE;
  box-shadow: 0 0 10px 5px #DEDEDE;
}

/* .blockSignUp .logo, .blockforgot .logo {
  vertical-align: middle;
  text-align: left;
  margin-bottom: 48px;
  padding-left: 0px;
  max-width: 100%;
  width: auto;
  height: 60px;
} */

.blockSignUp .page, .blockforgot .page {
  padding-top: 20px;
  vertical-align: middle;
  text-align: right;
  padding-right: 0px;
  height: 60px;
  font-size: 2.2rem;
  color: #9966cb;
  margin: 0px;
  vertical-align: middle;
}

.blockSignUp .hNoti, .blockforgot .hNoti {
  color: #676767;
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.blockSignUp .sNoti {
  color: #676767;
  font-size: 1.2rem;
}

.blockforgot .sNoti {
  color: #676767;
  font-size: 1.2rem;
  margin-top: 20px;
  margin-bottom: 40px;
}

.blockSignIn {
  position: relative;
  top: 10%;
  margin: auto;
  padding: 0 48px;
  padding-bottom: 48px;
  margin-top: 20px;
  width: 480px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  -webkit-box-shadow: 0 0 10px 5px #DEDEDE;
  -moz-box-shadow: 0 0 10px 5px #DEDEDE;
  box-shadow: 0 0 10px 5px #DEDEDE;
  text-align: center;
  vertical-align: middle;
}

.blockSignIn .col-md-6:nth-child(1):not(.signUp) {
  vertical-align: middle;
  text-align: left;
  margin-bottom: 48px;
  padding-left: 0px
}

.blockSignIn .col-md-6:nth-child(2):not(.signUp) {
  padding-top: 20px;
  vertical-align: middle;
  text-align: right;
  padding-right: 0px;
  height: 60px;
}

.blockSignIn .col-md-6 img {
  max-width: 100%;
  width: auto;
  height: 60px;
}

.blockSignIn .col-md-6 p {
  font-size: 2.2rem;
  color: #743A93;
  margin: 0px;
  vertical-align: middle;
}

.blockSignIn input:nth-child(1) {
  margin-bottom: 12px;
}

.blockSignIn a {
  color: #9966cb;
}

.blockSignIn a:hover, .blockSignIn a:focus, .blockSignIn a:active {
  text-decoration: none;
}

.blockSignIn button {
  margin: 18px 0px 12px 0px;
  height: 32px;
  border-radius: 2px;
  width: 100%;
  color: #ffffff;
  background-color: #9966cb;
}

.blockSignIn button:hover, .blockSignIn button:focus, .blockSignIn button:active {
  color: #ffffff;
  background-color: #9966cb;
  outline: unset;
  box-shadow: none;
}

.blockSignIn p {
  color: #9966cb !important;
}

.wFace {
  cursor: pointer;
  width: 100%;
  border-radius: 2px;
  color: #FFF;
  background-color: rgb(59, 89, 152);
  font-weight: normal;
  padding: 10px 0px 10px 30px;
  margin-bottom: 10px;
}

.wFace i, .wGoo i, .wGuest i {
  position: absolute;
  font-size: 3rem;
  top: 6px;
  left: 30px;
}

.wFace img, .wGoo img, .wGuest img {
  width: 30px;
  position: absolute;
  top: 6px;
  left: 30px;
}

.wGoo, .wGuest {
  cursor: pointer;
  background-color: white;
  width: 100%;
  border-radius: 2px;
  color: #000;
  font-weight: normal;
  padding: 10px 0px 10px 30px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-top: 0px;
  -webkit-box-shadow: 0px 1px 1px #DDD;
  -moz-box-shadow: 0px 1px 1px #DDD;
  box-shadow: 0px 1px 1px #DDD;
}

.otherLogin {
  vertical-align: middle;
  text-align: center;
}

.otherLogin p {
  color: #9966cb;
  font-weight: normal;
  display: inline-block;
  padding-right: 30px;
}

.otherLogin a {
  background-color: unset;
  border: 0;
  width: auto;
}

.otherLogin a:hover, .otherLogin a:focus, .otherLogin a:active {
  background-color: unset;
  outline: unset;
  box-shadow: none;
}

.otherLogin a img {
  height: 32px;
  display: inline-block;
}

.profileDetail {
  text-align: center;
  margin: 20px 0px;
}

.profileDetail p {
  color: #9966cb;
  font-size: 2rem;
}

.profileDetail p:last-child {
  font-size: 1.4rem;
  color: #676767;
}

.profileSelect {
  text-align: center;
}

.blockFlip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}

.blockFlip a i {
  font-size: 2.5rem;
}

.blockFlip a {
  font-size: 2rem;
}

/* End Login */

.headForm {
  color: #9966cb;
  font-size: 2.2rem;
  margin-bottom: 24px;
}

.labelfield {
  color: #000;
  font-size: 1.6rem;
  margin-bottom: 0px;
}

.form-control.formfield {
  border-radius: 0px;
  color: #26298f;
  border: 0px;
  border-bottom: 1px solid #DDD;
  box-shadow: unset;
  background-color: unset;
}

.form-control.formfield:valid {
  border-bottom: 1px solid #26298f;
}

.form-control.formfieldlogin {
  border-radius: 2px;
  color: #26298f;
  border: 0px;
  box-shadow: unset;
  background-color: #ffefb2;
}

.form-control.formfieldlogin:-moz-placeholder {
  color: #26298f;
}

.form-control.formfieldlogin:-ms-input-placeholder {
  color: #26298f;
}

.form-control.formfieldlogin::-moz-placeholder {
  color: #26298f;
}

.form-control.formfieldlogin::-webkit-input-placeholder {
  color: #26298f;
}

.form-control.formfieldlogin:hover, .form-control.formfieldlogin:focus, .form-control.formfieldlogin:active {
  box-shadow: unset;
}

.form-control.formfield:hover, .form-control.formfield:focus, .form-control.formfield:active {
  border-bottom: 1px solid #26298f;
}

/* Main */

.formfield:focus, .formfield:active {
  border-bottom: 1px solid #26298f;
  outline: none;
  box-shadow: unset;
}

.pad-0 {
  padding: 0px;
}

.padTop-5 {
  padding-top: 5px;
}

.padTop-10 {
  padding-top: 10px;
}

.padTop-20 {
  padding-top: 20px;
}

.padTop-40 {
  padding-top: 40px;
}

.padBottom-10 {
  padding-bottom: 10px;
}

.padBottom-20 {
  padding-bottom: 20px;
}

.padLR-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.marTop-10 {
  margin-top: 10px;
}

.marTop-20 {
  margin-top: 20px;
}

.marTop-40 {
  margin-top: 40px;
}

.marTop-80 {
  margin-top: 80px;
}

.marBottom-10 {
  margin-bottom: 10px;
}

.marBottom-20 {
  margin-bottom: 20px;
}

.marBottom-40 {
  margin-bottom: 40px;
}

.marBottom-60 {
  margin-bottom: 60px !important;
}

.marRight-10 {
  margin-right: 10px;
}

.marRight-20 {
  margin-right: 20px;
}

.imgGuidePayment {
  max-width: 100%;
  width: 100%;
  margin-bottom: 60px;
}

.mainContainer {
  margin-top: 86px;
  /*overflow: hidden;*/
  /*position: relative;*/
  /*width: 100%;*/
  /*height: 100%;*/
  perspective: 1200px;
  transform-style: preserve-3d;
  margin-bottom: 0px;
}

.bgBar {
  height: 6px;
  width: 100%;
  background-color: #9966cb;
  position: fixed;
  top: 0;
  z-index: 999;
}

.navbar-nav>li {
  float: left;
}

.navbar.navbar-bottom {
  position: absolute;
  bottom: 0;
  margin: 0;
  width: 100vw;
  border-radius: 0px;
  height: 40px;
  background-color: #9966cb;
  border: 0;
  padding: 0px 0px;
  max-height: 40px;
  min-height: 40px;
}

.navbar-bottom .navbar-collapse img {
  display: inline-block;
  max-height: 22px;
  max-width: 22px;
  margin-right: 10px;
}

.navbar-bottom .blockImgNav {
  text-align: center;
  height: 40px;
  padding: 5px 0px;
}

.navbar-bottom .blockImgNav a {
  margin-right: 10px;
  color: #FFF;
}

.navbar-bottom .blockImgNav a:hover, .navbar-bottom .blockImgNav a:focus, .navbar-bottom .blockImgNav a:active {
  color: #FFF;
  text-decoration: none;
}

.navbar-bottom .navbar-brand {
  color: #FFF;
  height: 40px;
  font-size: inherit;
  padding: 10px;
}

.navbar-bottom .navbar-brand img {
  display: inline-block;
  max-height: 22px;
  width: 88px;
}

.profileAtab.active+line {
  background-color: #9966cb;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: block;
  margin: auto;
  -webkit-transition: 1s all ease;
  transition: 1s all ease;
  position: relative;
  top: -10px;
}

.navbar.navbar-top {
  border-radius: 0px;
  height: 80px;
  /* background-color: rgba(22, 0, 41, 1.0); */
  background-color: #fff;
  margin-bottom: 0px;
  border-bottom: 1px solid #DDD;
  -webkit-box-shadow: 0px 1px 1px #DDD;
  -moz-box-shadow: 0px 1px 1px #DDD;
  box-shadow: 0px 1px 1px #DDD;
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 6px;
  -webkit-transition: 1s all ease;
  transition: 1s all ease;
}

.navbar-top .container {
  height: inherit;
}

.navbar-top .navbar-header {
  height: inherit;
}

.navbar-top .navbar-header a {
  padding: 0px;
  height: inherit;
}

.navbar-top .navbar-header img {
  height: 100%;
  width: auto;
  padding: 10px 20px 10px 20px;
}

.navbar-top .navbar-nav {
  padding: 30px 0px;
  height: inherit;
  transition: padding 1s;
}

.navbar-top .navbar-toggle {
  margin: 22px 30px;
}

.navbar-top .navbar-nav>li>a:not(.btn):not(.language) {
  color: #9966cb;
  padding: 0px;
  margin-right: 24px;
}

.navbar-top .navbar-nav>li>a:focus:not(.btn), .navbar-top .navbar-nav>li>a:hover:not(.btn), .navbar-top .navbar-nav>li>a:active:not(.btn) {
  color: #9966cb;
  background-color: inherit;
}

.navbar-top .navbar-nav>li>a.btn {
  height: 32px;
  padding: 5px 20px;
  position: relative;
  top: -4px;
  margin-right: 36px;
}

.navbar-top .navbar-nav>li.active>a {
  color: #754b9f!important;
  background-color: inherit !important;
}

.navbar-top .navbar-right>li:first {
  padding-right: 36px;
}

.navbar-top .navbar-nav>li>a.language {
  padding: 0px;
  margin-right: 12px;
}

.navbar-top .navbar-nav>li>a.language>img {
  height: 20px;
  width: auto;
  display: initial;
}

.buttonEvent {
  margin-top: 48px;
  margin-bottom: 80px;
  margin-left: 2px;
}

.buttonEvent .col-md-3.col-sm-6.col-xs-6 {
  padding: 0px 12px;
}

.buttonEvent .head {
  font-size: 3rem;
  color: #9966cb;
  margin-bottom: 20px;
  margin-left: 30px;
}

.buttonEvent .subHead {
  font-size: 1.4rem;
  color: #676767;
}

.date-countdown span {
  font-size: 5rem;
  color: #FFF;
  padding: 10px 16px;
}

.date-countdown span {
  /*background: #f15a29; /* Old browsers */
  */ background: -moz-linear-gradient(top, #f41c9d 50%, #9966cb 50%, #9966cb 50%);
  /*  FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f41c9d), color-stop(50%, #9966cb), color-stop(50%, #9966cb));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f41c9d 50%, #9966cb 50%, #9966cb 50%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f41c9d 50%, #9966cb 50%, #9966cb 50%);
  /* Opera11.10+ */
  background: -ms-linear-gradient(top, #f41c9d 50%, #9966cb 50%, #9966cb 50%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F4C134', endColorstr='#F5D06C', GradientType=0);
  /* IE6-9 */
  background: linear-gradient(top, #F4C134 50%, #F5D06C 50%, #F5D06C 50%);
  /* W3C */
  border-radius: 5px;
}

.daysto {
  color: #676767;
  font-size: 2.2rem;
}

.publish {
  margin: 48px 0px;
  color: #9966cb;
}

.partDetail {
  padding: 48px 0px 48px 33px;
}

.partDetail2 {
  display: none;
}

.resShow {
  display: none !important;
}

.resShow .resDrop .language {
  display: inline;
  padding-left: 20px;
  padding-right: 10px;
}

.resShow .resDrop .language:nth-child(2) {
  padding-left: 0;
}

.resShow .resDrop .language img {
  max-width: 20px;
}

.navbar-right .dropdown-menu>li>a {
  color: #676767;
}

.navbar-right .dropdown-menu>li>a:hover, .navbar-right .dropdown-menu>li>a:focus, .navbar-right .dropdown-menu>li>a:active {
  color: #9966cb;
  background-color: inherit;
}

.dropdown.resShow {
  top: -8px;
}

.dropdown.resShow button {
  padding: 0;
}

.dropdown.resShow button:active, .dropdown.resShow button:focus, .dropdown.resShow button:hover {
  border: 0;
  outline: unset;
  box-shadow: none;
}

.dropdown.resShow i {
  font-size: 3rem;
}

.sponsor {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  /*margin-right: calc(-50vw + 50%);*/
  padding: 0;
}

.sponsorP p {
  font-size: 3rem;
  color: #9966cb;
  padding: 80px 0px 48px 24px;
}

.sponsorG {
  background-color: #FFFAEC;
}

.sponsorG p {
  font-size: 3rem;
  color: #DCA735;
  padding: 36px 0px 48px 24px;
}

.sponsorS {
  background-color: #F7F7F7;
}

.sponsorS p {
  font-size: 3rem;
  color: #787878;
  padding: 36px 0px 48px 24px;
}

.eleSponsorP, .eleSponsorG, .eleSponsorS {
  text-align: center;
  margin-bottom: 48px;
}

.eleSponsorP a img {
  /* max-height: 100px; */
  width: auto;
  margin: 10px 10px 20px 20px;
}

.eleSponsorG a img {
  max-height: 80px;
  width: auto;
  margin: 10px 10px 20px 20px;
}

.eleSponsorS a img {
  max-height: 60px;
  width: auto;
  margin: 10px 10px 20px 20px;
}

.eleSponsorPref .col-sm-6.col-xs-6 {
  padding: 20px;
  text-align: center;
  min-height: 100px;
}

.eleSponsorGref .col-sm-4.col-xs-4 {
  padding: 20px;
  text-align: center;
  min-height: 80px;
}

.eleSponsorSref .col-sm-3.col-xs-3 {
  padding: 20px;
  text-align: center;
  min-height: 60px;
}

.eleSponsorPref a img {
  width: auto;
  max-width: 100%;
  max-height: 100px;
}

.eleSponsorGref a img {
  width: auto;
  max-width: 100%;
  max-height: 80px;
}

.eleSponsorSref a img {
  width: auto;
  max-width: 100%;
  max-height: 60px;
}

.eleSponsorPref, .eleSponsorGref, .eleSponsorSref {
  display: none;
  margin-bottom: 48px;
}

.contentAgenda section {
  margin-top: 48px;
}

.contentAgenda section:last-child {
  margin-bottom: 48px;
}

.headAgenda {
  font-size: 3rem;
  color: #9966cb;
  margin-bottom: 24px;
}

.detailAgenda {
  margin: 0 20px 40px 20px;
}

.imgAgenda {
  max-width: 100%;
  width: 95%;
  height: auto;
  margin: auto;
}

.imgAgenda img {
  width: 100%;
  height: auto;
  margin-bottom: 48px;
  -webkit-box-shadow: 0 0 10px 5px #DDD;
  box-shadow: 0 0 10px 5px #DDD;
}

.imgType {
  max-width: 70%;
  height: auto;
  margin: auto;
}

.imgType img {
  width: 100%;
  height: auto;
  margin-bottom: 48px;
  -webkit-box-shadow: 0 0 10px 5px #DDD;
  box-shadow: 0 0 10px 5px #DDD;
}

.labelCategory {
  color: #9966cb;
  background-color: #FFF;
  border-radius: 2px;
  padding: 5px 10px;
  margin-bottom: 20px;
  -webkit-box-shadow: 0 0 5px 0 #DDD;
  -moz-box-shadow: 0 0 5px 0 #DDD;
  box-shadow: 0 0 5px 0 #DDD;
}

.labelCategory i {
  cursor: pointer;
  font-size: 3rem;
  position: relative;
  top: 4px;
}

.labelCategory a {
  cursor: pointer;
  color: #9966cb;
  text-align: center;
  position: relative;
  top: -4px;
}

.labelCategory .nameCategory {
  cursor: pointer;
}

.disabled .nameCategory {
  cursor: not-allowed;
}

.notiBlank {
  color: #676767;
}

.labelCategory a:hover, .labelCategory a:focus, .labelCategory a:active {
  text-decoration: none;
}

.blockHistory {
  padding-right: 0px;
  padding-left: 0px;
  margin-bottom: 20px;
  -webkit-box-shadow: 0 0 5px 0 #DDD;
  -moz-box-shadow: 0 0 5px 0 #DDD;
  box-shadow: 0 0 5px 0 #DDD;
}

.blockHistory .invoiceStat .QRInvoice {
  max-width: 100%;
  width: 150px;
  height: auto;
}

.labelInvoiceGreen {
  margin-top: 10px;
  border-radius: 2px;
  border: 1px solid #53B12F;
  color: #53B12F !important;
  padding: 5px 20px;
  background-color: #FFF;
  /* -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg); */
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.labelInvoiceRed {
  margin-top: 10px;
  border-radius: 2px;
  border: 1px solid #F40000;
  color: #F40000 !important;
  padding: 5px 20px;
  background-color: #FFF;
  /* -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg); */
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.labelInvoiceBlue {
  margin-top: 10px;
  border-radius: 2px;
  border: 1px solid #055EF3;
  color: #055EF3 !important;
  padding: 5px 20px;
  background-color: #FFF;
  /* -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg); */
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.blockHistory .invoiceStat {
  padding-top: 20px;
}

.invoiceNo {
  color: #9966cb !important;
  font-size: 3rem !important;
  font-weight: bold;
}

.totalGreen {
  color: #53B12F !important;
  font-size: 3rem !important;
}

.totalBlue {
  color: #055EF3 !important;
  font-size: 3rem !important;
}

.totalRed {
  color: #F40000 !important;
  font-size: 3rem !important;
}

.metict {
  color: #000 !important;
  font-size: inherit;
}

.blockHistory .noti {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  padding: 5px 30px 5px 10px;
  background-color: rgba(12, 34, 145, 1);
}

.blockHistory .notiWhite {
  color: #FFF !important;
  font-size: 1.4rem !important;
}

.blockHistory .notiGreen {
  color: #53B12F !important;
  font-size: 1.4rem !important;
}

.blockHistory .notiRed {
  color: #F40000 !important;
  font-size: 1.4rem !important;
}

.blockHistory .notiBlue {
  color: #9966cb !important;
  font-size: 1.4rem !important;
}

.blockHistory .notiPurple {
  color: #773E91 !important;
  font-size: 1.4rem !important;
}

.blockHistory .stat {
  background-color: rgba(213, 197, 222, 0.6);
  padding: 10px;
}

.blockHistory .stat .col-md-6 label, .blockHistory .stat .col-md-12 label {
  color: #000;
  font-size: 1.2rem;
}

.blockHistory .stat .col-md-12:first-child p {
  color: #9966cb;
  font-size: 3rem;
}

.blockHistory .stat .col-md-6:not(.detail) p, .blockHistory .stat .col-md-12:not(.detail) p {
  color: #9966cb;
}

.blockHistory .stat .detail p {
  font-size: 1.4rem;
}

.blockHistory img:not(.QRInvoice):not(.blankImage):not(#previewBIBImage) {
  max-height: 120px;
  /* padding-right: 20px; */
}

.blockHistory p {
  margin-bottom: 20px;
}

.blockHistory .col-md-4 label, .blockHistory .col-md-6 label, .blockHistory .col-md-12 label {
  color: #676767;
  font-size: 1.2rem;
}

.overH {
  overflow: hidden;
}

.slideQR .col-md-4 label {
  color: #676767;
  font-size: 1.2rem;
}

.slideQR .col-md-4 p {
  color: #9966cb;
  font-size: 3rem;
}

.nameEventHistory {
  color: #9966cb !important;
  font-size: 1.8rem !important;
  padding-top: 30px;
}

.billDetail {
  color: #9966cb;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.billDetail:hover, .billDetail:focus, .billDetail:active {
  text-decoration: none;
  color: #9966cb;
}

.billDetail.active span {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.profileImg {
  text-align: center;
  margin: auto;
  /* width: 50%; */
  height: auto;
  border-radius: 50%;
  cursor: pointer;
}

.profileImg img {
  max-width: 150px;
  min-height: 150px;
  height: auto;
}

.profileImg img:not(.imgModal):not(.noShow):hover, .profileImg img:not(.imgModal):not(.noShow):focus, .profileImg img:not(.imgModal):not(.noShow):active {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

@media screen and (max-width:420px) {
  .profileImg img {
    max-width: 80px;
    min-height: 80px;
  }
}

.modalImg {
  cursor: default;
  width: 100%;
  height: auto;
}

.limit-text {
  text-align: right;
  font-size: 1.2rem;
  color: #676767;
}

.imgModal {
  cursor: pointer;
}

.blockProfile-lg {}

.blockProfileImg-lg {}

.blockProfileImg-lg img {
  max-width: 100%;
  height: auto;
  padding-bottom: 56.25%
}

.blockProfileDetail-lg {}

.blockProfile {}

.blockProfileImg {}

.blockProfileDetail {}

.nameLogin {
  display: grid;
  border-radius: 2px;
  max-height: 48px;
  padding: 10px !important;
  -webkit-transition: height 0.5s ease-in-out;
  -moz-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
  overflow: hidden;
  margin-right: 24px;
  top: -13px;
  position: relative;
}

.nameLogin a {
  color: #676767;
}

.nameLogin a:hover, .nameLogin a:focus, .nameLogin a:active {
  text-decoration: none;
  color: #9966cb;
}

.nameLogin a img {
  /* max-height: 30px; */
  /*padding-right: 10px;*/
  width: 30px;
  height: 30px;
}

.nameLogin.active {
  -webkit-box-shadow: 0 0 10px 0px #DDD;
  -moz-box-shadow: 0 0 10px 0px #DDD;
  box-shadow: 0 0 10px 0px #DDD;
  background-color: #FFF;
  height: auto;
  max-height: unset;
  -webkit-transition: height 0.5s ease-in-out;
  -moz-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
}

.nameLogin.active a:nth-child(1) {
  color: #9966cb;
}

.blockReceipt {
  display: none;
  margin: 40px 0;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 3px;
}

.nameLogin.active .caret {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.nameLogin .caret {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.nameLogin .pageLogin {
  color: #FFF;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  background-color: inherit !important;
}

/* dialog */

.a-header {
  background-color: rgba(237, 28, 36, 1) !important;
  height: 40px;
  padding: 5px 10px;
}

.modal-mini-topic {
  font-weight: bold;
  font-size: 2.5rem;
}

.close-modal-mini {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 15px;
  color: rgba(221, 221, 221, 1);
  opacity: 1;
  filter: alpha(opacity=100);
  font-size: 2.5rem;
  font-weight: bold;
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

.close-modal:hover, .close-modal:focus, .close-modal:active, .close-modal-mini:hover, .close-modal-mini:focus, .close-modal-mini:active {
  color: rgba(0, 0, 0, 1);
  outline: none;
  box-shadow: unset;
}

.c-header {
  background-color: #E71F25 !important;
  height: 10px;
  padding: 0px 10px 0px 0px;
  border-radius: unset;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.c-header-red {
  background-color: rgba(237, 28, 36, 1) !important;
  height: 10px;
  padding: 0px 10px 0px 0px;
  border-radius: unset;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.c-header .bootstrap-dialog-title, .c-header-red .bootstrap-dialog-title, .a-header .bootstrap-dialog-title {
  color: rgba(255, 255, 255, 1) !important;
}

.c-header .bootstrap-dialog-header, .c-header-red .bootstrap-dialog-header {
  display: none;
}

.modal-body.c-body, .modal-body.a-body {
  width: 100%;
  padding: 16px;
  /*overflow-y: -moz-hidden-unscrollable;
  overflow-x: -moz-hidden-unscrollable;*/
  overflow: hidden;
}

.modal-dialog.a-dialog, .modal-dialog.c-dialog, .modal-dialog.s-dialog {
  /*width: 351px;*/
  width: 400px;
  margin: auto;
  margin-top: 25vh;
}

.mid-dialog {
  width: 700px;
  margin: auto;
  margin-top: 25vh;
}

.modal-dialog {
  width: 100vw;
  margin: 0;
}

.modal-show-img .modal-dialog, .modal-show-img .modal-dialog .modal-content {
  /*width: 70%;*/
  min-width: 40%;
  max-width: 80%;
  height: auto;
  margin: auto;
  margin-top: 20px;
}

.modal-dialog .modal-content {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

.right {
  float: right;
}

.modal-dialog.c-dialog .modal-content, .modal-dialog.a-dialog .modal-content, .modal-dialog.s-dialog .modal-content {
  width: 100%;
  height: auto;
  overflow: auto;
}

.close-modal {
  z-index: 1;
  position: absolute;
  right: 30px;
  top: 15px;
  text-indent: inherit !important;
  color: rgba(221, 221, 221, 1);
  opacity: 1;
  filter: alpha(opacity=100);
  font-size: 5rem;
  font-weight: bold;
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

.close-modal:hover, .close-modal:focus, .close-modal:active {
  color: rgba(0, 0, 0, 1);
  outline: none;
  box-shadow: unset;
}

/* button */

.btn {
  transition: all .5s;
}

.btn:hover {
  transform: scale(1.05) !important;
}

.btnEvent {
  width: 100%;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFF;
  height: 100px;
  font-size: 2.5rem;
  line-height: 90px;
  padding-top: 24px;
  text-shadow: 0px 1px 1px #676767;
}

.btnEvent:hover, .btnEvent:focus, .btnEvent:active {
  color: #FFF;
}

.btnEventStat {
  width: 100%;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFF;
  height: 100px;
  font-size: 2rem;
  padding: 15px;
  margin-top: 20px;
}

.btnEventStat:hover, .btnEventStat:focus, .btnEventStat:active {
  color: #FFF;
}

.btnEventStat .count {
  float: right;
}

.btnFeedbackGreen {
  background-color: #53B12F;
  color: #fff;
  padding: 0px 3px;
}

.btnFeedbackRed {
  background-color: #F40000;
  color: #fff;
  padding: 0px 3px;
}

.blockStatleft {
  height: 100px;
  text-align: center;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.blockStatleft i {
  color: #FFF;
  font-size: 5rem;
  position: relative;
  top: 25%;
}

.blockStatright {
  background-color: #F4F4F4;
  height: 100px;
  padding: 10px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.btn-editProfile {
  width: 90%;
  margin-top: 20px;
  background-color: rgba(216, 9, 125, 0.2);
  color: #9966cb;
  border-radius: 45px;
}

.btn-editProfile:hover, .btn-editProfile:focus, .btn-editProfile:active {
  background-color: #9966cb;
  color: #FFF;
  outline: none;
  box-shadow: unset;
}

.backToTop {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 24pt;
  z-index: 99;
  border: none;
  outline: none;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
  width: 50px;
  height: 50px;
  background-image: url("../img/Back_to_top.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.5rem;
}

.backToTop:hover, .backToTop:focus, .backToTop:active {
  background-color: rgba(255, 255, 255, 1);
  /* background-image: url("../img/back-to-top_2.png"); */
  /* -webkit-transition: background-image 0.2s ease-in-out;
  -moz-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out; */
}

.btnAgenda {
  width: 100% !important;
  margin-bottom: 20px;
  font-size: 1.6rem;
  line-height: 2;
}

.btnAgenda.green {
  border-color: rgb(8, 178, 15);
  border-radius: 6px;
  color: rgb(8, 178, 15);
  background-color: inherit;
}

.btnAgenda.green:hover, .btnAgenda.green:focus, .btnAgenda.green:active {
  color: #FFF;
  background: rgba(8, 178, 15, 1);
  background: -moz-linear-gradient(-45deg, rgba(8, 178, 15, 1) 0%, rgba(8, 178, 15, 1) 26%, rgba(85, 255, 167, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(8, 178, 15, 1)), color-stop(26%, rgba(8, 178, 15, 1)), color-stop(100%, rgba(85, 255, 167, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(8, 178, 15, 1) 0%, rgba(8, 178, 15, 1) 26%, rgba(85, 255, 167, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(8, 178, 15, 1) 0%, rgba(8, 178, 15, 1) 26%, rgba(85, 255, 167, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(8, 178, 15, 1) 0%, rgba(8, 178, 15, 1) 26%, rgba(85, 255, 167, 1) 100%);
  background: linear-gradient(135deg, rgba(8, 178, 15, 1) 0%, rgba(8, 178, 15, 1) 26%, rgba(85, 255, 167, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08B20F', endColorstr='#55ffa7', GradientType=1);
}

.btnAgenda.pink {
  border-color: rgb(244, 47, 76);
  border-radius: 6px;
  color: rgb(244, 47, 76);
  background-color: inherit;
}

.btnAgenda.pink:hover, .btnAgenda.pink:focus, .btnAgenda.pink:active {
  color: #FFF;
  background: rgba(244, 47, 76, 1);
  background: -moz-linear-gradient(-45deg, rgba(244, 47, 76, 1) 0%, rgba(244, 47, 76, 1) 26%, rgba(255, 224, 170, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(244, 47, 76, 1)), color-stop(26%, rgba(244, 47, 76, 1)), color-stop(100%, rgba(255, 224, 170, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(244, 47, 76, 1) 0%, rgba(244, 47, 76, 1) 26%, rgba(255, 224, 170, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(244, 47, 76, 1) 0%, rgba(244, 47, 76, 1) 26%, rgba(255, 224, 170, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(244, 47, 76, 1) 0%, rgba(244, 47, 76, 1) 26%, rgba(255, 224, 170, 1) 100%);
  background: linear-gradient(135deg, rgba(244, 47, 76, 1) 0%, rgba(244, 47, 76, 1) 26%, rgba(255, 224, 170, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f42f4c', endColorstr='#ffe0aa', GradientType=1);
}

.btnAgenda.blue {
  border-color: rgb(86, 127, 240);
  border-radius: 6px;
  color: rgb(86, 127, 240);
  background-color: inherit;
}

.btnAgenda.blue:hover, .btnAgenda.blue:focus, .btnAgenda.blue:active {
  color: #FFF;
  background: rgba(86, 127, 240, 1);
  background: -moz-linear-gradient(-45deg, rgba(86, 127, 240, 1) 0%, rgba(86, 127, 240, 1) 26%, rgba(127, 157, 239, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(86, 127, 240, 1)), color-stop(26%, rgba(86, 127, 240, 1)), color-stop(100%, rgba(127, 157, 239, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(86, 127, 240, 1) 0%, rgba(86, 127, 240, 1) 26%, rgba(127, 157, 239, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(86, 127, 240, 1) 0%, rgba(86, 127, 240, 1) 26%, rgba(127, 157, 239, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(86, 127, 240, 1) 0%, rgba(86, 127, 240, 1) 26%, rgba(127, 157, 239, 1) 100%);
  background: linear-gradient(135deg, rgba(86, 127, 240, 1) 0%, rgba(86, 127, 240, 1) 26%, rgba(127, 157, 239, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#567ff0', endColorstr='#7f9def', GradientType=1);
}

.btnAgenda.yellow {
  border-color: rgb(241, 172, 23);
  border-radius: 6px;
  color: rgb(241, 172, 23);
  background-color: inherit;
}

.btnAgenda.yellow:hover, .btnAgenda.yellow:focus, .btnAgenda.yellow:active {
  color: #FFF;
  background: rgba(241, 172, 23, 1);
  background: -moz-linear-gradient(-45deg, rgba(241, 172, 23, 1) 0%, rgba(241, 172, 23, 1) 26%, rgba(243, 204, 120, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(241, 172, 23, 1)), color-stop(26%, rgba(241, 172, 23, 1)), color-stop(100%, rgba(243, 204, 120, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(241, 172, 23, 1) 0%, rgba(241, 172, 23, 1) 26%, rgba(243, 204, 120, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(241, 172, 23, 1) 0%, rgba(241, 172, 23, 1) 26%, rgba(243, 204, 120, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(241, 172, 23, 1) 0%, rgba(241, 172, 23, 1) 26%, rgba(243, 204, 120, 1) 100%);
  background: linear-gradient(135deg, rgba(241, 172, 23, 1) 0%, rgba(241, 172, 23, 1) 26%, rgba(243, 204, 120, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1ac17', endColorstr='#f3cc78', GradientType=1);
}

.btnAgenda.red {
  border-color: rgb(240, 86, 140);
  border-radius: 6px;
  color: rgb(240, 86, 140);
  background-color: inherit;
}

.btnAgenda.red:hover, .btnAgenda.red:focus, .btnAgenda.red:active {
  color: #fff;
  background: rgba(240, 86, 140, 1);
  background: -moz-linear-gradient(-45deg, rgba(240, 86, 140, 1) 0%, rgba(240, 86, 140, 1) 26%, rgba(238, 152, 166, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(240, 86, 140, 1)), color-stop(26%, rgba(240, 86, 140, 1)), color-stop(100%, rgba(238, 152, 166, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(240, 86, 140, 1) 0%, rgba(240, 86, 140, 1) 26%, rgba(238, 152, 166, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(240, 86, 140, 1) 0%, rgba(240, 86, 140, 1) 26%, rgba(238, 152, 166, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(240, 86, 140, 1) 0%, rgba(240, 86, 140, 1) 26%, rgba(238, 152, 166, 1) 100%);
  background: linear-gradient(135deg, rgba(240, 86, 140, 1) 0%, rgba(240, 86, 140, 1) 26%, rgba(238, 152, 166, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0568c', endColorstr='#ee98a6', GradientType=1);
}

.btnAgenda.purple {
  border-color: rgb(169, 102, 236);
  border-radius: 6px;
  color: rgb(169, 102, 236);
  background-color: inherit;
}

.btnAgenda.purple:hover, .btnAgenda.purple:focus, .btnAgenda.purple:active {
  color: #FFF;
  background: rgba(169, 102, 236, 1);
  background: -moz-linear-gradient(-45deg, rgba(169, 102, 236, 1) 0%, rgba(169, 102, 236, 1) 26%, rgba(139, 128, 237, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(169, 102, 236, 1)), color-stop(26%, rgba(169, 102, 236, 1)), color-stop(100%, rgba(139, 128, 237, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(169, 102, 236, 1) 0%, rgba(169, 102, 236, 1) 26%, rgba(139, 128, 237, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(169, 102, 236, 1) 0%, rgba(169, 102, 236, 1) 26%, rgba(139, 128, 237, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(169, 102, 236, 1) 0%, rgba(169, 102, 236, 1) 26%, rgba(139, 128, 237, 1) 100%);
  background: linear-gradient(135deg, rgba(169, 102, 236, 1) 0%, rgba(169, 102, 236, 1) 26%, rgba(139, 128, 237, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a966ec', endColorstr='#8b80ed', GradientType=1);
}

.btnAgenda i {
  font-size: 2.5rem !important;
}

.btn i {
  font-size: 2rem;
}

.btn-hamburger {
  border: 0px;
  background-color: inherit;
  color: #9966cb;
}

.btn-hamburger:focus, .btn-hamburger:hover, .btn-hamburger:active {
  background-color: inherit;
  color: #9966cb;
}

.btnEditRunners, .btnFollower, .btnEditParent {
  padding: 5px 10px;
  height: 30px;
}

.btn-blue {
  background-color: rgba(14, 55, 204, 1);
  border-radius: 2px;
  color: #FFF;
  border: 1px solid rgba(14, 55, 204, 1);
}

.btn-blue-outline {
  background-color: inherit;
  color: rgba(14, 55, 204, 1);
  border: 1px solid rgba(14, 55, 204, 1);
  border-radius: 2px;
}

.btn-blue-outline:active, .btn-blue-outline:hover, .btn-blue-outline:focus {
  background-color: rgba(14, 55, 204, 1);
  border-radius: 2px;
  color: #FFF;
  border: 1px solid rgba(14, 55, 204, 1);
  outline: none;
  box-shadow: unset;
}

.btn-blue:active, .btn-blue:hover, .btn-blue:focus {
  background-color: inherit;
  color: rgba(14, 55, 204, 1);
  border: 1px solid rgba(14, 55, 204, 1);
  border-radius: 2px;
}

.btn-blue.disabled:active, .btn-blue.disabled:hover, .btn-blue.disabled:focus {
  background-color: rgba(14, 55, 204, 1);
  border-radius: 2px;
  color: #FFF;
  border: 1px solid rgba(14, 55, 204, 1);
}

.btn-purple {
  background-color: rgba(119, 60, 145, 1);
  border-radius: 2px;
  color: #FFF;
  border: 1px solid rgba(119, 60, 145, 1);
}

.btn-purple-outline {
  background-color: inherit;
  color: rgba(119, 60, 145, 1);
  border: 1px solid rgba(119, 60, 145, 1);
  border-radius: 2px;
}

.btn-purple-outline:active, .btn-purple-outline:hover, .btn-purple-outline:focus {
  background-color: rgba(119, 60, 145, 1);
  border-radius: 2px;
  color: #FFF;
  border: 1px solid rgba(119, 60, 145, 1);
  outline: none;
  box-shadow: unset;
}

.btn-purple:active, .btn-purple:hover, .btn-purple:focus {
  background-color: inherit;
  color: rgba(119, 60, 145, 1);
  border: 1px solid rgba(119, 60, 145, 1);
  border-radius: 2px;
}

.btn-purple.disabled:active, .btn-purple.disabled:hover, .btn-purple.disabled:focus {
  background-color: rgba(119, 60, 145, 1);
  border-radius: 2px;
  color: #FFF;
  border: 1px solid rgba(119, 60, 145, 1);
}

/*  */

.btn-minred {
  background-color: #9966cb;
  border-radius: 2px;
  color: #ffffff;
  border: 1px solid #9966cb;
}

.btn-minred-reverse {
  background-color: #9966cb;
  border-radius: 2px;
  color: #ffffff;
  border: 1px solid #9966cb;
}

.btn-minred-outline {
  background-color: inherit;
  color: #9966cb;
  border: 1px solid #9966cb;
  border-radius: 2px;
}

.btn-minred-outline:active, .btn-minred-outline:hover, .btn-minred-outline:focus {
  background-color: #9966cb;
  border-radius: 2px;
  color: #ffffff;
  border: 1px solid #9966cb;
  outline: none;
  box-shadow: unset;
}

.btn-minred:active, .btn-minred:hover, .btn-minred:focus {
  /* background-color: inherit; */
  background-color: #9966cb !important;
  color: #ffffff;
  border: 1px solid #9966cb;
  border-radius: 2px;
}

.btn-minred.disabled:active, .btn-minred.disabled:hover, .btn-minred.disabled:focus {
  background-color: #9966cb;
  border-radius: 2px;
  color: #ffffff;
  border: 1px solid #9966cb;
}

.btn-minred-reverse:active, .btn-minred-reverse:hover, .btn-minred-reverse:focus {
  /* background-color: inherit; */
  background-color: #9966cb;
  color: #ffffff;
  border: 1px solid #9966cb;
  border-radius: 2px;
}

.btn-minred-reverse.disabled:active, .btn-minred-reverse.disabled:hover, .btn-minred-reverse.disabled:focus {
  background-color: #9966cb;
  border-radius: 2px;
  color: #ffffff;
  border: 1px solid #9966cb;
}

.btn-green {
  background-color: #9966cb;
  border-radius: 2px;
  color: #fff;
  border: 1px solid #9966cb;
}

.btn-green:active, .btn-green:hover, .btn-green:focus {
  /* background-color: inherit; */
  background-color: #9966cb;
  color: #fff;
  border: 1px solid #9966cb;
  border-radius: 2px;
}

.btn-green-outline {
  background-color: inherit;
  color: #9966cb;
  border: 1px solid #9966cb;
  border-radius: 2px;
}

.btn-green-outline:active, .btn-green-outline:hover, .btn-green-outline:focus {
  background-color: #fff;
  border-radius: 2px;
  color: #9966cb;
  border: 1px solid #9966cb;
  outline: none;
  box-shadow: unset;
}

.btn-primary-purple {
  background-color: rgba(213, 197, 222, 1);
  border-radius: 2px;
  color: #773e91;
  font-size: 2.2rem;
}

.btn-primary-purple:hover, .btn-primary-purple:focus, .btn-primary-purple:active {
  background-color: rgba(119, 62, 145, 1);
  color: #FFF;
}

.btn-primary-minred {
  background-color: #9966cb;
  border-radius: 2px;
  color: #ffffff;
  font-size: 2.2rem;
}

.btn-primary-minred:hover, .btn-primary-minred:focus, .btn-primary-minred:active {
  /* background-color: inherit; */
  background-color: #9966cb;
  color: #ffffff;
  border: 1px solid #9966cb;
}

.btn-primary-minred-reverse {
  background-color: #9966cb;
  border-radius: 2px;
  color: #ffffff;
  font-size: 2.2rem;
}

.btn-primary-minred-reverse:hover, .btn-primary-minred-reverse:focus, .btn-primary-minred-reverse:active {
  /* background-color: inherit; */
  background-color: #9966cb;
  color: #ffffff;
  border: 1px solid #9966cb;
}

.btn-file {
  border: 1px solid #773e91;
  color: #773e91 !important;
  border-radius: 2px;
}

.btn-file-minred {
  border: 1px solid #0999D5;
  color: #0999D5 !important;
  border-radius: 2px;
}

.help-block {
  font-size: 1.2rem;
}

.form-group.has-error.has-danger input {
  box-shadow: unset;
  outline: none;
  border-bottom: 1px solid #F40000;
  border-radius: 0px;
}

.fontRed {
  color: #F40000 !important;
  margin-bottom: 0px;
}

.fontGreen {
  color: #53B12F !important;
}

.fontBlue {
  color: #9966cb !important;
}

.fontPurple {
  color: #773e91 !important;
}

.fontYellow {
  color: #9966cb !important;
}

.disabled:not(.btn):not(button) {
  filter: grayscale(100%);
  cursor: not-allowed !important;
}

.grayScale {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

/* blockConfirm */

.blockConfirmPayment .head {
  font-size: 3rem;
  color: #9966cb;
}

.blockConfirmPayment .subHead {
  font-size: 1.4rem;
  color: #676767;
}

/* carousel */

.carousel-indicators {
  bottom: 12px;
}

.carousel-indicators li {
  margin: 0px !important;
  width: 30px !important;
  height: 5px !important;
  border-radius: 0px !important;
  border: 0px !important;
}

.carousel-indicators li:not(.active), .carousel-indicators.product li:not(.active) {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.carousel-indicators.product li.active {
  background-color: rgba(119, 60, 145, 1) !important;
}

.carousel-indicators.product li {
  border: 1px solid rgba(119, 60, 145, 1) !important;
}

.resShowLang {
  display: none;
}

.resHideLang {
  display: block;
}

.blockEditProfile {
  /*border: 1px solid #ddd;*/
  padding: 20px;
  margin: auto;
  width: 80%;
  margin-bottom: 20px;
  -webkit-box-shadow: 0 0 10px 0px #DDD;
  -moz-box-shadow: 0px 0px 10px 0px #DDD;
  box-shadow: 0 0 10px 0px #DDD;
}

.cr-boundary {
  border: 2px dashed #DDD;
}

.croppie-container .cr-viewport, .croppie-container .cr-resizer {
  --box-shadow-color: rgba(255, 255, 255, 0.7);
}

.colleapseDetail {
  margin-right: 15px;
  margin-left: 0px;
}

.colleapseDetail hr {
  margin-left: 15px;
}

.colleapseDetail .col-md-12 p {
  font-size: 2rem;
  color: #9966cb;
}

.colleapseDetail .col-md-12 table:not(.table-condensed) thead, .table-striped, table:not(.table-condensed) thead tr th {
  color: #676767;
  font-size: 1.2rem;
  font-weight: normal !important;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
  background-color: #9966cb !important;
  background-image: unset;
  color: #fff !important;
}

/*.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover {
  background-color: #FF0000; !important;
  background-image: unset;
}*/

.table-striped thead, .table>thead>tr>th {
  border-bottom: 1px solid #9966cb !important;
}

.colleapseDetail .col-md-12 .table-striped>tbody>tr:nth-of-type(odd), .table-striped>tbody>tr:nth-of-type(odd) {
  color: #000;
  font-size: 1.4rem;
  background-color: inherit;
}

.colleapseDetail .col-md-12 .table-striped>tbody>tr:nth-of-type(even), .table-striped>tbody>tr:nth-of-type(even) {
  color: #000;
  font-size: 1.4rem;
  background-color: rgba(252, 239, 205, 0.5);
}

.colleapseDetail .col-md-12 .table-striped>tfoot, .table-striped>tfoot, .blockEditProfile .table>tfoot {
  background-color: #F4F4F4;
}

.colleapseDetail .col-md-12 .table-striped>tfoot .tfootFirst, .table-striped>tfoot .tfootFirst, .blockEditProfile .table>tfoot .tfootFirst {
  border-top: 1px solid #F5F5F5;
  font-size: 1.4rem;
}

.colleapseDetail .col-md-12 .table-striped>tfoot .tfootLast, .table-striped>tfoot .tfootLast, .blockEditProfile .table>tfoot .tfootLast {
  border-bottom: 1px solid #676767;
  font-size: 1.4rem;
}

.colleapseDetail .col-md-12 .table-striped>tfoot .tfootEnd, .table-striped>tfoot .tfootEnd, .blockEditProfile .table>tfoot .tfootEnd {
  font-size: 1.4rem;
  font-weight: bold;
}

.table-striped tfoot {
  border: 0;
  color: #000 !important;
}

/* data-Table */

.fixed-table-container {
  border: 0;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  border: 0;
}

.pagination-info {
  font-size: 1.4rem;
}

.pagination-detail {
  display: none;
}

.pull-right.pagination {
  text-align: center;
  float: unset !important;
  display: block;
}

.pagination>li>a, .pagination>li>span {
  color: #000;
  font-size: 1.2rem;
}

.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
  color: #9966cb;
  background-color: rgba(255, 203, 0, 0.6);
  border-color: rgba(255, 203, 0, 0.6);
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  background-color: #9966cb !important;
  border-color: #9966cb !important;
  color: #fff;
  font-size: 1.2rem;
}

/*page s;odebar*/

.pt-page {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: auto;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.pt-page-current, .no-js .pt-page {
  visibility: visible;
  background: #fff;
  /*z-index: 999;*/
}

.no-js body {
  overflow: auto;
}

.pt-page-ontop {
  z-index: 999;
}

/* scale and fade */

.pt-page-scaleDown {
  animation: scaleDown .7s ease both;
}

.pt-page-scaleUp {
  animation: scaleUp .7s ease both;
}

.pt-page-scaleUpDown {
  animation: scaleUpDown .5s ease both;
}

.pt-page-scaleDownUp {
  animation: scaleDownUp .5s ease both;
}

.pt-page-scaleDownCenter {
  animation: scaleDownCenter .4s ease-in both;
}

.pt-page-scaleUpCenter {
  animation: scaleUpCenter .4s ease-out both;
}

/************ keyframes ************/

/* scale and fade */

@keyframes scaleDown {
  to {
    opacity: 0;
    transform: scale(.8);
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(.8);
  }
}

@keyframes scaleUpDown {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes scaleDownUp {
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes scaleDownCenter {
  to {
    opacity: 0;
    transform: scale(.7);
  }
}

@keyframes scaleUpCenter {
  from {
    opacity: 0;
    transform: scale(.7);
  }
}

/*Responsive*/

@media screen and (max-width:380px) {
  .bgTopic {
    width: 80% !important;
  }
}

@media screen and (max-width:320px) {
  .blockSignIn .col-md-6 img {
    width: 100%;
    height: auto;
  }
  .wFace, .wGoo, .wGuest {
    font-size: 1rem;
  }
  .wFace i {
    font-size: 2rem;
  }
  .wFace img, .wGoo img, .wGuest img {
    width: 20px;
  }
}

@media screen and (max-width:420px) {
  .blockStatleft {
    height: 140px;
  }
  .blockStatright {
    height: 140px;
  }
  .blockFlip {
    margin-left: 0;
    margin-top: 20px;
  }
}

@media screen and (max-width:440px) {
  .date-countdown span {
    font-size: 3rem;
  }
  .blockFlip a i {
    font-size: 2.5rem;
  }
  .blockFlip .daysto {
    font-size: 1.6rem;
  }
  .blockFlip a {
    font-size: 1.6rem;
  }
}

@media screen and (max-width:480px) {
  .blockSignIn, .blockforgot {
    width: 100%;
    padding: 20px;
  }
  #btnProfile48 {
    display: none;
  }
  #btnProfile47 {
    display: block;
  }
  .blockSearchInvoice {
    width: 100%;
    padding: 20px;
  }
  .nameLogin {
    margin-right: 12px;
  }
  .blockSignIn .col-md-6 p {
    font-size: 2rem;
  }
  .blockSignIn .navbar-bottom .navbar-brand {
    font-size: 1rem;
  }
  .resHideLang {
    display: none !important;
  }
  .resShowLang {
    display: block;
  }
  #loginFacebook img {
    padding-right: 10px !important;
  }
}

@media screen and (max-width:540px) {
  .bgTopic {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 15px;
  }
  .navbar-right {
    right: 15px !important;
    margin-right: 0px;
  }
}

@media screen and (max-width: 768px) {
  .hrWizard {
    display: none;
  }
  .blockTerm .media .media-body {
    display: block;
    margin-left: 15px;
    padding: 0px;
    width: auto;
  }
  .blockTerm .media .media-body .head {
    margin-bottom: 0px;
  }
  .blockTerm img {
    width: 80%;
  }
}

@media screen and (max-width:770px) {
  .blockSignUp {
    width: 100%;
    padding: 10px;
  }
  .blockEditProfile {
    width: 99%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .collapse.navbar-collapse {
    display: block !important;
  }
  .blockImgNav, .navbar-right {
    position: absolute;
    top: 0px;
    right: 15px;
    margin: 0;
  }
  .navbar-nav .open .dropdown-menu {
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    /*border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);*/
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    position: absolute;
    margin-left: -150px !important;
  }
  .navbar-bottom .navbar-brand {
    font-size: 1rem;
  }
  .navbar.navbar-bottom {
    height: auto;
    max-height: none;
  }
}

@media screen and (max-width:990px) {
  .navbar-nav .open .dropdown-menu {
    margin-left: -120px;
  }
  .blockWizard p:first-child {
    font-size: 1.6rem;
  }
  .blockWizard p:last-child {
    font-size: 1rem;
  }
  .modal-show-img .modal-dialog, .modal-show-img .modal-dialog .modal-content {
    width: 98%;
    max-width: 100%;
  }
}

.resTitle {
  display: none;
  padding: 0px 40px;
}

@media screen and (max-width:535px) {
  .blockSignIn {
      width: 90% !important;
  }
}

@media screen and (max-width:1220px) {
  .resHide {
    display: none !important;
  }
  .resShow {
    display: block !important;
  }
  .resTitle {
    display: block !important;
  }
}

@media screen and (max-width:1035px) {
  .partImg {
    padding: 0;
  }
  .cartTopBar, .loginTopBar {
    margin-right: 10px !important;
  }
  .cartButton {
    /*margin: 0;
    position: fixed;
    bottom: 0;
    background-color: #FFF;
    width: 100%;
    left: 0;*/
    text-align: center;
    /*padding-bottom: 20px;*/
  }
  .pad-s-0 {
    padding: 0 !important;
  }
  .modal-dialog.s-dialog {
    width: 90%;
  }
  .productDetail {
    height: auto;
    margin-bottom: 40px;
    overflow: inherit;
  }
  .profileAtab.active+line {
    top: 0px;
  }
  .blockTerm {
    width: 100%;
  }
  .navbar-top .navbar-header img {
    padding-left: 20px;
  }
  .mid-dialog, .c-dialog, .a-dialog, .s-dialog {
    width: auto;
  }
  .lineHead {
    padding: 0 15px;
  }
  .profileDetail {
    text-align: left;
    margin: 20px 0px;
  }
  .blockHistory {
    padding-left: 0px;
  }
  .profileCategory .tab-pane {
    margin-top: 80px;
  }
  .profileImg {
    width: auto;
  }
  .profileDetail {
    margin-bottom: 20px;
    margin-top: 0px;
  }
  .profileCategory {
    padding: 0px;
  }
  .eleSponsorP, .eleSponsorG, .eleSponsorS {
    display: none;
  }
  .eleSponsorPref, .eleSponsorGref, .eleSponsorSref {
    display: inline-block;
  }
  .buttonEvent .col-md-3.col-sm-6.col-xs-6 {
    margin-bottom: 12px;
    padding: 0px 6px;
  }
  .resHide {
    display: none !important;
  }
  .resShow {
    display: block !important;
  }
  .daysto {
    font-size: 2rem;
  }
  .navbar-top .navbar-nav>li>a.language.en {
    margin-right: 36px;
  }
  .navbar-bottom .blockImgNav {
    text-align: right;
  }
  .container {
    width: 100%;
    padding: 0px;
  }
  .publish {
    margin: 0px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .partDetail2 {
    padding: 48px;
    padding-top: 10px;
  }
  .partDetail {
    display: none;
  }
  .partDetail2 {
    display: block;
  }
}

@media screen and (max-width:1300px) {
  .navbar-top .container {
    margin: 0;
    width: 100%;
  }
  /*.container {
    width: 80%;
  }*/
  .blockHistory .noti {
    padding-top: 10px;
  }
}

@media screen and (min-width:1300px) {
  .container {
    /* margin: 0; */
    width: 90% !important;
    max-width: 1270px !important;
  }
}

@media screen and (max-width: 1600px) {
  .bgContact {
    background-position: 0% 40%;
    background-size: 35%;
  }
}

@media screen and (max-width: 1300px) {
  .bgContact {
    background-position: 10% 40%;
    background-size: 40%;
  }
}

.stateImg {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  max-width: 100%;
}

.blank {
  background-color: #e7e7e7;
  border-radius: 3px;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}

.blockHistory:not(.notHead) .stateImg {
  top: 50px;
}

.cursor {
  cursor: pointer;
}

.radio-block {
  display: inline-block;
  margin-right: 24px;
  vertical-align: middle;
}

.radio-block input[type="radio"], .radio-block input[type="checkbox"] {
  vertical-align: middle !important;
  margin: 0px !important;
}

.imgGender {
  width: 26px;
  margin-right: 10px;
  margin-left: 10px;
}

.imgShirt {
  max-width: 100%;
  margin-top: 12px;
}

.imgShirt+p {
  color: #9966cb;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background-color: unset !important;
}

/*select2*/

.form-control.formfield:valid+.select2 .selection .select2-selection.select2-selection--single {
  border-bottom: 1px solid #26298f;
}

.select2-container--default .select2-selection--single {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #ddd;
  color: #26298f;
  background-color: unset;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #26298f !important;
  font-size: 1.4rem;
}

.select2-container--default .select2-selection--single:hover, .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--single:active {
  border-bottom: 1px solid #26298f;
  outline: none;
  box-shadow: unset;
}

.select2-container .select2-selection--single {
  height: 32px;
  background-color: unset !important;
}

.select2-container {
  padding-bottom: 12px;
}

.hidd {
  display: none;
}

/* custom radio box */

input[type="radio"] {
  position: absolute;
  opacity: 0;
}

input[type="radio"]+label:before {
  content: '';
  background: rgba(255, 255, 255, 1);
  border-radius: 100%;
  border: 1px solid rgba(90, 90, 90, 1);
  display: inline-block;
  vertical-align: baseline;
  width: 14px;
  height: 14px;
  position: relative;
  margin-right: 2px;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  top: 2px;
}

input[type="radio"]:checked+label:before {
  background-color: #E71F25;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1);
}

input[type="radio"]:focus+label:before {
  outline: none;
  border-color: #E71F25;
}

input[type="radio"]:disabled+label:before {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1);
  border-color: rgba(90, 90, 90, 1);
  background: rgba(90, 90, 90, 1);
}

input[type="radio"]+label:empty:before {
  margin-right: 0;
}

/* end custom radio box */

/* custom check box */

input[type=checkbox] {
  visibility: hidden;
  position: absolute;
}

input[type=checkbox]+label:before {
  height: 16px;
  width: 16px;
  margin-right: 2px;
  margin-top: 2px;
  content: " ";
  display: inline-block;
  vertical-align: baseline;
  border: 1px solid #9966cb;
  border-radius: 3px;
  color: #9966cb;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

input[type="checkbox"]:not(:checked)+label:after {
  opacity: 0;
  transform: scale(0);
}

input[type=checkbox]:checked+label:before {
  opacity: 1;
  transform: scale(1);
  content: "✔";
  font-size: 1rem;
  line-height: normal;
  padding-left: 3px;
  background: #FFF;
  border: 1px solid #9966cb;
  vertical-align: top;
  margin-top: 4px;
}

/* end custom check box */

/* noti system */

.notiSystem {
  background: rgba(12, 34, 145, 0.8);
  width: 80%;
  height: 0;
  padding: 0px;
  overflow: hidden;
  margin: auto;
  position: relative;
  top: -30px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  -webkit-transition: 1s all ease;
  transition: 1s all ease;
}

.notiSystem.active {
  height: auto;
  padding: 20px;
}

.notiSystem #notiSystemHead {
  color: #FFF;
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.notiSystem #notiSystemSubHead, .notiSystem #notiSystemSubHead2 {
  color: #FFF;
  font-size: 1.4rem;
}

.notiSystem .closeNoti {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  color: #FFF;
}

/* .BGTerm {
  background-image: url("../img/BG_Contact.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100%;
  margin-top: 70px;
} */

.notiSystem .closeNoti:hover, .notiSystem .closeNoti:focus, .notiSystem .closeNoti:active {}

/* new footer */

.c1 {
  margin-top: 8px;
}

.c2 {
  margin-top: 8px;
}

@media screen and (max-width:840px) {
  .c2 {
    padding-left: 0px !important;
    padding-right: 5px !important;
  }
}

@media screen and (max-width:768px) {
  .s1 {
    display: block !important;
    margin-bottom: 5px;
  }
  .s2 {
    display: none !important;
  }
  .c1 {
    height: 20px !important;
    margin-top: 32px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 100%;
    max-width: 100% !important;
    text-align: center !important;
  }
  .c2 {
    margin-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 100%;
    max-width: 100% !important;
    text-align: center !important;
  }
}

@media screen and (max-width:575px) {
  .c1 {
    text-align: center !important;
  }
  .c2 {
    text-align: center !important;
  }
}

.footer {
  font-size: 14px;
  padding: 3px 15px;
  position: relative;
  bottom: -1px;
  color: #fff;
  background-color: #9966cb;
  width: 100%;
}

.footer a {
  color: #fff;
  text-decoration: none;
}