body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.65rem;
    color: #5d656d;
    display: grid;
    min-height: 100vh;
}

.container {
    max-width:600px;
    margin-bottom:40px
}

.body-content {
    padding-left: 3rem;
    padding-right: 3rem;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 2400px) {
    /* Desktop Styles */
    body {
        background: url("../images/ITSHbuildingLandscape.jpg") fixed center center #151320;
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 50px;
        padding-bottom: 20px;
    }
} 
@media screen and (min-width: 300px) and (max-device-width : 768px)  {

    body {
        background: url("../images/ITSHbuilding.jpg") fixed center bottom #151320;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* Hide captions */
    .carousel-caption {
        display: none;
    }

}

/*  Login Page basics */

    .loginlogo img {
        width: 50%;
        max-width: 220px;
        padding: 20% 0 10% 0;
    }

.page-header {
    padding-bottom: 9px;
    margin: 3rem 0 0 0;
    border-bottom: none;
}

    H1,
    .panel H1,
    .page-header H1 {
        color:#fff;
        letter-spacing: 2px;
        padding-bottom: 3px;
        margin-top: 0px;
        text-transform: uppercase;
    }
    H1 small,
   .panel H1 small,
   .page-header H1 small {
        letter-spacing: 0px;
        font-size:57%;
        line-height:10px
   }
   .panel H3, .page-header H3 {
        color: #fff;
   }
   
   .section-divider {
        display: block;
        width: 15rem;
        height: 3px;
        background: #1dc8cd;
        background: linear-gradient(0deg, #1dc8cd 0%, #55fabe 100%);
        margin-top: 15px;
        margin-bottom: 15px;    
    }

.btn {
    padding: 0.5em 2.1em;
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.btn-primary {
    color: #fff;
    background-color: #293662;
    border-color: #293662;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:visited {
        color: #fff;
        background-color: #3a5ba3;
        border-color: #293662;
    }

   .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
            color: #fff;
            background-color: #3a5ba3;
            border-color: #3a5ba3 !important;
            outline-color: #3a5ba3 !important;
            
        }

.login-page{
    font-size:90%;
}

label,
.login-page label {
    font-weight: normal;
    font-size:80%;
}

.login-page .section-divider {
    margin-bottom:10px;
}

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: transparent;
    color: #4cc1bb;
}

.dropdown-menu > li > a {
    color: #FFF;
    float: right;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: transparent;
    border-color: none;
}
    .panel {
    border-radius: 2px;
    color: #fafafa;
    background-color:transparent;    
}

.panel-title {
    font-size:1.2em
}

.panel-default {
    border:none;
}

.panel-default > .panel-heading {
        color: #fafafa;
        background-color: transparent;
        border: none;
        /*background-color: rgba(248, 248, 248, 0.25) */
}

.list-group-item {
    background-color:transparent;
    border:none;
    font-weight:normal;
}

/*input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill,*/
input.form-control {
    border-radius: 2px;
    background-color: rgba(248, 248, 248, 0.25) !important;
    background-image: none !important;
    color: #1dc8cd !important;
    letter-spacing: 1px;
}

.Consent {
    color:white;
    font-size:85%;
    font-weight:normal;
}

.consent-buttons .btn {
    margin:8px 0;
}

.alert {
    border-radius: 2px
}

.alert-danger {
    z-index: 1000;
    position: absolute;
    left: 15px;
    right: 15px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
footer {
    align-self: end;
    text-align:center;
}
.FootDesc {
    bottom:-25px;
}
footer p, footer p.VersionID {
        color: #c4c4c4;
        font-size: 1em;
        font-weight: normal;
        font-size: 50%;
        margin: 0 0 3px 0;
    }
footer p span {
        font-weight:700!important;
        margin: 0 0 3px 0;
    }

a.UserGuide {
    font-size:0.7em;
    color: #4cc1bb;
}
       
 /* Carousel */
        .carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

@media (min-width: 768px) {
    .navbar-nav {
        float: right;
    }
}

@media (max-height: 560px) {
    footer {
        position: unset;
    }
}