/*Reset & defaults*/
.sidebar,
.sidebar * {
  font-family: 'Source Sans Pro', sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  list-style-type: none !important;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}

/*Sidebar backgrounds*/

.sidebar-right--active .sidebar-holder {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  overflow: auto;
  overflow-x: hidden;
}
.sidebar-right--active .sidebar {
  position: relative;
  float: right;
}
.sidebar-right--active,
.sidebar-right--active body {
  overflow: hidden;
}
/*.sidebar__ui-view[ui-view="sidebar-user"] { transition: all 0s; -webkit-transition: all 0s; }*/
.overlay {
  background: rgba(50, 50, 50, 0.5);
}

/*Common*/
.sidebar-container {
  padding: 0 40px;
}
.sidebar__box {
  padding: 40px 0;
}

.sidebar__ui-view[ui-view='sidebar-user'].ng-enter.ng-enter-active
  + .sidebar__ui-view[ui-view='sidebar-user'].ng-leave.ng-leave-active {
  transition: 0s all !important;
}

.sidebar h3 {
  font-family: 'Panton', sans-serif;
  font-size: 24px;
}
.sidebar h4 {
  font-size: 14px;
  margin-bottom: 8px;
}
.sidebar p.price {
  font-size: 20px;
  margin-bottom: 16px;
}
.sidebar p.description {
  font-size: 14px;
  margin-bottom: 16px;
}
.column-header {
  height: 80px;
}
.back-arrow {
  margin-bottom: 40px;
  cursor: pointer;
}
.back-arrow .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  background: #fff;
  transition: background 0.3s;
  -webkit-transition: background 0.3s;
}
.back-arrow svg {
  width: 20px;
  height: 20px;
  margin: 10px;
}
.back-arrow path {
  fill: #333;
  transition: fill 0.3s;
  -webkit-transition: fill 0.3s;
}
.back-arrow .icon:hover path {
  fill: #fff;
}
.back-arrow span {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
}
.sidebar a[history-back] {
  font-size: 14px;
  margin-top: 2px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.sidebar a[history-back]:hover {
  color: #ddd;
}
.sidebar .float-left {
  float: left;
}
.sidebar .float-right {
  float: right;
}
.sidebar .align-center {
  text-align: center;
}
.sidebar .clearfix:before,
.sidebar .clearfix:after {
  content: ' ';
  display: table;
}
.sidebar .clearfix:after {
  clear: both;
}
.sidebar legend {
  font-size: 16px;
  margin-bottom: 8px;
  margin-top: 12px;
}
.sidebar .error {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #ff1500;
}
.sidebar-menu--left--active,
.sidebar-menu--right--active,
.sidebar-right--active {
  overflow: visible;
}
.sidebar-mobile {
  display: none;
}
sidebar-column-base {
  display: block;
}
@media (max-width: 1279px) {
  .sidebar-container {
    padding: 0 25px;
  }
  .sidebar__box {
    padding: 20px 0 40px;
  }
}
@media (min-width: 1024px) {
  .sidebar {
    overflow: auto;
  }
}
@media (max-width: 1023px) {
  .sidebar {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-container {
    padding: 0 40px;
  }
  .sidebar-mobile {
    display: block;
  }
  .sidebar-desktop {
    display: none !important;
  }
  .sidebar__box {
    padding: 40px 0;
  }
}
@media (max-width: 479px) {
  .sidebar-container {
    padding: 0 15px;
  }
  .sidebar__box {
    padding: 20px 0 40px;
  }
}

/*Buttons*/
.sidebar .button-container {
  padding-top: 50px;
  padding-bottom: 25px;
}
.sidebar .btn {
  padding: 14px 28px;
  font-family: 'Panton', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.sidebar .btn.social-btn {
  font-size: 15px;
  text-transform: capitalize;
}
.btn-google,
.btn-facebook {
  width: 100%;
  display: block;
  margin: 10px 0;
  color: #fff;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
}
.btn-google {
  background: #d95232;
}
.btn-google:hover {
  background: #e0654a;
}
.btn-facebook {
  background: #4c67a1;
}
.btn-facebook:hover {
  background: #617eb7;
}
.or {
  position: relative;
  text-align: center;
  margin: 20px 0;
  font-size: 12px;
}
.or:before {
  position: absolute;
  background: #cdd0d5;
  top: 50%;
  height: 1px;
  right: 0;
  width: 40%;
  z-index: 0;
  content: '';
}
.or:after {
  position: absolute;
  background: #cdd0d5;
  top: 50%;
  height: 1px;
  left: 0;
  width: 40%;
  z-index: 0;
  content: '';
}
.full-buttons .btn {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  text-align: center;
}
.forgotpass {
  margin-top: 35px;
}

/*Form elements*/
.sidebar label {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.sidebar input[type='text'],
.sidebar input[type='email'],
.sidebar input[type='password'],
.sidebar input[type='tel'] {
  width: 100%;
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 12px;
  border: solid 1px #ccc;
}
.sidebar input.group-top {
  margin-bottom: -1px;
  border-radius: 5px 5px 0 0;
}
.sidebar input.group-bottom {
  border-radius: 0 0 5px 5px;
}
.sidebar input[type='number'],
.sidebar select {
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 12px;
}
.sidebar .sidebar__ui-view[ui-view='cart-secondary'] input[type='number'] {
  width: 100%;
}
.sidebar .expiration-date select {
  border: solid 1px #ccc;
  width: 80px;
}
.sidebar .half-block {
  width: 50%;
  display: inline-block;
}
/*.sidebar select option { color: inherit }*/

/*Cart*/
.sidebar h1[ng-if='ticket.event_name'] a {
  font-size: 15px;
}
.sidebar div[ui-view='sidebar-cart'] h3 {
  margin-bottom: 24px;
}
.empty-cart {
  font-size: 16px;
  margin-top: 60px;
}
.payment-details {
  font-size: 15px;
}
.sidebar .payment-logos {
  text-align: center;
  padding-top: 25px;
}
.sidebar .payment-logos img {
  width: 90px;
}

/*Cart / ticket types*/
.sidebar .cart-item-title {
  font-size: 16px;
}
.sidebar .ticket-type {
  display: block;
  border-radius: 6px;
  margin-top: 10px;
  margin-bottom: 16px;
}
.sidebar .ticket-type .ticket-data {
  display: table;
  width: 100%;
}
.sidebar .ticket-type .ticket-info {
  display: table-cell;
  padding: 4px 0;
  height: 50px;
  vertical-align: middle;
}
.sidebar .ticket-type .ticket-name {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
}
.sidebar .ticket-type .ticket-name.error {
  text-decoration: line-through;
}
.sidebar .ticket-type .ticket-error {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}
.sidebar .ticket-type .ticket-price {
  display: table-cell;
  width: 90px;
  text-align: right;
  height: 50px;
  vertical-align: middle;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 800;
}
.sidebar .ticket-type .ticket-pcs {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
}
.sidebar .ticket-type .ticket-num {
  vertical-align: middle;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 0 6px;
  background: transparent;
  width: 30px;
  height: 50px;
  text-align: center;
}
.sidebar .ticket-type .ticket-num-modify {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  border-radius: 5px;
}
.sidebar .ticket-type .ticket-num-modify.plus:before {
  position: absolute;
  left: 50%;
  top: 25%;
  height: 50%;
  width: 1px;
  background: #fff;
  content: '';
}
.sidebar .ticket-type .ticket-num-modify.plus:after,
.ticket-num-modify.minus:after {
  position: absolute;
  left: 25%;
  top: 50%;
  height: 1px;
  width: 50%;
  background: #fff;
  content: '';
}
.sidebar .final-price {
  padding-top: 18px;
  font-size: 20px;
}
.sidebar .final-price .text {
  float: left;
  font-size: 16px;
  font-weight: 700;
}
.sidebar .final-price .value {
  float: right;
  font-size: 16px;
  font-weight: 700;
}
.sidebar .final-price.modifier .text,
.sidebar .final-price.modifier .value {
  font-weight: 400;
}
.sidebar .final-price.converted {
  padding-top: 0;
}
.sidebar .final-price.converted .text,
.sidebar .final-price.converted .value {
  font-size: 12px;
  font-weight: 400;
}
@media (min-width: 64em) {
  .sidebar-right--active .header,
  .sidebar-right--active .main,
  .sidebar-right--active .footer {
    transition-delay: 0s !important;
  }
}

/*Billing*/
.sidebar .billing-details {
  font-size: 15px;
}
.sidebar .billing-details strong {
  display: block;
  font-size: 18px;
  margin-bottom: 20px;
}

.sidebar .card-registration-fee {
  font-size: 14px;
  margin-top: 20px;
  font-weight: 600;
}
.sidebar .accept-terms {
  display: block;
  margin-top: 30px;
}
.sidebar .accept-terms a {
  text-decoration: underline;
  transition: color 0.3s;
  -webkit-transition: color 0.3s;
}
.sidebar .accept-terms a:hover {
  color: #777;
}

/*Payment*/
.sidebar .table-banks {
  font-size: 16px;
  margin-bottom: 32px;
}
.sidebar .table-banks thead {
  text-align: left;
}
.sidebar .table-banks th,
.sidebar .table-banks td {
  padding: 0 10px 0 0;
}

/*Profile*/
.sidebar div[ui-view='sidebar-user'] h3 {
  margin-bottom: 32px;
}
.sidebar .logout {
  font-size: 14px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.sidebar .logout:hover {
  color: #bbb;
}

/*Login, registration*/
.login-tabs {
  border-bottom: solid 1px #ddd;
  padding-bottom: 0;
  margin-bottom: 20px;
}
.login-tab {
  display: inline-block;
  padding-bottom: 16px;
  margin-right: 32px;
  font-size: 20px;
  font-family: 'Panton', sans-serif;
  font-weight: 700;
  color: #ababab;
  cursor: pointer;
}
.login-tab.active {
  color: #2c2c2c;
  border-bottom: solid 2px #2c2c2c;
  margin-bottom: -2px;
}

/*Color theme - dark*/
.dark .sidebar {
  background-color: #0f0f0f;
}
.dark
  .sidebar__ui-view[ui-view='sidebar-cart']:not(:empty)
  ~ .sidebar__ui-view[ui-view='sidebar-user'],
.dark .sidebar__ui-view[ui-view='cart-primary'] {
  background-color: #050505;
}
.dark .sidebar input[type='text'],
.dark .sidebar input[type='email'],
.dark .sidebar input[type='password'],
.dark .sidebar input[type='tel'],
.dark .sidebar input[type='number'],
.dark .sidebar select,
.dark .sidebar select option {
  background-color: #000;
}
.dark .login-tab.active {
  color: #f0f0f0;
  border-color: #f0f0f0;
}

/*Color theme - light*/
.light .sidebar {
  background-color: #f0f0f0;
}
.light
  .sidebar__ui-view[ui-view='sidebar-cart']:not(:empty)
  ~ .sidebar__ui-view[ui-view='sidebar-user'],
.light .sidebar__ui-view[ui-view='cart-primary'] {
  background-color: #f8f8f8;
}
.light .sidebar input[type='text'],
.light .sidebar input[type='email'],
.light .sidebar input[type='password'],
.light .sidebar input[type='tel'],
.light .sidebar input[type='number'],
.light .sidebar select,
.light .sidebar select option {
  background-color: #fff;
}
.light .login-tab.active {
  color: #2c2c2c;
  border-color: #2c2c2c;
}

/*Google address*/
.sidebar .ui-select-container {
  border: solid 1px #ccc;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 12px;
}
.sidebar input[type='text'].ui-select-search {
  border-radius: 0;
  border: none;
  margin-bottom: 0;
}
.sidebar .ui-select-choices {
  border-top: solid 1px #ccc;
}
.sidebar .ui-select-choices-row {
  font-size: 14px;
}
.sidebar .ui-select-choices-row:hover {
  background: #fff;
}
.sidebar .ui-select-toggle,
.sidebar .btn.ui-select-toggle {
  display: block;
  background: #fff;
  padding: 12px;
}
.sidebar .ui-select-placeholder {
  color: #999;
  text-transform: none;
  font-weight: 400;
  font-size: 13px;
}
.sidebar .ui-select-match-text.pull-left {
  float: none;
  color: inherit;
  text-transform: none;
  font-weight: 400;
  font-size: 13px;
}

@media (max-width: 480px) {
  .sidebar .half-block {
    width: 100%;
    display: block;
  }
  .login-tab {
    font-size: 16px;
    padding-bottom: 22px;
  }
}
form[name=dokuForm] .desc,
form[name=dokuForm] p {
  line-height: 18px;
}
form[name=dokuForm] ol,
form[name=dokuForm] td,
form[name=dokuForm] tr,
form[name=dokuForm] ul {
  padding: 0;
}
form[name=dokuForm] img,
form[name=dokuForm] input {
  border: none;
}
form[name=dokuForm] .clear,
form[name=dokuForm] .doku-wrap .clear {
  clear: both;
}
form[name=dokuForm] .font-reg,
form[name=dokuForm] body {
  font-family: din-reg, arial;
}
form[name=dokuForm] a.default-btn,
form[name=dokuForm] aside,
form[name=dokuForm] details,
form[name=dokuForm] figcaption,
form[name=dokuForm] figure,
form[name=dokuForm] footer,
form[name=dokuForm] header,
form[name=dokuForm] hgroup,
form[name=dokuForm] menu,
form[name=dokuForm] nav,
form[name=dokuForm] section {
  display: block;
}
form[name=dokuForm] #dw-channel ul,
form[name=dokuForm] .doku-wrap #dw-channel ul,
form[name=dokuForm] ol,
form[name=dokuForm] ul {
  list-style: none;
}
form[name=dokuForm] .cmn-toggle,
form[name=dokuForm] .remodal,
form[name=dokuForm] [data-remodal-id] {
  visibility: hidden;
}
form[name=dokuForm] #dw-channel .nav,
form[name=dokuForm] .nameuser,
form[name=dokuForm] .styled-select select,
form[name=dokuForm] body.remodal_lock,
form[name=dokuForm] html.remodal_lock,
form[name=dokuForm] select {
  overflow: hidden;
}
form[name=dokuForm] .doku-wrap a,
form[name=dokuForm] .doku-wrap input,
form[name=dokuForm] .doku-wrap select,
form[name=dokuForm] a,
form[name=dokuForm] input,
form[name=dokuForm] input:focus,
form[name=dokuForm] select,
form[name=dokuForm] textarea:focus {
  outline: 0;
}
form[name=dokuForm] * {
  margin: 0;
}
form[name=dokuForm] aside,
form[name=dokuForm] blockquote,
form[name=dokuForm] body,
form[name=dokuForm] caption,
form[name=dokuForm] details,
form[name=dokuForm] div,
form[name=dokuForm] fieldset,
form[name=dokuForm] figcaption,
form[name=dokuForm] figure,
form[name=dokuForm] footer,
form[name=dokuForm] form,
form[name=dokuForm] h1,
form[name=dokuForm] h2,
form[name=dokuForm] h3,
form[name=dokuForm] h4,
form[name=dokuForm] h5,
form[name=dokuForm] h6,
form[name=dokuForm] header,
form[name=dokuForm] hgroup,
form[name=dokuForm] html,
form[name=dokuForm] input,
form[name=dokuForm] label,
form[name=dokuForm] legend,
form[name=dokuForm] li,
form[name=dokuForm] menu,
form[name=dokuForm] nav,
form[name=dokuForm] ol,
form[name=dokuForm] p,
form[name=dokuForm] section,
form[name=dokuForm] span,
form[name=dokuForm] summary,
form[name=dokuForm] ul {
  margin: 0;
  padding: 0;
}
form[name=dokuForm] ol,
form[name=dokuForm] p,
form[name=dokuForm] td,
form[name=dokuForm] tr,
form[name=dokuForm] ul {
  margin: auto;
}
form[name=dokuForm] #container,
form[name=dokuForm] #container-outer,
form[name=dokuForm] body,
form[name=dokuForm] html {
  height: 100%;
}
form[name=dokuForm] body {
  background: #f4f4f4;
  overflow-x: hidden;
}
form[name=dokuForm] a {
  color: #b90a29;
}
form[name=dokuForm] a:hover {
  color: #780300;
}
form[name=dokuForm] p {
  color: #666;
  font-size: 13px;
  text-align: justify;
}
form[name=dokuForm] table {
  border: 1px solid #dadada;
  font-size: 12px;
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}
form[name=dokuForm] input {
  -webkit-appearance: none;
}
form[name=dokuForm] input[type=checkbox] {
  -webkit-appearance: checkbox;
}
form[name=dokuForm] .styled-select,
form[name=dokuForm] .wrapper-select {
  background: url(https://pay.doku/images/down_arrow_select.png) right center no-repeat;
  overflow: hidden;
  width: 170px;
}
form[name=dokuForm] .styled-select select,
form[name=dokuForm] select {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  width: 190px;
}
form[name=dokuForm] #choice option {
  color: #000;
}
form[name=dokuForm] .empty {
  color: gray;
}
form[name=dokuForm] .radius {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
form[name=dokuForm] .fleft {
  float: left;
}
form[name=dokuForm] .fright {
  float: right;
}
form[name=dokuForm] .padd-default {
  padding: 20px;
  position: relative;
}
@font-face {
  font-family: din;
  src: url(https://pay.doku/fonts/din_light-webfont.eot);
  src: url(https://pay.doku/fonts/din_light-webfont.eot?#iefix) format("embedded-opentype"), url(https://pay.doku/fonts/din_light-webfont.woff) format("woff"), url(https://pay.doku/fonts/din_light-webfont.ttf) format("truetype"), url(https://pay.doku/fonts/din_light-webfont.svg#din_light-webfont) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: din-reg;
  src: url(https://pay.doku/fonts/dinnextltproregular.eot);
  src: url(https://pay.doku/fonts/dinnextltproregular.eot?#iefix) format("embedded-opentype"), url(https://pay.doku/fonts/dinnextltproregular.woff) format("woff"), url(https://pay.doku/fonts/dinnextltproregular.ttf) format("truetype"), url(https://pay.doku/fonts/dinnextltproregular.svg#din_light-webfont) format("svg");
  font-weight: 400;
  font-style: normal;
}
form[name=dokuForm] ::-moz-placeholder {
  opacity: 0;
}
form[name=dokuForm] ::-webkit-input-placeholder {
  opacity: 0;
}
form[name=dokuForm] :-ms-input-placeholder {
  opacity: 0;
}
form[name=dokuForm] input:-moz-placeholder {
  opacity: 0;
}
form[name=dokuForm] .default-width {
  background: #fff;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 12px #f2f2f2;
  margin: 0 auto;
  width: 500px;
}
form[name=dokuForm] .right-head {
  font-family: din-reg;
}
form[name=dokuForm] .text-totalpay {
  font-size: 11px;
  text-align: right;
}
form[name=dokuForm] .amount {
  font-size: 34px;
}
form[name=dokuForm] .select-payment-channel {
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 12px 20px;
}
form[name=dokuForm] .promocontent-dw select,
form[name=dokuForm] .select-payment-channel select,
form[name=dokuForm] select.resp-tabDrop {
  color: #6a6a6a;
  font-size: 18px;
  padding: 0 15px 0 0;
  font-family: din-reg;
}
form[name=dokuForm] .content-payment-channel ul li {
  margin: 5px 0 0;
}
form[name=dokuForm] .default-btn,
form[name=dokuForm] .two-btn {
  margin-top: 20px;
}
form[name=dokuForm] .line {
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 20px;
}
form[name=dokuForm] .default-btn {
  background: #fff;
  border: 1px solid #b90a29;
  border-radius: 3px;
  color: #b90a29;
  font-size: 18px;
  padding: 14px 10px;
  width: 100%;
  cursor: pointer;
  font-family: din-reg, arial;
}
form[name=dokuForm] a.default-btn {
  text-align: center;
  text-decoration: none;
  width: auto;
}
form[name=dokuForm] .default-btn:hover {
  background: #b90a29;
  color: #fff;
}
form[name=dokuForm] .two-btn a.default-btn,
form[name=dokuForm] .two-btn input.default-btn {
  float: left;
  font-size: 15px;
  margin: 0 2%;
  padding: 3%;
  width: 40%;
}
form[name=dokuForm] .second-btn {
  border-color: #606c80;
  color: #606c80;
}
form[name=dokuForm] .second-btn:hover {
  background: #606c80;
  color: #fff;
}
form[name=dokuForm] .two-btn input.default-btn {
  width: 45%;
}
form[name=dokuForm] .two-btn a.default-btn {
  padding: 3.2% 3%;
}
form[name=dokuForm] .styled-input input,
form[name=dokuForm] .styled-input input.identified.valid,
form[name=dokuForm] .styled-input input.valid,
form[name=dokuForm] .styled-input select {
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 40px;
  padding: 0 3%;
  width: 93%;
  font-family: din-reg, arial;
  font-size: 15px;
}
form[name=dokuForm] .styled-input select {
  width: 100%;
}
form[name=dokuForm] .width60 {
  width: 68%;
}
form[name=dokuForm] .width50 {
  width: 49%;
}
form[name=dokuForm] .width30 {
  width: 30%;
}
form[name=dokuForm] .width25 {
  width: 23%;
}
form[name=dokuForm] .width30.styled-input input {
  padding: 0 8%;
  width: 83%;
}
form[name=dokuForm] .wrapper-secondstyle-inputbtn input.textinput {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  padding: 7px 10px;
  width: 50%;
}
form[name=dokuForm] .wrapper-secondstyle-inputbtn input.default-btn {
  font-size: 12px;
  margin-top: 0;
  padding: 6px 0;
  width: 100px;
}
form[name=dokuForm] .wrapper-othermaterial label {
  color: #6a6a6a;
  font-size: 15px;
  padding: 10px 0 0;
}
form[name=dokuForm] .right-paychan {
  position: absolute;
  right: 20px;
  top: -40px;
}
form[name=dokuForm] .logo-payment-channel {
  background: url(https://pay.doku/images/logo-payment.png) no-repeat;
  height: 30px;
  display: inline-block;
}
form[name=dokuForm] .cc {
  background-position: 0 0;
  width: 110px;
}
form[name=dokuForm] .dokuwallet {
  background-position: -110px 0;
  width: 94px;
}
form[name=dokuForm] .bcaklikpay {
  background-position: -204px 0;
  width: 131px;
}
form[name=dokuForm] .mandiriclickpay {
  background-position: -335px 0;
  width: 56px;
}
form[name=dokuForm] .atm {
  background-position: -391px 0;
  width: 126px;
}
form[name=dokuForm] .mm {
  background-position: -517px 0;
  width: 31px;
}
form[name=dokuForm] .epay {
  background-position: -548px 0;
  width: 90px;
}
form[name=dokuForm] .cimb {
  background-position: -638px 0;
  width: 96px;
}
form[name=dokuForm] .styled-select {
  border-radius: 0 3px 3px 0;
  border-right: 1px solid #ccc;
}
form[name=dokuForm] .styled-select select {
  width: 115%;
}
form[name=dokuForm] .content-payment-channel {
  padding-bottom: 30px;
}
form[name=dokuForm] .footer {
  color: #a0a0a0;
  font-size: 13px;
  margin-top: 25px;
  text-align: center;
}
form[name=dokuForm] .avatar-dw {
  top: -53px;
}
form[name=dokuForm] .avatar-dw img {
  border-radius: 40px;
  width: 45px;
}
form[name=dokuForm] .nameuser {
  height: 20px;
  margin: 12px 0 0 10px;
  max-width: 120px;
  text-align: right;
}
form[name=dokuForm] #select-paymentchannel option,
form[name=dokuForm] .resp-tabDrop option {
  font-size: 14px;
}
form[name=dokuForm] .readonlycase ~ label,
form[name=dokuForm] input:focus ~ label,
form[name=dokuForm] input:valid ~ label,
form[name=dokuForm] textarea:focus ~ label,
form[name=dokuForm] textarea:valid ~ label {
  font-size: 0.75em;
  color: #b90a29;
  top: -13px;
  -webkit-transition: all 125ms ease;
  transition: all 125ms ease;
  padding: 0 5px;
  background: #fff;
}
form[name=dokuForm] .styled-input .readonlycase ~ label {
  color: #b90a29;
  font-size: 0.75em;
  top: -13px;
}
form[name=dokuForm] .styled-input {
  position: relative;
  margin-bottom: 15px;
}
form[name=dokuForm] .styled-input label {
  color: #999;
  position: absolute;
  top: 13px;
  left: 10px;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  pointer-events: none;
  font-size: 14px;
}
form[name=dokuForm] .styled-input.wide {
  width: 100%;
}
form[name=dokuForm] input ~ span,
form[name=dokuForm] textarea ~ span {
  display: block;
  width: 0;
  height: 3px;
  background: #8e44ad;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 125ms ease;
  transition: all 125ms ease;
}
form[name=dokuForm] input:focus ~ span,
form[name=dokuForm] textarea:focus ~ span {
  width: 100%;
  -webkit-transition: all 75ms ease;
  transition: all 75ms ease;
}
form[name=dokuForm] #dw-channel .list-wrap,
form[name=dokuForm] .resp-content__active {
  padding: 20px;
  margin: 0;
}
form[name=dokuForm] #dw-channel ul li a {
  display: block;
  border-bottom: 1px solid #666;
  padding: 4px;
  color: #666;
}
form[name=dokuForm] #dw-channel .nav li {
  float: left;
  margin: 0;
}
form[name=dokuForm] #dw-channel .nav li.last {
  margin-right: 0;
}
form[name=dokuForm] #dw-channel .nav li a,
form[name=dokuForm] #dw-channel .resp-tablist li {
  display: block;
  padding: 0 25px 10px;
  color: #6a6a6a;
  font-size: 16px;
  text-align: center;
  border: 0;
  text-decoration: none;
}
form[name=dokuForm] #dw-channel .resp-tablist li.resp-tablistItem__active,
form[name=dokuForm] #dw-channel .resp-tablist li:hover,
form[name=dokuForm] #dw-channel li a.current,
form[name=dokuForm] #dw-channel li a.current:hover {
  background-color: #fff !important;
  border-bottom: 2px solid #b90a29;
  cursor: pointer;
}
form[name=dokuForm] #dw-channel .nav li a:focus,
form[name=dokuForm] #dw-channel .nav li a:hover {
  border-bottom: 2px solid #b90a29;
}
form[name=dokuForm] #dw-channel label.lxco {
  padding: 0;
  top: 0;
}
form[name=dokuForm] #dw-channel .exco-listcard .listcard {
  float: left;
  margin: 0 2%;
  width: 46%;
}
form[name=dokuForm] #dw-channel .resp-tablist li {
  display: inline;
}
form[name=dokuForm] .resp-content__active {
  margin-top: 15px;
}
form[name=dokuForm] .padd-dw {
  padding: 20px 0 0;
}
form[name=dokuForm] .saldo-dw {
  margin: 20px 0;
}
form[name=dokuForm] .textsaldo {
  color: #9a9a9a;
  font-size: 14px;
}
form[name=dokuForm] .saldo {
  color: #717171;
  font-size: 40px;
}
form[name=dokuForm] .exco-listcard input[type=radio] {
  display: none;
}
form[name=dokuForm] ul.list-tabmenudw li {
  width: auto;
}
form[name=dokuForm] ul.list-tabmenudw li a {
  display: block;
}
form[name=dokuForm] .list-tabmenudw li:last-of-type {
  min-width: 1px !important;
  width: 1px !important;
}
form[name=dokuForm] .text-tabmenu {
  display: inline-block;
}
form[name=dokuForm] .exco-card .nunmber-cc .title-default {
  font-size: 18px;
}
form[name=dokuForm] .exco-card .default-contab {
  margin: 0;
}
form[name=dokuForm] .exco-listcard {
  margin: 0;
  display: block;
}
form[name=dokuForm] .exco-listcard .lxco {
  width: 100%;
  float: left;
  transition: all ease 0.3s;
  margin-right: 5px;
  border: 1px solid #dadada;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
form[name=dokuForm] .lxco .wrapper-card-ex:after {
  position: absolute;
  border-radius: 50px;
  display: none;
  width: 25px;
  height: 25px;
  background: url(https://pay.doku/images/cek.png) center center no-repeat #41dfbe;
  right: 10px;
  top: 10px;
  content: "";
}
form[name=dokuForm] .type-cc,
form[name=dokuForm] input[type=radio]:checked + .lxco .wrapper-card-ex:after {
  display: block;
}
form[name=dokuForm] input[type=radio]:checked + .lxco {
  border: 1px solid #41dfbe;
}
form[name=dokuForm] .type-cc {
  background: url(https://pay.doku/images/cc-top.png) no-repeat;
  height: 30px;
  margin: 3px 10px;
  float: left;
}
form[name=dokuForm] .visa {
  background-position: 0 0;
  width: 60px;
}
form[name=dokuForm] .mastercard {
  background-position: -69px 0;
  width: 45px;
}
form[name=dokuForm] .wrapper-list-excc ul li {
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  width: 48%;
  border-bottom: 2px solid #e1e1e1;
  float: left;
  margin-bottom: 15px;
}
form[name=dokuForm] .type-exist input {
  float: left;
  margin: 15px 10px 0 12px;
}
form[name=dokuForm] .wrapper-card-ex {
  padding: 5px 0 0;
}
form[name=dokuForm] .type-exist {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 5px;
}
form[name=dokuForm] .default-contab {
  margin-top: 15px;
  margin-bottom: 25px;
}
form[name=dokuForm] .wrapper-cont-cc {
  background-color: #fafbfb;
  border-radius: 0 0 3px 3px;
  padding: 15px 12px;
}
form[name=dokuForm] .title-wcc {
  color: #959494;
  font-size: 11px;
  margin: 5px 0;
}
form[name=dokuForm] .validthru {
  margin: 15px 0 0;
}
form[name=dokuForm] .validthru .title-wcc {
  float: left;
}
form[name=dokuForm] .text-tvt {
  color: #8d8d8d;
  float: left;
  font-size: 19px;
  margin-left: 10px;
}
form[name=dokuForm] .marg-right {
  margin-right: 2%;
}
form[name=dokuForm] .note-recur {
  border-bottom: 1px solid #fff;
  font-size: 16px;
  margin-bottom: 15px;
  padding: 10px;
}
form[name=dokuForm] .text-noterecur-newcc {
  display: block;
  float: left;
  font-size: 13px;
  line-height: 16px;
  margin-left: 11px;
  padding-bottom: 4px;
  width: 94%;
}
form[name=dokuForm] .nr-ncc input {
  float: left;
}
form[name=dokuForm] .price-nrncc {
  font-size: 20px;
  line-height: 23px;
}
form[name=dokuForm] .wrapper-profile ul li span.quan-items {
  font-size: 16px;
}
form[name=dokuForm] .left-title-dbil {
  float: left;
}
form[name=dokuForm] .text-tdbil {
  border-radius: 3px;
  margin-top: 7px;
  padding: 8px 15px;
}
form[name=dokuForm] .arrow-detbil {
  margin-left: 45%;
}
form[name=dokuForm] .input-cvv-recur {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  border-radius: 0 3px 3px;
  padding: 10px;
}
form[name=dokuForm] .input-cvv-recur input {
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 10px;
  width: 80%;
}
form[name=dokuForm] .text-cvv-recur {
  background-color: #fff;
  border-radius: 3px 3px 0 0;
  display: inline-block;
  margin-bottom: 0;
  padding: 10px 20px;
}
form[name=dokuForm] .wrapper-cvv-recur {
  margin-top: 25px;
}
form[name=dokuForm] .num-card {
  color: #717171;
  font-size: 22px;
}
form[name=dokuForm] .img-cardlist {
  margin-left: 12px;
}
form[name=dokuForm] .img-desc {
  width: 100%;
}
form[name=dokuForm] .detail-result ul li,
form[name=dokuForm] .option-codevoucher ul li,
form[name=dokuForm] .show-points ul li {
  border-bottom: 1px solid #f4f4f4;
  font-size: 16px;
  padding: 13px 0;
}
form[name=dokuForm] .detail-result ul li:first-child {
  padding-top: 0;
}
form[name=dokuForm] .detail-result ul li:last-of-type {
  border: none;
}
form[name=dokuForm] .detail-result ul li .fleft,
form[name=dokuForm] .text-titledw-promo {
  color: #6a6a6a;
  font-size: 16px;
}
form[name=dokuForm] .detail-result ul li .fright {
  color: #8e8e8e;
}
form[name=dokuForm] .detail-result ul li .fright.color-one {
  font-size: 20px;
}
form[name=dokuForm] .text-notif-result {
  font-size: 18px;
  margin: 6px 0 6px 10px;
}
form[name=dokuForm] .title-listpromo {
  color: #717171;
}
form[name=dokuForm] .amount-listpromo {
  font-size: 20px;
}
form[name=dokuForm] .ifusingpromo {
  padding: 0 10px;
  margin: 5px 0;
}
form[name=dokuForm] .promocontent-dw {
  display: none;
}
form[name=dokuForm] .textva {
  font-size: 14px;
  text-align: right;
}
form[name=dokuForm] .numva {
  font-size: 27px;
}
form[name=dokuForm] .cmn-toggle {
  position: absolute;
  margin-left: -9999px;
}
form[name=dokuForm] .cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
form[name=dokuForm] input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #ddd;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
form[name=dokuForm] input.cmn-toggle-round-flat + label:after,
form[name=dokuForm] input.cmn-toggle-round-flat + label:before {
  display: block;
  position: absolute;
  content: "";
}
form[name=dokuForm] input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
form[name=dokuForm] input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 52px;
  background-color: #ddd;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  -ms-border-radius: 52px;
  -o-border-radius: 52px;
  border-radius: 52px;
  -webkit-transition: margin 0.4s, background 0.4s;
  -moz-transition: margin 0.4s, background 0.4s;
  -o-transition: margin 0.4s, background 0.4s;
  transition: margin 0.4s, background 0.4s;
}
form[name=dokuForm] input.cmn-toggle-round-flat:checked + label {
  background-color: #41dfbe;
}
form[name=dokuForm] input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 60px;
  background-color: #41dfbe;
}
form[name=dokuForm] .texttoggleform {
  margin-bottom: 5px;
  padding-top: 8px;
}
form[name=dokuForm] .toogle-medium input.cmn-toggle-round-flat + label::after {
  width: 27px;
}
form[name=dokuForm] .toogle-medium input.cmn-toggle-round-flat + label {
  width: 70px;
  height: 30px;
}
form[name=dokuForm] .toogle-medium input.cmn-toggle-round-flat:checked + label::after {
  margin-left: 38px;
}
form[name=dokuForm] .on-toggle {
  font-size: 15px;
  margin: 7px;
  position: absolute;
  color: #41dfbe;
}
form[name=dokuForm] .off-toggle {
  font-size: 14px;
  margin-left: 40px;
  color: #bcbcbc;
}
form[name=dokuForm] .text-poin {
  float: left;
  font-size: 15px;
  color: #000;
}
form[name=dokuForm] .switch {
  float: right;
  margin-top: -20px;
}
form[name=dokuForm] .show-points {
  border-radius: 3px;
  display: block;
  padding: 15px 0 10px;
}
form[name=dokuForm] .left-sp {
  float: left;
  font-size: 15px;
  color: #717171;
}
form[name=dokuForm] .right-sp {
  float: right;
  font-size: 19px;
  color: #000;
}
form[name=dokuForm] .show-points ul li {
  padding: 10px 0 3px;
}
form[name=dokuForm] .show-points ul li:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
form[name=dokuForm] .show-points ul li:last-of-type .right-sp {
  font-size: 24px;
}
form[name=dokuForm] .show-points ul li:last-of-type .left-sp {
  margin-top: 4px;
}
form[name=dokuForm] .remove-float {
  float: none;
}
form[name=dokuForm] .second-ep {
  font-size: 14px;
  color: #717171;
}
form[name=dokuForm] .wrapper-installment ul li {
  background: #f7f7f7;
  border-radius: 4px;
  float: left;
  margin: 1%;
  padding: 2%;
  width: 27%;
  position: relative;
  height: 50px;
}
form[name=dokuForm] .title-recur,
form[name=dokuForm] .wrapper-installment {
  margin-top: 15px;
}
form[name=dokuForm] .month-installment {
  font-size: 44px;
  position: absolute;
  right: 5px;
  top: 3px;
}
form[name=dokuForm] .text-installment {
  margin-top: 15px;
  text-align: right;
}
form[name=dokuForm] .installment-con2 {
  background: #daf0ff;
  border-radius: 3px;
  padding: 10px;
}
form[name=dokuForm] .note-installment {
  color: red;
  font-size: 13px;
  font-style: italic;
  padding: 7px 0 5px;
}
form[name=dokuForm] .desc {
  color: #8e8e8e;
  font-size: 13px;
  text-align: justify;
  margin-bottom: 20px;
}
form[name=dokuForm] .text-token {
  width: 90%;
}
form[name=dokuForm] .list-chacode ul li {
  float: left;
  text-align: center;
  width: 33%;
}
form[name=dokuForm] .text-chacode {
  color: #6a6a6a;
  font-size: 15px;
  margin-bottom: 10px;
}
form[name=dokuForm] .num-chacode {
  color: #1d2655;
  font-size: 16px;
}
form[name=dokuForm] .list-chacode {
  padding: 10px 0;
}
form[name=dokuForm] .title-recur {
  font-size: 20px;
}
form[name=dokuForm] .recur-select ul.nav li {
  width: 50%;
}
form[name=dokuForm] .recur-select ul#addcc .logo-payment-channel {
  margin: 0 0 15px;
}
form[name=dokuForm] .recur-select ul#addcc .tolltips-cc {
  right: 10px;
  top: 66px;
}
form[name=dokuForm] .note-text {
  background: #f1f1f1;
  border-radius: 3px;
  margin-top: 25px;
  padding: 10px;
}
form[name=dokuForm] .note-text .text-noterecur-newcc {
  text-align: justify;
  color: #525252;
}
form[name=dokuForm] .padd-recuredit {
  padding: 0;
}
form[name=dokuForm] .padd-recuredit .exco-listcard .lxco {
  cursor: auto;
}
form[name=dokuForm] #dw-channel ul.exco-listcard li a {
  border-bottom: medium none;
  border-radius: 30px;
  cursor: pointer;
  display: block;
  margin-right: 9px;
  margin-top: 3px;
  padding: 7px 8px 3px;
}
form[name=dokuForm] .bg-grad,
form[name=dokuForm] .resp-headings,
form[name=dokuForm] .resp-tabDrop {
  display: none;
}
form[name=dokuForm] .content-modal .exco-listcard {
  margin: 0 auto;
  text-align: left;
  width: 235px;
}
form[name=dokuForm] .bg-grad {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgb(255, 255, 255) 100%) rgba(0, 0, 0, 0);
  height: 40px;
  position: sticky;
  width: 100%;
  z-index: 1000000;
  bottom: 0;
}
form[name=dokuForm] .padd-installment {
  padding: 5px 20px;
}
form[name=dokuForm] .head-textcenter .amount {
  color: #6a6a6a;
}
form[name=dokuForm] .option-codevoucher .promocontent-dw select {
  margin-top: 6px;
}
form[name=dokuForm] .option-codevoucher ul.list-material li:last-of-type {
  background: #b1ffe4;
  padding: 10px 0 0;
}
form[name=dokuForm] .lastlist-ifp {
  background: #fff;
  margin-bottom: 0;
  padding: 14px 10px;
}
form[name=dokuForm] .lastlist-ifp .amount-listpromo {
  font-size: 25px;
}
form[name=dokuForm] .checkbox-custom,
form[name=dokuForm] .radio-custom {
  opacity: 0;
  position: absolute;
}
form[name=dokuForm] .checkbox-custom-label,
form[name=dokuForm] .radio-custom-label,
form[name=dokuForm] .spinner {
  position: relative;
}
form[name=dokuForm] .checkbox-custom,
form[name=dokuForm] .checkbox-custom-label,
form[name=dokuForm] .radio-custom,
form[name=dokuForm] .radio-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
form[name=dokuForm] .material-form .checkbox-custom + .checkbox-custom-label:before,
form[name=dokuForm] .material-form .checkbox-custom + label + .checkbox-custom-label:before,
form[name=dokuForm] .material-form .radio-custom + .radio-custom-label:before,
form[name=dokuForm] .material-form .radio-custom + label + .radio-custom-label:before {
  content: "";
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 1px;
  margin-right: 10px;
  text-align: center;
}
form[name=dokuForm] .checkbox-custom:checked + .checkbox-custom-label:before,
form[name=dokuForm] .checkbox-custom:checked + label + .checkbox-custom-label:before,
form[name=dokuForm] .radio-custom:checked + label + .radio-custom-label:before {
  background: url(https://pay.doku/images/cek.png) no-repeat #41dfbe;
  color: #fff;
  border-color: #41dfbe;
}
form[name=dokuForm] .material-form label.checkbox-custom-label,
form[name=dokuForm] .material-form label.radio-custom-label {
  border-bottom: 0 !important;
}
form[name=dokuForm] .radio-custom + .radio-custom-label:before,
form[name=dokuForm] .radio-custom + label + .radio-custom-label:before {
  border-radius: 50%;
}
form[name=dokuForm] .radio-custom:checked + .radio-custom-label:before,
form[name=dokuForm] .radio-custom:checked + label + .radio-custom-label:before {
  background: url(https://pay.doku/images/cek.png) no-repeat #41dfbe;
  border-color: #41dfbe;
}
form[name=dokuForm] .checkbox-custom:disabled + .checkbox-custom-label:before,
form[name=dokuForm] .radio-custom:disabled + .radio-custom-label:before {
  background: #ddd;
  border-color: #ccc;
}
form[name=dokuForm] .option-codevoucher label.radio-custom-label {
  color: #717171;
  font-size: 15px;
  margin: 15px 0 0;
}
form[name=dokuForm] .option-codevoucher ul li {
  padding: 7px 0 0;
  margin-top: 0;
}
form[name=dokuForm] .wrapper-errorpage {
  text-align: center;
  color: #b90a29;
}
form[name=dokuForm] .iconerror {
  background: #b90a29;
  border-radius: 80px;
  margin-bottom: 15px;
  padding: 20px;
}
form[name=dokuForm] .loading,
form[name=dokuForm] .texterror {
  padding-bottom: 25px;
}
form[name=dokuForm] .texterror {
  font-size: 20px;
}
form[name=dokuForm] .loading {
  font-size: 18px;
  text-align: center;
}
form[name=dokuForm] .spinner {
  width: 100px;
  height: 100px;
  margin: 0 auto 25px;
}
form[name=dokuForm] .double-bounce1,
form[name=dokuForm] .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #bf0227;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}
form[name=dokuForm] .double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
form[name=dokuForm] .tooltip {
  display: inline;
  position: relative;
}
form[name=dokuForm] .tooltip:hover:after {
  background: #333;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  bottom: 40px;
  color: #fff;
  content: attr(title);
  left: -180px;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 200px;
  font-size: 12px;
}
form[name=dokuForm] .tooltip:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0;
  bottom: 35px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}
form[name=dokuForm] .tolltips-wallet {
  left: 205px;
  position: absolute;
  top: 20px;
}
form[name=dokuForm] .tolltips-cc {
  right: 30px;
  position: absolute;
  top: 35px;
}
form[name=dokuForm] .validasi {
  background: #fffaeb;
  margin: 20px -20px 0;
  padding: 10px 20px;
  position: relative;
}
form[name=dokuForm] .validasi .styled-input {
  margin-bottom: 0;
}
form[name=dokuForm] .remodal-bg {
  -webkit-transition: -webkit-filter 0.2s linear;
  -moz-transition: -moz-filter 0.2s linear;
  -o-transition: -o-filter 0.2s linear;
  transition: filter 0.2s linear;
}
form[name=dokuForm] body.remodal_active .remodal-bg {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}
form[name=dokuForm] .remodal-overlay {
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  text-align: center;
  opacity: 0;
  background: rgba(33, 36, 46, 0.95);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EE21242E, endColorstr=#EE21242E);
  zoom: 1;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
form[name=dokuForm] .remodal,
form[name=dokuForm] .remodal-overlay:after {
  display: inline-block;
  vertical-align: middle;
}
form[name=dokuForm] .remodal-overlay > * {
  -webkit-transform: translateZ(0);
}
form[name=dokuForm] .remodal-overlay:after {
  height: 100%;
  margin-left: -0.05em;
  content: "";
}
form[name=dokuForm] body.remodal_active .remodal-overlay {
  opacity: 1;
}
form[name=dokuForm] .remodal {
  font-size: 16px;
  position: relative;
  width: 70%;
  min-height: auto;
  padding: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  background-clip: padding-box;
  color: #8e8e8e;
  -webkit-box-shadow: 0 0 8px #171a24;
  box-shadow: 0 0 8px #171a24;
  border-radius: 3px;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: -webkit-transform 0.2s linear;
  -moz-transition: -moz-transform 0.2s linear;
  -o-transition: -o-transform 0.2s linear;
  transition: transform 0.2s linear;
}
form[name=dokuForm] body.remodal_active .remodal {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
form[name=dokuForm] .title-modal {
  border-bottom: 1px solid #f4f4f4;
  margin: 0 -15px;
  padding: 0 15px 10px;
  text-align: left;
}
form[name=dokuForm] .content-modal {
  margin: 20px 0;
}
form[name=dokuForm] .resmall {
  width: 30%;
}
form[name=dokuForm] .italiclink {
  font-style: italic;
  text-decoration: underline;
}
form[name=dokuForm] #dw-channel .nav li a:focus,
form[name=dokuForm] #dw-channel .nav li a:hover,
form[name=dokuForm] #dw-channel .resp-tablist li.resp-tablistItem__active,
form[name=dokuForm] #dw-channel .resp-tablist li:hover,
form[name=dokuForm] #dw-channel li a.current,
form[name=dokuForm] #dw-channel li a.current:hover,
form[name=dokuForm] .color-one,
form[name=dokuForm] .detail-result ul li .fright.color-one {
  color: #b90a29;
}
form[name=dokuForm] .color-two,
form[name=dokuForm] .doku-wrap .color-two {
  color: #5d5d5d;
}
form[name=dokuForm] .color-border {
  border-color: #f4f4f4;
}
form[name=dokuForm] .success {
  color: #11a88a;
}
form[name=dokuForm] .fail {
  color: #b70000;
}
form[name=dokuForm] .has-error input,
form[name=dokuForm] .styled-input input.cc-exp.valid,
form[name=dokuForm] .styled-input input.error,
form[name=dokuForm] .styled-input input.unknown {
  border: 1px solid red;
}
form[name=dokuForm] #dw-channel ul.exco-listcard li a {
  background: #b90a29;
}
@media screen and (max-width: 650px) {
  form[name=dokuForm] .default-width {
    width: 95%;
  }
  form[name=dokuForm] .padd-default {
    padding: 10px;
  }
  form[name=dokuForm] .left-head img {
    width: 100px;
  }
  form[name=dokuForm] .text-totalpay {
    font-size: 10px;
  }
  form[name=dokuForm] .amount {
    font-size: 25px;
  }
  form[name=dokuForm] .wrapper-select {
    width: 100%;
  }
  form[name=dokuForm] .select-payment-channel select,
  form[name=dokuForm] .wrapper-select select {
    width: 105%;
  }
  form[name=dokuForm] .list-chacode ul li,
  form[name=dokuForm] .mobile-nofloat .fleft,
  form[name=dokuForm] .mobile-nofloat .fright {
    float: none;
    width: 100%;
  }
  form[name=dokuForm] .right-paychan {
    position: relative;
    right: 0;
    top: 0;
    margin: 5px 0 10px;
  }
  form[name=dokuForm] .styled-input input,
  form[name=dokuForm] .styled-input input.identified.valid,
  form[name=dokuForm] .styled-input input.valid,
  form[name=dokuForm] .styled-input select {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }
  form[name=dokuForm] .styled-input label {
    left: 5px;
  }
  form[name=dokuForm] .tolltips-cc {
    top: 22%;
    right: 11px;
  }
  form[name=dokuForm] .has-error input,
  form[name=dokuForm] .styled-input input.cc-exp.valid,
  form[name=dokuForm] .styled-input input.error,
  form[name=dokuForm] .styled-input input.unknown {
    border: none;
    border-bottom: 1px solid red;
  }
  form[name=dokuForm] input:focus ~ label,
  form[name=dokuForm] input:valid ~ label,
  form[name=dokuForm] textarea:focus ~ label,
  form[name=dokuForm] textarea:valid ~ label {
    padding: 0;
  }
  form[name=dokuForm] .list-chacode ul li {
    text-align: left;
    border-bottom: 1px solid #f4f4f4;
    padding: 8px 0;
  }
  form[name=dokuForm] .list-chacode .text-chacode {
    width: 50%;
    float: left;
    margin-bottom: 0;
  }
  form[name=dokuForm] .list-chacode .num-chacode {
    float: right;
  }
  form[name=dokuForm] .text-token {
    width: 85%;
    margin-bottom: 5px;
  }
  form[name=dokuForm] .validasi {
    margin: 20px -10px;
    padding: 10px;
  }
  form[name=dokuForm] .validasi .width50 {
    float: none;
    width: 100%;
  }
  form[name=dokuForm] .validasi .styled-input input {
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  form[name=dokuForm] .tolltips-wallet {
    left: auto;
    right: 20px;
  }
  form[name=dokuForm] .remodal {
    width: 90%;
  }
  form[name=dokuForm] .mm,
  form[name=dokuForm] .resp-tablist {
    display: none;
  }
  form[name=dokuForm] .resp-tabDrop {
    display: block;
  }
  form[name=dokuForm] #dw-channel .list-wrap,
  form[name=dokuForm] .resp-content__active {
    margin: 0;
    padding: 15px 0;
  }
  form[name=dokuForm] .avatar-dw {
    position: absolute;
    right: 10px;
    text-align: right;
    top: -55px;
    width: 180px;
  }
  form[name=dokuForm] .avatar-dw .nameuser {
    float: right;
  }
  form[name=dokuForm] .selectdw {
    border-bottom: 1px solid #f4f4f4;
    margin: 0 -10px;
    padding: 0 10px 10px;
  }
  form[name=dokuForm] .toogle-medium input.cmn-toggle-round-flat:checked + label::after {
    margin-left: 34px;
  }
  form[name=dokuForm] .img-other {
    width: 100px;
  }
  form[name=dokuForm] .padd-installment {
    padding: 5px 10px;
  }
  form[name=dokuForm] .switch {
    margin-top: -13px;
  }
  form[name=dokuForm] .head-textcenter .fleft,
  form[name=dokuForm] .head-textcenter .fright {
    float: none;
  }
  form[name=dokuForm] .head-textcenter .right-head {
    border-bottom: 1px solid #f4f4f4;
    border-top: 1px solid #f4f4f4;
    clear: both;
    float: none;
    margin: 10px -10px 0;
    padding: 10px 0;
    text-align: center;
  }
  form[name=dokuForm] .head-textcenter .amount {
    font-size: 20px;
    margin-top: 0;
  }
  form[name=dokuForm] #dw-channel .nav.navtwo li a {
    font-size: 14px;
    padding: 0 10px 10px;
  }
}
@media screen and (max-width: 360px) {
  form[name=dokuForm] .avatar-dw img {
    display: none;
  }
  form[name=dokuForm] #dw-channel .exco-listcard .listcard {
    float: none;
    margin: 0 auto 15px;
    width: 230px;
  }
  form[name=dokuForm] .wrapper-listcard {
    height: 180px;
    overflow: scroll;
    position: relative;
  }
  form[name=dokuForm] .bg-grad {
    display: block;
  }
  form[name=dokuForm] .bg-grad.fortop {
    top: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0, rgb(255, 255, 255) 100%) rgba(0, 0, 0, 0);
  }
  form[name=dokuForm] .show-points ul li:last-of-type .left-sp {
    text-align: left;
    width: 135px;
  }
  form[name=dokuForm] .wrapper-installment ul li {
    width: 44%;
  }
  form[name=dokuForm] .text-noterecur-newcc {
    width: 90%;
    font-size: 12px;
    line-height: 14px;
  }
  form[name=dokuForm] .option-codevoucher ul li .fleft,
  form[name=dokuForm] .option-codevoucher ul li .fright {
    float: none;
  }
  form[name=dokuForm] .option-codevoucher ul li {
    padding-bottom: 10px;
  }
  form[name=dokuForm] .title-listpromo {
    margin-bottom: 5px;
  }
  form[name=dokuForm] .resultpage .head .left-head.fleft,
  form[name=dokuForm] .resultpage .head .right-head.fright,
  form[name=dokuForm] .resultpage .head .right-head.fright .fleft.text-notif-result,
  form[name=dokuForm] .resultpage .head .right-head.fright img {
    float: none;
    text-align: center;
  }
  form[name=dokuForm] .resultpage .head .right-head.fright {
    margin-top: 10px;
  }
  form[name=dokuForm] .resultpage .head .right-head.fright .textva {
    text-align: center;
  }
}
form[name=dokuForm] .doku-wrap aside,
form[name=dokuForm] .doku-wrap blockquote,
form[name=dokuForm] .doku-wrap body,
form[name=dokuForm] .doku-wrap caption,
form[name=dokuForm] .doku-wrap details,
form[name=dokuForm] .doku-wrap div,
form[name=dokuForm] .doku-wrap fieldset,
form[name=dokuForm] .doku-wrap figcaption,
form[name=dokuForm] .doku-wrap figure,
form[name=dokuForm] .doku-wrap footer,
form[name=dokuForm] .doku-wrap form,
form[name=dokuForm] .doku-wrap h1,
form[name=dokuForm] .doku-wrap h2,
form[name=dokuForm] .doku-wrap h3,
form[name=dokuForm] .doku-wrap h4,
form[name=dokuForm] .doku-wrap h5,
form[name=dokuForm] .doku-wrap h6,
form[name=dokuForm] .doku-wrap header,
form[name=dokuForm] .doku-wrap html,
form[name=dokuForm] .doku-wrap input,
form[name=dokuForm] .doku-wrap label,
form[name=dokuForm] .doku-wrap legend,
form[name=dokuForm] .doku-wrap li,
form[name=dokuForm] .doku-wrap menu,
form[name=dokuForm] .doku-wrap nav,
form[name=dokuForm] .doku-wrap ol,
form[name=dokuForm] .doku-wrap p,
form[name=dokuForm] .doku-wrap section,
form[name=dokuForm] .doku-wrap span,
form[name=dokuForm] .doku-wrap summary,
form[name=dokuForm] .doku-wrap ul {
  margin: 0;
  padding: 0;
  font-family: din-reg, arial;
}
form[name=dokuForm] .doku-wrap aside,
form[name=dokuForm] .doku-wrap details,
form[name=dokuForm] .doku-wrap figcaption,
form[name=dokuForm] .doku-wrap figure,
form[name=dokuForm] .doku-wrap footer,
form[name=dokuForm] .doku-wrap header,
form[name=dokuForm] .doku-wrap menu,
form[name=dokuForm] .doku-wrap nav,
form[name=dokuForm] .doku-wrap section {
  display: block;
}
form[name=dokuForm] .doku-wrap .default-width {
  background: #fff;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 12px #f2f2f2;
  margin: 0 auto;
  width: 500px;
}
form[name=dokuForm] .doku-wrap .padd-default {
  padding: 20px;
  position: relative;
}
form[name=dokuForm] .doku-wrap .fleft {
  float: left;
}
form[name=dokuForm] .doku-wrap img {
  border: none;
}
form[name=dokuForm] .doku-wrap .right-head {
  font-family: din-reg;
}
form[name=dokuForm] .doku-wrap .fright {
  float: right;
}
form[name=dokuForm] .doku-wrap .text-totalpay {
  font-size: 11px;
  text-align: right;
}
form[name=dokuForm] .doku-wrap #dw-channel .nav li a:focus,
form[name=dokuForm] .doku-wrap #dw-channel .nav li a:hover,
form[name=dokuForm] .doku-wrap #dw-channel .resp-tablist li.resp-tablistItem__active,
form[name=dokuForm] .doku-wrap #dw-channel .resp-tablist li:hover,
form[name=dokuForm] .doku-wrap #dw-channel li a.current,
form[name=dokuForm] .doku-wrap #dw-channel li a.current:hover,
form[name=dokuForm] .doku-wrap .color-one,
form[name=dokuForm] .doku-wrap .detail-result ul li .fright.color-one {
  color: #b90a29;
}
form[name=dokuForm] .doku-wrap .amount {
  font-size: 34px;
}
form[name=dokuForm] .doku-wrap .color-border {
  border-color: #f4f4f4 !important;
}
form[name=dokuForm] .doku-wrap .select-payment-channel {
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 12px 20px;
}
form[name=dokuForm] .doku-wrap .dokuwallet {
  background-position: -110px 0 !important;
  width: 94px;
}
form[name=dokuForm] .doku-wrap .logo-payment-channel {
  background: url(https://pay.doku/images/logo-payment.png) no-repeat;
  height: 30px;
  display: inline-block;
}
form[name=dokuForm] .doku-wrap .padd-dw {
  padding: 20px 0 0;
}
form[name=dokuForm] .doku-wrap .avatar-dw {
  top: -53px !important;
}
form[name=dokuForm] .doku-wrap .right-paychan {
  position: absolute;
  right: 20px;
  top: -40px;
}
form[name=dokuForm] .doku-wrap .nameuser {
  height: 20px;
  margin: 12px 0 0 10px;
  max-width: 120px;
  overflow: hidden;
  text-align: right;
}
form[name=dokuForm] .doku-wrap ol,
form[name=dokuForm] .doku-wrap ul {
  list-style: none;
  padding: 0;
  margin: auto;
}
form[name=dokuForm] .doku-wrap #dw-channel .resp-tablist li.resp-tablistItem__active,
form[name=dokuForm] .doku-wrap #dw-channel .resp-tablist li:hover,
form[name=dokuForm] .doku-wrap #dw-channel li a.current,
form[name=dokuForm] .doku-wrap #dw-channel li a.current:hover {
  background-color: #fff !important;
  border-bottom: 2px solid #b90a29;
  cursor: pointer;
}
form[name=dokuForm] .doku-wrap #dw-channel .resp-tablist li {
  display: inline;
}
form[name=dokuForm] .doku-wrap .promocontent-dw,
form[name=dokuForm] .doku-wrap .resp-headings,
form[name=dokuForm] .doku-wrap .resp-tabDrop {
  display: none;
}
form[name=dokuForm] .doku-wrap #dw-channel .nav li a,
form[name=dokuForm] .doku-wrap #dw-channel .resp-tablist li {
  padding: 0 25px 10px;
  font-size: 16px;
  text-align: center;
  border: 0;
  text-decoration: none;
  color: #6a6a6a;
}
form[name=dokuForm] .doku-wrap .content-payment-channel ul li {
  margin: 5px 0 0;
}
form[name=dokuForm] .doku-wrap .styled-select,
form[name=dokuForm] .doku-wrap .wrapper-select {
  background: url(https://pay.doku/images/down_arrow_select.png) right center no-repeat;
  overflow: hidden;
  width: 170px;
}
form[name=dokuForm] .doku-wrap .styled-select select,
form[name=dokuForm] .doku-wrap select {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  overflow: hidden;
  width: 190px;
}
form[name=dokuForm] .doku-wrap #select-paymentchannel option,
form[name=dokuForm] .doku-wrap .resp-tabDrop option {
  font-size: 14px;
}
form[name=dokuForm] .doku-wrap .resp-content__active {
  margin-top: 15px;
}
form[name=dokuForm] .doku-wrap #dw-channel .list-wrap,
form[name=dokuForm] .doku-wrap .resp-content__active {
  padding: 20px;
  margin: 0;
}
form[name=dokuForm] .doku-wrap .saldo-dw {
  margin: 20px 0;
}
form[name=dokuForm] .doku-wrap .textsaldo {
  color: #9a9a9a;
  font-size: 14px;
}
form[name=dokuForm] .doku-wrap .saldo {
  color: #717171;
  font-size: 30px;
}
form[name=dokuForm] .doku-wrap .option-codevoucher ul li {
  padding: 7px 0 0;
  margin-top: 0;
}
form[name=dokuForm] .doku-wrap .detail-result ul li,
form[name=dokuForm] .doku-wrap .option-codevoucher ul li,
form[name=dokuForm] .doku-wrap .show-points ul li {
  border-bottom: 1px solid #f4f4f4;
  font-size: 16px;
}
form[name=dokuForm] .doku-wrap .checkbox-custom,
form[name=dokuForm] .doku-wrap .checkbox-custom-label,
form[name=dokuForm] .doku-wrap .radio-custom,
form[name=dokuForm] .doku-wrap .radio-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
form[name=dokuForm] .doku-wrap .radio-custom + .radio-custom-label::before,
form[name=dokuForm] .doku-wrap .radio-custom + label + .radio-custom-label::before {
  border-radius: 50%;
}
form[name=dokuForm] .doku-wrap .checkbox-custom,
form[name=dokuForm] .doku-wrap .radio-custom {
  opacity: 0;
  position: absolute;
}
form[name=dokuForm] .doku-wrap input {
  border: none;
}
form[name=dokuForm] .doku-wrap .option-codevoucher label.radio-custom-label {
  color: #717171;
  font-size: 15px;
  margin: 15px 0 0;
}
form[name=dokuForm] .doku-wrap .material-form label.checkbox-custom-label,
form[name=dokuForm] .doku-wrap .material-form label.radio-custom-label {
  border-bottom: 0 !important;
}
form[name=dokuForm] .doku-wrap .checkbox-custom-label,
form[name=dokuForm] .doku-wrap .radio-custom-label {
  position: relative;
}
form[name=dokuForm] .doku-wrap .material-form .checkbox-custom + .checkbox-custom-label::before,
form[name=dokuForm] .doku-wrap .material-form .checkbox-custom + label + .checkbox-custom-label::before,
form[name=dokuForm] .doku-wrap .material-form .radio-custom + .radio-custom-label::before,
form[name=dokuForm] .doku-wrap .material-form .radio-custom + label + .radio-custom-label::before {
  content: "";
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 1px;
  margin-right: 10px;
  text-align: center;
}
form[name=dokuForm] .doku-wrap .option-codevoucher .promocontent-dw select {
  margin-top: 6px;
}
form[name=dokuForm] .doku-wrap .promocontent-dw select,
form[name=dokuForm] .doku-wrap .select-payment-channel select,
form[name=dokuForm] .doku-wrap select.resp-tabDrop {
  color: #6a6a6a;
  font-size: 18px;
  padding: 0 15px 0 0;
  font-family: din-reg;
}
form[name=dokuForm] .doku-wrap .ifusingpromo {
  padding: 0 10px;
  margin: 5px 0;
}
form[name=dokuForm] .doku-wrap .title-listpromo {
  color: #717171;
}
form[name=dokuForm] .doku-wrap .amount-listpromo {
  font-size: 20px;
}
form[name=dokuForm] .doku-wrap .lastlist-ifp {
  background: #fff;
  margin-bottom: 0;
  padding: 14px 10px;
}
form[name=dokuForm] .doku-wrap .lastlist-ifp .amount-listpromo {
  font-size: 25px;
}
form[name=dokuForm] .doku-wrap .validasi {
  background: #fffaeb;
  margin: 20px -20px 0;
  padding: 10px 20px;
  position: relative;
}
form[name=dokuForm] .doku-wrap .default-btn {
  background: #fff;
  border: 1px solid #b90a29;
  border-radius: 3px;
  color: #b90a29;
  font-size: 18px;
  margin-top: 20px;
  padding: 14px 10px;
  width: 100%;
  cursor: pointer;
  font-family: din-reg, arial;
}
form[name=dokuForm] .doku-wrap .exco-listcard {
  margin: 0;
  display: block;
}
form[name=dokuForm] .doku-wrap .readonlycase ~ label,
form[name=dokuForm] .doku-wrap input:focus ~ label,
form[name=dokuForm] .doku-wrap input:valid ~ label,
form[name=dokuForm] .doku-wrap textarea:focus ~ label,
form[name=dokuForm] .doku-wrap textarea:valid ~ label {
  font-size: 0.75em;
  color: #b90a29;
  top: -13px;
  -webkit-transition: all 125ms ease;
  transition: all 125ms ease;
  padding: 0 5px;
  background: #fff;
}
form[name=dokuForm] .doku-wrap .validasi .styled-input {
  margin-bottom: 0;
}
form[name=dokuForm] .doku-wrap .styled-input .readonlycase ~ label {
  color: #b90a29;
  font-size: 0.75em;
  top: -13px;
}
form[name=dokuForm] .doku-wrap .styled-input {
  position: relative;
  margin-bottom: 15px;
}
form[name=dokuForm] .doku-wrap .width50 {
  width: 49%;
}
form[name=dokuForm] .doku-wrap .styled-input input,
form[name=dokuForm] .doku-wrap .styled-input input.identified.valid,
form[name=dokuForm] .doku-wrap .styled-input input.valid,
form[name=dokuForm] .doku-wrap .styled-input select {
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 40px;
  padding: 0 3%;
  width: 93%;
  font-family: din-reg, arial;
  font-size: 15px;
}
form[name=dokuForm] .doku-wrap .styled-input label {
  color: #999;
  position: absolute;
  top: 13px;
  left: 10px;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  pointer-events: none;
  font-size: 14px;
}
form[name=dokuForm] .doku-wrap .tolltips-wallet {
  left: 205px;
  position: absolute !important;
  top: 20px;
}
form[name=dokuForm] .doku-wrap .tooltip {
  display: inline;
  position: relative;
}
form[name=dokuForm] .doku-wrap #dw-channel .exco-listcard .listcard {
  float: left;
  margin: 0 2%;
  width: 46%;
}
form[name=dokuForm] .doku-wrap .exco-listcard input[type=radio] {
  display: none;
}
form[name=dokuForm] .doku-wrap #dw-channel label.lxco {
  padding: 0;
  top: 0;
}
form[name=dokuForm] .doku-wrap input[type=radio]:checked + .lxco {
  border: 1px solid #41dfbe;
}
form[name=dokuForm] .doku-wrap .exco-listcard .lxco {
  width: 100%;
  float: left;
  transition: all ease 0.3s;
  margin-right: 5px;
  border: 1px solid #dadada;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
form[name=dokuForm] .doku-wrap .wrapper-card-ex {
  padding: 5px 0 0;
}
form[name=dokuForm] .doku-wrap .type-exist {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 5px;
}
form[name=dokuForm] .doku-wrap .type-cc {
  background: url(https://pay.doku/images/cc-top.png) no-repeat;
  display: block;
  height: 30px;
  margin: 3px 10px;
  float: left;
}
form[name=dokuForm] .doku-wrap .wrapper-cont-cc {
  background-color: #fafbfb;
  border-radius: 0 0 3px 3px;
  padding: 15px 12px;
}
form[name=dokuForm] .doku-wrap .title-wcc {
  color: #959494;
  font-size: 11px;
  margin: 5px 0;
}
form[name=dokuForm] .doku-wrap .font-reg {
  font-family: din-reg, arial;
}
form[name=dokuForm] .doku-wrap .num-card {
  color: #717171;
  font-size: 22px;
}
form[name=dokuForm] .doku-wrap input[type=radio]:checked + .lxco .wrapper-card-ex::after {
  display: block;
}
form[name=dokuForm] .doku-wrap .lxco .wrapper-card-ex::after {
  position: absolute;
  border-radius: 50px;
  display: none;
  width: 25px;
  height: 25px;
  background: url(https://pay.doku/images/cek.png) center center no-repeat #41dfbe;
  right: 10px;
  top: 10px;
  content: "";
}
form[name=dokuForm] .doku-wrap .bg-grad {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgb(255, 255, 255) 100%) rgba(0, 0, 0, 0);
  height: 40px;
  position: sticky;
  width: 100%;
  z-index: 1000000;
  display: none;
  bottom: 0;
}
form[name=dokuForm] .doku-wrap .footer {
  color: #a0a0a0;
  font-size: 13px;
  margin-top: 25px;
  text-align: center;
}
form[name=dokuForm] .doku-wrap .radio-custom:checked + .radio-custom-label::before,
form[name=dokuForm] .doku-wrap .radio-custom:checked + label + .radio-custom-label::before {
  background: url(https://pay.doku/images/cek.png) no-repeat #41dfbe;
  border-color: #41dfbe;
}
form[name=dokuForm] .doku-wrap .width60 {
  width: 68%;
}
form[name=dokuForm] .doku-wrap .width30 {
  width: 30%;
}
form[name=dokuForm] .doku-wrap .visa {
  background-position: 0 0;
  width: 60px;
}
form[name=dokuForm] .doku-wrap .mastercard {
  background-position: -69px 0;
  width: 45px;
}
form[name=dokuForm] .doku-wrap .has-error input,
form[name=dokuForm] .doku-wrap .styled-input input.cc-exp.valid,
form[name=dokuForm] .doku-wrap .styled-input input.error,
form[name=dokuForm] .doku-wrap .styled-input input.unknown {
  border: 1px solid red;
}
form[name=dokuForm] a[href="#"] {
  display: none;
}
form[name=dokuForm] .footer {
  display: none;
}
form[name=dokuForm] .styled-input font {
  color: red;
}
form[name=dokuForm] input[type=text],
form[name=dokuForm] input[type=password] {
  color: #000 !important;
  background-color: inherit !important;
}/*Common styles*/
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  font-family: "Panton", sans-serif;
  color: inherit;
}
body {
  font-size: 0;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.hide {
  display: none !important;
}
/*.blur { transition: all .3s; -webkit-transition: all .3s; }
.blurred { -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }*/
.mobile {
  display: none;
}
/*.main-wrapper { overflow: visible; }*/
.main {
  padding: 80px 0;
  min-height: 500px;
}
.page-footer {
  text-align: center;
}
.next-page {
  display: inline-block;
  padding: 16px 50px;
  font-size: 14px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  cursor: pointer;
}
.no-items {
  font-size: 16px;
  font-weight: 600;
  padding-top: 40px;
  text-align: center;
}
.container {
  padding-left: 10%;
  padding-right: 10%;
}
.pointer {
  cursor: pointer;
}
.btn-default-focus {
  box-shadow: none !important;
}
@media (min-width: 480px) {
  .only-mobile {
    display: none;
  }
}
@media (max-width: 479px) {
  .only-desktop {
    display: none;
  }
}
/*Header*/
.header {
  position: relative;
}
.header-container {
  position: relative;
  display: table;
  width: 100%;
  height: 200px;
  text-align: center;
  padding: 6% 0;
}
.header-bg {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.title-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.title {
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 22px;
  padding: 20px 40px 20px 44px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
}
.title:after {
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: solid 2px transparent;
  -ms-transform: skewX(-4deg);
  -webkit-transform: skewX(-4deg);
  transform: skewX(-4deg);
}
.header .logo {
  display: inline-block;
  width: 22%;
  height: 0;
  padding-bottom: 11%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
header .desktop {
  display: inline-block;
}
header .mobile {
  display: none;
}
.menu {
  height: 120px;
  text-align: right;
}
.menu .button {
  position: relative;
  margin-right: 42px;
  font-size: 16px;
  line-height: 120px;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.btn-simple {
  position: relative;
  font-weight: 400;
  font-size: 12px;
  font-family: "Source Sans Pro", sans-serif;
  margin: 20px 0;
  display: inline-block;
}
.menu .button:after,
.menu .button .btn-icon-name:after,
.btn-simple:after {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: all 0.15s;
  -webkit-transition: all 0.15s;
}
.btn-simple:after {
  bottom: -2px;
}
.menu .button:hover:after,
.menu .button:hover .btn-icon-name:after,
.btn-simple:hover:after {
  width: 100%;
}
.menu .button.active:before {
  position: absolute;
  height: 5px;
  bottom: 0;
  left: -10px;
  right: -10px;
  content: "";
}
.menu .float-right .button:last-child {
  margin-right: 0;
}
.menu .btn-icon,
.menu .btn-icon-mobile {
  position: relative;
}
.menu .float-left {
  text-align: left;
}
.menu .btn-icon:hover:after,
.menu .btn-icon-mobile:hover:after,
.menu .btn-icon-mobile.active:before {
  width: 0;
}
.menu .btn-icon svg,
.menu .btn-icon-mobile svg {
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
.menu .btn-icon-mobile svg {
  margin-top: -4px;
}
.menu .btn-icon path,
.menu .btn-icon-mobile path,
.menu .btn-icon circle,
.menu .btn-icon-mobile circle {
  fill: #000;
}
.menu .btn-icon-name {
  position: relative;
  display: inline-block;
  margin-left: 10px;
}
.menu .btn-icon .badge,
.menu .btn-icon-mobile .badge {
  position: absolute;
  top: 50%;
  left: 3px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 600;
  line-height: 10px;
  padding: 3px 5px;
  margin-top: -20px;
}
.menu .float-right .button:last-of-type {
  margin-right: 0 !important;
}
.lang-container .lang-button {
  display: inline-block;
  position: relative;
  z-index: 1;
  float: right;
  cursor: pointer;
  margin: 30px 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 5px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.admin-menu {
  background: #323640;
}
.admin-menu .btn {
  position: relative;
  vertical-align: middle;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  margin-left: 42px;
  color: #00ef9d;
  line-height: 60px;
}
.admin-menu .btn:first-child {
  margin-left: 0;
}
.admin-menu .btn:after {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 0;
  height: 1px;
  content: "";
  background: #00ef9d;
  transition: all 0.15s;
  -webkit-transition: all 0.15s;
}
.admin-menu .btn:hover:after {
  width: 100%;
}
.admin-menu nav {
  float: right;
  position: relative;
  z-index: 1;
}
.admin-menu .admin-logo {
  cursor: pointer;
}
.admin-menu .admin-logo svg {
  width: 100px;
  height: 20px;
  margin-top: 20px;
}
.admin-menu .admin-logo path {
  fill: #00ef9d;
}
.admin-menu .admin-logo img {
  width: 100px;
  margin: 10px 0;
}
.upload-icon {
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  font-size: 0;
}
.upload-icon svg {
  width: 25px;
  height: 25px;
}
.upload-icon.header-upload {
  left: 10%;
  bottom: 10px;
}
.upload-icon.logo-upload {
  right: -50px;
  top: 17px;
}
.mobile-menu {
  padding: 20px;
}
.mobile-menu .button {
  display: block;
  position: relative;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 0;
  text-align: center;
  width: 100%;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
/*Main content*/
.main .ui-select-container {
  position: relative;
  display: block;
  border: 2px solid #ddd;
  border-radius: 5px;
  margin-bottom: 40px;
  margin-left: 10%;
  margin-right: 10%;
  width: 250px;
}
.main .ui-select-container button.pull-right {
  color: #fff;
  background-color: #ff0015;
}
.main input[type=text].ui-select-search {
  color: #000;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 14px;
  width: 100%;
  padding: 12px;
}
.main .ui-select-toggle,
.main .btn.ui-select-toggle {
  display: block;
  background: #fff;
  border: none;
  padding: 12px;
}
.main .ui-select-placeholder {
  color: #999;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
}
.main .ui-select-match-text {
  float: none;
  color: #000;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
  padding: 12px;
}
.main .ui-select-choices {
  position: absolute;
  background: #fff;
  border-left: inherit;
  border-right: inherit;
  border-bottom: inherit;
  z-index: 1;
  max-height: 125px;
}
.main .ui-select-choices-row-inner {
  color: #000;
  font-size: 14px;
}
.main .ui-select-choices-row > a:hover {
  color: #333;
  background: #ddd;
}
/*User tickets list*/
/*TODO use iterator instead of this*/
.tickets-title,
.transaction-title {
  font-size: 26px;
  font-weight: 700;
}
.transaction-title {
  margin-bottom: 40px;
}
.transaction-status {
  font-size: 22px;
  font-weight: 400;
  padding: 12px 12px 0;
}
.tickets-subtitle {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 40px;
}
.tickets-container .ticket {
  display: table;
  width: 100%;
  border-radius: 5px;
  margin-bottom: 40px;
  border: solid 1px transparent;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.tickets-container .image-holder {
  display: table-cell;
  width: 320px;
  vertical-align: middle;
  text-align: center;
  background: #fff;
  border-radius: 5px 0 0 5px;
}
.tickets-container .image-holder.qr-code-holder {
  padding: 10px 0;
}
.tickets-container .image-holder .qr-code {
  width: 180px;
  height: 180px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.tickets-container .image-holder .product-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 180px;
  width: 100%;
}
.tickets-container .data-block {
  display: table-cell;
  vertical-align: top;
  padding-bottom: 1px;
}
.tickets-container .data-block .event-name {
  font-size: 22px;
  font-weight: 700;
  padding: 34px 42px 0;
}
.tickets-container .data-block .ticket-info {
  float: left;
}
.tickets-container .data-block .event-date {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 28px 42px 0;
}
.tickets-container .data-block .tickettype-name {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 42px 28px;
}
.tickets-container .downloads {
  padding: 28px;
}
.tickets-container .download {
  float: right;
  margin: 0;
  display: inline-block;
  cursor: pointer;
  padding: 16px 40px;
  border-radius: 5px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.tickets-container .invoice {
  clear: right;
  float: right;
  margin-top: 12px;
  display: inline-block;
  cursor: pointer;
  padding: 10px 24px;
  border-radius: 5px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
/*Footer*/
.site-footer {
  padding-bottom: 40px;
}
.site-footer .btn {
  position: relative;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  margin-left: 32px;
  color: #999;
  cursor: pointer;
}
.site-footer .btn:first-child {
  margin-left: 0;
}
.site-footer .btn:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  content: "";
  background: #999;
  transition: all 0.15s;
  -webkit-transition: all 0.15s;
}
.site-footer .btn:hover:after {
  width: 100%;
}
.site-footer nav {
  float: right;
}
.site-footer .footer-logo svg {
  cursor: pointer;
  width: 100px;
}
.site-footer .footer-logo img {
  cursor: pointer;
  width: 100px;
}
/*Responsive breakpoints*/
@media (max-width: 1279px) {
  .header .logo {
    width: 280px;
    height: 140px;
    padding-bottom: 0;
  }
  .main {
    padding-top: 40px;
  }
  .main .ui-select-container {
    margin-left: 5%;
    margin-right: 5%;
  }
  .admin-menu .btn:last-child {
    margin-right: 40px;
  }
  .container {
    padding-left: 5%;
    padding-right: 5%;
  }
  .upload-icon.header-upload {
    left: 5%;
  }
  .tickets-container .data-block .event-name,
  .tickets-container .data-block .event-date,
  .tickets-container .data-block .tickettype-name {
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (max-width: 1023px) {
  .tickets-container .qr-code-holder {
    width: 200px;
  }
}
@media (max-width: 879px) {
  .button:hover:after,
  .button:hover > :after,
  .btn-simple:hover:after {
    width: 0 !important;
  }
  .header-container {
    padding: 10px 0;
  }
  header .desktop {
    display: none;
  }
  header .mobile {
    display: initial;
  }
  .admin-menu nav {
    display: none;
  }
  .admin-menu a {
    display: block;
    text-align: center;
  }
  .admin-menu .admin-logo {
    margin: 15px 0;
  }
  .header-container {
    height: 175px;
  }
  .menu {
    height: 60px;
  }
  .menu .button {
    font-size: 14px;
    margin-right: 24px;
    line-height: 60px;
  }
  .menu .button:after {
    bottom: 20px;
  }
  .menu .float-right .button.btn-icon-mobile {
    padding: 20px 0 20px 20px;
    margin: 0;
  }
  .menu .float-left .button.btn-icon-mobile {
    padding: 20px 20px 20px 0;
    margin: 0;
  }
  .upload-icon {
    display: none;
  }
  .main .ui-select-container {
    margin-left: 25px;
    margin-right: 25px;
  }
  .container {
    padding-left: 25px;
    padding-right: 25px;
  }
  .upload-icon.header-upload {
    left: 25px;
  }
  .tickets-container .ticket {
    margin-bottom: 28px;
  }
  .site-footer .footer-logo svg {
    display: block;
    margin: 30px auto;
  }
}
@media (max-width: 679px) {
  .main .ui-select-container {
    margin-left: 20px;
    margin-right: 20px;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .upload-icon.header-upload {
    left: 20px;
  }
  .lang-container:before,
  .lang-container:after {
    content: " ";
    display: table;
  }
  .lang-container:after {
    clear: both;
  }
  .lang-container .lang-button {
    margin-top: 10px;
  }
  .tickets-container .data-block .event-name {
    padding: 16px;
    font-size: 18px;
  }
  .tickets-container .data-block .event-date {
    padding: 10px 16px 0;
    font-size: 16px;
  }
  .tickets-container .data-block .tickettype-name {
    padding: 8px 16px;
    font-size: 16px;
  }
  .tickets-container .downloads {
    margin: 12px;
  }
  .owl-theme .owl-controls {
    display: none !important;
  }
}
@media (max-width: 540px) {
  .tickets-container .qr-code-holder,
  .tickets-container .data-block {
    display: block;
    width: 100%;
  }
  .tickets-container .qr-code-holder {
    border-radius: 5px 5px 0 0;
  }
  .tickets-container .event-name {
    text-align: center;
  }
  .tickets-container .ticket-info {
    text-align: center;
    float: none !important;
  }
  .tickets-container .downloads {
    margin: 0;
    width: 100%;
    display: block;
    text-align: center;
  }
  .tickets-container .download,
  .tickets-container .invoice {
    float: none;
    display: block;
    width: 200px;
    text-align: center;
    margin: 0 auto;
  }
  .tickets-container .invoice {
    margin-top: 10px;
  }
}
@media (max-width: 479px) {
  .header-container {
    height: 145px;
  }
  .main {
    padding: 0 0 20px;
  }
  .main .ui-select-container {
    margin-left: 10px;
    margin-top: 40px;
    margin-right: 10px;
  }
  .container {
    padding: 20px 0 0;
  }
  .container-mobile-sticky,
  .admin-menu.container {
    padding: 0;
  }
  .container-mobile {
    padding-left: 10px;
    padding-right: 10px;
  }
  .upload-icon.header-upload {
    left: 10px;
  }
  .header .logo {
    width: 200px;
    height: 100px;
  }
  .menu,
  .lang-container {
    padding: 0 10px;
  }
  .tickets-container .data-block .info {
    float: none;
  }
  .tickets-container .data-block .event-name {
    padding: 16px 12px 5px;
    font-size: 16px;
  }
  .tickets-container .data-block .event-date {
    padding: 0 12px 5px;
    font-size: 14px;
  }
  .tickets-container .data-block .tickettype-name {
    padding: 0 12px;
    font-size: 14px;
  }
  .site-footer nav,
  .site-footer .footer-logo {
    float: none;
    text-align: center;
  }
  .site-footer .btn {
    margin-left: 24px;
    font-size: 14px;
  }
}
/*Color themes*/
.dark {
  background: #0f0f0f;
  color: #fff;
}
.dark .header-bg {
  background-color: #050505;
}
.dark .theme-background {
  background-color: #000;
}
.dark .theme-secondary-border {
  border-color: #0f0f0f;
}
@media (min-width: 680px) {
  .dark .theme-box-hover:hover {
    border-color: #1a1c21;
    background: #0f0f0f;
    cursor: pointer;
  }
}
.dark .item {
  background-color: #000;
  border-color: #0f0f0f;
}
.dark .menu,
.dark .tickets-container .ticket,
.dark .twocol .right .item {
  background-color: #000;
}
.dark .menu .button:after,
.dark .menu .button .btn-icon-name:after,
.dark .btn-simple:after {
  background-color: #fff;
}
.dark .menu .button.active:before {
  background: #0f0f0f;
}
.dark .menu .btn-icon path,
.dark .menu .btn-icon-mobile path,
.dark .menu .btn-icon circle,
.dark .menu .btn-icon-mobile circle {
  fill: #fff;
}
.dark .title:after {
  border-color: #fff;
}
.dark .twocol .right .drawer {
  border-color: #1a1c21;
}
.dark .main .ui-select-container {
  position: relative;
  display: block;
  border: 2px solid #333;
  border-radius: 5px;
  margin-bottom: 40px;
  margin-left: 10%;
  margin-right: 10%;
  width: 250px;
}
.dark .main .ui-select-container button.pull-right {
  color: #000;
  background-color: #ff0015;
}
.dark .main input[type=text].ui-select-search {
  color: #fff;
  background: #000;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 14px;
  width: 100%;
  padding: 12px;
}
.dark .main .ui-select-toggle,
.dark .main .btn.ui-select-toggle {
  display: block;
  background: #000;
  border: none;
  padding: 12px;
}
.dark .main .ui-select-placeholder {
  color: #bbb;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
}
.dark .main .ui-select-match-text {
  float: none;
  color: #fff;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
  padding: 12px;
}
.dark .main .ui-select-choices {
  position: absolute;
  background: #000;
  border-left: inherit;
  border-right: inherit;
  border-bottom: inherit;
  z-index: 1;
  max-height: 125px;
}
.dark .main .ui-select-choices-row-inner {
  color: #fff;
  font-size: 14px;
}
.dark .main .ui-select-choices-row > a:hover {
  color: #ddd;
  background: #333;
}
.light {
  background: #f0f0f0;
  color: #0f0f0f;
}
.light .header-bg {
  background-color: #f9f9f9;
}
.light .theme-background {
  background-color: #fff;
}
.light .theme-secondary-border {
  border-color: #f0f0f0;
}
@media (min-width: 680px) {
  .light .theme-box-hover:hover {
    border-color: #ddd;
    background: #f0f0f0;
    cursor: pointer;
  }
}
.light .item {
  background-color: #fff;
  border-color: #f0f0f0;
}
.light .menu,
.light .tickets-container .ticket,
.light .twocol .right .item {
  background-color: #fff;
}
.light .menu .button:after,
.light .menu .button .btn-icon-name:after,
.light .btn-simple:after {
  background-color: #0f0f0f;
}
.light .menu .button.active:before {
  background: #f0f0f0;
}
.light .menu .btn-icon path,
.light .menu .btn-icon-mobile path,
.light .menu .btn-icon circle,
.light .menu .btn-icon-mobile circle {
  fill: #000;
}
.light .title:after {
  border-color: #0f0f0f;
}
.light .twocol .right .drawer {
  border-color: #ddd;
}
@media (max-width: 479px) {
  .light .footer-logo svg path {
    fill: #777777;
  }
}
.light .main .ui-select-container {
  position: relative;
  display: block;
  border: 2px solid #ddd;
  border-radius: 5px;
  margin-bottom: 40px;
  margin-left: 10%;
  margin-right: 10%;
  width: 250px;
}
.light .main .ui-select-container button.pull-right {
  color: #fff;
  background-color: #ff0015;
}
.light .main input[type=text].ui-select-search {
  color: #000;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 14px;
  width: 100%;
  padding: 12px;
}
.light .main .ui-select-toggle,
.light .main .btn.ui-select-toggle {
  display: block;
  background: #fff;
  border: none;
  padding: 12px;
}
.light .main .ui-select-placeholder {
  color: #999;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
}
.light .main .ui-select-match-text {
  float: none;
  color: #000;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
  padding: 12px;
}
.light .main .ui-select-choices {
  position: absolute;
  background: #fff;
  border-left: inherit;
  border-right: inherit;
  border-bottom: inherit;
  z-index: 1;
  max-height: 125px;
}
.light .main .ui-select-choices-row-inner {
  color: #000;
  font-size: 14px;
}
.light .main .ui-select-choices-row > a:hover {
  color: #333;
  background: #ddd;
}
/*Spinner*/
.spinner {
  margin: 20px auto;
  width: 70px;
  text-align: center;
}
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #999;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
/*State animations*/
.main.ng-enter {
  transition: opacity 0.3s ease 0.3s;
  opacity: 0;
}
.main.ng-enter-active {
  opacity: 1;
}
.main.ng-leave {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.main.ng-leave-active {
  opacity: 0;
}
/*Intercom*/
.circular-icon {
  cursor: pointer;
  padding: 12px;
  background: transparent;
  border-radius: 50%;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.intercom-logo-holder {
  display: inline-block;
  vertical-align: middle;
  margin-left: 30px;
}
.intercom-logo-holder:hover {
  background: #06d891;
}
.intercom-logo {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAzElEQVR4AY3Kr0qDcRSA4bNgmUkZSyr2YVkWwTtYEZNFxLQ0wajZZrJ4AcIQ1O4fLHoFpkXTTDIXNoQ9RtEf+p3nrW9EaLk28p+RKy0R2sYyxtrhTtZtmMiahNKbvgtDhXLumxdC3WX1vKTh2aOGBZ9V86kHsCl8VM1wb1fNBpl51Zxtw9y8Yg1y845efkZ+XrdFKcyU9hwqzcJA1iB0ZXVDzbGpKlNHaiGEpo6ed8CrA/s/6mgKEb47By+WRdnv+QxPFkVmPnGjLv7uC9s8WoTqo+lHAAAAAElFTkSuQmCC);
  width: 17px;
  height: 17px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.intercom-logo:hover:after {
  width: 0 !important;
}
#intercom-container,
.intercom-launcher-button {
  width: 0 !important;
  height: 0 !important;
}
/*Validation*/
.validation-error {
  font-size: 14px;
  font-weight: 600;
  color: #ff0015;
  margin-bottom: 20px;
}
.ng-submitted input.ng-invalid,
.ng-submitted .ng-invalid .ui-select-container {
  border: solid 1px red !important;
}.iterator.list .item {
  cursor: pointer;
  width: 100%;
  border-radius: 5px;
  margin-bottom: 40px;
  border: solid 1px transparent;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
@media (max-width: 991px) {
  .iterator.list .item {
    margin-bottom: 28px;
  }
}
.iterator.list .item:last-child {
  margin-bottom: 0;
}
.iterator.list .item .image-holder {
  float: left;
  width: 320px;
  vertical-align: top;
}
@media (max-width: 991px) {
  .iterator.list .item .image-holder {
    width: 260px;
  }
}
@media (max-width: 767px) {
  .iterator.list .item .image-holder {
    float: none;
    width: 100%;
  }
}
.iterator.list .item .image-holder .image {
  width: 320px;
  height: 200px;
  border-radius: 5px 0 0 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
@media (max-width: 991px) {
  .iterator.list .item .image-holder .image {
    width: 260px;
    height: 160px;
  }
}
@media (max-width: 767px) {
  .iterator.list .item .image-holder .image {
    width: 100%;
    padding-bottom: 60%;
    border-radius: 5px 5px 0 0;
  }
}
.iterator.list .item .image-holder .sold-out {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  font-weight: 700;
  border-radius: 50px;
  font-size: 14px;
  text-align: center;
  line-height: 100px;
}
.iterator.list .item .data {
  float: right;
  width: calc(100% - 320px);
  vertical-align: top;
  padding-bottom: 0;
}
@media (max-width: 991px) {
  .iterator.list .item .data {
    width: calc(100% - 260px);
  }
}
@media (max-width: 767px) {
  .iterator.list .item .data {
    float: none;
    width: 100%;
  }
}
.iterator.list .item .data .main-info {
  float: left;
  width: calc(100% - 280px);
}
@media (max-width: 991px) {
  .iterator.list .item .data .main-info {
    float: none;
    width: 100%;
  }
}
.iterator.list .item .data .main-info .name {
  font-size: 24px;
  font-weight: 700;
  padding: 34px 42px 0;
}
@media (max-width: 1199px) {
  .iterator.list .item .data .main-info .name {
    padding: 28px 28px 0;
  }
}
@media (max-width: 991px) {
  .iterator.list .item .data .main-info .name {
    padding-top: 20px;
    font-size: 20px;
  }
}
@media (max-width: 479px) {
  .iterator.list .item .data .main-info .name {
    padding: 16px 16px 0;
  }
}
.iterator.list .item .data .main-info .description {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 28px 42px;
  line-height: 22px;
}
@media (max-width: 1199px) {
  .iterator.list .item .data .main-info .description {
    font-size: 16px;
    padding: 28px;
  }
}
@media (max-width: 991px) {
  .iterator.list .item .data .main-info .description {
    padding: 12px 28px;
  }
}
@media (max-width: 479px) {
  .iterator.list .item .data .main-info .description {
    padding: 10px 16px;
  }
}
.iterator.list .item .data .main-info .description span {
  font: inherit;
}
.iterator.list .item .data .additional-info {
  float: right;
  width: 280px;
}
@media (max-width: 991px) {
  .iterator.list .item .data .additional-info {
    float: none;
    width: 100%;
    padding-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .iterator.list .item .data .additional-info {
    padding: 0;
    border-top: solid 1px #eee;
  }
}
@media (max-width: 991px) {
  .iterator.list .item .data .additional-info .additional-text {
    float: left;
  }
}
.iterator.list .item .data .additional-info .additional-text .primary,
.iterator.list .item .data .additional-info .additional-text .secondary {
  text-align: right;
  padding-right: 40px;
}
@media (max-width: 991px) {
  .iterator.list .item .data .additional-info .additional-text .primary,
  .iterator.list .item .data .additional-info .additional-text .secondary {
    padding-left: 28px;
    padding-right: 0;
    text-align: left;
  }
}
.iterator.list .item .data .additional-info .additional-text .primary {
  padding-top: 40px;
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 991px) {
  .iterator.list .item .data .additional-info .additional-text .primary {
    padding-top: 8px;
  }
}
@media (max-width: 479px) {
  .iterator.list .item .data .additional-info .additional-text .primary {
    padding-left: 16px;
  }
}
.iterator.list .item .data .additional-info .additional-text .primary.single-line {
  margin-top: 7px;
}
.iterator.list .item .data .additional-info .additional-text .secondary {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  font-weight: 400;
  height: 20px;
}
@media (max-width: 479px) {
  .iterator.list .item .data .additional-info .additional-text .secondary {
    padding-left: 16px;
  }
}
.iterator.list .item .data .additional-info .button {
  float: right;
  padding: 16px 50px;
  font-size: 14px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  margin-top: 30px;
  margin-right: 40px;
}
@media (max-width: 991px) {
  .iterator.list .item .data .additional-info .button {
    margin-top: 0;
    margin-right: 24px;
  }
}
@media (max-width: 767px) {
  .iterator.list .item .data .additional-info .button {
    padding: 16px 80px;
    margin: 0;
    border-radius: 0 0 5px 0;
  }
}
@media (max-width: 479px) {
  .iterator.list .item .data .additional-info .button {
    width: 50%;
    padding: 16px 10px;
    text-align: center;
  }
}
.iterator.grid .item {
  display: inline-block;
  border-radius: 10px;
  border: solid 1px transparent;
  vertical-align: top;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.iterator.grid .item .image-holder {
  width: 100%;
}
.iterator.grid .item .image-holder .image {
  width: 100%;
  padding-bottom: 80%;
  border-radius: 10px 10px 0 0;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.iterator.grid .item .data {
  text-align: center;
  padding: 0 40px;
}
.iterator.grid .item .data .name {
  height: 85px;
  font-size: 20px;
  font-weight: 700;
  padding-top: 30px;
  text-align: center;
  overflow: hidden;
}
.iterator.grid .item .data .description {
  height: 85px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding-top: 10px;
  text-align: center;
  overflow: hidden;
}
.iterator.grid .item .data .price {
  font-size: 16px;
  font-weight: 700;
  padding-top: 25px;
  text-align: center;
}
.iterator.grid .item .data .details {
  display: inline-block;
  padding: 16px 50px;
  margin: 20px 0 40px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
@media (min-width: 1200px) {
  .iterator.grid .item {
    width: calc(22.5% - 1px);
    margin-right: 3.33%;
    margin-bottom: 40px;
  }
  .iterator.grid .item:nth-child(4n) {
    margin-right: 0;
  }
}
@media (max-width: 1199px) and (min-width: 992px) {
  .iterator.grid .item {
    width: calc(31% - 1px);
    margin-right: 3.5%;
    margin-bottom: 40px;
  }
  .iterator.grid .item:nth-child(3n) {
    margin-right: 0;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .iterator.grid .item {
    width: calc(48% - 1px);
    margin-right: 4%;
    margin-bottom: 30px;
  }
  .iterator.grid .item:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 767px) and (min-width: 480px) {
  .iterator.grid .item {
    width: calc(48% - 1px);
    margin-right: 4%;
    margin-bottom: 30px;
  }
  .iterator.grid .item:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 479px) {
  .iterator.grid .item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
}
.iterator .item .image-holder .image .sold-out {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0.9;
  font-weight: 700;
  border-radius: 50px;
  font-size: 14px;
  text-align: center;
  line-height: 100px;
}/*TODO this page could have a better structure*/
.container-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
}
.container-subtitle {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 30px;
}
h3.category-name {
  line-height: 20px;
  font-size: 20px;
  margin-bottom: 30px;
}
.container-title-mobile,
.container-subtitle-mobile {
  display: none;
}
.tickettype-margin-top {
  margin-top: 50px;
}
.twocol .column {
  display: inline-block;
  vertical-align: top;
  width: 48%;
}
.twocol .spacer {
  width: calc(4% - 1px);
}
.twocol .left .description {
  padding: 40px 40px 30px;
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 26px;
  border-radius: 0 0 5px 5px;
}
.twocol .left .description * {
  font-family: "Source Sans Pro", sans-serif;
}
.twocol .left .description p {
  margin-bottom: 6px;
}
.twocol .left .description p,
.event-description ul {
  margin-bottom: 16px;
}
.twocol .left .description li {
  list-style-type: none;
  margin-left: 10px;
}
.twocol .left .description li:before {
  left: 0;
  top: 0;
  position: relative;
  content: "- ";
}
.twocol .left img {
  width: 100%;
}
.twocol .left .details {
  border-radius: 5px;
  overflow: hidden;
}
.owl-theme .owl-controls .owl-page span {
  background: #bbb !important;
}
.twocol .right .item {
  display: block;
  border-radius: 6px;
  margin-bottom: 15px;
}
.twocol .right .data {
  display: table;
  width: 100%;
}
.twocol .right .info {
  display: table-cell;
  padding: 4px 20px;
  height: 50px;
  vertical-align: middle;
}
.twocol .right .name {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
}
.twocol .right .name.error {
  text-decoration: none;
}
.twocol .right .error,
.twocol .right .error span {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}
.twocol .right .error a {
  text-decoration: none;
}
.twocol .right .price {
  display: table-cell;
  width: 125px;
  text-align: right;
  padding-right: 20px;
  height: 50px;
  vertical-align: middle;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 800;
}
.twocol .right .pcs {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
}
.twocol .right .num {
  vertical-align: middle;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  background: transparent;
  width: 30px;
  height: 50px;
  text-align: center;
}
.twocol .right .num-modify {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 24px;
  height: 24px;
  margin-top: 12px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  border-radius: 5px;
}
.twocol .right .num-modify.plus:before {
  position: absolute;
  left: 50%;
  top: 25%;
  height: 50%;
  width: 1px;
  background: #fff;
  content: "";
}
.twocol .right .num-modify.plus:after,
.num-modify.minus:after {
  position: absolute;
  left: 25%;
  top: 50%;
  height: 1px;
  width: 50%;
  background: #fff;
  content: "";
}
.twocol .right .buy {
  display: table-cell;
  vertical-align: middle;
  width: 120px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 25px;
  text-transform: uppercase;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.twocol .right .buy.disabled {
  background: #bbb;
  cursor: default !important;
}
.twocol .right .soldout {
  display: table-cell;
  text-transform: uppercase;
  vertical-align: middle;
  width: 220px;
  padding-right: 20px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
}
.twocol .right .no-tickettypes {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.twocol .category-name.venues {
  padding-top: 30px;
}
.twocol .venue {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  border: solid 1px #fff;
  margin-bottom: 40px;
}
.twocol .venue:last-child {
  margin-bottom: 0;
}
.twocol .venue .venue-images {
  font-size: 0;
}
.twocol .venue .map-image {
  width: 100%;
  padding-bottom: 40%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.twocol .venue .map-image.two-col {
  width: 50%;
  display: inline-block;
}
.twocol .venue .error {
  position: relative;
}
.twocol .venue .error:after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: all 0.15s;
  -webkit-transition: all 0.15s;
  background: #000;
}
.twocol .venue .error:hover:after {
  width: 100%;
  cursor: pointer;
}
@media (max-width: 1023px) {
  .twocol .column {
    display: block;
    width: 100%;
  }
  .twocol .spacer {
    width: 0;
  }
}
@media (max-width: 879px) {
  .twocol .right {
    padding-bottom: 40px;
  }
  .twocol .left .description {
    padding: 30px 30px 20px;
  }
  .twocol .right .item-container {
    padding-top: 8px;
  }
}
@media (max-width: 540px) {
  .twocol .right .mobile {
    display: block;
  }
  .twocol .right .desktop {
    display: none !important;
  }
  .twocol .right .info {
    height: auto;
    padding: 8px 15px;
  }
  .twocol .right .drawer .price {
    float: right;
    line-height: 50px;
  }
  .twocol .right .drawer {
    border-top: solid 1px transparent;
    border-radius: 0 0 6px 6px;
  }
  .twocol .right .drawer .mobile {
    display: inline-block;
  }
  .twocol .right .num-modify {
    margin-top: 7px;
    width: 35px;
    height: 35px;
  }
  .twocol .right .drawer .pcs {
    float: left;
    padding-left: 10px;
    line-height: 50px;
    width: 140px;
  }
  .twocol .right .drawer .buy {
    float: right;
    line-height: 50px;
    width: auto;
    border-radius: 0 0 8px 0;
    padding: 0 20px;
  }
  .twocol .venue {
    margin-bottom: 20px;
  }
}
@media (max-width: 479px) {
  .twocol .right.container-mobile {
    padding-left: 10px;
    padding-right: 10px;
  }
  .twocol .left .details {
    background: transparent;
    overflow: visible;
    border-radius: 0;
  }
  .tickettype-margin-top {
    margin-top: 0;
  }
  .twocol .left .description {
    padding: 20px 15px 5px;
  }
  .twocol .right {
    padding-bottom: 10px;
  }
  .twocol .venue {
    margin-bottom: 15px;
  }
  .container-title,
  .container-subtitle {
    display: none;
  }
  .container-title-mobile {
    display: block;
    padding: 20px 15px 10px;
    font-size: 20px;
    margin-bottom: 0;
  }
  .container-subtitle-mobile {
    display: block;
    padding: 0 15px;
    margin-bottom: 0;
  }
}.pushmenu {
  width: 33%;
  height: 100%;
  top: 0;
  z-index: 1000;
  position: fixed;
  overflow-y: auto;
}
.pushmenu-left {
  left: -33%;
}
.pushmenu-right {
  right: -33%;
}
.pushmenu-push {
  overflow-x: hidden;
  position: relative;
}
.pushmenu-push-left,
.pushmenu-push-left .pushmenu-fixed {
  left: 0;
}
.pushmenu-push-right,
.pushmenu-push-right .pushmenu-fixed {
  right: 0;
}
.pushmenu-push-left.open,
.pushmenu-push-left.open .pushmenu-fixed {
  left: 33%;
}
.pushmenu-push-right.open,
.pushmenu-push-right.open .pushmenu-fixed {
  right: 33%;
}
.pushmenu-push.open {
  overflow: hidden;
}
.pushmenu-push:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(50, 50, 50, 0.5);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}
.pushmenu-push.open:before {
  opacity: 1;
  z-index: 2000;
}
@media (max-width: 1200px) {
  .pushmenu {
    width: 400px;
  }
  .pushmenu-left {
    left: -400px;
  }
  .pushmenu-right {
    right: -400px;
  }
  .pushmenu-push-left.open,
  .pushmenu-push-left.open .pushmenu-fixed {
    left: 400px;
  }
  .pushmenu-push-right.open,
  .pushmenu-push-right.open .pushmenu-fixed {
    right: 400px;
  }
}
@media (max-width: 500px) {
  .pushmenu {
    width: 100%;
  }
  .pushmenu-left {
    left: -100%;
  }
  .pushmenu-right {
    right: -100%;
  }
  .pushmenu-push-left.open,
  .pushmenu-push-left.open .pushmenu-fixed {
    margin-left: 100%;
  }
  .pushmenu-push-right.open,
  .pushmenu-push-right.open .pushmenu-fixed {
    right: 100%;
  }
}

.pushmenu-left.pushmenu-open {
  left: 0;
}
.pushmenu-right.pushmenu-open {
  right: 0;
}

.pushmenu-cancel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}
.pushmenu,
.pushmenu-push,
.pushmenu-fixed {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}