html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown > .dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

@media (max-width: 799px) {
    .flex-container {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        height: calc(100vh - 78px);
         /* Use full viewport height */
        width: 100vw; /* Use full viewport width */
        border: 0px solid red;
    }

    .flex-child {
        flex: 1; /* Distribute space equally */
        width: 100%; /* Full width */
        height: calc(50vh - 39px); /* Each child takes 50% of the viewport height */
        border: 0px solid black;
    }

        .flex-child:first-child {
            margin-right: 0px;
            border: 0px solid green;
            overflow: auto;
        }
}






@media (min-width: 800px) {
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        width: 100vw;
        height: calc(100vh - 90px);
        border: 0px solid red;
    }

    .flex-child {
        flex: 3;
        border: 0px solid black;
        min-width: 400px;
    }

        .flex-child:first-child {
            margin-right: 0px;
            max-width: 400px;
            max-height: calc(100vh - 90px);
            border: 0px solid green;
            overflow: auto;
        }
}