html,body{
    padding:0;
    margin: 0;
    min-height:100vh;
    width:100%;
}


body {
    overflow: hidden;
    background-position: center center;
}
*{
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    line-height: 1.2em;
}
a, a:visited, a:active{
    text-decoration: none;
    color:#000;
}
.qs_main {
    color: #000;
    /* border-radius: 8px; */
    padding: 0;
    max-height: calc(90vh - 330px);
    overflow: auto;
    margin-top: 100px;
    z-index:3;
    box-shadow: 0 0 10px #8888 !important;
    /* box-shadow: none !important; */
    border-radius: 0.3rem;
}
.qs_label {
    font-weight: bold;
    color: #000;
}
.boxshadow{
    box-shadow: 0 0 10px #8888 !important;
    border-radius: 0.3rem;
}
#logo{
    position:absolute;
    top:20px;
    left:20px;
    height:80px;
    background-color: #eee;
    width:200px;
    padding:8px;
    z-index:2;
}
h1,h2{
    margin:0.1rem 0;
}
h1{font-size:1.2rem;}
h2{font-size:1rem;}
.small{
    font-size: 0.8rem;
}
.xs{
    font-size: 0.7rem;
}
input[type=range] {
width: 100%;
accent-color: #80dfff;
}
input[type=checkbox] {
transform: scale(1.3);
accent-color: #ff8080;
}
.flex{display:flex;}
.gapS{gap:0.4rem}
.paddingS{padding:0.2rem}
.padding{padding:0.4rem}

.overflowHidden{
    overflow: hidden;
}
.centervh{
    width:100vw;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
}

#container canvas{
    opacity:0;
}

nav.bottomcenter{
    position:absolute;
    bottom:1rem;
    left:50%;
    transform: translateX(-50%);
    z-index:10;
}

nav.seamless{
    padding:0.4rem;
    display:flex;
    flex-wrap: wrap;
    gap:0.4rem;
    background-color: #fff;
    border-radius: 0.4rem;
    box-shadow: 0 0 20px #0005;
}


    #expand {
        display: none;
        background-color: #000;
        color:#fff;
        border:0;
        width:2rem;
        height:2rem;
        border-radius: 50%;
        margin:0 auto;
    }
    .expanded {
        display: flex !important;
    }
 /* Show button on small screens */
  @media (max-width: 500px), (max-height: 500px) {
    
    #expand {
      display: flex;
    }
    #content{
        display:none;
    }
    nav.seamless{
        width:90vw;
    }
    .bottomcenter{
        bottom:0 !important;
    }
  }



nav.seamless button,
nav.seamless input[type=color]
{
    display:flex;
    align-items: center;
    justify-content: center;
}

.button2 {
    width:2.6rem;
    height:2.6rem;
}
.button3 {
    width:3rem;
    height:3rem;
}

.bold{
    font-weight: bold;
    paint-order: stroke;
}

button:hover{
cursor: pointer;
}
.noshow{
    display:none;
}
#dropzone{
    width:100%;  
    height: 6rem;
    border:2px dotted gray; 
    line-height:50px; 
    text-align:center; 
    border-radius: 0.3rem;
}
#dropzone:hover{
    cursor: pointer;
}
/* range slider styles from https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */
.seamless input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    /* margin-top:0.2rem; */
    min-width:200px;
    width:30vw;
    height:3rem;
    flex:auto;
}
.seamless input[type="range"]:active {
    cursor: grabbing;
}
/***** Track Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
.seamless input[type="range"]::-webkit-slider-runnable-track {
    background: #eee;
    height: 3rem;
    border-radius: 0.3rem;  
    box-shadow: inset 0 0 5px#ccc;
    border:1px solid #ccc;
}
/******** Firefox ********/
.seamless input[type="range"]::-moz-range-track {
    background: #eee;
    height: 3rem;
    border-radius: 0.3rem;  
    box-shadow: inset 0 0 5px#ccc;
    border:1px solid #ccc;
}

/***** Thumb Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
.seamless input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -1px;
    background-color: #ddd;
    height: 3rem;
    width: 3rem;  
    border-radius: 0.2rem;  
    outline:1px solid #888;
    

}
/***** Firefox *****/
.seamless input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
    background-color: #ddd;
    height: 3rem;
    width: 3rem;
    border-radius: 0.2rem;  
    outline:1px solid #888;
}

/***** Chrome *****/
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

.bottomleft{
    position:absolute;
    width:200px;
    height:200px;
    left:20px;
    bottom:20px;
    z-index:3;
}
.whitebg{
    background-color: #fff;
}