@view-transition {
    navigation: auto;
}

.for-admin,
.for-contact-editor,
.for-event-editor,
.for-staff{
    display: none;
}

body.role-admin .for-admin,
body.role-root .for-admin,
body.role-contact-editor .for-contact-editor,
body.role-event-editor .for-event-editor,
body.role-staff .for-staff
{
    display: block;
}

body.role-admin .for-admin.flex,
body.role-root .for-admin.flex,
body.role-contact-editor .for-contact-editor.flex,
body.role-event-editor .for-event-editor.flex,
body.role-staff .for-staff.flex
{
    display: flex;
}

body.role-admin .for-admin.grid,
body.role-root .for-admin.grid,
body.role-contact-editor .for-contact-editor.grid,
body.role-event-editor .for-event-editor.grid,
body.role-staff .for-staff.grid
{
    display: grid;
}


html, body{
    font-size: 16px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    /*    font-feature-settings:
        "ss01" 1,
        "frac" 1;*/
}

.input-editable p{
    margin-bottom: 1em;
}

.input-editable p:last-child{
    margin-bottom: 0;
}

.input-editable [data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #DDD;
}

.input-editable [data-placeholder]:empty:focus::before {
    content: "";
}

.dragging {
 opacity: 0.5;
 border: 2px dashed #000;
 background-color: #f0f0f0;
}
.drag-over {
    border-top: 3px solid #4a90e2;
}

.iti{
    width:100%;
}

.iti .invalid{
    color: #dc3545 !important;
}

.iti__flag{
    opacity: 0;
    width: 8px !important;
}

li .iti__flag{
    display: none !important;
}

.iti-0__dropdown-content{
    z-index:11 !important;
}

.iti__search-input{
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
}

.iti__country-name,
.iti__dial-code{
    font-size: 0.75rem !important;
}