/*
 *
 *	Georgio's Stylesheet for LWApp
 *	Copyrights Georgio Sterk - www.georgio.me
 *
 */
	
html{  }
html,body { font-size: 1em;height:100%;padding:0;margin:0;font-family: sans-serif; }
body{ background-color:#ecf0f1; }
fieldset{ border:none;padding-left:0; }

a{ color:#3388cc; }
ul a{ color: #333333; }

#container{ max-width:980px;min-width:320px;margin:0 auto -60px;min-height:100%; }
#container.user{ background-color:#f6f6f6;box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1); }

#devmode{ 
	position:fixed;top:50%;right:-75px;padding:14px 0 20px;width:200px;
	font-family:Verdana, Arial, Helvetica, sans-serif;font-size:13px;text-align:center;color:#fff;
	border-bottom-left-radius:3px;
	background-color:#D35400; 
	
	-webkit-transform: rotate(-90deg);/* Safari */
	-moz-transform: rotate(-90deg);/* Firefox */
	-ms-transform: rotate(-90deg);/* IE */
	-o-transform: rotate(-90deg);/* Opera */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/* Internet Explorer */
}

#login{ margin:0 auto;min-width:300px;max-width:400px; }
#login > div{ padding-top:120px; }
#login > div input[type="submit"]{ width:100%;padding:10px;text-align:center;-webkit-appearance: none; }

#login > div select,
#login > div input[type="email"],
#login > div input[type="password"],
#login > div input[type="text"]{ width:320px;border:none;background:transparent; }

#login .input {
    background-position: 7px 4px;
    background-repeat: no-repeat;
    background-size: auto 22px;
    border-bottom: 1px solid #ccc;
    margin: 20px 10px 25px;
    min-height: 40px;
}
#login .input.password{ background-image: url("../img/icons/input-lock.png");margin-bottom: 40px;min-height: 40px; }
#login .input.email{ background-image: url("../img/icons/input-user.png"); }
#login .select {
    background-position: 6px 10px;
    background-repeat: no-repeat;
    background-size: auto 24px;
    border-bottom: 1px solid #ccc;
    margin: 20px 10px;
    padding: 4px;
	min-height:40px;
}
#login .select.type{ background-image: url("../img/icons/input-type.png"); }
#login .select select{ margin-left:34px;margin-top:8px;}

#head{ 
    background-color: #a71d1c;
    border: 1px solid #e92827;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 1px 0 #444444;
	display:flex;
	justify-content:space-between;
}
#head h1{
    display: block;
    font-size: 1em;
    margin: 0 30%;
    min-height: 1.1em;
    outline: 0 none !important;
    overflow: hidden;
    padding: 0.7em 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#head div:nth-of-type(1),
#head div:nth-of-type(3){ 
    margin: 4px 8px;
    width: 22px;
}
#head div:nth-of-type(2){ flex:1; }
.ui-header a{ color:#ffffff;text-shadow:0 1px 0 #444444;text-decoration:none; }

ul { padding:0;margin:0; }
ul > li{ 
	list-style-type:none;
    border-style: solid;
    border-width: 1px 0 0;
	border-color:#dddddd;
}
ul > li:last-child{ border-width:1px 0; } 
ul > li p{ 
    display: block;
    font-size: 0.75em;
    font-weight: normal;
    margin: 0.6em 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
ul > li.divider{ 
	background-color: #e9e9e9;
    border-color: #dddddd;
    color: #333333;
    font-weight: bold;
    text-shadow: 0 1px 0 #eeeeee;
	font-size: 14px;
	padding:0.5em 1.143em;
}
#overview > ul > li.company div.thumb{ display:flex; }
#overview > ul > li.company div.thumb > div:nth-of-type(1){ width:100px;height:100px; }
#overview > ul > li.company div.thumb > div:nth-of-type(2){ flex-grow: 1; }
#overview > ul > li.company div.thumb > div:nth-of-type(2){ padding-top:20px;padding-right:20px; }
#overview > ul > li.company div.thumb > div:nth-of-type(2) > p{ margin:0.6em 0; }
#overview > ul > li.company div.thumb > div:nth-of-type(2) > span{ display:block;text-align:right;font-size:11px;color:#a71d1c; }

#settings ul > li.item{ background-color:#fff; }
#settings ul > li > a{ padding:16px;display:block;text-decoration:none;display:flex;justify-content:space-between; }
#settings ul > li > a > span{ display:block;height:20px; }
#settings ul > li > a > span:first-child > img{ display:block;height:24px; }
#settings ul > li > a > span:nth-child(1){ padding-top:3px; }
#settings ul > li > a > span:last-child > img{ display:block;height:16px; }
#settings .field { padding:20px; }
#settings .field label{ padding-left:10px; }

.button > input, 
.button > button{ 
	border:none;
	background-color: #2ab2cb;
    border-bottom: 3px solid #03788e;
    border-radius: 3px;
	width:100%;
    color: #fff;
    font-weight: normal;
}

/*
 *
 *	Georgio's Stylesheet for LWApp
 *	Copyrights Georgio Sterk - www.georgio.me
 *
 */
	
	/* -- Global Styles -- */
	* {
		-webkit-touch-callout: none; /* Disable selection/copy in UIWebView */
	}
	html{ background-color:#ecf0f1; }
	body { color:#383636;overflow-x:hidden; }
	h2{ margin:0;font-size:18px; } /* color:#333; */
	h3{ margin:0;padding:0;font-size:14px; }
	p{ margin:5px 10px;font-size:13px; }
	select[multiple]{ 
		-webkit-appearance: none;
		width:100%;
		height:40px;
		font-weight:bold;
		font-size:13px;
		text-align:center;
		color:#333333;
		border:1px solid #dddddd; 
		background-color:#f6f6f6;
	}
	input[type="file"]{ background:none !important;border:none !important; }
	
	.noMargin{ margin:0 !important; }
	.marked-red{ color:#901400; }
	.icon-background{ background-repeat: no-repeat;background-position: center; }
	
	
	/* -- The styles -- */
	#overview .item{ padding:0; }
	#overview .item > div{ display:flex; }
	#overview .item > div > div:nth-of-type(1){
		position: relative;
		width: 100%;
		z-index: 20;
		min-height: 95px;
		background-color: #fff;
	}
	#overview .item > div > div:nth-of-type(1) > a{ color:#333;text-decoration:none; }
	#overview .item > div > div:nth-of-type(1) > a > div{ padding:10px; }
	#overview .item > div > div:nth-of-type(2) > div{ display:flex; }
	#overview .item > div > div:nth-of-type(2) > div > div{ width:65px;background-repeat:no-repeat;background-position:center;height:95px;color: #fff;background-color:#fff; }
	#overview .item > div > div:nth-of-type(2) > div > div a{ height:95px;width:65px;text-align:center;display:block; }
	#overview .item > div > div:nth-of-type(2) > div .pdf img{ width:24px;margin-top:32px; }
	#overview .item > div > div:nth-of-type(2) > div .del img{ width:14px;margin-top:36px; }
	#overview .item .clipboard{ 
		width:50px;
		height:32px;
		padding-top:18px;
		position:relative;
		margin-top:10px;
		background-image:url(../img/icons/list-clipboard.png);
		background-size:50px auto;
		background-repeat:no-repeat; 
	}
	#overview .item .clipboard .no{ width:20px;min-height:20px;margin:0px auto;text-align:center; }
	#overview .item .details{ padding-left:65px;margin-top:-45px;position:relative;margin-bottom:15px; }
	#overview .item .shared{ color:#f39c12; }
	#overview .item > .none{ min-height:50px !important;padding:15px 0 10px;text-align:center;font-size:13px;line-height:20px; }
	#overview .item > .none > a{ font-weight:normal;color:#3388cc !important;text-decoration:underline !important; }
	
	#page{
		padding:18px;
		color:#333;
		text-shadow:none !important;
	}
	#page h1, #page h2, #page h3, #page h4, #page h5, #page h6{ margin:0; }
	#page h1{ font-size:24px; }
	#page p{ margin:0 2px; }
	
	#evaluate{ background-color:#fff; }
	#evaluate #user{ min-height:151px;background-color:#fff; }
	#evaluate .person{ padding:0 20px 0 20px;font-size:20px;margin-bottom:4px; }
	#evaluate .case, #evaluate .share, #evaluate .none{ margin-left:20px;margin-top:0;font-size:11px;min-height:15px }
	
	.headblock{ 
		padding:20px;
		background-color:#fff;
		border-bottom:1px solid #C9BFBF;
		box-shadow: 0px 2px #EFEDED;
	}
	.headblock p{ padding:0;margin:0; }
	
	.noverflow{ overflow: hidden; }
	
	#step{ margin-top:14px; }
	#step .question.head p{ margin:0;margin-bottom:10px; }
	#step .question .icon{ float:right;height:0; }
	#step .question .icon img{ height:11px; }
	#step .question .icon div:first-child{ font-size:10px;background:#bdc3c7;color:#fff;width:20px;text-align:center;height:20px;border-radius:10px;font-weight:bold; }
	#step .question .icon div:first-child a{ color:#fff;text-decoration:none;display:block;height:20px;padding-top: 4px; }
	#step .question legend{ margin-right:25px;max-width:100%; }
	#step .question .error{ font-size:11px;color:red; }
	#step .question .answer{ margin-top:5px; }
	#step .question .multi-input{ padding-bottom:5px; }
	#step .question .upload{ display:flex; }
	#step .question .upload a{ color:#fff;text-decoration:none;font-weight:normal;border-radius:2px; }
	#step .question .upload > div{ display: flex;flex-direction:row;align-items:stretch;width:100%;text-align:center;margin:10px 0; }
	#step .question .upload > div > a{ padding:10px 0;min-height: }
	#step .question .upload > .add > a{ flex:1;border-bottom:2px solid #A1A1A1;background-color:#ccc; }
	#step .question .upload > .change > a{ border-bottom:2px solid #A1A1A1;background-color:#ccc;flex-grow: 1; }
	#step .question .upload > .delete > a{ width:150px;border-bottom:2px solid #C60000;background-color:#ff0000; }
	#step .question .uploads{ color:#777;font-size:13px; }
	#step .question .multifiles{ padding:4px 0; }
	.steps{ margin:14px 0 5px;color:#383636;height:40px;left:calc(50% - 12px);position: relative; }
	.steps .outer{ overflow:none;width:100%; }
	.steps .inner{ width:10000px; }
	.steps .connector {
		border-top: 1px solid #ededed;
		/*margin-left: 50px;*/
		margin-top: -10px;
		max-width: 520px; 
	}
	.steps ul{ list-style-type:none; }
	.steps ul > li:last-child{ border-width:0; } 
	.steps li{ border-width:0px;width:65px;float:left; }
	.steps li div{
		font-size: 11px;
		text-align: center;
		font-weight:bold;
		margin-right: 30px;
		margin-top: 5px;
		
		width: 22px;
		height: 22px;
		display: inline-block;
		position: relative;
		line-height: 22px;
		background-color:#f6f6f6; 
		-moz-border-radius: 32px;
		-webkit-border-radius: 32px;
		border-radius: 32px;
		-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
		box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
	}
	
	.steps li.active div{ 
		border-radius: 15px;
		height: 25px;
		line-height: 25px;
		padding-top: 3px;
		padding-bottom: 2px;
		margin-top:0;
		margin-bottom:-5px;
		margin-left:-3px;
		margin-right:3px;
		width: 30px;
		font-size:15px;
	}
	.steps li.active div::before{
		content: '';
		position: absolute;
		z-index: -1;
		top: -8px;
		right: -8px;
		bottom: -8px;
		left: -8px;
		background-color: #000;
	}
	
	.question, .formput, .randombox{ padding:12px 24px; }
	.question, .formput{ border-bottom:1px dashed #C9BFBF; }
	
	.formput{ padding-top:30px; }
	.formput.noborder{ border-style:none; }
	
	.fake-arrow{ margin-bottom:10px !important;margin-top:-5px !important; }
	.fake-arrow table{ width:100%; }
	.fake-arrow td{ height:14px; }
	.fake-arrow-curve{ 
		background-color:#fff;
		border-bottom: 1px solid #C9BFBF;
		height:14px;
		border-radius:14px;
		border-top-right-radius:0;
		border-top-left-radius:0;
	}
	.fake-arrow-curve.left{ border-bottom-right-radius:0;border-left: 1px solid #C9BFBF; }
	.fake-arrow-curve.right{ border-bottom-left-radius:0;border-right: 1px solid #C9BFBF; }
	
	.arrow-box{ border:0 !important;margin:0;background-color:#fff; }
	.arrow-box div.one{
		position: relative;
		background: #f6f6f6;
		border: 1px solid #dbd0d0;
		border-bottom:0;

	}
	.arrow-box div.one:after, .arrow-box div.one:before {
		bottom: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.arrow-box div.one:after {
		border-color: rgba(201, 191, 191, 0);
		border-bottom-color: #f6f6f6;
		border-width: 10px;
		margin-left: -10px;
	}
	.arrow-box div.one:before {
		border-color: rgba(246, 246, 246, 0);
		border-bottom-color: #dbd0d0;
		border-width: 13px;
		margin-left: -13px;
	}
	.arrow-box two.one{
		position: relative;
		background: #f6f6f6;
		border: 1px solid #EFEDED;

	}
	.arrow-box div.two:after, .arrow-box div.two:before {
		bottom: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.arrow-box div.two:before {
		border-color: rgba(246, 246, 246, 0);
		border-bottom-color: #EFEDED;
		border-width: 12px;
		margin-left: -12px;
	}
	
	a.add-row, a.addfile, a.delfile{
		font-weight:normal;
		text-decoration:none;
		width:100%;
		font-size:13px;
		font-style:italic;
		color:#3388cc;
	}
	a.add-row:hover{ text-decoration:underline; }
	
	.list-footer{ 
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		display:flex;
		justify-content:space-between;
		right:0;
		z-index:999;
		background-color:rgba(246, 246, 246, 1);
		box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2);
	}
	.list-footer > div{ flex-grow:1;align-self:flex-end;width:33%; }
	.list-footer > div > a{ text-decoration:none; }
	.list-footer > div > a > .prev, 
	.list-footer > div > .edit{ color:#444;padding:15px;background-repeat:no-repeat;font-size:14px;cursor:pointer; }
	.list-footer > div > a > .prev{ background-image: url(../img/icons/button-arrow-left.png);background-size:17px;background-position:12px 12px;padding-left:35px; }
	.list-footer > div > .edit{ background-image: url(../img/icons/button-edit-7.png);background-size:14px;background-position:calc(50% - 30px) 16px;padding-left:38px;text-align:center; }
	
	.button button{ cursor:pointer; }
	.button.circle{ position:fixed;right:0;bottom:0;}
	.button.circle .create{
		-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.50);
		-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.50);
		box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.50);
		background-color:#bbb; 
		border-bottom:3px solid #a0a0a0; 
		width:60px;
		height:60px;
		margin-bottom:20px;
		margin-right:20px;
		border-radius:40px;
	}
	.button.circle .create img{ height:20px; }
	.button.circle .action{ background-repeat:no-repeat;background-position:center;background-size:20px;height:60px; }
	
	.button.circle.next .create,
	.button.circle.lock .create{ background-color:#2ab2cb;border-bottom:3px solid #03788e; }
	.button.circle.share .create,
	.button.circle.add .create{ background-color:#a71d1c;border-bottom:3px solid #730000; }
	
	.button.circle.next .action{ background-image:url(../img/icons/button-check.png); }
	.button.circle.lock .action{ background-image:url(../img/icons/button-lock.png);background-size:16px auto; }
	.button.circle.ask .action{ background-image:url(../img/icons/button-ask.png); }
	.button.circle.concept{ bottom:-84px; }
	.button.circle.concept .action{ background-image:url(../img/icons/button-save.png); }
	.button.circle.share{ bottom:-84px; }
	.button.circle.share .action{ background-image:url(../img/icons/button-share.png);background-position:22px 18px; }
	.button.circle.add .action{ background-image:url(../img/icons/button-add.png);background-size:18px auto; }
	.button.circle.load .action{ background-image:url(../img/spin.svg);background-position:center; }
	
	.question-list .list > div:last-child,
	.form-list > div:last-child{ border:0;margin-bottom:60px; }
	
	.question-list > .message,
	.question-list > .dump{ color:#333333;padding:12px 24px; }
	.question-list > .message h2,
	.question-list > .dump h2{ margin-bottom:20px; }
	.question-list > .message p, 
	.question-list > .dump p{ margin:0; }
	.question-list > .dump img.loader{ margin:20px auto;display:block;width:36px; }
	
	/* Login styles */
	#login{ max-width:400px;margin:0 auto; }
	#login .image{ padding:10px 0;margin-bottom:30px;min-height:80px; }
	#login .image img{ display:none; }
	
	#login .text{ padding:10px;min-height:60px;margin-top:-50px;display:none; }
	#login .text h1{ color:#383636;font-size:24px;text-shadow:none; }
	
	#login .select{ background-repeat:no-repeat;background-size:auto 24px;background-position:6px 10px;border-bottom:1px solid #ccc;margin:20px 10px;padding:4px; }
	#login .select .ui-btn{ box-shadow:none !important;border:none !important;background-color:transparent !important;text-align:left !important;margin-left:38px !important;padding:0 !important;font-weight:normal !important; }
	#login .select .ui-btn-active{ font-weight:normal !important;color:#383636;text-shadow:none !important; }
	#login .select.type{ background-image:url(../img/icons/input-type.png); }
	
	#login .input{ background-repeat:no-repeat;background-size:auto 22px;background-position:7px 4px;border-bottom:1px solid #ccc;margin:20px 10px 25px;min-height:40px; }
	#login .input .ui-input-text{ margin:0 !important;border:0px !important;background-color:transparent !important; }
	#login .input input{ border-radius:0;margin-left:38px;padding:4px; }
	#login .input.email{ background-image:url(../img/icons/input-user.png); }
	#login .input.password{ margin-bottom:40px;min-height:40px;background-image:url(../img/icons/input-lock.png); }
	
	#login .button{ padding:4px 10px; }
	#login .button .ui-btn{ 
		box-shadow:none !important;
		text-shadow:none !important;
		color:#fff;
		-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
		background-color:#2ab2cb; /*639dbc; *//*337ab7;*/
		border-bottom:3px solid #03788e; /*639dbc; *//*337ab7;*/
		border-radius:3px;
		font-weight:normal;
	}
	#login .button.forgot,
	#login .button.later{ padding-top:10px;text-align:center; }
	#login .button.forgot a,
	#login .button.later a{ text-shadow:none;font-size:13px;font-weight:normal; }
	
	#login #checking{ text-align:center; }
	#login #checking .loader{ padding:20px 0; }
	#login #checking .loader img{ width:36px; }
	#login #checking .content{ text-shadow:none !important;color:#383636 !important; }
	
	#popup del{ color:red; }
	#popup ins{ color:green; }

	.suggest{ font-size:12px;text-align:right;font-style:italic;padding:8px 0; }
	.suggest a{ text-decoration:none; }