html {
  font-size: 14px;  
}

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

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

body {
  margin-bottom: 60px;
}


/*jds custom*/


body {
    background-image: url( /images/bg.jpg);
    background-size: cover;
    background-position: center center;
}

div.frost {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    background-color: white;
    opacity: 0.75;
}


main {
    padding: 1em;
    border: solid silver 1px;
    border-radius: 1em;
    background-color: white;
    background-attachment: fixed;
    opacity: 0.95;
}

footer {
    background-color: white;
    opacity: 0.85;
}

fieldset {
    padding: 1em;
    border: 1px solid silver;
    border-radius: 1em;
    margin-bottom: 1em;
    padding-bottom: 0;
}

legend {
    width: auto;
}

.main-class-narrow {
    max-width: 600px;
    margin: auto;
}

.main-class-wide {
    position: absolute;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 155px) !important;
    overflow-y: auto;
    left: 8px;
}

@media (max-width: 767px) {
    .too-wide {
        display: none;
    }
}

@media (min-width: 768px) {
    div.form-group {
        --label-width: 10em;
        vertical-align: top;
    }

        div.form-group label.control-label {
            display: inline-block;
            width: var(--label-width);
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
        }

        div.form-group input.form-control {
            display: inline-block;
            width: calc(100% - 1em - var(--label-width));
        }

            div.form-group input.form-control.form-control-half {
                display: inline-block;
                width: calc( (100% - 1em - var(--label-width) ) / 2 - 2px);
            }

        div.form-group textarea.form-control {
            display: inline-block;
            width: calc(100% - 1em - var(--label-width));
        }

        div.form-group input.form-control[type=date] {
            display: inline-block;
            width: calc(100% - 1em - var(--label-width));
        }

        div.form-group select.form-control {
            display: inline-block;
            width: calc(100% - 1em - var(--label-width));
        }

        div.form-group span.field-validation-error {
            padding-left: 10em;
            display: block;
        }

        div.form-group.buttons {
            padding-left: 10em;
            display: block;
        }
}

input.form-control[type=date] {
    max-width: 12em;
}


.navbar-brand {
    font-style: italic;
    font-weight: bold;
    color: darkblue !important;
}


a.found-student {
    display: inline-block;
    width: 17em;
    padding: 8px;
    margin: 4px;
    border-radius: 4px;
    cursor: pointer;
}

xxx.div.found-student:hover {
    border: solid 1px black;
    background-color: var(--primary);
    color: white;
}

a.found-student p {
    margin: 0;
    padding: 0;
}

    a.found-student p:empty {
        display: none;
    }


i.sort {
    margin: 0;
    /*margin-left: 2px;*/
    font-size: 14pt;
}

th a {
    margin: 0;
}

th {
    white-space: nowrap;
}




.one-liner h1, .one-liner h3 {
    display: inline-block;
    width: auto;
    padding-right: 8px;
}

.one-liner a {
    display: inline-block;
    width: auto;
    margin-bottom: 14px;
    margin-left: 8px;
    font-size: larger;
    float: right;
}

a i.bi {
    margin-right: 6px;
}

main {
    opacity: 0.85;
}

main.small {
    max-width: 480px;
    margin: auto;
}