@view-transition {
    navigation: auto;
}

.for-admin{
    display: none;
}

body.role-admin .for-admin,
body.role-root .for-admin
{
    display: block;
}

body.role-admin .for-admin.flex,
body.role-root .for-admin.flex{
    display: flex;
}

body.role-admin .for-admin.grid,
body.role-root .for-admin.grid{
    display: grid;
}

:root {
    font-family: Inter, "Noto Sans HK", "Noto Sans SC", Helvetica, Arial, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

html, body{
    font-size: 16px;
    font-family: Inter, "Noto Sans HK", "Noto Sans SC", Helvetica, Arial, sans-serif;
    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__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;
}