.meld .page {
    position: relative;
    text-align: left;
    color: #000;
    font-family: Lato;
    text-decoration: none;
    text-align: left;
    --shadow-color: #000;
    --shadow-colorfull: #000;
    --shadow-size: 0em;
    --shadow-transparency: 0;
    --shadow-x: 0em;
    --shadow-y: 0em;
    --stroke-color: #000;
    --stroke-thickness: 0em;
    --stroke-softness: 0em;
}

.meld .item {
    position: absolute;
    user-select: none;
    z-index: 0;
}

.meld .item.media {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.meld .item.txt {
    text-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-size) var(--shadow-colorfull);
    background: var(--grad);
    display: flex;
    overflow: hidden;
}

.meld .item.txt, .meld .select-handle.txtediting {
    align-items: start;
}

.meld .item.txt.vmiddle, .meld .select-handle.txtediting.vmiddle {
    align-items: center;
}

.meld .item.txt.vbottom, .meld .select-handle.txtediting.vbottom {
    align-items: end;
}

.meld .txt-inner {
    padding: 0.2em;
    flex-grow: 1;
    --bullet-color: 0;
    --bullet-spacing: 0.75em;
    --bullet-scale: 1;
}

.meld .txt-inner > div {
    line-height: 1.2em;
}

.meld .txt-inner.bullets > div {
    padding-left: var(--bullet-spacing);
}

.meld .txt-inner.bullets > div::before {
    margin-left: calc(var(--bullet-spacing) * -1);
    width: var(--bullet-spacing);
    display: inline-block;
    text-align: left;
    transform: scale(var(--bullet-scale));
    color: var(--bullet-color);
}

.meld .txt-inner.bullets.bul-bullet > div::before { content: '\2022'; }
.meld .txt-inner.bullets.bul-wbullet > div::before { content: '\25E6'; }
.meld .txt-inner.bullets.bul-dot > div::before { content: '\00B7'; }
.meld .txt-inner.bullets.bul-diamond > div::before { content: '\2666'; }

.meld .select-handle img.token, .meld .select-handle img.cond, .meld .select-handle img.separate {
    display: inline !important;
    height: 0.95em;
    margin-bottom: -0.1em;
    vertical-align: baseline;
}

.meld .forceshow {
    display: block !important;
}

.meld .item.media.qr {
    background-size: contain !important;
}

.meld .item.media .grad {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--grad);
}

.meld .separate, .meld .sepstatic {
    margin: 0 0.5em;
}

.meld .separate.sep-pipe::before { content: '|'; }
.meld .separate.sep-bullet::before { content: '\2022'; }
.meld .separate.sep-wbullet::before { content: '\25E6'; }
.meld .separate.sep-dot::before { content: '\00B7'; }
.meld .separate.sep-diamond::before { content: '\2666'; }

.meld .separate.sephide {
    display: none;
}

.meld input, .meld select {
    font-family: Lato;
}

.meld.edit {
    position: relative;
    display: flex;
    outline: 1px solid #ccc;
    overflow: hidden;
}

.meld.edit .widgets {
    background: #404347;
    display: flex;
    flex-direction: column;
    text-align: center;
    user-select: none;
}

.meld.edit .widget {
    border-radius: 0.5em;
    color: #999;
    cursor: pointer;
    font-size: 0.8em;
    margin: 0 0.5em;
    padding: 0.8em 0;
    width: 5.8em;
}

.meld.edit .widget i {
    display: block;
    color: #ccc;
    font-size: 2em;
    margin-bottom: 0.25em;
}

.meld.edit .widget:hover {
    background: #555;
    color: #fff;
}

.meld.edit .widget:hover i {
    color: #fff;
}

.meld.edit .widgets .layerstack {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    margin: 0.75em;
}

.meld.edit .widgets .layerstack .layerpage {
    background: rgba(255,255,255,0.07);
    outline: 1px solid #222;
    padding: 0.15em 0.1em;
    margin-bottom: 0.75em;
}

.meld.edit .widgets .layerstack .layer {
    background: #303337;
    box-shadow: inset #222 0 0 0 1px;
    color: #ccc;
    line-height: 1em;
    padding: 0.25em;
    margin: 0.2em;
    cursor: pointer;
    border-radius: 0.3em;
    display: flex;
    justify-content: center;
}

.meld.edit .widgets .layerstack .layer.selected {
    outline: 2px dashed #f00;
}

.meld.edit .widgets .layerstack .layer:hover {
    background: #555;
    color: #fff;
}

.meld.edit .layerhover {
    outline: #f00 4px dashed;
    position: absolute;
}

.meld.edit .bar {
    background: #f8f7f5;
    box-shadow: 0 0 1px #888, 0 0 1em rgba(0,0,0,0.03);
    max-width: calc(100vw - 88px);
    z-index: 10;
}

.meld.edit.mobile .bar {
    overflow-y: hidden;
    overflow-x: auto;
}

.meld.edit .bar-inner {
    display: flex;
    flex-grow: 0;
    padding: 0.3em 0.5em;
    user-select: none;
}

.meld.edit:not(.mobile) .bar-inner {
    flex-wrap: wrap;
}

.meld.edit.mobile .bar-inner {
    height: 2.1em;
    white-space: nowrap;
}

.meld.edit .bar .tool {
    border-radius: 0.25em;
    cursor: pointer;
    line-height: 1em;
    margin: 0.1em;
    padding: 0.45em 0.6em;
    position: relative;
}

.meld.edit .bar .tool.ibtn {
    background: rgba(255,255,255,0.5);
    width: 1.5em;
    text-align: center;
    padding: 0.45em 0.3em;
    outline: 1px solid #e0e8ec;
    margin-right: 0.3em;
}

.meld.edit .bar .tool.on {
    background: #e0f0fc;
    outline: 1px solid #8ae;
}

.meld.edit .bar .tool:not(.disabled):hover {
    background: #e8f4fc;
    outline: 1px solid #ace !important;
}

.meld.edit .bar .tool.on:hover {
    background: #d8e8f4;
    outline: 1px solid #79e !important;
}

.meld.edit .bar .tool.open {
    background: #fcfeff !important;
    outline: 1px solid #d7dcde;
}

.meld.edit .bar .tool:not(.open):not(.disabled):active {
    background: #d0e0ec !important;
    outline: 1px solid #90c0e0 !important;
}

.meld.edit .bar .tool i, 
.meld.edit .win.opts i {
    color: #47d;
}

.meld.edit .bar .tool .cap {
    margin-left: 0.4em;
}

.meld.edit .bar .tool .barinp {
    background: #fcfbf9;
    border: 0;
    border-radius: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 42px;
    -moz-appearance: textfield;
}

.meld.edit .bar .tool input::-webkit-outer-spin-button,
.meld.edit .bar .tool input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.meld.edit .bar .tool:hover .barinp {
    background: #f0f3f4;
}

.meld.edit .bar .tool i.pri, 
.meld.edit .bar .tool i.colist {
    position: relative;
    top: -0.1em;
}

.meld.edit .bar .tool i.pri::after {
    content: '\2022';
    color: #8cf;
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    width: 1em;
    margin-left: -0.5em;
    text-align: center;
}

.meld.edit .bar .tool i.colist::after {
    content: '\2022 \2022';
    color: #8cf;
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    width: 1em;
    margin-left: -0.5em;
    text-align: center;
}

.meld.edit .bar .tool.valign .fa-grip-lines {
    position: absolute;
    left: 1em;
    font-size: 0.75em;
}

.meld.edit .bar .tool.valign.top .fa-grip-lines {
    top: 0.5em;
}

.meld.edit .bar .tool.valign.middle .fa-grip-lines {
    top: 0.75em;
}

.meld.edit .bar .tool.valign.bottom .fa-grip-lines {
    top: 1em;
}

.meld.edit .bar .tip {
    display: none;
    position: absolute;
    bottom: -2.4em;
    left: 50%;
    font-weight: 700;
    font-size: 0.7em;
    line-height: 1em;
    text-align: left;
    white-space: nowrap;
    z-index: 2;
}

.meld.edit .bar .tip > span::before {
    content: ' ';
    background: #000;
    top: -1.1em;
    left: 0;
    width: 1em;
    height: 1em;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: 0 0;
    border-radius: 0.25em;
    z-index: -1;
}

.meld.edit .bar .tip > span {
    margin-left: -50%;
    background: #000;
    color: #fff;
    padding: 0.35em 0.7em 0.4em 0.7em;
    border-radius: 0.5em;
}

.meld.edit .bar .statusbar .tip {
    bottom: unset;
    top: -2.4em;
}

.meld.edit .bar .statusbar .tip > span::before {
    bottom: -2.1em;
    top: unset;
    transform: rotate(-135deg);
}

.meld.edit .bar .tool:not(.disabled):hover .tip {
    display: block;
    animation-name: fadein;
    animation-duration: 1s;
}

.meld.edit .win {
    display: none;
    background: #fff;
    position: absolute;
    left: 0;
    top: 2.2em;
    border-radius: 0.5em;
    outline: 1px solid #ccc;
    box-shadow: 0 0 0.4em rgba(0,0,0,0.2);
    padding: 1em 1.5em;
    z-index: 1;
}

.meld.edit .bar .tool.open .win {
    display: block;
}

.meld.edit .win.right {
    right: 0;
    left: unset;
}

.meld.edit .win.bottom {
    bottom: 2.4em;
    top: unset;
}

.meld.edit .win.thin {
    padding: 0.5em;
}


.meld.edit .win .btnbar {
    display: flex;
    width: 100%;
}

.meld.edit .win .btnbar > div {
    outline: 1px solid #ccc;
    flex-basis: 100px;
    flex-grow: 1;
    flex-shrink: 1;
    font-size: 0.8em;
    text-align: center;
    background: #fff;
    padding: 0.4em;
}

.meld.edit .win .btnbar > div:first-child {
    border-top-left-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
}

.meld.edit .win .btnbar > div:last-child {
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

.meld.edit .win .btnbar i {
    font-size: 1.5em;
    margin: 0.2em 0.3em;
    vertical-align: middle;
}

.meld.edit .win .btnbar span {
    display: inline-block;
    vertical-align: middle;
}

.meld.edit .win .btnbar > div:hover {
    background: #f8fafb;
}

.meld.edit .win .btnbar .active {
    background: #f0f8ff;
    border-radius: 0.25em;
    outline: 2px solid #48f;
    z-index: 2;
}

.meld.edit .win .btnbar .active:hover {
    background: #e8f0f8;
}

.meld.edit .win .btngrid {
    border-collapse: collapse;
    width: 120px;
}

.meld.edit .win .btngrid td {
    background: #fff;
    font-size: 1.25em;
    outline: 1px solid #ccc;
    padding: 0.5em 0;
    position: relative;
    text-align: center;
    width: 2em;
}

.meld.edit .win .btngrid td:hover {
    background: #f8fafb;
}

.meld.edit .win .opt {
    padding: 0.5em 1em;
    border-radius: 0.4em;
}

.meld.edit .win .opt i {
    width: 1em;
}

.meld.edit .win .opt:hover {
    background: #f0f2f3 !important;
}

.meld.edit .disabled {
    background: initial !important;
    cursor: not-allowed !important;
    opacity: 0.3;
}

.meld.edit .opts {
    padding: 0.5em 0;
    user-select: none;
}

.meld.edit .opts .itm {
    cursor: pointer;
}

.meld.edit .win.opts .itm {
    padding: 0.5em 1em;
}

.meld.edit .opts .itm:hover {
    background: #f0f2f3;
}

.meld.edit .opts .fntgrp .fa-caret-right {
    transition: transform 0.3s;
    transform-origin: 30% 50%;
}

.meld.edit .opts .fntgrp.open .fa-caret-right {
    transform: rotate(90deg);
}

.meld.edit .opts .fntgrp .fntwghts {
    overflow: hidden;
}

.meld.edit .opts .fntgrp:not(.open) .fntwghts {
    display: none;
}

.meld.edit .opts .active,
.meld.edit .opt.active {
    background: rgba(68, 120, 220, 0.25);
    z-index: 10;
}

.meld.edit .opt.active:hover {
    background: rgba(68, 120, 220, 0.35) !important;
}

.meld.edit .opt.hoverable .hovershow {
    display: none;
}

.meld.edit .opt.hoverable:hover .hovershow {
    display: block;
}

.meld.edit .bar .tool.open .tip {
    display: none !important;
}

.meld.edit .bar .tool.open-right {
    position: inherit;
}

.meld.edit .bar .tool.open-right .win {
    top: 3em;
    left: auto;
    right: 3px;
}

.meld.edit input.winp {
    font-size: 0.85em;
    width: 2.8em;
    padding: 00.25em 0;
    text-align: center;
}

.meld.edit .win input:focus {
    box-shadow: 0 0 0.2em #8ad;
}

.meld.edit .bar .tool .tcap {
    color: #777;
    font-size: 0.7em;
    font-weight: 700;
    margin-bottom: 0.5em;
}

.meld.edit .bar .tool .tbtn {
    border-radius: 0.25em;
    padding: 0.25em 0.7em;
    margin: 0 -0.7em;
}

.meld.edit .bar .tool .tbtn2 {
    border-radius: 0.25em;
    padding: 0.05em 0.3em;
    text-align: center;
}

.meld.edit .bar .tool .tbtn:hover, .meld.edit .bar .tool .tbtn2:hover {
    background: #eee;
}

.meld.edit .bar .shapelist svg {
    width: 80px;
    height: 80px;
}

.meld.edit .div {
    background: #e4e6e8;
    margin: 0.3em;
    width: 1px;
}

.meld.edit .content {
    background: #ebeae8;
    flex-grow: 1;
    position: relative;
}

.meld.edit .content .viewer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    display: flex;
    align-items: center;
    font-family: Lato;
}

.meld.edit .content .viewer .pages {
    margin: auto;
    padding: 0 0.5em;
}

.meld.edit .content .page {
    background: url(/art/trans.png);
    outline: 1px solid #aaa;
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
    margin: 0.5em auto;
}

.meld.edit .content .page .page-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
    
.meld.edit .content .item {
    cursor: pointer;
}

.meld.edit .content .clickcatch {
    position: relative;
    z-index: 2;
}

.meld.edit .content .clickcatch div {
    position: absolute;
    cursor: pointer;
}

.meld.edit .content .clickcatch div:hover, .meld.edit .content .selected {
    outline: 2px solid #08f;
}

.meld.edit .content .item.editing {
    display: none;
}

.meld.edit .content .snapped {
    outline: 2px dashed #f0c;
}

.meld.edit .content .newpage {
    background: #f2f1f0;
    outline: 1px solid #aaa;
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
    position: relative;
    margin: 2rem auto;
}

.meld.edit .content .newpage > div {
    font-size: 1rem;
    padding: 1em;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.meld.edit .content .newpage:hover {
    background: #fcfbfa;
}

.meld.edit.mobile.textediting .mediapanel, .meld.edit.mobile.fontediting .mediapanel {
    display: none;
}

.meld.edit .mediapanel.enabled {
    background: #404347;
    color: #ccc;
    position: relative;
    text-align: center;
    width: 0px;
    transition: width 0.3s;
    z-index: 1;
}

.meld.edit .mediapanel.enabled .mediapanel-inner,
.meld.edit .mediapanel.enabled.singlepick,
.meld.edit .mediapanel.enabled.multipick {
    width: 250px;
}

.meld.edit .mediapanel.enabled.multipick .multipick-hide {
    display: none;
}

.meld.edit .mediapanel .mediapanel-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding: 0;
}

.meld.edit .panelcaption {
    font-size: 0.9em; 
    margin: 12px 0 -2px 0;
}

.meld.edit.vert .panelcaption {
    margin: 7px 0 4px 0;
}

.meld.edit .mediaitem {
    position: relative;
    width: 200px;
    height: 150px;
    margin: 1em auto;
    background-color: #bbb;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 0 1px #fff, 1px 3px 10px #000;
    cursor: pointer;
    z-index: 99;
}

.meld.edit .mediaitem:hover {
    box-shadow: 0 0 0 2px #fff, 1px 3px 10px #000;
}

.meld.edit .mediaitem.selected {
    box-shadow: 0 0 0 1px #000, 0 0 0 6px #08f, 1px 3px 10px #000;
}

.meld.edit .mediapanel.singlepick .mediaitem.used:not(.selected) {
    filter: saturate(0.3);
}

.meld.edit .mediapanel.singlepick .mediaitem.used:not(.selected):before {
    background: radial-gradient(rgba(0,0,64,0.1), rgba(0,0,32,0.9));
    color: rgba(255,255,255,0.85);
}

.meld.edit .mediapanel.singlepick .mediaitem.used:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: '\2713';
    color: #fff;
    font-size: 70px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-shadow: 0 0 4px #000, 0 0 8px #000, 0 0 16px #000;
}

.meld.edit .mediapanel.singlepick .mediaitem.selected:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: '\2713';
    color: #fff;
    background: #08f;
    border-radius: 2em;
    clip-path: inset(0.25em 0 0 0.25em);
    font-size: 32px;
    font-weight: 700;
    position: absolute;
    top: -0.35em;
    left: -0.35em;
    height: 1.5em;
    width: 1.5em;
    text-shadow: none;
}

.meld.edit .mediapanel.multipick .mediaitem.selected {
    cursor: ns-resize;
}

.meld.edit .mediapanel.multipick .selected .multisort {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: #08f;
    border-radius: 2em;
    clip-path: inset(0.82em -1em -1em 0.82em);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15em;
    position: absolute;
    top: -0.9em;
    left: -0.9em;
    padding: 0.5em 0 0 0.5em;
    height: 2.6em;
    width: 2.6em;
    user-select: none;
    box-shadow: 0.03em 0.03em 0.1em #000
}

.meld.edit .mediapanel.multipick .multisort .sub {
    font-size: 0.45em;
    line-height: 1.15em;
}

.meld.edit .mediapanel.multipick .mediaitem.selected .multiclose {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: #08f;
    border-radius: 2em;
    clip-path: inset(-1em 0.6em 0.6em -1em);
    font-size: 20px;
    font-weight: 400;
    position: absolute;
    bottom: -0.7em;
    right: -0.7em;
    height: 1.6em;
    width: 1.6em;
    padding: 0 0.35em 0.35em 0;
    box-shadow: -0.03em -0.03em 0.1em #000
}

.meld.edit .mediapanel .multisort,
.meld.edit .mediapanel .multiclose {
    display: none;
}

.meld.edit .select-handle {
    display: none;
    outline: 2px dashed #08f;
    position: absolute;
    user-select: none;
    z-index: 5;
}

.meld.edit .select-handle.rotating .sz {
    display: none;
}

.meld.edit .select-handle.rotating .rotate {
    opacity: 0.3;
}

.meld.edit .select-handle.sizing .rotate {
    display: none;
}

.meld.edit .select-handle.cropping {
    background: #205080;
}

.meld.edit .select-handle.cropping .rotate {
    display: none;
}

.meld.edit .select-handle.cropping .crop {
    display: block !important;
    background-color: #fff;
    background-repeat: no-repeat;
}

.meld.edit .select-handle.cropping .h-edge, .meld.edit .select-handle.cropping .v-edge {
    display: none !important;
}

.meld.edit .select-handle .corner {
    background: #fff;
    border-radius: 10px;
    cursor: nwse-resize;
    height: 12px;
    margin: -7px;
    outline: 2px solid #555;
    position: absolute;
    width: 12px;
}

.meld.edit .select-handle .corner.op {
    cursor: nesw-resize;
}

.meld.edit .select-handle .h-edge {
    background: #fff;
    border-radius: 2px;
    cursor: ns-resize;
    height: 6px;
    margin: -4px -10px;
    outline: 2px solid #555;
    position: absolute;
    width: 20px;
}

.meld.edit .select-handle .v-edge {
    background: #fff;
    border-radius: 2px;
    cursor: ew-resize;
    height: 20px;
    margin: -10px -4px;
    outline: 2px solid #555;
    position: absolute;
    width: 6px;
}

.meld.edit .select-handle .rotate {
    background: #fff;
    border-radius: 20px;
    color: #777;
    cursor: move;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    margin: -42px -11px;
    outline: 2px solid #888;
    padding: 5px;
    position: absolute;
    width: 12px;
}

.meld.edit .content .rotate-tip {
    background: #111;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    padding: 2px 7px;
    position: absolute;
    z-index: 10;
}

.meld.edit .select-handle .crop {
    display: none;
    outline: 2px dotted #08f;
    position: absolute;
    z-index: 2;
}

.meld.edit .select-handle .crop .tri {
    fill: #fff;
    height: 25px;
    position: absolute;
    stroke: #555;
    stroke-width: 0.09rem;
    width: 25px;
    margin: -12px;
}

.meld.edit .select-handle .txt-inner {
    outline: 2px dotted #0cf;
}

.meld.edit .crop-screen {
    background: rgba(32, 80, 128, 0.64);
    position: absolute;
    z-index: 2;
}

.meld.edit .page::after {
    font-family: Arial, sans-serif;
    font-size: 0.75em;
    font-variant: all-small-caps;
    opacity: 0.1;
    position: absolute;
    right: 0;
    top: 0.1em;
    transform: rotate(90deg) translateY(-6.1em);
    transform-origin: 0 0;
    width: 5em;
    z-index: -1;
}

.meld.edit .slideshowcounter {
    position: absolute;
    bottom: -1em;
    left: 0;
    width: 1em;
    opacity: 0.2;
    margin-left: -0.5em;
    font-size: 0.22em;
    text-align: center;
    height: 1em;
    line-height: 1em;
}

.meld.edit.simple .select-handle.txtediting {
    display: flex;
}

.meld.edit.simple .select-handle.txtediting .token {
    background: rgba(0,120,240,0.25);
}

.meld.mf-colist-show .item.mf-colist-hide { display: none; }
.meld.mf-photo-show .item.mf-photo-hide { display: none; }
.meld.mf-cophoto-show .item.mf-cophoto-hide { display: none; }
.meld.mf-group-show .item.mf-group-hide { display: none; }
.meld.mf-cogroup-show .item.mf-cogroup-hide { display: none; }
.meld.mf-logo-show .item.mf-logo-hide { display: none; }
.meld.mf-cologo-show .item.mf-cologo-hide { display: none; }
.meld.mf-mlsbrand-show .item.mf-mlsbrand-hide { display: none; }
.meld.mf-mlsaddy-show .item.mf-mlsaddy-hide { display: none; }

.meld.mf-colist-hide .item.mf-colist-show { display: none; }
.meld.mf-photo-hide .item.mf-photo-show { display: none; }
.meld.mf-cophoto-hide .item.mf-cophoto-show { display: none; }
.meld.mf-group-hide .item.mf-group-show { display: none; }
.meld.mf-cogroup-hide .item.mf-cogroup-show { display: none; }
.meld.mf-logo-hide .item.mf-logo-show { display: none; }
.meld.mf-cologo-hide .item.mf-cologo-show { display: none; }
.meld.mf-mlsbrand-hide .item.mf-mlsbrand-show { display: none; }
.meld.mf-mlsaddy-hide .item.mf-mlsaddy-show { display: none; }

.meld.edit .page-1::after { content: 'Page 1'; }
.meld.edit .page-2::after { content: 'Page 2'; }
.meld.edit .page-3::after { content: 'Page 3'; }
.meld.edit .page-4::after { content: 'Page 4'; }
.meld.edit .page-5::after { content: 'Page 5'; }
.meld.edit .page-6::after { content: 'Page 6'; }
.meld.edit .page-7::after { content: 'Page 7'; }
.meld.edit .page-8::after { content: 'Page 8'; }
.meld.edit .page-9::after { content: 'Page 9'; }
.meld.edit .page-10::after { content: 'Page 10'; }


.meld.edit.mediatype-0 .edit-hide-m0,
.meld.edit.mediatype-1 .edit-hide-m1,
.meld.edit.mediatype-2 .edit-hide-m2,
.meld.edit.mediatype-3 .edit-hide-m3,
.meld.edit.mediatype-4 .edit-hide-m4,
.meld.edit.mediatype-5 .edit-hide-m5,
.meld.simple.mediatype-0 .simple-hide-m0,
.meld.simple.mediatype-1 .simple-hide-m1,
.meld.simple.mediatype-2 .simple-hide-m2,
.meld.simple.mediatype-3 .simple-hide-m3,
.meld.simple.mediatype-4 .simple-hide-m4,
.meld.simple.mediatype-5 .simple-hide-m5,
.meld.simple .simple-hide {
    display: none !important;
}

.meld.singlepage .singlepage-hide {
    display: none !important;
}

.meld.videotype .videotype-hide {
    display: none !important;
}

.meld:not(.videotype) .videotype-show {
    display: none !important;
}

.meld:not(.adminuser) .adminuser-show {
    display: none !important;
}

.meld.edit .tool .colorpickerpanel {
    padding-left: 1.5em !important;
}

.meld.edit .droptarget::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #f0c 50%, transparent 0) repeat-x, linear-gradient(90deg, #f0c 50%, transparent 0) repeat-x, linear-gradient(0deg, #f0c 50%, transparent 0) repeat-y, linear-gradient(0deg, #f0c 50%, transparent 0) repeat-y;
    background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: dropTargetMove .5s infinite linear;
}

.meld.edit.vert {
    flex-direction: column;
}

.meld.edit.mobile .mobile-hide {
    display: none !important;
}

.meld.edit.vert .widgets {
    flex-direction: row;
    justify-content: space-around;
}

.meld.edit.vert.mobile .widgets .widget {
    margin: 0;
}

.meld.edit.vert.mobile .widgets .widget .cap {
    display: none;
}

.meld.edit.vert .widgets .layerstack, .meld.edit.mobile .widgets .layerstack  {
    display: none;
}


.meld.edit.vert .bar {
    max-width: 100vw;
}

.meld.edit.vert .bar .win {
    position: fixed;
    top: 6.1em;
    left: 0;
    right: auto;
}

.meld.edit.vert .content-parent {
    flex-direction: column;
}

.meld.edit.mobile:not(.vert) .widgets {
    font-size: 0.8em;
}

.meld.edit.mobile:not(.vert) .bar {
    max-width: calc(100vw - 70px);
}

.meld.edit.mobile:not(.vert) .mediapanel {
    width: 9em;
}

.meld.edit.mobile:not(.vert) .mediapanel .mediaitem {
    width: 7em;
    height: 5em;
    margin: 0.5em 1em;
}

.meld.edit.vert .mediapanel.enabled {
    width: 100%;
    height: 0em;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    transition: height 0.3s;
}

.meld.edit.vert .mediapanel.enabled .mediapanel-inner,
.meld.edit.vert .mediapanel.enabled.singlepick,
.meld.edit.vert .mediapanel.enabled.multipick {
    height: 14em;
    width: 100%;
}

.meld.edit.vert.mobile .mediapanel.enabled {
    height: 0;
}

.meld.edit.vert.mobile .mediapanel.enabled .mediapanel-inner,
.meld.edit.vert.mobile .mediapanel.enabled.singlepick,
.meld.edit.vert.mobile .mediapanel.enabled.multipick {
    height: 7.5em;
}

.meld.edit.vert .mediapanel .mediaitem {
    display: inline-block;
    margin: 0.5em;
}

.meld.edit.vert.mobile .mediaitem {
    position: relative;
    width: 7em;
    height: 6em;
    margin: 0.5em;
}

.meld.edit.mobile .bar .shapelist svg {
    width: 3.5em;
    height: 3.5em;
}

.meld .item.img {
    box-shadow: var(--stroke-color) 0 0 var(--stroke-softness) var(--stroke-thickness), var(--shadow-colorfull) var(--shadow-x) var(--shadow-y) var(--shadow-size);
    overflow: hidden;
}

.meld .item.shp svg g.svgshadow {
    display: none;
    fill: var(--shadow-colorfull);
    filter: blur(var(--shadow-size));
    transform: translate(var(--shadow-x),var(--shadow-y));
}
.meld .item.shp.shadow svg g.svgshadow {
    display: inline;
}

.meld .item.shp svg g.svgstroke {
    display: none;
    stroke: var(--stroke-color);
    stroke-width: var(--stroke-thickness);
    stroke-linejoin: var(--stroke-linejoin);
    filter: blur(var(--stroke-softness));
}

.meld .item.shp.stroke svg g.svgstroke {
    display: inline;
}

.meld .xygrid, .meld .simplebox {
    outline: 1px solid #ccc;
    border-radius: 3px;
}

.meld .xygrid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 100%;
    border-left: 2px dashed #eee;
    margin-left: -1px;
}

.meld .xygrid::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 0;
    border-top: 2px dashed #eee;
    margin-top: -1px;
}

.meld .xygrid > div {
    border-radius: 10px;
    height: 18px;
    width: 18px;
    margin: -10px;
}

.meld .xygrid .ui-slider-handle {
    opacity: 0;
}

.meld .xygrid:hover .ui-slider-handle {
    opacity: 1;
}

.meld .colornodes .ui-slider-handle {
    border: 1px solid #555;
    background: url(/art/trans.png) !important;
    --node-col: #f8f8f8;
}

.meld .colornodes .ui-slider-handle::before {
    content: '';
    background: var(--node-col);
    border-radius: 1em;
    box-shadow: 0 0 0 1px #555;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.meld .colornodes .ui-slider-handle.active {
    outline: 3px solid #08f;
    outline-offset: 2px;
}

.meld .preview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    color: #fff;
    z-index: 9999;
}

.meld .preview .close {
    cursor: pointer;
    position: absolute;
    top: 0.65em;
    right: 1em;
    user-select: none;
    font-size: 1.25em;
}

.meld .preview .frame {
    position: absolute;
    top: 3em;
    left: 3em;
    right: 3em;
    bottom: 3em;
    background: #000;
}

.meld .preview .frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 1px solid #ccc;
}

.playbar {
    display: flex; 
    background: rgba(0,0,0,0.85); 
    box-shadow: 0 0 10vh #000; 
    color: #fff; 
    font-size: max(20px, min(50px, 1em)); 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height: 1em; 
    user-select: none;
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 100; 
}

.playbar:hover {
    opacity: 1 !important;
}

.playbar .btn {
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 1em; 
    border-right: 1px solid rgba(0,0,0,0.7);
    cursor: pointer;
}

.playbar .btn.left {
    border-right: 1px solid rgba(0,0,0,0.7);
}

.playbar .btn.right {
    border-left: 1px solid rgba(0,0,0,0.7);
}

.playbar .btn:hover {
    background: rgba(255,255,255,0.1);
}

.playbar .progress {
    flex-grow: 1; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playbar .progress > div {
    height: 1px;
    width: calc(100% - 1em);
    position: relative;
}

.playbar .progress > div > span {
    background: rgba(255,255,255,0.3); 
    border-radius: 0.3em;
    display: block;
    height: 0.1em;
    margin: -0.05em;
    box-shadow: 0 0 0.2em rgba(0,0,0,0.3);
}

.playbar .progress .bar {
    width: 0%;
    position: absolute;
}

.playbar .progress .bar > div {
    background: rgba(255,255,255,0.7); 
    border-radius: 0.3em;
    display: block;
    height: 0.1em;
    margin: -0.05em;
}

.playbar .progress .caret {
    display: block;
    background: #fff;
    border-radius: 0.3em;
    height: 0.36em;
    width: 0.36em;
    position: absolute;
    top: 0;
    left: 0;
    margin: -0.18em;
    box-shadow: 0 0 0.25em #000;
    opacity: 0;
    transform: scale(0.25);
    transition: opacity 0.3s, transform 0.3s;
    cursor: ew-resize;
}

.playbar .time {
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-family: Lato, sans-serif;
    font-size: 0.3em;
    flex-basis: 6.8em;
}

.playbar:hover .progress .caret, .playbar .progress .caret.ui-draggable-dragging {
    opacity: 1;
    transform: scale(1);
}

@keyframes fadein {
    0% { opacity: 0; }
    40% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes dropTargetMove {
    100% {
        background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
    }
} 

@keyframes shake {
    0% { transform: translateX(0); }
    10% { transform: translateX(-3px); }
    30% { transform: translateX(4px); }
    50% { transform: translateX(-5px); }
    70% { transform: translateX(4px); }
    90% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}