/* Import Font faces */

@import url(pages.css);
@import url(shared.css);

html,body{
    margin:0;
    width:100%;
    height:100%;
    font-family: "Roboto";
}

.no-image{
    background-image:none;
}

.toast{
    opacity: 1.0;
}

.toast-message{
    font-family: Arial, Helvetica, sans-serif;
}

.bubbler-wrapper{
    display:none;
}

#canvas-holder{
    justify-content: center;
    display:flex;
    max-height: 96vh;
    position:absolute;
    width:96vw;
    height: auto;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
/*    background-color:#111;*/
    user-select: none;
}

.canvas-inner{
    position:fixed;
    display:block;
    transform:translateY(-50%);
}

.pdf-canvas{
    max-width:96vw;
    max-height: 96vh;
    background-color:#111;
    display:none;
}

.spinning-loader-pdf{
    position:absolute;
    bottom:1vw;
    right:1vw;
    z-index:150;
    visibility:hidden;
}

.spinning-loader-pdf[visible]{
    visibility:visible;
}

#pdf-viewer-editor{
    top:0;
    position:fixed;
    width:100%;
    height:100%;
    display:none;
    user-select: none;
    justify-content: center;
    align-items: center;
    background-color:#111;
}

#pdf-viewer-editor .color-wheel{
    display:block;
    z-index:150;
}


.highlight{
    background-color:#ffcc00 !important;
}

.draggable-player{
    position: absolute;
    top:0;
    left:0;
    max-width: 100%;
    max-height:100%;
    width:90%;
    height:90%;
    color: white;
    font-size: 20px;
    font-family: sans-serif;
    touch-action: none;
    box-sizing: border-box;
    z-index:100;
    outline:4px dashed;
    outline-color: transparent;;
    transition:all 0.1s linear;
    transition-property:background-color, border-color;
}

.draggable-player .edit-bar{
    font-family: "icons";
    position:absolute;
    display:flex;
    flex-direction: column;
    align-items:center;
    z-index:190;
    left:0px;
    width:90px;
    height:100%;
}

.draggable-player .edit-bar .button{
    cursor:pointer;
    border-radius: 100%;
    line-height: 1em;
    font-size: 1.2em;
    padding:8px;
    margin:20px 0 0 0 !important;
    color:#fff;

    text-decoration: none;
}

.draggable-player .edit-bar .button:nth-child(1){
    background-color: #00FF80;
    color:#000;
    display:none;
}

.draggable-player .edit-bar .button:nth-child(2){
    background-color: #7A81FF; 
}


.draggable-player .edit-bar .button:nth-child(3){
    background-color:#F07070;
    display:none;
    margin-top:10px !important;
}

.draggable-player-edit .edit-bar .button:nth-child(2){
    display: none;
}

.draggable-player-edit .edit-bar .button:nth-child(1){
    display: block;
}

.draggable-player-edit .edit-bar .button:nth-child(3){
    display: block;
}

.draggable-player-edit{
    outline-color:#00FF80;
    background-color:rgba(0,0,0,0.25);
/*    box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.25);*/
}

.draggable-player .play-btn{
    font-family: "icons";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    color:#000;
    text-decoration: none;
    border-radius: 100%;
    font-size: 25px;
    line-height: 1em;
    padding:20px;
    background-color: #F4FF7F;
    display:none;
    cursor:pointer;
}

.draggable-player .audio-btn{
    font-family: "icons";
    position:absolute;
    right:0;
    color:#fff;
    text-decoration: none;
    border-radius: 100%;
    font-size: 1.2em;
    line-height: 1em;
    padding:8px;
    margin:20px;
    background-color:rgba(0,0,0,0.45);
    cursor:pointer;
}


.draggable-player video{
    position: absolute;
    max-width: 100%;
    max-height:100%;
    width:100%;
    height:100%;
    display:none;
}


.draggable-player audio{
    position: absolute;
    max-width: 100%;
    max-height:100%;
    width:100%;
    height:100%;
}

.bubbler-wrapper .bubbler-menu-loader {
    background-color: #7A81FF;
}


.meta-menu .icon-locked{
    color:#00FF80 !important;
}

.meta-menu .icon-locked[state=active]{
    color:#F07070 !important;
}

.icon-locked-meta{
    cursor:default !important;
    color:#00FF80 !important;
}

.icon-locked-meta[state=active]{
    color:#F07070 !important;
}


.button{
    display:inline-block;
    border-radius: 100px;;
    padding:7px 25px 7px 25px;
    width:auto !important;
    margin:20px 0 10px 0;
    color:#000;
    font-size: 14px;;
}


.green{
    background-color: #00FF80;
}

.type-purple{
    color:#8E13F4 !important;
}

.popup{
    z-index:100;
}

.popup h2{
    line-height:1.3em;
    margin-bottom:20px;
}

.center-vertical{
    justify-content:center;
}

.center-text{
    text-align: center;
}

modal-viewer-login{
    width:100%;
    max-width: 720px;;
    display:flex;
    justify-content: center;
}

modal-goodbye{
    width:100%;
    max-width: 720px;;
    display:flex;
    justify-content: center;
}

modal-not-found{
    width:100%;
    max-width: 720px;;
    display:flex;
    justify-content: center;
}

.modal-overlays-fixed{
    position: fixed;
    height:100vh;
}

#modal-overlays{
    flex:1 0 auto;
    top:0;    
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    width:100vw;
    z-index:200;
    background-color:rgba(0,0,0,0.5);
    pointer-events: none;;
    opacity:0;
    transition-duration: 500ms;
    transition-property: opacity;
}

.modal-transparent-bg{
    background-color:rgba(0,0,0,0.0) !important;
}

.capture-events{
    pointer-events: auto !important;
}

.hidden{
    display:none !important;
}

.pdf-aspect-h{
    width:96vw;
    height:auto;
}

.pdf-aspect-w{
    height:96vh;
    width:auto;
}

.pagination{
    height: 50px;
    border-radius: 25px;    
    background-color:rgba(0,0,0,0.15);
    padding: 0;
}

.pagination ul{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    color:#fff;
    list-style-type:none;
    display: flex;
    font-family: "icons";
    height:100%;
    font-size: 2em;
    padding: 0;
    pointer-events: none;
    cursor: pointer;
}


.pagination ul li:before{
    pointer-events: auto;;
}

.pagination ul li:hover{
    transform: scale(1.2);
}

.pagination ul li:first-child{
    padding: 0 0 0 5px;
    margin-left:0.3em;
}

.pagination ul li:last-child{
    padding: 0 5px 0 0;
    margin-right:0.3em;
}

.pagination ul li:nth-child(2), .pagination ul li:nth-child(4){
    font-size:1.3em;
}

.pagination .pagination-page{
    display:flex;
    align-items: center;
    justify-content:center;
    text-align: center;
    font-weight: 600;
    font-family: "Montserrat";
    letter-spacing: 0.2em;;
    font-size: 0.4em;
    line-height: 100%;
    min-width:90px;
}


.moliarty-header{
    font-family: "icons";
    position:fixed;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
/*    padding-right:2%;*/
    width:100%;
    height:10%;
    min-height:80px;
    top:0px;
    z-index:200;
    pointer-events: none;
}

.moliarty-header .meta-menu{
    display:flex;    
    background:rgba(0,0,0,0.15);
    padding:0 20px 0 20px;
    border-radius: 50px;
    pointer-events: auto;
}

.moliarty-header a{
    text-decoration: none;
    font-size:32px;
    color:#fff;
    cursor:pointer;
    line-height:1.4em;
    padding:0 10px 0 10px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.ui-element-edit{
    transition-duration: 0.2s;
}

.ui-hidden{
    opacity: 0;
    pointer-events: none;
}

.moliarty-header .sync{    
    font-size: 32px;
    color:#fff;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.moliarty-header .sync .progress-bar{
    display:block;
    background-color: rgba(1,1,1,0.2);
    border-radius: 10px;
    height:10px;
    width:10px;
}

.moliarty-header .sync .syncing{
    width:85px;
}

.moliarty-header .sync .progress-bar .progress{
    display:block;
    height:100%;
    width:100%;
    background-color:#00ff80;
}

.moliarty-header label {
    font-family: Roboto;
    font-size:0.4em;
    margin-right:5px;
    user-select: none;
    pointer-events: none;
}


.moliarty-footer{
    position:fixed;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    height:150px;
    min-height:140px;
    bottom:0px;
    z-index:200;
    pointer-events: none;
}

.moliarty-footer .pagination-holder{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex: 1 1 0px;
    pointer-events:auto;
}


.label-light-bg{
    color:#000;
}

.label-dark-bg{
    color:#fff;
}


.moliarty-footer .menu{
    flex: 1 1 0px;   
    pointer-events:auto;
}

.moliarty-footer .menu .menu-holder{
    position: relative;
    margin-right:40px;
    margin-left: 40px;
    min-width:75px;
    height:75px;
}


.center-stage-box{
    margin:60px;
    width:auto;
    max-width:650px;
    min-width: 400px;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    background-color:#D783FF;
    border-radius: 10px;
    box-shadow: 10px 10px 15px rgba(0,0,0,0.2);
}

.type-purple{
    color:#8E13F4 !important;
}


.center-stage-box h1{
    margin-top:40px;
    color:#fff;
}

.center-stage-box h2{
    margin:0px !important;
    font-size: 20px;;
    color:#fff;
}

.center-text{
    text-align: center;
}


.big-yellow-button{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#F4FF7F;
    border-radius: 1000px;
    user-select: none;
    color:#000;
    padding:20px 60px 20px 60px;
    min-width:60%;
    margin-bottom: 40px;
    margin-top:20px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    pointer-events: auto;
}

.big-yellow-button:hover{
    background-color:#ffcc00 !important;
    color:#000;
}

@media only screen and (max-width: 700px) {

    .moliarty-footer .menu .bubbler-menu-loader{
        transform:scale(0.9);
    }
}