.search-parameters {margin-top: 15vh;display:inline-block;width:100%;}
.search-field {
    padding: 2.5% 2.5%;z-index: 500;margin: 0 0 0 10vh;
    width: calc(95% - 20vh);background-color: var(--c-gray);
    border-radius: 1vh;
}
.main-bar {width:100%;position:relative;}
.s-bar {
    position:relative;display: inline-block;background-color: var(--c-bg);
}
.logo-text {color: var(--c-white) !important;}
.logo-left .blue {color: var(--c-white) !important;}
.pc-menu {position:absolute !important;}

.search-options-bar {
    grid-template-columns: repeat(7, 1fr);gap:1vw;position:relative;
}
.search-main-bar {border-radius: 1vh;}
.search-f-bar {grid-column-start: 1;grid-column-end: 8;}
.submit-bar {grid-column-start: 6;grid-column-end: 8;}
.search-main-bar, .search-drop {
    display: inline-grid;align-items: center;
    z-index: 2;background-color: var(--c-bg);
}
.search-main-bar {padding: 0.5vh 0;}
.search-drop {
    cursor: pointer;padding: 1vh 2vh;border-radius:1vh;
    transition: border-size 0.2s ease-in-out;box-sizing: border-box;
    border: solid 2px var(--c-gray);z-index:500;
}
.search-drop:hover {border: solid 2px var(--s5-blue);}

.search-main-bar input {
    width: 100%;height:100%;margin: 0;
    background-color: transparent;
    background-color: var(--c-bg);border-radius: 1vh;
}
.submit-bar {background-color: var(--c-blue);}
.search-main-bar input[type="submit"] {
    width: 100%;margin-left:0%;
    border-radius: 1vh;
}

.search-icon, .search-drop h4 {
    position:relative;display:inline-block;
    vertical-align: middle;z-index: 3;cursor: pointer;
}
.search-icon {height: 3vh;padding:0.5vh;margin: 0 0.75vw 0 0;}
.search-drop-down {
    position:absolute;top:calc(0% + 20px);left: -200vw;
    transform: translateX(-50%);max-height: calc(20vh + 2vw);
    background-color: var(--c-bg);white-space: nowrap;opacity: 0;
    transition: top 0.2s ease-in-out 0.1s, opacity 0.2s ease-in-out 0.1s;
    border-radius: 0.25vw;
}
.active-drop-down {
    top: calc(100% + 30px);opacity: 1;left: 50%;
}
.search-drop-down::before {
    border-style: solid;content: "";position:absolute;top: -9px;
    left: calc(50% - 10px);border-width: 0 10px 10px 10px;
    border-color: transparent transparent var(--c-bg) transparent;
    pointer-events: none;
}
.search-drop-options {
    overflow: auto;position:relative;display:block;height:100%;
    max-height: 20vh;padding: 1vw;text-align:left;
}
.search-radio-option {position:relative;display:block;margin-bottom: 1vw;white-space: nowrap;}
.search-radio {
    width: 1.5vw;margin-right: 1vw;vertical-align: middle;display: inline-block;
    position:relative;height: 1.5vw;cursor: pointer;
}
.search-radio input {
    position:absolute;left:0;top:0;height:1.5vw;width: 1.5vw;padding: 0;
    margin: 0;cursor: pointer;background-color: transparent !important;
}
.search-over-radio {
    position:absolute;left:0;top:0;height:1.5vw;width: 1.5vw;border-radius: 0.25vw;
    background-color: var(--c-dgray);z-index: 100;pointer-events: none;
}
.search-drop-down h5 {
    display: inline-block;vertical-align: middle;width: calc(100% - 2.5vw);
    position:relative;text-align: left;
}
input[type="checkbox"]:checked::before, input[type="checkbox"]::before {background-color: transparent !important;}
input[type="radio"]:checked + .search-over-radio,
input[type="checkbox"]:checked + .search-over-radio {
    background-image: url(../assets/icons/checkmark.png);
    background-size: 80% 80%;background-repeat: no-repeat;
    background-position: center;
}

.search-orders {width:calc(100% - 20vh);margin-left:10vh;}
.search-order {margin-top: 2vh;}

.floaties {
    position:fixed;top:0;left:0;width:100%;height:100%;
    z-index: 995;display: none;
}
.floaties-bg {
    position:fixed;top:0;left:0;width:100%;height:100%;background-color: rgba(0,0,0,0.5);
    z-index: 996;
}
.floaties-in {
    display:none;position:fixed;top:50%;left:50%;transform: translate(-50%, -50%);
    padding: 4vh;background-color: var(--c-gray);z-index: 997;min-width: 50%;max-width: 70%;
    border-radius: 0.5vw;
}
.all-tags {position:relative;}
.tag-select {
    padding: 0.25vw 1vw 0.35vw 1vw;display: inline-block;vertical-align: middle;text-align: center;
    border: solid 1px var(--c-blue);border-radius: 2vh;margin-right: 0.5vw;margin-bottom: 0.5vw;
    cursor: pointer;transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
}
.tag-select:hover {background-color: var(--c-bg);border: solid 1px var(--c-bg);}
.select-box {position:relative;display: inline-block;vertical-align: middle;width: 10%;margin-right: 2.5%;}
.input-checkin {position:relative;display: inline-block;vertical-align: middle;width: 1.5vw;height: 1.5vw;}
.move-down {margin-top: 2vh;}
#search-results {
    position:relative;width: calc(100% - 20vh);margin: 0.5% 0 6vh 10vh;
    z-index: 10;
}
.actions-after-tag {
    margin-top: 2vh;display:inline-block;width:50%;vertical-align: middle;
}
.right-action-tag {text-align: right;}
.right-action-tag .button {border-radius: 0.25vw;}
.close-tags {cursor: pointer;}
.selected-tag {background-color: var(--c-blue);}
.match-tag {color: var(--c-blue);}
.tag {
    position:relative;display: inline-block;vertical-align: middle;
    padding: 2px 4px;border: solid 1px gray;margin: 4px 4px 4px 0;
    color: gray;
}

.loading-search {
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;
    background-color: var(--s8-bg);display:flex;
    justify-content: center;align-items: center;
    flex-direction: column;gap: 2vh;
}
.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}



.pagination {margin: 2vh 10vh;width: calc(100% - 20vh);text-align:center;}
.search-pages {
    position:relative;display:block;margin-top: 5vh;
    text-align: center;
}
.pages-num, .pages-arrow {
    padding: 0.75vh 1.5vh;background-color: var(--c-gray);
    margin: 0 0.25vw;cursor: pointer;transition: all 0.2s ease-in-out;
    border-radius: 0.5vh;
} 
.pages-arrow img {height: 20px;}
.selected-page {background-color: var(--c-blue);}
.pages-num:hover {transform: scale(1.1);}
.pages-arrow:hover {transform: scale(1.1);}

@media (max-width: 980px) and (orientation: portrait) {
    .search-parameters {margin-top:5vh;}
    .search-icons-a {display: none !important;}
    .search-field {width:85%;padding: 5%;margin: 0 0 0 2.5%;}
    .search-options-bar {grid-template-columns: repeat(4, 1fr) !important;gap:1vh 0.5vh;}
    .search-f-bar {grid-column-start: 1;grid-column-end: 4;}
    .sort-drop {grid-column-start: 4;grid-column-end: 5;grid-row-start: 1;}
    .submit-bar {grid-column-start: 1;grid-column-end: 5;}
    

    .search-drop-down {max-height: calc(25vh + 4vh);border-radius: 0.5vh;}
    .search-drop-options {padding: 2vh;}
    ::placeholder {color: var(--c-white) !important;}
    .search-radio {width: 4vh;margin-right: 2vh;height: 4vh;}
    .search-drop-down h4 {display: inline-block;}
    .search-radio input {height:4vh;width: 4vh;}
    .search-over-radio {height:4vh;width: 4vh;}
    .search-radio-option {margin-bottom: 2vh;}

    .floaties-in {padding: 4vh;min-width: 80%;max-width: 90%;max-height: 70%;overflow: auto;}
    .tag-select {padding: 0.75vh 1vh 0.75vh 1vh;margin-right: 1vh;margin-bottom: 1vh;}



    .pagination, #search-results {margin: 2vh 2.5%;width: 95%;}
    .pages-num, .pages-arrow {margin: 0 0.25vh;}
}
@media (max-width: 1500px) and (min-width: 981px) {
    .search-icons-a {display: none !important;}
}
@media (max-width: 1440px) and (min-width: 1101px) {
    
}
@media (max-width: 1920px) and (min-width: 1440px) {
    
}
