:root {
  /* IMAGES */
    --image-background: url('https://brandworks-media3.fra1.digitaloceanspaces.com/chronorace-subscriptionplatform-light/antwerpmarathon-bg1.jpg');
    --image-square-icon: url('https://brandworks-media3.fra1.digitaloceanspaces.com/chronorace-subscriptionplatform-light/antwerpmarathon-logo-square.jpg');
    --image-header: url('https://brandworks-media3.fra1.digitaloceanspaces.com/chronorace-subscriptionplatform-light/antwerpmarathon2.jpg');
  
  /* LAYOUT */
  --app-width: 1100px;

  /* BRANDING */
  --color-lines: #FAB225;
  --color-price: rgb(250, 178, 37);
  --color-primary-bg: rgb(250, 178, 37);
  --color-primary-text-bg: rgb(0, 53, 75);
  --color-btn-primary-bg: rgb(250, 178, 37);
  --color-btn-primary-bg-hover: rgb(255, 189, 59);
  --color-btn-primary-text: rgb(0, 53, 75);
  --color-btn-primary-shadow: rgb(171, 121, 22);
  --color-secondary-bg: #00354B;
  --color-btn-secondary-bg: #fbfbfb;
  --color-btn-secondary-bg-hover: #ededed;
  --color-btn-secondary-border: rgb(0, 53, 75);
  --color-btn-secondary-text: rgb(0, 53, 75);
  --color-btn-secondary-shadow: rgb(0, 53, 75);
  --border-radius: 5px;
}

/* ********************************* */
/* GENERAL */
/* ********************************* */

.css-hide { display: none !important; }
.css-panel-info { display: none !important; }
.style-primary { background: rgb(0,0,0) !important; }
.price { color: var(--color-price) !important; }
body { background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)), var(--image-background) !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; }
#base { padding-left: 0 !important; overflow: visible !important; }
#header { left: 0 !important; display: none !important; }
#menubar { display: none !important; }
#content { padding-top: 50px !important; max-width: var(--app-width) !important; margin: 0 auto !important; }
.section-body { width: 100% !important; padding: 20px 0 0 0 !important; }
.stick-to-bottom #myBtn { background: var(--color-lines) !important; border: 0 !important; }

@media screen and (max-width: 768px) {
    .row.hide-pc { margin-right: 0 !important; margin-left: 0 !important; }
    #content {padding-top: 0 !important; margin-top: -24px !important; }
    ul.nav.nav-tabs.tabs-centered li { color: black !important; border-top-left-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important; }
    ul.nav.nav-tabs.tabs-centered li a { opacity: 1 !important; }
    ul.nav.nav-tabs.tabs-centered li.active { /*background: #ededed;*/ }
    ul.nav.nav-tabs.tabs-centered li.active a { border-bottom: 4px solid black !important; font-weight: bold !important; }
    .section-body.css-RegistrationForm { overflow-x: hidden; padding-left: 12px !important; padding-right: 12px !important; } /* 28/04: wait for deploy chronorace */
}

/* ********************************* */
/* BUTTONS */
/* ********************************* */

.btn-default { background: var(--color-btn-secondary-bg) !important; border: 1px solid var(--color-btn-secondary-border) !important; color: var(--color-btn-secondary-text) !important; border-radius: var(--border-radius) !important; }
.btn-default:hover { background: var(--color-btn-secondary-bg-hover) !important; border-color: var(--color-btn-secondary-border) !important; }

.css-btn-primary, .csss-btn-primary { border: 0 !important; color: var(--color-btn-primary-text) !important; font-weight: 600 !important; background-color: var(--color-btn-primary-bg) !important; border-radius: var(--border-radius) !important; box-shadow: 0 3px 0 var(--color-btn-primary-shadow) !important; }

.css-btn-secondary { border-width: 1px !important; border-radius: var(--border-radius) !important; border-color: var(--color-btn-secondary-border) !important; color: var(--color-btn-secondary-text) !important; font-weight: 600 !important; background-color: var(--color-btn-secondary-bg) !important; box-shadow: 0 2px 0 var(--color-btn-secondary-shadow) !important; }
.css-btn-secondary:hover { background-color: var(--color-btn-secondary-bg-hover) !important; }

a.btn.btn-icon-toggle { margin-top: 8px !important; }
.card-head.collapsed a.btn.btn-icon-toggle { color: var(--color-btn-primary-text) !important; background-color: var(--color-btn-primary-bg) !important; border-radius: var(--border-radius) !important; box-shadow: 0 3px 0 var(--color-btn-primary-shadow) !important; }
.card-head.collapsed a.btn.btn-icon-toggle:hover { background: var(--color-btn-primary-bg-hover) !important; }
.card-head:not(.collapsed) a.btn.btn-icon-toggle { opacity: 0.5 !important; }

.css-backnext-container .css-btn-back, .css-backnext-container .btn.cancel { border-width: 1px !important; border-radius: var(--border-radius) !important; border-color: var(--color-btn-secondary-border) !important; color: var(--color-btn-secondary-text) !important; font-weight: 600 !important; background-color: var(--color-btn-secondary-bg) !important; box-shadow: 0 2px 0 var(--color-btn-secondary-shadow) !important; }
.css-backnext-container .css-btn-next, .css-backnext-container .btn.btn-accent { border: 0 !important; color: var(--color-btn-primary-text) !important; font-weight: 600 !important; background: var(--color-btn-primary-bg) !important; border-radius: var(--border-radius) !important; box-shadow: 0 3px 0 var(--color-btn-primary-shadow) !important; }

/* ********************************* */
/* HERO */
/* ********************************* */

#header + #base .event-header-master { margin-top: 47px !important; }
.event-header-master { border-radius: var(--border-radius) !important; margin-top: 47px !important; position: relative !important; height: fit-content !important; overflow: visible !important; }
.event-header-master::after { content: "" !important; position: absolute !important; border-radius: var(--border-radius) !important; border: 5px solid white !important; top: -47px !important; left: 20px !important; width: 140px !important; height: 140px !important; background: var(--image-square-icon) no-repeat center !important; background-size: contain !important; z-index: 10 !important; box-shadow: 0 0 15px 5px rgba(0,0,0,0.15) !important; }
.event-header-gradient, .home-header-gradient { position: relative !important; padding-top: 50px !important; border-top-right-radius: var(--border-radius) !important; border-top-left-radius: var(--border-radius) !important; max-height: 100% !important; height: 100% !important; background: none !important; background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, .60), rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.1)) !important; }
.event-header-img { content: var(--image-header) !important; transform: none !important; width: 100% !important; height: 100% !important; background-size: cover !important; object-fit: cover !important; position: absolute !important; top: 0 !important; }
.event-header-date { border-top-left-radius: var(--border-radius) !important; border-bottom-left-radius: var(--border-radius) !important; background: black !important; color: white; padding: 0 8px !important; }
.event-header { min-height: 100% !important; }
.event-header .header-title { color: white !important; margin-top: 80px !important; }
.header-title { border-color: var(--color-lines) !important; }
.distance:not(.css-header-distance) { position: relative !important; top: -2px !important; }
.event-header-master .btn.btn-raised.ink-reaction.button-margin.btn-default-bright { float: right !important; top: -60px !important; font-size: 10px !important; padding: 4px 8px !important; }
.style-primary.distance.text-center { width: 100% !important; display: inline-block !important; clear: both !important; border-bottom-right-radius: var(--border-radius) !important; background: black !important; color: white !important; font-size: 12px !important; padding: 0 20px 4px 20px !important;}
.style-primary.distance.text-center h2 { display: inline !important; font-size: 12px !important; color: white !important; }
.css-header-distance { border: 1px solid black !important; border-bottom-left-radius: var(--border-radius) !important; border-bottom-right-radius: var(--border-radius) !important; border-color: var(--color-primary-bg) !important; background: var(--color-primary-bg) !important; color: var(--color-primary-text-bg) !important; display: inline-block !important; margin-top: -2px !important; }
.css-header-distance h4 { font-weight: 700 !important; font-size: 16px !important; }

@media screen and (max-width: 768px) {
  .event-header-master { margin-top: 0 !important; }
  .event-header-master, .event-header-gradient  { border-radius: 0 !important; }
  .event-header-gradient, .home-header-gradient { padding-top: 0 !important; }
  .event-header-master::after { display: none !important; }
  .event-header { padding: 30px 40px !important; padding-bottom: 15px !important; min-height: fit-content !important; }
  .event-header-date { position: absolute !important; display: block !important; margin: 0 !important; left: 0 !important; width: 100% !important; bottom: -2px !important; top: unset !important; border-radius: 0 !important; }
  .event-header-date h4 { max-width: 100% !important; font-size: 10px !important;  }
  .distance:not(.css-header-distance) { border-radius: 0 !important; }
  .event-header .header-title h2 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .event-header .header-title {  margin-top: 30px !important; }
  .event-header .header-title h2 { margin-top: 0 !important; }
  #header + #base .event-header .header-title { margin-top: 0 !important; }
  .event-header-master .btn.btn-raised.ink-reaction.button-margin.btn-default-bright { float: none !important; top: -8px !important; }
  .css-header-distance { display: block !important; padding-left: 20px !important; margin-left: 0 !important;  margin-top: 15px !important; width: fit-content !important; border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
  .css-header-distance h4 { text-align: center !important; font-weight: 700 !important; font-size: 16px !important; }
  .event-header-gradient, .home-header-gradient { background: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, .60), rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3)) !important; }
  .header-fixed .headerbar-left { top: 0 !important; }
  #header + #base .event-header-master { margin-top: 0 !important; }
  
}

/* ********************************* */
/* SUBSCRIPTION */
/* ********************************* */

.panel, .card { border-radius: var(--border-radius) !important; box-shadow: 0 2px 5px 5px rgba(0,0,0,0.02) !important; }
.event-card-header-title { border-left: 0 !important; margin: 12px 10px 10px 10px !important; }
.tools .price { margin-top: 12px !important; padding: 0 30px !important; }
.panel-group .collapsed .fa-angle-down { transform: rotate(-90deg) !important; -webkit-transform: rotate(-90deg) !important; }
#accordion0 .card-body .col-md-5 { width: 100% !important; }
.text-color-accent { color: var(--color-price) !important; }
.card-body img.img-responsive { max-width: 140px !important; margin: 0 auto !important; }
.header-title h5 li { margin-left: 16px !important; }
.header-title h5 img { max-width: 200px !important; }
.card-head.style-accent { border-radius: var(--border-radius) !important; }
.disabled-card { border: 1px solid black !important; }
.form-group:has(.checkbox-styled) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.checkbox.checkbox-styled { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.css-backnext-container .css-btn-back, .css-backnext-container .btn.cancel { float: left !important; }
.css-backnext-container .css-btn-next, .css-backnext-container .btn.btn-accent { float: right !important; margin-right: 0 !important; }
.sharethis-inline-share-buttons { padding-bottom: 16px !important; }
.css-table-width table { max-width: 90% !important; overflow-x: scroll !important; }
.css-table-width td.content { background: transparent !important; }
section .style-accent, .offcanvas-pane .style-accent, .card .style-accent, section.style-accent, .offcanvas-pane.style-accent, .card.style-accent { background: var(--color-secondary-bg); }

@media screen and (max-width: 768px) {
  .panel-group { padding: 0 20px !important; }
  .panel { box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15) !important; margin-bottom: 15px !important; }
  .event-card-header-title { margin: 0 !important; width: 100% !important; text-align: center !important; }
  .tools { position: relative !important; display: block !important; width: 100% !important; text-align: center !important; }
  .tools .price { position: relative !important; padding: 0 !important; right: auto !important; margin-top: 0 !important; }
  .tools .price h2 { position: relative !important; display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .panel-group .card .collapsed .fa-angle-down { transform: rotate(-90deg) !important; -webkit-transform: rotate(-90deg) !important; }
  a.btn.btn-icon-toggle { position: relative !important; display: block !important; width: 90% !important; margin: 20px auto 20px auto !important; }
  .event-card-header-title h2 { font-size: 18px !important; }
  .css-backnext-container .css-btn-back, .css-backnext-container .btn.cancel { margin-left: 20px !important; }
  .css-backnext-container .css-btn-next, .css-backnext-container .btn.btn-accent { margin-right: 20px !important; }
  .css-table-width table { max-width: 90vw !important; overflow-x: scroll !important; }
}

/* ********************************* */
/* STEPPER TABLE */
/* ********************************* */

.stepper-pc { padding: 10px 10px 24px 10px !important; }
.stepper-table { width: 85% !important; margin: 0 auto !important; line-height: 1.2 !important; font-size: 12px !important; color: black !important; }
.stepper-table .step-circle { width: 24px !important; height: 24px !important; background: white !important; border: 1px solid black !important; }
.stepper-table .line hr { border: 1px solid #c2c2c2 !important; }
.stepper-table .step-circle.active { background: white !important; border: 1px solid var(--color-lines) !important; color: var(--color-lines) !important; }
.stepper-table .step-circle.current { color: white !important; background: var(--color-lines) !important; border: 1px solid var(--color-lines) !important; }
.stepper-table .line hr.active { border: 1px solid var(--color-lines) !important; }
.stepper-table .text-active { color: black !important; }
.stepper-table .text-current { color: var(--color-lines) !important; }

@media screen and (max-width: 768px) {
  .stepper-mobile { display: none !important; }
}

/* ********************************* */
/* LANGUAGE CHOOSER (FOOTER) */
/* ********************************* */

.section-langage { max-width:  var(--app-width) !important; margin: 0 auto !important; padding: 20px 10px !important; }
.section-langage .center-text { text-align: left !important; }
.section-langage .center-text a { text-decoration: underline !important; }

@media screen and (max-width: 768px) {
  .section-langage .row { margin-left: 0 !important; margin-right: 0 !important; padding-bottom: 20px !important; }
  .section-langage .row.center-text { display: block !important; width: 100% !important; text-align: center !important; }
}

/* ********************************* */
/* GENERAL MOBILE FIXES */
/* ********************************* */
@media screen and (max-width: 768px) {
  .css-bg-transparant { background: transparent !important; }
  .css-btn-primary, .csss-btn-primary, .css-btn-secondary { width: 100% !important; }
  .stick-to-bottom { display: none !important; }
}