/* Put App specific CSS here */

legend {
    font-size: 1.1em;
    font-weight: bold;
}

/* Background colors for different intake forms */
.bg-intake-accessnavigator {
    background-color: #98cdcd;
}

.bg-intake-kinship {
    background-color: #d1e8c6;
}

.bg-intake-schoollink {
    background-color: #cecce6;
}

.bg-intake-shared {
    background-color: #fbface;
}

.bg-intake-snap {
    background-color: #fecc66;
}

.bg-intake-warmline {
    background-color: #fbcbce;
}

.grid-2-col {
    display: grid;
    grid-template-columns: 1fr;
}

.grid-3-col {
    display: grid;
    grid-template-columns: 1fr;
}

.grid-gap {
    column-gap: 1em;
    row-gap: 1em;
}

@media screen and (min-width: 765px) {
    .grid-2-col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3-col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .min-width-512 {
        min-width: 512px
    }
}

@media screen and (min-width: 384px) {
    .min-width-256 {
        min-width: 256px
    }

    .min-width-196 {
        min-width: 196px
    }

    .vertical-form {
        max-width: 384px
    }
}

/*
    Styles to be used inside a table cell containing lots of text to allow
    toggling visiblity of overflow.
*/
.has-more > .more {
    display: none;
}

.has-more > .more-control {
    display: inline;
}

.has-more.show-more > .more {
    display: inline;
}

.has-more.show-more > .more-control {
    display: none;
}

/*
    For a modal popup that needs to use most of the screen width.
*/
@media (max-width: 767px) {
    .modal-dialog.modal-wide {
        max-width: none;
    }
}

@media (min-width: 768px) {
    .modal-dialog.modal-wide {
        max-width: 1200px;
        width: 90%;
    }
}

/* Override to make notification icon bar wrap beneath other nav items when screen gets small. */
@media (min-width: 576px) {
    .navbar-expand-sm {
        flex-wrap: wrap;
    }
}

/* Fix a spacing issue with Add To Home Screen caused by Bootstrap */
.adhs-container img {
    vertical-align: initial !important
}

/* Override default alignment for DataTable numeric columns */
.dt-type-numeric {
    text-align: left !important;
}