body {
    background-color: #fafbf4;
    height:100vh; /*dit is omdat de body anders 0 height krijgt.*/
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #4B4B4B;
    transition: background-color 200ms ease;
    z-index: 2;
    margin: 0;

    /*prevent constant selection:*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently only supported by Chrome and Opera */
}
div {
    position: relative; /*remember to set absolute on the stuff in canvas? Not needed?*/
    /*box-shadow:inset 0px 0px 0px 1px #e7ebeb; /*helps position elements*/
}
.floatleft {
    position: relative;
    float: left;
}
.floatright {
    position: relative;
    float: right;
}
#Header{
    z-index: 2;
    position: relative;
    height: 95px;
    width: 100%;
}
#headerlogo{
    background-color: #D2D3CD;
    height: 59px;
    width: 270px;
}
#headertopbar{
    background-color: #fafbf4;
    height: 59px;
    width: calc(100% - 270px);
}
#headerbottombar{
    background-color: #f3f4ed;
    height: 36px;
    width: 100%;
    box-sizing: border-box; /*rest of this border is in trianglewrap*/ /*this css is optimizable? put all the border attributes apart from the width on the highest html element. This could cause a 0px border to be rendered on every div tho. Nice for easily adding border.*/
    border: #dfe0da solid;
    border-width: 0px 0px 1px 0px;
}
#drawerFold{
    width: 268px; /*de breedte van de balk min 2, de breedte van de handle, zodat de handle geen donkere border erboven heeft*/
}
#drawerFoldWrapper{
    display: block;
    height: 36px;
    width: 270px;
    float: left;
    margin-right: 5px;
}
#canvaswrapper{
    height: calc(100% - 95px);
}
#leftsidebar{
    width: 270px;
    background-color: #f3f4ed;
    height: 100%;
    z-index: 1;
}
#logowrapper{
    margin: 8px;
    margin-left: 10px;
    width: 250px;
}
.trianglewrap{
    top: 12px;
    height: 9px;
    display: block;
    box-sizing: border-box; /*rest of this border is in trianglewrap*/
    border:hsla(0, 0%, 84%, 1) solid;
    border-width: 0px 0px 1px 0px;
}
#foldbutton{
    margin-top: 15px;
    height: 20px;
}
#wraparrow{
    left: 47.5%;
}
#drawerFold{

}
#foldbutton .trianglewrap{
    background-color: #f3f4ed;
    transition: background-color 300ms ease;
}
#foldbutton:hover .trianglewrap{
    background-color: #e1e2dc;
    transition: background-color 300ms ease;
    animation-delay: 150ms;
}
#foldbutton:hover #wraparrow {
    border-color: #fafbf4 transparent transparent transparent;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/*
*
*                       here be header stuff
*
*/

#filenamebar{
    color: #777777;
    height: 35px;
    width: 100%;
}
#optionsbar{
    height: 23px;
    width: 100%;
}
#filenamebar a{
    display: block;
    font-weight: 500;
    font-size: 20px;
    margin-left: 8px;
    margin-top: 9px;
}
.optionbaritem {
    color: #606060;
    /*padding: 5px 7px 3px 7px;*/
}
.optionbaritem{
    z-index: 1;
    background-color: #fafbf4;
    transition: background-color 200ms ease;
}
.menuitemtext{
    padding: 5px 7px 3px 8px;
    display: block;
}
.menuitemtext:hover {
    background-color: #F7F8F1 !important;
    transition: background-color 200ms ease !important;
}
/*
.optionbaritem:hover .headerfoldout{
    background-color: #f3f4ed ;
    transition: background-color 200ms ease;
    box-shadow: 3px 3px 10px #dfe0da;
}*/
.headerfoldout{
    display: block;
    padding: 0 0 4px 0;
    background-color: #f3f4ed;
    box-shadow: 3px 3px 10px #dfe0daa6;
}
.headerfoldout a{
    display: block;
    padding: 3px 0 3px 8px;
    background-color: #f3f4ed;
    transition: background-color 200ms ease;
}
.headerfoldout a:hover{
    background-color: #F7F8F1;
    transition: background-color 200ms ease;
}
#optionbaritem1{
    width: 38px;
}
#optionbaritem2{
    width: 90px;
}
#optionbaritem3{
    width: 115px;
}
#optionbaritem4{
    width: 45px;
}
#optionbarmenu3{
    width: 125px; /*to be wider then the title*/
}
#optionbarmenu2{
    width: 150px;
}
#optionbarmenu1{
    width: 100px;
}
#optionbarmenu4{
    width: 120px;
}
.headericonsvg{
    fill: #D2D3CD; /*#dfe0da9e;*/
}
.headertoolwrapper{
    float: left;
    width: 35px;
    margin: 0 1px 0 1px;
}
.headertool{
    margin: 0 8px 3px 8px;
    width: 18px;
}
.headertoolwrapper:hover .headericonsvg{
    fill: #c4c5bf;
}
#redo, #undo{
    margin-top: 9px;
    width: 14px;
}
#zoomin, #zoomout{
    margin-top: 10px;
}
.divider{
    float: left;
    margin: 11px 5px 4px 5px;
    width: 0px; height: 16px;
    border-left: 1px solid #e6e7e1;
}
#Quicksave{
    margin-top: 10px;
    width: 17px;
}
#group{
    margin-top: 11.5px;
}
#label{
    width: 21px;
    margin-top: 11.5px;
}

/*
*
*                       here be sidebars
*
*/

#canvaswrapper div{
    /*box-shadow:inset 0px 0px 0px 1px #e7ebeb; /*helps position elements*/
}
#leftsidebar{

}
#leftsidebarhandlewrapper{
    display: inline-block;
    float: right;
    padding: 0 10px 0 10px;
    margin: 0 -10px 0 -10px;
    height: 100%;
    width: 2px;
}
#leftsidebarhandle{
    float: left;
    height: 100%;
}
#leftsidebarhandlevisible{
    float: left;
    height: 100%;
    width: 2px;
    background-color: #dfe0da;
    transition: background-color 200ms ease;
}
.leftsidebarhandleinvisible{
    margin-left: -6px;
    padding-left: 6px;
    opacity: 0;
    float: left;
    height: 100%;
    width: 0px;
    background-color: #D2D3CD;
    transition: opacity 250ms ease;
}
#sidebararrowwrapper{
    height: 100%;
    opacity: 0;
    transition: opacity 250ms ease;
}
.drawerhandlearrow{
    top: -50%;
    float: left;
}

#leftarrow{
    right: 15px;
}
#rightarrow{
    margin-top: -14px; /*height of arrows*/
    left: 4px;
}
#drawerwrapper{
    width: calc(100% - 2px); /*the px value is the width of the border*/
    float: left;
}
.drawer{
    clear: both; /*so the contents of multiple drawers don't want to float together*/
    margin-bottom: 8px;
}
.drawername{
    padding: 10px 0 11px 0;
    font-size: 15px;
    text-align: center;
    display: block;
    background-color: #D2D3CD; /*dfe0da nemen bij hover over selection? Of andersom?                                   hsla(70, 6%, 86%, 1)*/
    color: #fff;
}
.drawername:not(#buttonsdrawertitle){ /*not firstchild werkte hier niet for some reason, dus aparte id gemaakt*/
    border-top: solid  hsla(0, 1%, 84%, 1) 1px;
}
#buttonwrapper{
    margin: 2px 4px 2px 4px;
    padding-left: 8px;
}
.button:hover{
    border-color: #fafbf4;
    transition: border 400ms;
}
.button{
    box-sizing: border-box;
    display: block;
    background-color: #d3d3cd;
    height: 40px;
    width: 40px;
    float: left;
    margin: 8px 8px 8px 0;
    border: #d3d3cd 2px solid;
}
.sidebarstuff {
    color: #BBBBBB;
}
#nondrawersidebarstuffwrapper{
    margin-top: 18px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 228px;
}
.drawerbox{
    display: none;
}
.drawer.draweropened .drawerbox{
    display: block;
}

/*
*
*                       here be the advanced options tab
*
*/

#toggleadvancedwrapper{
    margin-top: 5px;
    border: 1px solid #dfe0da;
    border-width: 1px 0 1px 0;
}
#toggleadvanced{
    margin: 6px;
}
#toggleadvanced a{
    width: calc(100% - 32px);
}
#toggleadvanced label{
    float: right;
}
#toggleadvanced a{
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    display: block;
    max-height: 16px;
    line-height: 16px;
}

.switch {
    margin-top: -16px;
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dfe0da;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: #f3f4ed;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider:before {
    background-color: #D2D3CD;
}
input:checked + .slider {
    background-color: #e7ebeb;
}
input:focus + .slider {
    box-shadow: 0 0 1px #D2D3CD;
}
input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 17px;
}
.slider.round:before {
    border-radius: 50%;
}

/*
*
*                       here be searchbar styling
*
*/

#searchbarwrapper{
    border: 1px solid #dfe0da;
    border-width: 1px 0 0 0;
}
#searchbar{
    margin: 6px;
    width: 100%;
    max-width: 216px;
    /*margin-left: 39px; /*veranderen in calc om beweegbaar te maken*/
}
#searchbox {
    width: 100%;
    border: none;
    background-color: #f3f4ed;
    color: #BBBBBB;
}
#searchform{
    width: calc(100% - 27px);
}
#searchbox::placeholder{
    color: #BBBBBB;
}
#searchbox::-webkit-input-placeholder {
    color: #BBBBBB;
}
#searchbox::-moz-placeholder {
    color: #BBBBBB;
}
#searchbox:-ms-input-placeholder {
    color: #BBBBBB;
}
#searchbox:focus{
    outline: 0;
}
#searchbox::-webkit-search-decoration, #searchbox::-webkit-search-results-button, #searchbox::-webkit-search-results-decoration {
    display: none;
}
#searchbox::-webkit-search-cancel-button{
    -webkit-appearance: none;
}
#searchbox::selection{
    background-color: #D2D3CD;
    color: #fff;
}
.searchbutton{
    margin-top: -16px;
    background-color: inherit;
    border: none;
    outline: 0;
    float: right;
}
.searchbutton:hover .colorstyle{
    fill: #00AEEF;
    transition: fill 400ms ease;
}
.searchbutton{transition: fill 400ms ease;}
.searchbutton svg{
    width: 15px; height: 15px;
}

/*
*
*                       here be the canvas
*
*/

#canvas{
    position: absolute;
    top: 0;
    background-color: #00AEEF;
    float: left;
    width: 100%;
    height: 100%;
}

/*
*
*                       here be dragging button stuff
*
*/

.draggingbutton{
    z-index: 1;
    position: absolute;
    display: block;
    background-color: #d3d3cd;
    height: 40px;
    width: 40px;

    /*pick up animatie hieronder*/
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-name: wobble;
    animation-name: wobble;
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;


}

@-webkit-keyframes wobble {
    16.65% {
        -webkit-transform: translateY(7px);
        transform: translateY(7px);
    }
    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes wobble {
    16.65% {
        -webkit-transform: translateY(7px);
        -ms-transform: translateY(7px);
        transform: translateY(7px);
    }
    33.3% {
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        -ms-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.buttonbeingdragged{
    box-sizing: border-box;
    background-color: #f3f4ed;  /*kan ook fafbf4, is kleur van header top bar */
    border: #D2D3CD 2px;
    border-style: dashed solid;
    transition: background-color 200ms ease;
}
.button{
    transition: background-color 600ms ease;
    transition: border 400ms;
}
.droppedbutton{
    background-color: #fafbf4;
    transition: background-color 500ms ease;
    z-index: 0;
}

/*
*
*                       animaties hieronder (onderaan zodat ze voorrang krijgen)
*
*/

#leftsidebar{
    opacity: 1;
    transition: opacity 250ms ease;
    transition: transform 500ms ease;
}
.sidebarhidden{
    opacity:0;
    transition: opacity 250ms ease;
    transform: translateY(-100%);
}
.buttonfoldedin{
    border: #dfe0da solid;
    border-width: 0px 0px 1px 0px;
}
.widthresizecursor { cursor: col-resize; }

.sidebarhovered{
    display: block;
    opacity: 1;
    background-color: #D2D3CD;
    transition: opacity 250ms ease;
}
.sidebarhoveredarrow{
    opacity: 1 !important;
    transition: opacity 1s ease;
}

/*
*
*                       overlay stuff
*
*/

#OpenOverlay {
    position: absolute !important;
    width: 100%!important;
    height: 100%!important;
    background-color: #777777!important;
    opacity: 0.4!important;
    z-index: 100!important;
}
#OpenPopup {
    position: absolute;
    background-color: #f2f2f2;
    opacity: 1;
    z-index: 101;
    width: 550px;
    height: 560px;
    margin-top: 10%;
    margin-left: calc(50% - (550px/2));
    display: block;
}
#OpenPopup h1 {
    font-size: large;
    margin: 28px 20px 10px 60px;
}
#optionbox{
    width: 750px;
    height: 350px;
}
.board-option{
    display: block;
    background-color: #d4d4d4;
    width: 170px;
    height: 160px;
    padding: 30px;
    margin-left: 30px;
    margin-top: 16px;
    margin-bottom: 7px;
    float: left;
}

.board-option a{
    width: ;
}