/* ------------------------------------------------------------------------ */
/* common for all pages                                                     */
/* ------------------------------------------------------------------------ */
.s4e {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

/* header */
.s4e-eventheader {
    margin-bottom: 15px;
}


/* ------------------------------------------------------------------------ */
/* event / ticket page                                                      */
/* ------------------------------------------------------------------------ */

/* footer */
.s4e-eventfooter {
    width: 50%;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    margin-top: 20px;
    text-align: center;
}

/* previous group in footer */
.s4e-eventfooter-previous {
    margin-right: 10px;
}

/* next group in footer */
.s4e-eventfooter-next {
    margin-left: 10px;
}

/* image of event in event header */
.s4e-eventimage {
    align-content: center;
}

/* event image itself */
.s4e-eventimage img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 30%;
}

/* title of event in event header */
.s4e-eventtitle {
    font-size: 1.5rem;
    text-align: center;
}

/* description of event in event header */
.s4e-eventdescription {
    font-size: 1.25rem;
    text-align: center;
}

/* group menu */
.s4e-grouping {
    clear: both;
    background-color: blue;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* group in group-menu */
.s4e-grouping-group {
    color: white;
    margin-left: 5px;
    margin-right: 5px;
}

/* cart in group-menu */
.s4e-grouping-cart {
    float: right;
    color: white;
    margin-right: 5px;
}

/* cart total in group-menu */
.s4e-grouping-cart-total {
    font-size: x-small;
    vertical-align: super;
}

/* group page */
.s4e-group {
    clear: both;
}

/* header in group page */
.s4e-groupheader {
    font-size: 1.25rem;
    font-weight: bold;
}

/* description in group page */
.s4e-groupdescription {
    font-style: italic;
}

/* body in group page -> contains the tickets */
.s4e-groupbody {
}

/* ticket */
.s4e-ticket {
    padding: 5px;
    width: 250px;
    height: 300px;
    margin: 10px;
    overflow: hidden;
    border-width: 1px;
    border-color: burlywood;
    border-style: solid;
    float: left;
}

/* header of ticket */
.s4e-ticketheader {
}

/* image in header of ticket */
.s4e-ticketimage {
    align-content: center;
}

/* actual image in header of ticket */
.s4e-ticketimage img {
    height: 100px;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* title / name of ticket */
.s4e-tickettitle {
    font-size: medium;
    font-weight: bold;
}

/* subtitle / subname of ticket */
.s4e-ticketsubtitle {
}

/* body of ticket */
.s4e-ticketbody {
    height: 100px;
}

/* footer of ticket */
.s4e-ticketfooter {
    height: 75px;
}

.s4e-ticket-salesperiod {
}

.s4e-ticket-price {
    font-size: medium;
    font-weight: bold;
}

.s4e-ticket-priceperiod {
    font-size: small;
    color: red;
}

.s4e-ticket-addtocart {
    text-align: right;
}

/* shopping cart */
.s4e-shoppingcart {
}

.s4e-cartcontent {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
}

.s4e-cart {
    margin-bottom: 10px;
}

/* ticket group in cart */
.s4e-cart-group {
    margin-top: 5px;
    font-weight: bold;
}

/* ticket title / name - column */
.s4e-cart-ticket {
    text-align: left;
}

/* ticket title / name */
.s4e-cart-ticket-name {
}

/* ticket subtitle / subname */
.s4e-cart-ticket-subname {
    font-style: italic;
}

/* ticket capacity decription */
.s4e-cart-ticket-capacitydescription {
    font-style: italic;
    font-size: x-small;
}

/* ticket price - column */
.s4e-cart-ticket-price {
    text-align: right;
}

/* ticket quantity - column */
.s4e-cart-ticket-quantity {
    text-align: center;
}

/* ticket total - column */
.s4e-cart-ticket-total {
    text-align: right;
}

/* commands in cart */
.s4e-cart-ticket-command {
    margin-left: 5px;
    font-size: large;
}

.s4e-cart-ticket-command-left {
    margin-right: 15px;
    font-size: large;
}

.s4e-cart-ticket-command-right {
    margin-left: 15px;
    font-size: large;
}

/* total in cart */
.s4e-cart-total {
    font-weight: bold;
    margin-top: 5px;
    border-top-color: black;
    border-top-style: solid;
    border-top-width: 1px;
}

/* total text */
.s4e-cart-total-text {
    text-align: left;
}

/* total amount */
.s4e-cart-total-amount {
    text-align: right;
}

/* ------------------------------------------------------------------------ */
/* checkout page                                                            */
/* ------------------------------------------------------------------------ */
.s4e-checkout-title {
    font-size: 1.5rem;
    text-align: center;
}

.s4e-checkout-subtitle {
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
}

.s4e-checkout-subsubtitle {
    font-size: 1.1rem;
    text-align: center;
    font-style: italic;
}

.s4e-checkout-all {
    margin-left: 10px;
    margin-right: 10px;
}

/* group */
.s4e-checkout-group {
    margin-top: 5px;
    font-weight: bold;
}

/* ticket */
.s4e-checkout-ticket {
    margin-top: 5px;
}

/* ticket title / name */
.s4e-checkout-ticket-name {
}

/* ticket subtitle / subname */
.s4e-checkout-ticket-subname {
    margin-left: 5px;
    font-style: italic;
}

/* ticket capacity description */
.s4e-checkout-ticket-capacitydescription {
    margin-left: 5px;
    font-style: italic;
    font-size: x-small;
}

/* ticket price (quantity x price) */
.s4e-checkout-ticket-price {
    text-align: right;
}

/* ticket total */
.s4e-checkout-ticket-total {
    text-align: right;
}

/* checkout total */
.s4e-checkout-total {
    margin-top: 5px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: black;
    font-weight: bold;
}

/* text */
.s4e-checkout-total-text {
    text-align: left;
}

/* amount */
.s4e-checkout-total-amount {
    text-align: right;
}

/* ------------------------------------------------------------------------ */
/* progress page                                                            */
/* ------------------------------------------------------------------------ */

.s4e-progress-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 15px;
}

.s4e-progress-progress {
    width: 50%;
    margin: auto;
    text-align: center;
}

.s4e-progress-text {
    font-weight: bold;
    margin-bottom: 20px;
}

.s4e-progress-text-error {
    font-weight: bold;
    color: red;
    margin-bottom: 20px;
}