/* 基础样式重置 */
.modal-content {
    background-color: #ffffff; /* 白色背景 */
    border-radius: 8px; /* 圆角边框 */
    border: none; /* 去除边框 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

.modal-header {
    padding: 20px 24px; /* 调整内边距 */
    border-bottom: 1px solid #e0e0e0; /* 分割线样式 */
}

.modal-title {
    font-size: 1.25rem; /* 调整标题字体大小 */
    color: #333333; /* 标题颜色 */
    font-weight: bold; /* 字体加粗 */
}

.btn-close {
    background: url('/static/img/x-lg.svg') no-repeat center center; /* 使用图标 */
    border: none;
    width: 24px;
    height: 24px;
}

.modal-body {
    padding: 10px 24px; /* 调整内边距 */
}

.option-btn {
    padding: 8px 16px; /* 调整按钮内边距 */
    border-radius: 20px; /* 圆形按钮 */
    border: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease; /* 过渡动画 */
}

.option-btn.active, .option-btn:hover {
    background-color: #0056b3; /* 激活或悬停时的背景颜色 */
    color: #ffffff;
}

.modal-footer {
    border-top: none; /* 去除分割线 */
    padding: 10px 24px 20px 24px; /* 调整内边距 */
}

.btn-secondary, .btn-primary {
    padding: 8px 16px; /* 调整按钮内边距 */
    border-radius: 4px; /* 圆角边框 */
    border: none;
    transition: background-color 0.3s ease; /* 过渡动画 */
}

.btn-primary {
    background-color: #0069d9; /* 主按钮背景颜色 */
    color: #ffffff;
}

.btn-secondary {
    background-color: #6c757d; /* 次按钮背景颜色 */
    color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 600px) {
    .modal-dialog {
        margin: 10px; /* 小屏幕上的边距 */
    }
    .modal-content {
        border-radius: 4px; /* 小屏幕上的圆角 */
    }
}

.video-width {
    width:80%;
    max-width:580px;
    margin:10px 0px 20px 0px;
}