@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  --bg-gray: #f8f8f8;
  --text-gray: #797d84;
  box-sizing: content-box;
}

.blue-button {
  cursor: pointer;
  min-width: 84px;
  height: 30px;
  border-radius: var(--sy-border-radius);
  border: 1px solid var(--sy-blue);
  font-size: 14px;
  font-weight: 500;
  color: var(--sy-blue);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formlayout1 .el-form-item__label {
  width: 129px;
  line-height: 40px;
}
.formlayout1 .el-form-item__label::before {
  content: '' !important;
}
.formlayout1 .inputContainer {
  width: 610px;
}
.formlayout1 .el-form-item__content {
  width: 610px;
  margin-left: 20px !important;
}
.formlayout1 .el-input__inner {
  height: 40px;
  width: 610px;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  background-color: var(--el-button-disabled-bg-color);
  background-image: none;
  border-color: var(--el-button-disabled-border-color);
  color: var(--el-button-disabled-text-color);
  cursor: not-allowed;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.datePicker.el-input.el-date-editor {
  width: 100%;
  flex-shrink: 0;
}

.datePicker .el-input__inner {
  padding-left: 18px !important;
  height: 36px;
  color: var(--sy-black);
  border-radius: var(--sy-border-radius);
}

.datePicker .el-input__inner:hover {
  box-shadow: 0 0 0 1px #c4c4c4 inset;
}
.datePicker .el-input__inner:focus {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}
.datePicker .el-input__inner .el-input__inner::placeholder {
  color: #a3a7aa;
}

.datePicker .el-input__prefix {
  position: absolute;
  top: 0;
  left: calc(100% - 32px);
  text-align: center;
  height: 100%;
  color: #c0c4cc;
}
