.container {
  position: relative;
  transition: all var(--zd_transition3);
  vertical-align: middle;
  cursor: pointer;
  padding: var(--zd_size5) ;
  border-radius: var(--zd_size2);
}
.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% ;
}
[dir=ltr] .attachInfo {
  padding: var(--zd_size4) 0 0 var(--zd_size8) ;
}
[dir=rtl] .attachInfo {
  padding: var(--zd_size4) var(--zd_size8) 0 0 ;
}
.fileIcon {
  font-size: var(--zd_font_size14) ;
}
.attachsize {
  font-size: var(--zd_font_size10) ;
  letter-spacing: 1px;
  composes: dotted from "~@zohodesk/components/lib/common/common.module.css";
  text-transform: uppercase;
  padding: var(--zd_size4) 0 var(--zd_size2) ;
}
.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;
}