html,
body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    touch-action: none;
    -webkit-user-select:none;
    user-select:none;
}

.spectrum-Modal-wrapper {
    background: rgba(0,0,0,0.4);
}

.spectrum--light .spectrum-Dialog{background:white;}

.spectrum--dark .spectrum-ActionButton:focus, .spectrum--dark .spectrum-Picker:focus{
outline:2px solid white;
}

.PickerContainer{margin-top: 0.25rem;margin-right:1rem;margin-left:1rem;}


#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    grid-row: 1/3;
    grid-column: 1/2;
    cursor: pointer;
}

.shownavbar{
    display: block;
}


#viewButtons{
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 12px;
    border-radius: 25px;
    grid-row: 2/3;
    grid-column: 1/2;
    z-index: 10000;
    background-color: black;
}

.headingLabel{
    color:gray;
}

main #viewButtons .spectrum-ActionGroup{
    display: none;
    animation: showNavbar 0.25s reverse;
}


main.navbar #viewButtons .spectrum-ActionGroup{
    display: inline-flex;
    border-radius: 25px;
    animation: showNavbar 0.25s;
}

main.navbar #viewButtons .navbarItem.spectrum-Heading{
    text-wrap: nowrap;
    overflow-x: hidden;
    max-width: 300px;
    text-overflow: ellipsis;
    margin-left:0.5rem;
    margin-top: 0.4rem;
    margin-right:0.5rem;
}

#PreloadProgress{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

#Modal{
    background-color: rgba(200,200,200,30);
    display: none;
    width: 100%;
    height: 92%;
    position: absolute;
    left: 0%;
    top: 8%;
}
    
#Modal iframe{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    width: 90%;
    height: 90%;
}

@keyframes showMapFromTop {
    from {transform: translateY(-400px);}
    to {transform: translateY(0px);}
}

@keyframes showMapFromRight {
    from {transform: translateX(400px);}
    to {transform: translateX(0px);}
}

.map{
    display: none;
    animation: showMapFromRight 0.25s, ease-in reverse;
    grid-column: 3/4;
    grid-row:1/3;
    /* width:400px; */
    /* height: 100dvh; */
    /* grid-template-rows: min-content 1fr; */
}
.map .galerystLogo{
    margin-top:0.25rem;
    margin-left: 0.25rem;
}

.map iframe{
    height: 100dvh;
    width: 400px;
}


main{
    /* padding-bottom: 1rem; */
    height: 100%;
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: 1fr min-content;
    /* column-gap:1rem; */
}

#UploadImageDialog{
    width:512px;
    height: 475px;
}

main.showMap .map{
    display: grid;
    animation: showMapFromRight 0.25s, ease-in;
}

.spectrum-Popover .spectrum-Menu{
    inline-size: 200px;
    margin-left:1rem;
    margin-right:1rem;
}

.logoWatermark{
    grid-column: 1/2;
    grid-row:1/2;
    margin-bottom: auto;
    margin-right:auto;
}

.closeButton{
    position: absolute;
    top:5%;
    left:95%;
    transform: translate(-100%,0); 
}

.galerystLogo {
    cursor: pointer;
    width:150.5px;
    height:50px;
    background-size:contain;
    background-repeat: no-repeat;
    background-image: url("/images/GALERYST_LOGO_GRADIENT-01.svg");
}

main.navbar .shownavbar{
    display:none;
}


@media only screen and (orientation:portrait) {
    main{
        grid-template-columns:auto;
        grid-template-rows: min-content 1fr min-content;
    }
    .logoWatermark{
        grid-column: 1/2;
        grid-row:2/3;
        margin-bottom: auto;
        margin-right:auto;
    }
    
    #viewButtons{
        grid-column: 1/2;
        grid-row: 3/4;
        border-radius: 45px;
    }

    .map{
        grid-template-rows:  min-content 1fr;
        grid-column: 1/2;
        grid-row: 1/2;
        width:100%;
        /* height: 400px; */
        animation: showMapFromTop 0.25s, ease-in reverse;
    }

    main.showMap .map{
        animation: showMapFromTop 0.25s, ease-in;
    }


    .map iframe{
        width:100dvw;
        height: 400px;
    }
    #renderCanvas{
        width:100%;
        grid-row: 2/4;
        grid-column: 1/2;
    }

    #renderCanvas.split{
        height: calc(100vh - 400px);
    }

    main.navbar #viewButtons .spectrum-ActionGroup {
        border-radius: 45px;
    }

    main.navbar #viewButtons .spectrum-ActionGroup {
        display: grid;
        grid-template-columns: min-content min-content max-content min-content min-content min-content;
        grid-template-rows: min-content min-content min-content min-content;
        height: auto;
        border-radius: 45px;
    } 

    #PreviousArtwork{
        grid-row:2/4;
    }

    .PickerContainer{
        grid-row: 1/2;
        grid-column: 3/4;
        margin-top: 0.25rem;
    }

    .galleryName{
        grid-row: 2/3;
        grid-column: 3/4;
        text-align: center;
    }
    .galleryCreator{
        grid-row: 3/4;
        grid-column: 3/4;
        text-align: center;
    }
    .buttons{
        grid-row: 4/5;
        grid-column: 2/5;
    }

    #NextArtwork{
        grid-column: 6/7;
        grid-row: 2/4;
    }

}

/* JioPhone 2 */
@media only screen and (max-device-width:240px){
    .galerystLogo{
        width:100px;
        height:33px;
    }
    #viewButtons{
        display: none;
    }
}

@keyframes showNavbar{
    from { 
        transform: scaleX(0);
    }
    to { 
        transform: scaleX(1);
    }
}


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

    .map iframe{
        height: 200px;
    }

    main.navbar #viewButtons .spectrum-ActionGroup{
        display: grid;
        grid-template-columns: min-content min-content max-content min-content min-content min-content;
    }

    .PickerContainer{
        margin-left:auto;
        margin-right:auto;
    }

    .buttons{
        margin-left:auto;
        margin-right:auto;
    }

    .headingLabel{ 
        display: none;
    }

    .galleryName,
    .galleryCreator{
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 270px;
        overflow: hidden;
    }

    /** hide the info button on mobile **/
    #Info{
        display:none;
    }
}

@media only screen and (max-width:599px){
    .galleryName,
    .galleryCreator{
        max-width: 190px;
    }

    [dir="ltr"] .spectrum-ActionGroup .spectrum-ActionButton + .spectrum-ActionButton {
        margin-left:0px;
    }
}

@media only screen and (max-device-height: 680px) and (orientation:landscape){
    .map iframe{
        width: 200px;
    }
}

@media only screen and (max-device-width: 1215px) and (orientation:landscape){
    .galleryName{
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
        overflow: hidden;
    }

    .galleryCreator{
        display: none;
    }

    #WingPicker{
        width:120px;
    }

    [dir="ltr"] .spectrum-ActionGroup .spectrum-ActionButton + .spectrum-ActionButton {
        margin-left:0px;
    }
}

@media only screen and (min-width: 500px) and (orientation:landscape)  {
    #renderCanvas.split{
        width: 100%;
    }

    .headingLabel{
        display: none;
    }
}

@media only screen and (min-width: 992px) and (orientation:landscape)  {
    #renderCanvas.split{
        width: 100%;
    }

    .headingLabel{
        display: inline-block;
        margin-right:0.3rem;
    }

}



@media only screen and (max-height: 768px) and (orientation:portrait)  {
    #renderCanvas.split{
        height: calc(100vh - 200px);
    }
    .map{
        height: 200px;
        width: 100dvw;
    }
}

@media (screen-spanning: single-fold-vertical) and (orientation:landscape)  {
    #renderCanvas.split{
        width: 100%;
    }
    .map{
        margin-left:2rem;
        width: 500px;
    }
}

@media (screen-spanning: single-fold-horizontal) and (orientation:portrait)  {
    #renderCanvas.split{
        width: 100%;
        height: calc(100vh - 523px);
    }
    .map{
        margin-left:0px;
        margin-bottom:1rem;
        width: 100%;
        height:523px;
    }
}

@media only screen and (max-device-height: 1024px),
       only screen and (max-device-width: 1024px){

    #FullScreen{
        display: none;
    }

    main.showMap #Camera{
        display: none;
    }
}