:root {
    --notonmob : none; /*zie mjs*/
}

body {
    margin: auto;
    margin-top: var(--bodytop) ;
    width: var(--bodywidth);
    padding:0;
    overflow: scroll;
    font-family: Arial, Helvetica, sans-serif;
    border: solid 1px rgb(241, 241, 241);
    color: grey;
    display: none;
}

button {
    white-space: nowrap;
}

@-moz-document url-prefix() {
    /* -- firefox only @-moz-document url-prefix() -- */
    button  {
        padding-left:0px;
    }
}

a {
    color: grey;
    text-decoration: none;
}

svg {
    width: 12px;
}

input[type="text"], input[type="email"], input[type="url"], input[_ac]  {
    width: var(--inputwidth); 
}
input[_ac]  {
    width: var(--inputwidth) !important;
}

.red {
    color: red !important;
}


/* --- */

.notonmob {
    display: var(--notonmob);
}
.notonnonmob {
    display: var(--notonnonmob);
}

#navtop {
    position:fixed;
    top:0;
    height: var(--bodytop);
    width: var(--bodywidth); 
    display: flex;
    align-items: center;
    background: rgb(92, 97, 102);
    color: white;
    fill: white;
    z-index: 999;
}
#navtop div {
    margin-right: 2%;
}
    

#navtop svg {
    /*hambo, home, info*/
    /*width: var(--navtopsvg);*/
    width: 30px ;
}


#container {
    display: flex;
    height:100%;
}

#navleft {
    display: var(--navleft);
    position:fixed;
    width:var(--navleftwidth);
    height: 100%;
    padding-top: 3px;
    background-color: rgb(247, 247, 247);
    border-right: solid 1px rgb(241, 241, 241);
}
#navleft div {
    padding: 5px;
}

#content {
    margin-left:var(--marginleft);
    margin-top: 10px;
    width: 100%;
}

#contenttop {
    margin: 4px 3px 4px;
}
#contentbot {margin-left: 3px;}
#contentdrivefiles {
    margin: 14px 3px 4px 10px;
}

.tile  {
    border: solid 1px silver;
    border-radius: 4px;
    padding: 5px;
    margin: 3px 3px 0 0 ;
}
.tile a {
    display: flex;
}

.tile div {
    padding: 5px;
    overflow: hidden;
}
.tile div:nth-of-type(1) {
    min-width: 130px;
}

.tile div:nth-of-type(2) {
    width:100%;
    border: solid 1px silver;
    border-radius: 4px;
}

.tile .img {
    border: solid 1px silver;
    border-radius: 4px;
    margin-left:3px;
}

.tile span[_linkdelete] {
    fill: silver;
    margin-right:2px;
}

.tile .header {
    font-size: larger;
}

.tile .ref {
    color: rgb(146, 146, 146);
}

.xxxtile .summary {
    color: rgb(146, 146, 146); 
    /*font-size: larger;*/
}


#modal {
    display: none;
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: silver;
    opacity: 0.8;
}

#modalcontent {
    display: none;
    position: fixed;
    top:var(--bodytop);
    margin: auto;
    width: calc(var(--bodywidth) - 20px); /*20px = scroll border*/
    height: calc(100% - var(--bodytop));
    overflow: scroll;
    padding: 10px;
    background-color: white;
}