.project-detail-form {
  --edit-project-form-base: #107d73;
  --edit-project-form-base-darker: #034f48;
  --edit-project-form-action: #ffeb3b;
  background: var(--edit-project-form-base);
  padding: 10px;
  color: #fff;
}

.project-detail-form.revision {
  background: var(--edit-project-form-base-darker);
}

.project-detail-form .card-header {
  border-bottom: solid 1px rgba(255, 255, 255, 0.7);
  padding-bottom: 7px;
  margin-bottom: 5px;
}

.project-detail-form h3 {
  font-weight: 400;
  margin: 10px 10px 0px 10px;
  text-transform: uppercase;
  color: var(--edit-project-form-action);
  font-size: 14px;
  letter-spacing: 2px;
}

.project-detail-form .project-cost > small:not(.symbol) {
  color: #b2d3e2;
  text-transform: uppercase;
  font-size: 11px;
}

.project-detail-form .project-cost .symbol {
  font-size: 70%;
  opacity: 0.65;
  font-weight: 200;
}

.project-detail-form .project-cost > div {
  color: #fff;
  font-size: 22px;
}

.project-detail-form .project-cost > div md-icon {
  color: #fff;
  margin: 0;
}
.project-detail-form md-input-container {
  margin-left: 0 !important;
}
.project-detail-form md-input-container input,
.project-detail-form md-input-container md-select,
.project-detail-form md-input-container textarea {
  opacity: 1 !important;
  font-weight: 400;
  color: #fff !important;
  background: rgb(255 255 255 / 10%);
  padding: 2px 5px;
  border: solid 1px rgb(255 255 255 / 40%) !important;
  background-image: none !important;
  height: 35px;
  font-size: 12px;
}

.project-detail-form md-select .md-select-value,
.project-detail-form md-select .md-select-icon {
  color: #fff !important;
  opacity: 1;
  background-image: none !important;
  font-size: 12px;
}

.project-detail-form md-select[disabled] .md-select-icon {
  opacity: 0;
}

.project-detail-form md-input-container input[disabled],
.project-detail-form md-input-container md-select[disabled],
.project-detail-form md-input-container textarea[disabled] {
  background: rgb(255 255 255 / 5%);
  border: solid 1px rgb(255 255 255 / 15%) !important;
}

.project-detail-form md-input-container input:focus,
.project-detail-form md-input-container md-select:focus,
.project-detail-form md-input-container textarea:focus {
  border: solid 1px #fff !important;
}

.project-detail-form md-input-container .md-input-message-animation {
  padding-top: 0;
}

.project-detail-form md-autocomplete {
  background: transparent !important;
  height: auto !important;
}

.project-detail-form md-autocomplete md-autocomplete-wrap {
  height: auto !important;
  box-shadow: none !important;
}

.project-detail-form md-input-container label {
  margin-bottom: 2px;
  color: #b2d3e2 !important;
  font-size: 90%;
}

.project-detail-form md-input-container label:after {
  color: var(--edit-project-form-action) !important;
}

.project-detail-form form button {
}

.project-detail-form form button md-icon {
  color: var(--edit-project-form-action);
}

.project-detail-form form button:hover,
.project-detail-form form button:focus {
  background-color: rgb(255 255 255 / 15%) !important;
}

.project-detail-form .switch-group {
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  width: calc(100% - 2px);
}

.project-detail-form .switch-group-label {
  color: #b2d3e2;
  font-size: 11px;
  margin-left: 2px;
}

.project-detail-form .switch-group span {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 100%;
  width: 100%;
  margin-left: -1px;
  background-clip: border-box;
  transform: scale3d(1, 1, 1);
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 40%);
  color: #ced7e2;
  transition: 0.15s ease-in-out background-color;
  font-size: 10px;
  text-transform: uppercase;
}

.project-detail-form .switch-group.disabled span {
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 15%);
  cursor: default;
}

.project-detail-form .switch-group span:first-child {
  margin-left: 0;
}

.project-detail-form .switch-group span.active {
  background-color: rgb(255 255 255 / 20%);
  color: #fff;
  border-color: #fff;
}

.project-detail-form .switch-group:not(.disabled) span:not(.active):hover {
  color: #dde4ec;
  background: rgb(255 255 255 / 10%);
}

/******************* UPLOAD **************************/

.project-detail-form .upload-area {
  margin-top: 15px;
}

.project-detail-form .upload-area table.dc-table tbody > tr > td {
  padding: 3px 8px;
}

.project-detail-form .upload-area .upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.project-detail-form .upload-area .upload-btn-wrapper .upload-btn {
  background-color: var(--edit-project-form-action);
  color: #22404e;
  border-radius: 3px;
  border: 0;
  padding: 0 10px;
  height: 30px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.project-detail-form .upload-area .upload-btn-wrapper .upload-btn md-icon {
  color: #22404e;
  opacity: 0.5;
}

.project-detail-form .upload-area .upload-btn-wrapper:hover .upload-btn md-icon {
  opacity: 1;
}

.project-detail-form .upload-area .upload-btn-wrapper input[type="file"] {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}