/* Global */



/* Ajax search pro */

#ajaxsearchpro2_1 {
  border-radius: 0!important;
  translate:2px 0;
}
#ajaxsearchprobsettings2_1 {
  display:flex!important;
  @media only screen and (max-width:768px) {
    display:block!important;
  
    .asp_select_label {
      padding:0!important;
    }
  }
}
.asp_select2-selection__rendered {
  border: 1px solid rgba(230, 230, 230, 1)!important;
  box-shadow: none;
  background:white;

}
.asp_select2-dropdown {
  translate:0 -2px;
}
.resource-category_filter_box label:has(> input[value="333"]) {
    position:absolute;
    opacity: 0;
  }
  input.asp_radio {
    /* Add if not using autoprefixer */
    -webkit-appearance: none!important;
    appearance: none!important;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff!important;
    /* Not removed via appearance */
    margin: 0!important;
  }
  .asp_filter_tax fieldset, div.asp_w.asp_sb.searchsettings fieldset, 
  .asp_shortcode_column {
     width:100%!important;
    .term_filter_box {
      border-radius:0!important;
      width:100%!important;
      display:flex;
      border-bottom: 2px solid #4A1233;
      overflow:hidden;
      @media only screen and (max-width:650px){
        flex-wrap:wrap;
      }
    }
  
    & div.term_filter_box > label {
      width: auto;
      flex-grow: 4;
      color:#4A1233;
      padding: 10px !important;
      margin-right: -1px;
      border-radius: 0!important;
      display: flex;
      justify-content: center;
      font-weight:700!important;
      font-size: 120%;
    }
  }
    fieldset legend {
      visibility: hidden;
      position:absolute;
    }
    .asp_non_compact {
      opacity:.7;
    }

  .asp_label {
    background:#4a123315;
  }
  .asp_label.asp_option_checked {
    background:#4A1233;
    color:#FEFBCC!important;
  }
  
  .proclose { pointer-events:none;visibility: hidden;}
  #wpdreams_asp_results_1 .ajaxsearchpro, #wpdreams_asp_results_2 .ajaxsearchpro {
    visibility: visible!important;
    display:block!important;
    background-color:#fff!important;
    animation:none!important;
    margin:0 auto;
    opacity:1!important;
    height:550px!important;
    max-height:550px!important;
    min-height:550px!important;
    width:100%!important;
    max-width:1080px;
    border-radius:0!important;
    overflow:scroll!important;
    @media only screen and (max-width:767px){
      height:400px!important;
      max-height:400px!important;
      min-height:400px!important;
    }
  }
  .asp_results_top {
    background-color:#fff!important;
  }
  .results {
    height:550px!important;
    overflow:scroll!important;
    .item{
      transition:all 300ms ease;
    }
    .item:hover {
      scale:1.03;
    }
    .resdrg {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       column-gap:0;
       row-gap:0;
       @media only screen and (max-width:850px) {
        grid-template-columns: 1fr 1fr;
       }
       @media only screen and (max-width:650px) {
        grid-template-columns: 1fr;
       }
    }
    .asp_content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content:center;
        align-items:center;
      width:250px!important;
      height:auto;
      overflow:visible!important;
      padding:25px!important;
    }
    .resdrg {
    
      div.item {
        display:flex;
        justify-content: center;
        border-radius:0!important;
        margin:5px!important;
        background:#41BEED!important;
    
      }
    
  .item:nth-child(even){
        /* Your styles here */
        background-color: #217DA0!important;
      }
 
    .item::after {
      display:none!important; 
    }
    .asp_res_url, .asp_res_text {
      max-width:100%;
      text-align: left;
      color:#fff;
      -webkit-text-fill-color:#fff;
      text-align:center;
    }
    .asp_res_url {
      font-size: 18px !important;     
      padding: 8px!important;
      border-radius: 0;
      margin-bottom: 10px!important;
    
    }
    .asp_res_text {
      width:auto;
    }
  }
  

  
  /*
   Filtering Module Setting Styles
   * */
  
  
   
  div.asp_w.ajaxsearchpro.asp_non_compact, .asp_w_container {
      min-width:120px!important;
      width:120px!important;
      margin:0;
    @media only screen and (max-width:767px){
      width:100%!important;
      translate: 0 -8px;
    }
  } 
  @media only screen and (max-width:1100px) {
  
    .results {
        .asp_content {
        scale: .8;
        transform-origin: top center;
        @media only screen and (max-width:767px) {
          scale: 1;
           }
        }
        .resdrg {
          grid-auto-rows: .8fr;
        }
      }
    }
    @media only screen and (max-width:900px) {
      .results { 
        .resdrg {
          grid-template-columns: 1fr 1fr;
          grid-auto-rows:.8fr;
          @media only screen and (max-width:767px){
            grid-template-columns: 1fr;
            grid-auto-rows:1fr;
          }
    
        }
        @media only screen and (max-width:767px){
          height:400px!important;
          max-height:45vh;
        }
      }
      
       }
    }
    
    @media only screen and (max-width:767px) {
   
    .asp_filter_tax fieldset, div.asp_w.asp_sb.searchsettings fieldset, 
      .asp_shortcode_column {
    
        & div.term_filter_box > label {
          width: auto;
          flex-grow: 4;
          padding: 10px !important;
          margin-right: -1px;
          border-radius: 0!important;
        }
      }
        fieldset legend {
          visibility: hidden;
          position:absolute;
        }
        .asp_non_compact {
          opacity:.7;
        }
    }

    /*Trip Planner*/
 
   .trip-planner-wrapper {
	position: relative;
	width: 400px;
	height:auto;
	display:flex;
	justify-content: center;
	min-height: 280px;
	margin: 100px 0 100px 8%;
	padding-left: 25px;
	
	
	@media only screen and (max-width:980px) {
		margin: 130px auto;
		padding-left:0;
		height:240px;
		background:transparent;
			p.how-to-ride, p.how-to-ride a {
			color: black !important;
		}
		
	}
	@media only screen and (max-width:500px) {
		margin: 100px auto;
		padding-left:0;
		width:315px;
		height:340px;
		background:transparent;
		
	}
	
}

.trip-planner {
	position: absolute;
	left:50%;
	top:50%;
	width:400px;
	translate:-50% -50%;
	align-self: center;
	background: rgba(255,255,255,1);
	border-radius:4px;
	box-shadow:0 0 5px 0 rgba(0,0,0,.1), 0 0 15px 0 rgba(0,0,0,.2);
	padding:25px 40px 30px;
	
		@media only screen and (max-width:480px) {
			width:315px;
		}	
	& input {
	  width:100%;
	  border: none!important;
	  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2) inset, 0px 0px 15px 0px rgba(0, 0, 0, 0.1) inset!important;
	  padding:8px!important;
	  margin:5px 0!important;
	  border-radius:0;
	  min-height:42px;
	}
	& input:active, & input:focus-visible  {
	  border: 3px solid #0066A9;
	  border-radius:0!important;
	}
	input#starting {
		padding-right:36px!important;
	}
  & label { 
	  position: absolute; 
	  z-index: -1; 
	  opacity: 0; 
	  pointer-events: none;
	  }
	& button:hover {
	  cursor:pointer;
	}
	& h2 {
		color:black;
		margin-bottom: 0 !important;
		translate:-12px -2px;
		font-weight: 900;
    text-align:left;
		@media only screen and (max-width:980px) {
			translate:0 -2px;
			white-space: nowrap;
			font-size:120%;
		}
	}
  }
  .input-wrap {
	position:relative;
	height:auto;
	width:100%;
	display:flex;
	align-items: center;
	  & button {
		position: absolute;
        right: 0;
        top: 50%;
        translate: 18% -50%;
        border: none;
        width: 5px;
        min-width: 25px;
        height: 50%;
        background: url(/wp-content/uploads/commune/locate.svg) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center center;
        transition: filter 350ms ease;
        will-change: filter;
  
	}
  }
  .swap-locations {
	 position:absolute;
		right:0;
		top:50%;
		translate:100% -50%;
		filter:invert(1);
		border:none;
		width:35px;
		height:35px;      
		background:url('/wp-content/uploads/commune/swap.svg')!important;
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center center;
		transition: filter 350ms ease;
		will-change:filter;
  }
  .get-location:focus, .get-location:active, .swap-locations:focus, .swap-locations:active, .get-location:hover, .get-location:hover, .swap-locations:hover, .swap-locations:hover  {
		filter: drop-shadow(0 0 .5em #000);
		box-shadow:none!important;

	}
  .location-wrap {
	position:relative;
  }
.location-wrap::after {
    content: '---';
    position: absolute;
    font-size: .85em;
    letter-spacing: .14em;
    top: 50%;
    translate: -1.56em -47%;
    rotate: 90deg;
    left: 0;
	color:rgb(0, 0, 0);
}
  .trip-timing {
	display:flex;
	flex-wrap:wrap;
	column-gap:6px;
	margin-bottom: 3px;
	.input-wrap{
	  width:calc(50% - 3px);
	}
  }
select.select-time {
	border:none;
	font-weight: 600;
	color:#000000;
    letter-spacing: .05em;
	margin:5px 0;
	font-weight:600;
	position:relative;
	padding-right:8px;
	padding-left:0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background:transparent;
  }
  
  .select-wrap::after {
	content: '';
    width: 98%;
    height: 1px;
    position: relative;
    background: rgba(0, 0, 0, 0.85);
    top: 50%;
    left: 0;
    translate: 0 -50%;
    z-index: -1;
	}
	.go::after {
		content: '';
		margin-left: 5px;
		width: 14px;
		height: 14px;
		translate: 0 1px;
		display: inline-block;
		background: url('/wp-content/uploads/commune/go-icon.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.go {
		background: #5E7C2C;
		font-size: 100%;
		color: white;
		width: 100%;
		border: none;
		padding: 7px 0 8px;
		margin-top:3px;
		font-weight: 600;
		transition:background 300ms ease;
	}
	.go:hover {
		background:black;
	}
	.dot1 {
		width:10px;
		height:10px;
		position:absolute;
		background:#5E7C2C;
		left:0;
		top:0;
		border-radius:50%;
		transform:translate(-.97em, 1em);
	  }
	  .dot2 {
		width:10px;
		height:10px;
		position:absolute;
		background:#5E7C2C;
		left:0;
		bottom:0;
		border-radius:50%;
		transform:translate(-.97em, -1em);
	  }
	 .intro {
			box-shadow:0 0 0 3px #15497A50, 0 0 5px 2px rgba(0, 0, 0, 0.25);
		  }

	.powered {
		display:flex;
		justify-content: flex-start;
		height:50px;
		align-items:center;
		translate: 3px 0;
		pointer-events:none;
		user-select: none;
		& img {
			width:40%;
			height:auto;
			translate: -5% -1%;
		}
		& p {
			white-space:nowrap;
			color:#fff;
			font-weight:700;
			font-size:50%;
		}
	}
	.trip-planner h1 {
		color:white;
	  }
	@media only screen and (max-width: 980px) {
		.powered {
			translate: 8px 0;
			justify-content: center;
			& img {
				width:115px;
				height:auto;
				translate: -5% -1%;
				
			}
			& p {
				white-space:nowrap;
				color:black;
				font-weight:700;
				font-size:50%;
			}
		}
		
		  .trip-planner h1 {
			color:black;
		  }
		  .dot1, .dot2, .select-wrap::after {
			background:rgb(0, 0, 0);
		  }
		  .location-wrap::after, select.select-time {
			color:black;
		  }
		  .swap-locations { 
			filter:invert(0);
		  }
	}

    /* Make the host fill the field and carry the spacing */
  .trip-planner gmp-place-autocomplete {
    width: 100%;
    display: block;
    margin: 5px 0;
    background:white;
  }
.trip-planner gmp-place-autocomplete {
  display: block;
  width: 100%;
  margin: 5px 0;
  background-color: #fff;
  border: none;
  border-radius: 0;
  /* inset shadow on the WHOLE field now */
  box-shadow: 0 0 8px 0 rgba(0,0,0,.2) inset,
              0 0 15px 0 rgba(0,0,0,.1) inset;
  color-scheme: light;
}

.trip-planner gmp-place-autocomplete::part(input) {
  background: transparent;          /* let the host shadow show through */
  border: none !important;
  box-shadow: none !important;      /* kill the floating inner rectangle */
  padding: 8px !important;
  min-height: 42px;
  width: 100%;
  box-sizing: border-box;
}