body{
    padding: 0;
    margin: 0;
    font-family: 'Arimo', sans-serif;
}

.stop_tutorial{
    float: right;
}

.btext{
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    padding:0.5em;
    margin:0;
}

button{
    font-family: inherit;
}
input{
    font-family: 'Arimo', sans-serif;
}

.uploader{
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.custom-file-upload {
    background-color: ButtonFace;
    color: ButtonText;
    border: 1px solid;
    border-color: ButtonBorder;
    border-radius: 6px;
    font-weight: 400;
}
.custom-file-upload:hover{
    background-color: #bbbbbb;
}

pre{
display: inline;
}
.fancyname{
padding: 1em;
font-weight: bold;
font-size: xx-large;
}
.tutorial{
height: 100%;
vertical-align: center;
}


#screen{
    anchor-name: --forcat;
}
.overlay{
    position: absolute;
    width: 300px;
    height: 180px;
    position-anchor: --forcat;
    bottom: anchor(bottom);
}

/*
.overlay{
    position: relative;
    top: -260px;
    left: 10px;
    object-fit: cover;
    width: 300px;
    height: 180px;
    object-position: center;
}*/
.invisitable{
border: 1px solid black;
}
.group{
height: 100%;
display: flex;
align-items: center;
}
.icon{
height: 1em;
padding: 0em;
}
label{
padding: 0.2em;
}
.popover{
background-color: #ddf;
font-size: larger;
text-align: center;
max-width: 40vw;
}
li{
padding-top: 1em;
}
.unobstrusive{
width: 1.5em;
background-color: transparent;
padding: 0;
}

#overlayHelp{
  float: right;
  top: 2em;
  position: relative;
}
.nospace{
    margin: 0;
    padding: 0;
}
.acent{
display: flex;
align-items: center;
padding: 0.5em;
margin: 0.5em;
border: thin solid black;
border-radius: 10%;
}
.rightflex{
float: right;
}
.air{
padding-top: 1em;
}
.menus{
    width: 99vw;
    height: 8vh;
    min-height: 3em;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    padding-left: 1vw;
    padding-right: 1vw;
    border: thin solid black;
    border-radius: 0.5vw;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.menusize{
height: 6vh;
padding: 1vh
}
.tools{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
flex-direction: row;
}
.exh{
    float: right;
}
#toggledepth{
    display: none;
}
#wrapper{
height: 86%;
width: 100vw;
padding-top: 1%;
padding-bottom: 1%;
margin: 0;
padding-left: 0;
padding-right: 0;
border: none;
flex-direction: row;
flex-wrap: wrap;
}
#angle{
width: 5em;
text-align: right;
}
.container{
display: flex;
align-items: top;
justify-content: space-around;
border: thin solid black;
border-radius: 1vw;
width: 100vw;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
.hidden{
display: none;
}
.shown{
display: inline;
}
@media (orientation: landscape) {
    .panel{
        border: thin solid black;
        border-radius: 0.5vw;
        width: 47%  ;
        padding-left: 1vw;
        padding-right: 1vw;
        margin-left: 0;
        margin-right: 0;
    }
}
@media (orientation: portrait) {
    .panel{
        border: thin solid black;
        border-radius: 1%;
        width: 96%;
        height: 47%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 1%;
        margin-right: 1%;
    }
}

#log{
display: none;
position: fixed;
left: 0;
bottom: 0;
}
.cpick{
position: absolute;
padding: 0;
}
.smallSVG{
width:100%;
}
.bigSVG{
width: 100%;
}

#checkboxes{
padding: 1vw;
display: flex;
justify-content: space-around;
flex-direction: row;
flex-wrap: wrap;
}
.dynamicCheckBox{
margin-right: 1vw;
margin-bottom: 1vw;
padding-right: 1vw;
border: thin solid #555555;
border-radius: 0.5vw;
}
textarea{
width: 100%;
}

svg{
border: thin solid black;
}

/* Style the tab */
.tabcont{
width: 100%;
height: 100%;
background-color: #ccc;
position: relative;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f2f1;
width: 100%;
}

/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
font-family: 'Average Sans', sans-serif;
}

/* Style the tab content */
.tabcontent {
display: none;
border-top: none;
padding: 1em;

}

/* Anchoring styles for the tutorial */
.anchor{
    anchor-name: --tutorialAnchor;
}

#tutHand{
    position: absolute;
    position-anchor: --tutorialAnchor;
    left: anchor(center);
    top: anchor(center);
    width: 3em;
}


@keyframes att {
    0% {border: none;}
    50% {border: 20px red; box-shadow: 0 0 20px red;}
    100% {border: none;}
}

.highlighted{
    animation-name: att;
    animation-duration: 0.5s;
    animation-iteration-count: 5;
}


.moveto{
    transition: 1s;
}