:root {
    
        --sqaremarginhalf: 3px;  
        --sqaremargin: 6px;
        --sqaremargindouble: 16px;
        
    }
    
    *{
        
        font-family: forma-djr-mono;
        
    }

a{
    
    text-decoration: none;
    color:black;
    
    border: 0px;
    
}

img{
    
    width:100%;
    min-width:100%;
    min-height:100%;
    
}
    
    body{
        
        margin: 0;
        width: 100%;
        height: 100%;
        background: white;
        overflow:hidden;
        
    }
    
    .menu{
        
        position: absolute;
        
        margin: var(--sqaremargin);
        
        width: calc(100% - var(--sqaremargindouble));
        height: auto;
        
    }
    
    .title{
        
        position: relative;
        float: right;
        
        text-align: right;
        
        
    }

    .id{

        position: relative;
        float:left;

    }
    
    .searchbar{
        
        position: relative;
        float: left;
        
        min-width: calc(20vw - 12px);
        margin-left: var(--sqaremarginhalf);
        
        
    }
    
    .arrow{
        
        position: relative;
        float: left;
        margin-right:0px;
    }
    
    .search{
        
        position: relative;
        float: left;
        padding-left: 1px;
        padding-right: 1px;
        
        margin-right: 0px;
        
        border-bottom: 1px solid black;
        
    }
    
    .search:hover{
        
        background: #204f90;
        color:white;
        cursor:pointer;
        
    }
    
    #a2, #marker, #a3, #number{
        
        display: none;
        
    }
    
    .dropdown{
        
        position:absolute;
        top:36px;
        
        width:calc(20% - 11px);
        max-height: calc(20vw - 6px);
        
        overflow-x:hidden;
        
        left: 6px;
        
        background-color: white;
        border: 1px solid black;
        
        z-index: 10;
        display: none;
        
    }
    
    .placelink, .markerlink, .numberlink{
        
        border-bottom: 1px solid black;
        padding-left: 6px;
        width:100%;
        overflow:hidden;
        
    }
    
    .placelink:hover, .markerlink:hover, .numberlink:hover{
        
        background: #204f90;
        cursor: pointer;
        color:white;
        
    }
    
    .content{
        
        width: calc(100vw - var(--sqaremargin));
        height: calc(100% - 40px);
        
        padding: var(--sqaremarginhalf);
        padding-top: 0px;
        
        overflow: hidden;
        overflow-y: scroll;
        
        position: absolute;
        
        top: 40px;
        
        
        
    }
    
    .tile{
        
        height:0;
        width:calc(20% - 6px);
        padding-bottom: calc(20% - 6px);
        
        margin:3px;
        margin-bottom:6px;
        margin-top:0px;
        
        position:relative;
        float: left;
        
        background-color: lightgrey;
        
    }
    
    .tile:hover{
        
        cursor: pointer;
        opacity: 0.9;
        
    }
    
    .square{
        
        position:absolute;
        
        width: 100%;
        height:100%;
        
    }
    
    .ID{
        
        position: absolute;
        
        padding:6px;
        padding-bottom: 3px;
        
        bottom:0;
        
        color:white;
        
    }

/*MATERIALGROUP*/

#materialmenu{
    
    height: auto;
    
}

#materialcontent{
    
    overflow:hidden;
    overflow-y: scroll;
    height:calc(100% - 85px);
    top:105px;
    
}

#back{
    
    margin-right: 45%;
    border-bottom: 1px solid black;
    
}

.materialtitle{
    
        position: relative;
        float: left;
        width:100%;
        height: auto;
    
        font-size: 40px;
    
        margin-top: 0px;
        margin-bottom: 10px;
        line-height: 1.1;
        
    
}

#prev .arrow{
    
    margin-right: 6px;
    
}

#prev .arrow:hover, #next .arrow:hover{
    
    cursor:pointer;
    
}

#next .arrow{
    
    margin-left: 6px;
    
}

.info{
    
    position:relative;
    float: left;
        
    background-color: white,lightgrey;
    width:100%;
    
    margin:3px;
    margin-bottom:6px;
    margin-top:-6px;
    
}

.scroll{
    
    position: relative;
    float: left;
    
    width:100%;
    height:auto;
    
}

.middle{
    
    position:relative;
    float: left;
        
    background-color: lightgrey;
    width:calc(60% - 22px);
    height: auto;
    
    padding:5px;
    
    margin-left:6px ;
    margin-right:6px ;
    margin-top:0px ;
    
}

.maps{
    
    position:relative;
    float: left;
        
    background-color: lightgrey;
    width:calc(20% - 16px);
    height: auto;
    
    padding:5px;
    
    margin-left:3px ;
    margin-right:3px ;
    margin-top:0px ;
    
}

#mapsmobile{
    
    display:none;
    
}

#mapsbrowser{
    
    display:block;
    
}

.hfgmap{
    
    position: relative;
    float: left;
    width: calc(100%);
    height:auto!important;
    min-width: 1px;
    min-height: 1px;
    background-color: white;

}

#second{
    
    margin-top:6px;
    
}

.bigtile{
        
        height:0;
        width:calc(65%);
        padding-bottom: calc(65%);
        
        margin-right:0.5%;
        
        position:relative;
        float: left;
        
        background-color: lightgrey;
    
}

.bigtile:hover{
    
    opacity:0.9;
    cursor: pointer;
    
}

#materialgroup, #materialhand{
    
    width: calc(34.5%);
    padding-bottom: calc(32.25%);
    margin-right:0;
    margin-left: 0;
    background: white;
    
    margin-bottom: 0;
    
    overflow:hidden;
    
}

#materialgroup{
    
    margin-bottom: 0.5%;
    
}

.alt{
    
    position: absolute;
    top: 50%;
    width:100%;
    height:auto;
    
    text-align: center;
    
    font-size: 10pt;
    
    transform-origin: -50% -50%;
    
}
   
.detail{
    
    width:auto;
    
    margin-right:15px;
    margin-top: 0px;
    margin-bottom: 7px;
    
    position: relative;
    float: left;

    background: white;
    
}

.maps .detail{
    
    font-size: 10pt;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom:6px;
    
    width:calc(100% - 6px);
    text-align: center;
}

.check{
    
    position: relative;
    float: left;
    height:8px;
    width:8px;
border: 1px solid black;
    margin-top:8px;
    margin-right:4px;
    
}
    
@media only screen and (max-width: 1000px) {
  
    .content{
        
        top: 16vw;
        height: calc(100% - 16vw);
        
    }
    
    .menu{
        
        
        
    }
    
    .dropdown{
        
        width: calc(100% - 19px);
        height:auto;
        max-height: calc(100% - 16vw);
        top:16vw;
        
        font-size: 4.5vw;
        
    }
    
    .title{
        
        float: left;
        text-align: left;
        font-size: 4.5vw;
        margin-right: 0;
     
        
    }
    
    #titlematerial{
        
        float:right;
        
    }
    
    #back{
        
        margin-right: 0;
        text-align: right;
        border-bottom: 1px solid black;
        
    }
    
    .searchbar{
        
        width:100%;
        font-size: 4.5vw;
        padding-left:;
        
    }     
    
    .info{
        
        font-size: 4.5vw;
        
    }
    
    .check{
        
        height: 2vw;
        width: 2vw;
        margin-top: 3vw;
        
    }
    
    .tile {
        
        width: calc(50% - 6px);
        padding-bottom: calc(50% - 6px);
        
    }
    
    .materialtitle{
        
        font-size:9vw;
        
    }
    
    #materialmenu{
        
        height: auto;
        
    }
    
    #materialcontent{
        
        top: 30vw;
        
    }
    
    .maps{
        
        width: calc(100% - 12px);
        height: auto;
        margin-top:6px;
        margin-bottom:6px;
    }
    
    #mapsmobile{
    
    display:block;
    
    }

    #mapsbrowser{

        display:none;

    }
    
    .maps .detail{
    
        font-size: 20pt;
        
    }
    
    .middle{
        
        width: calc(100% - 12px);
        margin-top: 6px;
        margin-bottom:6px;
        margin-left:3px;
        
    }
    
    .bigtile{
        
        width: calc(100% - 6px);
        height:0;
        padding-bottom: calc(100% - 6px);
        
    }
    
    #materialgroup, #materialhand{
        
        width: calc(50% - 6px);
        padding-bottom: calc(50% - 6px);
        margin-top: 6px;
        
    }
    #materialhand{
        
        margin-left: 1%;
        
    }
    
}

/*SCROLLBAR*/
    
    /* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: white; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #204f90; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: grey; 
}