/*block elements*/

html,body{
    height:100%;
    width:100%;
}
#main
{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
}
div.header{
    height:5vw;
    width:100%;
}
.content
{
    width:100%;
    flex:1;
    overflow:scroll;
    white-space:nowrap;
    height:100%;
}
.footer{
}
.header{
}
.plugin{
    background-color:darkgreen;
    color:white;
    padding:20px;
    border-radius:25px;
}



/*specific blocks*/
.login{
    background-color:grey;
    position:absolute;
    width:50vw;
    height:50vw;
    margin-top:25vw;
    margin-left:-100%;
    transition:0.5s margin-left linear;
}

.login-show{
    margin-left:20vw;
}
.menu
{
    width:100%;
    display:inline-block;
    height:100%;
    vertical-align:middle;
}


.menu img {
    width: 40%;
    max-width:200px;
    vertical-align:middle;
}
.editor table{
    margin:auto;
    width:80%;
}
.editor th{
    text-align:center;
}
.register{
    position:absolute;
    top:20vw;
    left:-50vw;
    min-width:20vw;
    transition:0.5s left ease;
}
.registerShow{
    left:25vw;
}
#logo{
    position:absolute;
    right:0;
    top:0;
    height:5vw;
    float:right;
}
/*animations*/
.slidein-left{
    margin-left:0;
    transition: 0.5s margin-left ease;
}

.slide-left{
    margin-left:-100%;
}
/*elements*/
h3{
    color:darkgreen;
}
a{
    color:darkgreen;
}
a:hover
{
    color:green;
}
.item-input{
    display:flex;
}
.input-label{
    width:10vw;
}

.button-block{
    width:100%;
    margin:2vw;
    border:0;
    background-color:darkgreen;
    border-radius:5vw;
    max-width:240px;
}

ul.tabs li{
    display: inline;
    background-color:green;
    padding:5px;
    color:white;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    margin:2px;
}
ul.tabs li:hover
{
    background-color:darkgreen;
}
img.play{
    max-height:30px;
}
/*apply all*/
.center {
    text-align: center;
}
.right{
    text-align:right;
    margin-right:2vw;
}
.half{
    width:50%;
    display:inline-block;
    height:80%;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/*theme styles*/
.green-gradient{

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#01441d), to(#05fe11));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(right, #01441d, #05fe11);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(right, #01441d, #05fe11);

  /* IE 10 */
  background: linear-gradient(right, #01441d, #05fe11);

  /* Opera 11.10+ */
  background: -o-linear-gradient(right, #01441d, 105fe11);
}
div.results{
    width:80%;
    margin:auto;
}
div.results table{
    margin:auto;
    border-collapse:collapse;
        border:solid 1px black;
    margin-top:1vw;
}
div.results table td,th{
    border:solid 1px #01441d;
    padding-left:1vw;
    padding-right:1vw;
}

div.fl{
    display:flex;
}
div.f1{
    flex:1;
}

div.flexrow{
    display:flex;
}
div.head{
    background-color:#01441d;
    color:white;
}
div.flexcell{
    
    border:solid 1px black;

}
div.fc6{
flex:6;
}
div.fc1{
    flex: 1;
    font-weight:bold;
}
div.fc2{
    flex:2;
}
div.total{
    font-weight:bold;
    background-color:#01441d;
    color:white;
}
div.text-left{
    text-align:left;
}
div.hideable{
    height:2vw;
    opacity:1;
    transition:0.5s all ease;
    /*transform:scaleY(1);
    transition:0.5s transform ease;*/
}
div.hiderow{
    height:0;
    opacity:0;
    /*transform:scaleY(0);*/
}
div.inset1 span{
    padding-left:2vw;
}
div.inset2 span{
    padding-left:4vw;
}
div.inset3 span{
    padding-left:6vw;
}

div.total1{
    background-color:lightgreen;
}
a.selected{
    background-color:white;
    border-radius:10px;
    padding-left:1vw;
    padding-right:1vw;
    color:#01441d;
}
a.unselected{
    color:white;
}

table td, th{
    border:solid 1px black;
}
table{
    margin-bottom:10px !important;
}