/* http://www.only-zuul.com/ahexcolor.htm */
.justified { text-align: justify }
.centered { text-align: center }
a:hover  { color: aqua }
a:active  { color: aqua }
a:link     { color: aqua }
a:visited      { color: aqua }

li  { color: #7dff7d; font-size: small; font-family: source-code-pro,monospace; font-weight: 400; font-style: normal; }
ul { list-style-type: circle}

.dtitle { color: #7dff7d; font-size: large; font-family: source-code-pro,monospace;}
p     { color: #7dff7d; font-size: medium; font-family: font-family: source-code-pro,monospace; }
h1     { color: #7dff7d; font-size: x-large; font-family: source-code-pro,monospace; }
h2     { color: #7dff7d; font-size: large; font-family: source-code-pro,monospace; }
.biggy { color: #7dff7d; font-size: large !important; font-family: source-code-pro,monospace; }

body      {
 background: #000500;
  font-family: source-code-pro,monospace;
 color: #7dff7d;
/* background-image: url('images/dark-metal-grid-1.jpg'); */
 }
hr { display: block; height: 3px; border: 3px solid #7dff7d; margin: 1em 0; padding: 0; color: #7dff7d; background-color: #7dff7d }
 
.notices       { color: #e0ffff; font-size: small; font-family: source-code-pro,monospace; text-align: center }


.circle
{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 10pt;
	color: #00FFFF;
	line-height: 18px;
	text-align: center;
	background-color: #004444;
	padding: 4px;
}

.floatright
{
	float: right;
}
.floatleft
{
	float: left;
}

.circlebright
{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 10pt;
	color: #00FFFF;
	line-height: 18px;
	text-align: center;
	background-color: #008888;
	padding: 4px;
}

table
{
	color:#7dff7d;
	border: 1px solid #7dff7d;
	border-collapse: collapse;
}
table td
{
	border: 1px solid #7dff7d;
	font-size: medium;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #7dff7d;
}

/*tbody tr:hover {background-color: #004400;
tbody tr {background-color: #000000; }
/*tbody tr:nth-child(even) {
  background-color: #002200;
} */

table.noborder
{
	background: black;
	color: #7dff7d;
	border: 1px solid #7dff7d;
	border-collapse: separate;

}

table.noborder td
{
	border: 1px dashed #115511;
	font-size: medium;
	font-family: source-code-pro, monospace;
	padding: 5px;
	color: #7dff7d;
	
}

table.noborder thead td
{
	font-weight: bold;
}

table.noborder tbody tr
{
	background-color: #000000;
}

table.noborder tbody tr:nth-child(odd) 
{
 	background-color: #002200; 
}
table.noborder tbody tr:hover
{
	background-color: #005500;
}

table.orange
{
	background: black;
	color: #FFA500;
}

table.orange td
{

	border: 1px solid #FFA500;
	background-color: black;
	font-size: small;
	font-family: font-family: source-code-pro,monospace;
	padding: 2px;
	color: #FFA500;

}

h2.orange     { color: #FFA500; font-size: large; font-family: source-code-pro,monospace; }
h2.orangecenter {text-align:center; color: #FFA500; font-size: large; font-family: source-code-pro,monospace; }
h2.sandycenter {text-align:center; color: #F4A460; font-size: large; font-family: source-code-pro,monospace; }

table.yellow
{
	background: black;
	color: #ffff00;
}

table.yellow td
{

	border: 1px solid #ffff00;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #ffff00;

}

h2.yellow     { color: #ffff00; font-size: large; font-family: source-code-pro,monospace; }
h2.white		   { color: #FFFFFF; font-size: large; font-family: source-code-pro, monospace; }
h2.neongreen  { color: #00FF00; font-size: large; font-family: source-code-pro, monospace; }


table.cyan
{
	background: black;
	color:aqua;
	border: 1px solid aqua;
	border-collapse: separate;
}

table.cyan td
{

	border: 1px dashed #005555;
	font-size: small;
	font-family: source-code-pro,monospace;
	padding: 2px;
	color: aqua;

}

table.cyan tbody tr:hover
{
	background-color: #003333;
}

table.cyan thead td
{
	font-weight: bold;
}

h2.cyan     { color: aqua; font-size: large; font-family: source-code-pro,monospace; }


table.red
{
	background: black;
	color:red;
	border: 1px solid red;
	border-collapse: separate;
}

table.red td
{

	border: 1px dashed #770000;
	font-size: small;
	font-family: source-code-pro,monospace;
	padding: 2px;
	color: red;

}
table.red tbody tr:nth-child(odd) 
{
 	background-color: #110000; 
}
table.red tbody tr:hover
{
	background-color: #330000;
}


h2.red     { color: red; font-size: large; font-family: source-code-pro,monospace; }


table.blue
{
	background: black;
	color:blue;
}

table.blue td
{

	border: 1px solid blue;
	background-color: black;
	font-size: small;
	font-family: source-code-pro,monospace;
	padding: 2px;
	color: blue;

}

table.dgreen
{
	background: black;
	color:#00BB00;
}

table.dgreen td
{

	border: 1px solid #00BB00;
	background-color: black;
	font-size: small;
	font-family: source-code-pro,monospace;
	padding: 2px;
	color: #00BB00;

}

table.bgreen
{
	background: black;
	color:#AAFFAA;
}

table.bgreen td
{

	border: 1px solid #AAFFAA;
	background-color: black;
	font-size: small;
	font-family: source-code-pro,monospace;
	padding: 2px;
	color: #AAFFAA;

}


table.fuchsia
{
	background: black;
	color:#FF00FF;
}

h2.fuchsia     { color: #FF00FF; font-size: large; font-family: source-code-pro,monospace; }

table.fuchsia td
{

	border: 1px solid #FF00FF;
	background-color: black;
	font-size: small;
	font-family: source-code-pro,monospace;
	padding: 2px;
	color: #FF00FF;

}

table.purple
{
	background: black;
	color:#800080;
}

table.purple td
{

	border: 1px solid #800080;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #800080;

}

table.green2
{
	background: black;
	color:#7FFF00;
}

table.green2 td
{

	border: 1px solid #7FFF00;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #7FFF00;

}


table.bblue
{
	background: black;
	color:#4169E1;
}

table.bblue td
{

	border: 1px solid #4169E1;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #4169E1;

}

table.white
{
	background: black;
	color:white;
}

table.white td
{

	border: 1px solid white;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: white;

}

table.gold
{
	background: black;
	color:#FFD700;
	border: 1px solid #ffd700;
	border-collapse: separate;
}

table.gold td
{

	border: 1px solid #FFD700;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #FFD700;

}

table.lyellow
{
	background: black;
	color:#FAFAD2;
}

table.lyellow td
{

	border: 1px solid #FAFAD2;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #FAFAD2;

}

table.orchid
{
	background: black;
	color:#DA70D6;
}

table.orchid td
{

	border: 1px solid #DA70D6;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #DA70D6;

}

table.sandy
{
	background: black;
	color:#F4A460;
}

table.sandy td
{

	border: 1px solid #F4A460;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #F4A460;

}

table.g2
{
	background: black;
	color: #a7f149;
}
table.g2 td
{
	border: 1px solid #a7f149;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #a7f149;
}

table.y2
{
	background: black;
	color: #ceb642;
}
table.y2 td
{
	border: 1px solid #ceb642;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
	color: #ceb642;
}

td.two
{
	border: none;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 0px;
	vertical-align: middle;
}

td.four
{
	border: none;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 0px;
	vertical-align: top;
}


td.three
{
	border: 3px double;
	border-color: #7dff7d;
	background-color: black;
	font-size: small;
	font-family: source-code-pro,monospace;
	padding: 2px;
}

td.orange
{
	border: 1px solid #FFA500;
	background-color: black;
	font-size: small;
	font-family: source-code-pro, monospace;
	padding: 2px;
}

.tableone
{
	background: rgba(255,255,255,0.5);
	color: #7dff7d;
}
span.dropt {border-bottom: none; border-color:red; background: #000000;}
span.dropt:hover {text-decoration: none; background: #000000; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:double; border-color:#7dff7d; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: #000000;} 
span.dropt span {position: absolute; left: -9999px;
  margin: 5px 5px 5px 5px; padding: 3px 3px 3px 3px; 
  border-style:double; border-color:#7dff7d; border-width:4px;}
span.dropt:hover span {margin: 20px 5px 5px 170px; background: #000000; z-index:6; font-size: small} 


span.dropr {border-bottom: none; border-color: #7dff7d; background: #000000;}
span.dropr:hover {text-decoration: none; background: #000000; z-index: 6; }
span.dropr span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:double; border-color:#7dff7d; border-width:1px; z-index: 6;}
span.dropr:hover span {left: 2%; background: #000000;} 
span.dropr span {position: absolute; left: -9999px;
  margin: 5px 5px 5px 5px; padding: 3px 3px 3px 3px; 
  border-style:double; border-color:#7dff7d; border-width:4px;}
span.dropr:hover span {margin: 20px 5px 5px 750px; background: #000000; z-index:6; font-size: small} 


#submitselect {
 color: black;
 font-size: 12;
 font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #7dff7d url(images/button-back-selected.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;

}

#submitgreen {
 color: black;
 font-size: 12;
font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #00FF00 url(images/button-back.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}

#submitred {
 color: black;
 font-size: 12;
font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #FF0000 url(images/button-back-red.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}

#submitcyan {
 color: black;
 font-size: 12;
font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #7dff7d url(images/button-back-cyan.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}

#submityellow {
 color: black;
 font-size: 12;
font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #7dff7d url(images/button-back-selected.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}

#submitorange {
 color: black;
 font-size: 12;
font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #7dff7d url(images/button-back-orange.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}

#submitmagenta {
 color: black;
 font-size: 12;
font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #7dff7d url(images/button-back-magenta.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}

#submitdgreen {
 color: black;
 font-size: 12;
font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #7dff7d url(images/button-back-dgreen.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}

#submitbgreen {
 color: black;
 font-size: 12;
 font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #7dff7d url(images/button-back-bgreen.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}

#submitrblue {
 color: white;
 font-size: 12;
font-family: source-code-pro, monospace;
 width: 92px;
 height: 18px;
 border: none;
 margin: 0;
 padding: 0;
 background: #7dff7d url(images/button-back-royalblue.png) 0 0 no-repeat; 
 	-moz-box-shadow: 0px 0px 0px 0px #8a2a21;
	-webkit-box-shadow: 0px 0px 0px 0px #8a2a21;
	box-shadow: 0px 0px 0px 0px #8a2a21;
}


#tview {
	position: fixed;
	margin-top: -300px;
	background-image: url('images/dark-metal-grid-1.jpg');
	width: 100%;
}

#fview {
	position: fixed;
	margin-bottom: -200px;
	background-image: url('images/dark-metal-grid-1.jpg');
	width: 100%;	
}

#mview
{
	margin-top: 300px;
}

/*upload*/
.container{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    vertical-align: middle;
}

.upload-area{
    width: 100%;
    height: 100%;
    border: 2px solid #fbc104;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 0px;
    text-align: center;
    overflow: auto;
}

.upload-area:hover{
    cursor: pointer;
}

.upload-area h1{
    text-align: center;
    font-weight: normal;
    font-family: source-code-pro, monospace;
    font-size: 18;
    color: #00FF00;
}

#file{
    display: none;
}

/* Thumbnail */
.thumbnail{
    width: 128px;
    height: 128px;
    padding: 2px;
    border: 2px solid #997000;
    border-radius: 3px;
    float: left;
    margin: 3px;
}

.size{
    font-size:9px;
}

/* Dropzone */

@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.dropzone, .dropzone * {
  box-sizing: border-box; }

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: black;
  padding: 20px 20px; }
  .dropzone.dz-clickable {
    cursor: pointer; }
    .dropzone.dz-clickable * {
      cursor: default; }
    .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
      cursor: pointer; }
  .dropzone.dz-started .dz-message {
    display: none; }
  .dropzone.dz-drag-hover {
    border-style: solid; }
    .dropzone.dz-drag-hover .dz-message {
      opacity: 0.5; }
  .dropzone .dz-message {
    text-align: center;
    margin: 2em 0; }
  .dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px; }
    .dropzone .dz-preview:hover {
      z-index: 1000; }
      .dropzone .dz-preview:hover .dz-details {
        opacity: 1; }
    .dropzone .dz-preview.dz-file-preview .dz-image {
      border-radius: 20px;
      background: #999;
      background: linear-gradient(to bottom, #eee, #ddd); }
    .dropzone .dz-preview.dz-file-preview .dz-details {
      opacity: 1; }
    .dropzone .dz-preview.dz-image-preview {
      background: white; }
      .dropzone .dz-preview.dz-image-preview .dz-details {
        -webkit-transition: opacity 0.2s linear;
        -moz-transition: opacity 0.2s linear;
        -ms-transition: opacity 0.2s linear;
        -o-transition: opacity 0.2s linear;
        transition: opacity 0.2s linear; }
    .dropzone .dz-preview .dz-remove {
      font-size: 14px;
      text-align: center;
      display: block;
      cursor: pointer;
      border: none; }
      .dropzone .dz-preview .dz-remove:hover {
        text-decoration: underline; }
    .dropzone .dz-preview:hover .dz-details {
      opacity: 1; }
    .dropzone .dz-preview .dz-details {
      z-index: 20;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      font-size: 13px;
      min-width: 100%;
      max-width: 100%;
      padding: 2em 1em;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
      line-height: 150%; }
      .dropzone .dz-preview .dz-details .dz-size {
        margin-bottom: 1em;
        font-size: 16px; }
      .dropzone .dz-preview .dz-details .dz-filename {
        white-space: nowrap; }
        .dropzone .dz-preview .dz-details .dz-filename:hover span {
          border: 1px solid rgba(200, 200, 200, 0.8);
          background-color: rgba(255, 255, 255, 0.8); }
        .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
          overflow: hidden;
          text-overflow: ellipsis; }
          .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
            border: 1px solid transparent; }
      .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
        background-color: rgba(255, 255, 255, 0.4);
        padding: 0 0.4em;
        border-radius: 3px; }
    .dropzone .dz-preview:hover .dz-image img {
      -webkit-transform: scale(1.05, 1.05);
      -moz-transform: scale(1.05, 1.05);
      -ms-transform: scale(1.05, 1.05);
      -o-transform: scale(1.05, 1.05);
      transform: scale(1.05, 1.05);
      -webkit-filter: blur(8px);
      filter: blur(8px); }
    .dropzone .dz-preview .dz-image {
      border-radius: 20px;
      overflow: hidden;
      width: 120px;
      height: 120px;
      position: relative;
      display: block;
      z-index: 10; }
      .dropzone .dz-preview .dz-image img {
        display: block; }
    .dropzone .dz-preview.dz-success .dz-success-mark {
      -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
    .dropzone .dz-preview.dz-error .dz-error-mark {
      opacity: 1;
      -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
      pointer-events: none;
      opacity: 0;
      z-index: 500;
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      margin-left: -27px;
      margin-top: -27px; }
      .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
        display: block;
        width: 54px;
        height: 54px; }
    .dropzone .dz-preview.dz-processing .dz-progress {
      opacity: 1;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear; }
    .dropzone .dz-preview.dz-complete .dz-progress {
      opacity: 0;
      -webkit-transition: opacity 0.4s ease-in;
      -moz-transition: opacity 0.4s ease-in;
      -ms-transition: opacity 0.4s ease-in;
      -o-transition: opacity 0.4s ease-in;
      transition: opacity 0.4s ease-in; }
    .dropzone .dz-preview:not(.dz-processing) .dz-progress {
      -webkit-animation: pulse 6s ease infinite;
      -moz-animation: pulse 6s ease infinite;
      -ms-animation: pulse 6s ease infinite;
      -o-animation: pulse 6s ease infinite;
      animation: pulse 6s ease infinite; }
    .dropzone .dz-preview .dz-progress {
      opacity: 1;
      z-index: 1000;
      pointer-events: none;
      position: absolute;
      height: 16px;
      left: 50%;
      top: 50%;
      margin-top: -8px;
      width: 80px;
      margin-left: -40px;
      background: rgba(255, 255, 255, 0.9);
      -webkit-transform: scale(1);
      border-radius: 8px;
      overflow: hidden; }
      .dropzone .dz-preview .dz-progress .dz-upload {
        background: #333;
        background: linear-gradient(to bottom, #666, #444);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        -webkit-transition: width 300ms ease-in-out;
        -moz-transition: width 300ms ease-in-out;
        -ms-transition: width 300ms ease-in-out;
        -o-transition: width 300ms ease-in-out;
        transition: width 300ms ease-in-out; }
    .dropzone .dz-preview.dz-error .dz-error-message {
      display: block; }
    .dropzone .dz-preview.dz-error:hover .dz-error-message {
      opacity: 1;
      pointer-events: auto; }
    .dropzone .dz-preview .dz-error-message {
      pointer-events: none;
      z-index: 1000;
      position: absolute;
      display: block;
      display: none;
      opacity: 0;
      -webkit-transition: opacity 0.3s ease;
      -moz-transition: opacity 0.3s ease;
      -ms-transition: opacity 0.3s ease;
      -o-transition: opacity 0.3s ease;
      transition: opacity 0.3s ease;
      border-radius: 8px;
      font-size: 13px;
      top: 130px;
      left: -10px;
      width: 140px;
      background: #be2626;
      background: linear-gradient(to bottom, #be2626, #a92222);
      padding: 0.5em 1.2em;
      color: white; }
      .dropzone .dz-preview .dz-error-message:after {
        content: '';
        position: absolute;
        top: -6px;
        left: 64px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #be2626; }