/*

Copyright 2008-2015 Clipperz Srl

This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.

* Clipperz is free software: you can redistribute it and/or modify it 
  under the terms of the GNU Affero General Public License as published 
  by the Free Software Foundation, either version 3 of the License, or 
  (at your option) any later version.

* Clipperz is distributed in the hope that it will be useful, but 
  WITHOUT ANY WARRANTY; without even the implied warranty of 
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public
  License along with Clipperz. If not, see http://www.gnu.org/licenses/.

*/

#extraFeaturesPanel {
	.extraFeatureIndex {
		background-color: $main-alternate-color;
		color: $main-alternate-text-color;

		header {
			text-align: right;
			height: 48px;
			font-size: 24pt;

			.button {
				@include icon-font();

				.label {
					padding-top: 8px;
					padding-right: 8px;
				}
			}
		}

		& > div {
			border-top: 1px solid white;

			& > ul > li {
//				padding: 10px;
//				padding-right: 0px;
				border-bottom: 1px solid white;

				& > h1 {
					cursor: pointer;
					font-size: 16pt;
					padding: 10px;
				}

				& > ul {
//					padding-left: 10px;
				}

//				&:last-child {
//					border-bottom: 1px solid white;
//				}
			
				&.closed > ul {
					display: none;
					visibility: hidden;
				}
			}

			ul {

				li {
					& > ul > li {
						padding: 10px;
						padding-left: 20px;
						padding-right: 0px;
						cursor: pointer;
					
						&.selected {
							background-color: #333;
//							color: black;
						}

						& > div {
							padding: 4px;
						}
						
						&.offlineCopy {
							cursor: default;
					}
					}

					&.open {
					
					}

					&.close {
					
					}

//					h1 {
//						cursor: pointer;
//						font-size: 16pt;
//						padding: 10px;
//					}
				
					h2 {
//						cursor: pointer;
						font-weight: 300;
						font-size: 14pt;
					}
				
					h3 {
						font-size: 12pt;
					}
				
					p {
						font-size: 10pt;
						font-weight: 100;
						padding-bottom: 5px;
						line-height: 1.2em;
					}
				
					a.button {
						@include border-radius(2);
						display: inline-block;
						padding: 10px 16px;
						background-color: green;
						color: lightgrey;
					
						&:hover {
							color: white;
						};
					
						&.disabled {
							background-color: #999;

							&:hover {
								color: white;
							};
						}
					}
				}
			}
		}
	
		footer {
			$applicationVersionColor: #999;
			font-size: 8pt;
			padding: 5px 5px 5px 5px;
			border-top: 1px solid $applicationVersionColor;

			span {
				color: $applicationVersionColor;
				&:after {
					content: ":";
				};
			}
			a {
				color: $applicationVersionColor;
				text-decoration: none;
				padding-left: 5px;
				font-weight: bold;
			}
		}
	}

	.extraFeatureContent {
		border-right: 1px solid #222;
		color: white;

		header {
			display: none;
		}
		
		.extraFeature {
			padding: 20px;
			
			h1 {
				font-size: 20pt;
				padding-bottom: 20px;
			}
			
			form {
			
				label {
					display: none;
				}

				input {
					$border-size: 0px; //	2px;

					display: block;
					font-size: 18pt;
					margin-bottom: 8px;
					padding: (6px - $border-size) (10px - $border-size);
					border: $border-size solid white;
					width: 350px;
					color: black;

					&.invalid {
						border: $border-size solid $clipperz-orange;
						color: gray;
					}
				}
			
				p {
					@include flexbox;
					@include flex-direction(row);

					input {
						width: 30px;
						@include flex(auto);
					}
				
					span {
						@include flex(auto);
						font-size: 12pt;
					}
				}

				button {
					font-family: "clipperz-font";

					color: white;
					font-size: 14pt;
					border: 0px;

					margin-top: 20px;
					padding: 6px 10px;

					border: 1px solid white;
					background-color: $main-color;
					@include transition(background-color font-weight, 0.2s, linear);

					&:hover {
					};

					&:disabled {
						font-weight: 100;
						background-color: #c0c0c0;
						cursor: default;

						&:hover {
						};
					}
				}
//				input.valid:focus {
//					border: 2px solid $clipperz-blue;
//				}
			}

			ul {
				color: white;
				
				li {
					padding-bottom: 40px;
				}
			}
			
			h3 {
				font-size: 18pt;
			}
			
			.description {
				max-width: 500px;
				padding: 10px 0px 20px 0px;
				
				p {
					font-size: 10pt;
					margin-bottom: 7px;
					line-height: 1.4em;
					color:#bbb;
					
					em {
						text-decoration: underline;
					}
				}
			}

			.button {
				display: inline-block;

				color: white;
				background-color: $main-color;

				font-size: 14pt;

				border: 1px solid white;
				padding: 6px 10px;
				
				&:after {
				};
				
				&.disabled {
					background-color: #c0c0c0;
					cursor: default;
				}
			}
		}
		
		.dataImport {
			.stepNavbar {
				li {
					display: inline-block;
					margin-right:1em;
					
					&.disabled {
						color: gray;
					}
					
					&.active {
						text-decoration: underline;
					}
				}
			}
			
			.error {
				margin: 1em 0;
			}
			
			textarea {
				width:100%;
				min-height:400px;
				display: block;
				margin: 1em 0;
				border: 0;
			}
			
			.csvTable {
				background: white;
				margin: 1em 0;
			}
			
			.dropArea {
				margin: 1em 0;
				width: calc(100% - 6px);
				text-align: center;
				height: inherit;
				line-height: 3em;
				
				border: 3px dashed white;
				background: black;
			}
			
			.button {
				margin-right:1em;
			}
			
			.jsonPreview {
				width: 100%;
				height:80%;
				overflow: auto;
				margin-top:1em;
				
				h3 {
					font-weight:bold;
				}
				
				ul {
					margin-bottom:1em;
					padding-left:1em;
					
					li {
						.label {
							font-weight:bold;
						}
					}
				}
			}
		}

/*
		.changePassphraseForm {
			label {
				display: block;
			}
			
			input {
				display: block;
			}
		}
		
		.deleteAccountForm {
			margin-top: 1em;
		
			label {
				display: block;
			}
			
			input {
				display: inline-block;
				margin-right: 1em;
				margin-bottom: 1em;
			}
			
			.confirmCheckbox {
				display: inline-block;
			}
		}
*/
		
		form {
			input.valid + .invalidMsg, input.empty + .invalidMsg, input:focus + .invalidMsg, input.invalid:focus + .invalidMsg {
				visibility: hidden;
			}
			
		}
	}
}			
			
.mainPage.narrow {
	#extraFeaturesPanel {
		.extraFeatureContent {
			header {
				display: block;
				height: 48px;
				border-bottom : 1px solid white;

				.button {
					@include icon-font();
					cursor: pointer;
					color: white;

					font-size: 16pt;
					padding-top: 15px;
					padding-left: 10px;
				}
			}
		}
	}
}