/* html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;} */
html {
    --color_page_background: white;
    --color_page_backgroundDark: #ddd;
    --color_font_primary: black;
    --color_font_primaryLight: #808080;
    --color_font_secondary: white;
    --color_font_secondaryLight: #f2f2f2;
    --color_background_primary: #2e6abf;
    --color_background_primaryLight: #6a98f2;
    --color_background_primaryDark: #00408e;
    --color_background_secondary: #38b1b7;
    --color_background_secondaryLight: #73e3e9;
    --color_background_secondaryDark: #008187;
    --color_background_tertiary: #7400ba;
    --color_background_tertiaryDark: #3e0089;
    --color_background_tertiaryLight: #a945ed;
}

body {
    max-width: 100%;
    min-height: 100%;
    /* background-color: #171717; */
    background-color: var(--color_page_background);
    margin: 0px;
    padding: 0px;
    color: var(--color_font_primary) !important;
}

.headbox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    top: 0;
    left: 0;
    width: 100%;
    
    /* background-image: linear-gradient(white,#bdd3ff); */
}

    .headbox div.title {
        display: inline-block;
        color: var(--color_font_primary);
        vertical-align: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 20px;
    }

        .headbox div.title h1 {
            display: inline-block;
            padding-left: 50px;
            margin: auto;
            font-size: 40px;
            vertical-align:middle;
        }


.userbox {
    position: absolute;
    display: block;
    top: 16px;
    right: 16px;
    font-size: medium;
}

    .userbox td {
        text-align: center;
        padding: 5px;
        padding-top: 0px;
    }



.topnav {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    background-color: var(--color_page_background);
    border-bottom: 1px dotted var(--color_background_secondary);
    position: sticky;
    z-index: 99;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 16px;
}


    .topnav p {
        display: inline-block;
        float: right;
    }

    .topnav a {
        height: 100%;
        float: left;
        text-align: center;
        padding: 20px 40px 20px 40px;
        color: var(--color_font_primary);
        text-decoration:none;
    }

        .topnav a:hover {
            color: var(--color_background_primary);

        }

        .topnav a.active {
            color: var(--color_background_primary);
        }


/* The sidebar menu */
.sidenav {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    align-self: flex-start;
    flex-shrink: 0;
    height: auto;
    max-width: 140px;
    min-width:80px;
    /* z-index: 1;  Stay on top */
    top:50px;
    left: 0px;
    font-size: 15px;
    padding-top: 10px;
}

    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        color: var(--color_font_primaryLight);
        display: block;
    }

        .sidenav a:hover {
            color: var(--color_font_primary);
        }

        .sidenav a.active {
            color: var(--color_font_primary);
        }

.mainContent {
    width: auto;
    max-width: 92%;
    min-height: 500px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: medium;
    padding: 2px;
    flex-shrink: 0;
    flex-grow: 1;
    padding-left: 10px;
   
}

.pageContainer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-content:stretch;
    justify-content: flex-start;
    width: auto;
    height:100%;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav {
        font-size: 18px;
    }
}


div.backtrace {
    position: relative;
    display: block;
    padding-bottom: 10px;
    top:  0px;
    left: 0px;
    
    color: var(--color_font_primary);
}
    div.backtrace a {
        cursor: pointer;
        color: var(--color_font_primary);
        text-decoration: underline;
    }

div.flexstretcherHor{
    height:1px;
    width: 80px;
}

div.iteminfobox {
    position: relative;
    border: 1px solid var(--color_background_secondary);
    display: inline-block;
    flex-direction: column;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;
    top: 0px;
    background-color: var(--contactBlue);
    padding: 20px 100px 0px 100px;
    margin-bottom: 12px;
}
span.infotoggle {
        display:block;
        margin: -20px -100px 10px -100px;
        padding: 5px 0px 5px 10px;
        background-color: #00000015;
    }

div.iteminfobox > div > p:first-child {
    color: var(--color_font_primaryLight);
    position:relative;
    top:8px;
    padding:0px;
    margin:0px;
}

div.iteminfobox div.dx-button {
    
}

div.iteminfobox h2{
    font-weight:bold;
    display:inline;
    vertical-align:middle;
}

    div.iteminfobox #inrelationspan {
        color: var(--color_font_primaryLight);
        position: relative;
        bottom: 10px;
        font-size: 16px;
    }

    div.iteminfobox #externalmapinfo {
        color: var(--color_font_primaryLight);

        top: 90px;
        left: 40px;
        font-size: 16px;
    }

.noLn {
    text-decoration: none !important;
}

.pn1{padding: 8px;}

div.section > div.iteminfobox {
    border: 0px solid var(--color_background_secondary);
    margin-bottom: 8px;
}

div.section {
    display:block;
    max-width:100%;
    padding:2px;
    margin: 12px 0px 12px 0px;
    border: 2px solid var(--color_page_backgroundDark);
   
    box-shadow: 8px 8px 10px #bbbbbb;
}
div.section > div {
    padding-top: 12px;
    padding-left:12px;
    padding-bottom:0px;
}
div.section div.devex-datatable{
    padding: 0px;
}

div.section h3 {
    position: relative;
    display: inline-block;
    top: 8px;
    margin: 0px;
    padding: 10px;
    padding-top: 20px;
}
div.section > h3 + hr {
    margin: 0px;
    margin-bottom: 8px;
    width: 30%;
    border: 1px solid var(--contactBlue);
}

p.smallinfo {
    color: var(--color_font_primaryLight);
    padding-left: 10px;
}

div.actionbox {
    display: inline-flex;
    width:auto;
    flex-direction:row;
    align-items:center;
    gap: 0.2rem;
    position: relative;
    margin: 0.5rem;
    top: 0.2rem;
}
.actionbtn {
    display: inline;
    min-width: 30px;
    max-width:150px;
    height: 30px;
    background-color: dodgerblue; /* Blue background */
    border-radius: 5px;
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 5px 8px; /* Some padding */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
    align-content: center;
    vertical-align:middle;
    text-decoration:none;
}
/* Darker background on mouse-over */
.actionbtn:hover {
    background-color: lightgrey;
}
.actionbtn i{
    margin:auto;
    padding:0px;
}

div.details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px;
}

table.objectdetails {
    margin-bottom:16px;
    border-collapse: collapse;
}
table.objectdetails td, .table.objectdetails th{
    padding: 12px;
    padding-left:0px;
}
    table.objectdetails tr:hover {
        /*background-color: var(--color_page_backgroundDark); */
    }

    table.objectdetails th {
        height: 0px;
        padding: 8px;
        text-align: left;
        background-color: var(--color_background_secondary);
        color: var(--color_font_secondary);
        font-weight: bold;
    }

table.objectdetails td {
    min-width: 400px;
}

table.objectdetails td:first-child {
    font-weight:bold;
}


div.charts {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content:flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 50px;
    min-height: 50px;
}


p.pagelist {
    display:inline;
}

.footer {
    display: block;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
    float: right;
    margin-top: 50px;
    margin-bottom: 40px;
    align-items: flex-end;
}

table.moveproject {
    text-decoration:none;
    color:black;
}

    table.moveproject td.selectable {
        padding: 8px;
        border: 1px solid black;
        background-color: #d3dcde;
    }
table.moveproject td.selectable:hover {
    background-color: #9c9c9c;
    cursor: pointer;
}
    table.moveproject td.non-selectable {
        padding: 8px;
        border: 1px solid lightslategrey;
        background-color: white;
        color: lightslategrey;
    }

table.moveproject td.selectable > a {
        text-decoration: none;
        color:black;
    }


table.moveproject td.moving{
    color: white;
    background-color: lightslategrey;
    }

.section-tab > hr {
    border-bottom:1px solid black;
}

.current-time {
    border-left: 2px dashed #337ab7 !important;
}

.navrange {
    display: block;
    border-top: 2pt dotted #c4d8ef;
    padding-top: 8px;
    padding-bottom: 8px;
}
.navrange a{
    margin: 8px;
    padding: 8px;
}