//Import all vars
@import 'vars';

/**
* Media View
*/
.attachments-browser.envira-videos {

	/**
	* Router Bar
	*/
	div.media-toolbar {
		div.media-toolbar-primary {
			button.envira-videos-add {
				float: right;
				margin-top: 10px;
			}
		}
	}

	/**
	* Videos
	*/
	ul.envira-videos-attachments {

		top: 70px;
		padding: 2px 20px 20px;

		/**
		* Video
		*/
		li.envira-videos-attachment {
			width: 100%;
			background-color: $wp-grey;
			border: 1px solid $light-grey;
			padding: 20px;
			margin-bottom: 2em;
			padding-top: 2em;

			label {
				margin-bottom: 5px;
				margin-top: 10px;
				width:  100%;
				display: table;
				text-align: left;
			}

			input[type=text],
			textarea {
				width: 100%;
				clear: both;
			}
 			div {
				/* clear: both;
				width: 100%;
				margin-bottom: 1em;
				text-align: left !important; */

				&.image {
					display: none;
				}

				/* label {
					clear: both;
					width: 100%;
					text-align: left;

					strong {
						float: left;
						text-align: left;
					}
				}
				input {
					clear: both;
					width: 100%;
				}  */
			}
		}
	}

	/**
	* Sidebar
	*/
	.envira-gallery-accepted-urls {
		clear: both;

		span {
			display: block;
		}
	}
}

[class*=envira-grid-] {
	float: left;
	margin-left: 2%;
}
.envira-grid-1{ width: 6.5%; }
.envira-grid-2{ width: 15%; }
.envira-grid-3{ width: 23.5%; }
.envira-grid-4{ width: 32% }
.envira-grid-5{ width: 40.5% }
.envira-grid-6{ width: 49% }
.envira-grid-7{ width: 57.5% }
.envira-grid-8{ width: 66% }
.envira-grid-9{ width: 74.5% }
.envira-grid-10{ width: 83% }
.envira-grid-11{ width: 91.5% }
.envira-grid-12{ width: 100%; }

.envira-input-group{
	input[type=text],
	textarea {
		width: 87%;
		clear: both;
	}
}

.button-envira{
	background: $primary-color;
	border-color: $primary-color;
	-webkit-box-shadow:none;
	box-shadow: none;
	color: $white;
	text-decoration: none;
	font-weight: 500;
	text-shadow: none;
	line-height: 15px;
	height: $input-height;
	font-size: 13px;
	padding: 0 20px 1px;
	&:hover{
		background: $primary-color;
		border-color: $primary-color;
		color: $white;
		opacity: .8;
	}
}
.button-envira-secondary{
	background: $almost-white;
	border: 1px solid;
	border-color: $light-grey;
	-webkit-box-shadow:none;
	box-shadow: none;
	color: $dark;
	text-decoration: none;
	text-shadow: none;
	font-weight: bold;
	height: $input-height;
	font-size: 13px;
	padding: 0 20px 1px;
	&:hover{
		background: $almost-white;
		border-color: $mid-grey;
		color: $dark;
	}

}
.button-envira-delete{
	background: $red;
	border: 1px solid;
	border-color: $red;
	-webkit-box-shadow:none;
	box-shadow: none;
	color: $white;
	text-decoration: none;
	text-shadow: none;
	font-weight: bold;
	height: 35px;
	font-size: 13px;
	padding: 0 20px 1px;
	&:hover{
		background: $red;
		color: $white;
		opacity: .8;
		
	}

}
a.button-envira,
a.button-envira-secondary,
a.button-envira-delete{
	line-height: 32px;
}

div.header-links {
	position: absolute;
	top:  10px;
	right: 20px;
}
div.header-links a {
	display: inline-block;
	margin-left: 10px;
}
a.envira-item-collapse{
	top: 10px;
	right: 20px;
	font-size: 13px;
	color: black;
	font-weight: 600;
	text-decoration: none
}
a.button-envira-delete {
	color: $red;
	text-decoration: none;
	font-weight: 800;
}
.envira-item-setting  {
	clear: both;
	text-align: left !important;
	margin-bottom: 15px;
	.code-title{
		text-align: left !important;
	}
	label {
		clear: both;
		width: 100%;
		text-align: left;

		strong {
			text-align: left;
		}
	}
	.envira-media-button{
		a{
			float: right;
			clear: both;
		}
	}
	input[type=text],
	textarea {
		width: 100%;
		clear: both;
	}
	.envira-input-group{
		input[type=text],
		textarea {
			width: 87%;
			clear: both;
		}
	}
}
.envira-item-footer{
	display: block;
	margin-top: 20px;
	a{
		float: right;

	}
}



.envira-first{
	margin-left: 0px;
}

.envira-addons input[name='video_thumbnail_id'] {
	display: none !important;
}