section.application{
    --defaultMargin: 38px;
    z-index: 3;
    --maxWidth: 512px;
}

section.application small { font-size: 14px; }

section.application div.h3,
section.application div.h4{ margin-bottom: 1rem; }

section.application div.no-pointer-events{ pointer-events: none; }

section.application div.no-pointer-events div.checkbox input:not(:checked) + label { opacity: 0; }

section.application input[type=text],
section.application input[type=email],
section.application input[type=number]{  line-height: 1.2; }

section.application div.helper.overview{ display: none; margin-left: 0; margin-bottom: 30px; float: none; width: unset; }
div.overview table td:first-child{ padding-right: 14px; }

section.application div.dimmed{ opacity: 0.3; pointer-events: none; }

form[name=confirmation] label > em{ display: none; }

form[name=confirmation] .checkbox label { line-height: 1.25; display: flex; min-height: 20px; align-items: center; }

table.budget{ width: 100%; max-width: var(--maxWidth); margin-bottom: 10px; }
table.budget td:first-child{ padding-right: 30px; }
table.budget td:last-child{ text-align: right; white-space: nowrap; }


table.budget tr.line td{ border-bottom: 1px solid #000; padding: 7px 0; }
table.budget tr.line + tr td{ padding-bottom: 7px; }

table.budget tr.padbot0 td{ padding-bottom: 0!important; }

table.budget tr td{ padding-top: 7px; }

form[name=billetter] div.h4{ margin-top: 39px; }

section.application input[readonly]{ background-color: #f3f3f3; }

form[name=billetter] input{ text-align: center; }
form[name=billetter] input:focus{ border-color: #999; }

section.application div.wrapper{
  border: 1px solid rgba(77, 77, 77, 0.3);
  border-radius: 2px;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 5px;
  /*width: 470px;*/
  max-width: 100%;
}

section.application div.wrapper div.field{ max-width: var(--maxWidth); }

section.application div.wrapper + div.wrapper{ margin-top: 20px; }

section.application div.tickets input{ width: 120px; text-align: right; padding-right: 45px;}
section.application div.tickets input + span{ position: absolute;margin-left: -40px; margin-top: 16px; pointer-events: none; width: 23px; text-align: right; display: inline-block; line-height: 1.2; }

section.application div#venueData div.tickets input + span{ margin-top: 16px; }

section.application div.wrapper div.row + div.customVenue,
section.application div#venueData div.customVenue + div.field{ margin-top: 20px; }

section.application div#venueData.no-pointer-events div.customVenue + div.field{ margin-top: 0; }
section.application div#venueData.no-pointer-events div.customVenue + div.field.tickets{ margin-top: 20px; }
section.application div.tickets.kr input{ padding-right: 36px; }

section.application div.tickets.pers input{ padding-right: 54px; }
section.application div.tickets.pers input + span{ margin-left: -50px }

form div.helper{ display: none; }

div#guide div.helper{ margin-bottom: 2rem; }


section.application div.information{ width: unset; }
section.application div.information div.grid .field + .field { margin-top: unset; }

#bandmenu ul.steps li.active{ opacity: 1; transition: .2s; cursor: pointer; border-radius: 5px; }
#bandmenu ul.steps li { max-width: 16.66666667%; }
#bandmenu ul.steps li.completed{ cursor: pointer; background-color: var(--gray); opacity: 1; }
#bandmenu ul.steps li.completed::before{ content: ""; display: block; width: 14px; height: 14px; background: url(check-mark-green.svg); background-size: contain; position: absolute; margin: 16px 0 0 -20px; }

#bandmenu ul.steps li.active:hover{ background-color: #eee; }

section.application ul.steps-content li{ display: none; }
section.application ul.steps-content li.selected{ display: block; }

section.application div.wrapper + button { margin-top: var(--defaultMargin); }

form.box div.wrapper p,
section.application div.wrapper small{ display: inline-block; max-width: var(--maxWidth); }

section.application div.overview table td:last-child{ white-space: nowrap; }

section.application div.wrapper small{ /*text-wrap: balance;*/ }

section.application div.wrapper label > small{ font-size: 13px; }
 
form.box div.wrapper div.row { max-width: 502px; margin-bottom: 0; }

div#guide div.helper{ margin-left: 0; }

div.products{ margin: var(--defaultMargin) 0; }
div.products div.checkbox:last-child{ margin-bottom: 0; }

form.box div.h3 + p{ margin-bottom: var(--defaultMargin); }

form.box div.h4 { font-weight: 700; }

div.artist-toggler div.flex { align-items: center; gap: 15px; }
div.artist-toggler div.flex {
    align-items: center;
    gap: 15px;
}

div.artist-toggler label {
    font-size: smaller;
}

div.artist-toggler small {
    display: block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    top: -1px;
}

div.artist-toggler h4 {
    font-size: 18px;
}

div.artist-toggler + div.wrapper {
    margin-top: var(--defaultMargin);
    opacity: 0;
    position: absolute;
}

div.artist-toggler + div.wrapper.show {
    opacity: 1;
    position: relative;
}

div.artist-toggler + div.wrapper.show span.x { background: url(black-x.svg) no-repeat; }

div.field label > em {
    display: none;
}

_div.chosen-container {
    width: 100%!important;
}

div.productionCost {
    position: absolute;
    top: 20px;
    right: 60px;
}

div.viewmode.cost {
    display: none;
}

div.products div.content.selected div.viewmode.cost {
    display: block;
}

div.products div.content.selected div.viewmode.info {
    display: none;
}

div.products div.content.selected div.productionCost {
    font-weight: 700;
}

table.budget.product-cost {
    width: calc(100% - 30px);
    margin-bottom: 0;
    margin-top: -10px;
}

table.budget.product-cost tr td {
    padding-top: 2px;
}

table.budget.product-cost tr.padbot0 td {
    padding-top: 7px!important;
}

dialog .labels {
    color: #84888F;
    margin-bottom: 15px;
}

span.button.outline {
    color: initial;
    border: 1px solid #DDDEE5;
    background-color: #eee;
    border-radius: 5px;
    line-height: 22px;
}

span.button.outline:hover {
    background-color: var(--primary);
    color: #fff;
}

span.button.outline:active {
    background-color: #579600;
    color: #fff;
}


@media (min-width: 1400px) {
  div#guide div.helper{ margin-left: 80px; }
}

@media (min-width: 992px) {
  div#guide div.helper{ float: right;  width: 470px; max-width: 100%; }
}

@media (max-width: 991px) {
    
    #bandmenu ul.steps li { max-width: unset!important; padding: 20px 35px; }
}

@media (max-width: 767px) {
  #bandmenu{ height: 60px; margin-top: 0px!important; z-index: 4; }
  #bandmenu .container { height: 100%; }
  #bandmenu ul.steps { display: block; position: relative; z-index: 1; height: 100%; }
  #bandmenu ul.steps li{ position: absolute; display: none; max-width: unset; width: 100%; padding: 10px 0; }
  #bandmenu ul.steps li.selected{ position: absolute; top: 0; display: block; }

  #bandmenu ul.steps li.completed::before { margin: 0; display: inline-block; top: 20px; right: unset; left: 20px; }

  #bandmenu ul.steps.open{ height: unset; background-color: #fff; border: 1px solid #DDDEE5; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.05); z-index: 2; }
  #bandmenu ul.steps.open li { position: relative; display: block; border-radius: 0; }
/*
  #bandmenu ul.steps.open li + li { border-top: 1px solid var(--primary); }
  test
*/
  #bandmenu label.mobile-toggler{ display: block; position: absolute; right: 20px; inset: 0; z-index: 2; background: url(chevron-down-white.svg) no-repeat; background-position: calc(100% - 15px) 18px; }
}

@media (max-width: 575px) {

    div.row div.col-sm-4 + div.col-sm-8 {
        margin-top: 20px!important;
    }

    form.box div.grid {
        grid-template-columns: unset;
    }

    form.box { padding: 15px; }
    section.application div.wrapper { padding: 15px; }

    section.application{
        --defaultMargin: 19px;
    }

    form.box button{ width: 100%; }

    table.budget td > small{ display: block; }

    div.helper { padding: 15px; }
    div#resume table{ max-width: 100%!important; }
    div#resume table td > small{ display: block; }
 
    section.application .products .product .content {  padding: 18px; }
    section.application table.budget.product-cost { font-size: 12px; margin-top: -5px; width: calc(100% - 40px); }    

    section.application div.wrapper span.button.outline{ display: none; }

    section.application div.tickets input { width: calc(50vw - 67px); }

    .artist-profile-banner .wrapper { bottom: 0px; }

    .artist-profile-banner, .artist-profile-banner .gradient, .artist-profile-banner .gradient > span { height: 230px!important; }

}