:root {

    --quaterm: calc(var(--margin) / 4);
    --halfm: calc(var(--margin) / 2);
    --margin: 10px; 
    --doublem: calc(var(--margin) * 2);
    --ddoublem: calc(var(--doublem) * 2);
    --col: 16.5%;

    --stroke: 1px solid grey;
}

*{

    font-family: Flefixx;
    font-size: 13pt;

    overflow:hidden;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

}

html {
  scroll-behavior: smooth;
}

a{

    color: black;
    text-decoration: none;

}

.underline{

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 1.5px;
    text-decoration-color: grey;

}

.blue{

    color:blue;

}

.hovercontext{

    position: fixed;
    display: none;
    pointer-events: none;

    margin-top:var(--margin);
    margin-left:var(--margin);

    padding: var(--halfm);

    border: var(--stroke);

    background-color:white;

    word-wrap: break-word;

    z-index: 2000;

}

html{

    overflow:hidden;

}

body{

    overflow:hidden;

    width:100vw;
    height:100vh;

    margin:0;
    padding:0;

}


/*––––––MENU––––––*/

#version{
    position: absolute;
    top:var(--margin);
    left:var(--margin);
}

.menu{

    position: absolute;
    overflow: visible;

    top:0;
    left: calc(var(--col) + var(--doublem));

    width: calc(var(--col)*5 - var(--ddoublem));
    height: calc(50px - var(--doublem));
    height:auto;

    padding:var(--margin);

    background-color: white;

}

.menucol{

    position: absolute;
    
    top:0;
    left: calc(var(--col) + var(--doublem));
    
    width: calc(var(--col)*5 - var(--doublem));
    height: auto;
    
}

.option{

    position: relative;
    float: left;

    padding: var(--halfm);
    margin-right:var(--margin);
    margin-bottom:var(--halfm);

    border: var(--stroke);

    background:lightgrey;

}

#toggles:hover{
    
    background: whilightgreyte;
    
}

.toggle{
    
    position: relative;
    float: left;
    
    background:transparent;
    border:0;
    
}

.switch{
    
    position: relative;
    float: left;
    overflow: visible;
    
    margin-left: var(--margin);
    margin-right: var(--margin);
    
    width: 20px;
    height:20px;
    
}

.line{
    
    position: absolute;
    transform: translate(-50%,-50%);
    
    top:50%;
    left:50%;
    
    width:100%;
    height: 1px;
    
    background-color:black;
    
}

.ball{
    
    position: absolute;
    transform: translate(-50%,-50%);
    top:50%;
    left:0;
    
    height: 8px;
    width:8px;
    
    border-radius: 100px;
    
    background-color: black;
    
}

#about{

    float: right;
    margin-right:0;

}

.option:hover{

    cursor:pointer;
    background-color: white;

}

#filters{

    position: absolute;
    transform: translate(-50%,0);
    left: 50%;


}

.dropdown{

    position: absolute;
    overflow: hidden;
    overflow-y: scroll;

    display: none;

    transform: translate(-50%,0);

    padding: var(--halfm);

    left: 50%;
    top: 45px;

    height: 500px;
    width: 300px;


    background:white;
    border: var(--stroke);

    box-shadow: 0px 0px 20px lightgray;

    z-index: 1000;

}

.filtertitle{
    
    position: relative;
    float: left;
    
    margin-top: var(--margin);
    margin-bottom: var(--halfm);
    
    width: 100%;
    
    text-align: center;
    word-wrap: break-word;
    
}

.filter{
    
    position: relative;
    float: left;
    
    padding: var(--quaterm);
    
    margin-right: var(--halfm);
    margin-bottom: var(--halfm);
    
    width:auto;
    
    border: var(--stroke);
    word-wrap: break-word;
    
    background:lightgray;
    
    
}

#all{
    
    background: white;
    
}

.filter:hover{
    
    cursor:pointer;
    
    background-color: white;
    
}

/*––––––CONTENT––––––*/

.content, .about{

    position: absolute;
    overflow:hidden;

    top:50px;

    width: calc(100% - var(--margin));
    height: 100%;

    margin-left: var(--margin);

    background:white;
}

.about{
    
    display: none;
    
}

/*–––COLLUMNS–––*/

.collumn{

    position: absolute;

    top:0;

    height:100%;

    border-left: var(--stroke);
    
    overflow-y: scroll;

}

.longcol .collumn:first-child{
    
    border-left:0;
    
}

.longcol{

    left:calc(var(--col) + var(--doublem));

    width: calc(var(--col)*5 - var(--doublem));

    overflow-x:hidden;
    overflow-y:scroll;

}

#table{
    
    display:none;
    
}

.doublecol{
    
    width: calc(var(--col) * 2);
    border-top: var(--stroke);
    
}

.triplecol{
    
    width: calc(var(--col) * 3);
    
}

#c0{

    left:0;

    width: var(--col);

    overflow:hidden;
    overflow-y:scroll;

    border-top: var(--stroke);
    border-right: var(--stroke);

}


/*–––BOARD–––*/

#c1{
    
    width:20%;
    left:0;
    
}

#c2{
    
    width:20%;
    left:20%;
    
}

#c3{
    
    width:20%;
    left:40%;
    
}

#c4{
    
    width:20%;
    left:60%;
    
}

#c5{
    
    width:20%;
    left:80%;
    
}


/*–––ABOUT–––*/

#ac0{
    
    left:0;
    
}

#ac1{
    
    left: calc(var(--col) * 2);
    
}

#ac3{
    
    left: calc(var(--col) * 4);
    
}

.datacontent{

    position: relative;
    float:left;
    display: none;

    width: calc(100% - var(--margin));

    padding: var(--halfm);
    padding-bottom: 50px;

}

.colheader{

    position: absolute;

    top:0;
    left:0;

    width:auto;
    max-width:calc(100% - var(--margin));

    height:auto;


}

.category, .add, .number{

    position: relative;
    float: left;

    width: auto;
    max-width: calc(100% - var(--margin));

    padding: var(--halfm);

    margin-bottom: var(--margin);

    border: var(--stroke);

    background:lightgrey;

    overflow: hidden;
    word-wrap: break-word;


}

.category{

    border-left:0;

}

.add, .number{

    margin-left: var(--halfm);

}

.add{

    background:white;

}

.add:hover{

    cursor: pointer;
    background:lightgrey; 

}

.colcontent{

    position: absolute;

    top: 35px;

    width:calc(100% - var(--margin));
    height:calc(100% - 30px);

    overflow-y: scroll;
}

.exercise{

    margin-left:var(--halfm);
    margin-right:var(--halfm);
    margin-bottom:var(--halfm);

}

.exercise, .savedexercise{

    position: relative;
    float: left;

    width:60px;

    height:60px;

    border-radius: 30px;
    border: var(--stroke);

    overflow:visible;

}

.savedexercise{

    height:20px;
    width:auto;

    padding: var(--halfm);
    padding-right:var(--margin);

    margin-right: var(--margin);
    margin-bottom: var(--margin);

}

.preparation{background-color:cornsilk;}
.warm-up{background-color:azure;}
.main{background-color:rgb(255, 154, 154)}
.open{background-color:darkseagreen;}

.exercise:hover{

    cursor:pointer;
    background: lightgrey;

}

.exercise:active{

    cursor:grabbing;

}

.savedexercise:hover{

    cursor:grab;
    background-color:lightgrey;

}

.savedexercise:active{

    cursor:ew-resize;
    background-color:grey;

}

.exerciseinformation{

    position: absolute;

    transform: translate(-50%,-50%);

    top:50%;
    left:50%;

    width:100%;
    height:100%;

    overflow:visible;

}
    
.selected{
    
    position: absolute;
    transform: translate(-50%,-50%);
    
    top:50%;
    left: 50%;
    
    width: 10px;
    height: 10px;
    
    border-radius: 5px;
    
    background: gray;
    
    display: none;
    
}

.duration{

    position: absolute;

    top:0;
    right:-7;

    padding-left:var(--quaterm);
    padding-right:var(--quaterm);
    padding-bottom:var(--quaterm);

    border-bottom: var(--stroke);

    color: blue;
    background-color: lightgrey;

}

.savedname{

    position: relative;
    float: left;
    display: inline-block;

}

.savedduration{

    position: relative;
    float: left;
    display: inline-block;

    margin-left: var(--halfm);;

    border-bottom: var(--stroke);

    color: blue;
    background-color: white ;
}

.sortnumber{

    position: relative;
    float: left;
    pointer-events: all;

    margin-left:var(--halfm);;
    margin-right:var(--margin);


}


/*–––––DETAILS–––––*/

.title{

    position: relative;
    float:left;

    width: 100%;
    margin-bottom: var(--margin);

}

.basicinformation{

    position: relative;
    float:left;

    width: 100%;
    margin-bottom: var(--margin);

    border-top: var(--stroke);


}

.time{

    color: blue;

}

.instructions, .chapters, .materials{

    position: relative;
    float:left;

    width: 100%;
    margin-bottom: var(--margin);

    border-top: var(--stroke);

}

#step{

    margin-bottom: var(--margin);

}

.comment{

    position: relative;
    float:left;

    width: 100%;
    margin-bottom: var(--margin);

    border-top: var(--stroke);

}


/*––––––FOOTER––––––*/

.footer{

    position: absolute;
    overflow:visible;

    bottom:0;

    width: 100%;
    height: 100px;

    border-top: var(--stroke);

}

.footertitle{

    position: absolute;

    padding: var(--halfm);

    top:var(--margin);
    left:var(--margin);

    border: var(--stroke);

    background:lightgrey;

}

.countsaved{

    position:absolute;

    padding: var(--halfm);

    left: 85px;
    top:var(--margin);

    border: var(--stroke);

    background:lightgrey;

}

.totalduration{

    position: absolute;

    transform: translate(0,-100%);

    padding:var(--halfm);
    padding-left: calc(var(--halfm) + var(--margin));

    top:0;
    left:0;

    border: var(--stroke);
    border-left: 0;

    background:white;


}

.delete{

    position: relative;
    float: left;
    display: inline-block;

    margin-right: var(--halfm);
    margin-left: var(--halfm);

}

.delete:hover{

    cursor: pointer;

}

.message{

    position: absolute;
    display:none;

    transform: translate(-50%,100%);

    padding: var(--halfm);
    padding-top:0;

    top:-50;
    left:50%;

    background: lightgrey;

    border-top: var(--stroke);
    border-left: var(--stroke);
    border-right: var(--stroke);

}

.saved{

    position: absolute;
    overflow-y:scroll;

    height:calc(100% - var(--margin));
    width: calc(100% - 140px);

    padding-top:var(--margin);
    padding-left:130px;
    padding-right:var(--margin);;

    right:0;
    top:0;

    border-left:var(--stroke) ;

}

.trash{

    position: absolute;

    padding: var(--halfm);

    right:var(--margin);
    top: var(--margin);

    height: calc(100% - var(--ddoublem));

    border:var(--stroke) ;
    background-color:white;    

}