﻿#pagerButtons {
    padding-bottom: 10px;
}

caption {
    caption-side: top !important;
    font-size: larger;
    font-weight: bold;
}

[data-readonly=true] {
    background-color: #e9ecef;
}

footer {
    margin-top: auto;
}

.grid-row-button {
    width: 145px;
    height: 40px;
}

.tableButton {
    width: 115px;
    height: 38px;
}

#btnSaveForm:focus {
    background-color: #00703c;
    box-shadow: none;
    outline: none;
}

#pagerButtons {
    display: flex;
    justify-content: center;
}

    #pagerButtons button {
        margin: 2px;
    }

#pagerNumbers {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

@media only screen and (max-width: 330px) {
    #pagerButtons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100% !important;
    }

    #pagerButtons button {
        width: 100% !important;
    }

    #pagerNumbers {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

    .postSubmitTable th, td {
        font-size: larger;
    }

    .address-finder-manual-address-validation, .address-finder-no-match {
        color: #d4351c;
        font-size: larger;
        font-weight: bold;
    }

    .address-finder-cannot-find-address-link {
        color: black;
        font-size: larger;
        text-decoration: underline;
    }

    .iwc-form-control-grid-final-row select {
        width: 165px;
    }

    .doc-result-container {
        display: flex;
        border: 2px solid grey;
    }

    .doc-result-file-name {
        flex: 0 0 65%;
        padding-right: 10px;
    }

    .doc-result-view-file {
        flex: 0 0 15%;
    }

    .doc-result-delete-file {
        flex: 0 0 15%;
    }

    @media only screen and (max-width: 485px) {
        .doc-result-container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .doc-result-view-file {
            padding-bottom: 10px;
            width: 100% !important;
        }

        .doc-result-delete-file {
            width: 100% !important;
        }

        .doc-result-view-file a {
            width: 100% !important;
        }

        .doc-result-delete-file a {
            width: 100% !important;
        }
    }

    .sample-forms thead tr th:nth-child(1) {
        width: 80%;
    }

    .sample-forms thead tr th:nth-child(2) {
        width: 20%;
    }

    .toast-position {
        position: fixed;
        z-index: 1;
        right: 10px;
        top: 10px;
        max-width: 300px;
        overflow-wrap: break-word;
    }

        .toast-position .fa, .toast-position .fa-brands, .toast-position .fa-duotone, .toast-position .fa-light, .toast-position .fa-regular, .toast-position .fa-solid, .toast-position .fa-thin, .toast-position .fab, .toast-position .fad, .toast-position .fal, .toast-position .far, .toast-position .fas, .toast-position .fat {
            line-height: 30px;
        }

    .toast-icon-circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-weight: bold;
        text-align: center;
        line-height: 30px;
        vertical-align: middle;
    }

    .toast-fade-out {
        animation-name: fadeout;
        animation-fill-mode: forwards;
        animation-duration: 0s;
        animation-delay: 3s;
        -moz-animation-name: fadeout;
        -moz-animation-fill-mode: forwards;
        -moz-animation-duration: 0s;
        -moz-animation-delay: 3s;
        -o-animation-name: fadeout;
        -o-animation-fill-mode: forwards;
        -o-animation-duration: 0s;
        -o-animation-delay: 3s;
        -webkit-animation-name: fadeout;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-duration: 0s;
        -webkit-animation-delay: 3s;
    }

    @keyframes fadeout {
        to {
            width: 0;
            height: 0;
            overflow: hidden;
        }
    }

    @-webkit-keyframes fadeout {
        to {
            width: 0;
            height: 0;
            visibility: hidden;
        }
    }

    @media only screen and (max-width: 800px) {
        /* Force table to not be like tables anymore */
        .gridtable table, .gridtable thead, .gridtable tbody, .gridtable th, .gridtable td, .gridtable tr {
            display: block;
        }

            /* Hide table headers (but not display: none;, for accessibility) */
            .gridtable thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .gridtable tr {
            border: 1px solid #ccc;
            margin-bottom: 5px;
            min-height: 200px;
        }

        .gridtable td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 10px;
            white-space: normal;
            text-align: left;
        }

            .gridtable td:before {
                text-align: left;
                font-weight: bold;
                content: attr(data-title);
                display: block !important;
            }
    }