@import url("component-main.css");
@import url("cards.css");
@import url("fields-filters.css");
@import url("widgets.css");

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg) }
}
@keyframes bounceBadge {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}


/* Global Elements */
.no-scroll {
	overflow: hidden;
}
.reset-button{
	display: inline-block;
	color: #347ADE;
	background: none;
	border: none;
	font-size: 15px;
	float: right;
}
.reset-button i.spin{
	animation: spin .5s linear infinite;
}
.status-color-green{
	background-color: #2D8C56;
	color: white !important;
	font-size: 13px;
}
.status-color-green,
.status-color-28,
.status-color-29{
	padding: 4px 10px !important;
	border-radius: 8px !important;
}
.shut-down{
	pointer-events: none !important;
}
.uael-rbs-toggle-sections{
	padding:0 !important;
}

/* Auto Complete */
.ui-autocomplete{}
.ui-autocomplete>li.autocomplete-item{
	padding: 0 !important;
}
.ui-autocomplete>li.autocomplete-item>div{
	display: flex !important;
	align-items: center !important;
	padding: 0 !important;
}
.ui-autocomplete>li.autocomplete-item>div>.autocomplete-type{
	display: inline-block !important;
	text-align: center !important;
	width: 115px !important;
	font-size: 14px;
	font-weight: bold;
	color: #003466;
	text-transform: uppercase;
	background: #f3f4f9;
	line-height: 50px;
}
.ui-autocomplete>li.autocomplete-item>div>.autocomplete-type>i{
	font-size: 20px !important;
	color: #003466 !important;
	padding: 5px;
}
.ui-autocomplete>li.autocomplete-item>div>.autocomplete-text{
	padding: 13px !important;
	flex: 1 !important;
	font-weight: 600;
}
.ui-autocomplete>li.autocomplete-item>div>.autocomplete-text>em{
	font-weight: 400;
}
.ui-autocomplete>li.autocomplete-item:hover>div{
	background: #f5f5f5;
	cursor: pointer !important;
	color: #003466 !important;
}


/* Media Responsiveness */
@media only screen and (min-width: 769px){
	
}
@media only screen and (max-width: 768px){
	
	#nexusSearch{
		margin-top: 25px !important;
	}
	#nexusSearch #filterBar #filtersHolder .filters-toggle{
		flex-basis: 48% !important;
	}
	
	#field-date-dropdown.active {
		width: 110% !important;
	}
	#field-date-wrapper #monthSelectionHolder #monthSelections li {
		font-size: 11px;
	}
	#field-date-wrapper #rangeHolder .caleran-container.caleran-inline,
	#field-date-wrapper #rangeHolder .caleran-container .caleran-input,
	#field-date-wrapper #rangeHolder .caleran-container-mobile .caleran-input {
		width: auto !important;
	}
	
	.caleran-calendars .caleran-calendar:last-child{
		display: none !important;
	}
	
	#field-date-wrapper #rangeHolder .button-row .range-button {
		padding: 5px 10px;
		font-size: 11px;
	}
	
	.card-image{
		width:100%;
	}
	.resort-card .card-image{
		min-height: 250px;
	}
	.property-card .card-image{
		min-height: 150px;
	}
	.resort-card .card-content{
		flex-wrap: wrap;
	}
	.resort-card .card-content .bottom-info{
		flex-direction: row;
	}
	.resort-card .card-content .card-info,
	.resort-card .card-content .bottom-info{
		flex-basis: 100%;
	}
	
	.card-content .info-text {
		font-size: .75rem;
	}
	.resort-card .card-content .info-text:not(.no-available)>span:last-child{
		font-size: 0.7rem;
	}
	.resort-card .card-content .info-text:not(.no-available)>span:last-child>em{
		font-size: 0.65rem;
	}
	
	.card-deck table,
	.card-deck tbody,
	.card-deck tr{
		display: block;
	}
	.card-deck thead{
		display: none;
	}
	
	.card-deck tr{
		padding: 10px 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		margin-top: 15px;
	}
	.resort-card tr:not(:last-child){
		padding: 10px 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		margin-top: 15px;
	}
	.resort-card tr:last-child{
		margin-top: 20px;
	}
	
	.card-deck td{
		padding: 5px !important;
		display: inline-block !important;
		border-top: none !important;
	}
	.resort-card .recent-listings table td:last-child,
	.card-deck table td:last-child{
		width: 100%;
	}
	.resort-card .recent-listings table td a,
	.card-deck table td a{
		width: 100%;
		max-width: 100% !important;
	}
	.card-deck td.td-unit-type,
	.card-deck td.td-bed-bath,
	.card-deck td.td-sleep-capacity,
	.card-deck td.td-check-in-out,
	.card-deck td.td-nights,
	.card-deck td.td-sale-unit-type,
	.card-deck td.td-use-year,
	.card-deck td.td-usage-type,
	.card-deck td.td-points{
		width: 100%;
	}
	
	.card-deck td.td-bed-bath,
	.card-deck td.td-sleep-capacity,
	.card-deck td.td-check-in-out,
	.card-deck td.td-nights,
	.card-deck td.td-sale-unit-type,
	.card-deck td.td-use-year,
	.card-deck td.td-usage-type,
	.card-deck td.td-points{
		text-align: right;
		font-size: .8rem !important;
		padding: 2px 5px !important;
	}
	
	.card-deck td.td-bed-bath>span,
	.card-deck td.td-sleep-capacity>span,
	.card-deck td.td-check-in-out>span,
	.card-deck td.td-nights>span,
	.card-deck td.td-sale-unit-type>span,
	.card-deck td.td-use-year>span,
	.card-deck td.td-usage-type>span,
	.card-deck td.td-points>span{
		float:left;
	}
	
	.card-deck td.pricecol,
	.card-deck td.td-view-all{
		width: 100%;
		text-align: center;
	}
	.card-deck td.td-view-all a{
		width: 100% !important;
	}
	
	.ph-item:not(.mobile){
		display: none !important;
	}
	.ph-item.mobile .ph-col-picture{
		width: 100%;
		max-width: 100%;
	}
	.ph-item.mobile .ph-col-picture .ph-picture{
		height: 200px;s
	}
	
	.card-deck.vertical{
		padding:0 !important;
	}
	#nexusSearchWidget{
		margin: 10px;
	}
	#nexusSearchWidget .form-body{
		flex-wrap: wrap;
	}
	#nexusSearchWidget .field-keyword-wrapper,
	#nexusSearchWidget #field-date-wrapper{
		width: 100%;
	}
	#nexusSearchWidget .form-body #searchSubmit{
		width: 100%;
		margin: 0;
	}
	
	#dateDropdown.active{
		width: 100% !important;
		left: 0 !important;
	}
	#monthSelectionHolder #monthSelections li{
		width: 49%;
	}
	#rangeHolder .button-row{
		flex-wrap: wrap;
		justify-content: center !important;
		gap: 10px;
	}
	
	#filterModalBody {
		padding: 50px 20px;
	}
}
@media only screen and (min-width: 769px) and (max-width:991px){
	td span.mobile{
		display: none !important;
	}
}
@media only screen and (min-width: 991px){
	.mobile{
		display: none !important;
	}
	#mobileFilterBarHolder{
		display: none;
	}
}
@media only screen and (max-width: 991px){
	
	.no-mobile{
		display: none !important;
	}
	
	#nexusSearch #filterBar{
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
		padding:15px;
		justify-content: space-between;
	}
	#nexusSearch #filterBar #filtersHolder .field-keyword-wrapper{
		width: 100%;
	}
	#nexusSearch #filterBar #switchesHolder .switches{
		justify-content: space-around;
	}
	#nexusSearch #filterBar #filtersHolder{
		flex-wrap: wrap;
		gap: 10px;
		justify-content: space-between;
	}
	#nexusSearch #filterBar #filtersHolder .filters-toggle{
		flex-basis: 49%;
		justify-content: space-between;
		line-height: 35px;
	}
	
	
	/* Auto Complete */
	.ui-autocomplete{
		max-width: 100% !important;
		width: 98% !important;
		font-size: 11px !important;
		left: 1% !important;
	}
	.ui-autocomplete>li.autocomplete-item{
		padding: 0 !important;
	}
	.ui-autocomplete>li.autocomplete-item>div{
		display: flex !important;
		align-items: center !important;
		padding: 0 !important;
	}
	.ui-autocomplete>li.autocomplete-item>div>.autocomplete-type{
		display: inline-block !important;
		text-align: center !important;
		width: 75px !important;
		font-size: 8px;
		font-weight: bold;
		color: #003466;
		text-transform: uppercase;
		background: #f3f4f9;
		line-height: 50px;
	}
	.ui-autocomplete>li.autocomplete-item>div>.autocomplete-type>i{
		font-size: 12px !important;
		color: #003466 !important;
		padding: 5px;
		display: none;
	}
	.ui-autocomplete>li.autocomplete-item>div>.autocomplete-text{
		padding: 5px !important;
		flex: 1 !important;
		font-weight: 600;
		line-height: 1em;
	}
	.ui-autocomplete>li.autocomplete-item>div>.autocomplete-text>em{
		font-weight: 400;
		display: block;
		margin-top: 5px;
		font-size: 10px;
	}
	.ui-autocomplete>li.autocomplete-item:hover>div{
		background: #f5f5f5;
		cursor: pointer !important;
		color: #003466 !important;
	}
}
@media only screen and (max-width: 1200px){
	#nexusSearch>.container{
		max-width: 99% !important;
	}
	
	#header-mobile{
		box-shadow: none !important;
	}
}