.file-upload-form {

  display: flex;

  gap: 40px;

}



.file-upload-wrapper {

  position: relative;

  display: flex;

  width: 100%;

  height: 41px;

  border: 1px solid #e9e9e9;

  border-radius: 4px;

}



.file-upload-wrapper:after {

  content: attr(data-text);

  font-size: 12.5px;

  position: relative;

  top: 0;

  left: 0;

  background: #fbfbfb;

  padding: 10px 15px;

  display: block;

  /* width: calc(100% - 40px); */

  flex-grow: 1;

  pointer-events: none;

  z-index: 1;

  max-height: 100%;

  color: #767676;

  border-radius: 0 4px 4px 0;

  font-weight: 300;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.file-upload-wrapper:before {

  flex-grow: 0;

  flex-shrink: 0;

  content: attr(data-button-text);

  position: relative;

  top: 0;

  right: 0;

  display: inline-block;

  height: 100%;

  background: #e4e4e4;

  color: #767676;

  z-index: 1;

  font-size: 12px;

  line-height: 41px;

  padding: 0 15px;

  pointer-events: none;

  border-radius: 4px 0 0 4px;

  font-weight: normal;

}



.file-upload-wrapper:hover:before {

  background: #d8d9d8;

}



.file-upload-wrapper input {

  opacity: 0;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 1;

  margin: 0;

  padding: 0;

  display: block;

  cursor: pointer;

  width: 100%;

}



.file-upload-submit-btn {

  border-radius: 4px;

  font-size: 14px;

  padding: 12px 16px;

  font-weight: 500;

  background-color: #6c757d;

  color: #fdfdfd;

  line-height: 1;

  cursor: pointer;

  border: 0;

}



.file-upload-submit-btn.loading {

  color: transparent;

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}



.file-upload-submit-btn.loading::before {

  content: '';

  position: absolute;

  z-index: 3;

  border: 1px solid white;

  border-radius: 50%;

  border-right-color: transparent;

  border-bottom-color: transparent;

  width: 28px;

  height: 28px;

  animation-name: loading;

  animation-duration: 700ms;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

}



@keyframes loading {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



.file-upload-submit-btn:hover {

  background-color: #545b62;

}



.file-upload-title {

  margin-bottom: 12px;

  font-size: 14px;

  font-weight: 600;

  color: #3c3c3c;

}



.uploadimage-wrapper {

  border: 1px solid #e9e9e9;

  border-radius: 4px;

  padding: 16px;

  padding-bottom: 24px;

  margin: 14px 0;

}



.file-upload-message {

  font-size: 14px;

  margin-bottom: 14px;

  text-align: center;

}



@media (max-width: 520px) {

  .file-upload-form {

    gap: 16px;

    flex-wrap: wrap;

    justify-content: flex-end;

  }

}