/********************************
 * MODAL WINDOWS & DIALOGS
 ********************************/

#modalOverlay{
	/* position: fixed;
	z-index: 700;
	overflow: hidden;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	display: none;
	background-color: rgba(136, 163, 170, 0.5); */
}
/* #modalOverlay.fullScreen{
	background-color: #e7f2f8;
} */
.modalOverlay{
	background-color: rgba(100, 140, 150, 0.5);
	display: none;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 800;
}
	.modalOverlay.visible{
		/* background-color: rgba(170, 136, 163, 0.5); */
	}
	.modalOverlay.fullScreen{
		background-color: #e7f2f8;
	}
	
	.modalOverlay .centered{
		-moz-transform: translateX(-50%) translateY(-30%);
		-webkit-transform: translateX(-50%) translateY(-30%);
		-o-transform: translateX(-50%) translateY(-30%);
		-ms-transform: translateX(-50%) translateY(-30%);
		transform: translateX(-50%) translateY(-30%);
		position: absolute; 
		left: 50%;
		top: 30%;
	}
		.modalOverlay .modal{
			background-color: #fff;		
			min-width: 500px;
			max-width: 640px;
			min-height: 100px;
			padding: 20px;
			-webkit-border-radius: 2px;
			border-radius: 2px;
			-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .2);
			box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .2);
			margin: 0 auto;
			-moz-transform: scale(.5);
			-webkit-transform: scale(.5);
			-o-transform: scale(.5);
			-ms-transform: scale(.5);
			transform: scale(.5);
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
			opacity: 0;
		}
		
		.modalOverlay .modal.visible{
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-o-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
			opacity: 1;
		}
		.modalOverlay.closable .modal{
		}
		.modalOverlay.fullScreen .modal{
			background-color: #e7f2f8;
			/* background-color: transparent; */
			-webkit-box-shadow: none;
			box-shadow: none;
			min-width: 0;
		}
		
			.modalOverlay .modal h1{
				display: block;
				font: 300 32px 'Source Sans Pro', 'Open Sans', sans-serif;
				color: #25c1ef;
				padding: 0 0 5px;
				margin: 0 0 20px;
				border-bottom: 1px dotted #92e0f7;
				white-space: nowrap;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				cursor: default;
			}
			.modalOverlay .modal.login h1{
				background: url("../images/hugelogo.png") no-repeat center top;
				padding-top: 320px;
				border-color: #a3c4cd;
				color: #718084;
			}
			.modalOverlay .modal.login h1:before{
				content: "cCloud";
				display: block;
				position: absolute;
				top: 225px;
				left: 0;
				right: 0;
				font: 700 50px 'Source Sans Pro', sans-serif;
				color: #fff;
				text-shadow: -1px -1px rgba(0, 141, 205, 0.5);
				text-align: center;
				cursor: default;
			}
			
			.modalOverlay .modal .error{
				display: none;
				margin-bottom: 15px;
				color: red;
				text-align: center;
			}
			.modalOverlay .modal h2{
				display: block;
				font: 300 18px 'Open Sans',sans-serif;
				color: #384B52;
				margin: 0 0 8px;
				padding: 0;
				text-align: left;
			}
			.modalOverlay .modal p{
				display: block;
				font: 400 18px 'Source Sans Pro', 'Open Sans', sans-serif;
				color: #666;
				padding: 10px;
				margin: 0 0 25px;/* 25 */
				text-align: center;
			}
				.modalOverlay .modal q{
					display: block;
					font: 300 14px 'Open Sans',sans-serif;
					color: #3591aa;
					background-color: rgba(1, 161, 224, 0.1);
					padding: 10px;
					margin: 10px -15px 0;
					text-align: center;
				}
				.modalOverlay .modal hr{
					/* background-image: -moz-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.75), transparent); */
					border: 0 none;
					border-bottom: 1px dashed #5eb4e1;
					height: 0px;
					margin: 20px 0 10px;
				}
				.modalOverlay .modal .text em{
					font: 400 12px 'Open Sans',sans-serif;
					color: #d55;
				}
				
				.modal .fields {
					margin: 0 auto 20px;
				}
					.modal .fields > div{
						margin: 0 auto;
						margin-bottom: 10px;
					}
				.modal div{
					/* margin: 0 auto 10px; */
					margin: 0 auto;
					position: relative;
				}
				
				.modal.login .field,
				.modal.resetPassword .field,
				.modal.editFullName  .field{
					width: 320px;
				}
				
				.modal form div span{
						display: none;
					}
					.modal form div span.error{
						display: block;
						font: 400 13px 'Open Sans', sans-serif;
						color: #de1f1f;
						text-align: left;
						margin: 2px 10px 0;
						z-index: 1;
					}
					/* .modal input.valid{
						background-color: #e1fee8 !important;
					}
					.modal input.error{
						background-color: #FFD6D6 !important;
					} */
				.modal form p{
					margin-bottom: 0;
				}
					.modal label{
						display: block;
						color: #607981;
						font: 300 14px/38px 'Open Sans', sans-serif;
						font-style: italic;
						text-align: left;
						padding-left: 10px;
						z-index: 1;
					}
					
					.modal input[type=text],
					.modal input[type=password]{
						position: relative;
						z-index: 2;
						background-color: #fff;
						height: 20px;
						padding: 9px 10px;
						vertical-align: middle;
						-webkit-border-radius: 3px;
						border-radius: 3px;			
						border: 1px solid #c4d2d7;
						color: #273f47;
						font: 400 14px/20px 'Open Sans', sans-serif;
					}
					
					.modal.getMoreSpace input[type=text],
					.modal.sharePublicLinks input[type=text]{
						background: #fffeeb;
						color: #367083;
						-webkit-box-shadow: inset 0px 0px 0px 1px #fff;
						box-shadow: inset 0px 0px 0px 1px #fff;
					}
					
					.modal input[type=text]:hover,
					.modal input[type=password]:hover{
						border: 1px solid #ccc;
						border: 1px solid #bcd;
					}
					.modal input[type=text]:focus,
					.modal input[type=password]:focus{
						/* background-color: #fff; */
						border: 1px solid #bbb;
						border: 1px solid #60caf4;
						-webkit-box-shadow: 0px 0px 0px 3px #efefef;
						box-shadow: 0px 0px 0px 3px #efefef;
					}
					
					.modal .dont_show_container{
						/* position: relative;
						margin-left: 20px;
						height: 65px; */
						margin-top: -15px;
						margin-bottom: 20px;
						padding: 10px 20px;
						text-align: center;
						background-color: #f5f8f9;
					}
						.modal .dont_show_container input{
							/* position: absolute;
							left:0; */
						}
						.modal .dont_show_container label{
							/* line-height: 1em; */
							margin-left: 8px;
							display: inline;
							padding-left: 0;
							cursor: pointer;
						}
					
					.modal .loginField,
					.modal .resetField{
						width: 300px;
					}
					.modal .publicLink{
						min-width: 500px;
						width: 95%;
					}
					.modal.sharePublicLinks p{
						margin-bottom: 10px;
					}
					.modal.about p.version{
						margin-bottom: 10px;
					}
					.modal.sharePublicLinks .fields div{
					    text-align: center;
					}
					.modal.sharePublicLinks .fields{
						margin-bottom: 0;
					}
					.modal .fields div.copied{
						background-color: #5db4dc;
						background-color: rgba(74, 187, 239, 0.95);
						content: "Link copied!";
						display: block;
						position: absolute;
						top: 2px;
						bottom: 2px;
						right: 2px;
						left: 2px;
						font: 400 16px/36px 'Open Sans',sans-serif;
						color: #fff;
						text-align: center;
						z-index: 2;
						-webkit-border-radius: 2px;
						border-radius: 2px;
					}
					
					
					.modal .social{
						margin-bottom: 25px;
						font: 400 14px/32px 'Open Sans', sans-serif;
						color: #273f47;
						text-align: center;
						/* background-color: #eee;
						padding: 10px; */
					}
						.modal .social a{
							display: inline-block;
							width: 32px;
							height: 32px;
							background: url(../images/icons.png) no-repeat;
							margin: 0 5px;
							vertical-align: middle;
						}
						.modal .social .email{
							background-position: 0 -356px;
							display: none;
						}
						.modal .social .facebook{
							background-position: -32px -356px;
						}
						.modal .social .gplus{
							background-position: -64px -356px;
						}
						.modal .social .twitter{
							background-position: -96px -356px;
						}
						.modal .social .pinterest{
							background-position: -128px -356px;
						}
						.modal .social .tumblr{
							background-position: -160px -356px;
						}
						.modal .social .linkedin{
							background-position: -192px -356px;
						}
		
				.modal div.select{
					z-index: 2;
					background: #fff;
					height: 200px;
					margin: 0 0 20px;
					vertical-align: middle;
					-webkit-border-radius: 3px;
					border-radius: 3px;			
					border: 1px solid #01a4e0;
				}
				.modal div.select div{
					margin: 0;
				}
					.modal .select .option{
						display: block;
						height: 20px;
						color: #273f47;
						padding: 10px;
						font: 400 14px 'Open Sans', sans-serif;
						text-align: left;
						border-bottom: 1px solid #e6f4fb;
						cursor: pointer;
					}
					.modal .select .option:hover{
						background-color: #e6f4fb;
					}
					.modal .select .option.selected,
					.modal .select .option.selected:hover{
						background-color: #b9dce8;
					}
			
			.modalOverlay .exit{
				display: block;
				position: absolute;
				top: 15px;
				right: 15px;				
				width: 20px;
				height: 20px;
			}			
			.modalOverlay .exit:hover{
				background-color: #eee;
				cursor: pointer;
			}
			.modalOverlay .exit:hover:after,
			.modalOverlay .exit:hover:before{
				background-color: #aaa;
			}
			.modalOverlay .exit:after,
			.modalOverlay .exit:before{
				content: "";
				display: block;
				position: absolute;
				background-color: #ccc;
				width: 16px;
				height: 3px;
				top: 8px;
				left: 2px;
			}			
			.modalOverlay .exit:after{
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			.modalOverlay .exit:before{
				-moz-transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
			.modalOverlay .buttons{
				display: block;
				text-align: center;
				white-space: nowrap;
				/* border-top: 1px dotted #92e0f7;
				padding-top: 15px; */
			}
				.modalOverlay .buttons button{
					display: inline-block;
					min-width: 120px;
					font: 400 18px 'Source Sans Pro', 'Open Sans', sans-serif;
					color: #666;
					padding: 13px 30px;
					margin: 0 5px;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					border: 1px solid #ddd;
					background: #f2f2f2;
					background: -moz-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f7f7), color-stop(100%, #ededed));
					background: -webkit-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -o-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -ms-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: linear-gradient(to bottom, #f8f7f7 0%, #ededed 100%);

					cursor: pointer;
					
					-webkit-transition: .1s;
					-moz-transition: .1s;
					-o-transition: .1s;
					transition: .1s;
				}
				.modalOverlay .buttons button:hover,
				.modalOverlay .buttons button:focus{
					border: 1px solid #ccc;
					background: #f7f7f7;
					background: -moz-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfafa), color-stop(100%, #f1f1f1));
					background: -webkit-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -o-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -ms-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: linear-gradient(to bottom, #fcfafa 0%, #f1f1f1 100%);
				}
				.modalOverlay .buttons button:active{
					border: 1px solid #bbb;
					background: #ededed;
					background: -moz-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #f8f7f7));
					background: -webkit-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -o-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -ms-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: linear-gradient(to bottom, #ededed 0%, #f8f7f7 100%);
				}
				.modalOverlay .buttons button.focused{
					background: #1eb3f1;
					background: -moz-linear-gradient(top, #29c0f9 0%, #13a4e7 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #29c0f9), color-stop(100%, #13a4e7));
					background: -webkit-linear-gradient(top, #29c0f9 0%, #13a4e7 100%);
					background: -o-linear-gradient(top, #29c0f9 0%, #13a4e7 100%);
					background: -ms-linear-gradient(top, #29c0f9 0%, #13a4e7 100%);
					background: linear-gradient(to bottom, #29c0f9 0%, #13a4e7 100%);
					color: #fff;
					text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
					border: 1px solid #2092de;
				}
				.modalOverlay .buttons button.focused:hover,
				.modalOverlay .buttons button.focused:focus{
					border: 1px solid #1082ce;
					background: #29c6ff;
					background: -moz-linear-gradient(top,  #29c6ff 0%, #1bafee 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#29c6ff), color-stop(100%,#1bafee));
					background: -webkit-linear-gradient(top,  #29c6ff 0%,#1bafee 100%);
					background: -o-linear-gradient(top,  #29c6ff 0%,#1bafee 100%);
					background: -ms-linear-gradient(top,  #29c6ff 0%,#1bafee 100%);
					background: linear-gradient(to bottom,  #29c6ff 0%,#1bafee 100%);
				}
				.modalOverlay .buttons button.focused:active{
					background: #13a4e7;
					background: -moz-linear-gradient(top,  #13a4e7 0%, #29c0f9 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#13a4e7), color-stop(100%,#29c0f9));
					background: -webkit-linear-gradient(top,  #13a4e7 0%,#29c0f9 100%);
					background: -o-linear-gradient(top,  #13a4e7 0%,#29c0f9 100%);
					background: -ms-linear-gradient(top,  #13a4e7 0%,#29c0f9 100%);
					background: linear-gradient(to bottom,  #13a4e7 0%,#29c0f9 100%);
				}
				
				/* .modal .buttons button.focused{
					border: 1px solid #ccc;
					-webkit-box-shadow: 0px 0px 0px 3px #eaeaea;
					box-shadow: 0px 0px 0px 3px #eaeaea;
				}
				.modal .buttons button.main.focused{
					border: 1px solid #1082ce;
				} */
		
		.modalOverlay .properties{
			min-width: 440px;
			max-width: 500px;
		}
		.modalOverlay .properties .content{
			padding: 0 20px;
			margin-bottom: 25px;
		}
		.modalOverlay .properties table{
			width: 100%;
		}
		.modalOverlay .properties table td{
			padding: 8px 0;
			font: 300 16px 'Open Sans',sans-serif;
			overflow: hidden;
		}
		.modalOverlay .properties table td span{
			color: #7897A2;
		}
		.modalOverlay .properties .label{
			width: 30%;
			color: #7897a2;
			padding-right: 10px;
		}
		.modalOverlay .properties .value{
			color: #273f47;
		}
		.modalOverlay .properties hr{
			display: block;
			cursor: default;
			background-color: #e9f2f7;
			border: 0;
			height: 1px;
			margin: 0;
			padding: 0;
		}
		
		.modalOverlay .reportSettings{
			width: 640px;
		}		
			.modalOverlay div.clear{
				float:none;
				clear:both;
				margin-bottom:15px;
			}		
			
			.modalOverlay .reportSettings .description{
				display: none;
			}
			
				.modalOverlay .description textarea{
					width:90%;
					height:200px;
					margin-left:5%;
					border: 1px solid #ddd;
					border-radius:3px;
				}				
				.modalOverlay .description textarea.error{
					display: block;
					text-align:left;
				}				
				.modalOverlay .description span.error{
					margin-left: 35px;
				}
			
			.modalOverlay .reportSettings .reason{
				float: left;
				margin-top: 10px;
				margin-left: 15px;
				padding: 3px;
				background: #f2f2f2;
				background-image: linear-gradient(#fafafa, #eee);
				border: 2px solid #ddd;				
				border-radius: 3px;				
			}
				.modalOverlay .reportSettings .reason label{
					padding-right: 10px;
					box-shadow: inset 1px 0 0 #fff;
					border-right: 1px solid #e5e5e5;
					font-style: normal;
					position: relative;		
					float: left;		
					cursor:pointer;	
				}
				.modalOverlay .reportSettings .reason label.selected{
					color: #1eb3f1;
				}			
				.modalOverlay .reportSettings .reason [for=report_reason_other]{
					box-shadow: none;
				}
				.modalOverlay .reportSettings .reason [for=report_reason_copyright]{
					border-right: none;
				}
				.modalOverlay .reportSettings .reason input[type=radio]{
					display: none;					
				}
				.modalOverlay .reportSettings .reason div.clear{
					margin: 0;
				}			
			.modalOverlay .reportSettings .column{				
				float: left;				
				width: 300px;
				margin-top:15px;			
			}							
			.modalOverlay .reportSettings .row{
				position: relative;
				float: left;
				clear: left;
				width: 100%;
				height: 30px;
			}			
							
				.modalOverlay .reportSettings .row label{
					position: absolute;
					left: 15px;
					line-height: 1em;
					font-style:normal;
				}
				.modalOverlay .reportSettings .row input{
					position: absolute;
					left: 0;
					top: 0;
				}
				
			.modalOverlay .reportSettings .column .row{							
				height: 75px;		
			}	
				.modalOverlay .reportSettings .column .row label{
					top: 0;						
					left: 0;											
				}
				.modalOverlay .reportSettings .column .row span.error{
					position:absolute;
					font-size: 12px;
					top:50px;
					
				}
				.modalOverlay .reportSettings .column .row input.error{
					display: block;
					background:#FCE8EF;
					text-align:left;
				}
				.modalOverlay .reportSettings .column .row input[type=text]{
					position: absolute;
					top: 20px;
					width: 70%;
					padding:3px;
					height: 25px;
					border-radius:2px;
					border:1px solid #ddd;	
				}
			
		.modalOverlay .about p.copyright{
			font-size: 14px;
		}	
		.modalOverlay .about a{
			color: #00A6DC;
			text-decoration: underline;
		}
		
		
		/* .modalOverlay .modal.getMoreSpace{
			max-width: 740px;
		} */
		.modalOverlay .getMoreSpace .upgradeMethod{
			margin-bottom: 30px;
			/* padding-left: 215px;
			background: url(../images/biglogo.png) no-repeat left 8px; */
		}
		.modalOverlay .getMoreSpace .upgradeMethod li{
			padding-left: 50px;
			position: relative;
		}
		.modalOverlay .getMoreSpace .upgradeMethod li > a{
			display: block;
			text-decoration: none;
		}
		.modalOverlay .getMoreSpace .upgradeMethod .buySpace:before{
			content: "";
			display: block;
			width: 39px;
			height: 39px;
			background: url(../images/icons.png) no-repeat -39px -388px;
			position: absolute;
			left: 0;
			top: 7px;
		}
			.modalOverlay .getMoreSpace .upgradeMethod li h4{
				font: 300 22px 'Open Sans', sans-serif;
				color: #01a4e0;
			}
			/* .modalOverlay .getMoreSpace .upgradeMethod li > a:hover h4{
				color: #5fc8f1;
			} */
			.modalOverlay .getMoreSpace .upgradeMethod li p{
				font: 400 14px 'Open Sans', sans-serif;
				color: #354c53;
				margin: 0 0 15px;
				padding: 0;
				text-align: left;
			}
			.modalOverlay .getMoreSpace .upgradeMethod li a{
				color: #01a4e0;
			}
			.modalOverlay .getMoreSpace .upgradeMethod li a:hover{
				color: #5fc8f1;
			}
		.modalOverlay .getMoreSpace .fields{
			margin-bottom: 10px;
		}
		.modalOverlay .getMoreSpace .social{
			text-align: left;
		}
		
		/* .modalOverlay .getMoreSpace .publicLink {
			min-width: 350px;
		} */
		
		.modalOverlay .sharingSettings{
			width: 640px;
		}
			.modalOverlay .sharingSettings .inputFrame{
				position: relative;
				margin-bottom: 15px;
			}
				.modalOverlay .sharingSettings .inputFrame input{
					z-index: 2;
					background: none;
					/* width: 618px; */
					width: 530px;
					height: 20px;
					padding: 10px;
					vertical-align: middle;
					-webkit-border-radius: 3px;
					border-radius: 3px;			
					border: 1px solid #c4d2d7;
					color: #273f47;
					font: 300 16px 'Open Sans', sans-serif;
				}
				
				.modalOverlay .sharingSettings .inputFrame span{
					display: inline-block;
					min-width: 35px;
					font: 400 18px 'Source Sans Pro', 'Open Sans', sans-serif;
					color: #666;
					padding: 9px 20px;
					margin: 0 5px;
					vertical-align: middle;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					border: 1px solid #ddd;
					background: #f2f2f2;
					background: -moz-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f7f7), color-stop(100%, #ededed));
					background: -webkit-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -o-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -ms-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: linear-gradient(to bottom, #f8f7f7 0%, #ededed 100%);

					cursor: pointer;
					
					-webkit-transition: .1s;
					-moz-transition: .1s;
					-o-transition: .1s;
					transition: .1s;
				}
				.modalOverlay .sharingSettings .inputFrame span:focus{
					border: 1px solid #ccc;
					background: #f7f7f7;
					background: -moz-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfafa), color-stop(100%, #f1f1f1));
					background: -webkit-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -o-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -ms-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: linear-gradient(to bottom, #fcfafa 0%, #f1f1f1 100%);
				}
				.modalOverlay .sharingSettings .inputFrame span:active{
					border: 1px solid #bbb;
					background: #ededed;
					background: -moz-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #f8f7f7));
					background: -webkit-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -o-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -ms-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: linear-gradient(to bottom, #ededed 0%, #f8f7f7 100%);
				}
				
				.modalOverlay .sharingSettings .inputFrame .dropDown{
					position: absolute;
					left: 5px;
					right: 5px;
					border-left: 1px solid #c4d2d7;
					border-right: 1px solid #c4d2d7;
					border-bottom: 1px solid #c4d2d7;
					background-color: #f1f6f8;
					min-width: 200px;
					z-index: 200;
				}
					.modalOverlay .sharingSettings .inputFrame .dropDown div{
						height: 30px;
						font: 400 14px/30px 'Open Sans', sans-serif;
						color: #273f47;
						padding: 0 5px;
						cursor: pointer;
					}
					.modalOverlay .sharingSettings .inputFrame div.selected{
						background-color: #c7d2d7;
					}
			
		#sharesList{
			height: 240px;
			margin-bottom: 20px;
		}
			#sharesList .content{
				padding-right: 15px;
			}
				#sharesList .share{
					display: block;
					position: relative;
					vertical-align: middle;
					padding: 10px 0;
					border-bottom: 1px dotted #ccc;
				}
				#sharesList .share.pending{
					opacity:.7;
				}
				#sharesList .share:before{
					content: "";
					display: inline-block;
					width: 40px;
					height: 40px;
					
					vertical-align: middle;
					margin-right: 15px;
					position: relative;
				}
				#sharesList .share.contact:before{
					background: url(../images/icons.png) no-repeat -320px 0;
				}
				#sharesList .share.user:before{
					background: url(../images/icons.png) no-repeat -360px 0;
				}
				#sharesList .share.group:before{
					background: url(../images/icons.png) no-repeat -400px 0;
				}
				@-moz-keyframes newListItem{
					0% { background-color: #fbffd6; }
					100% { background-color: transparent; }
				}
				@-webkit-keyframes newListItem{
					0% { background-color: #fbffd6; }
					100% { background-color: transparent; }
				}
				@-o-keyframes newListItem{
					0% { background-color: #fbffd6; }
					100% { background-color: transparent; }
				}
				@keyframes newListItem{
					0% { background-color: #fbffd6; }
					100% { background-color: transparent; }
				}
				#sharesList .share.new{
					animation: newListItem 1.5s;
					-o-animation: newListItem 1.5s;
					-moz-animation: newListItem 1.5s;
					-webkit-animation: newListItem 1.5s;
				}
					#sharesList .share .name{
						display: inline-block;
						width: 240px;
						vertical-align: middle;
						font: 300 18px/40px 'Open Sans', sans-serif;
						color: #333;
						cursor: default;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					#sharesList .share.pending .name{
						width: 530px;
					}
					#sharesList .share .permissions{
						display: block;
						position: absolute;
						left: 310px;
						top: 15px;
						border: 1px solid #fff;
						padding: 5px 10px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
						font: 400 14px 'Open Sans', sans-serif;
						color: #25c1ef;
						text-overflow: ellipsis;
						-webkit-transition: .2s;
						-moz-transition: .2s;
						-o-transition: .2s;
						transition: .2s;
					}
					#sharesList .share.contact .permissions{
						display: none;
					}
					#sharesList .share .permissions:hover{
						border: 1px solid #e2e8ea;
						-webkit-transition: .1s;
						-moz-transition: .1s;
						-o-transition: .1s;
						transition: .1s;
					}
					#sharesList .share .permissions.open{
						border: 1px solid #c4d2d7;
					}
						#sharesList .share .permissions span{
							display: block;
							font: 400 14px 'Open Sans', sans-serif;
							color: #25c1ef;
							width: 220px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						#sharesList .share .permissions.open span{
							color: #808485;
						}
						#sharesList .share .permissions span.empty{
							color: #b1bcbf;
						}
						#sharesList .share .permissions ul{
							display: none;
							position: absolute;
							top: 29px;
							left: 5px;
							right: 5px;
							border-left: 1px solid #bed2d9;
							border-right: 1px solid #bed2d9;
							border-bottom: 1px solid #bed2d9;
							-webkit-border-radius: 0 0 2px 2px;
							border-radius: 0 0 2px 2px;
							background-color: #fff;
							z-index: 9999;
							padding: 3px;
						}
						#sharesList .share .permissions li{
							display: block;
							position: relative;
							padding: 4px 10px 4px 26px;
							font: 300 14px 'Open Sans',sans-serif;
							color: #273F47;
							cursor: default;
							vertical-align: middle;
							white-space: nowrap;
						}
						#sharesList .share .permissions li:hover{
							background-color: #e2e8ea;
						}
							#sharesList .share .permissions li:before{
								content: "";
								display: block;
								width: 16px;
								height: 16px;
								position: absolute;
								left: 4px;
								top: 5px;
								background-color: #fff;
								border: 1px solid #c4d2d7;
								vertical-align: middle;
								-webkit-border-radius: 3px;
								border-radius: 3px;
							}
							#sharesList .share .permissions li.on:after{
								content: "";
								display: block;
								width: 10px;
								height: 10px;
								left: 8px;
								top: 9px;
								position: absolute;	
								background-color: #0a0;	
								-webkit-border-radius: 2px;
								border-radius: 2px;				
							}
					#sharesList .share .remove{
						display: block;
						position: absolute;
						right: 15px;
						top: 20px;
						width: 18px;
						height: 18px;
						background-color: #fff;
						border: 0;
						border-radius: 3px;
						cursor: pointer;
					}
					/* #sharesList .share:hover .remove{
					}
					#sharesList .share .remove:hover{
					} */
						#sharesList .share .remove:after,
						#sharesList .share .remove:before{
							content: "";
							display: block;
							position: absolute;
							background-color: #ccc;
							width: 14px;
							height: 3px;
							top: 8px;
							left: 2px;
						}
						#sharesList .share .remove:after{
							-moz-transform: rotate(45deg);
							-webkit-transform: rotate(45deg);
							-o-transform: rotate(45deg);
							-ms-transform: rotate(45deg);
							transform: rotate(45deg);
						}
						#sharesList .share .remove:before{
							-moz-transform: rotate(-45deg);
							-webkit-transform: rotate(-45deg);
							-o-transform: rotate(-45deg);
							-ms-transform: rotate(-45deg);
							transform: rotate(-45deg);
						}
						#sharesList .share .remove:hover:after,
						#sharesList .share .remove:hover:before{
							background-color: #999;
						}