#nbt-order-upload .btn{
	width: 30px;
	height: 30px;
}

.file-upload {
	position: relative;
	display:block;	
	width:150px;
	height:150px;
	border-radius: 3px;
	background-color:rgba(0,0,0,0.3);
	font-size: 14px;
	color:white;
	text-align: center; 
	line-height: 150px;

	input {
		opacity: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		cursor: pointer;
	}
}
.file-preview {
	img {
		width:100%;
		height: auto;
	}

	.ibenic_file_preview {
		position: absolute;
		width:100%;
		height:100%;
		overflow: hidden;
	}

	.ibenic_file_delete {
		position: absolute;
		width: 100%;
		top:98%;
		left:0;
		padding:0.5em;
		text-align: center;
		color:white;
		background-color:red;
	}
}

/* Start CSS */
.nbt-upload-zone{
	position: relative;
	overflow: hidden;
	
	.nbt-oupload-target {
		border: 3px dashed #607D8B;
		text-align: center;
		padding: 25px;
		border-radius: 2px;
		color: #455A64;
		font-size: 14px;
		-webkit-transition: background .15s linear,border .15s linear,color .15s linear,opacity .15s linear;
		transition: background .15s linear,border .15s linear,color .15s linear,opacity .15s linear;
		background: #fff;
		cursor: pointer;
	}
}

.nbt-upload-zone:hover .nbt-oupload-target, .nbt-upload-zone.dragover .nbt-oupload-target{
	background: #CFD8DC;
	border-color: #546E7A;
	color: #263238;
}
.nbt-upload-input {
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1px;
	opacity: 0;
	pointer-events: none;
	background: #fff;
	border: 1px solid #455a64;
	border-radius: 2px;
	color: #455a64;
	font-size: 16px;
}
.nbt-oupload-header{
	background: #efefef;
	height: 35px;
}
.nbt-oupload-body{
	border-bottom: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
}
.nbt-file{
	padding: 5px 6px;
	background-color: #fff;
	position: relative;
	border-top: 1px solid #dddddd;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.nbt-file:before, .nbt-file:after {
	content: " ";
	display: table;
}
.nbt-file:after {
	clear: both;
}
.nbt-oupload-output{
	margin: 30px 0;
}
.nbt-file-left{
	background: #dcdbdb;
	float: left;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border: 1px solid #dcdbdb;
}
.nbt-file-left.file-icon {
    background: transparent;
    border: none;
}
.nbt-file-right{
	float: left;
	width: 100%;
	width: -webkit-calc(100% - 50px);
	width: -moz-calc(100% - 50px);
	width: calc(100% - 50px);
	padding-left: 10px;
}
.nbt-file-right .name {
	padding: 5px 30px 3px 0px;
	font-weight: 500;
	font-size: 13px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.nbt-file-right .size {
	font-size: 10px;
	color: #999999;
	padding: 0 30px 0px 0px;
}
#nbt-order-upload .progress {
	margin-bottom: 0;
	display: none;
	height: 10px;
	border-radius: 0;
}
.nbt-icon-cancel{
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 6px;
    background: #d21919;
    width: 22px;
    height: 19px;
    display: inline-block;
    line-height: 19px;
    text-align: center;
    font-size: 12px;
}
.nbt-icon-cancel:hover{
	background: #bf3232;
	color: #fff;
}
.nbt-icon-cancel:before {
    margin: 0;
}
.nbt-file.error{
    border-top: 1px solid #d8a8a8;
    background: #fde3e3;
}
.nbt-file.success{
    border-top: 1px solid #8dca9d;
    background: #ecfeda;
}
.nbt-ou-msg{
	font-size: 11px;
    border: 1px solid #b55656;
    overflow: hidden;
    display: block;
    width: 100%;
    background: #e69090;
    padding: 1px 3px;
    margin-top: 3px;
}
.nbt-show-files{
	margin-bottom: 5px;
	
	.toggle-order-upload {
		font-size: 13px !important;
		cursor: pointer;
		text-transform: inherit !important;
		
		i {
			top: 1px;
			position: relative;
			left: -2px;
		}
		
		&.active {
			.nbt-icon-down-open:before {
				content: '\e80e';
			}
		}
	}
	
	ul {
		display: none;
		margin: 0;
		padding: 0;
		list-style: none;
        background: #f9f9f9;
		
		> a {
			display: none;
		}
		
		li {
			min-width: 210px;
			border-bottom: 1px dashed #d4d4d4;
			padding: 7px 0;
			color: #757575 !important;
			font-size: 13px !important;
			list-style: none !important;

			&:first-child {
				border-top: 1px solid #d4d4d4 !important;
			}
			
			&:last-child {
				border-bottom: 1px solid #d4d4d4 !important;
			}
			
			&:after,
			&:before {
				content: ' ';
				display: table;
			}
			
			&:after{
				clear: both;
			}
			
			.left-files{
				float: left;
				width: 35px;
				
				img {
				    height: 35px;
					width: 35px;
					border: 1px solid #ccc;
				}
			}
			
			.right-files {
				float: right;
				width: calc(100% - 35px);
				padding-left: 10px;
				white-space: nowrap;
				line-height: 16px;
				
				h4 {
					margin: 0 0 3px 0;
					padding: 0;
					list-style: none;
					font-size: 12px;
					font-weight: 600;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				p {
					font-size: 12px;
					margin: 0;
					color: #444;
					line-height: 16px;
				}
			}
		}
	}
}



.product-name {
  width: 50%; }

	.btn-upload-fast{
	    padding: 5px 13px !important;
    color: #fff;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
	background: #272727;
    white-space: nowrap;
	}
	td.product-name .nbt-ou-fast a, .product-name .nbt-ou-fast a:hover{
		color: #fff !important;
		text-transform: inherit !important;
	}
	#nbt-order-page{
	    width: 50%;
		margin: 0 auto 45px auto;
	}
		.nbtou-forward{
	text-align: right;
	}
	.nbtou-forward a{
	color: #fff;
	}
	.nbtou-forward a:hover,
	.nbtou-forward a:focus{
		color: #fff;
	}
	.nbtou-forward a.btn-ou-checkout{
	display: inline-block;
	margin-left: 15px;
	}

.sp-ou-meta {

	border-top: 1px solid #d6d6d6;
    padding-top: 25px;

	.sp-ou-title {
		text-transform: uppercase;
		color: #444;
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 5px;
	}

	.sp-ou-title {
		color: #666;
	}
}

.ou-tab {

		display: flex;
		flex-wrap: nowrap;
		margin-left: -5px;
		margin-right: -5px;
		margin-bottom: 20px;

		@media (max-width: 575px) {
			flex-direction: column;
			margin-left: 0;
			margin-right: 0;
		}
		
      	.tablinks {
			
			width: 50%;
			display: inline-block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin: 0 5px;
			border-radius: 5px;
			transition: all .3s ease-in-out;
			background-color: #eeeeee;
			border-color: #eeeeee;
			color: #333333;
			padding: 10px;
			border: 0;

			@media (max-width: 575px) {
				width: 100%;
				margin: 0;

				&:first-child {
					margin-bottom: 10px;
				}
			}

			&:hover {
				background-color: #d5d5d5;
			}

			&.activated {
				background-color: #d5d5d5;
				border-color: #d5d5d5;
				color: #fff;
			}
      	}
}

.ou-tabcontent {

	#from_online_services {

		margin-left: -5px;
		margin-right: -5px;
		display: none;

		.list_online_services {

			display: flex;
			flex-wrap: nowrap;
			width: 100%;
			
			a {

				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 5px;
				transition: all .3s ease-in-out;
				background-color: transparent;
				border: 0;				
    			width: 33.3333%;
				
				img {
					padding: 6px;
					width: 40px;
					height: 40px;
					border: solid 1px #bababa;
					filter: grayscale(100%);
					opacity: 0.5;
					transition: all .3s ease-in-out;
					border-radius: 5px;
					
				}

				&:hover{

					img {
						filter: grayscale(0%);
    					opacity: 1;
					}
				}
				
				span {
					padding: 0 5px;
					display: inline-block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #999;
					text-transform: capitalize;
					font-size: 14px;
				}

				&.dropbox {

					&:hover {

						img {
							border-color: #1587ea;
						}
					}
				}

				&.box {

					&:hover {

						img {
							border-color: #0482c7;
						}
					}
				}

				&.g-drive {

					&:hover {

						img {
							border-color: #15a764;
						}
					}
				}
			}
		}
	}

	#from_u_computer {
		display: block;
	}

}

#from_online_services #g-drive-popup-wrap {
	display: none;
}
#TB_ajaxContent #g-drive-popup-wrap {
	display: block;
}
#g-drive-popup {
	padding: 40px;
	color: #000;
}
.g-drive-api-key-main {
	display: flex;
    align-items: center;
}
.key-icon {
	float: left;
}
.key-icon:before {
    font-family: fontAwesome;
    content: '\f084';
    font-size: 70px;
    display: block;
    color: #000;
}
.g-drive-api-key-content {
	margin-left: 25px;

	h3 {
		font-weight: 600;
	}

	a {
		text-decoration: underline;
	}
}


.progress {
	display: none;
}

.white-popup {
  position: relative;
  background: #FFF;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
  transition: 1s all;
  z-index: 9991;
}

.nbt-ou-fast {
	button {
		white-space: nowrap;
	}
}
.mfp-bg {    z-index: 9999;}

.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}


/* overlay animate in */

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}


/* overlay animate out */

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.4s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
.mfp-wrap{
    z-index: 9999;
}
#nbt-orderupload-popup {
    padding: 15px 20px;
	
	h2 {
		font-size: 16px;
		font-weight: 700;
	}
}

.nbt-icon-cancel:before {
    top: 3px;
    position: absolute;
    width: auto;
    right: 6px;
}