pre{
display: inline;
}
.fancyname{
padding: 1em;
font-weight: bold;
font-size: xx-large;
}
.tutorial{
height: 100%;
vertical-align: center;
}
.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;
}
.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: 96vw;
    height: 9vh;
    margin-left: 0.5vw;
    margin-right: 1vw;
    padding-left: 1vw;
    padding-right: 1vw;
    border: thin solid black;
    border-radius: 1vw;
    display: flex;
    justify-content: space-between;
}
.menusize{
height: 8vh;
}
.tools{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
flex-direction: row;
}
#wrapper{
height: 89vh;
border: none;
}
#angle{
width: 5em;
text-align: right;
}
.container{
display: flex;
align-items: top;
justify-content: space-around;
border: thin solid black;
border-radius: 1vw;
width: 100%;
flex-direction: row;
flex-wrap: wrap;

}
.hidden{
display: none;
}
.shown{
display: inline;
}
.panel{
border: thin solid black;
border-radius: 1vw;
width: 45vw;
padding: 1vw;
margin: 0.5vw;
}
#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;
}
.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;
}

/* 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;
}