@import 'iproductvideo/mixins.less';

/* Bootstrap Form Helpers */
@import 'iproductvideo/iproductvideo-variables.less';
@import 'iproductvideo/iproductvideo-mixins.less';
@import 'iproductvideo/iproductvideo-selectbox.less';
@import 'iproductvideo/nprogress.less';

label {
	font-size:14px;
	font-weight: 400;
	margin:5px 0;
	.transition(all ease-in-out 0.1s);
	h3 {
		margin:0 0 10px;
		color:inherit;
	}
	&.next-hidden {
		h3 {
			color:@brand-primary;
		}
	}
	&.checkbox {
		padding-left: 25px;
		input[type="checkbox"] {
			margin-left: -25px;
			margin-right: 5px;
		}
	}
}

table.form {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
table.form > tbody > tr > td:first-child {
	width: 200px;
}
table.form > tbody > tr > td {
	padding: 10px;
	color: #000000;
	border-bottom: 1px dotted #CCCCCC;
}

.required {
	color: #FF0000;
	font-weight: bold;
}

.help {
	color: #666;
	font-size: 11px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
	display: block;
}

.tab-content {
    .box-footer {
        border-top:1px solid #DBDBDB;
        padding:10px 0;
	}
    .box-content {
        border:none;
	}
}

.inline-block {
	display:inline-block;
}

.modal {
	font-size:14px;
	line-height:24px;	
}

.btn {
	outline:none !important;
	font-size: 14px;
}

.form-control,
input[type='text'],
input[type='password'] {
	padding:6px;
	height: 40px;
	font-size: 14px;
	&.toggle-fade-next {
		margin-bottom:10px;
	}
}

hr {
	margin:10px 0 15px;
	border-color:#DBDBDB;
	+ hr {
		margin-top: -15px;
		border-top: 2px solid #DBDBDB;
	}
}

.tab-navigation {
    position: relative;
}

.buttons {
    text-align: right;
    border: 1px solid #DBDBDB;
    padding: 5px;
    margin-bottom: 15px;
}

.tab-buttons {
    position: absolute;
    right: 0;
    top: 0;
}

.box-heading {
	padding: 0;
	background-color: #fff;
	border: none;
	h1 {
	    font-weight: normal;
	    font-size: 18px;
	    color: #454545;
        i {
            font-size: 17px;
            font-weight: normal;
            margin-right: 5px;
        }
    }
}

li {
    line-height: inherit;
}

[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

.box-content {
    padding: 10px;
    border-left: 1px solid #DBDBDB;
    border-right: 1px solid #DBDBDB;
    border-bottom: 1px solid #DBDBDB;
    min-height: 300px;
    overflow: auto;
}

.premium-widget {
    overflow: hidden;
}

.input-append {
	select {
		.border-radius(3px 0 0 3px);
		text-align:center;
		padding:4px;
		line-height:10px;
		appearance:button;
		-moz-appearance:button; /* Firefox */
		-webkit-appearance:button; /* Safari and Chrome */	
	}
}
.store_settings_extra,
.store_settings_toggle {
	width:350px;	
}

.iProductVideo {
	min-width:1230px;
	.tab-content {
	    h3 {
	        font-weight: normal;
	        font-size: 16px;
			+ hr {
				margin-top:0;	
			}
	    }
	}

	.storeTabs {
		margin:30px 0 10px;	
	}
    
    .box {
		.video-upload-info {
            font-size: 12px;
            line-height: 20px;
            color: #6D6D6D;
			display:inline-block;
			vertical-align:middle;
			margin:0 20px;
		}
        span.fileSizeInfo {
            font-size: 12px;
            line-height: 20px;
            color: #6D6D6D;
            background: url("../image/iproductvideo/warningIcon.png") no-repeat left 9px;
            padding: 5px 0 0 17px;
            display: inline-block;
			vertical-align:top;
        }
        a.needMoreSize {
            font-size: 12px;
            text-decoration: none;
            color: #0074B6;
            background: url("../image/iproductvideo/linkIcon.png") no-repeat left 5px;
            padding: 5px 0 0 12px;
            display: inline-block;
            line-height: 20px;
			margin-left:20px;
			vertical-align:top;
        }
        & > .heading {
            h1 {
                width: 680px;
            }
        }
    }
    .video-settings {
        .empty {
            font-size:14px;
            margin-top:10px;
            position:absolute;
        }
        .tab-pane {
            background:#fff;
            position: relative;
        }
        .languageTabs {
        	.disabled {
        		a {
        			color: @gray-dark;
        		}
        	}
        	a > img {
        		display: inline-block;
        		vertical-align: top;
        		margin: 2px -5px 0 10px;
        	}
        }
    }
	.video-list {
        width:350px;
		float:left;
		border:none;
		border-right:1px solid #DBDBDB;
		padding-bottom:20px;
		margin-right:20px;
		margin-bottom:200px;
		+ .tab-content {
			overflow:auto;	
		}
        a {
            > span {
                margin-left: 10px;
            }
        }
        > li {
            position:relative;
			display:block;
			width:101%;
			margin:0 0 2px;
			.transition();
			.removeVideo {
				position:absolute;
				top:50%;
				right:-5px;
				left:auto;
				margin-top:-10px;
				line-height:20px;
				font-size:14px;
				color:#fff;
				.transition(all 0.2s);
				.opacity(0);
			}
			
			&.active {
				z-index:2;
				.box-shadow(0px 10px 15px -10px rgba(0,0,0,.3));
				a {
					color: @brand-primary !important;
					border-color:#DBDBDB transparent #DBDBDB #DBDBDB;
					margin:0;
					font-weight: normal;
				}
			}

			> a {
				margin:0 1px 0 0;
				border-right:none;
				color: @gray-dark !important;
				font-size: 14px;
				line-height: 20px;
				.border-radius(4px 0 0 4px);
			    &.addNewVideo {
			        cursor:pointer;
			        color: @brand-primary !important;
			        i {
			        	font-size: 14px;
						vertical-align: middle;
			        }
			    }
				&:hover,&:focus {
					border-color:darken(#DBDBDB, 5%) transparent darken(#DBDBDB, 5%) darken(#DBDBDB, 5%);
				}
			}
			
			&:hover {
				.removeVideo {
					color:#C00;
					cursor:pointer;
					right:10px;
					.opacity(1);
				}
			}
        }
    }
	
	.scrollbox {
		width:100%;
		border: 1px solid #CCCCCC;
		height: 200px;
		background: #FFFFFF;
		overflow-y: scroll;
		.border-radius();
		div {
			display:inline-block;
			width:100%;
			line-height:25px;
			height:25px;
			white-space:nowrap;
			padding:0 10px;
			position:relative;
			overflow:hidden;
			.box-sizing();
			&:nth-child(odd) {
				&, .removeIcon {
					background:#E4EEF7;	
				}
			}
			&:hover .removeIcon {
				right:20px;
			}
		}
		.removeIcon {
			cursor:pointer;
			color:#C00;	
			margin:0 5px;
			font-size:14px;
			line-height:100%;
			height:15px;
			width:15px;
			position:absolute;
			margin:0;
			padding:0;
			top:5px;
			right:-30px;
			background:white;
			text-align:center;
			.border-radius(3px);
			.transition();
		}
	}
	
	.video-upload {
		padding:0 0 5px;
		position:relative;
		.btn {
			cursor: pointer;
		}
		input[type="file"] {
			position: absolute;
			z-index:99;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background: red;
			cursor: pointer;
			display: block;
			.opacity(0);
			&::-webkit-file-upload-button {
				cursor:pointer;	
			}
		}
		* {
			vertical-align:middle;
			position:relative;
			z-index:1;
		}
		.progress {
			position:absolute;
			bottom:-5px;
			left:0;
			right:0;
			height:5px;
			margin:0;
			z-index:0;
			background:white;
			overflow:visible;
			.opacity(0);
			.transition(all linear 0.2s);
			&.file-added {
				.opacity(1);
			}
			&.file-uploaded:after {
				content:attr(data-status);
				position:absolute;
				font-size:12px;
				line-height:20px;
				display:block;
				bottom:0;
				right:0;
				text-transform:capitalize;	
				color: #0C6;
				text-shadow: 1px 1px 0 #FFF;
				text-transform: capitalize;
			}
			&, .bar {
				.border-radius(3px);
				.transition(all ease-in-out 0.3s);	
			}
		}
		a {
			cursor: pointer;
		}
	}
	
	.video_editor {
		.help {
			margin-top: 5px;
		}
		label {
			display:block;
			cursor: pointer;
			&.checkbox {
				margin-top: 5px;
				input {
					float: left;
				}
				.help {
					margin-top: 10px;
				}
			}
		}

		.form-horizontal .control-label {
			text-align: left;
			h3 {
				margin: 0;
				color: black;
			}
		}

		.btn-add-text {
			position:relative;
			.fa-cog {
				position:relative;
				top:0;
				font-size: 22px;
				line-height: 20px;
				height: 20px;
				display:inline-block;
				vertical-align: middle;
				.transition();
			}
		}
		
		.video_list {
			text-align:center;
			padding:10px;
			overflow:auto;
			margin:0;
			background: white;
			max-height: 280px;
			.video_wrap {
				font-size:0;
				height:auto;
				overflow: visible;
				position:relative;
				height:110px;
				width: 110px;
				margin: 5px;
				background-color: #232323;
				display: inline-block;
				float: left;
				vertical-align: top;
				padding: 3px;
				.box-shadow(inset 0 0 0 3px #181818);
				.border-radius(3px);
				input {
					display: none;
					visibility: hidden;
					&:checked {
						+ .video {
							.box-shadow(~"0 0 0 4px white, 0 0 0 8px @{brand-primary}");
						}
					}
				}
				label {
					margin: 0;
				}
				.video {
					display: block;
					font-size: 0;
					width: 100%;
					vertical-align: top;
					position: relative;
					width: 100%;
					height: 100%;
					.border-radius(3px);
					video {
						position: absolute;
						z-index: 5;
						top: 50%;
						left: 50%;
						max-width: 100%;
						max-height: 100%;
						width: auto;
						height: auto;
						.transform(translate3d(-50%,-50%,0));
					}
					.video_thumb {
						position: absolute;
						z-index: 5;
						top: 50%;
						left: 50%;
						max-width: 100%;
						max-height: 100%;
						width: auto;
						height: auto;
						.transform(translate3d(-50%,-50%,0));
					}
				}
				.btn-delete-video {
					position:absolute;
					top:0;
					right:0;
					width:auto;
					line-height:15px;
					padding:0 5px 1px;
					font-size:10px;
					color:white;
					background:rgba(0,0,0,.7);
					cursor:pointer;
					z-index: 6;
					.border-radius(3px);
					.opacity(0);
					&:hover {
						background:rgba(0,0,0,.9);	
					}
				}	
				.btn-add-video {
					position:absolute;
					top:50%;
					width:80%;
					left: 0;
					margin: -9px 10% 0;
					line-height:18px;
					font-size:12px;
					color:white;
					text-align: center;
					background:rgba(72,166,72,.9);
					cursor:pointer;
					z-index: 6;
					.border-radius(2px);
					.opacity(0);
					&:hover {
						background:rgba(72,166,72,1);	
					}
				}
				&:hover {
					.btn-add-video, .btn-delete-video {
						.opacity(1);
					}	
				}
			}
		}
	}

	.iproductvideo-tab-menu {
		padding:0;
		.btn-group {
			width: 100%;
			display: table;
			table-layout: fixed;
			> label {
				border:1px solid #DBDBDB;
				padding-left: 0;
				padding-right: 0;
				margin-left: 0;
				white-space: normal;
				display: table-cell;
				float: none;
				font-size: 14px;
				.border-radius(3px);
				+ label {
					border-left: 0;
					.border-radius(0);	
				}
				&:first-child {
					.border-radius(3px 0 0 0);	
				}
				&:last-child {
					.border-radius(0 3px 0 0);	
				}
				&.active {
					border-bottom-color:#f7f7f7;
					background: #f7f7f7;
					.box-shadow(none);
				}
			}
		}
	}
	.iproductvideo-tab-container {
		margin-bottom: 20px;
		.iproductvideo-tab-content{
			&:not(.active) {
				display:none;
			}
			.btn-group {
				.btn {
					width: 25%;
				}
			}
			.form-group {
				margin-bottom: 0;
			}
		}
		.iproductvideo-tab {
			padding: 10px 15px;
			border:1px solid #dbdbdb;
			border-top:none;
			background:#f7f7f7;
			margin-bottom:10px;
			.border-radius(0 0 3px 3px);
		}
	}

	.tooltip-inner {
		max-width: 420px;
		text-align: left;
	}

	.tooltip-inner {
		max-width: 420px;
		text-align: left;
	}

	.form-control-xs {
		padding: 0 10px;
		height: 30px;
	}
}

#google-webfonts-modal {
	.modal-footer {
		margin-top:0;
		.fa-spinner {
			font-size:24px;
			vertical-align:middle;
			color:#666;
			.opacity(0);
			.transition();
			&.active {
				.opacity(1);	
			}
		}
		.alert-success {
			margin: 0;
			position: absolute;
			bottom: 18px;
			right: 20px;
			padding: 6px 10px;
			visibility:hidden;
			.opacity(0);
			.transition();
			&.active {
				visibility:visible;
				.opacity(1);	
			}	
		}
	}
}

/* Support tab */
#tab_Support {
	h3 {
		font-size: 22px;
	}
}

.notLicensedTable,
.licensedTable {
	table-layout: fixed;
}

.notLicensedTable .form-group,
.licensedTable .form-group {
	margin-bottom: 15px;
}

.notLicensedTable ul,
.licensedTable ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.notLicensedTable tr > td {
	padding: 10px 0;
}

.box-content {
	padding: 10px;
	border: 1px solid #DBDBDB;
	min-height: 300px;
	overflow: auto;
}

.notLicensedTable .small-link {
	font-size: 12px;
}

.thumbnail {
	margin: 15px 0;
}

.widgetPositionOpenCart {
	float: left;
	min-width: 120px;
}

.widgetPositionOpenCart label {
	font-weight: bold;
}

.widgetPositionOpenCart input[type="radio"] {
	margin-top: 0;
}

.widgetPositionOpenCart img {
	border: 1px solid #ddd;
}

div.checkbox {
	margin-left: 20px;
}

.input-group[class*=col-] {
	padding-left: 15px;
	padding-right: 15px;
}

.cke * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: content-box;
}

.notificationMessageTabs {
	margin: 20px 0;
}

input[type='text'],
input[type='password'] {
	padding: 6px 12px;
}

.panel-heading {
	position: relative;
	padding: 15px;
}

.panel-heading img {
	vertical-align:top;
	margin-right:10px;
}

.sd-widget-design .form-group {
	margin-bottom: 0;
}

.sd-widget-design .control-label {
	min-width: 90px;
	margin-top: 14px;
}

.sd-widget-design .input-group {
	max-width: 150px;
	margin-bottom: 8px;
}

html[dir="rtl"] .pull-right {
  float: left !important;
}
html[dir=rtl] .tab-buttons {
  right: auto;
  left: 0;
}