/**
 * Bitte UI
 * Style Library to match frankandvictor.com
 * Requires Font Awesome for icons
 */

/**
 * Base color reference
 *
 * Base: #00b4bf
 * Base Hover: #00cfdb
 * Base Accent: #05aab4
 * Base Accent Hover: #07c8d3
 *
 */


/**
 * Base Class for all UI components. Used as a hook mostly.
 */
 
	.bitte-ui{

	}

	.bitte-field{
		font-family: sans-serif;
		box-sizing: border-box;
	}

	.bitte-field *{
		box-sizing: border-box;
	}

	.bitte-field .bitte-label{
		font-size: 12px;
		line-height: 1.4;
		color: #ffffff;
		border-bottom: 1px solid #ffffff;
		margin-bottom: 15px;
		display: block;
		clear: both;
		position: relative;
	}

	.bitte-field .bitte-label:empty{
		display: none;
	}


	.bitte-field .bitte-ui{
		display: block;
		clear: both;
	}


	.bitte-field .bitte-message{
		background-color: #666666;
		border-radius: 3px;
		clear: both;
		color: #ffffff;
		display: block;
		line-height: 1.4;
		padding: 10px;
		margin-top: 20px;
	}
	
	.bitte-field.invalid .bitte-message{
		background-color: #cc2a2d;
	}

	.bitte-field .bitte-message:empty{
		display: none;
	}

/**
 * Input
 */

	.bitte-ui-input .bitte-ui{
		display: inline-block;
	}

	.bitte-ui-input .bitte-ui input{
		display: inline-block;
		width: 100%;
		background-color: #f3f3f3;
		color: #202020;
		font-size: 16px;
		line-height: 1.4;
		border-color: #ffffff;
		border-width: 1px;
		border-style: solid;
		border-radius: 3px;
		padding: 10px 10px;
	}

	.bitte-ui-input.invalid .bitte-ui input{
		border-color: #cc2a2d !important;
		color: #cc2a2d !important;
	}

	.bitte-ui-input .bitte-ui input[disabled]{
		background-color: #333333;
		border-color: #888888;
		color: #888888;
	}
	
	/* Bonus Class Full */
	.bitte-ui-input.full .bitte-ui{
		width: 100%;
	}


/**
 * Number
 */

	.bitte-ui-number .bitte-ui{
		display: inline-block;
	}

	.bitte-ui-number .bitte-ui input{
		display: inline-block;
		width: 100%;
		background-color: #f3f3f3;
		color: #202020;
		font-size: 16px;
		line-height: 1.4;
		border-color: #ffffff;
		border-width: 1px;
		border-style: solid;
		border-radius: 3px;
		padding: 10px 10px;
		text-align: right;
	}

	.bitte-ui-number.invalid .bitte-ui input{
		border-color: #cc2a2d !important;
		color: #cc2a2d !important;
	}

	.bitte-ui-number .bitte-ui input[disabled]{
		background-color: #333333;
		border-color: #888888;
		color: #888888;
	}

/**
 * Dropdown
 */
 
	.bitte-ui-dropdown .bitte-ui{
		display: inline-block;
		position: relative;
		width: 100%;
	}

	.bitte-ui-dropdown .bitte-ui .display-selection{
		-webkit-transition: color 125ms ease-out, background-color 125ms ease-out, border-color 125ms ease-out, opacity 250ms ease-out;
		transition: color 125ms ease-out, background-color 125ms ease-out, border-color 125ms ease-out, opacity 250ms ease-out;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		line-height: 36px;
		height: 36px;
		padding: 0 18px;
		text-transform: capitalize;
		text-decoration: none;
		text-align: left;
		border-radius: 3px;
		white-space: nowrap;
		border: 1px solid #979797;
		font-family: 'GoudyOldSty',serif;
		color: #000000;
		background: #f0f0f0;
		background: -webkit-linear-gradient(top, #f0f0f0 0%,#d5d5d5 100%);
		background: linear-gradient(to bottom, #f0f0f0 0%,#d5d5d5 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#d5d5d5',GradientType=0 );
		width: 100%;
		min-width: 200px;
		max-width: 300px;
	}

	html:not(.touch) .bitte-ui-dropdown .bitte-ui .display-selection:hover{
		color: #000000;
	}

	.bitte-ui-dropdown.invalid .bitte-ui .display-selection{
		background-color: #cc2a2d !important;
	}

	html:not(.touch) .bitte-ui-dropdown.invalid .bitte-ui .display-selection:hover{
		background-color: #d9494c !important;
	}

	.bitte-ui-dropdown .bitte-ui .display-selection:before{
		content: "";
		height: 36px;
		position: absolute;
		right: 0;
		width: 51px;
		
		background-image: url('/assets/ui/updown-indicators.png');
		background-repeat: no-repeat;
		background-position: center;
		
	}
	
	.bitte-ui-dropdown .bitte-ui .display-selection:hover:before{

	}
	
	.bitte-ui-dropdown.invalid .bitte-ui .display-selection:before{
		background-color: #d3282b;
	}

	.bitte-ui-dropdown .bitte-ui .display-selection:after{
		content:"";
		display: inline-block;
		font-family: sans-serif;
		margin-left: 36px;
		position: relative;
	}
	
	.bitte-ui-dropdown .bitte-ui.show .display-selection{
		border-radius: 3px 3px 0 0;
	}

	.bitte-ui-dropdown .bitte-ui .menu{
		display: none;
		position: absolute;
		min-width: 100px;
	}

	.bitte-ui-dropdown .bitte-ui.show .menu{
		display: block;
	}

	.bitte-ui-dropdown .bitte-ui .menu .group{
		display: block;
		position: absolute;
		width: 100%;
		background-color: #d5d5d5;
		color: #202020;
		border-bottom: 1px solid #dddddd;
		z-index: 10;
		padding: 10px 0px;
		font-size: 16px;
		line-height: 1.4;
		border-radius: 0 0 3px 3px;
		border: 1px solid #979797;
		border-top-width: 0px;
		font-family: 'GoudyOldSty',serif;

		/*top: 0; Only used if menu overtakes button*/
	}

	/* Generic Menu Items */
	.bitte-ui-dropdown .bitte-ui .menu .group.hide{
		display: none;
	}

	.bitte-ui-dropdown .bitte-ui .menu .group > div{
		padding: 5px 10px;
	}

	.bitte-ui-dropdown .bitte-ui .menu .group > div:hover{
		background-color: #f0f0f0;
		color: #000000;
	}

	.bitte-ui-dropdown .bitte-ui .menu .group > div.active{
		color: #000000;
	}

	.bitte-ui-dropdown .bitte-ui .menu .group > .dropdown-label{
		cursor: default;
		font-size: 12px;

	}
	
	.bitte-ui-dropdown .bitte-ui .menu .group > .dropdown-label:hover{
		background-color: #f3f3f3;
		color: #202020;
	}
	
	
	.bitte-ui-dropdown .bitte-ui .menu .group > .dropdown-item{
		cursor: pointer;
	}
	

	/* Info Menu Item */

	.bitte-ui-dropdown .bitte-ui .menu .group .info{


	}

	.bitte-ui-dropdown .bitte-ui .menu .group .info:hover{

	}

	/* Item menu Item */

	.bitte-ui-dropdown .bitte-ui .menu .group .item{

	}

	.bitte-ui-dropdown .bitte-ui .menu .group .item:hover{

	}


/**
 * Search
 */

	.bitte-ui-search .bitte-ui{
		display: block;
		width: 100%;
		border-radius: 3px;
	}

	.bitte-ui-search .bitte-ui .search-box{
		display: block;
		position: relative;
		color: #202020;
	}

	.bitte-ui-search.invalid .bitte-ui .search-box{
		border-color: #cc2a2d !important;
		color: #cc2a2d !important;
	}

	.bitte-ui-search .bitte-ui .search-box input{
		border-radius: 3px 3px 0 0;
		color: currentColor;
		background-color: #f3f3f3;
		display: inline-block;
		padding: 10px 30px 7px 10px;
		width: 100%;
		font-size: 16px;
		line-height: 23px;
		border-style: solid;
		border-width: 1px;
		border-color: #ffffff;
	}

	.bitte-ui-search .bitte-ui .search-box .search-icon:after{
		content:"\f002";
		display: inline-block;
		font-family: FontAwesome;
		position: absolute;
		color: currentColor;	
		margin-right: 10px;
		right: 5px;
		font-size: 16px;
		top: 50%;
		-webkit-transform: translate(0px, -50%);
		        transform: translate(0px, -50%);
		width: 10px;
		text-align: center;	
		cursor: default;
	}

	.bitte-ui-search .bitte-ui .search-results{
		background-color: #f3f3f3;
		overflow-y: auto;
		max-height: 300px;
		padding-bottom: 3px;
		border-radius: 0 0 3px 3px;
	}

	.bitte-ui-search .bitte-ui .search-results .option{
		display: block;
		width: 100%;
		font-size: 14px;
		line-height: 44px;
		color: #202020;
		padding: 0 10px;
		cursor: pointer;
	}

	.bitte-ui-search .bitte-ui .search-results .option:first-child{
		margin-top: 3px;
	}

	.bitte-ui-search .bitte-ui .search-results .option.active{
		opacity: .25;
	}

	.bitte-ui-search .bitte-ui .search-results .option:hover{
		background-color: #d9d9d9;
	}

	.bitte-ui-search .bitte-ui .search-results .option.highlighted{
		background-color: #d9d9d9;
	}

	.bitte-ui-search .bitte-ui .selected{
		background-color: #05aab4;
		color: #ffffff;
		border-radius: 3px;
		overflow-y: auto;
		max-height: 300px;
		margin-top: 6px;
	}

	.bitte-ui-search .bitte-ui .selected .group{
		width: 100%;
		display: block;
	}

	.bitte-ui-search .bitte-ui .selected .group .option{
		display: block;
		width: 100%;
		font-size: 14px;
		line-height: 44px;
		padding: 0 10px;
		cursor: pointer;
	}

	.bitte-ui-search .bitte-ui .selected .group .option.active{
	
	}


/**
 * Button
 */
 
	.bitte-ui-button .bitte-ui{
		display: inline-block;
		position: relative;
	}

	.bitte-ui-button .bitte-ui .button{
		display: inline-block;
		width: 100%;
		height: 44px;
		color: #ffffff;
		background-color: #05aab4;
		font-size: 14px;
		line-height: 44px;
		border-color: #ffffff;
		border-width: 0px;
		border-style: solid;
		border-radius: 3px;
		padding: 10px 10px;
		-webkit-transition: color 125ms ease-out, background-color 125ms ease-out, border-color 125ms ease-out, opacity 250ms ease-out;
		transition: color 125ms ease-out, background-color 125ms ease-out, border-color 125ms ease-out, opacity 250ms ease-out;
		cursor: pointer;
		text-decoration: none;
		text-align: center;
		white-space: nowrap;
		text-transform: uppercase;
		padding: 0 18px;
	}

	html:not(.touch) .bitte-ui-button .bitte-ui .button:hover{
		background-color: #00cfdb;
		color: #ffffff;
	}

	.bitte-ui-button.invalid .bitte-ui .button{
		background-color: #cc2a2d;
	}
	
	html:not(.touch) .bitte-ui-button.invalid .bitte-ui .button:hover{
		background-color: #d9494c !important;
	}
	
	/* Bonus Class: go-right */
	.bitte-ui-button.go-right .bitte-ui .button:before{
		background-color: #00b4bf;
		border-radius: 0 3px 3px 0;
		content: "";
		height: 44px;
		position: absolute;
		right: 0;
		width: 51px;
		-webkit-transition: color 125ms ease-out, background-color 125ms ease-out, border-color 125ms ease-out, opacity 250ms ease-out;
		transition: color 125ms ease-out, background-color 125ms ease-out, border-color 125ms ease-out, opacity 250ms ease-out;
	}
	
	.bitte-ui-button.go-right .bitte-ui .button:hover:before{
		background-color: #07c8d3;		
	}

	.bitte-ui-button.go-right.invalid .bitte-ui .button:before{
		background-color: #d3282b;
	}

	.bitte-ui-button.go-right.invalid .bitte-ui .button:hover:before{
		background-color: #d3282b;
	}

	.bitte-ui-button.go-right .bitte-ui .button:after{
		content: "\f061";
		display: inline-block;
		font-family: FontAwesome;
		margin-left: 36px;
		position: relative;
	}
	

/**
 * Multi Select
 */
 
	.bitte-ui-multiselect .bitte-ui{
		display: inline-block;
		width: 100%;
	}

	.bitte-ui-multiselect .bitte-ui .menu{
		border-radius: 3px;
		overflow: hidden;
	}

	.bitte-ui-multiselect .bitte-ui .placeholder{
		background-color: #05aab4;
		color: #ffffff;
		font-size: 14px;
		padding: 5px 10px;
		border-radius: 3px 3px 0 0;
	}

	.bitte-ui-multiselect.invalid .bitte-ui .placeholder{
		background-color: #cc2a2d !important;
		color: #ffffff !important;
	}

	.bitte-ui-multiselect .bitte-ui .menu .group{
		width: 100%;
		display: block;
		background-color: #f3f3f3;
		overflow-y: auto;
		max-height: 300px;
	}

	/* Generic Option */
	.bitte-ui-multiselect .bitte-ui .menu .group > div{
		display: block;
		width: 100%;
		font-size: 16px;
		line-height: 1.4;
		color: #202020;
		padding: 5px 10px;
		cursor: pointer;
	}

	.bitte-ui-multiselect .bitte-ui .menu .group > div:hover{
		background-color: #05aab4;
		color: #ffffff;
	}

	.bitte-ui-multiselect .bitte-ui .menu .group > div.active{
		background-color: #05aab4;
		color: #ffffff;
	}
	
	.bitte-ui-multiselect .bitte-ui .menu .group > div.multiselect-label{
		font-size: 12px;
		cursor: default;
	}
	
	.bitte-ui-multiselect .bitte-ui .menu .group > div.multiselect-label:hover{
		background-color: #f3f3f3;
		color: #202020;
	}
	
	.bitte-ui-multiselect .bitte-ui .menu .group > div.multiselect-item{
		
	}	



/**
 * Date Picker
 */
 
	.bitte-ui-date .bitte-ui{
		display: inline-block;
		position: relative;
		color: #202020;
	}

	.bitte-ui-date.invalid .bitte-ui{
		border-color: #cc2a2d !important;
		color: #cc2a2d !important;
	}

	.bitte-ui-date .bitte-ui input{	
		display: inline-block;
		width: 100%;
		background-color: #f3f3f3;
		color: currentColor;
		font-size: 16px;
		line-height: 1.4;
		border-color: #ffffff;
		border-width: 1px;
		border-style: solid;
		border-radius: 3px;
		padding: 10px 10px;		
	}
	
	.bitte-ui-date.invalid .bitte-ui input{
		border-color: currentColor;
	}

	.bitte-ui-date .bitte-ui .cal-icon:after{
		content:"\f073";
		display: inline-block;
		font-family: FontAwesome;
		position: absolute;
		color: currentColor;	
		margin-right: 10px;
		right: 5px;
		top: 50%;
		-webkit-transform: translate(0px, -50%);
		        transform: translate(0px, -50%);
		width: 10px;
		text-align: center;	
		cursor: default;
	}

	/* Jquery Date Picker */
		
	.ui-datepicker{
		background-color: #FFFFFF;
		border: 1px solid #F0F0F0;
		padding: 20px;
		color: #666666;
		width: 300px;
		box-sizing: border-box;
		font-family: sans-serif;
		display: none; /* Hides by default */
	}
	
	.ui-datepicker * {
		box-sizing: border-box;
	}

	.ui-datepicker .ui-datepicker-header{
	
	}

	.ui-datepicker .ui-datepicker-header .ui-datepicker-prev{
		font-size: 10px;
		font-weight: 600;
		clear: left;
		display: inline-block;
		float: left;
		cursor: pointer;
	}

	.ui-datepicker .ui-datepicker-header .ui-datepicker-next{
		font-size: 10px;
		font-weight: 600;
		clear: right;
		display: inline-block;
		float: right;
		cursor: pointer;
	}

	.ui-datepicker .ui-datepicker-header .ui-datepicker-title{
		font-size: 14px;
		font-weight: 400;
		clear: both;
		display: inline-block;
		float: left;
		border-top: 1px solid #F0F0F0;
		padding-top: 3px;
		margin-top: 8px;
		padding-top: 10px;
		width: 100%;
		margin-bottom: 10px;
	
	}

	.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month{
	
	}

	.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year{
	
	}

	.ui-datepicker .ui-datepicker-calendar{
		width: 100%;
	}

	.ui-datepicker .ui-datepicker-calendar thead{
		text-align: left;
	}

	.ui-datepicker .ui-datepicker-calendar thead th {
		font-weight: 600;
	}

	.ui-datepicker .ui-datepicker-calendar tbody{
		text-align: left;	
	}

	.ui-datepicker .ui-datepicker-today .ui-state-default{
		color: #ffffff;
	}

	.ui-datepicker .ui-datepicker-today .ui-state-default:before {
		border: 1px solid #05aab4;
		border-radius: 3px;
		content: "";
		height: 22px;
		margin-left: -4px;
		margin-top: -1px;
		position: absolute;
		width: 22px;
		background-color: #05aab4;
		z-index: -1;
	}

	.ui-datepicker .ui-datepicker-current-day .ui-state-default{
		
	}

	.ui-datepicker .ui-datepicker-current-day .ui-state-default:before {
		border: 1px solid #202020;
		border-radius: 3px;
		content: "";
		height: 22px;
		margin-left: -4px;
		margin-top: -1px;
		position: absolute;
		width: 22px;
	}

	.ui-datepicker table {
	  border-collapse: collapse;
	  border-spacing: 0;
	}

	.ui-datepicker td,
	.ui-datepicker th {
	  padding: 0;
	}

	.ui-datepicker td a{
		text-decoration: none;
		color: #202020;
		font-size: 14px;
		line-height: 1.8;
	}


/**
 * Textarea
 */

	.bitte-ui-textarea .bitte-ui{
		display: inline-block;
		position: relative;
		width: 100%;
	}

	.bitte-ui-textarea .bitte-ui textarea{
		display: inline-block;
		width: 100%;
		background-color: #ffffff;
		color: #202020;
		border-radius: 3px;
		padding: 10px 10px;
		font-size: 16px;
		line-height: 1.4;
		border-style: solid;
		border-color: #ffffff;
		border-width: 1px;
		font-family: inherit;
		margin: 0;
	
	}

	.bitte-ui-textarea.invalid .bitte-ui textarea{
		border-color: #cc2a2d !important;
		color: #cc2a2d !important;
	}

/**
 * Radio
 */

	.bitte-ui-radio .bitte-ui{
		display: inline-block;
		position: relative;
	}

	.bitte-ui-radio .bitte-ui .group{
		display: inline-block;
		width: 100%;
		text-align: left;
	}

	.bitte-ui-radio .bitte-ui .group .radio-button{
		color: #ffffff;
		cursor: pointer;
		display: block;
		font-size: 14px;
		height: 34px;
		line-height: 34px;
		padding: 0 8px 0 8px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		margin: 0 10px 5px 0px;
		min-width: 50px;
		text-align: left;
	}

	.bitte-ui-radio .bitte-ui .group .radio-button:before{
		content: "";
		width: 13px;
		height: 13px;
		border-radius: 7px;
		border-color: #ffffff;
		border-width: 1px;
		border-style: solid;
		position: relative;
		background-color: transparent;
		display: inline-block;
		margin: 0 10px 0 0;
		vertical-align: middle;
	}

	.bitte-ui-radio .bitte-ui .group .radio-button:hover:before{
		background-color: #05aab4;
		border-color: #05aab4;
	}

	.bitte-ui-radio .bitte-ui .group .radio-button.active:before{
		background-color: #05aab4;
		border-color: #05aab4;
	}

	.bitte-ui-radio .bitte-ui .group .radio-button:first-child{
		margin-left: 0;
	}

	.bitte-ui-radio .bitte-ui .group .radio-button:last-child{
		margin-right: 0;
	}


	.bitte-ui-radio .bitte-ui .group .radio-button > span{
		vertical-align: middle;
	}


/**
 * Checkbox
 */

	.bitte-ui-checkbox .bitte-ui{
		display: inline-block;
		position: relative;
	}

	.bitte-ui-checkbox .bitte-ui .group{
		display: inline-block;
		width: 100%;
		text-align: left;
	}

	.bitte-ui-checkbox .bitte-ui .group .checkbox-button{
		color: #ffffff;
		cursor: pointer;
		display: block;
		font-size: 14px;
		height: 34px;
		line-height: 34px;
		padding: 0 8px 0 8px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		margin: 0 10px 5px 0px;
		min-width: 50px;
		text-align: left;
	
	}

	.bitte-ui-checkbox .bitte-ui .group .checkbox-button:before{
		content: "";
		width: 13px;
		height: 13px;
		border-radius: 3px;
		border-color: #ffffff;
		border-width: 1px;
		border-style: solid;
		position: relative;
		background-color: transparent;
		display: inline-block;
		margin: 0 10px 0 0;
		vertical-align: middle;
	}

	.bitte-ui-checkbox .bitte-ui .group .checkbox-button:hover:before{
		background-color: #05aab4;
		border-color: #05aab4;
	}

	.bitte-ui-checkbox .bitte-ui .group .checkbox-button.active:before{
		background-color: #05aab4;
		border-color: #05aab4;
	}

	.bitte-ui-checkbox .bitte-ui .group .checkbox-button:first-child{
		margin-left: 0;
	}

	.bitte-ui-checkbox .bitte-ui .group .checkbox-button:last-child{
		margin-right: 0;
	}


	.bitte-ui-checkbox .bitte-ui .group .checkbox-button > span{
		vertical-align: middle;
	}

/**
 * File
 */
 
	.bitte-ui-file .bitte-ui{
		display: inline-block;
		position: relative;
	}

	.bitte-ui-file .bitte-ui input{
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0.0;
		z-index: -1;
	}

	.bitte-ui-file .bitte-ui .button{
		width: 100%;
		-webkit-transition: color 125ms ease-out, background-color 125ms ease-out, border-color 125ms ease-out, opacity 250ms ease-out;
		transition: color 125ms ease-out, background-color 125ms ease-out, border-color 125ms ease-out, opacity 250ms ease-out;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		line-height: 44px;
		color: #ffffff;
		background-color: #05aab4;
		height: 44px;
		padding: 0 18px;
		text-transform: uppercase;
		text-decoration: none;
		text-align: center;
		border-radius: 3px;
		white-space: nowrap;
	}

	html:not(.touch) .bitte-ui-file .bitte-ui .button:hover{
		background-color: #00cfdb;
		color: #ffffff;
	}
	
	.bitte-ui-file.invalid .bitte-ui .button{
		background-color: #cc2a2d;
	}
	
	html:not(.touch) .bitte-ui-file.invalid .bitte-ui .button:hover{
		background-color: #d9494c !important;
	}

	.bitte-ui-file .bitte-ui .button .clear{
		margin-left: 10px;
	}
	.bitte-ui-file .bitte-ui .button .clear:after{
		color: currentcolor;
		content: "\f00d";
		cursor: default;
		display: inline-block;
		font-family: FontAwesome;
		font-size: 16px;
		margin-right: 10px;
		position: absolute;
		right: 5px;
		text-align: center;
		top: 50%;
		-webkit-transform: translate(0px, -50%);
		        transform: translate(0px, -50%);
		width: 10px;
	}

	.bitte-ui-file .bitte-ui .button .clear.hide {
		display: none;
	}