/* BNB WIDGET - CLIENT BRANDING -------------------- */
/* This is a special case, because there is no need to
   change the original Kinetic.BnB design here, because
   Kinetic design equals to KxBnB design. */


/* GENERAL ----------------------------------------- */
#KxBnBWidget,
#KxBnBWidget { background: #d4374a; }
#KxBnBWidget { border-bottom: 1px solid #d4374a; }
#KxBnBWidget fieldset { border-bottom: 0; }

#KxBnBWidget .promotion-wrapper.promotion-inverse { background: #d4374a; }
#KxBnBWidget .tab-wrapper  { background: #d4374a; }
#KxBnBWidget .search-wrapper>div input[type="button"], #KxBnBWidget .search-wrapper>div button { background-color: #d4374a; color: white; }

#KxBnBWidget .ui-widget-content table.ui-datepicker-calendar td span.ui-state-active, #KxBnBWidget .ui-widget-content table.ui-datepicker-calendar td span.ui-state-hover, #KxBnBWidget .ui-widget-content table.ui-datepicker-calendar td a.ui-state-active, #KxBnBWidget .ui-widget-content table.ui-datepicker-calendar td a.ui-state-hover, #KxBnBWidget .ui-widget-content .ui-datepicker-group table td span.ui-state-active, #KxBnBWidget .ui-widget-content .ui-datepicker-group table td span.ui-state-hover, #KxBnBWidget .ui-widget-content .ui-datepicker-group table td a.ui-state-active, #KxBnBWidget .ui-widget-content .ui-datepicker-group table td a.ui-state-hover {
	background: #d4374a;
	border-color: #d4374a;
}

#KxBnBWidget .ui-widget-content table.ui-datepicker-calendar td span, #KxBnBWidget .ui-widget-content table.ui-datepicker-calendar td a, #KxBnBWidget .ui-widget-content .ui-datepicker-group table td span, #KxBnBWidget .ui-widget-content .ui-datepicker-group table td a {
	background: #ffccd2;
	border-color: #ffccd2;
}

#KxBnBWidget > .KxBnBHorizontalWidget fieldset .tab.active i {
	color: #d4374a;
}

#KxBnBWidget .tab .hide-content { border: 1px solid #d4374a; }

#KxBnBWidget > .KxBnBHorizontalWidget fieldset .tab.active .hide-content {
    box-shadow: 2px 3px 3px #d4374a;
}

#KxBnBWidget #SearchButtonDiv { border: white 1px solid !important; }

#KxBnBWidget .ui-state-default, #KxBnBWidget .ui-widget-content .ui-state-default, #KxBnBWidget .ui-widget-header .ui-state-default { 
	color: black;
}

#KxBnBWidget .KxBnBWidget ul li:hover { background: #d4374a;  color: white; }

@media print {
    #KxBnBWidget { display: none !important; }
}

.componentSearchResults .AdvertTotal p {
	background: #ffccd2 !important;
	color: #d4374a !important;
}

#KxBnBWidget .search-wrapper>div input[type="button"].active {
	background: linear-gradient(90deg, #00a654 0, #499f7f 100%);
	color: white;
} 

#KxBnBWidget .search-wrapper>div input[type="button"].active:hover {
	background: #d4374a;
}

#KxBnB.inverse, #KxBnB .inverse, #KxBnBLoginWrapper.inverse, #KxBnBLoginWrapper .inverse {
	background: #d4374a !important;
}

#KxBnB.inverse div, #KxBnB .inverse div, #KxBnBLoginWrapper.inverse div, #KxBnBLoginWrapper .inverse div {
	background: #d4374a !important;
}

#KxBnB.inverse div a, #KxBnB .inverse div a, #KxBnBLoginWrapper.inverse div a, #KxBnBLoginWrapper .inverse div a{
	background: #d4374a !important;
}

#KxBnB .KxBnBContent button.btn-primary{
	background: #d4374a !important;
}

#KxBnB .KxBnBContent .inverse .btn-primary:hover, #KxBnB .KxBnBContent .inverse .btn-primary:focus, #KxBnB .KxBnBContent .inverse .btn-primary:active{
	color:white !important;
}

#KxBnB .componentSearchResults .addToCart{
	background: linear-gradient(90deg, #00a654 0, #499f7f 100%);
}

#KxBnB .componentSearchResults .removeFromCart{
	background-color: #d4374a !important;
	border-color: #d4374a !important;
}

#KxBnB .KxBnBContent .inverse .btn-primary {
	background-color: #d4374a !important;
}

#KxBnB .KxBnBContent .inverse .btn-primary {
	background-color: #d4374a !important;
}

#KxBnB .componentCartWrapper .componentCart>div {
	background-color: #d4374a !important;
}

#ProceedButton {
	background-color: #d4374a !important;
}

#KxBnB .componentMobileCartWrapper .componentMobileCart {
	background-color: #d4374a !important;
}

#KxBnB .componentSearchResults .addToCart:hover{
	background: linear-gradient(180deg, #00a654 0, #499f7f 100%);
	color: white;
}


#KxBnB .componentSearchResults .removeFromCart:hover{
	background-color: #d4374a !important;
	color: white;
}

#KxBnB .componentSearchResults .addToCart, #KxBnB .componentSearchResults .removeFromCart{
	color: white;
}

#KxBnB .componentMobileCartWrapper .componentMobileCart{
	background: #d4374a !important;
}


#KxBnB.AdvertBookingDetails div div {
	background-color: #d4374a !important;
}

@media only screen and (max-width: 767px) {
	#KxBnBWidget>.KxBnBHorizontalWidget fieldset .tab label:before {
		background: #ffccd2;
	}

	#KxBnBWidget>.KxBnBHorizontalWidget fieldset>.promotion-wrapper label:before {
		background: #ffccd2;
	}


	#KxBnBWidget>.KxBnBHorizontalWidget fieldset .tab i {
		color: #d4374a;
	}

	#KxBnBWidget>.KxBnBHorizontalWidget fieldset>.promotion-wrapper i {
		color: #d4374a;
	}
}

@media (max-width: 479px){
	.pageHeader .siteName {
		left: 35%;
		top: 64px;		
		font-size: 1.3em;
	}
}

@media (max-width: 767px){
	.pageHeader .siteName {
		top: 70px;
		width: 50%;
	}
}


@media (min-width: 992px){
	.pageHeader .siteName {
		left: 140px;
		top: 70px;
		width: 25%;
		
	}
}



#KxBnB .componentCartWrapper .componentCart>div .proceed{
	background: linear-gradient(90deg, #00a654 0, #499f7f 100%) !important;
}

.dropdown-menu {
	width: 305px;
}
.dropdown-menu li a {
	width: 500px;
}

.ul-nav li{
	display: block;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #151413;
	width: 100%;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    font-size: 15px;
	width: 100%;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #151413;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

#KxBnBWidget .tab-room ul li {
	color: #000;
}