/**
 * Input
 *
 * @category	JavaScript
 * @author      Paul Smiechowicz <paul@designofadecade.com>
 * @copyright   2013 Paul Smiechowicz 
 * @version     1.0
 * @license     http://www.opensource.org/licenses/bsd-license.php
 * @link        http://designedit.designofadecade.com/designedit/css/input

*/

	/* form */
	.de form {
		position:relative;
		width:auto;
		margin:0;
		padding:0;
	}
	
	/* note */
	.de form .note {
		padding:12px 5px;
		font-size:11pt;
		color:#7E7E7E;
		line-height:1.5em;
		border:1px solid #F1F1F1;
		-webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
		box-sizing: border-box;
		border-right:none;
		border-left:none;
		margin-bottom:10px;
	}
		.de form .note h1 {
			font-size:18pt;
			font-weight:normal;
			margin:5px 0;
			padding:0;
		}
		
		.de form .note h2 {
			padding:0;
			font-size:12pt;
			color:#00aeef;
			margin:20px 0 0px;
			display:block;
		}
		
		.de form .note .highlight 
		{
			color:#00aeef;
		}
		
		.de form .note blockquote
		{
			margin:5px 0;
			padding:0;
			margin-left:20px;
		}
		
		.de form .note p {
			margin: 0px 0 5px;
			padding:0;
		}
	
		.de form .note p:first-child {
			margin-top:0;
		}
		
		.de form .note p:last-child {
			margin-bottom:0;
		}
	
	
	/* label */
	.de label {
		position:relative;
		display:block;
		padding: 4px 0px;
		padding-bottom:0px;	
		color:#454545;	
		font-size:10pt;
		margin-bottom: 2px;
		font-weight:bold;			
	}
	
		.de label em {
			font-weight:normal;
			font-size:9pt;			
		}
		
		.de .input.error > label {
			color:#DA3030;		
		}


	.de .input  {
		padding:8px 0px 4px;
	}

		.de .input:first-child {
			border-top: none;
		}

		.input > .input  {
			border-top: none;
			padding:0;
		}
		
	/* text */
	.de .input .text
	{		
		position:relative;
		display:block;
		width:100%;
		height:32px;
		padding:6px 6px;
		margin:2px 0 10px 0;					
	}	
	
		
	/* row */
		
	
		.de .input .block
		{
			background-color:#fff;
			margin:10px 0 15px;
			padding:20px 20px 10px;
		}
		
			
		
		.de .input .block .row > div.closed > .input
		{
			display:none;
		}
		
		.de .input .block .row > div > .input.first
		{
			display:block !important;
		}
		
		
		.de .1input .row
		{	
			padding:5px 0px 5px;
			margin-bottom:15px;	
		}
	
		/* columns 2 */
		.de .1input .row > div
		{
			padding:10px 10px;	
			background-color:#ddd;
			margin-bottom:5px;		
		}	
		
		.de .1input .row:nth-child(odd) > div
		{ 
			background-color:#eee;	
		}
		
		.de .1input .row:last-child
		{
			margin-bottom:0px;
		}
		
		.de .1input .row > button
		{
			margin-top:1px !important;
			margin-left:10px !important;
			
		}	
		
		
		.de .1input .row  button.delete
		{
			position:absolute;
			right:-15px;
			top:-10px;
			font-size:10pt;
			border:none;
			background:#fff;
			border-bottom-left-radius:10px;
			padding:6px 10px;
		}	
		
		.de .1input .row  button.move
		{
			position:absolute;
			right:auto;
			margin-left:50%;
			width:30px;
			left:-15px;
			top:-5px;
			font-size:10pt;
			border:#eee;	
			background:#ddd;
			text-align:center;
			height:10px !important;
			padding-top:0px !important;
			padding-bottom:20px !important;
		}		
			.de .1input .row:nth-child(odd)  button.move
			{ 
				background-color:#eee;	
			}
			
			.de .1input .row button.move:hover
			{ 
				background-color:inherit;
			}
			
			
			.de .1input .row  button.move i
			{
				font-size:8pt;
				margin-left:-2px;
				color:#ccc;
	
			}	
		
		.de .1input .row  button.more
		{
			position:absolute;
			right:auto;
			margin-left:50%;
			width:30px;
			left:-15px;
			top:auto;
			bottom:-8px;
			font-size:10pt;
			border:none;
			background:#fff;
			text-align:center;
			height:10px !important;
			padding-top:1px !important;
			padding-bottom:20px !important;
		}			
			.de .1input .row  button.more i
			{
				margin-left:-2px;		
			}	
		
		
		/* panels */
		.de .panels .panel:nth-child(even) .1input .block {
			background-color:#e6e6e6;
		}
			
			.de .panels .panel:nth-child(even) .1input .row  button.delete, .de .panels .panel:nth-child(even) .input .row  button.more
			{
				background-color:#e6e6e6;
			}
	
	/* columns */
	
		/* columns 2 */
		.de .input.col2 .col 
		{
			width:calc(50% - 2.5px);
			float:left;
			margin-right:5px;	
			padding-top: 0;		
		}		
			.de .input.col2 .col:last-child 
			{
				width:calc(50% - 2.5px);
				margin-right:0px;			
			}
			
		/* columns 3 */
		.de .input.col3 .col 
		{
			width:calc(33.3% - 5px);
			float:left;
			margin-right:5px;			
		}		
			.de .input.col3 .col:last-child 
			{
				width:33.4%;
				margin-right:0px;			
			}	
	
		/* after */
		.de .input.col2:after, .de .input.col3:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;		
		}	
		
		@media screen and (max-width: 480px) 
		{ 			
			.de .1input.col2 .col 
			{
				width:100% !important;
				float:none;
				margin-right:5px;			
			}
		}
	
	/* encrypt */
	.de .input.encrypt 
	{
		position:relative;
		padding-right:20px;					
	}
	
		.de .input.encrypt:before {
			position:absolute;
			display:block;
			right:0px;
			margin-top:33px;
			font-family: FontAwesome;
			content: "\f023";
			display:block;
			font-size:16pt;
			line-height:20px;
			color:#555555;
			clear: both;
		} 

	/* encrypt */
	.de .input .info 
	{
		font-size: 10pt;	
		line-height: 16pt;			
	}
	
	/* textarea, select, input */
	.de textarea, .de input, .de select {
		position:relative;
		display:block;
		width:100%;
		height:28px;
		padding:4px 4px;
		margin: 0;
		overflow:hidden;
		background: #f5f5f5;
		border:1px solid #D3D3D3;
		border-radius: 2px;
		color:#333;
		font-size:10pt;
		resize:none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
		/* textarea */
		.de textarea
		{
			padding:6px 6px;
			line-height:1.5em;		
			overflow: scroll;		
		}
	
	/* checkbox, radio  */
	.de input[type=checkbox], .de input[type=radio] {
		position:absolute;
		display:inline-block;	
		width:auto;
		margin-top:10px;
		margin-left:5px;
		margin-right:6px;	
		padding:0;	
		border:none;
		background:none;
		appearance:none;
		-webkit-appearance:none;
		-moz-appearance:none;
		width:16px;
		height:16px;
		background:white;
		border-radius:2px;
		border:none;
		outline:none;
		overflow:visible;
		background-color: #ddd;
	}
	
		.de .input input[type=text].number
		{
			width:100%;
		}
	
		.de .input .checkbox
		{
			position:relative;
			display:block;
			width:100%;
			height:10px;
			padding:6px 6px;
			margin:2px 0 10px 0;				
		}
		
			.de .input .checkbox input[type=checkbox]
			{
				margin-top:0px;
				margin-left:-4px;	
				border: 1px solid #ccc;
			}
	
		/* checkbox, radio  */
		.de input[type=checkbox].border {
			 border: 1px solid #ccc;
		}
	
		.de input[type=checkbox]:checked::after {
		  position: absolute;
		  content: '';
		  top:3px;
		  left:3px;	  
		  width:10px;
		  height:10px;
		  background-color:#0085C2;
		  border-radius:2px;
		}

		.de .input .checkbox input[type=checkbox]:checked::after {
		  top:2px;
		  left:2px;	  
		}
	
	/* options  */
	.de .input .options
	{
			position:relative;
			display:block;
			width:100%;
			height:auto;
			padding:6px 6px;
			margin:2px 0 13px 0;	
	}
	
		.de .input .options .option
		{
			position:relative;
			display:block;
			margin-right:15px;
			padding-right:30px;
			margin-bottom:12px;
		}
		
		.de .input .options .option label {
			position: relative;
			top: 10px;
			left: 30px;
			padding: 0;
			margin: 0;
			font-weight: normal;
		}
	
	/* select  */
	.de select {	
		padding:0;
	}	
	
	/* tree */		
	.de .input ul, .de .input ul li {
		top:0;
		left:0;
		margin:0;
		padding:0;
		list-style-type: none;		
	}
		.de .input > ul, .de .input > div > ul {
			margin-left: 17px;
			margin-top: 5px;
		}
			.de .input ul label {
				position:relative;
				top:10px;
				left:30px;
				padding:0;
				margin:0;
				font-weight:normal;
			}	

				
			
				.de .input ul ul label {  
					font-weight:normal;					
				}	

				.de .input ul ul input[type=checkbox], .de .input ul ul input[type=radio]
					margin-top: 11px;				
				}	

			.de .input > ul  {
				margin:11px 0px 18px 10px;	
			}
			
			.de .input.nolabel > ul {
				margin:0px 0px 0px 2px;	
			}
			
			.de .input ul ul {
				margin-top:10px;
			}	
			
			.de .input ul li {
				display:block;	
				padding:8px 0;
				padding-left:10px;		
				border-left:1px solid #ccc;				
			}	
				.de .input ul li ul li {
					margin-left:12px;	
				}
			
			
				.de .input ul li::before {
				  position:absolute;
				  content: '';
				  margin-left:-10px;
				  margin-top:18px;  
				  width:10px;
				  height:1px;
				  border-bottom: 1px solid #ccc;
				}
			
				.de .input ul li:last-child {
					border:none;	
				}
				
					.de .input ul li:last-child::before {
					  position:absolute;
					  content: '';
					  margin-left:-10px;
					  margin-top:-8px;  
					  width:10px;
					  height:27px;
					  border-left: 1px solid #ccc;
					  border-bottom: 1px solid #ccc;
					}
					
			/* note */
			.de .input.type_tree > .note  {
				margin-top:2px;
				margin-bottom:5px;
			}
				
			
			/* app */	
			.de .input.tree_app	 > button  {
				margin-top:5px;
				margin-left:2px;
			}
				
				.de .input.tree_app	 > ul  {
					margin-top:5px;
					margin-left:18px;
				}
	
	
	/* note */
	.de .input > .note  {
		font-size:9pt;
		color:#666;
		border:none;
		padding:0 5px;
		margin-top:-5px;
		margin-bottom:15px;
	}
					
					
	/* buttons */
	.de .input .buttons  {
		position:relative;
		display:block;
		width:auto;
	}
	
	.de .input .buttons:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
	
	.de .input .buttons div {
		overflow:hidden;		
	}
	
	.de .input .buttons input {
		position:relative;
		display:inline-block;		
	}
	
		.de .buttons + .bubble {
			margin-top: -20px;
		}

		.de .checkbox + .bubble {
			right: auto;
			left: 30px;
			margin-top: -31px;
		}

		.de .checkbox + .bubble:after {
			top: 9px;
    		left: -11px;
    		transform: rotate(270deg);
		}

		.de .input.error .buttons div {
			box-shadow:0 0 1px 1px #DA3030;
			border-radius: 2px;
		}
		
			.de .input.error .buttons div input {
				border:none !important;
				box-shadow:none !important;
			}
	
		.de .input > .buttons > button {
			display:block;
			float:right;
			padding:0;
			margin:0px 0px 10px 4px;		
			height:28px !important;
			padding:6px 12px !important;
			background-color:#f5f5f5;
			border:1px solid #D3D3D3;
			-webkit-touch-callout:none;
			-webkit-user-select:none;
			-khtml-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;
		}
		
			.de .input > .buttons.left > button {
				float:left;
				margin:3px 4px 10px 0px;	
			}
		
			.de .input > .buttons > button:hover {
				background:#fff;
				color:#000;	
			}
		
			.de .input > .buttons > button i {
				pointer-events: none;
				font-size:12pt;				
				color:#555555;
			}
	
	/* focus  */
	.de textarea:focus, .de input.not([type=checkbox]):focus, .de select:focus,
	.de textarea.error, .de input.error, .de select.error    
	{
		background:#fff;
		color:#000;	
		outline:none;
	}
	
	/* error  */
	.de textarea.error, .de input.error, .de select.error, .de .input.error textarea, .de .input.error input, .de .input.error select  {
		box-shadow:0 0 1px 1px #DA3030;
	}
	
	/* placeholder */	
	.de input::-webkit-input-placeholder { /* WebKit browsers */
		 font-family: 'Roboto', sans-serif;
		 font-size:12pt;
		 color:#666;
		 line-height:13pt;
	}
			
	.de input:-ms-input-placeholder { /* Internet Explorer 10+ */
		 font-family: 'Roboto', sans-serif;
		 font-size:12pt;
		 color:#666;
	}
	
	/* disabled */		
		
		.de .disabled label, .de .disabled input, .de .disabled select, .de .disabled h2 {
			opacity:0.50;	
			-moz-user-select: -moz-none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			user-select: none;
		}
		
		.de textarea:disabled
		{
			opacity:0.60;
			background:#FFF;
			color:#333;
		}
		
		
	.de div.fileinput {
		height:50px;
		width:100%px;
		background:#F00;
		overflow:hidden;
	}
	
	.de input[type=file].ui {
		height:0px;
		width:0px;
		visibility:hidden;
	}
				
	
	/* button */
	.de button, .de input[type=submit], .de a.button, .de div.button {
		position:relative;
		display:inline-block;
		width:auto;
		text-indent:0;
		padding:5px 10px;
		margin:0;
		margin-right:10px;
		min-width:20px;
		font-size:10pt;
		color:#333;
		font-weight:bold;		
		background: #DDDDDD;
		border:none;
		border-radius:2px;
		cursor:pointer;
		text-decoration:none;
		line-height:normal;
	}
	
		.de div.button {
			font-family:Arial, Helvetica, sans-serif;
		}
	
		/* focus  */
		.de button:focus, .de input[type=submit]:focus     
		{
			outline:none;
		}
	
		.de .right button, .de .right input[type=submit], .de .right a.button, .de .right div.button  {
			margin-right:0px;
			margin-left:10px;
		}
	
		.de button i, .de a.button i, , .de div.button i {
			pointer-events: none;
			font-size:12pt;
			line-height:20px;
			color:#555555;
		}
		
		.de button:disabled i, .de a.button.disabled i,  .de div.button.disabled i {
			color:#ccc !important;
		}
	
		.de button:hover, .de input[type=submit]:hover, .de a.button:not([disabled]):hover, .de button.selected, .de a.button.selected {
			background: #bcbcbc;
			border-color:#a6a6a6;
		}
		
		.de button:disabled, .de input[type=submit]:disabled, .de button.disabled
		{
			opacity:0.50;
			background:#FFF;
			color:#333;
			cursor: default;
		}		
			
	
		/* image version */
		.de button.image {
			padding:0;
			width:30px;
			height:24px;
		}
		
		
		.de .right {
			text-align:right;	
		}


	/* table */

	.de .input.table > .list {
		padding:10px; 
		box-sizing: border-box
	}

		.de .input.table > button {
			margin-left: 10px;
		}



	/* compact */

	.de .compact button.compact, .de .compact input[type=submit].compact, .de .compact a.button.compact, .de .compact div.button.compact {
		font-size:0pt;
		padding-right:12px
	}

		.de .compact button.compact i, .de .compact input[type=submit].compact i, .de .compact a.button.compact i, .de .compact div.button.compact i {
			font-size:13pt;
		}
			
	
	/* size */
	
		/* small */
		.de .input .small label, .de .input.small label
		{
			font-size:10pt !important;
		}
			.de .input .small label em {
				font-weight:normal;
				font-size:8pt;			
			}
		
			/* textarea, select, input */
			.de .small textarea, .de .small input, .de .small select {
				height:30px;
				padding:5px 5px;
				margin:2px 0 2px 0;	
				font-size:10pt;			
			}
			
			/* textarea, select, input */
			.de .small .buttons button, .de .buttons.small button, .de .small button {
				height:30px !important;
				font-size:10pt !important;
				line-height:19px;
				margin-bottom:2px;	
			}
			
			.de .small input[type=checkbox] {
				height:16px;
				
			}
			
			.de .small .buttons button i, .de .buttons.small button i, .de .small button i {
				pointer-events: none;
				font-size:11pt;
				line-height:10px;
			}
			
		/* xlarge */
		.de .input .xlarge label
		{
			font-size:10pt !important;
		}
			.de .input .xlarge label em {
				font-weight:normal;
				font-size:8pt;			
			}
		
			/* textarea, select, input */
			.de .xlarge textarea, .de .xlarge input, .de .xlarge select {
				height:50px;
				padding:5px 5px;
				margin:2px 0 2px 0;	
				font-size:15pt;			
			}
			
			/* textarea, select, input */
			.de .xlarge .buttons button, .de .buttons.xlarge button, .de .xlarge button, .de button.xlarge {
				height:50px !important;
				font-size:15pt !important;
				line-height:40px;
				margin-bottom:2px;	
			}
			
			.de .xlarge input[type=checkbox] {
				height:16px;
				
			}
			
			.de .xlarge .buttons button i, .de .buttons.xlarge button i, .de .xlarge button i, .de button.xlarge i {
				pointer-events: none;
				font-size:20pt;
				line-height:none;
				margin-right:4px;
				position:relative;
				top:2px;
			}