/*** BIPFLY CSS ***/
:root{
	--primary-hue: 188;
	--primary-saturation: 78%;
	--primary-light: 33%;
	
	--secondary-hue: 207;
	--secondary-saturation: 36%;
	--secondary-light: 28%;
    
    --default-text-color: #333;
    
    --header-bg: #dbeeff;
	--footer-bg: #fff;
	--body-bg: #FFF;
	
	--primary-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
	--primary-color-darken: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-light) - 10%));
	--primary-color-lighten: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-light) + 40%));
	--primary-color-lighten-half: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-light) + 45%));
	--primary-color-lighten-full: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-light) + 58%));
	
	--secondary-color: hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-light));
	--secondary-color-darken: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-light) - 10%));
	--secondary-color-lighten: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-light) + 25%));
	--secondary-color-lighten-half: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-light) + 45%));
	--secondary-color-lighten-full: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-light) + 50%));
}

body{
	background-color: var(--body-bg);
	color: var(--default-text-color);
}

/** PRIMARY **/

html #header{ 
	background-color: var(--header-bg);
	border-bottom: none;
	background-image: url(/images/newui/bg-travel.svg);
    background-size: cover;
}
body .btn.btn-primary,
.btn.btn-warning,
.btn4,
input[type='button'], 
input[type='submit'], 
.button,
.ui-dialog .btn-close:hover,
.version,
#nav > ul > li > a,
ul.nav li a:hover, 
ul.nav li a:focus,
html .price-alert .pa-title,
html #brandedFares .fare-item.selected .fare-title,
body .ui-widget-header,
html .ui-datepicker .ui-state-active,
html .hotel-page .guest-rating-score,
html .sr-photo .recommend,
.pager-list a.selected, 
.pager-list a.selected:hover,
.reservation .genders.ui-buttonset .ui-state-active{
	background:var(--primary-color);
}
body .btn.btn-primary,
.btn.btn-warning,
.warning, 
.classRules,
.alert-warning,
.alert-success.orange,
.btn4,
html #brandedFares .fare-item.selected .fare-item-wrap,
html .ui-datepicker .ui-state-active,
html .page-hotel .country-map-filters .dropdown .filter-dropdown .filter-keyword-item,
.pager-list a.selected, .pager-list a.selected:hover,
.searchSorting .select-style.active select,
.page-tabs.ui-tabs .ui-widget-header .ui-state-active,
.reservation .genders.ui-buttonset .ui-state-active{
    border-color: var(--primary-color);
}
.btn.btn-circle,
.is-fixed-box a,
html .ui-datepicker .ui-datepicker-header,
#footer .mobile-popover .btn-close:hover,
#footer .footer-nav .fn-1 span,
#footer .footer-nav .fn-2 span,
#footer .f-box.f-campaign p a span
#footer .f-mob-link .fn-mobile-text:hover em,
#footer .footer-links ul .title,
#footer .f-box h2,
.alert-success.orange .a-right p b,
.alert-success.orange .a-right p a,
a.activeDetail span,
table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp,
.alert-success.orange .a-left .glyphicon-ok,
.sticky-alert .sticky-alert-body .popupTimer,
.flip-clock-divider .flip-clock-label,
.flip-clock-wrapper ul li a div div.inn,
.page-tabs.ui-tabs .ui-state-default.ui-state-active a,
.page-tabs.ui-tabs .ui-state-default a:hover,
.searchSorting .select-style.active select,
.text-orange,
html .search-top-banner .cc-phone-num,
html .search-top-banner.search-msg .cc-phone-text-o,
html .search-top-banner.search-msg .cc-phone-icon,
.dategroup #clrReturnDate,
.noResult,
.page-flight .d3price span,
.res-detail .res-header-wrapper .res-header-item:last-child,
html .payment-transactions .t-history .account-balance span,
html table.tablesorter .sr-price .price-text,
html .tablesorter.multiProv .sr-airline,
html .matrix-tabs .ui-tabs-nav .ui-state-active a, 
html .matrix-tabs .ui-tabs-nav a:hover,
html .cnt-btn table td.mp-price,
html .sr-time-dep,
html #brandedFares .fare-item .fare-title,
html #brandedFares .fare-item .fare-icons .i-item,
html #brandedFares .fare-item.selected .fare-price,
html #brandedFares .fare-item .fare-attributes li .fa-check,
html .d3toggle .start-from,
html .success-page .flightSuccessSummary .fs-header,
html .cms-main h2 span, 
html .page-title span, 
html .inner .FormTable td.Toplam,
html .cms-main a, 
html .mobile span,
html .hotelResults .sr-hotel .hotelName .hotel-name-text, 
html .showMap .hotelName a,
html .page-hotel .country-map h2,
html .page-hotel .country-map-filters .dropdown > .btn i,
html .page-hotel .country-map-filters .dropdown .dropdown-menu .dropdown-inner-item .hotel-star-icon,
html .hotelResults .sr-hotel .hotelName .hotel-name-text:hover,
html .showMap .hotelName a:hover,
html .page-hotel .roomPriceTable tr .hd-room-select .is-active,
html .page-hotel .country-map-filters .dropdown .filter-dropdown .filter-keyword-item,
html .hotel-page .hd-pricebtn .hd-totalpricetext .totalPrice,
html .page-house .country-map h2,
html .route-list-item .list-group > .list-group-item:nth-child(2) i,
html .innertext a:hover,
html #content .inner-page-title,
html .support .s-social a:hover,
html .support .s-callcenter span,
html #profileForm .regMail, #content .user-profile a,
.notice,
html #wrap .error-page .text404,
.clear_input_div a,
html .search .miniSearch #addReturnDate,
body .btn2,
html .workplace .menulist li .m-number,
html .metaSearchTabs.ui-tabs .ui-tabs-nav li a,
html .login-page .bottom-link, 
html .register-page .bottom-link,
html .login-form .forgotPasswordSection a,
html .login-form .signupNow a span,
html #spoTable .big,
.pager-list .pager-totalResult,
.pager-list a.pager-prevnext:hover,
#header .topnav a.callcenterNo,
#header .topnav a::after,
ul.nav li a,
#header .user,
html .btn.btn-transparent:hover, 
html .btn.btn-transparent:focus,
html .search-nav a.selected,
#nav > ul > li > a:hover,
html #nav > ul > li > a.selected,
html .subnav li a{
	color: var(--primary-color);
}
body .back:hover,
#wrap .longButton:hover,
html .page-hotel .country-map-filters .dropdown .dropdown-menu .selected-filter-wrapper #hotelPropertiesList .filter-keyword-item,
#marker-product-content .marker-product-item .marker-product-price,
#marker-product-content .marker-product-item .marker-product-nonstop{
	background-color: var(--primary-color);
}
#marker-product-content .marker-product-item .marker-product-price:after,
#marker-product-content .marker-product-item .marker-product-nonstop:after {
	border-top-color: var(--primary-color);
}
#nav .selected .st0,
#nav a:hover .st0,
#nav .selected .st1,
#nav a:hover .st1,
.search-nav .selected .st0, 
.search-nav a:focus .st0,
.page-flight .bar,
html #primary-section .list-group-item svg{
	fill:var(--primary-color);
}
body .btn2,
html .subnav li a,
html .metaSearchTabs.ui-tabs .ui-tabs-nav{
	border-color: var(--primary-color-lighten);
}
html .newui .inner #payment-tabs.metaSearchTabs .ui-state-default{
	border-color: var(--primary-color-lighten-half) !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.button:hover, 
input[type='button']:hover, 
input[type='submit']:hover,
.btn3,
html .next-prev,
html .dep-title, 
html .ret-title{
	background:var(--primary-color-darken);
    border-color: var(--primary-color-darken);
}
#footer .footer-links ul a,
.bottomnav a,
.copy-lang a, 
.foot-text a, 
.foot-text h2,
#footer .copy-lang,
html #header .user .dropdown-toggle-user,
html .btn-link,
html .orders .tablesorter td.order-price,
html .inner .sub-title,
html .inner h2,
html .res-detail .header-title,
html .page-hotel.page-detail .hotel-page h3, 
html .hotel-page .hotel-price .rooms .room-board h4,
html .price-detail-cover strong,
html .room-detail-wrap h3,
html .order-top li b,
html .tableCoupon a.couponRow, 
html .tableCoupon a.couponRow2,
html .f-rules-container a,
html .flightSummary .res-time,
html .success-page .flightSuccessSummary .fs-pnr, 
html .success-page .success-pnr,
html .success-page .flightSuccessSummary .fs-title th,
html .warning2,
html .newui .inner #payment-tabs.metaSearchTabs .ui-state-active.ui-state-default,
html .metaSearchTabs.ui-tabs .ui-state-active a, 
html .metaSearchTabs.ui-tabs .ui-state-active a:link, 
html .metaSearchTabs.ui-tabs .ui-state-active a:visited,
html .search-results .matrixContainer a,
html .subnav li a:hover,
html .subnav li a.selected{
	color: var(--primary-color-darken);
}
#nav > ul > li > a:hover,
html .newui .inner #payment-tabs.metaSearchTabs .ui-state-active.ui-state-default {
    background: var(--primary-color-lighten);
    background: linear-gradient(180deg, var(--primary-color-lighten) 35%, var(--primary-color-lighten-half) 100%);
}
#header,
html .res-detail .h-container{
	border-bottom:2px solid var(--primary-color);
}
html .newui .inner #payment-tabs.metaSearchTabs .ui-state-default,
html .credit-card,
html .warning2,
html #content .hotel-page .hotel-price .rooms .roomName,
html .subnav li a.selected,
html .subnav li a:hover{
	background: var(--primary-color-lighten-full);
}
#footer .footer-nav,
body .btn2:hover{
	background: var(--secondary-color);
}
#footer .f-box,
html .warning2,
html .inner .sub-title{
	border:1px solid var(--primary-color-lighten-full);
}
html #footer .footer-nav .col-xs-4{
	border-right:1px solid var(--secondary-color-darken);
}
#footer .footer-nav .col-xs-4:first-child{
	border-left:1px solid var(--secondary-color-darken);
}
html .slogan > span{
	color: var(--primary-color) !important;
}

/** SECONDARY **/
html .search .search-links h1,
html h1.search-title,
html .search-title,
html .search .search-form .slogan,
.bottomnav a:hover,
html .cms-main h2,
html #price-offer li > label,
html .inner .support h3.title,
html .inner label,
html .support .s-social a,
.page-flight .page-title-span,
.page-flight .d3price li,
.page-flight .d3price .d3-title h3,
.page-flight .d3legend span,
html #wrap .workplace .menulist li p.m-bottom, 
html #wrap .workplace .menulist li .m-title,
html .workplace .menulist li strong,
html .page-title,
html .page-hotel #countryHotelMap .sub-row .sub-row-showAllHotel label,
#footer .footer-links ul a:hover{
	color:var(--secondary-color);
}

/** RESET **/
.logo,
.res-detail .res-header-wrapper .res-header-item .logo{
	height:48px;
	max-height:48px;
	padding:0;
}
.logo img,
.res-detail .res-header-wrapper .res-header-item .logo img{
	max-width:100%;
	height:auto;
}
#header .logo a{
	max-width:100%;
}
#header,
html .res-detail .h-container,
html #nav > ul > li > a.selected,
#footer .foot{
	background:#fff;
}
html .search-nav {
    justify-content: space-evenly;
}
html .login-form-wrap {
    min-height: 500px;
}
html #header-login{
	background-color: #fdfffe;
}
.page-flight .search .search-links h1 {
    margin-top: 35px;
}


#footer {
    
    background-color: var(--footer-bg);
}
#footer .footer-nav a:hover{
	color:#fff;
	text-decoration:underline;
}
#footer .footer-nav{
	height:auto;
	padding:0;
}
#footer .footer-nav .clearfix{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#footer .footer-nav .clearfix:before{
	content: inherit;
}
html #footer .footer-nav .col-xs-4 {
    width: auto;
    flex: 1;
}
ul.nav li a:hover, 
ul.nav li a:focus,
#footer .footer-nav a{
	color:#fff;
}
input[type="text"], 
input[type="password"],
input[type="tel"], 
input[type="number"], 
input[type="email"],
select, 
.inputstyle,
.input-date,
html .search .miniSearch #clrReturnDate,
html .search .search-form .return-date-text,
html .search .ui-buttonset .ui-state-default.ui-state-active,
html .search .ui-buttonset .ui-state-default,
html .page-hotel .country-map-filters .dropdown{
	background: #fff;
	border-color:#ddd;
	color:#444;
}
html .search .miniSearch #addReturnDate{
	background:#ddd;
}
html .search .ui-buttonset .ui-state-default{
	background: #fafafa;
	color:#aaa;
}
html .search .search-form .date .dategroup input[type=text],
html .travelers .travelerSelect,
html .search .classSelect,
html .selectPerson,
html .select-style select,
html .price-alert .pa-campaign label,
html .price-alert .travelers .pa-travelerSelectlink, 
html .price-alert .pa-classSelectlink,
#content .search-form .ui-buttonset .ui-state-active.ui-state-default,
html .page-hotel .country-map-filters .dropdown .dropdown-toggle, 
html .page-hotel .country-map-filters .select-style{
	color:#444;
}
html .search .location div.switch a::before,
html .search .location div.switch a::after,
html .search .search-form .date .dategroup input[type=text],
html .travelers .travelerSelect,
html .search .classSelect,
html .selectPerson,
html .ui-datepicker .ui-widget-header .ui-icon,
html .select-style select{
 	background-image: url(/images/newui/caret-down_ikticket.svg);
}
.price-alert .pa-title .pa-img{
    width:97px;
    height:76px;
	background:url(/images/newui/hotel-bell_ikticket.png) no-repeat;
}
#footer .footer-nav,
#footer .footer-nav .col-xs-4,
#footer .footer-boxes,
html .credit-card{
	border:0;
}
#footer .footer-nav .col-xs-4{
	padding:6px 0;
}
#footer .f-box{
	background:none;
}

/** phone.css **/
@media only screen and (max-width: 767px) {
	html #header {
		background-size: inherit;
		background-position: top center;
	}
	html #header img.logo {
		padding: 0;
		max-height: 40px;
	}
	#header #nav li a{
		background:none;
	}
	html .btn.btn-transparent,
	html body #header #nav li.login a:last-child,
	html #header #nav li a.selected, 
	html #header #nav li a:focus{
		color: var(--primary-color);
	}
	body .hotels table td.order-no span,
	html .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close{
		background: var(--primary-color);
	}
	html .search-nav a.selected,
	html .btn.btn-transparent,
	html .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close{
		border-color: var(--primary-color);
	}
	body .hotels table td.order-no {
		border-color:var(--primary-color) !important;
	}
	html #footer .footer-links ul{
		background: var(--primary-color-lighten-half);
	}
}	

/** tablet.css **/
@media only screen and (min-width: 768px) {
	#nav > ul .m-settings,
	#header .topnav a{
		color:var(--primary-color-darken);
	}
	#header .topnav a:hover{
		color:var(--secondary-color);
	}
	#nav > ul .m-settings div{
		background-image: url(/images/newui/caret-down_ikticket.svg);
	}
	html #header img.logo{
		width: auto;
		max-height: 72px;
		margin-top: -30px;
		padding-left: 15px;
	}
}