html,
body {
    height: 100%;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

/* padding here pads page content (below toolbar) */
.wrap > .container {
    padding: 171px 15px 20px;
}

/* Remove fixed width constraints and make container flexible */
@media(min-width: 1200px) {
    .container {
        max-width: 95%;
        width: 95%;
    }
    /* Remove fixed width from user-index */
    .user-index {
        width: 100%;
    }
}

/* User index page layout - flexible and responsive */
.user-index {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.user-list-container {
    flex: 1 1 70%;
    min-width: 0;
    /* Remove overflow: hidden to allow scrolling */
}

.user-list-content {
    padding: 0;
}

/* Wrap GridView in scrollable container */
.user-list-content .grid-view {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Ensure table doesn't break layout */
.user-list-content .grid-view table {
    min-width: 100%;
    width: max-content;
}

/* Table responsive wrapper for horizontal scrolling */
.table-responsive-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding: 0 15px;
}

.table-responsive-wrapper .grid-view {
    margin-bottom: 0;
}

.user-sidebar-container {
    flex: 0 0 25%;
    min-width: 200px;
    max-width: 300px;
}

.sidebar-panel {
    padding: 10px;
    margin-bottom: 20px;
}

.legend-panel {
    padding: 10px;
    overflow: auto;
}

/* Tablet and below - stack sidebar below */
@media(max-width: 991px) {
    .user-list-container {
        flex: 1 1 100%;
    }

    .user-sidebar-container {
        flex: 1 1 100%;
        max-width: 100%;
        display: flex;
        gap: 15px;
    }

    .sidebar-panel,
    .legend-panel {
        flex: 1 1 50%;
    }
}

/* Mobile - hide legend, stack vertically */
@media(max-width: 767px) {
    .user-sidebar-container {
        flex-direction: column;
    }

    .sidebar-panel,
    .legend-panel {
        flex: 1 1 100%;
    }

    /* Hide less critical columns on mobile */
    .user-list-content .grid-view th:nth-child(3), /* Username */
    .user-list-content .grid-view td:nth-child(3),
    .user-list-content .grid-view th:nth-child(6), /* Role */
    .user-list-content .grid-view td:nth-child(6) {
        display: none;
    }
}

/* Small mobile - hide more columns */
@media(max-width: 575px) {
    .legend-panel {
        display: none;
    }

    /* Hide Organization column on very small screens */
    .user-list-content .grid-view th:nth-child(5), /* Organization */
    .user-list-content .grid-view td:nth-child(5) {
        display: none;
    }
}

.footer {
    height: 80px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    padding-bottom: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.sidebar_upper_div {
    padding: 1.5% 5%;
    background: #233140;
    border-radius: 4px;
}

.sidebar_title {
    font-weight: bold;
    color: white;
}

.sidebar_lower_div {
    margin: 0 0 15px 0;
    padding: 5%;
    background: white;
    border-style: solid;
    border-width: 1px;
    border-color: #dbdbdb;
    border-radius: 4px
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: "\e151";
}

a.desc:after {
    content: "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view td {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 75px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav > li > form {
    padding: 8px;
}

@media(max-width:767px) {
	.nav li > form {
	    padding: 3px;
	}
}

.nav > li > form > button:hover {
    text-decoration: none;
}
/*******************************************/
/* margin here lowers navbar position beneath logos in toolbar */
.navbar {
    margin-top: 100px;
    background-color: #A7BA56;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > .active > form > .btn
{
    border: 5px;
    border-color: #000;
    background-color: #A7BA56;
    color: #000;
}

/* settings for a fixed, sticky toolbar with logos on top and navbar on bottom */
.sticky-toolbar {
    position: fixed;
    height: 151px;
    width: 100%;
    background-color: white;
    margin-bottom: 30px;
    z-index: 999;
}

.btn-primary {
    background-color: #16468e;  /*UK Blue*/
}

.btn-report {
    background-color: #CD5C5C;  /*UK Blue*/
    color: #FFFFFF;
}
.col-sm {
    float: left;
    width: 30%;
    margin: auto;
}

.help-area {
    height: 100%;
    width: 100%;
    /*
    background-color: red;
    */
}

.survey-label {
    width:80%;
    margin: 0 auto;
    font-style: oblique;
    font-size: medium;
}

.survey-table {
    height: auto;
}

/* CSS doesn't take affect until NavBar turns into dropdown */
/* Screen width <= 767px*/
@media(max-width:767px) {

    /* Changes background color of dropdown menu not including */
    /* initial dropdown link itself (e.g. Actions) */
    .navbar-inverse .navbar-nav .open .dropdown-menu {
        background-color: black;
    }

    /* Changes background color of open active dropdown link */
    .navbar-inverse .navbar-nav .open .dropdown-menu .active > a {
        background-color: black;
    }
}