.annotation.in-text{cursor:pointer;line-height:12px;text-decoration:underline}.annotation.popup{color:var(--color-otto-grey);opacity:0;overflow:hidden;padding:5px!important;pointer-events:none;position:absolute!important;transition:opacity .2s ease 0s;vertical-align:bottom!important}.annotation.popup,.annotation.popup *{font-family:ValentineLL,monospace!important;font-size:11px!important;font-variant-ligatures:none!important;letter-spacing:normal!important;line-height:14px!important}@media only screen and (min-width:800px){.annotation.popup{transform:translate(-50%,-1px)}.annotation.popup.above{transform:translate(-50%,calc(-100% + 1px))!important}}@media only screen and (max-width:799px){.annotation.popup{transform:translate(-50%,-1px)}.annotation.popup.above{transform:translate(-50%,calc(-100% + 1px))!important}}.annotation.popup.audio{height:auto;width:auto}.annotation.popup.audio .inner{background-color:var(--color-otto-grey-light);display:flex!important;height:70px!important;max-width:100%!important;position:relative!important;white-space:nowrap;width:400px!important}.annotation.popup.audio .inner .clock{display:inline-block;position:relative;width:60px}.annotation.popup.audio .inner .clock>span{position:absolute;text-align:center;top:calc(50% + 1px);transform:translateY(-50%);width:100%}.annotation.popup.audio .inner .play{display:inline-block;height:70px;position:relative;vertical-align:top;width:60px}.annotation.popup.audio .inner .play:after,.annotation.popup.audio .inner .play:before{content:"";--play-button-height:28px;box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.annotation.popup.audio .inner .play:after{border-color:transparent transparent transparent var(--color-otto-grey);border-style:solid;border-width:calc(var(--play-button-height)/2) 0 calc(var(--play-button-height)/2) calc(var(--play-button-height)/1.25);height:var(--play-button-height);width:calc(var(--play-button-height)/1.25)}.annotation.popup.audio .inner .play:before{border-left:5px solid var(--color-otto-grey);border-right:5px solid var(--color-otto-grey);height:calc(var(--play-button-height) - 4px);margin-left:-1px;width:calc((var(--play-button-height) - 2px)/1.25 - 3px)}.annotation.popup.audio .inner .play.playing:after,.annotation.popup.audio .inner .play:not(.playing):before{display:none}.annotation.popup.audio .inner .timeline{display:inline-block;flex-grow:1;height:70px;margin-left:-3px;position:relative;vertical-align:top}.annotation.popup.audio .inner .timeline .track{height:40px;overflow:hidden;pointer-events:none;position:absolute;top:15px;white-space:nowrap;width:100%}.annotation.popup.audio .inner .timeline .track span{border-right:1px solid var(--color-otto-grey-mid);display:inline-block;min-height:20%;pointer-events:none;vertical-align:middle}.annotation.popup.audio .inner .timeline .track span:nth-child(n+2){margin-left:3px}.annotation.popup.audio .inner .timeline .track span.active{border-right:1px solid var(--color-otto-grey)}.annotation.popup.audio .inner .lock{display:inline-block;height:100%;position:relative;width:30px}.annotation.popup.audio .inner .lock:after,.annotation.popup.audio .inner .lock:before{border-radius:100%;content:"";left:8px;position:absolute;top:50%;transform:translate(-50%,-50%)}.annotation.popup.audio .inner .lock:before{border:1px solid var(--color-otto-grey);height:16px;width:16px}.annotation.popup.audio .inner .lock.active:after{background-color:var(--color-otto-grey);height:15px;width:15px}.annotation.popup .text{-webkit-hyphens:auto;hyphens:auto;letter-spacing:0}.annotation.popup:not(.audio) .inner{display:flex!important}.annotation.popup:not(.image){max-width:calc(100vw - var(--padding-default)*2);width:400px}.annotation.popup:not(.image).landscape,.annotation.popup:not(.image).text{width:380px}.annotation.popup:not(.image).landscape .inner{display:flex;flex-flow:column;flex-direction:column}.annotation.popup:not(.image).landscape .inner .image{height:auto!important;order:1;width:100%!important}.annotation.popup:not(.image).landscape .inner .image img{height:auto!important;width:100%!important}.annotation.popup:not(.image).landscape .inner .text{order:2}.annotation.popup:not(.image) .inner{background-color:var(--color-otto-grey-light)!important}.annotation.popup.image{line-height:0}.annotation.popup.image.portait,.annotation.popup.image.square{height:auto!important;width:300px!important}.annotation.popup.image.portait img,.annotation.popup.image.square img{height:auto!important;left:0;position:relative!important;top:0;transform:none;width:300px!important}@media only screen and (max-width:799px){.annotation.popup.image.portait,.annotation.popup.image.portait img,.annotation.popup.image.square,.annotation.popup.image.square img{height:auto!important;width:60vw!important}}.annotation.popup.image.landscape,.annotation.popup.image.landscape img{height:auto!important;width:350px!important}@media only screen and (max-width:799px){.annotation.popup.image.landscape,.annotation.popup.image.landscape img{height:auto!important;width:60vw!important}.annotation.popup.image.landscape img,.annotation.popup.image.landscape img img{height:auto!important;position:relative!important;width:60vw!important}}.annotation.popup:not(.audio){z-index:9999}.annotation.popup .text{flex-grow:1;font-size:11px;line-height:14px;margin:0;max-width:none;overflow-x:hidden;overflow-y:scroll;padding:calc(var(--padding-default)/2 - 1px) calc(var(--padding-default)/2 + 1px) calc(var(--padding-default)/2 - 1px)!important}.annotation.popup .text p:first-child{margin:0}.annotation.popup .text .half-line{height:calc(var(--padding-default)/2)}.annotation.popup .text *{font-weight:inherit}.annotation.popup .image{line-height:0;position:relative!important}@media only screen and (max-width:799px){.annotation.popup .image{aspect-ratio:auto!important}}.annotation.popup .image img{float:left!important;height:200px!important;margin:0!important;position:relative!important;width:auto!important}@media only screen and (max-width:799px){.annotation.popup .image img{height:161px!important}}.annotation .popup.locked,.annotation.locked .popup{opacity:1;pointer-events:all}@media (hover:hover){.annotation:hover .popup{opacity:1;pointer-events:all}}.annotation .popup.hover{opacity:1;pointer-events:all}.textile .content.mobile .annotation .popup{left:50%!important;margin-top:-2px;max-width:calc(100% - var(--padding-default)*2);top:auto!important}.textile .content.mobile .annotation .popup.above{margin-top:-10px}.underline{text-decoration:underline}.selectable.active{position:relative}.selectable .add-text-cursor{cursor:pointer;left:0;pointer-events:none;position:absolute;top:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%))}.selectable .add-text-cursor div{box-sizing:border-box;display:inline-block;position:relative;transition:opacity .2s ease;vertical-align:top}.selectable .add-text-cursor div:first-child{background-color:var(--color-otto-white);border:1px solid var(--color-otto-grey);border-radius:100%;height:16px;overflow:hidden;text-indent:-9999px;transition:background-color .2s ease;width:16px}.selectable .add-text-cursor div:first-child:after,.selectable .add-text-cursor div:first-child:before{border-right:1px solid var(--color-otto-grey);content:"";height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:transform .4s ease,border-color .2s ease;width:0}.selectable .add-text-cursor div:first-child:before{transform:translate(-50%,-50%)}.selectable .add-text-cursor div:first-child:after{transform:translate(-50%,-50%) rotate(90deg)}.selectable .add-text-cursor div:nth-child(2){background-color:var(--color-otto-white);border:1px solid var(--color-otto-grey);color:var(--color-otto-grey);font-family:ValentineLL,monospace;height:15px;margin-left:calc(var(--padding-default)/2);margin-top:.5px;padding:0 2px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:11px;font-style:normal;font-weight:400;letter-spacing:0;line-height:14px}.selectable .add-text-cursor.added div{background-color:var(--color-otto-grey);color:var(--color-otto-white)}.selectable .add-text-cursor.added div:first-child:after,.selectable .add-text-cursor.added div:first-child:before{border-color:var(--color-otto-white)}.selectable .add-text-cursor.added div:first-child:before{transform:translate(-340%,-35%) rotate(135deg) scaleY(.5)}.selectable .add-text-cursor.added div:first-child:after{transform:translate(80%,-45%) rotate(225deg)}.annotation .popup *{-webkit-user-select:none;-moz-user-select:none;user-select:none}.selectable{-webkit-user-select:contain;user-select:contain}.selectable.active{cursor:none!important}.selectable.active .annotation{pointer-events:none}.selectable::-moz-selection{background-color:var(--color-otto-grey);color:#fff}.selectable::selection{background-color:var(--color-otto-grey);color:#fff}.selectable b,.selectable i,.selectable u,.selectable>.annotation .slot>span{-webkit-user-select:contain!important;user-select:contain!important}.selectable b::-moz-selection,.selectable i::-moz-selection,.selectable u::-moz-selection,.selectable>.annotation .slot>span::-moz-selection{background-color:var(--color-otto-grey);color:#fff;text-decoration:none!important}.selectable b::selection,.selectable i::selection,.selectable u::selection,.selectable>.annotation .slot>span::selection{background-color:var(--color-otto-grey);color:#fff;text-decoration:none!important}
