.kiosk {
    background-image: url('/images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

html {
    font-size: 14px;
}

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

.custom-footer {
    position: absolute;
    bottom: 0px;
    color: #eee;
    width: 100%;
    white-space: nowrap;
    background-color: dimgray;
}

.login-bg {
    position: absolute;
    width: 100%;
    height: 550px;
    left: 0;
    background-repeat: no-repeat;
    z-index: -1;
    background-size: cover;
    opacity: .5;
    /*background-image: url('/images/loginImage.jpg');*/
}

@media (min-width: 768px) {
    .login-bg {
        width: 60%;
        left: 50%;
        transform: translate(-50%);
        max-width: 1000px;
    }
}

.login-details {
    width: 100%;
}

@media (min-width: 768px) {

    .login-details {
        width: 60%;
        max-width: 1000px;
    }
}

.login-details h1 {
    width: 100%;
}

.login-details .row {
    width: 100%;
}

.modal-preview-content {
    max-width: 90%;
}


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

body {
    margin-bottom: 60px;
}

#HeaderBanner {
    background-color: lightgray !important;
}

#sidebar.active {
    margin-left: -19rem;
}

#sidebarCollapse:hover {
}

#content.active {
    width: 100%;
    margin: 0;
}

.vertical-nav {
    display: none;
    z-index: 999;
    min-width: 19rem;
    width: 19rem;
    height: auto;
    position: absolute;
    top: 110px;
    left: 0;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    transition: all 0.4s;
    padding-bottom: 3rem;
}

.vertical-nav.fixed {
    position: fixed;
    overflow: scroll;
    top: 0;
    height: 100vh;
}

.hcenter {
    text-align: center;
}

.main-menu li.purple,
.mobile-menu li.purple {
    background-color: #d6dfec;
}

.main-menu li.purple:hover,
.mobile-menu li.purple:hover {
    background-color: #bfc8d6;
}

@media (min-width: 768px) {

    .login-details h1 {
        width: 60%;
    }

    .login-details .row {
        width: 60%;
    }

    .modal-preview-content {
        width: 80%;
        max-width: 1300px;
    }

    /* line 18, development/assets/scss/_base.scss */

    .col-2 {
        width: 50%;
        float: left;
    }

    /* line 12, development/assets/scss/_homepage.scss */

    .nav-item.mobile {
        display: none;
    }

    .nav-item.username {
        border: none;
    }

    .nav-item.username .nav-link {
        margin-top: .25rem;
    }

    /* line 27, development/assets/scss/_homepage.scss */

    .vertical-nav {
        display: block;
    }

    /* line 72, development/assets/scss/_homepage.scss */

    .main-menu li:hover,
    .mobile-menu li:hover {
        background-color: #ededed;
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.4) !important;
    }

    /* line 96, development/assets/scss/_homepage.scss */

    .mobile-menu .mobile form,
    .mobile-menu li form {
        padding: 0;
    }

    /* line 101, development/assets/scss/_homepage.scss */

    .mobile-menu .mobile form button,
    .mobile-menu li form button {
        color: #343a40 !important;
        box-shadow: none;
        background-color: transparent;
        width: auto;
    }

    /* line 114, development/assets/scss/_homepage.scss */

    .mobile-menu .mobile:hover,
    .mobile-menu li:hover {
        background-color: transparent;
        box-shadow: none !important;
    }

    /* line 124, development/assets/scss/_homepage.scss */

    .page-slide {
        width: calc(100% - 17rem);
        margin-left: 17rem;
        transition: all 0.4s;
    }

    /* line 144, development/assets/scss/_homepage.scss */

    #sidebarCollapse {
        display: inline-block;
        background: transparent;
        border: none;
    }

    /* line 163, development/assets/scss/_homepage.scss */

    #content {
        width: 100%;
        margin: 0;
    }

    /* line 167, development/assets/scss/_homepage.scss */

    #content.active {
        margin-left: 19rem;
        width: calc(100% - 19rem);
    }
}