html {

    --color-danger: #dc3545;
    --color-info: #0dcaf0;
    --color-success: #198754;
    --color-warning: #ffc107;
    --color-black: #000000;

    --color-danger-subtle: #f8d7da;
    --color-warning-subtle: #fff3cd;
    --color-info-subtle: #cff4fc;
    --color-success-subtle: #d1e7dd;

    --color-danger-emphasis: #58151c;
    --color-info-emphasis: #055160;
    --color-success-emphasis: #0a3622;
    --color-warning-emphasis: #664d03;
    --color-black-emphasis: #000000;
}


.ep-clearfix::after { clear:both; }
.ep-clearfix::after, .ep-clearfix::before { display:table; content:' '; }

.ep-visually-hidden {
    position: absolute !important;
    box-sizing: border-box;
    display: inline-block;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.feld { width:inherit; }
.button {}
.button-small { font-size:10px; padding:1px 4px; }

.ep-bold { font-weight: bold; }

/* feedback */
.alert { /*color:var(--color-danger);*/ padding:10px; margin-bottom:10px; }
.alert-privacy { background-color:var(--color-warning-subtle); color:var(--color-black); /*padding:10px; margin:10px 0;*/ }
.alert-info    { background-color:var(--color-info-subtle); color:var(--color-info-emphasis); }
.alert-danger  { background-color:var(--color-danger-subtle); color:var(--color-danger-emphasis); }
.alert-warning { background-color:var(--color-warning-subtle); color:var(--color-warning-emphasis); }
.alert-success { background-color:var(--color-success-subtle); color:var(--color-success-emphasis); }

.ep-error, .ep-danger, .ep-formitem-error { color:var(--color-danger); }
.ep-warning { color:var(--color-warning); }
.ep-success { color:var(--color-success); }
.ep-info { color:var(--color-info); }


/*select { min-width:200px; }*/

/* formitem template */
.form_item_template_1, .form_item_template_3 { margin-bottom:10px; width:100%; }
.form_item_template_3 td.title { width:25%; padding-right:20px; padding-top:3px; }
.form_item_template_3 td:nth-child(2) { width:0; }
.form_item_template_3 td:nth-child(3) { width:75%; }


/* formitem */
.form_item td { vertical-align:top; }
.mod_formitem { }
.mod_formitem_title { font-weight:bold; }
.mod_formitem_description { }
.mod_formitem_error,
.mod_formitem_error .text,
.mod_formitem_error .title,
.mod_formitem_error .mod_formitem_title { color:var(--color-danger); }
.mod_formitem_field { min-width:200px; width:100%; }
.mod_formitem_option { }
.mod_formitem_option label { white-space:normal; }
.mod_formitem_option label span { white-space:normal; }
.mod_formitem_option_field { width:200px; }
.mod_formitem_matrix_table td { padding:4px; text-align:center; }
.mod_formitem_matrix_col { padding:4px 10px; text-align:center; }
.mod_formitem_matrix_row { border:1px solid #EFEFEF; text-align:center; padding:4px; width:15%;}

.ep-formitem.form_item_template_3[data-type="CheckboxSingle"] td.text,
.ep-formitem.form_item_template_3[data-type="Conditions"] td.text { padding-top:3px; }

.ep-formitem.form_item_template_3[data-type="CheckboxSingle"] input,
.ep-formitem.form_item_template_3[data-type="Conditions"] input { float:left; margin-top:3px; }

.ep-radio-checkbox-offset { margin-left:20px; }

.ep-charcount,
.ep-charcount span,
.ep-number-restriction { font-size:10px; color:#888888;}

/* formitem closed */
label.ep-label {}
span.ep-label-text {}
div.ep-label-description { }
div.ep-label-image { }

.ep-label-description { margin-bottom:10px; }


/* form buttons */
.mod_form_buttons { }
.mod_form_button { }

.ep-submit-spinner {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* progress bar */
.mod_survey_progressbar { background-color:#ffffff; border:1px solid #888888; width:100%; height:10px; }
.mod_survey_progressbar img { height:10px; background-color:#888888; }

/* event */
.ep-event-item-list { margin-bottom:10px; }
.ep-event-item-list-title { font-weight:bold; }
.ep-event-item-list-infos { margin-bottom:5px; }
.ep-event-item-list-escort { margin-top:5px; }
.ep-event-item-list-escort label { font-weight:normal;}
.ep-event-item-list-escort input[type="text"] { width:auto; }
.ep-event-item-list-actions { margin-top:5px; }
.ep-event-item-list-actions a { display:inline-block; margin-right:10px; }

.ep-event-item-summary-header { margin-bottom:10px; }
.ep-event-item-summary { padding-left: 16px; }

table.ep-event-item-list-infos { width:100%; margin:10px 0; } /* TplEventDateSingle */
table.ep-event-item-list-infos td:nth-child(2) { width:100%; } /* need to overrule .form_item_template_3 td:nth-child(2) */
td.ep-event-item-list-infos { vertical-align:top; }
td.ep-event-date-label, td.ep-event-location-label { font-weight:bold; }
td.ep-event-date { width:100%; }
td.ep-event-location { width:100%; }

.ep-event-ticket-table { border-spacing:0; }
.ep-event-ticket-table td { padding:0 5px 10px 5px; vertical-align:top; }
.ep-event-ticket-table td:first-child { padding-left:0; }
.ep-event-ticket-table td:last-child { padding-right:0; width:100%; }

.ep-event-ticket-select { width:40px; }
.ep-event-ticket-mine { margin-top:10px; margin-bottom:10px; }

.ep-event-ticket-persons { margin:10px 0; }
.ep-event-ticket-person { margin-bottom:20px; }
.ep-event-ticket-person-label { margin-bottom:5px; color:#888888; }
.ep-event-ticket-person-container { border-left:2px solid #efefef; padding-left:10px; }
.ep-event-ticket-person-field { display:flex; align-items:center; margin-bottom:5px; }
.ep-event-ticket-person-field label { width:25%; }
.ep-event-ticket-person-field div { width:75%; }
.ep-event-ticket-person .ep-event-ticket-mine { margin-top:0; margin-bottom:5px; }

.ep-event-ticket-summary-header { margin-bottom:10px; }
.ep-event-ticket-summary { display:grid; grid-template-columns:20px 1fr; }
.ep-event-ticket-summary > div { margin-bottom:10px; }

/* UNUSED .ep-container-chbx-hasescort { float:left; } */
/* UNUSED .ep-subscribe-other { margin-top:20px; margin-bottom:20px; } */


/* sweepstake */
.ep-sweepstake-title { font-weight:bold; }
.ep-sweepstake-opener { font-weight:normal; }
.ep-sweepstake-ctr { font-weight:normal; }
.ep-sweepstake-price { margin-bottom:10px; }
.ep-sweepstake-price-select { float:left; padding-right:10px; padding-top:3px; }
.ep-sweepstake-price-picture { float:left; padding-right:10px;}
.ep-sweepstake-price-content { float:left; padding-top:3px; }
.ep-sweepstake-price-title { }
.ep-sweepstake-price-description { margin-top:5px; }
.ep-sweepstake-clear { clear:both; }

/* paging */
.ep-paging { width:100%; text-align:right; border:1px solid red !important; }
.ep-page-index { text-align:center; background-color:red; }

/* term */
.ep-term { white-space:normal; }

/* menu */
.ep-menu { display:flex; flex-wrap:wrap; padding-left:0; margin:0 0 10px 0; list-style:none; box-sizing:border-box; }
.ep-menu li { box-sizing: border-box; }
.ep-menu a { display:block; box-sizing:border-box; padding:6px 12px; text-decoration:none; background:0 0; background-color:rgba(0, 0, 0, 0); border:0; }
.ep-menu a:hover { text-decoration:none; }
.ep-menu.nav-tabs { border-bottom:1px solid #cccccc; }
.ep-menu.nav-tabs a { margin-bottom:-1px; border:1px solid transparent; }
.ep-menu.nav-tabs a.active { color: #000000; border-color:#eeeeee #eeeeee #ffffff; background-color:#ffffff; }
.ep-menu.nav-tabs a:not(.active):hover { border-color:#eeeeee; }
.ep-menu.nav-pills a.active { color:#000000; background-color:#eeeeee; }
.ep-menu.nav-underline { gap:12px; }
.ep-menu.nav-underline a { padding-left:0; padding-right:0; border-bottom:2px solid transparent; }
.ep-menu.nav-underline a.active { color: #000000; border-color:#000000; }
.ep-menu.nav-underline a:not(.active):hover { border-color:#eeeeee; }
.ep-menu.justify-content-center { justify-content:center; }
.ep-menu.justify-content-end { justify-content:flex-end; }

/* upload */
input[type="file"] { position:absolute; width:0.1px; height:0.1px; opacity:0; overflow:hidden; z-index:-1; }
.ep-upload-button { text-align:left; text-overflow:ellipsis; overflow:hidden; }
.ep-upload-button em { }
.ep-upload-progress { margin:5px 0; display:none; background-color:#ffffff; border:1px solid #888888; width:100%; height:10px; }
.ep-upload-progress div { height:10px; background-color:#888888; }

/* modal */
.ep-modal { position:absolute; bottom:0; display:flex; flex-direction:column; z-index:101; width:100%; min-width:320px; max-width:640px; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#ffffff; box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.ep-modal-backdrop { position:fixed; top:0; right:0; bottom:0; left:0; display:flex; justify-content:center; align-items:flex-start; z-index:100; background-color: rgba(0, 0, 0, 0.3); }
.ep-modal-header { display:flex; justify-content:space-between; padding:10px; }
.ep-modal-header h3 { margin:0; }
.ep-modal-footer { display:flex;justify-content:flex-end; padding:10px; }
.ep-modal-body { position:relative; padding:10px; }
.ep-modal-close-icon { padding:0 2px; cursor:pointer; border:0; background:transparent; color:#888888; fill:currentColor; }
.ep-modal-close-icon svg { width:16px; color:#888888; }
.ep-modal-close-icon svg:hover { color:#000000; }
.ep-seperator { border-color: #888888}
@media (min-width: 481px) {
    .ep-modal { position:relative; border-top-left-radius:0; border-top-right-radius:0; margin-left:10px; margin-right:10px; }
    .ep-modal-backdrop { padding-top:100px; }
}

/* loading icon (nur bei event ondemand verwendet */
.ep-loading { display:block; width:20px; height:20px; animation:spin 1s linear infinite; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* disabled */
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] input[type="radio"],
input[type="checkbox"].disabled,
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="radio"][disabled] {
    cursor: not-allowed;
}

.ep-spinner { display:inline-block; width:8px; height:8px; vertical-align:-1px; border-radius:50%; border:2px solid currentcolor; border-right-color:transparent; animation:.75s linear infinite ep-spinner-animation; }
@keyframes ep-spinner-animation {
    to { transform: rotate(360deg); }
}


.ep-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 800px;
    width: 100%;
}
.ep-gallery-item {
    border: 1px solid #cccccc;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
}
.ep-gallery-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ep-lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); display:none; justify-content:center; align-items:center; }
.ep-lightbox img { max-width:90%; max-height:90%; }
.ep-lightbox-prev, .ep-lightbox-next, .ep-lightbox-close { position:absolute; background:rgba(0, 0, 0, 0.5); color:white; border:none; font-size:24px; padding:10px; cursor:pointer; width:50px; height:50px; }
.ep-lightbox-prev, .ep-lightbox-next { top:50%; transform:translateY(-50%); }
.ep-lightbox-prev { left:10px; }
.ep-lightbox-next { right:10px; }
.ep-lightbox-close { top:10px; right:10px; }
.ep-lightbox-description {
    position: absolute;
    display:none;
    bottom:0;
    left:0;
    right:0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 16px;
    padding: 20px;
    text-align:center;
}


/* tom-select */
.ts-wrapper { min-height:27px; }
.ts-wrapper.single .ts-control { background-image:none; box-shadow:none; border:0; }
.ts-control { padding:0; outline:0; }
.ts-wrapper.single .ts-control:not(.rtl)::after { right:4px; }
.ts-dropdown { margin:2px 0 0; }

/* payee */
#ep-payees { max-width:500px; margin:0 auto; }
.ep-payee-toggle {
    background-color:#eeeeee;
    border:0;
    border-radius:4px;
    padding:0 4vw;
    text-align:center;
    width:100%;
    height:55px;
    cursor:pointer;
    font-size:20px;
}
.ep-payee-toggle:hover { background-color:#dddddd; }

.ep-payee-details {

}