<style>

html
{
    width: 100%;
    padding: 0px;
    margin: 0px;    
}

a, a:visited
{
    color: blue;
}

a
{
    text-decoration: none;
}

a:hover
{
    background-color: #00acf588;
}

body
{
    margin: 0px;
    padding: 0px;    
    width: 100%;
    font-family: "Calibri", "Roboto", sans-serif;
}

.unfinished
{
    color: rgb(200,200,200);
}

.errorbox
{
    background-color: pink;
    border: 1px solid black;
}

#contactbox
{
    height: 99vh;    
    background-color: rgb(255,255,255);    
    overflow: auto;    
    border: 3px solid white;
    padding: 0;    
    background-color: rgb(151,239,255);
}

#filter
{
    float: left;
    top: 0px;
    left: 0px;
    height: 2em;
    width: 25vw;
    background-color: green;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

#filter input
{
    height: 2em;
    width: calc(25vw - 4em - 4px);
    padding-left: 1em;
    padding-right: 1em;
    margin: 0px;
    border: 2px solid rgb(34, 85, 123);
}

#filter button
{
    height: 2em;
    width: 2em;
    border: 0px solid transparent;
    padding: 0px;
    margin: 0px;
    background-color: rgb(34, 85, 123);
}

#filter button:hover
{
    background-color: rgb(68,170,246);
    cursor: pointer;
}

p
{
    padding: 0 15px 15px 15px;
}

#closelink
{
    font-family: "Times", "Times New Roman", "serif", "sans-serif", "EmojiSymbols";
    color: white;
    position: absolute;
    right: 1.5em;
    top: 0.6em;
    float: none;
    cursor: pointer;
}

h1
{
    font-size: 150%;
    margin: 15px;
}

div.link
{
    display: inline;
}

div.link:hover, a.contact:hover
{
    cursor: pointer;
    color: blue;
}

a.contact
{
    color: white;
}

#list 
{       
    background-color: white; //rgb(255,255,0);
    max-width: 25vw;
    width: 25vw;
    height: calc(100vh - 2em);
    float: left;
    overflow: auto;
    padding: 0px;
    margin: 0px;
}

#list table
{
    width: 100%;
}

#ramec
{
    width: 100%;
}

#mapa
{
    width: 50vw;
    height: 100vh;
    background-color: white;
    float: right;
    padding: 0px;
    margin: 0px;
}

td
{
    text-align: left;
    vertical-align: top;
}

th
{
    text-align: center;
    background-color: rgb(34, 85, 123);
    color: rgb(255, 255, 255)
}

th.subheader
{
    background-color: rgb(68,170,246);
}
td.selected
{
    background-color: rgb(68,170,246);    
}
td.selected a
{
    color: white;
}

.limit_width
{
    width: 100%px;
}

#info
{
    width: 25vw;
    height: 100vh;
    background-color: rgb(255,255,255);
    float: right;
    overflow: auto;
}

#info img
{
    display: block;
    object-fit: scale-down;
    width: 100%;
}

#info img.legend
{
    display: inline;
    width: auto;
}

#infocontent
{
    width: 100%;
}

</style>