header, footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #023370;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-family: sans-serif;
}

.map-container {
    width: 100%;
    height: 800px;
    max-height: 800px;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}
.map-container-hidden {
    visibility: hidden;
    max-height: 0;
}
.address-filter {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.address-filter-input {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    margin-bottom: 10px;
}

.custom-dropdown {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    margin-bottom: 10px;
}

.address-filter-button {
    display: block;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 5px;
}

#mainContainer {
    /* No changes here */
}

#recentProblems {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

#problemDetails {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #f9f9f9;
}

#historyBox {
    border: 1px solid #ccc;
    padding: 20px;
    margin-left: 20px; /* Add some space between problemDetails and historyBox */
    background-color: #f9f9f9;
}

/*new 15-7-2024*/
.info-box {
    background-color: #fff;/*#f9f9f9;*/
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    height: 530px; /* Fixed height */
    overflow-y: auto; /* Add scrollbar if content exceeds height */
}

.grid-container2rows {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 10px; /* Space between grid items */
    margin-bottom: 10px; /* Add space between the grid and the rest of the content */
}

.grid-container2rows > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.centered-content {
    text-align: center;
    margin-bottom: 10px;
}

.centered-content div {
    margin-bottom: 5px;
}



/*new 15-7-2024*/

.label {
    /*background-color: #023370;*/ /*#001E44;*/
    /*background: linear-gradient(to left, #023370, #034da8);*/
    background: #023370;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    border-radius: 4px;
    text-align: center;
}

/*new 15-7-2024*/
.send-to-staff {
    width: 100%;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.button-row-new {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 10px;
}

.button-row-new > button,
.button-row-new > input {
    width: 32%;
}

.send-other-row {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 10px;
}

.send-other-row > button {
    width: 49%;
}

.send-other-row > input {
    width: 49%;
}

/*new 15-7-2024*/

#history-text {
    margin-top: 10px;
    color: red;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Creates 6 equal columns */
    gap: 10px; /* Space between grid items */
    margin-bottom: 10px; /* Add space between the grid and the Problem Description */
}

.grid-container > div {
    /* If needed, you can add additional styles for each grid item here */
}

.button-row {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 10px;
}

.button-row > button {
    /* If needed, you can add additional styles for each button here */
}

.labelzones {
    background-color: rgba(255, 255, 255, 0); /* White with 50% opacity */
    /*background-color: transparent;*/
    padding: 1px;
    /*border: 1px solid black;*/
    font-weight: bold;
    text-align: center;
    border-radius: 1px;
}

.side-by-side {
    /*background-color: lightblue;*/ 
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
}
/*half-width is basically the info box right side (when checkmark is toggled)*/
.half-width {
    /*background-color: #002e5e !important;*/
    background:#eee !important;
    /*background: linear-gradient(to right, #003975, #1d8ab8) !important;*/ /*linear-gradient(to right, #002e5e, #1A7BA4) !important;*/
    width: 50%;
}