#graffitiScreen,
#graffitiContainer {
    /* position: absolute; <-- this causes mix blend mode not to work. it's not needed anyway.
    top: 0;
    left: 0;*/
    pointer-events: none;
    width: 100%;
    height: 100%;
}

#graffitiContainer {
    z-index: var(--z-index-graffiti);
}

#graffitiScreen {
    z-index: var(--z-index-graffiti-debug-overlay);
}

#graffitiScreen svg {
    position: absolute;
    background-color: #8004;
    transition: left var(--move-duration), top var(--move-duration);
    pointer-events: none;
    /*     width:100%;
    height:100%;     */
}

#graffitiScreen path {
    fill: #0cc4;
}

#graffitiScreen path.active {
    fill: #0cc9;
    stroke: #0aa;
    stroke-width: 6px;
}

#graffitiScreen .regionLabel {
    text-anchor: middle;
    /* https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle */
    dominant-baseline: middle;
    fill: #0cc;
}

#graffitiScreen .regionLabel.active {
    fill: #0ff;
    font: bold 30px sans-serif;
}

#graffitiContainer .graffitiItemContainer {
    position: absolute;
    transition: left var(--move-duration), top var(--move-duration);
    user-select: none;
    --rot: 0deg;
    transform: rotateZ(var(--rot)) translate(-50%, -50%);
}


#graffitiContainer .graffitiModerationCtrl {
    position: absolute;
    transition: left var(--move-duration), top var(--move-duration);
    user-select: none;
    --rot: 0deg;
    transform: rotateZ(var(--rot)) translate(-50%, -50%);
    background-color: #0008;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    pointer-events: all;
    display: flex;
}

#graffitiContainer .graffitiModerationCtrl i {
    font-size: 28px;
    color: #0aa;
}

#graffitiContainer .graffitiModerationCtrl:hover i {
    color: #0ff;
}

#graffitiContainer.admin .graffiti {
    pointer-events: all;
}


#graffitiContainer .graffiti:hover {
    cursor: default;
}



#graffitiContainer .graffiti {
    max-width: 200px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -.5px;
    position: relative;
    pointer-events: none;
}


#graffitiContainer .graffiti a,
#graffitiContainer .graffiti a:visited,
#graffitiContainer .graffiti a:active,
#graffitiContainer .graffiti a:link {
    color: unset;
    text-decoration: underline;
    pointer-events: all;
}


#graffitiContainer .graffiti .graffitiContent.text {
    text-shadow: 0 0 8px #000, 0 0 3px black, 0 0 2px black;
}

#graffitiContainer .graffiti .graffitiContent.image {
    --size: 100px;
    width: var(--size);
    height: var(--size);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(3px -3px 5px black) grayscale(50%);
}

.dragGraffitiScreen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #0008;
    color: #0cc;
    font-weight: bold;
    font-size: 64px;
    user-select: none;
    pointer-events: none;
    z-index: var(--z-index-drag-graffiti-screen);
}


#graffitiContainer .graffiti .graffitiContent.text {
    line-height: 24px;
    font-weight: normal;
    letter-spacing: normal;
    font-size: 36px;
}

#graffitiContainer .graffiti .graffitiContent p {
    /* markdown */
    margin: 0;
}

.graffitiUserCtrl .mygraffiti {
    background-color: black;
    margin-bottom: 10px;
    border-radius: 9px;
    padding: 7px 15px;
    display: flex;
    flex-direction: column;
}

.graffitiUserCtrl .mygraffiti .pinIndicator i {
    color: #4f4;
    font-size: 30px;
}

.graffitiUserCtrl .mygraffiti .content {
    font-family: monospace;
    color: #ccc;
    font-size: larger;
}

.graffitiUserCtrl .mygraffiti .controls {
    display: flex;
    justify-content: space-between;
    visibility: visible;
}

#graffitiContainer .graffitiItemContainer .graffiti.hidden .graffitiContent {
    visibility: hidden;
}


#graffitiContainer .graffitiItemContainer.straight {
    transform: none;
}


#graffitiContainer .graffitiItemContainer .graffiti.straight {
    transform: rotateZ(0) translate(-50%, -50%);
}

#graffitiContainer .graffitiItemContainer .graffiti.sansfont .graffitiContent {
    font-family: 'Overpass', sans-serif;
}

#graffitiContainer .graffitiItemContainer .graffiti.monofont .graffitiContent {
    font-family: monospace;
}

#graffitiContainer .graffitiItemContainer .graffiti.dynamicFontSize .graffitiContent {
    font-size: var(--size);
}

#graffitiContainer .graffitiItemContainer .graffiti.vanillaInfoBox {
    max-width: none;
    border: 2px solid #088;
    background-color: #3088;
    padding: 6px;
    border-radius: 4px;
    transform: none;
}

#graffitiContainer .graffitiItemContainer.vanillaInfoBox {
    transform: rotateZ(0) translate(-50%, -50%);
}

#graffitiContainer .graffitiItemContainer .graffiti.vanillaInfoBox .text {
    font-family: 'Overpass', sans-serif;
    line-height: 15px;
    font-weight: normal;
    letter-spacing: normal;
    font-size: 16px;
}



#graffitiContainer .graffitiItemContainer .graffiti.performersOnly {}

#graffitiScreen .roomRegionPointHandle {
    position: absolute;
    --size: 18px;
    --y: 0px;
    --x: 0px;
    width: var(--size);
    height: var(--size);
    top: var(--y);
    left: var(--x);
    background-color: #ff04;
    pointer-events: all;
    cursor: pointer;
    transition: left var(--move-duration), top var(--move-duration);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid #ff0;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#graffitiScreen .roomRegionPointHandle .inner {

    background-color: white;
    --size: 3px;
    width: var(--size);
    height: var(--size);
}

#graffitiScreen .roomRegionPointHandle.selected {
    --size: 36px;
    border: 4px solid #f80;
    background: none;
}


#graffitiScreen .roomRegionPointHandle.selected .inner {

    background-color: white;
    --size: 1px;
}

.dfmodal.roomRegionPointEditor {
    right: 0;
}



.dfmodal.roomRegionPointEditor .positionCtrl {
    display: flex;
    align-items: center;
}

.dfmodal.roomRegionPointEditor fieldset button {
    border: 0;
}

.dfmodal.roomRegionPointEditor .vertbuttons {
    display: flex;
    flex-direction: column;
}


.dfmodal.roomRegionPointEditor button:hover {
    color: #0aa;
    background-color: #055;
}



.dfmodal.roomRegionPointEditor button.active {
    color: #0cc;
    background-color: #066;
}


#graffitiContainer .graffiti.opacityRX {
    opacity: calc(100% * var(--RX));
}

#graffitiContainer .graffiti.opacityRY {
    opacity: calc(100% * var(--RY));
}

#graffitiContainer .graffiti.opacityRZ {
    opacity: calc(100% * var(--RZ));
}

#graffitiContainer .graffiti.opacityRW {
    opacity: calc(100% * var(--RW));
}

#graffitiContainer .graffiti.opacityRV {
    opacity: calc(100% * var(--RV));
}




#graffitiContainer .graffitiItemContainer .graffiti.solidColor {
    /* filter: grayscale(100%) sepia(100%) saturate(10) hue-rotate(calc(360deg * var(--RX))) saturate(var(--RY)); */
    filter: brightness(10) sepia(100%) saturate(10) hue-rotate(calc(360deg * var(--RS))) saturate(var(--RT)) brightness(var(--RU));
}





@keyframes graffitiSolidColorHueRotateAnim {
    0% {
        filter: brightness(10) sepia(100%) saturate(10) hue-rotate(0deg) saturate(var(--RT)) brightness(var(--RU));
    }

    100% {
        filter: brightness(10) sepia(100%) saturate(10) hue-rotate(360deg) saturate(var(--RT)) brightness(var(--RU));
    }
}


#graffitiContainer .graffiti.solidColorHueAnim .graffitiContent.image {
    animation: graffitiSolidColorHueRotateAnim calc(50s * var(--RS)) infinite;
    animation-timing-function: linear;
}



#graffitiContainer .graffitiItemContainer.softLight {
    mix-blend-mode: soft-light;
}


#graffitiContainer .graffitiItemContainer.overlay {
    mix-blend-mode: overlay;
}


/* moderation menu */
.popUpDialog.graffitiListPopup {
    border-radius: 0;
    padding: 0;
    width: auto;
margin-right: 100px;max-height: 90vh;overflow-y: scroll;}

.popUpDialog.graffitiListPopup ul.modGraffitiList {
    margin: 0;
    padding: 0;
display: flex;/* flex-wrap: wrap; */flex-direction: column;}


.popUpDialog.graffitiListPopup ul.modGraffitiList div.column {
    display: flex;
    flex-direction: column;
}

.popUpDialog.graffitiListPopup ul.modGraffitiList div.row {
    display: flex;
    align-items: center;
}

.popUpDialog.graffitiListPopup ul.modGraffitiList .content {

    background-color: black;
    padding: 6px 10px;
    margin: 6px 10px;
    ;
    color: #999;
    max-width: 500px;
overflow-x: auto;}

.popUpDialog.graffitiListPopup ul.modGraffitiList>li {
    background-color: #333;
    margin: 4px;
    /* vertical-align: middle; */
    display: flex;
padding: 3px;}


.popUpDialog.graffitiListPopup ul.modGraffitiList>li:hover {
    background-color: #044;
}

.popUpDialog.graffitiListPopup ul.modGraffitiList img {
    max-height: 114px;
}

.popUpDialog.graffitiListPopup .buttonlike {
    cursor: pointer;
}

.popUpDialog.graffitiListPopup .modGraffitiList .graffitiPin {
    color: #444;
}

.popUpDialog.graffitiListPopup .modGraffitiList .graffitiPin i,
.popUpDialog.graffitiListPopup .modGraffitiList .graffitiCtrl i {
    font-size: 24px;
}

.popUpDialog.graffitiListPopup .modGraffitiList .graffitiPin.enabled {
    color: #ff0;
}

.popUpDialog.graffitiListPopup .modGraffitiList .graffitiCtrl:hover,
.popUpDialog.graffitiListPopup .modGraffitiList .graffitiPin:hover {
    color: #f80;
}


.popUpDialog.graffitiListPopup .isEnabled {

    background-color: #333;
    padding: 3px 8px;
    /* vertical-align: middle; */
    color: #666;
    margin: 0px 5px;
}

.popUpDialog.graffitiListPopup .isEnabled.enabled {

    color: #0aa;
    background-color: #055;
    border: 1px solid #0cc;
    border-radius: 4px;
}


.popUpDialog.graffitiListPopup .isEnabled:hover {
    background-color: #066;
}


.popUpDialog.graffitiListPopup .modGraffitiList .user {

    display: inline-flex;
}

.popUpDialog.graffitiListPopup .modGraffitiList .user .caption {

    color: #999;
    margin: 0px 4px;
}

.popUpDialog.graffitiListPopup .modGraffitiList .user .userName {

    font-weight: bold;
    color: #0cc;
    margin: 0 4px;
}