.container {
  position: relative;
  transition: all var(--zd_transition3);
  vertical-align: middle;
  cursor: pointer;
  padding:var(--zd_size5) ;
  border-radius: 2px;
}

.light {
  background-color: var(--zdt_upload_default_bg);
}

.night {
  background-color: var(--zdt_upload_night_bg);
}

.overlay {
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  background-color: var(--zdt_upload_overlay_bg);
}

[dir=ltr] .overlay {
  left: 0 ;
  right: 0 ;
}

[dir=rtl] .overlay {
  right: 0 ;
  left: 0 ;
}

.small {
  width: var(--zd_size50) ;
  height: var(--zd_size40) ;
}

.medium {
  height: var(--zd_size49) ;
  width: var(--zd_size65) ;
}

.preview {
  opacity: 0.4;
  cursor: default;
}

.loader {
  position: absolute;
  bottom: calc( var(--zd_size1) * -1 ) ;
  height: var(--zd_size2) ;
  width: 0% ;
  transition: width var(--zd_transition6) ease;
}

[dir=ltr] .loader {
  left: 0 ;
}

[dir=rtl] .loader {
  right: 0 ;
}

.light .loader {
  background: var(--zdt_upload_loader_default_bg);
}

.night .loader {
  background: var(--zdt_upload_loader_night_bg);
}

.uploadimage {
  width: 100% ;
  height: 100% ;
}

.attachInfo {
  padding-block: var(--zd_size4) 0 ;
  padding-inline:var(--zd_size8) 0 ;
}

.fileIcon {
  font-size: var(--zd_font_size14) ;
}

.attachsize {
  font-size: var(--zd_font_size10) ;
  padding-block: var(--zd_size4) var(--zd_size2) ;
  padding-inline:0 ;
  letter-spacing: 1px;
  composes: dotted from "~@zohodesk/components/es/common/common.module.css";
  text-transform: uppercase;
}

.light .attachsize {
  color: var(--zdt_upload_attachsize_default_text);
}

.night .attachsize {
  color: var(--zdt_upload_attachsize_night_text);
}

.uploadclose {
  height: var(--zd_size12) ;
  width: var(--zd_size12) ;
  top: 0 ;
  position: absolute;
  line-height: 0.8333;
  font-size: var(--zd_font_size12) ;
  text-align: center;
}

[dir=ltr] .uploadclose {
  right: 0 ;
}

[dir=rtl] .uploadclose {
  left: 0 ;
}

.light .uploadclose {
  color: var(--zdt_upload_uploadclose_default_text);
  background-color: var(--zdt_upload_uploadclose_default_bg);
}

.light .uploadclose:hover {
  background-color: var(--zdt_upload_uploadclose_default_hover_text);
}

.night .uploadclose {
  color: var(--zdt_upload_uploadclose_night_text);
  background-color: var(--zdt_upload_uploadclose_night_bg);
}

.night .uploadclose:hover {
  background-color: var(--zdt_upload_uploadclose_night_hover_text);
}

.uploadclose,
.overlay {
  opacity: 0;
  visibility: hidden;
  transition: var(--zd_transition3);
}

.container:hover .uploadclose,
.container:hover .overlay {
  opacity: 1;
  visibility: visible;
}