/* Knockout Search Styles */
.loading {
    width: 109px;
    height:109px;
    transform: translateZ(0);
    transform-origin: 50% 50%;
    animation: spin 1s linear infinite;
    margin:4em auto;
}
.loading:before {
    content:"";
    width: 109px;
    height:109px;
    background: url('images/flatfeelogo-sm.png') no-repeat center center;
    display:inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.knockout-search-wrapper{}

.knockout-search-container {
    margin-bottom:1em;
}
.knockout-search-fields {
    display: flex;
    gap: 0.3em;
    width: 100%;
}
.knockout-search-field-wrapper {
    width: 60%;
}

.knockout-search-field {
    width: 100%;
    font-size: 1.2em;
    padding: 0.5em !important;
    border-radius: 10px;
    border: 3px solid #8BC446 !important;
    background-color: #edf7ff !important;
    outline: none;
}

.knockout-search-btn-wrapper {
    width: 40%;
}

#knockout-form button.knockout-page {
    width:46px !important;
    height:46px !important;
    padding:0 !important;
    font-size:14px !important;
    font-weight:800 !important;
}

#knockout-header > div.knockount-results-pagination > ul > li > button.knockout-page.active,
#knockout-footer > div.knockount-results-pagination > ul > li > button.knockout-page.active {
    background: linear-gradient(135deg, #486721, #72a533) !important;
}

.knockout-button {
    color: #FFFFFF !important;
    border-width: 1px !important;
    border-color: #8BC446;
    border-radius: 10px !important;
    font-family: 'custom open sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer;
    background-color: #8BC446;
    padding-left:1em !important;
    padding-right:1em !important;
    transition: all 300ms ease 0ms;
    font-size: 20px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    transition-property: all !important;
    padding: .3em 1em;
    line-height: 1.7em;
    box-shadow: none;
}

.knockout-button:hover {
    border-color: #9edf4f;
    background-color: #9edf4f;
}

.knockout-button:disabled {
    background-color:#9f9f9f;
    border-color: #bdbdbd;
    cursor:not-allowed;
}

.knockout-search-btn {
    display: inherit;
    width: 100%;
    max-height: 51px;
    line-height: 2;
    height: 100%;
    text-align: center;
    outline: none;
    border: none;
}

.knockout-search-results-container {}
.knockout-search-results-wrapper { padding-top:1.5em; }
.knockout-search-results-header, .knockout-search-results-footer { margin-top:1em; margin-bottom:1em; display:flex; flex-direction:row; align-items:center; gap:0.5em; }
.knockout-search-header p {
    font-size: 14px;
    margin-bottom:1em;
}

.knockout-results-title { width: 63%; }
.knockount-results-pagination { width:37%; }

.knockout-result {
    display: flex;
    gap: 1em;
    margin-bottom: 1em;
    border: 1px solid #bbb;
    padding: 1.5em 0;
}
.knockout-result-image-wrapper { max-width: 210px; display:flex; align-items: center; padding: 0 0.5em; width:210px; }
.knockout-thumb { 
    height: auto;
    max-width: 100%;
    width: 100%;
    padding: 0px 1em;
}

.knockout-result-details-container {
    width: 100%;
    padding: 1em;
}

.knockout-result-details-wrapper { display:flex; }
.knockout-result-info-wrapper { flex-grow: 1; max-width: 50%; padding-right: 0.5em; }

.result-mark { font-size: 20px; }
.result-field { 
    font-size: 13px;
    padding: 0; 
}
.result-field span {
    font-weight:bold;
}

.knockout_pagination {
    display:flex;
    list-style: none;
    gap:0.3em;
    justify-content: flex-end;
    align-items: center;
    
}
.knockout_pagination li {
    display:inherit;
}
.knockout_pagination li button {
    background-color: #8BC446;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    text-align: center;
    color: white;
    line-height: 2.5;
    cursor:pointer;
    border-width:0px;
}

.knockout_pagination li button.disabled {
    background-color: #9f9f9f;
    cursor:not-allowed;
}

.knockout_pagination li button:hover {
    background-color: #8bce39;
}
.knockout_pagination li a.disabled {

}
.knockout_pagination li a.active {
    
}

@media (max-width: 600px) {
    .knockout-search-fields { flex-wrap:wrap; }
    .knockout-search-field-wrapper { flex-grow:1; }
    .knockout-search-btn-wrapper { flex-grow:1; }
    .knockout-search-results-header { flex-wrap: wrap; }
    .knockout-results-title { flex-grow:1; text-align:center; }
    .knockount-results-pagination { flex-grow:1; }
    .knockout_pagination { justify-content: center; padding-bottom:1em; }
    .knockout-result-details-container { flex-grow:1; }
    .knockout-result-details-wrapper { flex-wrap: wrap; flex-direction: column; }
    .knockout-result-info-wrapper { max-width:none; padding:0; }
    .knockout-result { flex-wrap: wrap; }
    .knockout-result-image-wrapper { max-width:none; width:100%; flex-grow:1; justify-content: center; }
    .knockout-thumb { max-width:210px; width:210px; }
    #knockout-footer > div.knockout-results-title { display: none; }
}