body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bold {
    font-weight: bold;
}

.input {
    margin: 5px 0px 5px 0;
}


/* Tabs */
/* Style the tab */
.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 1000px;
}

    /* Style the buttons inside the tab */
    .tab button {
        display: block;
        background-color: inherit;
        color: black;
        padding: 22px 16px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 17px;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current "tab button" class */
        .tab button.active {
            background-color: #ccc;
        }

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 5px 5px 5px 5px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 1000px;
}

.navbar2 {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--main-nav-light-bg);
}

.navbar-item {
    float: left;
    display: block;
    color: var(--main-nav-light-color);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

    .navbar-item:hover {
        background-color: #029761;
        text-decoration: none;
        color: var(--main-nav-light-color);
    }

    .navbar-item:not(.active):hover {
        background-color: var(--main-nav-light-hover);
        text-decoration: none;
        color: var(--main-nav-light-color);
    }

a:hover {
    text-decoration: none;
}

.active {
    background-color: #04AA6D;
}

:root {
    --main-nav-dark-bg: #333;
    --main-nav-dark-color: white;
    --main-nav-dark-hover: #111;
    --main-nav-light-bg: #f1f1f1;
    --main-nav-light-color: black;
    --main-nav-light-hover: #dddddd;
}

.form-control {
    width: 200px;
}

zonegroup {
    display: flex;
}

    zonegroup p {
        display: flex;
        padding-right: 15px;
    }

    zonegroup input {
        display: flex;
    }


.right {
    float: right;
}


.dropdown2 {
    overflow: hidden;
}

    .dropdown2 .dropbtn {
        cursor: pointer;
        font-size: 16px;
        border: none;
        outline: none;
        color: black;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .navbar a:hover, .dropdown2:hover .dropbtn, .dropbtn:focus {
        background-color: green;
        color: white;
    }


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px 12px 7px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

.show {
    display: block;
}

/* Leave this at the end */
@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(25, 25, 25);
        color: white;
    }

    .app-bar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        /* For browsers that do not support gradients */
        background-color: #A3A6A9;
        background-image: linear-gradient(to right, #A3A6A9, #666765);
    }

    .button {
        background-color: darkgray;
        color: white;
    }

    .tab {
        background-color: rgb(36,36,36);
    }

        .tab button {
            color: white;
        }

            .tab button:hover {
                background-color: #666765;
            }

            .tab button.active {
                background-color: darkgray;
            }

    .navbar2 {
        background-color: var(--main-nav-dark-bg);
    }

    .navbar-item {
        color: var(--main-nav-dark-color);
    }

        .navbar-item:hover {
            background-color: #029761;
            text-decoration: none;
            color: var(--main-nav-dark-color);
        }

        .navbar-item:not(.active):hover {
            background-color: var(--main-nav-dark-hover);
            text-decoration: none;
            color: var(--main-nav-dark-color);
        }

    .modal {
        --bs-modal-bg: black;
    }

    .dropdown2 .dropbtn {
        color: white;
    }
}