body {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    display:flex;
}

body.page-player.wriddle.iframe {
    height:100%;
    width:100%;
    display:block;
}

body.page-player:not(.page-editor) .toolbar h1,
h1 {
    margin: 0 auto 0 20px;
    text-align: left;
    padding: 0;
    font-size: 1.6em;
}

/* hide settings button until JIRA 614 */
.with-toolbar .toolbar_button.play_settings {
    display:none;
}

/* presentation editing panel */

.playing .palette_options.subpanel.slideshow,
.playing .history-row.header,
.playing .palette_row.flex.background-sound,
.palette_options.subpanel.slideshow,
.not-loggedin .history-row.header,
.not-loggedin .palette_row.flex.background-sound{
    display:none;
}

.playing .palette_options.subpanel.slideshow.show,
.not-loggedin .palette_options.subpanel.slideshow.show{
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 300px;
    background: var(--white);
    top: 50px;
    border: 1px solid lightgrey;
    padding: 0 0 20px 20px;
    right: 20px;
    border-radius: 0 0 8px 8px;
}

.playing .palette_row.flex,
.not-loggedin .palette_row.flex{
    margin: 13px 0 0;
    display: flex;
    align-items: center;
}

.playing .palette_options .palette_switch,
.not-loggedin .palette_options .palette_switch{
    margin-left: auto;
    margin-right: 20px;
}

.playing .palette_button:hover,
.not-loggedin .palette_button:hover{
    background-color: #e4e4e4;
}

.playing .palette_button.text,
.not-loggedin .palette_button.text{
    display: inline-flex;
    flex-direction: column;
    border-radius: 4px;
    height: unset;
    flex: 1;
    border: 1px solid transparent;
    padding: 4px;
    box-sizing: border-box;
    width: 36px;
    background-size: 26px 26px;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}

.playing .palette_button.text.selected,
.not-loggedin .palette_button.text.selected{
    border-color: var(--primary-color);
    background-color: #bccde4;
    cursor: pointer;
}

.playing .palette_button svg,
.not-loggedin .palette_button svg{
    width: 30px;
    height: 30px;
    fill: #3c3c3c;
}

.playing .palette_button.text.single svg,
.not-loggedin .palette_button.text.single svg{
    width: 36px;
    height: 36px;
}

.playing .palette_button.text.book svg,
.not-loggedin .palette_button.text.book svg{
    padding: 3px;
}

/* toolbar */

body.iphone.not-loggedin .toolbar_button.fullscreen {
    display:none;
}

.with-toolbar .toolbar_button {
    display: inline-flex;
    align-items: center;
    justify-content:center;
    padding: 2px;
    border-radius: 50%;
    box-sizing:border-box;
    margin: 0 20px 0 0;
    padding: 4px;
    height: 38px;
    width: 38px;
}

.with-toolbar .toolbar_button:hover,
.with-toolbar .toolbar_button.active{
    background: var(--white);
    border-radius: 50%;
}

.with-toolbar .toolbar_button svg {
    height: 30px;
    width: 30px;
    fill: var(--white);
    pointer-events:none;
}

.with-toolbar .toolbar_button:hover svg,
.with-toolbar .toolbar_button.active svg{
    fill: var(--primary-color);
}

.with-toolbar .translate_buttons {
    border-radius: 18px;
    height:34px;
    display:flex;
    align-items: center;
    justify-content:center;
    overflow:hidden;
    margin-right:20px;
}

.with-toolbar .toolbar_button.translate {
    height:100%;
    padding:0 8px;
    color: var(--white);
    margin-right:0;
    border-radius:0;
    border:none;
    width: unset;
}

.with-toolbar .toolbar_button.translate label,
.with-toolbar .toolbar_button.translate span.currentlang{
    margin-left:5px;
}

.with-toolbar .toolbar_button.translate_choose {
    padding-left:2px;
    height:100%;
    border-radius:0;
    margin-right:0;
    border:none;
    width: unset;
}

.with-toolbar .toolbar_button.translate:hover,
.with-toolbar .toolbar_button.translate.active {
    color: var(--primary-color);
}

.safari .toolbar_button.fullscreen,
.ipad .toolbar_button.fullscreen {
    display:none;
}

.with-toolbar .toolbar_button.fullscreen svg {
    height: 34px;
    width: 34px;
}

.with-toolbar .toolbar_login_link {
    margin:0 20px 0 0;
}

.with-toolbar .toolbar_login_link:hover {
    background-color: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.with-toolbar .toolbar_login_link:not(.remix) svg{
    display:none;
    fill:var(--white);
}

.with-toolbar .toolbar_login_link.back {
    display:flex;
    align-items:center;
    padding: 0 14px 0 4px;
    height: 38px;
    margin-left: 10px;
}

.with-toolbar .toolbar_login_link.back svg{
    display:inline-block;
    height: 28px;
    width: 28px;
}

.with-toolbar .toolbar_login_link.back:hover svg,
.with-toolbar .toolbar_login_link.remix:hover svg{
    fill:var(--primary-color);
}

/* player */

.player_container {
    width: 100%;
    height: 100%;
}

.page-projectmanager .player_container,
.page-myclasshtml .player_container,
.page-portfolio .player_container{
    width: 95%;
    height: 95%;
    margin:auto;
}

.with-toolbar .player_container {
    padding:10px;
    box-sizing: border-box;
}

body.iphone.not-loggedin.with-toolbar .player_container {
    padding:5px;
}

.player {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.control_bar {
    background-color: white;
    position: absolute;
    left: 50%;
    bottom: 5px;
    border: 1px solid lightgrey;
    border-bottom:0;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    z-index:100;
}

body:not(.lti):not(.lti-sg):not(.lti-li):not(.with-toolbar):not(.page-editor) .control_bar{  
    transform: translate(-50%, 0);
    opacity: .9;
}

/** unique name so these elements don't inherit from other stylesheets */
.hidden-p
{
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.visible
{
    visibility: visible;
/*    opacity: 0.90;  this changes the stacking context of the control buttons
and screws up their z-index when I fix the z-indices of the transition panels for bug 31547. 
if we need this opacity setting, then we'll have to jump through more, horrible, hoops (first attempt 
wasted a day trying and failing) so that both the bug remains fixed and the buttons are visible'*/
}

.control_button {
    z-index: 4;
    opacity:1;
    width:40px;
    height:40px;
    background-color: transparent;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center;
    /* grabbed from themes.css*/
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    border-radius: 4px;
    font-family: 'Roboto', Verdana, Arial, sans-serif;
    font-size: 1em;
    cursor: pointer;
    padding: 0;
    margin: 5px;
}

.control_button:hover {
    background-color: lightgrey;
}

.prev_button {
     background-image:url(/images/plyr_prev.svg);
}

.next_button {
     background-image:url(/images/plyr_next.svg);
}

.storyboard_button {
     background-image:url(/images/icon_storyboard.svg);
     background-size:32px 32px;
}

.layout_override_button {
     background-image:url(/images/icon_expand.svg);
     background-size:32px 32px;
}

.prev_button.first,
.next_button.last {
    opacity: .25;
    cursor: default;
}

.prev_button.first:hover,
.next_button.last:hover {
    background-color:transparent;
}

.control_button.prev_button.disabled,
.control_button.next_button.disabled {
    opacity:.25;
}

.control_button.prev_button.disabled:hover,
.control_button.next_button.disabled:hover {
    background-color:transparent;
}

.pause_button {
     background-image:url(/images/plyr_pause.svg);
     background-size: 32px 32px;
}

.play_button {
     background-image:url(/images/plyr_play.svg);
     background-size: 32px 32px;
}

.play_page_button,
.play_page_button_left,
.play_page_button_right {
     background-image:url(/images/themes/1/button_play_sound.svg);
     background-size: 32px 32px;
}

.wriddle .bigplay_wrapper,
.wriddle .fullscreen_button,
.wriddle .prev_button,
.wriddle .next_button{
    display:none;
}

.bigplay_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bigplay_button {
    background-image:url(/images/plyr_play.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.3);
    width: 15%;
    height: 20%;
    background-size: 80%;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    margin: 15px;
}

.bigplay_button:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.fullscreen_button {
     background-image:url(/images/plyr_enter_full.svg);    
     background-size: 32px 32px;
     
}

.fullscreenexit_button {
     background-image:url(/images/icon_close_fullscreen.svg);
     background-size: 32px 32px;
}

.playerexit_button {
     background-image:url(/images/icon_close.svg);
     background-size: 32px 32px;
}

.wriddle-title {
    position:absolute;
    z-index: 5;
    top: 10px;
    left: 10px;
    font-size:2em;
    width:800px;
    height:600px;
    text-align:center;
    font-family: 'Lexend Deca', 'Roboto', verdana, helvetica, arial, sans-serif;
}

body:not(.wriddle) .wriddle-title {
    display:none;
}

/************ Transition Stuff *****************/
/**
Each transition has four styles associated with it:
incoming, outgoing, current, and staged.  

The current style is the one to use when the div of that transition is
the currently-being-viewed div.

The staged style is the one to use for the next div of that transition.  For example,
the push staged style makes the staged div move to the right so it is ready to 
scroll in to the left.

The outgoing style is the one applied after the current style.

The incoming style is the one applied after the staged style. 

The flow is current -> outgoing while staged -> incoming.  Then instantly (with
no transitions) outgoing becomes staged and incoming becomes current.

Current to outgoing usually involves a transition.  Staged to incoming sometimes
involves a transition (like for push, flip, or cube), but not always (for blend or wipe).
Outgoing to staged doesn't involve a transition because it's not seen.

The 3D transitions work slightly differently.  In this case, not only the 
two divs are worked, but also their containing div.  We stage the inner divs (a and b)
but we do the incoming/outgoing transforms on the container div.  For example,
the cube current div will be the forward face, while the staged div will be transformed
to be the right face of a cube.  Then, when it's time to rotate the cube, we do
the outgoing transform of a rotation on the whole container to move the divs
together.  Then we re-stage everything.

*/

/* used as a parent selector for special css effects */
.doublePageLayout {
    
}

#rightPageBack {
    z-index: 0;
}

#transitionSpace {
    z-index: 1;
    position:absolute;
    transform-origin:top left;
}

.page {
    position:absolute;
    box-shadow: 0px 0px 4px #6b6b6b;
    transform-origin:top left;
}

.whiteboard.iframe .page {
    box-shadow: none;
}

#content {
    transform-origin:left;
    position:absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    box-shadow: 0px 0px 4px #6b6b6b;
}

/* Bottom page shadows */
.doublePageLayout #rightPageBack:after {
    position: absolute;
    width: 40%;
    height: 10px;
    content: ' ';
    bottom: 12px;
    background: transparent;
    right: 12px;
    transform: skew(5deg) rotate(5deg);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
    z-index: -1;
}
.doublePageLayout #leftPage:before {
    position: absolute;
    width: 40%;
    height: 10px;
    content: ' ';
    bottom: 12px;
    background: transparent;
    left: 12px;
    transform: skew(-5deg) rotate(-5deg);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
    z-index: -3;
}

/* Central spine shadows */
.doublePageLayout #leftPage:after, 
.doublePageLayout .staged:after {
    position: absolute;
    width: 5%;
    height: 100%;
    content: ' ';
    bottom: 0px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 99%, rgba(0, 0, 0, .5) 100%);
    right: 0px;
    z-index: 3;
}
.doublePageLayout .current:before, 
.doublePageLayout #rightPageBack:before {
    position: absolute;
    width: 5%;
    height: 100%;
    content: ' ';
    bottom: 0px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .25) 1%, rgba(0, 0, 0, 0) 100%);
    left: 0px;
    z-index: 3;
}

/** keeps stickers from runningeth over */
#a>div, #b>div, #leftPage>div, #rightPageBack>div {
    position:absolute;
    clip-path:inset(0px);
}

.twoD {
}
.threeD {
    perspective-origin: bottom;
    perspective: 5000px; 
}

.outgoing, .current {
    z-index: 1;
}


.incoming, .staged {
    z-index: 0;
}

#content>div {
    position:absolute;
    width: 100%;
    height: 100%;
    margin: 0px;

    backface-visibility: hidden;
}

/********* None **********/
.none.staged {
    z-index: -1;
    display: none;
}

.none.current {
    z-index: 1;
}

/********* Fade **********/
.fade.outgoing {
    transition: opacity 1s ease-in-out;
    opacity: 0;

    z-index: 1;
}

.fade.incoming, .fade.staged {
    opacity:1;
    z-index:-1;
}

.fade.current {
    opacity:1;
    z-index:1;
}

/********* Flip *********/
.flip.current.right {
}

.flip.outgoing.right {
    transform:  rotateY(-180deg)  ;
    transition:  transform 1s linear;
}

.flip.staged.right {
    transform: rotateY(180deg) ;
}

.flip.incoming.right {
}

.flip.current.left {
    transform: rotateY(-180deg);
}

.flip.outgoing.left {
    transform:  rotateY(0deg)  ;
    transition:  transform 1s linear;
}

.flip.staged.left {
    transform: rotateY(180deg) ;
}

.flip.incoming.left {
    transform:  rotateY(-180deg)  ;
}


@media print {
    .bigplay_button,
    .control_bar{
	display: none;
    }
}

@media (max-width: 550px) {
    .with-toolbar.not-loggedin .toolbar_login_link:not(.remix) {
        display:none;
    }
    .toolbar_login_link.remix {
        margin-left:10px;
    }
    .toolbar_login_link.remix svg {
        margin-right:0;
    }
    .toolbar_login_link.remix span {
        display:none;
    }
    .toolbar_button.translate label {
        display:none;
    }
    .with-toolbar.not-loggedin .toolbar_button {
        margin-right:0;
    }
    .with-toolbar.not-loggedin .toolbar_button.print {
        display:none;
    }
    .with-toolbar.not-loggedin h1 {
        margin-left:10px;
    }
}

/** Control Bar with Toolbar Styles **/

.with-toolbar .control_bar {
    position: unset;
    background-color: transparent;
    border: none;
    box-shadow: none;
    height: 0px;
    width: 0px;
}

.with-toolbar .control_button.fullscreen_button {
    display:none;
}

.with-toolbar .control_button {
    position: absolute;
    border: 1px solid grey;
    border-radius: 50%;
    background-color: #ffffff90;
    transform: translate(0, -50%);
}

.with-toolbar .control_button.next_button {
    right: -8px;
    top: 50%;    
}

.with-toolbar .control_button.prev_button {
    left:-8px;
    top: 50%;
}

.with-toolbar .control_button.prev_button.disabled, 
.with-toolbar .control_button.next_button.disabled {
    display:none;
}

.with-toolbar .control_button.play_button,
.with-toolbar .control_button.play_page_button,
.with-toolbar .control_button.pause_button{
    left:50%;
    bottom: 1%;
    transform: translate(-50%, 0);
}

.with-toolbar .control_button.fullscreenexit_button{
    left:50%;
    bottom: 1%;
    transform: translate(-70px, 0);
}

.storyboard_button {
    left:1%;
    bottom: 1%;
}

.play_page_button_left {
    left: 1%;
    bottom: 1%;
}

.play_page_button_right {
    right: 1%;
    bottom: 1%;
}

.iframe .play_page_button_right,
.iframe .play_page_button_left{
    transform: none;
}

.iframe.with-toolbar .toolbar_button.fullscreen {
    display:none;
}

/***** player storyboard *****/
#player_storyboard {
    margin:10px;
}

.iframe .tile, .iframe .tilePair {
    border-radius: 0px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.iframe .tile.active, .iframe .tilePair.active {
    background-color: var(--primary-color-light);
}

.iframe .tile::after {
    content: attr(title);
    margin-top: 4px;
    font-size: .8em;
}

.iframe .tile img {
    border: 1px solid var(--middlegrey);
    max-width:140px;
}

.iframe .tilePair {
    flex-direction: row;
    padding: 0px;
}

.iframe .tilePair .tile:first-child {
    padding-right:0px;
}

.iframe .tilePair .tile:last-child {
    padding-left:0px;
}

/* Central spine shadows */
.iframe .tilePair .imgbg {
    background-color: black;
    display:flex;
}
.iframe .tilePair .tile:first-child img {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, .95) 95%, rgba(0, 0, 0, .75) 100%);
}
.iframe .tilePair .tile:last-child img {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .95) 5%, rgba(0, 0, 0, 1) 10%);
}

.connectionDiv {
    position:absolute;
    pointer-events:none;
    text-align: center;
}

.connectionLabel {
    position:absolute;
    pointer-events:none;
    background-color:white;
    min-width:100px;
    text-align:center;
}

.altText {
    text-align: center;
}
@media print {
    header {
        display:none;
    }
    
    body {
        height:100%;
        width:100%;
    }
    
    .progressIndicator {
        display:none;
    }
    
    .with-toolbar .player_container {
        padding: 0;
    }
}

/* Translation */

.translating {
    visibility: hidden;
}

.translating::before {
    content: url('/images/loading.gif');
    visibility: visible;
    color:var(--middlegrey);
    position:relative;
    top:20px;
    left:20px;
}

/* End Translation */



@media (max-width: 770px) {
    .modal-content.remixproject.show .modal-footer button {
        top: 5px;
        right: 5px;
    }
}

/* End Remix dialog */