/*** base definitions ***/
* {
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    min-width: 20em;
    margin: 0;
}

a {
    color: #004a99;
}

/* top bar */
div#topbar {
    display: flex;
    align-items: center;
    height: 3rem;
    background-color: #f8f8f8;
    border: thin solid #e7e7e7;
    padding: 0.25rem 1rem;
}

div#topbar a {
    text-decoration: none;
}

div#binderhub-logo {
    font-size: 1.5rem;
    color: #7f7f7f;
    display: flex;
    align-items: center;
}

div#binderhub-logo > * {
    display: inline-block;
    height: 1em;
    line-height: 1;
    letter-spacing: 0.0625rem;
}

div#binderhub-logo span.fac-ief {
    background-color: #004a99;
    color: #ffffff;
    text-decoration: underline 0.125rem;
    text-underline-offset: 0.125rem;
    padding: 0.0625rem 0.125rem;
    border-radius: 0.25rem;
}

/* footer */
div#footer {
    color: #ffffff;
    background-color: #004a99;
    font-size: 0.8rem;
    text-align: center;
    margin-top: auto;
    padding: 0.25rem 1rem;
}

div#footer a {
    color: #ffffff;
}

/*** main content ***/
div.container {
    padding: 2em 0;
    margin: auto;
}

/* start page/authentication dialog and user information */
div#auth-wrap form {
    max-width: 46rem;
    margin: auto;
}

div#auth-wrap div#auth-info {
    border-radius: 0.375em;
    box-shadow: 0 0 0.5em #9f9f9f;
    padding-top: 1rem;
}

div#auth-wrap div#info-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 1rem 1rem 1rem;
    padding-bottom: 1rem;
    border-bottom: thin solid #5f5f5f;
}

div#auth-wrap div#info-head > div {
    flex: 1 1 50%;
    height: 4rem;
}

div#auth-wrap div#info-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #3672b3;
}

div#auth-wrap div#info-logo {
    background-image: url("/bsf/res/img/uniro-logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

div#auth-wrap div#msg-error {
    color: #ff4500;
    font-weight: 700;
    line-height: 1.375;
    margin: 0 1rem 1rem 1rem;
}

input[type=submit] {
    cursor: pointer;
    color: #004a99;
    background-image: none;
    background-color: #ffffff;
    border: thin solid #004a99;
    padding: 0.5em 1em;
    font-size: 0.875rem;
    user-select: none;
}
input[type=submit]:focus,
input[type=submit]:hover {
    color: #ffffff;
    background-color: #004a99;
}

div#auth-wrap div.btn-wrap {
    margin: 0 1rem;
}

div#auth-wrap input#auth-submit {
    margin-bottom: 1rem;
}
div#auth-wrap input#auth-submit.request-expired,
div#auth-wrap input#auth-submit.request-expired:focus,
div#auth-wrap input#auth-submit.request-expired:hover {
    cursor: not-allowed;
    background-color: #ffffff;
    color: #5f5f5f;
    border-color: #5f5f5f;
}

/* maintenance info */
div#maint-info {
    position: relative;
    font-size: 0.875rem;
    line-height: 1.375;
    background-color: #cfdfff;
    color: #373f5f;
    display: inline-block; /* prevent collapsing margins */
    width: 100%;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

div#maint-info div#maint-head {
    position: absolute;
    padding: 0 0.25em;
    background-color: inherit;
    left: 1em;
    top: 0;
    font-size: 0.75rem;
}

div#maint-info div#maint-msg {
    padding: 1em;
    border-top: thin solid #6f7fbf;
    border-bottom: thin solid #6f7fbf;
}

/* TOS */
div#auth-wrap div#tos-head {
    color: #004a99;
    font-size: 1.125rem;
    margin: 0 1rem 0.5rem 1rem;
}

div#auth-wrap ul#service-tos {
    color: #5f5f5f;
    font-size: 0.875rem;
    margin: 0 1rem 1rem 1rem;
    padding-left: 1rem;
}

div#auth-wrap div#auth-info li {
    margin-bottom: 0.375rem;
}

div#auth-wrap ul#service-tos ul {
    font-size: 0.8em;
    padding-left: 1.5em;
    margin-top: 0.375rem;
    list-style-type: disc;
}

div#auth-wrap div#public-tos {
    color: #5f5f5f;
    margin: 0 1rem 1rem 1rem;
}

div#auth-wrap div#public-tos ul {
    font-size: 0.875rem;
    margin: 0.5rem 0;
    padding-left: 1rem;
}

div#auth-wrap div#ack-terms {
    margin: 0 1rem 1rem 1rem;
}
div#auth-wrap div#ack-terms input {
    vertical-align: middle;
}
div#auth-wrap div#ack-terms label {
    vertical-align: middle;
    font-weight: 700;
}

/* public access status */
div#auth-wrap div#public-access {
    font-size: 0.875rem;
    line-height: 1.375;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

div#auth-wrap.not-public div#public-access {
    background-color: #ffffd7;
    color: #575737;
    border-top: thin solid #b7b777;
    border-bottom: thin solid #b7b777;
}

div#auth-wrap.is-public div#public-access {
    background-color: #dfffdf;
    color: #3f5f3f;
    border-top: thin solid #7fbf7f;
    border-bottom: thin solid #7fbf7f;
}

div#auth-wrap div#public-access span.public-date {
    font-weight: bold;
    text-decoration: underline;
}

/* fallback authentication message */
div#auth-wrap div#auth-msg {
    font-size: 0.875rem;
    line-height: 1.375;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    background-color: #ffdfdf;
    color: #5f3f3f;
    border-top: thin solid #bf7f7f;
    border-bottom: thin solid #bf7f7f;
}

/* LDAP authentication dialog */
div#local-login {
    padding: 1em 0 1.5em 0;
}

div#local-login div#login-dialog {
    vertical-align: middle;
    margin: auto;
    font-size: large;
}

div#local-login div.auth-form-header {
    color: #ffffff;
    background: #004a99;
    padding: 0.5em 1em;
    border-radius: 0.25rem 0.25rem 0 0;
}

div#local-login div.auth-form-body {
    padding: 1rem;
    font-size: 0.875rem;
    border: thin solid silver;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
}

div#local-login p.login-error {
    margin: 0.5rem 0 1rem 0;
    color: #ff4500;
    font-weight: 700;
    text-align: center;
}

div#local-login label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0.3125rem;
    font-weight: 700;
}

div#local-login input.input-text {
    display: block;
    width: 100%;
    height: 2rem;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    font-size: 0.875rem;
    color: #555555;
    background-color: #ffffff;
    border: thin solid #cccccc;
    border-radius: 0.125rem;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

div#auth-wrap div#local-login div.btn-wrap {
    margin: 1.25rem 0 0 0;
}

/* redirection to jupyterhub */
div#login-wrap {
    display: none;
}

div#login-wrap form {
    margin: auto;
}

div#login-wrap div#login-header {
    font-size: 1.125rem;
    color: #ffffff;
    background: #004a99;
    padding: 0.625rem 1.25rem;
    border-radius: 0.1875rem 0.1875rem 0 0;
}

div#login-wrap div#login-body {
    padding: 1.25rem;
    line-height: 1.375;
    border: thin solid #c0c0c0;
    border-top: none;
    border-radius: 0 0 0.1875rem 0.1875rem;
}

div#login-wrap p#login-auto-failed {
    color: #ff4500;
    font-weight: 700;
    text-align: center;
    margin-top: 0;
}

div#login-wrap input#login-submit {
    display: block;
    margin: 0 auto;
}

/* fatal error messages */
div.msg-container {
    position: relative;
    width: 100%;
    margin: 1rem auto;
    padding: 0.5rem;
}
div.msg-container.msg-error {
    background-color: #ffdfdf;
    color: #5f3f3f;
}
div.msg-container div.msg-head {
    position: absolute;
    padding: 0 0.25em;
    background-color: inherit;
    left: 1em;
    top: 0;
    font-size: 0.875rem;
}
div.msg-container.msg-error div.msg-body {
    line-height: 1.375;
    padding: 0.75em;
    border: thin solid #bf7f7f;
}


/*** media definitions ***/
@media (max-width: 30rem) {
    div#auth-wrap div#info-head > div {
        flex: 1 1 100%;
    }

    div#auth-wrap div#info-head div#info-desc {
        text-align: center;
    }

    div#auth-wrap div#info-head div#info-logo {
        background-position: center;
        margin-top: 1rem;
    }

    div#auth-wrap input#auth-submit {
        width: 100%;
    }

    div#login-wrap input#login-submit {
        width: 100%;
    }

    /* LDAP authentication dialog */
    div#local-login {
        padding-bottom: 0;
    }
}

@media (min-width: 30rem) {
    div#login-wrap form {
        width: 22rem;
    }

    /* LDAP authentication dialog */
    div#local-login div#login-dialog {
        width: 22rem;
    }
}

@media (min-width: 48rem) {
    div.container,
    div.msg-container {
        width: 46rem;
    }
}

@media (min-width: 62rem) {
    div.container {
        width: 60rem;
    }
}

@media (min-width: 75rem) {
    div.container {
        width: 73rem;
    }
}