body *,
body *:before,
body *:after {
  box-sizing: border-box;
}

body {
    transition: right .3s ease;
    right:0;
    &.nav-open {
        right: 320px;
    }
}

.l-inner {
    margin: 0 auto;
    max-width: 1440px;
    padding: 0 30px;
    @include mq(tablet-wide,max) {
        padding: 0 20px;
    }
    @include mq(tablet-small,max) {
        padding: 0 10px;
    }
}

.l-indicator {
    top: 50%;
    left:0;
    transform: translateY(-3px);
    position: absolute;
    border-radius: 100%;
    background-color: transparent;
    height: 10px;
    width: 10px;
    border: 1px solid #D64541;
    .online & {
        border-color:#2ecc71;
        &:before {
            @include pseudo();
            position: absolute;
            border-radius: 100%;
            background-color: transparent;
            height: 10px;
            width: 10px;
            left:-1px;
            top:-1px;
            border: 1px solid #2ecc71;
            animation: online 2s infinite; 
        }
    }
}

.customize-partial-edit-shortcuts-shown .cp-sw-status-bar[data-bar-mode=fixed] {top:0!important;}
.visually-hidden {position: absolute !important;height: 1px;width: 1px;overflow: hidden;left: -9999px;}