/* HEADLINES
----------------------------------------------------------------------------- */    
  
H2 {
  margin-bottom: 20px;
  }  
  
H3 {
  clear: both;
  font-size: 15px;
  color: #333;
  padding-top: 10px;
  margin-bottom: 15px !important;
  padding: 0;
  }  
  
.field + H3 {
  padding-top: 10px !important;
  padding-bottom: 10px;
  }  
  
H4 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 20px;
  clear: both;
  color: #333;
  text-transform: uppercase;
  }   
  
FIELDSET H4:first-child {
  margin-top: 0;
  }  
  
H3 SMALL, 
H4 SMALL,
LABEL SMALL {
  font-size: 11px;
  text-transform: none;
  font-weight: normal;
  margin-left: 5px;
  }   
  
.hidden {
  position: absolute;
  left: -10000px;
  }  
  
.hide {
  display: none;
  }  
  
FORM.active {
  position: static;
  left: auto;
  }  
  
SMALL {
  font-size: 11px;
  color: #999;
  }  

/* SIDEBAR
----------------------------------------------------------------------------- */

#anmeldeformular #sidebar LI {
  display: none;
  }

#sidebar .steps {
  margin-top: 20px;
  margin-right: 25px;  
  display: block;
  padding-top: 10px;
  }

#sidebar .step {
  display: block;
  text-align: left;
  padding-top: 7px;
  height: 60px;
  margin-right: 3px;  
  color: #333;
  clear: both;
  position: relative;
  padding-left: 60px;
  }
  
#sidebar .step:first-child {
  background: none;
  }  
  
#sidebar .step DIV,
#sidebar .step I {
  opacity: 0.3;
  }  
  
#sidebar .step I.error {
  opacity: 1;
  }  
  
#sidebar .step .status {
  width: 20px;
  height: 20px;
  position: absolute;
  right: -28px;
  top: 50%;
  margin-top: -10px;
  z-index: 10;
  } 
  
#sidebar .step .status.success,
.locked .step .status { 
  background: url('../images/icon-check-black.svg') no-repeat left center;
  background-size: 14px auto;
  }  
  
#sidebar .step .status.error { 
  background: url('../images/icon-alert-red.svg') no-repeat;
  background-size: 16px auto;
  }     
  
#sidebar #step1 {
  background: none !important;
  }  
  
#sidebar .step.active DIV,
#sidebar .step.active I {
  opacity: 1;
  }  

.locked #sidebar .step.active DIV,  
.locked #sidebar .step.active I {
  opacity: 0.3;
  }
  
#sidebar .step-label {
  margin-right: 54px;
  font-weight: 600;
  font-size: 12px;
  padding-top: 7px;
  line-height: 13px;
  display: block;
  }

#sidebar .step-title {
  margin-right: 10px;
  color: #999;
  display: block;
  }  
  
#sidebar .step .nr {
  width: 36px;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  background: #fff;
  text-align: center;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  margin-left: 3px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  top: 9px;
  border: 2px solid #333;
  border-radius: 50px;
  box-sizing: content-box;
  } 
  
#sidebar .step:after {
  content: " ";
  position: absolute;
  display: block;
  z-index: 10;
  border-right: 1px dotted #bbb;
  width: 5px;
  height: 11px;
  bottom: -4px;
  left: 17px;
  } 
  
#sidebar #schritt6.step:after {    
  display: none;
  }
 
/* MULTIPLE
----------------------------------------------------------------------------- */    

.multiple {
  overflow: hidden;
  position: relative;
  }
  
.multiple.right,
.multiple.left {
  width: 47%;
  }  
  
.multiple .item {
  position: relative;
  overflow: hidden;
  }  
  
.multiple .field.input.left {
  width: 45%;
  float: left;
  }
  
.multiple .field.input.right {
  width: 45%;
  float: left;
  margin-left: 2%;
  }
  
.multiple .field.input.firstname,
.multiple .field.input.lastname {
  width: 31.5%;
  float: left;
  } 
  
.multiple .regie .field.input.firstname,
.multiple .regie .field.input.lastname {
  width: 203px;
  float: left;
  }     
  
.multiple .field.input.gender {
  width: 130px !important;
  margin-left: 2%;
  float: left;
  }
  
.multiple .field.input.gender .selectBox-dropdown {
  min-width: 115px !important;
  }
  
.multiple .field.input.gender .selectBox-dropdown .selectBox-label {
  width: 80px !important;
  color: #ccc;
  }
  
.multiple .field.input.gender.selected .selectBox-dropdown .selectBox-label {  
  color: #000;
  }
  
.multiple .regie .field.input.gender .selectBox-dropdown {
  min-width: 203px !important;
  }  
  
.multiple .regie .field.input.gender {
  margin-left: 0;
  width: 203px !important;
  float: left;
  }
  
.multiple .field.input.country {
  width: 203px !important;
  margin-left: 2% !important;
  float: left;
  }  
  
.multiple .field.input.country .selectBox-dropdown {
  width: 203px !important;
  min-width: 203px !important;
  }
  
.multiple .field.input.country .selectBox-dropdown .selectBox-label {
  width: 180px !important;
  color: #ccc;
  }
  
.multiple .field.input.country.selected .selectBox-dropdown .selectBox-label {  
  color: #000;
  }  
  
.multiple .field.select {    
  margin-bottom: 10px;
  width: 212px;
  position: relative;
  }
  
.multiple .field.select .button-remove,
.multiple .field.select .button-remove:active {
  bottom: 2px !important;
  }   
  
.multiple .field.select .selectBox-dropdown {
  min-width: 0 !important;  
  width: 175px !important;
  }    

.button-add,
.button-remove {
  position: absolute;
  display: block;
  right: -1px;
  top: 22px;
  width: 30px;
  height: 32px;
  border-radius: 100px;
  background: #fff;
  text-indent: -5000px;
  transition: none;
  cursor: pointer;
  margin-right: 0;
  }
  
.button-add:after,
.button-remove:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0;
  background: #fff url('../images/icon-add.svg') no-repeat center center;
  background-size: 26px auto;
  opacity: 0.15;
  transition: 0.2s;
  }  
  
.button-remove:after {
  background-image: url('../images/icon-remove.svg')
  }  
  
.button-remove {
  top: 1px;
  }  
  
.button-add:hover:after,
.button-remove:hover:after {
  opacity: 0.8;
  }    
  
.button-add:active,
.button-remove:active {
  top: 23px;
  bottom: auto;
  right: 0px !important;
  margin-right: 0 !important;
  }  
  
.button-remove:active {
  top: 1px;
  }  

  
#format .button-add,
#format .button-remove,
#format .button-add:active,
#format .button-remove:active {
  right: 240px !important;
  left: auto !important;
  }  
  
.fieldgroup .button-remove,
.fieldgroup .button-remove:active {
  right: -15px !important;
  top: 25px;
  bottom: auto;
  }
  
/* ZÜRI SHORTS
----------------------------------------------------------------------------- */   
  
#zuerishorts {
  padding-top: 2em;
  margin-bottom: 0;
  display: none;
  } 
  
#zuerishorts SMALL,
#kids-programme SMALL {
  line-height: 1.4;
  padding: 0em 0 1.5em 0;
  display: block;
  padding-right: 1em;
  text-indent: -10px;
  padding-left: 10px;
  }   
  
/* KINDER-/JUGENDPROGRAMM
----------------------------------------------------------------------------- */   

#kids-programme {
  padding-top: 20px;
  clear: both;
  }
  
#kids-minimum-age {
  display: none;
  }
  
#kids-minimum-age STRONG {
  display: block;
  margin-bottom: 10px;
  }  
  
#kids-minimum-age .field {
  clear: both;
  }
  
/* BEANTRAGUNG
----------------------------------------------------------------------------- */     

#beantragung LABEL.error {
  display: block !important;
  }
  
/* FILMANGABEN
----------------------------------------------------------------------------- */    

/*#film-title STRONG {
  display: block;
  border-top: 1px dotted #ddd;
  border-bottom: 1px dotted #ddd;  
  padding: 5px 5px 7px 5px;
  text-align: center;
  margin: 10px 0;
  }*/
  
#film-title A {
  font-weight: bold;
  }
  
#filmtitel,
#filmtitel_englisch {
  padding: 10px 10px 11px 12px;
  font-size: 16px;
  font-weight: 500;
  }  
  
.untertitel > LABEL {
  margin-bottom: 5px;
  }  
  
.untertitel .checkbox {
  margin-left: 0px;
  }  
  
#digital {
  padding-top: 10px;
  }  
  
#stills LABEL.error {
  font-size: 13px;
  }  
  
#stills P {
  margin-bottom: 10px;
  }  
  
/* PREMIERENSTATUS
----------------------------------------------------------------------------- */  

#festivals {
  clear: both;
  border: none;
  padding-top: 20px;
  padding-bottom: 0;
  margin-bottom: 0px;
  }

.toggle {
  text-align: right;
  width: auto !important;
  margin-right: 10px;
  }

.switch {
  overflow: hidden;
  margin-bottom: 10px;
  }
  
.switch LABEL {
  float: left;
  color: #666;
  width: 300px;
  }  

.ui-switchbutton {
  float: right;
  }
  
.switch-button-label {
  float: left;
  cursor: pointer;
  transition: 0.4s;
  }

.switch-button-label.off {
  color: #adadad;
  }

.switch-button-label.on {
  color: #000;
  font-weight: bold;
  }

.switch-button-background {
  float: left;
  position: relative;
  background: #ddd;
  border: 1px solid #bbb;
  margin: 0px 10px;
  border-radius: 10px;
  cursor: pointer;
  }

.switch-button-button {
  position: absolute;
  left: -1px;
  top : -1px;
  background: #FAFAFA;
  border: 1px solid #aaa;
  border-radius: 10px;
  }
  
#invitation {
  margin-top: 10px;
  }  
  
#invitation LABEL {
  float: left;
  }  
  
#abortion {
  color: #222;
  font-weight: bold;
  clear: both;
  padding-top: 15px;
  }  
  
FIELDSET A {
  color: #FC2A1C;
  } 
  
.form-festivals {
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px dotted #ddd;
  padding-top: 15px;
  }  
  
.form-festivals.done {
  border-bottom: 1px dotted #ddd;
  padding-bottom: 15px;
  }  

.form-festival {
  margin-bottom: 30px;  
  overflow: hidden;
  }
  
.form-festivals .multiple {
  margin-top: 15px;
  }  

.festivals {
  position: relative;
  overflow: hidden;
  }
  
.festivals LABEL.error {
  display: none !important;
  }  
  
.festivals.multiple .field.input.left {
  width: 48%;
  }
  
.festivals .festival:first-child .button-remove {
  display: none;
  } 
  
.festival {
  position: relative;
  background: url(../images/divider.png) repeat-x top right;
  padding-top: 20px;
  padding-bottom: 10px;
  } 
  
.festival:first-child {
  background: none;
  padding-top: 0;
  padding-bottom: 10px;
  }   
  
.festival.item:after {
  content: " ";
  clear: both;
  display: table;
  }  
  
#festivals .button-add {
  top: 27px !important;
  }  
  
.festival .button-remove {
  top: 48px;
  }  
  
.festival .field {
  padding-left: 0;
  }   
  
.festival .field.small {
  width: 150px;
  float: left;
  margin-left: 10px;
  }  
  
.festival .field.left {
  float: left;
  clear: none;
  }
  
.festival .field.type {
  float: left;
  width: 260px;
  }  
  
.festivals.multiple .field.year {
  float: left;
  width: 160px;
  }     
  
.festival .field.input.fullwidth {
  width: 400px;
  }    
  
.festivals.multiple .field.select.type .selectBox-dropdown {
  width: 250px !important;
  }
  
.festivals.multiple .field.select.year .selectBox-dropdown {
  width: 140px !important;
  }  
  
.festival:first-child LABEL {
  display: block;
  }  
  
.form-festivals STRONG {
  margin-bottom: 20px;
  display: block;
  }  
  
#premierenstatus LABEL {
  padding-top: 0;
  margin-top: -2px;
  padding-bottom: 12px;
  font-size: 13px;
  font-weight: bold;
  
  }  
  
#premierenstatus LABEL SMALL {
  margin-left: 0px;
  font-size: 13px;
  line-height: 15px;
  color: #aaa;
  font-weight: normal;
  }  
  
#premierenstatus .radio:hover .iradio {
  border-color: #ccc;
  }  
 
#premierenstatus .button-continue {
  margin-top: 5px;
  }  
  
#premierenstatus .field.radio {
  position: static;
  overflow: visible;
  }
  
#premierenstatus .field.radio .iradio {
  overflow: visible;
  }     
  
#premiere-validation {
  position: absolute;
  left: -500000px;
  }
  
#Premierenstatus-error {
  width: auto;
  position: absolute;
  top: -40px;
  height: 18px;
  right: -320px;
  float: none;
  padding-left: 25px;
  white-space: nowrap;
  background: url('../images/icon-alert-red.svg') no-repeat left center;
  background-size: 16px auto;
  }  
  
/* ACCORDION
----------------------------------------------------------------------------- */   

.accordion {
  background: url('../images/divider.png') repeat-x bottom left;
  }

.accordion .title {
  background: url('../images/divider.png') repeat-x top left;
  padding: 12px 0 13px 0;
  cursor: pointer;
  }
  
.accordion .title H3 {
  margin-bottom: 0 !important;
  }  
  
.accordion .title H3:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 20px;
  height: 42px;
  background: url('../images/arrow-small-right.svg') no-repeat center center;
  background-size: 14px auto;
  }  

.accordion-content {
  padding-bottom: 15px;
  padding-top: 10px;
  overflow: hidden;
  }  
  
.accordion .content .upload.field {
  margin-top: 22px;
  }  
  
.accordion .content .left {
  clear: none;
  }  

.accordion .ui-state-active H3:after {  
  transform: rotate(90deg);
  }
  
.ui-accordion-header {
  position: relative;
  }    
  
.ui-accordion-header.error .ui-icon {
  display: block;
  width: 16px;
  height: 16px;
  background: url('../images/icon-alert-red.svg') no-repeat;
  background-size: 16px auto;
  position: absolute;
  top: 13px;
  right: 40px;
  }  
  
#adressen .checkbox {
  margin-bottom: 20px;
  margin-top: 0px;
  }
  
#adressen SMALL {
  display: block;
  margin: -12px 0 3px 0;
  line-height: 14px;
  font-size: 11px;
  font-weight: normal;
  }  
  
#adressen ADDRESS {
  overflow: hidden;
  color: #111;
  font-weight: bold;
  padding-bottom: 10px;
  }
  
#adressen P {
  padding-top: 10px;
  }
  
#adressen .regisseur LABEL {
  display: none;
  }  
  
#adressen .regisseur:first-child LABEL {
  display: block;
  }  
  
#adressen .button-address-add {
  margin-top: 15px;
  clear: both;
  }
  
#adressen .contactperson .label {
  color: #999;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  }  

  
/* DIALOGLISTE 
----------------------------------------------------------------------------- */   

.files {
  list-style-type: none;
  margin-bottom: 20px;
  }
  
.files LI {
  background: url('../images/icon-file.png') no-repeat;
  padding-left: 20px;
  margin-bottom: 5px;
  }  

/* VERSCHLAGWORTUNG
----------------------------------------------------------------------------- */

.genres {
  margin: 10px 0 20px 0;
  overflow: hidden;
  }
  
LABEL.genre,
LABEL.motiv {
  float: left;
  background-color: #eee;
  border-radius: 3px;
  padding: 6px 9px 7px 9px;
  font-size: 13px;
  line-height: 12px;
  color: #888;
  transition: 0.2s;
  cursor: pointer;
  margin-bottom: 3px;
  margin-right: 3px;
  font-weight: 500;
  letter-spacing: -0.00em;
  }
  
#genres .genres LABEL.genre {
  font-size: 13px;
  }  
  
#motive .genres {
  text-align: center;
  }  
  
#motive LABEL.motiv {
  padding: 6px 6px 6px 6px;
  font-size: 12px;
  line-height: 1;
  }  
  
LABEL.genre.selected,
LABEL.motiv.selected {
  background-color: #333;
  color: #fff;
  font-weight: bold;
  }  
  
.genre-container,
.motive-container {
  position: relative;
  }  
  
#verschlagwortung H3 SMALL {
  display: block;
  margin-left: 0;
  }  
  
.genre-container LABEL.error {
  display: block;
  clear: both;
  position: absolute;
  top: -2px;
  right: 0;
  }  
  
.genre-container INPUT.count,
.motive-container INPUT.count {
  left: -5000px;
  position: absolute;
  }
  
.motive-container LABEL.error {
  display: block;
  clear: both;
  position: absolute;
  top: -2px;
  right: 0;
  }   
  
#verschlagwortung .multiple .field.input {
  width: 175px;
  }   
  
/* SWITCH BUTTON
----------------------------------------------------------------------------- */    

.switchbutton {
  text-align: center;
  margin: 0.5em 0 1em 0;
  position: relative;
  z-index: 2;
  }
  
.switchbutton UL {
  display: inline-block;
  border-radius: 30px;
  overflow: hidden;
  border: 3px solid #fff;
  }  
  
.switchbutton UL LI {
  display: inline-block;
  background: #eee;
  float: left;
  cursor: pointer;
  transition: 0.2s;
  } 
  
.switchbutton UL LI.active {
  background: #333;
  }  
  
.switchbutton UL LI.active A {
  color: #fff;
  font-weight: bold;
  }  
  
.switchbutton UL LI A {
  color: #777;
  float: left;
  padding: 6px 15px 8px 15px;
  } 
  
.switchbutton UL LI A I {
  font-size: 1.2em;
  float: left;
  margin-top: 1px;
  margin-right: 0.5em;
  }    
  
/* SUBMISSION
----------------------------------------------------------------------------- */   

#submission LEGEND SMALL {
  display: block;
  padding-top: 4px;
  }
  
#submission .info H3 {
  font-size: 13px;
  margin-bottom: 2px !important;
  }  

#submission .info {
  margin-bottom: 2em;
  }

#submission .info UL {
  margin-left: 20px;
  margin-top: 10px;
  }
  
#dropzone {
  border-radius: 5px !important;
  line-height: 1.5;
  text-align: center;
  color: #bbb;
  overflow: hidden;
  }  
  
.uppy-Root {
  font-family: Approach, Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  border-radius: 5px !important;
  }

.uppy-Dashboard-bgIcon:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 150px;
  top: 50px;
  background: url('../images/icon-drag.svg') no-repeat center center;
  background-size: 100px auto;
  opacity: 0.3;
  transition: 0.2s;
  }
   
.uppy-Dashboard-inner {
  margin-bottom: 0;
  border: none;
  margin-bottom: 0;
  background: #fcfcfc;
  border-radius: 5px;
  overflow: hidden;
  }  
  
.uppy-Dashboard .uppy-Dashboard-innerWrap { 
  overflow: visible;
  }  
  
.uppy-Dashboard-inner:hover .uppy-Dashboard-bgIcon:after {
  opacity: 0.3;
  }     
  
.uppy-Dashboard.drag .uppy-Dashboard-bgIcon:after { 
  opacity: 0.8;
  }  
  
.uppy-Dashboard.drag .uppy-Dashboard-innerWrap {
  background: none;
  }  
  
.uppy-Dashboard-files {
  border: 2px dashed #f3f3f3;
  height: 450px;
  }  
  
.uppy-Dashboard.drag .uppy-Dashboard-files {
  border: 2px dashed #ddd;
  }  
  
.uppy-Dashboard--wide .uppy-Dashboard-dropFilesTitle {
  color: #999;
  font-size: 21px;
  line-height: 1.8;
  position: relative;
  z-index: 10;
  padding: 0 50px;
  padding-top: 20px;
  }  
  
.uppy-Dashboard-note {
  color: #bbb;
  font-size: 13px !important;
  bottom: 60px;
  transition: 0.2s;
  }  
  
.uppy-Dashboard-browse {
  color: #000;
  font-weight: bold;
  }
  
.uppy-Dashboard-browse:hover {
  color: #FC2A1C;
  }  
  
.uppy-Dashboard-browse:focus {
  border: none;
  }    

.uppy-Dashboard-poweredBy {
  display: none;
  }
  
.uppy-StatusBar-progress {
  background: #444;
  }  
  
.uppy-StatusBar-progress.is-indeterminate {
  background-size: 64px 64px;
  background-image: linear-gradient(45deg,#555555 25%,transparent 0,transparent 50%,#555555 0,#555555 75%,transparent 0,transparent);
  }   
  
.uppy-Dashboard--wide .uppy-DashboardItem-progressIndicator g .play,
.uppy-Dashboard--wide .uppy-DashboardItem-progressIndicator g .pause {
  display: none;
  }  

.uppy-DashboardItem-progress {
  width: 310px;
  height: 310px;
  }  
  
.uppy-DashboardItem .progress {
  stroke: rgba(0,0,0,0.05);
  stroke-width: 0.8px;
  }  
  
.uppy-Dashboard--wide .uppy-DashboardItem.is-complete .uppy-DashboardItem-progressIndicator {
  display: none;
  }  
  
.uppy-Dashboard--wide .uppy-DashboardItem-progressIndicator {
  width: 310px;
  height: 310px;
  margin-top: 7px;
  }  
  
.uppy-StatusBar-status {
  letter-spacing: 0;
  }  
  
.uppy-StatusBar {
  background: #ccc;
  }  
  
.uppy-Dashboard-progressindicators {
  width: 450;
  overflow: hidden;
  border-radius: 2px;
  }  
  
.uppy-StatusBar-statusSecondary {
  opacity: 0.7;
  font-size: 11px;
  }  
  
.uppy-StatusBar-actions {
  right: 10px;
  }  
  
.uppy-DashboardTabs {
  border: none;
  display: none;
  }  
  
.uppy-DashboardItem {
  border: none;
  }  
  
.uppy-DashboardItem-action {
  top: 20px;
  right: 20px;
  }  
  
.uppy-DashboardItem-remove {
  opacity: 0.3;
  transition: 0.2s;
  }
  
.uppy-DashboardItem-remove:hover {
  opacity: 0.5;
  }    
  
.uppy-DashboardItem-remove SVG {
  transform: scale(1.5);
  }
  
.uppy-Dashboard--wide .uppy-StatusBar-actionBtn {
  border: 2px solid rgba(255,255,255,0.5);
  padding: 5px 10px 8px 10px;
  } 
  
.uppy-Dashboard--wide .uppy-StatusBar-actionBtn:hover {
  background: rgba(255,255,255,1);
  color: #666;
  }  
  
.uppy-Dashboard--wide .uppy-DashboardItem {
  padding-top: 5px;
  width: 400px;
  height: 360px;
  }  
  
.uppy-Dashboard--wide .uppy-DashboardItem-preview {
  height: 100%;
  background: none;
  }  

.uppy-Dashboard--wide .uppy-DashboardItem-previewInnerWrap {
  background: none !important;
  box-shadow: none;
  }
  
.uppy-DashboardItem-previewInnerWrap:after {
  opacity: 0;
  }  
  
.uppy-StatusBar-content {
  padding-bottom: 1px;
  }  
  
.uppy-StatusBar-contentPadding {
  opacity: 0.5;
  font-size: 12px;
  line-height: 1.2;
  display: inline-block;
  }
  
.uppy-Dashboard--wide .uppy-StatusBar-actionBtn {
  margin-left: 7px;
  margin-right: 0;
  }    
  
STRONG.uppy-StatusBar-contentPadding {
  color: #fff;
  font-weight: normal;
  opacity: 1;
  }  
  
.uppy-DashboardItem-info {
  text-align: center;
  } 
  
.uppy-DashboardItem-statusSize {
  font-size: 12px;
  color: #aaa;
  }   
  
.uppy-DashboardItem-name {
  font-size: 13px;
  font-weight: bold;
  }  
  
.uppy-DashboardItem-name A {
  text-decoration: none;
  font-weight: bold;
  color: #333;
  } 
  
.uppy-DashboardItem-previewIconWrap {
  width: 200px;
  height: 200px;
  background: url('../images/illustration-upload.svg') no-repeat center center;
  }  
  
#upload.complete .uppy-DashboardItem-previewIconWrap {
  background: url('../images/illustration-upload-complete.svg') no-repeat center center;
  width: 260px;
  height: 260px;
  background-size: 260px 260px !important;
  }  
  
.uppy-DashboardItem-previewIconWrap svg {
  display: none;
  }   
  
.uppy-Dashboard--wide .uppy-Informer {
  background: #e30613 !important;
  }  
  
.uppy-Dashboard--wide .uppy-DashboardItem-copyLink {
  display: none;
  }  
  
#upload {
  position: relative;
  }
  
#screener_filename-error,
#confirmation-error,
#screener_confirmation_1-error,
#screener_confirmation_2-error {
  padding: 0;
  margin: 0;
  height: auto;
  padding: 10px 0;
  background: url(../images/icon-alert-red.svg) no-repeat left center;
  background-size: 16px auto;
  padding-left: 24px;
  line-height: 1 !important;
  display: block;
  } 
  
#confirmation-error,
#screener_confirmation_1-error,
#screener_confirmation_2-error { 
  height: 14px;
  line-height: 15px !important;
  display: block;
  }     
  
/* ANIMATION
----------------------------------------------------------------------------- */ 
    
@-webkit-keyframes scaleAnimation {
  0% {
    opacity: 0;
    -webkit-transform: scale(5);
            transform: scale(5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

@keyframes scaleAnimation {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}
@-webkit-keyframes drawCircle {
  0% {
    stroke-dashoffset: 151px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes drawCircle {
  0% {
    stroke-dashoffset: 151px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes drawCheck {
  0% {
    stroke-dashoffset: 36px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes drawCheck {
  0% {
    stroke-dashoffset: 36px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#successAnimationCircle,
#success-animation-circle {
  stroke-dasharray: 151px 151px;
  stroke: #fff;
}

#successAnimationCheck,
#success-animation-check {
  stroke-dasharray: 36px 36px;
  stroke: #fff;
}

#successAnimationResult,
#success-animation-result {
  fill: #fff;
  opacity: 0;
}

#successAnimation.animated,
#success-animation.animated {
  -webkit-animation: 1s ease-out 0s 1 both scaleAnimation;
          animation: 1s ease-out 0s 1 both scaleAnimation;
}
#successAnimation.animated #successAnimationCircle,
#success-animation.animated #success-animation-circle {
  -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
          animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
}
#successAnimation.animated #successAnimationCheck,
#success-animation.animated #success-animation-check {
  -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
          animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
}
#successAnimation.animated #successAnimationResult,
#success-animation.animated #success-animation-result {
  -webkit-animation: 0.3s linear 0.9s both fadeIn;
          animation: 0.3s linear 0.9s both fadeIn;
}  
  
/* BESTÄTIGUNG
----------------------------------------------------------------------------- */    

#terms {
  min-height: 160px;
  margin-top: 20px;
  }
  
#terms LEGEND {
  padding-bottom: 0;
  }  

#terms LABEL.error {
  position: absolute;
  top: 50px;
  left: 22px;
  white-space: nowrap;
  width: 200px;
  color: #FF2600;
  }
  
#terms .checkbox {
  padding-bottom: 30px;
  }  
  
#terms .checkbox LABEL {
  padding-top: 0px;
  }
  
#terms LABEL A {
  color: #000;
  } 
  
#terms LABEL A:hover {  
  color: #FC2A1C;
  }  
  
.confirmation LABEL.error {
  position: absolute;
  top: 5px;
  left: 435px;
  white-space: nowrap;
  width: 180px;
  color: #FF2600;
  padding: 0 0 0 24px !important;
  text-indent: -2000px;
  }  
  
.confirmation .info {
  margin-top: 20px;
  margin-bottom: 0 !important;
  clear: both;
  float: left;
  color: #aaa;
  }  
  
.confirmation .info P {
  margin-bottom: 0;
  }  
  
.confirmation LABEL {
  padding-right: 2px;
  }  
  
/* SUCCESS
----------------------------------------------------------------------------- */   

#step7 {
  text-align: center;
  }

.step7 H1 {
  display: none;
  }
  
#step7 > .success {
  text-align: center;
  margin: -20px;
  background: #333;
  color: #fff;
  height: 430px;
  border-radius: 0 0 4px 4px;
  }  
  
#step7 .success svg {
  margin: 8em 0 6em 0;
  }  

.thanks {
  text-align: center;
  display: block;
  font-size: 25px;
  line-height: 1.5;
  color: #fff;
  font-weight: bold;
  margin-bottom: 0;
  }  
  
.success IMG {
  margin: 0 auto;
  }
  
.send {
  overflow: hidden;
  }  
  
.send-per-mail,
.send-per-courier {
  padding-left: 85px;
  margin: 10px 0;
  color: #555;
  padding-top: 10px;
  float: left;
  width: 50%;
  } 
  
.send-per-mail .grey,
.send-per-courier .grey {
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  margin-bottom: 5px;
  }  
  
.send-per-courier {
  background: url('../images/icon-courier.png') no-repeat 10px 0;
  }     
  
.send-per-mail {
  background: url('../images/icon-mail.png') no-repeat 0px -1px;
  padding-left: 72px;
  }
  
.instructions {
  padding: 0 30px;
  text-align: center;
  opacity: 0.5;
  }         
  
.manuals {
  margin: 40px 0;
  overflow: hidden;
  text-align: center;
  }
  
.manual {
  display: block;
  text-align: left;
  width: 320px;
  border: 2px solid #ddd;
  height: 100px;
  border-radius: 5px;
  position: relative;
  padding-left: 85px;
  padding-top: 25px;
  margin: 0 auto;
  }   
  
.manual:hover {
  border-color: #BFBFBF;
  color: #fff;
  }  
  
/*.manual:hover SPAN,
.manual:hover SMALL {
  color: #fff !important;
  transition: 0.2s;
  }  */
  
.manual I {
  width: 64px;
  height: 64px;
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -32px;
  left: 10px;
  background: url('../images/icon-pdf.png') no-repeat 0px 0px;  
  }  
  
.manual:hover I {
  background-position: 0 -64px;
  }  
  
.manual SPAN {
  display: block;
  color: #555;
  font-size: 18px;
  line-height: 1.3em;
  font-weight: bold;
  }   
  
#step7 .filename {
  font-weight: bold;
  color: #333;
  margin: 2px 0;
  }  
  
.print {
  text-align: center;
  }  
  
.shipping-partner {
  text-align: center;
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  margin-top: 30px;
  }    
  
.shipping-partner STRONG {
  font-weight: normal;
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: block;
  color: #aaa;
  }  
  
.shipping-partner IMG {
  position: relative;
  left: 5px;
  }