/* 4px grid system, 16px margins for touch accessibilty */
/* trigger at sub 1024 resolution target */
@media screen and (max-width: 1023px) {

    #mainPage {
        min-width: 100vw;
        max-width: 100vw;
    }

    /* dialogs and popups */
    .miniPopUpContent {
        position: fixed !important;
        top: 32px !important;
        left: 32px !important;
        right: 32px !important;
        bottom: 32px !important;
        overflow: auto;
    }

    #shareThisControl {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    #dialogContainer .dialogContent {
        margin: 0;
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        min-width: auto;
        height: 100vh;
        overflow: scroll;
    }
    #dialogContainer .loginFormHolder .dialogContent {
        width: 100vw;
        min-width: auto;
    }

    /* unclear why this is needed, branch limits dialog did not constrain width */
    #dialogContainer .dialogContent header {
        max-width: 100vw;
        box-sizing: border-box;
    }
    #dialog_form {
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* branch limit dialog */
    .branchLimit {
        padding: 16px 0;
    }
    .branchLimitColumn {
        float: none;
        padding: 0;
        width: auto;
        box-sizing: border-box;
        border: 0;
        min-height: auto;
    }
    .branchLimitColumn + .branchLimitColumn {
        border: 0;
    }

    /* navbar */
    nav.mainNav {
        display: flex;
        margin: 0 24px 0 16px;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    nav.mainNav ul.right {
        display: flex;
        float: none;
        flex-direction: row;
        margin-bottom: 8px;
        justify-content: flex-end;
        border: 0;
    }
    nav.mainNav ul.left {
        display: flex;
        float: none;
        flex-direction: row;
        justify-content: flex-start;
        border: 0;
    }
    nav.mainNav ul li {
        border: 0;
    }
    nav.mainNav ul li a {
        border: 0;
    }

    nav.mainNav ul li + li {
        margin-left: 8px;
    }


    
    #mainContent .activeView {
        max-width: 100vw;
    }

    /* header */
    #mainHeader a.logoContainer {
        display: none;
    }

    #mainHeader #searchSection {
        float: none;
        margin: 0;
        max-width: 100vw;
        width: auto;
        padding-left: 16px; /* mobile gutter for finger scrolling */
        padding-right: 24px; /* accounts for scrollbar */
        box-sizing: border-box;
    }

    #mainHeader #searchSection h1 {
        margin: 16px 0;
        /* line-height: 115px; matches logo container height to vertically align */
    }

    #mainHeader #searchSection form {
        display: flex;
        max-width: 100vw;
        flex-wrap: wrap;
        flex-direction: row;
        clear: left;
    }

    #mainHeader #searchSection .searchBar {
        float: none;
        display: flex;
        flex-grow: 1; /* search bar will grow to eat up remaining space */
        width: auto;
    }

    #mainHeader #searchSection .searchButton {
        float: none;
        margin-left: 8px;
        min-width: 100px;
    }

    /* Used for lone "Advanced Search" or "More Search Options" links */
    #mainHeader a.advancedSearch {
        float: none;
        line-height: 36px;
        white-space: nowrap;
        margin: 8px 1000px 8px 12px; /* 12px aligns with search placeholder text */ /* 1000px ensure it's on its own line */
        width: auto;
    }


    #mainHeader .advancedSearchLinkContainer {
        float: none;
        margin: 0;
        width: 100%;
    }

    #mainHeader .advancedSearchLinkContainer a.booleanSearch, 
    #mainHeader .advancedSearchLinkContainer a.reservesSearch, 
    #mainHeader .advancedSearchLinkContainer a.readingLevelSearch {
        margin: 8px;
        display: inline-block;
        line-height: 36px;
    }

    #mainHeader .advancedSearchLinkContainer a.booleanSearch {
        margin-left: 12px; /* align with search input placeholder */
    }

    #mainHeader #speechContainer {
        display: flex;
        width: 100vw;
        flex-direction: row;
        align-items: center;
        margin: 0 16px;
    }

    #mainHeader #speechContainer #speechTrigger {
        float: none;
        margin: 8px;
        transition: none;
    }

    /* advanced search */

    /* reset */
    #boolean input, #boolean select, #advancedSearchPageView label.selectReplacement {
        margin-left: 0;
    }


    #advancedSearchContainer {
        max-width: 100vw;
        padding: 0 24px 0 16px;
    }



    
    #advancedSearchContainer label[for='any'], 
    #advancedSearchContainer label[for='all'],
    #advancedSearchContainer input[name='operator'] {
        text-align: left;
        margin-left: 8px;
    }

    #advancedSearchContainer label[for='any'] {
        margin-bottom: 12px;
        display: inline-block;
        margin-top: 12px;
    }

    #advancedSearchContainer label[for='all'] {
        margin-bottom: 16px;
        display: inline-block;
    }   

    /* Include any or all */
    #advancedSearchContainer form > div:nth-child(2) {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    /* Lobotomized Owl Selector for flex gap iOS safari */
    /* #advancedSearchContainer form > div:nth-child(2) > * + * { 
        margin-left: 8px;
    } */

    #advancedSearchContainer form > div:nth-child(2) label {
        margin: 0 0 0 8px;
        white-space: nowrap;
    }

    #advancedSearchContainer div.formButtons input {
        margin-bottom: 8px;
    }


    #advancedSearchContainer .advancedFormRow .plus,
    #advancedSearchContainer .advancedFormRow .minus,
    #advancedSearchContainer .advancedFormRow .advancedSearchField,
    #advancedSearchContainer .advancedFormRow .advancedSearchType,
    #advancedSearchContainer .advancedFormRow .advancedSearchString {
        margin-right: 12px;
        margin-bottom: 12px;
    }

    #mainAccountNavigation li, #advanced_navigation li {
        width: auto;
    }
    #mainAccountNavigation li a, #advanced_navigation li a {
        padding: 0 8px;
    }

    #advancedSearchContainer .advancedFormRow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        margin: 24px 0;
    }


    
    #advancedSearchPageView h3 {
        padding-left: 16px;
    }

    
    #advancedSearchContainer .advancedFormRow .advancedSearchField,
    #advancedSearchContainer .advancedFormRow .advancedSearchType,
    #advancedSearchContainer .advancedFormRow .advancedSearchString {
        flex-grow: 1;
    }

    div.leftCenteredRow {
        width: auto;
    }

    div.centeredRow {
        width: auto;
    }
    div.leftCenteredRow, div.centeredRow, div.searchTips {
        margin: 16px 0;
    }
    div.formButtons {
        width: auto;
        text-align: left;
    }

    div.searchTips {
        max-width: 70em;
        width: auto;
    }
    div.searchTips dl dd {
        margin: 16px;
    }
    
    .advancedSearchPage #readingLevels #readingLevels_filteredLocations {
        width: auto;
        overflow: visible;
    }

    .advancedSearchPage #readingLevels .readingLevels_searchOptions {
        margin: 0;
    }

    .advancedSearchPage #readingLevels .readingLevels_searchOptions .searchOptions {
        float: none;
        margin: 16px 0;
    }
    .advancedSearchPage #readingLevels .readingLevels_searchOptions #lexileSingleContainer, 
    .advancedSearchPage #readingLevels .readingLevels_searchOptions #readingLevelSingleContainer {
        width: auto;
    }
    .advancedSearchPage #readingLevels .readingLevels_searchOptions .title {
        width: auto;
        text-align: left;
        display: block;
        margin: 8px 0;
    }
    .advancedSearchPage #readingLevels .formButtons {
        margin: 16px 0;
    }
    .advancedSearchPage #readingLevels #readingLevelSearchTerm {
        margin: 0 0 8px 0;
    }

    /* results */

    .resultItems {
        margin: 0 24px 0 16px;
    }

    .resultItems ul li.mainResultItem {
        display: flex;
        flex-direction: row;
    }

    .resultItems ul li .bookjacketContainer {
        width: auto;
        margin-right: 8px;
        flex-grow: 0;
        flex-shrink: 0;
        float: none;
    }

    .resultItems ul li .resourceContentWrapper {
        float: none;
        width: auto;
        flex-grow: 1;
    }

    .resultItems ul li .checkboxHolder {
        flex-grow: 0;
        flex-shrink: 0;
        width: auto;
        float: none;
        align-content: initial;
    }

    .resultItems ul.resultActions li .hiliteButton, .resultItems ul.resultActions li .lowliteButton {
        margin-top: 8px;
    }

    /* Search results */

    #searchViewsContainer .floatControls {
        margin: 16px 24px 16px 16px;
    }
    #searchViewsContainer .floatControls #checkAllResultsContainer {
        padding: 0;
    }

    #searchViewsContainer .searchResultsContent {
        display: flex;
        flex-direction: column-reverse;
    }
    #searchViewsContainer .searchResultsContent #searchUtilities {
        float: none;
        width: auto;
    }
    #searchResultsAreaContainer, #searchErrorContainer {
        float: none;
        width: auto;
    }
    
    

    .flowViewPagingControlsContainer, .pagingControlsContainer {
        margin-bottom: 16px;
    }

    .resultItems ul li .bookjacketContainer {
        width: auto;
        float: none;
        flex-grow: 0;
    }

    /* result detail page */
    .detailsTop {
        padding: 16px;
        line-height: 16px;
        height: 16px;
    }

    .detailsContainer {
        max-width: 100vw;
        position: relative;
        padding: 0 24px 0 16px;
    }

    #detailsSidePanel, #detailsPageContent {
        float: none;
        width: 100%;
    }
    
    .detailsControls {
        float: none;
        z-index: 99;
        position: absolute;
        width: 73px;
        height: 73px;
        top: 112px; /* 48px top bar + 200px tall jacket / 2 - 73/2 */ 
        left: 16px;
        width: auto;
    }
    .detailsControls.floatRight {
        float: none; /* needed for specificity */
        right: 24px;
        left: auto;
    }
    .detailsControls .next, .detailsControls .prev {
        margin: 0;
    }

    #detailsPageContent header #detailsListAndRequestControls {
        margin: 16px 0 24px;
    }
    #detailsPageContent header #detailsListAndRequestControls li {
        margin: 8px 8px 0 0;
    }

    /* footer styles */
    #mainFooter {
        max-width: 100vw;
    }

    #mainFooter nav {
        padding: 0 24px 0 16px;
    }

    #mainFooter #languageSelectionControl {
        padding-left: 24px;
    }

    #mainFooter nav #footerLinks {
        display: flex;
        flex-direction: column;
        padding: 0;
        float: none;
    }

    #mainFooter nav #footerLinks li a {
        padding: 8px 0;
        line-height: 28px;
    }

    #mainFooter nav #tlcFooterInfo {
        float: none;
    }

    #mainFooter nav #tlcFooterInfo li a.tlcLogo {
        margin: 8px 0 32px;
    }

    /* Account section */
    #mainAccountNavigation {
        display: none;
    }

    .myAccount_leftColumn, .myAccount_rightColumn {
        float: none;
        min-height: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .myAccount_rightColumn {
        margin-top: 16px;
    }

    .myAccountContent {
        padding-left: 0;
        min-height: auto;
    }

    #accountSummary dt {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #accountSummary dt span {
        width: auto;
        float: none;
        margin: 0;
    }
    #accountSummary dt span:first-child {
        margin-right: 16px;
        flex-grow: 1;
    }
    #accountSummary dt span.ezLinks {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    #myLists .inline {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 16px 0 24px 0;
    }
    #myLists .inline li {
        margin-top: 8px;
        float: none;
    }
    #myLists .inline li:first-child {
        padding-left: 0;
    }

    .myAccountPage .myAccountContent .myAccountControls {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }
    .myAccountPage .myAccountContent .myAccountControls select,
    .myAccountPage .myAccountContent .myAccountControls .batchControls {
        margin-top: 8px;
    }
    

    /* contact form */
    #accountSettings .myAccountContent form .formSection {
        min-width: auto;
    }
    #accountSettings .myAccountContent form div.formRow {
        width: auto;
    }
    #accountSettings .myAccountContent form div.formRow div.state input,
    #accountSettings .myAccountContent form div.formRow div.city input,
    #accountSettings .myAccountContent form div.formRow div.phone input,
    #accountSettings .myAccountContent form div.formRow input[type='text'],
    #accountSettings .myAccountContent form div.formRow input[type='password'] {
        width: 100%;
    }
    #contactInformation_smsGatewayId {
        margin-top: 8px;
        padding: 6px;
        width: 100%;
    }
    #accountSettings .myAccountContent form div.formRow div.zip,
    #accountSettings .myAccountContent form div.formRow div.state,
    #accountSettings .myAccountContent form div.formRow div.phone.altPhone {
        margin-left: 0;
    }
    #accountSettings .myAccountContent form div.formRow div {
        float: none;
    }

    #accountSettings .myAccountContent form div.formRow div.phone.altPhone,
    #accountSettings .myAccountContent form div.formRow div.state,
    #accountSettings .myAccountContent form div.formRow div.zip {
        margin-top: 24px;
    }

    /* linked borrower accounts */

    #borrowerAccountsDiv {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    #borrowerAccountsDiv .floatLeft {
        flex-grow: 1;
        float: none;
    }
    #borrowerAccountsDiv .floatRight {
        flex-grow: 0;
        float: none;
    }

    #accountSettings .myAccountContent #linkedBorrowerAccountsDiv .formSection {
        padding: 0;
        border: 0;
        margin: 16px 0 0 0;
        background: inherit;
    }

    #borrowerAccountsYouAreRespDiv {
        margin-bottom: 16px;
    }

    .dataTable, .myAccountContent .dataTable {
        border: 1px solid #c0c0c0;
        overflow-x: scroll;
    }
    
    .dataTable table, .myAccountContent .dataTable table {
        margin: 0;
        border: 0;
    }

    #accountSettings h3 {
        margin: 0 0 12px 0;
    }

    #acountSettings #borrowerAccountsDiv h3 {
        margin: 0 0 8px 0;
    }

    /* OBR */
    .obrPage form div.formRow {
        width: auto;
    }

    .obrPage form div.formRow div.TITLE input, 
    .obrPage form div.formRow div.SUFFIX input,
    .obrPage form div.formRow div.ZIPCODE input, 
    .obrPage form div.formRow div.ZIPCODE2 input {
        width: 100px;
        min-width: 100px;
        box-sizing: border-box;
    }

    .obrPage form div.formRow div.FIRSTNAME input, 
    .obrPage form div.formRow div.FIRSTNAME select, 
    .obrPage form div.formRow div.MIDDLENAME input, 
    .obrPage form div.formRow div.MIDDLENAME select, 
    .obrPage form div.formRow div.LASTNAME input, 
    .obrPage form div.formRow div.LASTNAME select, 
    .obrPage form div.formRow div.ADDRESS input, 
    .obrPage form div.formRow div.ADDRESS select, 
    .obrPage form div.formRow div.ADDRESS2 input, 
    .obrPage form div.formRow div.ADDRESS2 select, 
    .obrPage form div.formRow div.CITY input, 
    .obrPage form div.formRow div.CITY select, 
    .obrPage form div.formRow div.CITY2 input, 
    .obrPage form div.formRow div.CITY2 select, 
    .obrPage form div.formRow div.STATE input, 
    .obrPage form div.formRow div.STATE select, 
    .obrPage form div.formRow div.STATE2 input, 
    .obrPage form div.formRow div.STATE2 select, 
    .obrPage form div.formRow div.DOB input, 
    .obrPage form div.formRow div.DOB select, 
    .obrPage form div.formRow div.GENDER input, 
    .obrPage form div.formRow div.GENDER select, 
    .obrPage form div.formRow div.PHONE1 input, 
    .obrPage form div.formRow div.PHONE1 select,
    .obrPage form div.formRow div.PHONE2 input, 
    .obrPage form div.formRow div.PHONE2 select, 
    .obrPage form div.formRow div.MOBILEPHONE input, 
    .obrPage form div.formRow div.MOBILEPHONE select, 
    .obrPage form div.formRow div.HOMEBRANCH input, 
    .obrPage form div.formRow div.HOMEBRANCH select, 
    .obrPage form div.formRow div.NOTIFICATIONTYPE input, 
    .obrPage form div.formRow div.NOTIFICATIONTYPE select, 
    .obrPage form div.formRow div.borrowerField input, 
    .obrPage form div.formRow div.borrowerField select {
        width: 100%;
    }

    .obrPage form div.formRow div.EMAIL input[type="text"], 
    .obrPage form div.formRow div.CONFIRMEMAIL input[type="text"], 
    .obrPage form div.formRow div.EMAIL2 input[type="text"], 
    .obrPage form div.formRow div.EMAIL3 input[type="text"] {
        width: 100%;
    }

    .obrPage form div.formRow div {
        float: none;
    }
    .obrPage form div.formRow .labelDiv {
        float: none;
    }
    .obrPage form div.formRow .controlDiv {
        float: none;
    }

    .obrPage form .formSection {
        min-width: auto;
    }

    #obrPageView_termsAndConditionsBlock {
        display: flex;
    }

    /* landing page carousel */
    #mainContent #landingPage.activeView {
        overflow: visible;
    }

    .multi-carousel .nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 16px 8px;
        z-index: 0;
        border-radius: 0;
    }
    .multi-carousel .nav li {
        flex-grow: 1;
    }
    .multi-carousel .nav li a {
        box-sizing: border-box;
        width: 100%;
    }
    .multi-carousel .nav li:first-child a,
    .multi-carousel .nav li:last-child a {
        border-radius: 0;
    }

    .multi-carousel .sliderContainer {
        margin-top: 0;
    }
    .multi-carousel .captionContainer {
        min-height: 70px; /* line-height of caption is 18px */
        box-sizing: border-box;
        margin-top: 0;
        padding: 8px;
    }
    .multi-carousel .caption {
        height: auto;
        display: flex;
    }
    .multi-carousel .sliderContainer {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        position: relative;
    }
    .multi-carousel .jacketContainer {
        height: auto;
    }
    .multi-carousel .prev, .multi-carousel .next {
        margin: 0 6px;
        top: 64px;
    }
    
}

@media screen and (max-width: 428px) {
    .myAccountContent .pageHeading .overdue, 
    .myAccountContent .pageHeading .arrived {
        display: block;
        margin-left: 0;
    }
    #advancedSearchContainer .advancedFormRow .advancedSearchString {
        width: 100%;
    }

    #mainHeader #searchSection .searchBar {
        width: 100%;
        display: flex;
    }
    #mainHeader #searchSection .searchButton {
        width: 100%;
        margin: 8px 0;
    }
}


/* Color contrast fixes */
#mainHeader {
    color: #FFFFFF;
    background-color: #127DA1;
    background-image: linear-gradient(to bottom, #127DA1, #0E607C);
}

#mainHeader .searchButton {
    color: #FFFFFF;
    background-color: #072E3C;
    background-image: linear-gradient(to bottom, #0A3B4D 48%, #072E3C 52%);
}

.multi-carousel .caption {
    color: #757575;
}

.active, .selected, #changeViewControl li.active a, .myAccountPage a.hilite, #advanced_navigation a.disabled {
    color: #C15710;
}

ul.sideNav li a.active, ul.sideNav li a.disabled {
    color: #C15710;
}

.arrived, .available, .non_circulating {
    color: #4AA626;
}

.multi-carousel .nav li.current a, .multi-carousel .nav li.current a:hover {
    color: #B74D1F;
}

ul.sideNav li a.active:hover span, 
ul.sideNav li a.active span, 
ul.sideNav li a.disabled:hover span,
ul.sideNav li a.disabled span {
    background: #C15710;
}

#searchUtilities ul#facets li ul li span.count {
    color: #757575;
}
.availabilityLink span.availability {
    font-weight: bold;
    font-size: 1.2rem;
}

ul.sideNav li a span {
    color: #757575;
}
li.sideTabHeader {
    color: #757575;
}
#detailsSidePanel .sideTopContent h4 small {
    color: #757575;
}
.shareThisControl div label span {
    color: #757575;
}