/* -----------------------------------------------------
    main search style
----------------------------------------------------- */
.tp-main-search-area {
	margin-top: -85px;
	z-index: 2;
    position: relative;
}
.tp-main-search {
	background: $white;
	@include box-shadow(0px, 3px, 13px, #23397421);
	border-radius: 4px;
	padding: 60px 40px;
	.btn-yellow {
		width: 100%;
		i {
		    margin-left: 0;
		    font-size: 14px;
		    margin-right: 6px;
		}
	}
}
.tp-search-single-wrap {
	border-bottom: 2px solid #CFD3DE;
	display: block;
	position: relative;
	width: 100%;
	input {
		border: 0;
	    padding: 0 25px;
	    color: var(--body-color);
        height: 45px;
        font-family: var(--body-font);
		background: transparent;
		&:focus {
			outline: 0;
			border: 0;
		}
		&::placeholder {
			color: #CFD3DE;
		}
	}
	i {
		color: #CFD3DE;
	}
	i,
	img {
	    position: absolute;
	    left: 0;
	    top: 50%;
	    margin-top: -8px;
	    @include transition(all, 0.9s, ease);
	}
	.nice-select {
		border: 0;
		background: transparent;
    	padding: 0 25px;
    	color: #CFD3DE;
	    height: 45px;
        line-height: 45px;
        .current {
        	color: var(--body-color);
        	font-size: 16px;
        }
        .new-current {
        	color: var(--paragraph-color);
        }
    	&:after {
    		display: none;
    	}
    	.list {
    		width: 100%;
    		li {
    			color: #777;
    		}
    	}
	}
	.tp-returning-date-wrap {
		position: relative;
		input {
		    text-align: right;
		    display: inline-block;
		    width: auto;
		    max-width: 179px;
		    min-width: auto;
		    padding-right: 10px;
		    float: right;
		}
		img {
		    margin-left: -4px;
		}
	}
	&:after {
	    content: '';
	    position: absolute;
	    left: auto;
	    right: 0;
	    bottom: -2px;
	    width: 0%;
	    height: 2px;
	    background: var(--main-color-one);
	    visibility: hidden;
	    opacity: 0;
	    @include transition(all, 0.9s, ease);
	}
	&:hover:after,
	&:active:after,
	&:focus:after {
		visibility: visible;
	    opacity: 1;
	    right: auto;
	    left: 0;
	    width: 100%;
	    bottom: -2px;
	}
	&:hover i,
	&:active i,
	&:focus i {
		color: var(--main-color-one);
	}
}
.ui-datepicker {
	background: $white;
	width: auto !important;
    border: 1px solid #EAEAEA;
	@include box-shadow(0px, 3px, 13px, #23397421);
	padding: 20px;
	.ui-datepicker-header {
		background: none;
		border: 0;
		.ui-corner-all,
		.ui-state-hover {
			position: relative;
			cursor: pointer;
			border: 0;
			background: none;
			font-weight: 400;
		    color: var(--paragraph-color);
			top: 1px;
			right: 1px;
			> span {
				display: none;
			}
		}
	}
	.ui-datepicker-prev {
		&:after {
			content: "\f120";
			left: 0;
			position: absolute;
			font-size: 24px;
			top: 0;
		    font-family: lineAwesome;
		}
	}
	.ui-datepicker-next {
		float: right;
		&:after {
			content: "\f121";
			right: 0;
			position: absolute;
			font-size: 24px;
			top: 0;
		    font-family: lineAwesome;
		}
	}
	.ui-datepicker-title {
		text-align: center;
		line-height: 2.4em;
	    color: var(--paragraph-color);
	    font-weight: 400;
		font-family: var(--body-font);
	}
	.ui-datepicker-calendar {
		th {
			font-size: 15px;
			font-weight: 400;
	    	color: var(--paragraph-color);
			font-family: var(--body-font);
		}
		tr {
			td {
				height: 36px;
			    width: 36px;
			    text-align: center;
			    font-size: 15px;
			    a {
			    	text-align: center;
		    	    border: 0;
					background: none;
					padding: 0;
	    			color: var(--paragraph-color);
	    			font-family: var(--body-font);
				    &.ui-state-active {
				    	background: var(--main-color-one);
				    	border-radius: 4px;
				    	color: $white;
				    }
			    }
			}
		}
	}
}


.tp-main-search-2 {
	background: #01B9B7;
	.tp-search-single-wrap {
		i,
		input,
		.nice-select .current {
			background: transparent;
			color: $white;
		}
		input::placeholder {
			color: $white;
		}
		img {
			-webkit-filter: contrast(200%) brightness(150%); 
  			filter: contrast(200%) brightness(150%);
		}
		&:hover {
			i {
				color: var(--main-color-one);
			}
		}
	}
}

.tp-main-search-3 {
	margin-top: -115px !important;
	// position: absolute;
	// left: 50%;
	// width: 100%;
	// transform: translateX(-50%);
	// bottom: 35px;
    .tp-main-search {
    	padding: 0 0 0 40px;
	    .tp-search-single-wrap {
	    	margin-top: 15px;
	    }
	    .btn {
	    	height: 80px;
	    	line-height: 80px;
	    }
    }
}







/* -----------------------------------------------------
    tp-tour-list-search-area style
----------------------------------------------------- */

.tp-tour-list-search-area {
	margin-bottom: 40px;
	.single-input-wrap {
		position: relative;
		margin-bottom: 0;
		i {
			position: absolute;
			top: 17px;
    		left: 20px;
    		color: #CFD3DE;
		}
		input {
		    padding: 0 18px 0 48px;
		    border-radius: 4px;
		    &::placeholder {
		    	color: #CFD3DE;
		    }
		}
		&.tour-list-search-icon {
			i {
				font-size: 22px;
				top: 15px;
			}
		}
	}
}