/*
AJAX SEARCH PRO FOR WORDPRESS PLUGIN BASIC CSS
*/

/*
CONTENTS:
    0. ANIMATIONS AND TRANSITIONS
	1. GENERICS AND CSS RESET - Some basic CSS classes and reset
	2. INPUT BOX - input box and form layout
	3. ICONS - loading, closing, magnifier, settings icons
	4. RESULT STYLES
	    4.1 GENERAL RESULT STYLES
	    4.2 VERTICAL RESULT STYLES
	    4.3 HORIZONTAL RESULT STYLES
	    4.4 ISOTOPIC RESULT STYLES
	    4.5 POLAROID RESULT STYLES
	5. SETTINGS STYLES
	6. CUSTOM FIELD FIELDSETS
	7. ARROW BOX
	8. COLUMN STYLES
	9. NO-UI DRAGGER STYLES
	10. SUGGESTED KEYWORDS
    11. JQUERY UI STYLES
    12. AUTOCOMPLETE STYLES
    13. RTL SPECIFIC STYLES AND CHANGES
    14. SELECT2 SCRIPT STYLES
    15. MISC


SHORTHAND CLASSES
    .asp_w -> Main class, each element is a descendant
    .asp_m .asp_m_1 .asp_m_1_1 -> Main search box class, with instance ID, with instance and count ID
    .asp_s .asp_s_1 .asp_s_1_1 -> Settings box class, with instance ID, with instance and count ID
    .asp_r .asp_r_1 .asp_r_1_1 -> Results box class, with instance ID, with instance and count ID
    .asp_sb -> Block settings layout
    .asp_rb -> Block results layout
*/



/*  *******************************************************************************************************************\
    0. ANIMATIONS AND TRANSITIONS & FONTS
\**********************************************************************************************************************/
@keyframes aspAnFadeIn {
    0%   {opacity: 0;}
    50%  {opacity: 0.6;}
    100% {opacity: 1;}
}

@-webkit-keyframes aspAnFadeIn {
    0%   {opacity: 0;}
    50%  {opacity: 0.6;}
    100% {opacity: 1;}
}

@keyframes aspAnFadeOut {
    0%   {opacity: 1;}
    50%  {opacity: 0.6;}
    100% {opacity: 0;}
}

@-webkit-keyframes aspAnFadeOut {
    0%   {opacity: 1;}
    50%  {opacity: 0.6;}
    100% {opacity: 0;}
}

@keyframes aspAnFadeInDrop {
    0%   {opacity: 0; transform: translate(0, -50px);}
    100% {opacity: 1; transform: translate(0, 0);}
}

@-webkit-keyframes aspAnFadeInDrop {
    0%   {opacity: 0; transform: translate(0, -50px); -webkit-transform: translate(0, -50px);}
    100% {opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0);}
}

@keyframes aspAnFadeOutDrop {
    0% {opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0);}
    100%   {opacity: 0; transform: translate(0, -50px); -webkit-transform: translate(0, -50px);}
}

@-webkit-keyframes aspAnFadeOutDrop {
    0% {opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0);}
    100%   {opacity: 0; transform: translate(0, -50px); -webkit-transform: translate(0, -50px);}
}

div.ajaxsearchpro.asp_an_fadeIn,
div.ajaxsearchpro.asp_an_fadeOut,
div.ajaxsearchpro.asp_an_fadeInDrop,
div.ajaxsearchpro.asp_an_fadeOutDrop {
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

.asp_an_fadeIn,
div.ajaxsearchpro.asp_an_fadeIn {
    animation-name: aspAnFadeIn;
    -webkit-animation-name: aspAnFadeIn;
}

.asp_an_fadeOut,
div.ajaxsearchpro.asp_an_fadeOut {
    animation-name: aspAnFadeOut;
    -webkit-animation-name: aspAnFadeOut;
}

div.ajaxsearchpro.asp_an_fadeInDrop {
    animation-name: aspAnFadeInDrop;
    -webkit-animation-name: aspAnFadeInDrop;
}

div.ajaxsearchpro.asp_an_fadeOutDrop {
    animation-name: aspAnFadeOutDrop;
    -webkit-animation-name: aspAnFadeOutDrop;
}

div.ajaxsearchpro.asp_main_container {
    transition: width 130ms linear;
    -webkit-transition: width 130ms linear;
}


/*  *******************************************************************************************************************\
    1. GENERIC CSS RESET
\**********************************************************************************************************************/

asp_w_container,
div.asp_w.ajaxsearchpro,
div.asp_w.asp_r,
div.asp_w.asp_s,
div.asp_w.asp_sb,
div.asp_w.asp_sb * {
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    text-decoration: none;
    text-align: left;
    text-indent: initial;
    letter-spacing: normal;
	font-display: swap;
}

div.asp_w_container div[id*=__original__] {
	display: none !important;
}

div.asp_w.ajaxsearchpro {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

div.asp_w.asp_r,
div.asp_w.asp_r * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.asp_w.ajaxsearchpro input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
div.asp_w.ajaxsearchpro input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }

div.asp_w.ajaxsearchpro input[type="search"]::-webkit-search-decoration,
div.asp_w.ajaxsearchpro input[type="search"]::-webkit-search-cancel-button,
div.asp_w.ajaxsearchpro input[type="search"]::-webkit-search-results-button,
div.asp_w.ajaxsearchpro input[type="search"]::-webkit-search-results-decoration { display: none; }

div.asp_w.ajaxsearchpro input[type="search"] {
	appearance: auto !important;
	-webkit-appearance: none !important;
}

.clear {
    clear: both;
}

/* This clear class is bulletproof */
.asp_clear {
    display: block !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: 0 !important;
}

.hiddend {
    display: none !important;
}

div.asp_w.ajaxsearchpro {
    width: 100%;
    height: auto;
    border-radius: 0;
    background: rgba(255, 255, 255, 0);
    overflow: hidden;
}

div.asp_w.ajaxsearchpro.asp_non_compact {
    min-width: 200px;
}

#asp_absolute_overlay {
    width: 0;
    height: 0;
    position: fixed;
    background: rgba(255, 255, 255, 0.5);
    top: 0;
    left: 0;
    display: block;
    z-index: 0;
    opacity: 0;
    transition: opacity 200ms linear;
    -webkit-transition: opacity 200ms linear;
}


/*  *******************************************************************************************************************\
    2. INPUT FORM and BOX
\**********************************************************************************************************************/

div.asp_m.ajaxsearchpro .proinput input:before,
div.asp_m.ajaxsearchpro .proinput input:after,
div.asp_m.ajaxsearchpro .proinput form:before,
div.asp_m.ajaxsearchpro .proinput form:after {
    display: none;
}

div.asp_w.ajaxsearchpro textarea:focus,
div.asp_w.ajaxsearchpro input:focus {
	outline: none;
}

/* Remove IE X from the input */
div.asp_m.ajaxsearchpro .probox .proinput input::-ms-clear {
    display: none;
}

div.asp_m.ajaxsearchpro .probox {
    width: auto;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
    border: 1px solid #FFF;
    box-shadow: 1px 0 3px #CCCCCC inset;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    direction: ltr;
    align-items: stretch;
	isolation: isolate; /* Safari bleeding background corner with border radius fix */
}

div.asp_m.ajaxsearchpro .probox .proinput {
    width: 1px;
    height: 100%;
    float: left;
    box-shadow: none;
    position: relative;
    flex: 1 1 auto;    /* Let it grow, shrink, auto basis*/
    -webkit-flex: 1 1 auto; /* Let it grow, shrink, auto basis*/
    z-index: 0;
}

div.asp_m.ajaxsearchpro .probox .proinput form {
    height: 100%;
    /* some themes like to add un-removable margin and padding.. */
    margin: 0 !important;
    padding: 0 !important;
	display: block !important;
	max-width: unset !important;
}

div.asp_m.ajaxsearchpro .probox .proinput input {
    height: 100%;
    width: 100%;
    border: 0px;
    background: transparent;
    box-shadow: none;
    padding: 0;
    left: 0;
    padding-top: 2px;
    min-width: 120px;
	min-height: unset;
	max-height: unset;
}

div.asp_m.ajaxsearchpro .probox .proinput input.autocomplete {
    border: 0px;
    background: transparent;
    width: 100%;
    box-shadow: none;
    margin: 0;
    padding: 0;
    left: 0;
}

div.asp_m.ajaxsearchpro .probox .proinput.iepaddingfix {
    padding-top: 0;
}


/*  *******************************************************************************************************************\
    3. ICONS - loading, closing, magnifier, settings icons
\**********************************************************************************************************************/

div.asp_m.ajaxsearchpro .probox .proloading,
div.asp_m.ajaxsearchpro .probox .proclose,
div.asp_m.ajaxsearchpro .probox .promagnifier,
div.asp_m.ajaxsearchpro .probox .prosettings {
    width: 20px;
    height: 20px;
	min-width: unset;
	min-height: unset;
    background: none;
    background-size: 20px 20px;
    float: right;
    box-shadow: none;
    margin: 0;
    padding: 0;
    z-index: 1;
}

div.asp_m.ajaxsearchpro button.promagnifier:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4);
}

div.asp_m.ajaxsearchpro .probox .proloading,
div.asp_m.ajaxsearchpro .probox .proclose {
    background-position: center center;
    display: none;
    background-size: auto;
    background-repeat: no-repeat;
    background-color: transparent;
}

div.asp_m.ajaxsearchpro .probox .proloading {
    padding: 2px;
    box-sizing: border-box;
}

div.asp_m.ajaxsearchpro .probox .proclose {
    position: relative;
    cursor: pointer;
    z-index: 2;
}

div.asp_m.ajaxsearchpro .probox .promagnifier .innericon,
div.asp_m.ajaxsearchpro .probox .prosettings .innericon,
div.asp_m.ajaxsearchpro .probox .proclose .innericon {
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 100%;
    height: 100%;
    line-height: initial;
    text-align: center;
    overflow: hidden;
}

div.asp_m.ajaxsearchpro .probox .promagnifier .innericon svg,
div.asp_m.ajaxsearchpro .probox .prosettings .innericon svg,
div.asp_m.ajaxsearchpro .probox .proloading svg {
    height: 100%;
    width: 22px;
    vertical-align: baseline;
    display: inline-block;
}

div.asp_m.ajaxsearchpro .probox .proclose svg  {
    background: #333333;
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    left: 50%;
    fill: #fefefe;
    box-sizing: border-box;
    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9);
}


/*  *******************************************************************************************************************\
    4. RESULT STYLES
\**********************************************************************************************************************/


/*      4.1 GENERAL RESULT STYLES
\**********************************************************************************************************************/

.opacityOne {
    opacity: 1;
}

.opacityZero {
    opacity: 0;
}

div.asp_w.asp_s [disabled].noUi-connect,
div.asp_w.asp_s [disabled] .noUi-connect {
    background: #B8B8B8;
}
div.asp_w.asp_s [disabled] .noUi-handle {
    cursor: not-allowed;
}

div.asp_w.asp_r p.showmore {
    display: none;
    margin: 0;
}
div.asp_w.asp_r.asp_more_res_loading p.showmore a,
div.asp_w.asp_r.asp_more_res_loading p.showmore a span{
    color: transparent !important;
}

@-webkit-keyframes shm-rot-simple {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        opacity: 0.85;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 1;
    }
}

@keyframes shm-rot-simple {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        opacity: 0.85;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 1;
    }
}
div.asp_w.asp_r div.asp_showmore_container {
    position: relative;
}
div.asp_w.asp_r. div.asp_moreres_loader {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.2);
}
div.asp_w.asp_r.asp_more_res_loading div.asp_moreres_loader {
    display: block !important;
}
div.asp_w.asp_r div.asp_moreres_loader-inner {
    height: 24px;
    width: 24px;
    animation: shm-rot-simple 0.8s infinite linear;
    -webkit-animation: shm-rot-simple 0.8s infinite linear;
    border: 4px solid #353535;
    border-right-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    margin: -12px auto auto -12px;
    left: 50%;
}

div.asp_hidden_data,
div.asp_hidden_data * {
    display: none;
}

div.asp_w.asp_r {
    display: none;
}

div.asp_w.asp_r * {
    text-decoration: none;
    text-shadow: none;
}

div.asp_w.asp_r .results {
    overflow: hidden;
    width: auto;
    height: 0;
    margin: 0;
    padding: 0;
}

div.asp_w.asp_r .asp_nores {
	display: flex;
	flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
    width: auto;
    height: auto;
	position: relative;
	z-index: 2;
}

div.asp_w.asp_r .results .item {
    overflow: hidden;
    width: auto;
    margin: 0;
    padding: 3px;
    position: relative;
    background: #f4f4f4;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

div.asp_w.asp_r .results .item,
div.asp_w.asp_r .results .asp_group_header {
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: ease;
    backface-visibility: hidden;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-timing-function: ease;
    -webkit-backface-visibility: hidden;
}

div.asp_w.asp_r .results .item .asp_image {
    overflow: hidden;
    background: transparent;
    padding: 0;
    float: left;
    background-position: center;
    background-size: cover;
    position: relative;
}

div.asp_w.asp_r .results .asp_image canvas {
    display: none;
}

div.asp_w.asp_r .results .asp_image .asp_item_canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    opacity: 1;
    background-position: inherit;
    background-size: inherit;
    transition: opacity 0.5s;
}

div.asp_w.asp_r .results .item:hover .asp_image .asp_item_canvas,
div.asp_w.asp_r .results figure:hover .asp_image .asp_item_canvas{
    opacity: 0;
}

div.asp_w.asp_r a.asp_res_image_url,
div.asp_w.asp_r a.asp_res_image_url:hover,
div.asp_w.asp_r a.asp_res_image_url:focus,
div.asp_w.asp_r a.asp_res_image_url:active {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}

div.asp_w.asp_r .results .item .asp_image_auto {
    width: auto !important;
    height: auto !important;
}

div.asp_w.asp_r .results .item .asp_image img {
    width: 100%;
    height: 100%;
}

div.asp_w.asp_r .results a span.overlap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

div.asp_w.asp_r .resdrg {
    height: auto;
}

div.asp_w.ajaxsearchpro .asp_results_group {
    margin: 10px 0 0 0;
}

div.asp_w.ajaxsearchpro .asp_results_group:first-of-type {
    margin: 0 !important;
}


/*      4.2 VERTICAL RESULT STYLES
\**********************************************************************************************************************/
/*[vertical]*/
div.asp_w.asp_r.vertical .results .item:first-child {
    border-radius: 0;
}

div.asp_w.asp_r.vertical .results .item:last-child {
    border-radius: 0;
    margin-bottom: 0;
}

div.asp_w.asp_r.vertical .results .item:last-child:after {
    height: 0;
    margin: 0;
    width: 0;
}
/*[vertical]*/

/*      4.3 HORIZONTAL RESULT STYLES
\**********************************************************************************************************************/


/*      4.4 ISOTOPIC RESULT STYLES, ISOTOPIC NAVIGATION
\**********************************************************************************************************************/


/*      4.4 POLAROID RESULT STYLES
\**********************************************************************************************************************/


/*  *******************************************************************************************************************\
    5. SETTINGS STYLES
\**********************************************************************************************************************/


/*  *******************************************************************************************************************\
    8. COLUMN STYLES
\**********************************************************************************************************************/

.asp_two_column {
    margin: 8px 0 12px 0;
}

.asp_two_column .asp_two_column_first,
.asp_two_column .asp_two_column_last {
    width: 48%;
    padding: 1% 2% 1% 0;
    float: left;
    box-sizing: content-box;
}

.asp_two_column .asp_two_column_last {
    padding: 1% 0% 1% 2%;
}

.asp_shortcodes_container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -10px 0 12px -10px;
    box-sizing: border-box;
}

.asp_shortcodes_container .asp_shortcode_column {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    min-width: 120px;
    padding: 10px 0 0 10px;
    flex-basis: 33%;
    -webkit-flex-basis: 33%;
    box-sizing: border-box;
}

/*  *******************************************************************************************************************\
    9. NO-UI DRAGGER STYLES
\**********************************************************************************************************************/


/*  *******************************************************************************************************************\
    10. SUGGESTED KEYWORDS
\**********************************************************************************************************************/

p.asp-try {
    color: #555;
    font-size: 14px;
    margin-top: 5px;
    line-height: 28px;
    font-weight: 300;
    visibility: hidden;
}

p.asp-try a {
    color: #FFB556;
    margin-left: 10px;
    cursor: pointer;
    display: inline-block;
}

/*  *******************************************************************************************************************\
    11. DATEPICKER STYLES
\**********************************************************************************************************************/


/*  *******************************************************************************************************************\
    12. AUTOCOMPLETE STYLES
\**********************************************************************************************************************/
/*[autocomplete]*/
.asp_ac_autocomplete,
.asp_ac_autocomplete div,
.asp_ac_autocomplete span{
    /*	-moz-box-sizing: border-box !important;
        box-sizing: border-box !important;*/
}

.asp_ac_autocomplete {
    display:inline;
    position:relative;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
}

.asp_ac_autocomplete .asp_ac_autocomplete_dropdown {
    position:absolute;
    border: 1px solid #ccc;
    border-top-color: #d9d9d9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: default;
    display:none;
    z-index: 1001;
    margin-top:-1px;
    background-color:#fff;
    min-width:100%;
    overflow:auto;
}
.asp_ac_autocomplete .asp_ac_autocomplete_hint {
    position:absolute;
    z-index:1;
    color:#ccc !important;
    -webkit-text-fill-color:#ccc !important;
    text-fill-color:#ccc  !important;
    overflow:hidden !important;
    white-space: pre  !important;
}

.asp_ac_autocomplete .asp_ac_autocomplete_hint span {
    color:transparent;
    opacity: 0.0;
}

.asp_ac_autocomplete .asp_ac_autocomplete_dropdown > div{
    background:#fff;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.5em;
    padding: 2px 0px 2px 0px;
}
.asp_ac_autocomplete .asp_ac_autocomplete_dropdown > div.active{
    background: #0097CF;
    color: #FFFFFF;
}
/*[autocomplete]*/

/*  *******************************************************************************************************************\
    13. RTL SPECIFIC STYLES AND CHANGES
\**********************************************************************************************************************/
.rtl .asp_content,
.rtl .asp_nores,
.rtl .asp_content *,
.rtl .asp_nores *,
.rtl .searchsettings form {
    text-align: right !important;
    direction: rtl !important;
}

.rtl .asp_nores >* {
    display: inline-block;
}

.rtl .searchsettings .asp_option  {
    flex-direction: row-reverse !important;
    -webkit-flex-direction: row-reverse !important;
}

.rtl .asp_option {
    direction: ltr; /* Needs to stay like this */
}

.rtl .asp_label,
.rtl .asp_option div.asp_option_label {
    text-align: right !important;
}

.rtl .asp_label {
    max-width: 1000px !important;
    width: 100%;
    direction: rtl !important;
}

.rtl .asp_label input[type=radio] {
    margin: 0 0 0 6px !important;
}

.rtl .asp_option_cat_level-0 div.asp_option_label {
    font-weight: bold !important;
}

.rtl fieldset .asp_option_cat_level-1 {
    margin-right: 12px !important;
    margin-left: 0;
}

.rtl fieldset .asp_option_cat_level-2 {
    margin-right: 24px !important;
    margin-left: 0;
}

.rtl fieldset .asp_option_cat_level-3 {
    margin-right: 36px !important;
    margin-left: 0;
}

.rtl .searchsettings legend {
    text-align: right !important;
    display: block;
    width: 100%;
}


.rtl .searchsettings input[type=text],
.rtl .searchsettings select {
    direction: rtl !important;
    text-align: right !important;
}

.rtl div.asp_w.asp_s.searchsettings form,
.rtl div.asp_w.asp_sb.searchsettings form {
    flex-direction: row-reverse !important;
}

.rtl div.horizontal.asp_r div.item {
    float: right !important;
}

.rtl p.asp-try {
    direction: rtl;
    text-align: right;
    margin-right: 10px;
    width: auto !important;
}

/*  *******************************************************************************************************************\
    14. SELECT2 SCRIPT STYLES
\**********************************************************************************************************************/


/*  *******************************************************************************************************************\
    15. Misc
\**********************************************************************************************************************/
.asp_elementor_nores {
    text-align: center;
}

.elementor-sticky__spacer .asp_w,
.elementor-sticky__spacer .asp-try {
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}