/*
This has some essential styling info for the group of 
html elements that comprise a wixie canvas.  I don't think
these styles will really need to (should) change even if we change the 'skin' styling,
which is why I have them in a separate document. 
*/

.stage {
    position: relative;
}

.wixie_canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1024px;
    height: 768px;
    transform: scale(.75, .75); /** will be adjusted programmatically when window resizes */
    transform-origin: 0 0;
    overflow: hidden;
    visibility: hidden; /* hide page pending load */
}

.background_layer, .paint_layer, .objects_layer, .drawing_layer, .animation_path_layer, .object_connection_layer, .canvas_tools {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.scrollbar {
    position:absolute;
    transform-origin: top left;
    top: 0px;
    left: 0px;
    display:none;
}

.scrollbar.vertical {
    width: 20px;
    height: 100%;
}

.scrollbar.horizontal {
    width: 100%;
    height: 20px;
}

.scrollthumb {
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    cursor:pointer;
}

.background_layer {
    z-index: 0;
}

.type-whiteboard .background_layer {
    display: none;
}

.type-whiteboard .playing .background_layer {
    display: unset;
}

.type-whiteboard .objects_layer {
    border:1px solid var(--darkgrey);
}

.type-whiteboard .playing .objects_layer {
    background-image:unset !important;
}

.type-whiteboard .paint_layer {
    width: unset;
    height: unset;
    display:none;
}

.type-whiteboard .scrollbar.vertical {
    height: 768px;
}

.type-whiteboard .scrollbar.horizontal {
    width: 1024px;
}

.paint_layer {
    z-index: 1;
}

/* z-index 2 is reserved for paint layer temp canvas */

.drawing_layer {
    z-index: 3;    
}

.objects_layer {
    z-index: 4;
}

.scrollbar {
    z-index: 5;
}

.animation_path_layer, .object_connection_layer {
    z-index: 6;
}

.objects_layer > * {
    position: absolute;
    left: 0px;
    top: 0px;
}
#convertingLBL {
    visibility:hidden; 
    font-size: 18px; 
    position: absolute;
    top: 20px;
    left: 20px;
}


/*
 Default styling for all canvas objects
*/

#wixie_canvas a, [id^="canvas_"] a, [data-link] {
    color: #0072ac;
    text-decoration:none;
}

#wixie_canvas div[data-link][data-locked="true"],
#wixie_canvas div[data-playtts="true"][data-locked="true"]{
    cursor:pointer;
}

#wixie_canvas div[data-playtts="true"][data-locked="true"]:hover {
    filter: brightness(90%);
}

#wixie_canvas div[data-playtts="true"][data-locked="true"]:active {
    filter: brightness(80%);
}

#wixie_canvas a, [id^="canvas_"] a {
    cursor: pointer;
}

#wixie_canvas a:hover, [id^="canvas_"] a:hover, [data-link] {
    text-decoration: none;
}

#wixie_canvas p, [id^="canvas_"] p {
    margin: 0px;
    word-break: break-word;
}

#wixie_canvas img, [id^="canvas_"] img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

#wixie_canvas span, [id^="canvas_"] span {
  display: inline-block;
  white-space: pre-wrap;
  background-color: inherit;
  caret-color: black;
}

#wixie_canvas div.urlObject[data-locked="true"] {
    cursor:pointer;
}

#wixie_canvas div.urlObject,
[id^="canvas_"] div.urlObject {
    border-radius: 8px;
    border: 2px solid lightgrey;
    box-sizing: border-box;
    overflow: hidden;
}

/* bug 33284 */
.ipad #wixie_canvas div.urlObject,
.ipad [id^="canvas_"] div.urlObject,
.iphone #wixie_canvas div.urlObject,
.iphone [id^="canvas_"] div.urlObject,
.safari #wixie_canvas div.urlObject,
.safari [id^="canvas_"] div.urlObject{
    overflow: visible;
}

.printPage [id^="canvas_"] div.urlObject p {
    font-size: 4pt;
    font-family: sans-serif;
    color: #3c3c3c;
    letter-spacing: normal;
}

.printPage .placeholderObjectText p {
    display:none;
}

#wixie_canvas .urlObjectTitle,
[id^="canvas_"] .urlObjectTitle {
    position: absolute;
    bottom:0px;
    width: 100%;
    background-color: rgba(255, 255, 255, .7);
    text-align: center;
    overflow: hidden;
}

#wixie_canvas div.placeholderObject,
[id^="canvas_"] div.placeholderObject {
    box-sizing: border-box;
    overflow: hidden;
}

.printPage [id^="canvas_"] div.urlObject p {
    font-size: 4pt;
    font-family: sans-serif;
    color: #3c3c3c;
    letter-spacing: normal;
}

#wixie_canvas .placeholderObjectText,
[id^="canvas_"] .placeholderObjectText,
#wixie_canvas .placeholderObjectIcon,
[id^="canvas_"] .placeholderObjectIcon,
#wixie_canvas .placeholderObjectShape,
[id^="canvas_"] .placeholderObjectShape {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background-color: transparent;
}

#wixie_canvas .placeholderObjectText {
    align-items: flex-end;
    display: none;
}

#wixie_canvas .placeholderObjectText p {
    line-height:normal;
    margin:0 5px 5px;
    color:var(--primary-color-dark);
}

.placeholderObjectText {
    container-type: inline-size;
}

@container (max-width: 200px) {
  .placeholderObjectText p {
    display: none;
  }
}

.player .placeholderObjectText p {
    display:none;
}

.placeholderObjectShape canvas {
    height: 100%;
    width: 100%;
    fill: var(--lightgrey);
}

.placeholderObjectIcon svg {
    height: 100%;
    width: 100%;
    max-width: 80px;
    max-height: 80px;
    fill: var(--primary-color-dark);
}


/* for our hidden clipboard element */
.hiddenForClipboard {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    display: block;
    font-size: 1;
    z-index: -1;
    color: transparent;
    background: transparent;
    overflow: hidden;
    border: none;
    padding: 0;
    resize: none;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
    /* Because for user-select:none, Safari won't allow input */
}

video::-webkit-media-controls-timeline {
    display: none;
}

/** SELECTION HANDLES **/

.notools .handle_protected,
.notools .handle_locked{
    display:none!important;
}