.input_container{
	margin: 16px;
}

.input_wrapper{
	width: 100%;
	box-sizing: border-box;
	line-height: initial;
	position: relative;
	background: #E5E5E5;
	margin: 5px 0px 28px 0px;
	padding-top: 16px;
	border-radius: 2pt 2pt 0pt 0pt;
	cursor: text;
}


span.input_wrapper,
.input_wrapper.inline{
	max-width: 240px;
	margin: 0px 12px 0px 0px;
	display: inline-block;
}

.input_wrapper_table{
	display: table;
	table-layout: fixed;
	background: #e5e5e5;
	border-radius: 2pt 2pt 0pt 0pt;
	margin: 5px 0px 28px 0px;
	width: 100%;
}	

.input_wrapper_table > .input_wrapper{
	display: table-cell;
	width: auto;
}


.input_options_menu{
	position: absolute;
	top: 100%; right: 0px; left: 0px;
	height: 0px;
	background: white;
	box-shadow: 0pt 4pt 2pt rgba(0,0,10,0.4), 0pt 4pt 12pt rgba(0,0,10,0.3);
	overflow-x: hidden;
	overflow-y: auto;
	transition: all 220ms;
	z-index: 10;
	opacity: 0.2;
	max-height: 340px;
}

.input_option{
	padding-left: 10px;
	line-height: 40px;
	white-space: nowrap;
	width: 100%;
	background: white;
}

.input_option[current="true"]{
	background: #BBDEFB;
	color: black;
}
.input_option:hover, 
.input_option:active{
	background: #1565C0;
	color: white;
}

.input_wrapper[option],
.input_wrapper[option] > input{
	cursor: pointer;
}

.input_wrapper[type="box"]{
	padding: 4px;
	border: 1px solid rgba(127,127,127,0.5);
	margin: 8px 0px;
	box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.2), inset 0px 2px 2px 0px rgba(0,0,0,0.1)
}

.input_wrapper > input, 
.input_wrapper > textarea, 
.input_wrapper > select{
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	position: relative;
	background: none;
	padding: 8px;
	color: black;
	border: none;
	outline: none;
	transition: all 200ms;	
	width: 100%;
	font-size: 13px;
	resize: none;
	border-radius: 0px;
	font-weight: 500;
}

.input_wrapper > select{
	width: 100%;
}	

/*putting a span creates a sub input box useful for radios and ticks*/
.input_wrapper > span{
	display: block;
	line-height: 16px;
	font-size: 14px;
	border: none;
	padding: 6px;
	text-align: left;
}

.input_wrapper > span.label{
	font-size: 11px;
	color: #47d105;	
	
}

.input_wrapper > span.help{
	font-size: 11px;
	color: #AAA;
	
}

.input_wrapper > span > label{
	display: block;
	line-height: 24pt;
	vertical-align: middle;
}

.input_wrapper > span [type="radio"], 
.input_wrapper > span [type="checkbox"]{
	display: inline-block;
	width: auto;
	margin: 4px 8px 4px 4px;
	transform: scale(1.3);
	outline: none;
	height: 20px;
	cursor: pointer;
	vertical-align: middle;
}

	.input_toggle_section{
		position: relative;
		top: -10px;
		height: 0px;
		overflow: hidden;
		padding: 0px;
		margin: 0px;
		transition: all 230ms;
		opacity: 0;
	}

	.input_toggle_section.active{
		height: auto;
		top: 0px;
		overflow: visible;
		margin: 12px 0px;
		opacity: 1;
	}
	.input_toggle_section.active:empty{margin: 0px;}

.input_wrapper > span > .file_upload ~ label{
	display: inline-block;
	line-height: 20px;
	height: 20px;
	margin: 0px 8px;
	vertical-align: middle;
	color: #555;
}

.input_wrapper:not([type="box"]) > label{
	pointer-events: none;
	top: 18px;
	left: 8px;
	display: block;
	position: absolute;
	line-height: 100%;
	font-size: 14px;
	color: #888;
	transition: all 200ms;
	z-index: 1;
}

.input_wrapper[required] > label:after{
	content: attr(label) " *";
}

/*has to be doubled up because focus-within prevents entire rule to be read on ie*/
.input_wrapper.active > label, 
.input_wrapper.forced_active > label, 
.input_wrapper.focus > label, 
.input_wrapper[error] > label, 
.input_wrapper > span ~ label,
.input_wrapper > input[type="date"] ~ label{
	top: 6px ! important;
	font-size: 11px ! important;
}
.input_wrapper:focus-within > label, 
.input_options_menu ~ label{
	top: 6px ! important;
	font-size: 11px ! important;
	color: #47d105 ! important;
}

.input_wrapper[icon]::before, 
.input_wrapper[option]::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: 8px; top: 8px; bottom: 8px;
	width: 33px;
	color: #555;
	line-height: 33px;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.input_wrapper[option]::before{
	font-family: "Font Awesome 5 Free"; 
	content: "\f078";
}

.input_wrapper.load[option]::before{
	font-family: "Font Awesome 5 Free"; 
	content: "\f073";
}

.input_wrapper:after{
	content: " ";
	box-sizing: border-box;
	font-size: 10px;
	position: absolute;
	top: calc(100% - 2.5px); /*54px*/
	left: 0px;
	width: 0px;
	overflow: visible;
	height: 2px;
	white-space: nowrap;
	transition: all 220ms ease;
	padding-left: 8px;
	line-height: 25px;
	background: transparent;
}

.input_wrapper[help]:after{
	color: #666;
	content: attr(help);
}

.input_wrapper[error]:after{
	color: red;
	background: red ! important;
	content: attr(error);
	width: 100%;
}

/*
.input_wrapper.active:after, 
.input_wrapper.focus:after, 
.input_wrapper.forced_active:after{
	width: 100%;
	background: #AAA;
}
*/

.button_wrapper{
	display: block;
	text-align: left;
	line-height: 40px;
	font-size: 12pt;
	padding: 16pt 0px;
}

.button_wrapper > .button{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	background: none;
	border: none;
	outline: none;
	text-decoration: none;
	font-weight: 300;
	line-height: 100%;
	padding: 8pt;
	color: black;
	margin-right: 8pt;
	cursor: pointer;
}

.button_wrapper > .button:last-child{
	color: white;
	background: #8224e3;
	margin-left: 0px;
}

.button_wrapper > .button:before,
.button_wrapper > .button:after{
	display: block;
	content: "";
	position: absolute;
	top: 0px; left: 0px; right: 0px; bottom: 0px;
	opacity: 0;
	transition: opacity 250ms ease 90ms;
}

.button_wrapper > .button:before{box-shadow: 0px 1px 3px black, 1px 3px 13px black;}
.button_wrapper > .button:after{box-shadow: inset 0px 1px 3px black, inset 1px 3px 13px black;}

.button_wrapper > .button:hover:before,
.button_wrapper > .button:active:before,
.button_wrapper > .button:hover:after,
.button_wrapper > .button:active:after{
	transition-delay: 0ms;
	transition-duration: 90ms;	
}
.button_wrapper > .button:hover:before{opacity: 0.4;}
.button_wrapper > .button:active:before{opacity: 0;}
.button_wrapper > .button:hover:after{opacity: 0;}
.button_wrapper > .button:active:after{opacity: 0.3;}

.input_wrapper:focus-within:after{
	width: 100%;
	background: #47d105;
}

/*buttons*/
.input_wrapper > input[type="button"], .input_wrapper > input[type="submit"], .button{
	display: inline-block;
	width: auto;
	outline: none;
	border: none;
	transition: all 220ms ease-out 40ms;
	background: linear-gradient(45deg,#83ba1d , #599722);
	line-height: 40px;
	padding: 0px 12px;
	letter-spacing: 1px;
	/*text-transform: uppercase;*/
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.3),0px 1px 8px rgba(0,0,0,0.12);
	color: #FFFFFF;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	font-size: 12pt;
}

.input_wrapper > input[type="button"]:hover, .input_wrapper > input[type="submit"]:hover, .button:hover{
	box-shadow: 0px 3px 3px rgba(0,0,0,0.3),0px 3px 22px rgba(0,0,0,0.12);
}

.input_wrapper > input[type="button"]:active, .input_wrapper > input[type="submit"]:active, .button:active{
	transition: all 100ms;
	box-shadow: none;
	opacity: 0.8;
}

.input_wrapper_image{
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    text-align: center;
    border-radius: 2pt;
    background-color: rgba(127,127,127,0.2);
    cursor: pointer;
    margin-bottom: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: height 220ms;
    font-size: 0pt;
	max-height: 30vh;
}

.input_wrapper_image[type="image"].active{
	height: 250px;
}

.input_wrapper_image[type="image"].active label{
	color: white;
	text-shadow: 0px 0px 1px black, 0px 3px 3px rgba(0,0,0,0.2), 0px 3px 9px rgba(0,0,0,0.2);
	font-size: 14px;
	opacity: 0;
}

.input_wrapper_image.active:hover label{
	opacity: 1;
}

.input_wrapper_image > label{
	position: absolute;
	top: 0px; left: 0px; right: 0px;
	line-height: 50px;
	color: #888;
	font-size: 20px;
	cursor: pointer;
	transition: all 120ms;
}

.input_wrapper_image > img{
	max-width: 100%;
	max-height: 100%;
	cursor: pointer;
}

.input_wrapper_image > div{
	background: #47d105;
	transition: width 120ms;
	height: 5px;
	width: 0%;
	position: absolute;
	bottom: 0px; left: 0px;
}
/*usually paired with input_wrapper_image*/
.file_upload{
	margin: 0px;
	line-height: 30px;
	padding: 0px 8px;
	font-size: 14px;
	font-weight: normal;
}
.file_upload > input[type="file"]{
	display: none;	
}

@-webkit-keyframes autofill {
	to {
		background: transparent;
	}
}

.input_wrapper > :-webkit-autofill,
.input_wrapper > :-webkit-autofill:hover, 
.input_wrapper > :-webkit-autofill:focus{
	/*no style for autofill please*/
	-webkit-animation-name: autofill;
	-webkit-animation-fill-mode: both;
}

/*toast*/
#toast_box{
	box-sizing: border-box;
	position: fixed;
	top: calc(100vh - 60px); left: 0px; right: 0px;
	z-index: 99;
	transition: all 300ms;
	pointer-events: none;
}

#toast_box > div{
	box-sizing: border-box;
	width: 400px;
	max-width: calc(100vw - 30px);
	padding: 4px 8px;
	margin: 0px auto;
	background: #212121;
	color: white;
	font-size: 12pt;
	overflow: hidden;
	pointer-events: auto;
}

#toast_box span{
	line-height: 40px;
	padding: 0px 6px;
	font-size: 10pt;
	transition: color 220ms;
	white-space: nowrap;
}

#toast_box span:last-child:hover{
	cursor: pointer;
	color: rgba(127,127,127,0.8);
}

#toast_box .button{
	background: none;
	box-shadow: none;
}

#toast_box[type="1"] > div{
	background: #b71c1c;
}

#toast_box[hide="1"]{
	top: calc(100vh + 20px);
}

#bizeco_window_storage{
	position: fixed;
	top: 0px; left: 0px;
	height: 0px;
	overflow: visible;
	z-index: 10;
	font-family: 'Roboto', sans-serif;
}

.bizeco_window_container{
	position: fixed;
	top: 0px; left: 0px; right: 0px;
}

.bizeco_window_container.back, .bizeco_window_container.back_perm{
	bottom: 0px;
	background: rgba(0,0,0,0.3);
	overflow: visible;
	z-index: 11;
}

.bizeco_window{
	box-sizing: border-box;
	position: relative;
	margin: 16pt auto;
	max-width: calc(100vw - 32pt);
	max-height: calc(100vh - 32pt);
	background: white;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.3), 0px 2px 10px rgba(0,0,0,0.3);
	color: black;
}

.bizeco_window_content_container{
	padding: 16pt;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	overflow-x: hidden;
}

.modal_content_container{
	padding: 20px;
}

.modal_toolbox{
	width: 100%;
	box-sizing: border-box;
	background: white;
	padding: 16pt;
	box-shadow: 0px 2px 2px -3px rgba(0,0,0,0.2), 0px 5px 6px -5px rgba(0,0,0,0.3);
	z-index: 1;
	min-height: 120px;
}

.modal_loading{
	position: relative;
	padding: 48px 32px;
	display: block;
	font-size: 24pt;
	text-align: center;
	background: white;
	color: #777;
}

.modal_loading:after{
	content: " ";
	position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;
	background: linear-gradient(270deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1), rgba(255,255,255,0.9));
	background-size: 300% 100%;
	animation: background_slide 3s ease infinite;
}

.bizeco_wizard_container{
	position: fixed;
	top: 0px; left: 0px; right: 0px; bottom: 0px;
	z-index: 9;
	overflow: hidden;
	background-color: white;
	background-image: url('images/wizard_background.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: bottom center;
}

.bizeco_wizard_container.wait > *{
	pointer-events: none;
}

.bizeco_wizard_container:after{
	position: fixed;
	top: 0px; left: 0px; right: 0px; bottom: 0px;
	content: "Loading...";
	line-height: 50vh;
	text-align: center;
	font-size: 40pt;
	background: rgba(0,0,0,0.4);
	color: white;
	pointer-events: none;
	opacity: 0;
	z-index: -1;
}


.bizeco_wizard_container.wait:after{
	opacity: 1;
	z-index: 1;
}

.bizeco_wizard_wrapper{
	position: absolute;
	left: 0vw; top: 0px; bottom: 0px;
	width: auto;
	white-space: nowrap;	
	overflow: visible;
	transition: left 220ms ease;
}

.bizeco_wizard_slide{
	display: inline-block;
	width: 100vw;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.bizeco_modal {
	z-index: 14px;
}

.bizeco_modal_title{
	display: table;
	background: #47d105;
	color: white;
	width: 100%;
}

.bizeco_modal_title > *{
	display: table-cell;
	padding-left: 12px;
	line-height: 40px;
}

.bizeco_modal_title > .bizeco_modal_title_toolbar{
	text-align: right;
}

.bizeco_modal_title > .bizeco_modal_title_toolbar > *{
	display: inline-block;
	min-width: 40px;
	cursor: pointer;
	text-align: center;
	line-height: 40px;
	color: white;
	text-decoration: none;
}

.bizeco_modal_title > .bizeco_modal_title_toolbar > *:hover{
	background: rgba(255,255,255,0.4);	
}

.bizeco_modal_content_container{
	padding: 10px 20px;
}

.gallery_container ul{
	padding: 0px;
	list-item-type: none;
}

.gallery_container ul > li{
	display: inline-block;
	position: relative;
	max-height: 340px;
	height: 120px;
	vertical-align: top;
	margin-right: 10px;
	margin-bottom: 10px;
	transition: opacity 220ms ease;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 2pt;
	overflow: hidden;
	font-size: 0px;
	cursor: pointer;
	opacity: 1;
}


.gallery_container ul > li > img{
	position: relative;
	height: 100%;
}

.gallery_container ul > li > p{
	position: absolute;
	bottom: 0px; left: 0px; right: 0px;
	background: rgba(0,0,0,0.5);
	color: white;
	margin: 0px;
	padding: 5px;
}

.gallery_container ul > li:hover{
	opacity: 0.5;
}

@media screen and (min-width: 900px) {
	.input_row{
		display: table;
		table-layout: fixed;
		width: 100%;
		
	}

	.input_row > .input_wrapper{
		display: table-cell;
		width: auto;
		box-sizing: content-box;
		border-left: 6pt solid white;
		border-right: 6pt solid white;
	}
	.input_row > .input_wrapper:first-child{border-left: none;}
	.input_row > .input_wrapper:last-child{border-right: none;}
}