.hidden {
	display: none;
}
.red {
    background-image: url('/img/no.png');
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
}
.yellow {
    background-image: url('/img/wip.GIF');
    background-size: auto 70%;
    background-position: right center;
    background-repeat: no-repeat;
}
.green {
    background-image: url('/img/yes.png');
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
}
form {
	display: none;
}

.dropzone {

	-webkit-transition: all .35s ease;
	-moz-transition: all .35s ease;
	-o-transition: all .35s ease;
	transition: all .35s ease;

	width: 700px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	margin-top: 40px;
	overflow: hidden;

	background-image: url('/icons/box.svg');
	background-color: rgba(98, 106, 109, 0.03);
	background-size: auto 75%;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 35px;
	border: 3px dashed rgba(98, 106, 109, 0.06);
}



.smalldropzone {
	background-position: 18% center;
	    background-size: 20% auto;
	    height: 150px;
	    width: 700px;
	    margin-top: 40px;
}
.smalldropzone .more_files {
color: #626a6db3;
}
.more_files {
	position: relative;
	    top: 49px;
	    left: 269px;
	    font-size: 39px;
	    color: #626a6d00;
}

.controls {
	width: 700px;
	display: none;
	margin: 25px auto;
	text-align: center;
  position: relative;
}

/* Rectangle 3 */





.dropzone input[type='file'] {
		position: absolute;
		display: block;
		opacity: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
}
.info {
		position: absolute;
		padding-left: 10px;
		top: 0;
		left: 0;
		z-index: 0;
		color: #EAEAEA;
}
#linktitle {

		width: 700px;
    height: 40px;
		padding: 5px 31px;
    line-height: 40px;
    vertical-align: middle;
    background-color: transparent;
    text-align: left;
		border: 0;
		background: rgba(98, 106, 109, 0.03);
		border-radius: 65px;

}
#linktitle:focus-visible {
	outline: 0;
}
#list {
		list-style: none;
		padding: 0;
}

.item{
	width: 700px;
	    height: 55px;
	    margin: 0 auto;
	    margin-top: 12px;
	    overflow: hidden;
	    position: relative;
	    cursor: pointer;
	    border: 3px #626a6d40 solid;
	    border-radius: 35px;
}

.itemTitle{
		width: 700px;
		height: 50px;
		margin: 0 auto;
		margin-top: 12px;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		border-bottom: 3px rgba(98, 106, 109, 0.16);

}
.groupname {

	line-height: 70px;
	padding-left: 25px;
	overflow: hidden;
	position: absolute;
	width: 100%;

	padding: 5px 31px;

	vertical-align: bottom;
	background-color: transparent;
	text-align: left;
	border: 0;
	display: block;

}

.groupname:focus-visible {
	outline: 0;
}
.itemTitleRemove {
    right: 0;
    position: absolute;
    width: 27px;
    height: 27px;
    background-image: url('/img/no.png');
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;

}
.filelist {
	width: 700px;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 25px;
}

.fileicon {

	height: 100%;

	-moz-mask-image: url(/icons/file_empty.svg);
	-moz-mask-size: auto 65%;
	-moz-mask-position: 6% center;
	-moz-mask-repeat: no-repeat;

	-o-mask-image: url(/icons/file_empty.svg);
	-o-mask-size: auto 65%;
	-o-mask-position: 6% center;
	-o-mask-repeat: no-repeat;

	-ms-mask-image: url(/icons/file_empty.svg);
	-ms-mask-size: auto 65%;
	-ms-mask-position: 6% center;
	-ms-mask-repeat: no-repeat;

	-webkit-mask-image: url(/icons/file_empty.svg);
	-webkit-mask-size: auto 65%;
	-webkit-mask-position: 6% center;
	-webkit-mask-repeat: no-repeat;

			mask-image: url(/icons/file_empty.svg);
	    mask-size: auto 65%;
	    mask-position: 6% center;
	    mask-repeat: no-repeat;



	    background-color: #333;
	    line-height: 55px;
	    padding-left: 121px;
	    overflow: hidden;
	    position: absolute;
	    left: 17px;
}
.filename {

	height: 100%;
  line-height: 56px;
  padding-left: 65px;
  overflow: hidden;
  position: absolute;
}
.filesize {
	height: 100%;
	text-align: right;
	line-height: 56px;
	display: block;
	position: absolute;
	right: 20px;


color: rgba(98, 106, 109, 0.7);


}
.unictitleicon {
	position: absolute;
	top: 8px;
	right: 22px;
	width: 25px;
	height: 25px;

	-moz-mask-size: auto 116%;
	-moz-mask-position: 5% center;
	-moz-mask-repeat: no-repeat;

	-o-mask-size: auto 116%;
	-o-mask-position: 5% center;
	-o-mask-repeat: no-repeat;

	-ms-mask-size: auto 116%;
	-ms-mask-position: 5% center;
	-ms-mask-repeat: no-repeat;

	-webkit-mask-size: auto 116%;
	-webkit-mask-position: 5% center;
	-webkit-mask-repeat: no-repeat;


	mask-size: auto 116%;
	mask-position: 5% center;
	mask-repeat: no-repeat;
}
input.green + .unictitleicon {
	-moz-mask-image: url(/icons/check.svg);
	-o-mask-image: url(/icons/check.svg);
	-ms-mask-image: url(/icons/check.svg);
	-webkit-mask-image: url(/icons/check.svg);

	mask-image: url(/icons/check.svg);
	background-color: #626a6d;
}
input.yellow + .unictitleicon {

}
input.red + .unictitleicon {
	-moz-mask-image: url(/icons/close.svg);
	-o-mask-image: url(/icons/close.svg);
	-ms-mask-image: url(/icons/close.svg);
	-webkit-mask-image: url(/icons/close.svg);

	mask-image: url(/icons/close.svg);
	background-color: #EC6C30;
}

.progressdropzone
{
    text-align: center;
    width: 300px;
    height: 300px;
		background: none;
		border: 0;


}
.progresspercent {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 50;
    font-family: WebExtraBold, sans-serif;
		color: #EC6C30;
}
.progressstatus {
    position: absolute;
    width: 100%;
    height: 27px;
    line-height: 27px;
    vertical-align: middle;
    font-size: 22px;
    text-align: center;
    bottom: 0;
    left: 0;
    border: 0;
    background-color: transparent;
    color: black;

}
.previewbutton {
	position: absolute;
	    right: 15px;
	    width: 200px;
	    height: 50px;
	    line-height: 50px;
	    vertical-align: middle;
	    margin-top: 40px;
	    top: 0;
}
.previewbutton input {
    display: none;
}
#createpreview + label {
	width: 100%;
	    height: 50px;
	    display: block;
	    vertical-align: middle;
	    line-height: 50px;
	    text-align: right;
	    cursor: pointer;
	    color: rgba(98, 106, 109, 0.7);
	    background-image: url('/icons/check_box_blank.svg');
	    background-size: auto 58%;
	    background-position: 5% 47%;
	    background-repeat: no-repeat;

}
#createpreview:checked + label {
    background-image: url('/icons/check_box.svg');
}
#submit:hover {
    color: #ffffff;
    background-color: #ed6d30;

}
#submit {
		margin-top: 35px;
	background-color: #EC6C30;
	color: white;
	/* width: 150px; */
	height: 55px;
	vertical-align: middle;
	line-height: 27px;
	border: 0;
	cursor: pointer;
	border-radius: 100px;
	padding: 0px 33px;



}




.box {
	width: 300px
}
svg {
  width: 250px;
  height: 250px;
  margin: 1em;
}

.bg {
  fill: none;
  stroke-width: 20px;
  stroke: rgba(98, 106, 109, 0.16);;
}

.bar {
	fill: none;
	stroke-width: 22px;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
  stroke-dasharray: 602;
  stroke-dashoffset: 602;
  stroke: #EC6C30;
  animation: 1s ease-out;
}