html,
body {
    height: 100vh;
    background-color: #f5f5f5;
    overflow-x: hidden;
}

.view {
    background: url("../img/MET-UNTHSC-Campus-Social.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

.card .rounded-circle {
    max-width: 150px;
    margin: 0 auto 30px;
    border: 1px solid #ddd;
}

.login-card {
    min-width: 300px;
    background: rgba(255, 255, 255, 0.9);
    padding: 30px 0px;
    font-family: Helvetica;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    border-radius: 0 !important;
}

.active {
    color: #006A31 !important;
}

input:focus {
    box-shadow: none !important;
    border: 1px solid #00778B !important;
}

.green-gradient {
    background: linear-gradient(40deg, rgb(7, 173, 85), #006A31) !important;
}

.green-gradient-rgba {
    background: linear-gradient(40deg, rgb(7, 173, 85, 0.9), rgb(0,106,49, 0.9)) !important;
}

.unt-green {
    background-color: #006A31 !important;
}

.dropdown .dropdown-menu.dropdown-success .dropdown-item:hover, .dropdown .dropdown-menu.dropdown-success .dropdown-item:active, .dropdown .dropdown-menu.dropdown-success .dropdown-item.active,
.dropup .dropdown-menu.dropdown-success .dropdown-item:hover,
.dropup .dropdown-menu.dropdown-success .dropdown-item:active,
.dropup .dropdown-menu.dropdown-success .dropdown-item.active,
.dropleft .dropdown-menu.dropdown-success .dropdown-item:hover,
.dropleft .dropdown-menu.dropdown-success .dropdown-item:active,
.dropleft .dropdown-menu.dropdown-success .dropdown-item.active,
.dropright .dropdown-menu.dropdown-success .dropdown-item:hover,
.dropright .dropdown-menu.dropdown-success .dropdown-item:active,
.dropright .dropdown-menu.dropdown-success .dropdown-item.active {
    background-color: #006A31 !important;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.125rem;
}

.nav-img-custom {
    max-height: 40px;
    border-right: 1px solid #ffffff;
    margin-right: 5px;
    padding-right: 5px;
}

input,
.btn {
    border-radius: 0 !important;
}

#avatar {
    width: 100px;
    height: 100px;
    display: block;
    -webkit-backface-visibility: hidden;
    -webkit-transform: scale(1);
}

.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item {
    width: 160px;
    height: 120px;
    float: left;
    background: #00997B;
    border: 1px solid #333;
    border-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 5px;
    margin-bottom: 20px;
}

.validation-summary-errors ul {
    list-style: none;
    padding-left: 0;
}

/*footer*/
footer.page-footer .footer-copyright {
    background-color: #00778b !important;
    color: #fff;
}

.navbar-brand {
    color: #333333 !important;
}

.nav-separator {
    display: inline-block;
    height: 30px; /* adjust to match logo height */
    border-left: 2px solid #999; /* change color/thickness as needed */
    margin: 0 12px;
    vertical-align: middle;
}