/* 模态框背景 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal-hidden{
  display: none;
}

/* 模态框内容 */
.modal-content {
  display: flex; /* 使用Flexbox布局 */
  flex-direction: column; /* 内容垂直堆叠 */
  justify-content: flex-end; /* 主轴上的项目对齐到终点 */
  margin: 15vh auto;
  width: 52vw;
  height: 70vh;
  animation-name: animatetop;
  animation-duration: 0.4s;
  transform-origin: center;
  transition: all 0.3s ease-in-out;
}
/* 关闭按钮 */
.modal-close-btn {
  float: right;
  margin: 2vh;
}

/* 关闭按钮 */
.close {
  display: inline-block;
  cursor: pointer;
  font-size: 1.6vh;
  color: rgb(0, 0, 71);
  text-align: center;
}

.close-icon:hover,
.close-icon:focus {
  color: #aaa;
  text-decoration: none;
  cursor: pointer;
}

.close-icon {
    color: rgb(0, 0, 71);
    width: 4.6vh;
    height: 4.6vh;
}

/* 动画 */
@keyframes animatetop {
  from {transform: scale(0.5); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

/* 弹框 */
.modal-border-background {
  background-color: #FFFFFF;
  border-top-left-radius: 10vw;
  border-bottom-right-radius: 10vw;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.modal-label-text {
  font-size: 1.6vh;
}


.modal-form-validate {
  font-size: 1.6vh;
  text-align: start;
  color: red;
}

.modal-form-validate-desc {
  font-size: 1.3vh;
  color: red;
  display: none;
}

.modal-form-select-placeholder {
    color:#aaa;
}

/* 文字内容 */
.modal-container {
  padding-left: 5vw;
  padding-top: 10vh;
}

/* 模态框内表单标题 */
.modal-title {
  font-size: 4vh;
  font-weight: bold;
  color: rgb(0, 0, 71);
}

/* 模态框内表单样式 */
.modal-form-content {
    width: 42vw;
    margin-top: 3vh;
    margin-left: 5vw;
    margin-right: 5vw;
    height: 51vh;
    position: absolute;
}

/* 模态框内表单每行 */
.modal-form-inline {
  margin-top: 2vh;
  height: 38vh;
  margin: auto;
}



.modal-form-input-large {
  box-sizing: border-box; 
  width: 17vw;
  height: 3.6vh;
  border: 1px solid rgb(217, 217, 217); 
  font-size: 1.6vh;
}

.modal-form-single-select-large {
  -webkit-appearance: none; /* 针对Webkit内核的浏览器 */
  -moz-appearance: none;    /* 针对Firefox */
  appearance: none;         /* 标准属性 */
  box-sizing: border-box;
  width: 17vw;
  height: 3.6vh;
  font-size: 1.6vh;
  border: 1px solid rgb(217, 217, 217); 
  transition: all 0.3s ease;
}


.modal-form-input-small {
  box-sizing: border-box; 
  width: 17vw;
  height: 3.6vh;
  font-size: 1.6vh;
  border: 1px solid rgb(217, 217, 217); 
  transition: border-color 0.3s ease-in-out;
}

.modal-form-single-select-small {
  -webkit-appearance: none; /* 针对Webkit内核的浏览器 */
  -moz-appearance: none;    /* 针对Firefox */
  appearance: none;         /* 标准属性 */
  box-sizing: border-box;
  width: 17vw;
  height: 3.6vh;
  font-size: 1.6vh;
  border: 1px solid rgb(217, 217, 217); 
  transition: all 0.3s ease;
}


.modal-form-single-select-small:focus {
  box-shadow: 0 0 3px rgb(0, 166, 255);
}

.modal-form-double-select:focus {
  box-shadow: 0 0 3px rgb(0, 166, 255);
}


.modal-form-double-select {
  -webkit-appearance: none; /* 针对Webkit内核的浏览器 */
  -moz-appearance: none;    /* 针对Firefox */
  appearance: none;         /* 标准属性 */
  box-sizing: border-box;
  border: 1px solid rgb(217, 217, 217); 
  width: 8vw;
  height: 3.6vh;
  font-size: 1.6vh;
}
.modal-form-double-space {
  display: inline-block;
  font-size: 1vw;
}

.modal-form-radio {
  height: 1.6vh;
  width: 1.6vh;
  margin: 0;
}

.modal-form-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 38vh;
}

.modal-form-list-three {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 32vh;
}

/* 模态框内每行表单*/
.modal-form-label-line {
  height: 6vh;
}

.modal-form-label-inline-row {
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  width: 42vw;
}

.modal-form-label-inline-col-small {
  width: 17vw;
  height: 6vh;
}


.modal-form-label-inline-col-large {
  width: 23vw;
  height: 6vh;
}


.modal-form-desc-label-large {
  width: 23vw;
  height: 2vh;
}


.modal-form-desc-label-small {
  width: 17vw;
  height: 2vh;
}


.modal-form-desc {
  box-sizing: border-box;
  border: 1px solid rgb(217, 217, 217); 
  width: 42vw;
  height: 11vh;
  font-size: 1.6vh;
  font-family: '';
}

/* 模态框内每行备注*/
.modal-form-label-desc {
  height: 13vh;
}

.modal-bottom-btn-loading {
  cursor: pointer;
  line-height: 5.5vh;
  text-align: center;
  font-size: 2.7vh;
  color: #FFFFFF;
  width: 26vw;
  margin: 0 auto;
  height: 5.5vh;
  left: 8vw;
  position: absolute;
  bottom: 3.5vh;
  border-radius:5px;
  background-color: rgb(0, 0, 71);

}

.loading-hidden {
  display: none;
}
 
.loading-lock {
  display: block;
}
/* 模态框内表单底部按钮 */
.modal-bottom-btn {
    cursor: pointer;
    line-height: 5.5vh;
    text-align: center;
    font-size: 2.7vh;
    color: #FFFFFF;
    width: 26vw;
    margin: 0 auto;
    height: 5.5vh;
    left: 8vw;
    position: absolute;
    bottom: 3.5vh;
    border-radius:5px;
    background-color: rgb(0, 0, 71);
}

.modal-bottom-btn:hover,
.modal-bottom-btn:focus {
  background-color: rgb(47, 47, 105);
  text-decoration: none;
  cursor: pointer;
}

.modal-bottom-btn-loading .btn-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* toast提示 */
.modal-toast {
  position: fixed;
  top: 40vh;
  left: 40vw;
  width: 20vw;
  padding: 1vh;
  color: white;
  border-radius: 5px;
  font-size: 3vh;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 9999;
}

.modal-toast p {
  margin: 0;
}

.modal-toast.show {
  opacity: 1;
}

.modal-toast.success {
  background-color: rgba(103, 194, 58,0.8);
  border-color: rgb(103, 194, 58);
}
.modal-toast.error {
  background-color: rgba(245, 108, 108,0.8);
  border-color: rgb(245, 108, 108);
}