body{
    background-color: #161618;
    /*background-image: url('Background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;*/
    color: #ffffff;
    font-size: 3.5vmin;
    padding: 0;
    margin: 0;
    overflow: auto;
}

.flex
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

section{
    display: grid;
    grid-column-gap: 3%;
    place-items: center;
    align-content: center;
    justify-content: center;
    margin-bottom: 5vmin;
}

section:last-child { 
    margin-bottom: 0;
}

section:nth-child(1) { 
    margin-bottom: 0;
}

.sectionDouble{
    grid-template-columns: 48.5% 48.5%;
    grid-template-areas:
    'header header';
}

/*@media all and (orientation: portrait) {
    .sectionDouble{
        grid-template-columns: none;
        grid-template-areas:
        'header';
    }
}*/

label{
    font-size: 2vmin; 
}

h1{
    font-size: 5vmin; 
}

.sectionDouble h1:first-child{
    grid-area: header; 
}

h2{
    font-size: 7vmin;
    color: #005a8c;
}

.sectionDouble h2:first-child{
    grid-area: header; 
}

h3{
    color: #005a8c;
}

p{
    min-width: 45%;
    margin-top: 0; 
    margin-bottom: 2vh;
}

a{
    color: #0563C1;
}

a:visited{
    color: #954F72;
}

li{
    min-width: 45%;
}

li:not(:last-child) { 
    margin-bottom: 2vmin;  
}

.button {
    border: none;
    border-radius: 0.8vmin;
    padding: 0vmin 0.5vw;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 3vmin;
    transition-duration: 0.4s;
    cursor: pointer;
}

    .button:hover {
        background-color: rgb(218, 218, 218) !important;
    }

    .button:active {
        transition-duration: 0.1s;
    }

.styled-table {
    border-collapse: collapse;
    /*margin: 25px 0;*/
    font-size: 2vw;
    font-family: sans-serif;
    /*min-width: 400px;*/
    box-shadow: 0 0 1vmin rgba(0, 0, 0, 0.15);
    margin-left: auto;
    margin-right: auto;
}

    .styled-table thead tr 
    {
        position: sticky; top: 0; 
        background-color: #005a8c;
        color: #ffffff;
        text-align: left;
    }

    .styled-table tr:last-child
    {
        color: #ffffff;
    }

    .styled-table td 
    {
        padding: 1vmin 1vmin;
    }

    .styled-table th
    {
        text-align: center;
        padding: 1vmin 1vmin;
    }

    .styled-table td 
    {
        font-size: 0.8em;
        color:black;
        overflow-wrap: break-word;
    }

    .styled-table thead td:first-child
    {
        background-color: #009879;
    }

    .styled-table tbody tr 
    {
        background-color: #ffffff;
        border-bottom: 1px solid #dddddd;
    }

        .styled-table tbody tr:nth-of-type(even) 
        {
            background-color: #f3f3f3;
        }

/*Added Colored*/
    .styled-table tbody .Out 
    {
        background-color: #f3cb16;
        border-bottom: 1px solid #000000;
    }

        .styled-table tbody .Out:nth-of-type(even) 
        {
            background-color: #ccaa13;
        }

    .styled-table tbody .In 
    {
        background-color: #30d0df;
        border-bottom: 1px solid #000000;
    }

        .styled-table tbody .In:nth-of-type(even) 
        {
            background-color: #28adb9;
        }

        .styled-table tbody .Emergency 
    {
        background-color: #f33b16;
        border-bottom: 1px solid #000000;
    }

        .styled-table tbody .Emergency:nth-of-type(even) 
        {
            background-color: #cf3213;
        }

    .styled-table tbody .Closed 
    {
        background-color: #30df96;
        border-bottom: 1px solid #000000;
    }

        .styled-table tbody .Closed:nth-of-type(even) 
        {
            background-color: #28b989;
        }

mark.red 
{
    color:#ff0000;
    background: none;
    margin-right: 1px;
}
        
mark.green
{
    color:#4CAF50;
    background: none;
    margin-right: 1px;
}

.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

.window {
    margin: auto;
    position: fixed; 
    width: 90%; 
    height: 90%; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF; 
    color: #000000;
    z-index: 3; 
    /*overflow-y: scroll;*/
    display: grid; 
    align-content: center; 
    justify-content: center; 
    justify-items: center;
}

input {
    font-size: 2vmin;
}

select{
    font-size: 2vmin;
}

input[type=text], 
input[type=password],
select {
    min-width: 15vw;
    padding: 1vmin 1vmin;
    margin: 0.5vmin 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 0.5vmin;
    box-sizing: border-box;
  }

input[type='checkbox'] {
    width: 2.5vmin;
    height: 2.5vmin;
}