/*
:root {
    --gs-fg-primary-col: #fff;
    --gs-bg-primary-col: #29e;
}
*/



/* provide basic background color, that tabletop themes will likely override, with an tabletop/desktop-sized image */
html {
    background-color: #103010;
}


html, body {
    overflow: hidden;
    height: 100%;
    width:  100%;
    margin:  0;
    padding: 0;
    border:  0;
}

body {
    font-family: "Open Sans", OpenSans, Helvetica, Arial, sans-serif;
    background-color: transparent;
}

select {
    font-family: "Open Sans", OpenSans, Helvetica, Arial, sans-serif;
}


/* establish some uniformity concerning width collection divs on home page */
div.collectionLinkText {
    min-width: 365px;
}

span.collectionAndGroupLinks {
    display: inline-block;
}

/*
  The overall tabletop setup allows for:
    header
    content
    footer

  Note: ships with 'tabletop.xsl' such that the default behaviour is
  to NOT display the *header* or *footer*
*/


.tabletop-box {
    display: flex;
    flex-flow: column;
    height: 100%;
}


.tabletop-box .tabletop-row.tabletop-header {
    flex: 0 1 auto;
}

.tabletop-box .tabletop-row.tabletop-content {
    flex: 1 1 auto;
}

.tabletop-box .tabletop-row.tabletop-footer {
    flex: 0 1 40px;
}


.tabletop-button {
    display: inline-block;
    width: auto;
    border-radius: 10px;
    padding: 15px 25px;
    cursor: pointer;
}


#gs-control-bar {
    position: absolute;
    z-index: 20;
    height: 2.5rem;
    text-align: center;
    display: none;
}

#gs-control-bar-toggle {
    z-index: 21;
    position: absolute;
    left: 0px;
    top: 0px;
    color: #000;
    padding: 0.6rem 0.9rem 0.6rem 0.9rem;
}

#gs-home-open {
    z-index: 21;
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 0.5rem;
}

#gs-control-bar-theme-selection {
    width: 9rem;
    height: 1.4rem;
}


/*
Interact.JS demo CSS

.info-window {
    min-height: 6.5em;
    margin: 0.5em;

    / *
    background-color: var(--gs-bg-primary-col);
    color: var(--gs-fg-primary-col);
   * /
    
    background-color: #fff;
    color: #000; 
    
    border: 0.25rem var(--gs-bg-primary-col) solid;
    
    font-size: 1.2rem;

    border-radius: 0.6em;
    padding: 1em;

    touch-action: none;
    user-select:  none; 
    transform: translate(0px, 0px);

    / * This makes things *much* easier * /
    box-sizing: border-box;

}

*/

/* WinBox.js classes */

.winbox-frame {
    background-color: var(--gs-primary-bg-col);
}

/* inspired by interact.js drag demo div example */
.winbox-body {
    min-height: 6.5em;
    margin: 0.5em;
    
    background-color: #fff;
    color: #000;
    
    font-size: 1.2rem;

    padding: 1em;

    touch-action: none;
    user-select:  none; 
    transform: translate(0px, 0px);

    /* This makes things *much* easier */
    box-sizing: border-box;
}


.wb-header {
    background-color: var(--gs-primary-bg-col);
}


.wb-n {
    cursor: revert;
}


/* interact.js related for pinch-and-zoom */

/* The following is from the pinch-and-zoom demo example */

/* Current testing was without this (due to it being id/class mistake) but seemed to work OK
   (hence why the mistake went unnoticed */
/* Could be the max-width and touch-action would still be useful to have ?? */


/*
.scale-element {
    display: block;
    max-width: 100%;
    margin: 1rem auto;
    touch-action: none;
}
*/

/* Visual artefact turns up from box-shadow when rotating */
/* This is due to the parent div dtaying in the same fixed place, but the
   scaled and rotated inner elements breaking out of that shap */


.interact-rotatable-outer {
    background-color: transparent;
    box-shadow: none;
}

/* Report to help promote anti-aliasing affects on transform elements

e.g. https://slickmedia.io/blog/stop-blurring-jagged-edges-css-transform-transition

  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  -webkit-perspective: 1000;
*/