/* Externí styl pro rezervační formulář na https://www.bookiopro.com/ */

/* Widget background color */ 

body,
.np-body-bg{
	background-color: #61514a; 
}

.ui-datepicker, .np-widget, .np-input {
	font-size: 14px;
}

/*
  Definition of: 
  
  1.  header background color 
  2.  Date input background color
  3.  Select box background color 
  4.  Datepicker background color
*/
.np-filed, 				/* 2. */
.np-select:active, 
.selectWrapper, 		/* 3. */
.selectOptions, 		/* 3. */
.ui-datepicker,  		/* 4. */
.np-select.active
.np-input{
	background-color: #e8e1d9;
}

#header {
	background-color: transparent;
	margin-bottom: 2rem;
}

#header h1 {
	float: none;
	text-align: center;
	font-size: 36px;
	padding: 0;
	color: #e3cf9d;
}


/*
 	Base text style
 	
 	Text color of
 	1. Base paragrapth text
 	2. Link text color
 	3. Alternative times text color (second step
 	4. VOP text color
 	5. Select box options text color
*/
.np-body p, 								/* 1. */
.np-body a,
.np-link,								/* 2. */
.np-options a,							/* 5. */
p a.np-link,								/* 2. */
.np-checkbox-wrapp a,					/* 4. */
.np-options li:not(:first-child):before{
	color: #e3cf9d;
}


/*
	Link hover style definition
*/
a.np-link:hover,
.np-options a:hover,
.np-checkbox-wrapp a:hover{
	color: #e3cf9d; 
	text-decoration: none;
}


/*
	Datepicker & Header text style
	
	Text color of:
	1. Header text color
	2. Select option text color
	3. Datepicker's dayOfweek lables text color
	4. Datepicker's next/prew arrows color
	5. Datepicker's active days text color
*/
.np-select,											/* 2. */
.selectOptions li,									/* 2. */
.np-filed,
.ui-datepicker th,									/* 3. */
.ui-datepicker-prev span,.ui-datepicker-next span, 	/* 4. */
.ui-datepicker tbody td a{ 							/* 5. */
	color: #2e2623;
	font-size: 14px;
}

.ui-datepicker-prev span, .ui-datepicker-next span {
	top: 50%;
	font-size: 35px;
}

/**
* 	Color of top selectbox arrow (first step)
*/
.np-select:after {
  border-color: #61514a transparent transparent transparent; 
}

/**
* 	Color of bottom selectbox arrow (first step)
*/
.np-select:before{
  border-color:transparent transparent #61514a transparent ;
}


/* Select box options separator */
.selectOptions li{
	border-bottom:1px solid #61514a;
}
.selectOptions li:hover {
	color: #61514a;
	background: #fff;
}


/**
* 	Datepicker style
*/
.ui-datepicker-header,
.ui-datepicker-title{ 
	color: #61514a; 
}

/*
	Datepicker's disabled days
*/
.ui-datepicker-unselectable span{
	color: #ccc !important; 
}
.ui-datepicker-calendar .ui-state-active {
	color: #e3cf9d;
}
.ui-datepicker tbody td a{
	border-bottom: 2px solid #e3cf9d !important; 
}

.ui-datepicker-today a{
	background-color: transparent;
}
.ui-datepicker-today .ui-state-active{
	color: #fff;
}



/**
* Widget button style
*/
.np-button{
	background: transparent;
	border-image: linear-gradient(-30deg, #a87f31 0, #b89547 10%, #ceb66c 23%, #e5d78e 35%, #f1e9a0 40%, #f7f3aa 42%, #f4eaa1 46%, #ead88d 58%, #d4ab5b 91%, #d3a756 95%, #d5ad5e 100%);
	color: #fff; 
	border-width: 4px;
	border-radius: 0;
	border-image-slice: 1;
}
.np-button:hover{
	background: #a87f31;
 	background: linear-gradient(-30deg, #a87f31 0, #b89547 10%, #ceb66c 23%, #e5d78e 35%, #f1e9a0 40%, #f7f3aa 42%, #f4eaa1 46%, #ead88d 58%, #d4ab5b 91%, #d3a756 95%, #d5ad5e 100%) !important;; 
	color: #2e2623;
}

/*
	Style definition of sub-header box (second/third/fourth step)
*/
.np-label-box{
	color: #2e2623;
	background-color: #e3cf9d; 
}

/*
	Small triangle situated bottom of sub-header
	Same color like: .np-label-box{ background-color: }.
*/
.np-label-box .np-triangle{
    border-color: #e3cf9d transparent transparent transparent;
    _border-color: #e3cf9d #000000 #000000 #000000;

}

/*
* Style definition of alternatives times. (Second step of booking)  
*/
.np-alternatives li{
    border-color: #453a3a; 
    color: #453a3a;
}
.np-alternatives li:hover{
    background-color: #453a3a; 
    color: #fff;
}

/*
	Inactive input fields in third step.
*/
.np-disabled,
.np-disabled .np-input,
.np-alternatives .np-disabled, 
.np-alternatives .np-disabled:hover{
	border-color: #c7c9c6 !important;
	color: #c7c9c6 !important;
}


/*
	Border color of input fields in third step of booking
*/
.np-input-wrapp{
  border: 0;
  margin: 6px 0;
}


/*
	Background color of circle situated in Google Map
*/
.np-gmap-ico{
	background-color: #e3cf9d;
}

.np-text-before{
	border-top: #edf0ea; 
}

/* Custom */
.np-fields > li label {
	color: #e3cf9d;
}

.np-body form .np-input {
	background-color: #e8e1d9;
	width: 96%;
	width: -webkit-fill-available;
	font-size: 14px;
}

.np-body form .np-input:not(#int-tel-input) {
	padding: 12px 16px;
}

.np-body form .np-input::placeholder {
	color: #2e2623;
}

.restaurant-name {
	display: none;
}

.captcha {
	text-align: right;
}