/* Base */
.supersprint-system-search-container { padding: 20px var(--global-padding-inline); background: var(--primary-color); }
.supersprint-system-search-container.homepage { padding-block: 50px; }

/* Breadcrumb */
.supersprint-system-search-breadcrumb-container { padding: 0; margin-bottom: 20px; }
.supersprint-system-search-breadcrumb-wrapper { border-color: var(--quaternary-color); }
.supersprint-system-search-breadcrumb-item { }
.supersprint-system-search-breadcrumb-item-anchor { }
.supersprint-system-search-breadcrumb-divider-container { }
.supersprint-system-search-breadcrumb-divider { }

/* Content */
.supersprint-system-search-content-container {  }
.supersprint-system-search-content-header { position: relative; display: none; margin-bottom: 50px; color: #FFF; font-size: 40px; font-family: 'Fjalla One'; text-align: center; }
.supersprint-system-search-content-container.homepage> .supersprint-system-search-content-header { display: block; }
.supersprint-system-search-header-content { position: relative; }
.supersprint-system-search-content-header-close { display: none; position: absolute; margin: 0; padding: 0; top: 25px; right: var(--global-padding-inline); background: none; border-radius: 0; border: none; box-shadow: none; }
.supersprint-system-search-content-header-close-icon { display: block; width: 35px; height: 35px; fill: #FFF; }
.supersprint-system-search-header-icon { display: none; position: absolute; top: 100%; left: 50%; padding: 15px 25px; width: 35px; height: 35px; fill: #FFF; background: var(--secondary-color); border-radius: 50%; box-sizing: content-box; transform: translate(-50%, -50%); }
.supersprint-system-search-content-wrapper { display: flex; gap: 5px; }
.supersprint-system-search-dropdown-container { position: relative; padding: 15px 55px 50px 35px; width: 27.5%; background: var(--tertiary-color); box-sizing: border-box; }
.supersprint-system-search-dropdown-container.selectable { background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23C50013%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%22%2F%3E%3C%2Fsvg%3E) calc(100% - 25px) center / 20px no-repeat, var(--tertiary-color); cursor: pointer; user-select: none; }
.supersprint-system-search-dropdown-title { margin-bottom: 15px; color: var(--septenary-color); font-size: 15px; letter-spacing: .75px; text-transform: capitalize; visibility: hidden; }
.supersprint-system-search-dropdown-container.selected > .supersprint-system-search-dropdown-title { visibility: visible; }
.supersprint-system-search-dropdown-value { color: var(--septenary-color); font-size: 24px; letter-spacing: .75px; font-weight: 300; text-transform: capitalize; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.supersprint-system-search-dropdown-container.selected > .supersprint-system-search-dropdown-value { color: #FFF; }
.supersprint-system-search-dropdown { display: block; position: absolute; top: calc(100% - 35px); left: 0; width: 100%; max-height: 350px; background: var(--tertiary-color); overflow: auto; z-index: 2; }
.supersprint-system-search-dropdown:not(.open) { display: none; }
.supersprint-system-search-dropdown-search { width: 100%; padding: 15px 35px; color: #FFF; letter-spacing: .75px; text-transform: uppercase; background: var(--quaternary-color); border: 0; }
.supersprint-system-search-dropdown-option { padding: 15px 35px; color: #FFF; letter-spacing: .75px; text-transform: uppercase; border: 0; }
.supersprint-system-search-dropdown-option.hidden { display: none; }
.supersprint-system-search-dropdown-option:nth-child(odd of :not(.hidden)) { background: var(--quaternary-color); }
.supersprint-system-search-submit { display: block; color: #FFF; font-size: 24px; letter-spacing: .75px; text-transform: uppercase; font-family: inherit; background: var(--secondary-color); border: none; flex: 1; box-sizing: border-box; transition: .25s linear; user-select: none; cursor: pointer; }
.supersprint-system-search-submit[disabled] { opacity: .5; user-select: unset; cursor: default; }

@media (max-width: 1023px) {
    /* Base */
    .supersprint-system-search-container,
    .supersprint-system-search-container.homepage { padding: 0; background: var(--quinary-color); }

    /* Breadcrumb */
    .supersprint-system-search-breadcrumb-container { padding: 20px var(--global-padding-inline) 0; margin-bottom: 20px; }
    .supersprint-system-search-breadcrumb-wrapper { padding: 0; margin: 0; border: none; }

    /* Content */
    .supersprint-system-search-content-container { background: var(--secondary-color); }
    .supersprint-system-search-content-container.open { background: var(--primary-color); }
    .supersprint-system-search-content-header { display: block; margin: 0; padding: 25px var(--global-padding-inline); font-size: 25px; }
    .supersprint-system-search-header-icon { display: block; }
    .supersprint-system-search-content-container.open > .supersprint-system-search-content-header > .supersprint-system-search-header-icon { display: none; }
    .supersprint-system-search-content-container.open:not(.homepage) > .supersprint-system-search-content-header > .supersprint-system-search-header-content { padding-inline: 45px; }
    .supersprint-system-search-content-container.open:not(.homepage) > .supersprint-system-search-content-header > .supersprint-system-search-content-header-close { display: block; }
    .supersprint-system-search-content-wrapper { display: none; padding-bottom: 25px; }
    .supersprint-system-search-content-container.open > .supersprint-system-search-content-wrapper { display: block; }
    .supersprint-system-search-content-container { display: block;  }
    .supersprint-system-search-dropdown-container { margin: 0 var(--global-padding-inline) 10px; width: unset; }
    .supersprint-system-search-submit { margin-inline: var(--global-padding-inline); padding: 35px; width: calc(100% - var(--global-padding-inline) * 2); }
}

@media (max-width: 640px) {
    .supersprint-system-search-content-container.open:not(.homepage) > .supersprint-system-search-content-header { text-align: left; }
    .supersprint-system-search-content-container.open:not(.homepage) > .supersprint-system-search-content-header > .supersprint-system-search-header-content { padding-left: 0; }
}

@media (max-width: 480px) {
    .supersprint-system-search-content-header { font-size: 20px; }
}