/**
 * @format
 */

:root {
    /* BREAKPOINTS */
    --ev-breakpoint-tablet: 890px;

    /* DEFAULT WORDPRESS COLOR SCHEME */
    --ev-wp-black: #222222;
    --ev-wp-charcoal: #333333;
    --ev-wp-blue: #0073aa;
    --ev-wp-light-blue: #00a0d2;

    /* INPUT */
    --ev-wp-background: #f0f0f1;
    --ev-wp-input-border: #8c8f94;
    --ev-wp-input-placeholder: #a9a9a9;
    --ev-field-description: #a9a9a9;
    --ev-input-disabled: #f9f9f9;
    --ev-input-disabled-color: #a7aaad;
    --ev-input-focus-h: 245;
    --ev-input-focus-s: 100%;
    --ev-input-focus-l: 42%;

    /* ERROR/SUCCESS */
    --ev-error-text: hsl(348, 55%, 49%);
    --ev-success-text: hsl(143, 100%, 26%);
    --ev-warning-text: hsl(43, 100%, 66%);
    --ev-info-text: hsl(199, 100%, 33%);

    --ev-wp-red: firebrick;
    --ev-wp-green: #428372;
    --ev-wp-yellow: #e2bf18;
    --ev-wp-blue: #0073aa;
    --ev-wp-grey: #8c8f94;
}

/* LINKS */
/* ...Leaflet maps */
.ev-map a.leaflet-control-zoom-in,
.ev-map a.leaflet-control-zoom-out,
.ev-map a.leaflet-control-zoom-in:hover,
.ev-map a.leaflet-control-zoom-out:hover,
.ev-map a.leaflet-popup-close-button,
.ev-map a.leaflet-popup-close-button:hover,
.ev-map .leaflet-control a,
.ev-map .leaflet-control a:hover,
.ev-trigger-modal,
.ev-trigger-modal:hover {
    text-decoration: unset !important;
    background-position: 50% 50% !important;
}

/* FORMS */
/* input, select and textarea fields */
input,
textarea,
select,
.ev-input,
span.ev-input {
    font-size: max(16px, 1rem);
    font-family: inherit;
    padding: 0.25em 0.5em;
    background-color: #fff;

    /* transition: 180ms box-shadow ease-in-out; */
}

textarea,
select,
input:not(input[type='range']):not(input[type='file']),
.ev-input:not(input[type='range']):not(input[type='file']):not(
        '.ev-ticket-order-amount'
    ),
span.ev-input {
    border: 1px solid var(--ev-wp-input-border);
    border-radius: 4px;
}

span.ev-input {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

input::placeholder {
    color: var(--ev-wp-input-placeholder);
}

select,
input[type='date'],
input[type='datetime-local'],
input[type='datetime'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='file'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
input[type='color'],
span.ev-input,
.wp-core-ui .button:not(.button-small), /* WP override */
.wp-core-ui .button-primary:not(.button-small), /* WP override */
.wp-core-ui .button-secondary:not(.button-small) /* WP override */ {
    line-height: 2;
    height: 2.25rem;
    min-height: 36px !important;
}

textarea.ev-input {
    resize: vertical;
}

select.ev-select {
    position: relative;
    vertical-align: middle !important;
}

input[readonly],
select[readonly],
span.readonly {
    border-style: dotted;
    cursor: not-allowed;
    color: var(--ev-input-disabled-color);
    background-color: var(--ev-input-disabled);
    pointer-events: none;
}

input[readonly],
input[disabled],
span.ev-input-disabled {
    --ev-wp-input-border: #ccc;
    background-color: var(--ev-input-disabled);
    color: var(--ev-input-disabled-color);
    cursor: not-allowed;
    pointer-events: none;
}

input[type='radio'][readonly] {
    cursor: not-allowed;
    pointer-events: none;
}

input[type='file'] {
    font-size: 0.9rem;
}

input::file-selector-button {
    padding-block: 0.25em;
    padding-inline: 0.5em;
    font-family: inherit;
}

input[type='checkbox']:focus,
input[type='color']:focus,
input[type='date']:focus,
input[type='datetime-local']:focus,
input[type='datetime']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='radio']:focus,
/* input[type='range']:focus, */
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='time']:focus,
input[type='url']:focus,
input[type='week']:focus,
select:focus,
textarea:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
}

/********** Range Input Styles **********/
/* Range Reset */
input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

/* Removes default focus */
input[type='range']:focus {
    outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type='range']::-webkit-slider-runnable-track {
    background-color: var(--ev-wp-blue);
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -0.5rem; /* Centers thumb on the track */

    /*custom styles*/
    background-color: var(--ev-wp-light-blue);
    border-radius: 4px; /*Removes default border-radius that FF applies*/
    height: 1.5rem;
    width: 1rem;
}

input[type='range']:focus::-webkit-slider-thumb {
    border: 1px solid var(--ev-wp-blue);
    outline: 3px solid var(--ev-wp-blue);
    outline-offset: 0.125rem;
}

/******** Firefox styles ********/
/* slider track */
input[type='range']::-moz-range-track {
    background-color: var(--ev-wp-blue);
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type='range']::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 4px; /*Removes default border-radius that FF applies*/

    /*custom styles*/
    background-color: var(--ev-wp-light-blue);
    height: 1.5rem;
    width: 1rem;
}

input[type='range']:focus::-moz-range-thumb {
    border: 1px solid var(--ev-wp-blue);
    outline: 3px solid var(--ev-wp-blue);
    outline-offset: 0.125rem;
}

/* form field labels */
.ev-label-above {
    display: flex;
    width: 100%;
    font-weight: 600;
    margin-bottom: 0.5em;
}

.ev-label.ev-label-above-editor {
    margin-bottom: -20px;
}

.ev-label-vertical-center {
    align-items: center;
}

.ev-input {
    position: relative;
}

.ev-input-full-width {
    width: 100%;
    display: inline-block;
}

.ev-settings.full-width {
    width: 100%;
    max-width: 780px;
}

.ev-input-ordinal-container {
    position: relative;
}

.ev-input-ordinal input {
    min-width: 9ch;
}

@media screen and (max-width: 780px) {
    .ev-input-ordinal input {
        min-width: 10ch;
    }
}

.ev-input-ordinal::after {
    content: 'ste/de';
    position: absolute;
    top: 0.1em;
    right: 2.2em;
    font-size: 0.8em;
    color: var(--ev-wp-input-placeholder);
}

.ev-input-date {
}

.ev-input-time {
}

/* BUTTONS */

.button,
a.button {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    gap: 0.5em;
}

/* LOADER*/
.ev-loader {
    --c: no-repeat linear-gradient(var(--ev-loader-color) 0 0);
    background:
        var(--c), var(--c), var(--c), var(--c), var(--c), var(--c), var(--c),
        var(--c), var(--c);
    background-size: 16px 16px;
    animation:
        ev-submit-loader-1 1s infinite,
        ev-submit-loader-2 1s infinite;
}

@keyframes ev-submit-loader-1 {
    0%,
    100% {
        width: 45px;
        height: 45px;
    }
    35%,
    65% {
        width: 65px;
        height: 65px;
    }
}
@keyframes ev-submit-loader-2 {
    0%,
    40% {
        background-position:
            0 0,
            0 50%,
            0 100%,
            50% 100%,
            100% 100%,
            100% 50%,
            100% 0,
            50% 0,
            50% 50%;
    }
    60%,
    100% {
        background-position:
            0 50%,
            0 100%,
            50% 100%,
            100% 100%,
            100% 50%,
            100% 0,
            50% 0,
            0 0,
            50% 50%;
    }
}

.ev-loader-text {
    position: absolute;
    font-weight: 600;
    bottom: 0;
    margin-bottom: 1em;
}

/* OVERLAY */
.ev-overlay {
    position: absolute;
    cursor: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: none;
    flex-direction: column;
    gap: 2em;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(
        --ev-event-popup-modal-backdrop-color,
        rgba(0, 0, 0, 0.05)
    );
    z-index: 2;
}

/* HELPERS */
.ev-hover-pointer {
    cursor: pointer;
}

.ev-center-all {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Rows & columns */
.ev-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 1em;
    column-gap: 1em;
}

@media all and (max-width: 948px) {
    .ev-row {
        row-gap: 0.5em;
    }
}

.ev-row.ev-row-inline-fields-and-text {
    align-items: center; /* centers text and fields vertical */
    gap: 0.5em;
}

.ev-row-chain {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 0;
    gap: 0.5em;
    align-items: center;
}

.ev-row-bottom {
    margin-bottom: 0;
}

.ev-row-top {
    margin-top: 1em;
}

.ev-button-row-outside {
    justify-content: space-between;
}

.ev-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.ev-double-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.ev-column-chain {
    display: flex;
    flex-direction: column;
}

.ev-hr {
    height: 0.25em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    background-color: var(--ev-wp-blue);
}

@media screen and (min-width: 950px) {
    .ev-column {
        flex: 1;
    }

    .ev-double-column {
        flex: 2;
    }
}

/* Spacers */
.ev-spacer-mt-1 {
    margin-top: 1em;
}

.ev-spacer-mt-2 {
    margin-top: 1.2em;
}

.ev-spacer-mt-3 {
    margin-top: 1.5em;
}

.ev-spacer-mt-4 {
    margin-top: 1.8em;
}

.ev-spacer-mt-5 {
    margin-top: 3em;
}

.ev-spacer-mb-1 {
    margin-bottom: 1em;
}

.ev-spacer-mb-2 {
    margin-bottom: 1.2em;
}

.ev-spacer-mb-3 {
    margin-bottom: 1.5em;
}

.ev-spacer-mb-4 {
    margin-bottom: 1.8em;
}

.ev-spacer-mb-5 {
    margin-bottom: 3em;
}

.ev-spacer-pt-1 {
    padding-top: 1em;
}

.ev-spacer-pt-2 {
    padding-top: 1.2em;
}

.ev-spacer-pt-3 {
    padding-top: 1.5em;
}

.ev-spacer-pt-4 {
    padding-top: 1.8em;
}

.ev-spacer-pt-5 {
    padding-top: 3em;
}

.ev-spacer-pb-1 {
    padding-bottom: 1em;
}

.ev-spacer-pb-2 {
    padding-bottom: 1.2em;
}

.ev-spacer-pb-3 {
    padding-bottom: 1.5em;
}

.ev-spacer-pb-4 {
    padding-bottom: 1.8em;
}

.ev-spacer-pb-5 {
    padding-bottom: 3em;
}

/* Notice */
.ev-norice {
}

.ev-feedback-container {
    width: 100%;
}

.ev-error-notice-text {
    color: var(--ev-wp-red);
}

.ev-success-notice-text {
    color: var(--ev-wp-green);
}

/* Notices */
/* https://codepen.io/hugobaeta/pen/XmbPNL */
.ev-norice {
    font-size: 0.9em;
    color: currentColor;
    background: #fff;
    border-left: 4px solid #fff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    margin: 0 0 1em;
    padding: 0.25em 0.75em;
    position: relative;
    display: flex;
}

.ev-norice.ev-is-dismissible-button-wrapper {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5em;
    margin-bottom: 0.5em;
}

.ev-norice.ev-is-dismissible-button-wrapper .ev-is-dismissible-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
}

.ev-norice.ev-is-dismissible-button-wrapper .ev-is-dismissible-button:hover {
    scale: 1.2;
}

.ev-norice.notice-success
    .ev-is-dismissible-button-wrapper
    .ev-is-dismissible-button {
    background-color: var(--ev-success-text);
}

.ev-norice.notice-warning
    .ev-is-dismissible-button-wrapper
    .ev-is-dismissible-button {
    background-color: var(--ev-warning-text);
    color: currentColor;
}

.ev-norice.notice-error
    .ev-is-dismissible-button-wrapper
    .ev-is-dismissible-button {
    background-color: var(--ev-error-text);
}

.ev-norice.notice-info
    .ev-is-dismissible-button-wrapper
    .ev-is-dismissible-button {
    background-color: var(--ev-info-text);
}

.ev-noricep {
    margin: 0.5em 0;
    padding: 2px;
    text-wrap: pretty;
    hyphens: auto;
}
.ev-norice.notice-alt {
    box-shadow: none;
}
.ev-norice.notice-large {
    padding: 10px 12px;
}
.ev-norice.notice-success {
    border-color: var(--ev-success-text);
}
.ev-norice.notice-success.notice-alt {
    background: #edf8ee;
}
.ev-norice.notice-warning {
    border-color: var(--ev-warning-text);
}
.ev-norice.notice-warning.notice-alt {
    background: #fff8e6;
}
.ev-norice.notice-error {
    border-color: var(--ev-error-text);
}
.ev-norice.notice-error.notice-alt {
    background: #fcebeb;
}
.ev-norice.notice-info {
    border-color: var(--ev-info-text);
}
.ev-norice.notice-info.notice-alt {
    background: #e6f6fb;
}

/* Validation */
input[type='text'].required {
    border: 1px solid var(--ev-wp-red);
}

/* Hide/show */
.ev-hide {
    display: none !important;
}

.ev-show {
    display: block !important;
}

.ev-hide-this-item {
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    color: hsl(0, 0%, 0%);
}

.ev-show-this-item {
    visibility: visible;
    width: auto;
    height: auto;
    margin: initial;
    padding: initial;
}
