/* styles.css */

/* 加载动画的全局覆盖层样式 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    display: none; /* 默认隐藏 */
}

/* 表单容器样式 */
.form-container {
    max-width: 400px;
    margin: 0 auto;
    margin-top: 10%;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.form-control {
    height: calc(1.5em + .75rem + 2px);
}

.form-group {
    margin-top: 1rem;
    /* 固定行与行之间的间距 */
    height: calc(1.5em + 3rem + 2px);
    /* 调整高度，包含 invalid-feedback 的高度 */
}

.form-label {
    margin-bottom: 0.3rem;
    /* 减少和下行的间距 */
    font-size: 0.875rem;
    /* 字号小一号 */
}

.invalid-feedback {
    margin-top: 0.1rem;
    height: 1.5em;
    /* 固定高度，防止显示时下行移动 */
    font-size: 0.6rem;
    /* 字号小一号 */
}

.btn-submit {
    margin-top: 1.5rem;
    /* 增加 submit 按钮的 margin-top */
}

.form-container h4 {
    margin-bottom: 0.0rem;
    /* 减少标题和下面内容的间距 */
}

.awesomplete {
    width: 100%;
}

.required-marker {
    color: red;
    vertical-align: middle;
}

@media (max-width: 767.98px) {

    .row.form-group .col-md-4,
    .row.form-group .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {

    .row.form-group .col-md-4,
    .row.form-group .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row.form-group {
        flex-direction: column;
    }
}
/* 字符计数器样式 */
.char-counter {
    font-size: 0.875em;
    color: #6c757d;
}

/* 输入无效时的反馈信息样式 */
.invalid-feedback {
    margin-top: 0.1rem;
    height: 1.5em;
    color: #dc3545;
    /* 固定高度，防止显示时下行移动 */
    font-size: 0.7rem;
    /* 字号小一号 */
}
/* 输入框包装容器样式，将输入框、计数器和错误信息放在一起 */
.input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 改为 flex-start 使字符计数器靠左 */
}

/* 输入框样式 */
.input-wrapper .form-control {
    width: 100%;
}

/* 在输入框下方的字符计数器和错误信息容器 */
.feedback-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* 字符计数器在左，错误信息在右 */
.feedback-container .char-counter {
    font-size: 0.875em;
    color: #6c757d;
    margin-left: auto; /* 使字符计数器靠右 */
}

.feedback-container .invalid-feedback {
    font-size: 0.875em;
    color: #dc3545;
    display: none; /* 默认隐藏错误信息 */
}

/* 当输入无效时，显示错误信息 */
.input-wrapper .form-control.is-invalid + .feedback-container .invalid-feedback {
    display: block; /* 当输入无效时，显示错误信息 */
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.btn-transparent {
    background-color: transparent;
    border: none;
    padding: 0;
}

.btn-transparent img {
    vertical-align: middle;
}