@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;400;500;600;700&family=Secular+One&display=swap');

body {color: #333;font-family: "Mukta","Helvetica Neue",Helvetica,Arial,sans-serif}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: "Mukta","Helvetica Neue",Helvetica,Arial,sans-serif}

/** Login page **/
button, input{border-radius: 10px !important;}
.branding{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(16, 14, 14, 0.27)), url(../images/biometric.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.branding {color: #fff; float: left; height: 100vh; width: 50vw}
.branding .logo img {margin: 20vh auto 0;width: 180px}
.branding .company-name {margin-top: -25px}
.login-logo{display: flex;flex-direction: row;justify-content: center;margin-top: 13vh}
.login-logo img{width: 100px}
.branding .app-name {
    background: linear-gradient(70deg, #ffffff, #ffffff);
    -webkit-background: -webkit-linear-gradient(70deg, #ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    font-weight: 600;
    margin-top: 40vh;
    text-transform: uppercase
}
#content {float: right;height: 100vh;width: 48%}
#content.form form {border: none; padding: 0; margin-top: 70px}
#login-form input.form-control {border: none; border-radius: 0; border-bottom: 1px solid; margin-top: -10px}
footer {color: #fff;position: absolute;bottom: -15px;margin: 30px}
footer .company-name {color: #fff}
#admin-nav footer {color: #545454}
/** End login page **/

a {color: #303F9F;}
#user-home, .nav>li.show-search, .go-to-website {display: none}
.cta {font-family: "Mukta","Helvetica Neue",Helvetica,Arial,sans-serif}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {color: #333}
.nav-pills>li>a {color: #333}
#object-detail .empty, .member .about, .ik-li .about,
#app-nav .breadcrumb li, .text-muted {color: #666 !important;}
#app-nav .app-logo {display: none}
.btn-success {background-color: #3F51B5;border-color: #3F51B5;}
.nav-pills>li>a {font-weight: 500}

#banner {height: 140px;overflow: hidden;}
#banner .photo {background: #fff no-repeat center;background-size: 100%;border: 4px solid #e6e6e6;border-radius: 50%;height: 120px;margin: 20px auto 0;width: 120px;}
#banner .photo img {height: 100%; width: 100%}
#app-nav {font-weight: 200}

#modal-generic-notice .form-group {margin-top: 40px;text-align: left}
.list-group-item.school:hover .actions {display: none}
.list-group-item .glyphicon-remove {color: #e74c3c}
.results.schools {position: absolute; z-index: 10}
.results.schools .spinner {
    display: block;
    height: 100%;
    left: auto;
    padding-top: 0;
    position: absolute;
    top: auto
}

.badge.amount {background: #43A047;margin-left: 10px}

@media (max-width: 767px) {
    #content {float: none;padding: 0 15px;width: auto;}
    #content.form {padding-top: 0}
    .branding {background: none; float: none; height: auto; width: auto}
    .branding .logo img {margin-top: 0; width: 150px}
    #content.form form {margin-top: 45px}
    .branding .app-name {font-size: 35px;margin-top: -10px;}
    footer {color: #333;width: 90%;margin: 30px auto;}
    footer .company-name {color: #333}
}

@media (min-width: 768px) {
    .navbar-default .navbar-brand {color: #666}
    #banner {height: 200px}
    #banner .photo {
        height: 160px;
        margin: 20px auto;
        width: 160px;
    }
}

@media (min-width: 992px) {
    #app-nav .app-name {
        background: #e3e0e6;
        margin-left: -15px;
        padding: 0 15px 12px 20px;
        width: 270px;
    }
    .navbar>.container-fluid .navbar-brand {
        background: #e3e0e6;
        height: 78px;
        margin-left: -15px;
        padding-left: 15px;
        width: 270px;
    }
}