/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/*
.navbar-brand > img {
    display: inline-block;
}
*/

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.field-validation-error {
    color: #dc3545;
}

.input-validation-error {
    border-color: #dc3545;
    background-color: #ffe6e6;
}

.multiline {
    white-space: pre-wrap;
}

/* Don't print link hrefs https://makandracards.com/makandra/29149-bootstrap-how-to-avoid-printing-link-urls */
@media print {
    a[href]:after {
        content: none
    }
}

.footer .footer-inner .footer-content {
    line-height: 20px;
}

.disabled {
    cursor: not-allowed;
    opacity: .35;
}

option:disabled {
    cursor: not-allowed;
    opacity: .35;
    color: orangered;
}

@media only screen and (min-width: 768px) {
    .login-container {
        width: 425px;
    }
}

.timetable th {
    text-align: center;
}

td.locked-spot {
    /*background: repeating-linear-gradient( 135deg, #039BE5, #039BE5 10px, #90CAF9 10px, #90CAF9 20px );*/
    /*background: repeating-linear-gradient( 135deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );*/
    background-image: repeating-linear-gradient(-45deg, transparent 0 10px, grey 10px 20px);
}

    td.locked-spot:hover {
        background-color: #fcf8e3;
        background-image: none;
    }

/* Tables that turn into stacked cards on phones, one card per body row.
   Cells with data-label show it in front of their value; .stack-title leads the card and
   .stack-actions becomes a row of full-width buttons at its foot. */
@media (max-width: 767px) {
    .table-stack,
    .table-stack > tbody,
    .table-stack > tfoot,
    .table-stack > tbody > tr,
    .table-stack > tfoot > tr,
    .table-stack > tbody > tr > td,
    .table-stack > tfoot > tr > td {
        display: block;
        width: 100%;
    }

    .table-stack > thead {
        display: none;
    }

    .table-stack > tbody > tr {
        margin-bottom: 12px;
        padding: 12px 14px;
        border: 1px solid #dde3e8;
        border-radius: 6px;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    }

    .table-stack > tbody > tr > td,
    .table-stack > tfoot > tr > td {
        padding: 3px 0;
        border: 0 !important;
        text-align: left !important;
    }

    .table-stack > tbody > tr > td[data-label] {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .table-stack > tbody > tr > td[data-label] > * {
        min-width: 0;
    }

    .table-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 7.5em;
        color: #8a9199;
        font-size: 12px;
    }

    .table-stack > tbody > tr > td.stack-title {
        padding-bottom: 8px;
        font-size: 15px;
        font-weight: 600;
    }

    .table-stack > tbody > tr > td.stack-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid #eef1f3 !important;
    }

    .table-stack > tbody > tr > td.stack-actions > .btn,
    .table-stack > tbody > tr > td.stack-actions > span {
        flex: 1 1 0;
        min-height: 40px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 13px;
    }
}

/* Guardians: picture or initials in front of the name, students as chips */
.guardian-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.guardian-avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #dbe8f3;
    color: #2a6496;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

    .guardian-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.student-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.student-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: baseline;
    gap: 6px;
    padding: 1px 9px;
    border: 1px solid #d5dfe8;
    border-radius: 12px;
    background-color: #f5f8fb;
    white-space: nowrap;
    font-size: 12px;
}

    .student-chip:hover,
    .student-chip:focus {
        border-color: #6fb3e0;
        text-decoration: none;
    }

.student-chip-code {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-chip-note {
    color: #8a9199;
    font-size: 11px;
}

/* Labels kept in capitals in the resources, shown as "Mother" rather than "MOTHER" */
.text-sentence {
    display: inline-block;
    text-transform: lowercase;
}

    .text-sentence::first-letter {
        text-transform: uppercase;
    }

@media (max-width: 767px) {
    .guardian-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .student-chip {
        padding: 4px 10px;
        font-size: 13px;
    }
}

.status-current {
    font-weight: 600;
    color: #393939;
    pointer-events: none;
}

/* An access request: who asks, and for what */
.request-summary {
    margin-bottom: 16px;
}

.request-who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.request-who-text {
    min-width: 0;
}

.request-name {
    font-size: 17px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.guardian-avatar.guardian-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

/* A partner is an organisation: its picture is often a logo, kept whole */
.guardian-avatar.partner-avatar {
    border-radius: 6px;
}

    .guardian-avatar.partner-avatar img {
        object-fit: contain;
        background-color: #fff;
    }

.request-access {
    margin: 0;
}

.request-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
}

    .request-facts > dt {
        font-weight: normal;
        color: #777;
    }

    .request-facts > dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.request-notes {
    white-space: pre-line;
}

.request-status .label + small {
    margin-left: 4px;
}

.request-decisions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

/* The request on screen, among the guardian's other students; the row as a whole, as on a phone it is a card */
.guardian-students > tbody > tr.request-current,
.guardian-students > tbody > tr.request-current > td {
    background-color: #fcf8e3;
}

@media (max-width: 767px) {
    .request-facts {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .request-decisions > .btn {
        flex: 1 1 0;
        min-height: 40px;
        padding-top: 9px;
    }

    .table-stack.guardian-students > tbody > tr.request-current {
        border-color: #f0ad4e;
    }
}

/* Below 992px the breadcrumbs bar is no longer fixed, and on a narrow screen the links a page
   floats to its right wrap to a second line. Let the bar grow around them, otherwise the page
   content paints over them. */
@media (max-width: 991px) {
    .breadcrumbs::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* Below 992px the open sidebar stays fixed under the navbar, so a long submenu runs past the
   bottom of the screen and scrolling only moves the page behind it. Keep it within the screen
   and let it scroll on its own. The navbar is 45px high, 90px once its buttons wrap under the
   brand below 480px. */
@media (max-width: 991px) {
    .sidebar.responsive.sidebar-fixed.display {
        max-height: calc(100vh - 45px);
        max-height: calc(100dvh - 45px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 479px) {
    .sidebar.responsive.sidebar-fixed.display {
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
    }

    /* Ace moves each navbar dropdown left by a fixed amount that depends on how many buttons
       follow it, which pushes My Courses past the left edge when Teacherless is shown. It is
       the first button, so open it from its own left edge instead. */
    .navbar .ace-nav > li.nav-my-courses > .dropdown-menu.dropdown-menu-right {
        left: 0;
        right: auto;
    }

    .navbar .ace-nav > li.nav-my-courses > .dropdown-menu.dropdown-menu-right:before,
    .navbar .ace-nav > li.nav-my-courses > .dropdown-menu.dropdown-menu-right:after {
        left: 30px;
        right: auto;
    }
}

.contact-links {
    display: inline-flex;
    gap: 12px;
}

@media (max-width: 767px) {
    .contact-links {
        gap: 20px;
    }

        .contact-links .fa-lg {
            font-size: 1.6em;
        }
}

@media (min-width: 768px) {
    .table-stack > tbody > tr > td {
        vertical-align: middle;
    }
}

/* Search box wide enough for its placeholder */
.form-inline .input-group.search-wide {
    display: table;
    width: 100%;
    max-width: 420px;
}