@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
* {
    font-family: Roboto, Arial, sans-serif !important;
}

#summary {
    display: flex;
}

.summaryMsg {
    padding: 10px;
}

form {
    display: flex;
    padding: 10px;
    border-radius: 5px;
    background-color: #EFEFEF;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}

input, select {
    min-width: 150px;
}

form input, form select {
    padding: 10px;
    border-radius: 5px;
}

form input.searchButton {
    background-color: #2980b9;
    color: white;
}

.searchYear, .searchMonth, .searchString, .searchButton {
    margin: 10px
}

table th {
    box-shadow: unset;
    background-color: #EFEFEF;
    background: #EFEFEF;
    font-weight: bold;
    text-align: left;
}

table {
    border-collapse: collapse;
    margin: 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 300px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border: unset;
}

table thead,
table thead tr {
    text-align: left;
    border-top: unset;
    border-bottom: unset;
    padding: unset;
    background-color: #EFEFEF;
    background: #EFEFEF;
}

table th,
table td,
table tr.d td {
    padding: 12px 15px;
    border-right: unset;
    border-top: unset;
    border-bottom: unset;
}

table tr.summaryMain td.summaryColumnContainer {
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
table tr.summaryMain td.summaryColumnContainer table.summaryColumnTable {
    box-shadow: none;
    font-size: inherit;
}
table tr.summaryMain td.summaryColumnContainer table.summaryColumnTable tr.summaryRow td {
    padding: 12px 15px;
    width: 100%;
}
body.supSummaryCols3 table tr.summaryMain td.summaryColumnContainer table.summaryColumnTable {
    width: 24.75%;
}
body.supSummaryCols4 table tr.summaryMain td.summaryColumnContainer table.summaryColumnTable {
    width: 33%;
}
body.supSummaryCols6 table tr.summaryMain td.summaryColumnContainer table.summaryColumnTable {
    width: 49.5%;
}
body.supSummaryCols12 table tr.summaryMain td.summaryColumnContainer table.summaryColumnTable {
    width: 99%;
}

.supItem, .noResultItem {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    word-wrap: break-word;
    word-break: break-word;
}

.supItem {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.noResultItem {
    text-align: center;
}

.supDetails {
    font-size: 0.7em;
}

.supDetails span {
    margin-right: 5px;
    padding: 5px;
    background-color: #EFEFEF;
    border-radius: 4px;
}

.supItem h1, .supItem h2 {
    margin: 10px 0px;
}

.supNotesContainer h3 {
    text-decoration: underline;
    margin-bottom: 3px;
    font-size: 1.1em;
}

a {
   color: #2980b9; 
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: white;
    }

    form {
        background-color: #222;
        color: white;
    }

    form label {
        color: white;
    }

    table th {
        background-color: #222;
        background: #222;
        color: white;
    }
    
    table {
        box-shadow: #000 0px 8px 24px;
    }
    
    table thead,
    table thead tr {
        color: #ffffff;
        background-color: #222;
        background: #222;
    }
    
    .supItem {
        box-shadow: #000 0px 8px 24px;
    }
    
    .supDetails span {
        background-color: #222;
    }
}

.searchForm .spin {
    width: 25px;
    height: 25px;
    top: 0;
    padding: 0px;
    margin: 0px;
}

.searchYear label, .searchMonth label, .searchString label {
    display: inline-block;
    margin-right: 5px;
}

@media screen and (max-width: 560px) {

    .searchYear, .searchMonth, .searchString, .searchButton {
        margin: 10px;
        width: calc(100% - 20px);
    }
    .searchYear label, .searchMonth label, .searchString label {
        display: inline-block;
        margin-right: 0px;
        min-width: 20%;
        width: 20%;
    }
    .searchString #search {
        min-width: calc(75% - 24px);
        width: calc(75% - 24px);
    }

}

/*
    Searching by Strings and Sort order of results (AXLR8s:40919)
*/
form.textSearchOnly div.searchYear, 
form.textSearchOnly div.searchMonth {
    display: none;
}