body {  
    background-color: #f8f9fa;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    padding: 30px;  
}  

.player-container {  
    position: relative; /* 使内部绝对定位元素相对于此容器定位 */  
}  

.player-container {  
    position: relative; /* 使内部绝对定位元素相对于此容器定位 */  
}  
.player-container {  
    position: relative; /* 使内部绝对定位元素相对于此容器定位 */  
}  

.player-container {  
    position: relative; /* 使内部绝对定位元素相对于此容器定位 */  
}  

#sliderHint {  
    display: none; /* 初始隐藏 */  
    position: absolute; /* 绝对定位 */  
    background: rgba(0, 0, 0, 0.7); /* 背景颜色 */  
    color: white; /* 字体颜色 */  
    padding: 10px; /* 内边距 */  
    border-radius: 5px; /* 圆角边框 */  
    z-index: 10; /* 确保在其他元素上方 */  
    max-width: calc(100% - 20px); /* 最大宽度避免溢出 */  
    word-wrap: break-word; /* 超出部分换行 */  

    opacity: 0; /* 初始透明度为0 */  
    transform: translateY(10px); /* 初始位置稍微下移 */  
    transition: opacity 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */  
}  

#sliderHint.show {  
    display: block; /* 显示 */  
    opacity: 1; /* 结束时透明度为1 */  
    transform: translateY(0); /* 结束时位置恢复原位 */  
}  

/* 添加小尖角 */  
#sliderHint::after {  
    content: '';  
    position: absolute;  
    top: 100%; /* 尖角位于提示框底部 */  
    left: 5%; /* 尖角位于提示框水平居中 */  
    margin-left: -5px; /* 向左移动一半的尖角宽度，使其居中于提示框 */  
    border-width: 8px; /* 尖角的高度 */  
    border-style: solid;  
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent; /* 尖角颜色 */  
    
    opacity: 0; /* 初始尖角透明 */  
    transition: opacity 0.3s ease; /* 添加过渡效果 */  
}  

#sliderHint.show::after {  
    opacity: 1; /* 尖角结束时透明度为1 */  
}
/* 移动端自适应 */  
@media (max-width: 768px) {  
    #sliderHint {  
        max-width: calc(100% - 40px); /* 确保在狭窄屏幕中提示框不溢出 */  
        padding: 15px; /* 加大内边距 */  
    }  

    #sliderHint::after {  
        margin-left: -8px; /* 调整尖角位置 */  
    }  
}  

@media (max-width: 480px) {  
    #sliderHint {  
        padding: 10px; /* 调整内边距以适应小屏幕 */  
        font-size: 14px; /* 调整字体大小 */  
    }  
}  
h2 {  
    margin-bottom: 20px;  
    text-align: center;  
} 
#Select{display: none; }

.playe {  
    height: 400px; /* 固定高度 */  
    display: none; /* 默认不显示 */  
    justify-content: center; /* 水平居中对齐 */  
    align-items: center; /* 垂直居中对齐 */  

    border-radius: 5px;  
    overflow: hidden;  

}  

/* 在移动设备上，应用特定样式 */  
@media (max-width: 599px) {  
    .playe {  
        align-items: center; /* 垂直居中对齐 */  
        height: 300px; /* 保持高度为300px */  
        /* 可以根据需要进一步调整其他样式 */  
    }  

    video {  
        height: 100%; /* 视频高度填满容器 */  
        max-width: 100%; /* 最大宽度为100% */  
        object-fit: contain; /* 保持纵横比 */  
    }  
}  

video {  
    max-width: 100%; /* 最大宽度为100% */  
    height: auto; /* 高度自适应 */  
} 


video {  
      margin: 15px 0;  
    max-height: 100%; /* 最大高度为容器的100% */  
    max-width: 100%;  /* 最大宽度为容器的100% */  
    border-radius: 5px;  
    display: block; /* 设置为块级元素 */  
    object-fit: contain; /* 保持纵横比，缩放填满容器 */  
}  

#cropperContainer {  
    width: 650px; /* 增大容器宽度 */  
    height: 380px; /* 固定高度，与 videoPlayer 相同 */  
    overflow: hidden; /* 隐藏溢出内容 */  
    margin: 20px auto; /* 居中裁剪区域 */  
    display: none; /* 默认隐藏裁剪区域 */  
    text-align: center;   
}  

#cropImage {  
    max-width: 100%; /* 确保图像不超过父容器宽度 */  
    height: auto; /* 高度自动，以保持纵横比 */  
}  

/* 移动端适配 */  
@media (max-width: 599px) {  
    #cropperContainer {  
        width: 100%; /* 移动设备上，容器宽度100% */  
        height: auto; /* 调整高度为 auto */  
    }  
}  

.rotate-buttons {  
    display: flex;   
    justify-content: space-around; /* 均匀分布按钮 */  
   
}  

.rotate-buttons .btn {  
    flex: 1;   
    margin: 0 5px; /* 按钮左右间距 */  
}  

.overlay {  
    display: none;  
    justify-content: center;  
    align-items: center;  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: rgba(0, 0, 0, 0.7);  
    z-index: 10;  
}  

.overlay-center {  
    height: 80%; /* 默认高度 */  
    background: #fff;  
    padding: 20px;  
    border-radius: 5px;  
    text-align: center;  
}  

/* 移动端样式 */  
@media (max-width: 599px) {  
    .overlay-center {  
        width: 76%;
        height: auto; /* 在移动端时的高度 */  
        padding: 15px; /* 在移动端时的内边距 */  
    }  
}  

.preview-image {  
    max-width: 100%; /* 限制预览图片大小 */  
    height: 94%; /* 默认高度 */  
}  

/* 移动端预览图片样式 */  
@media (max-width: 599px) {  
    .preview-image {  
        height: auto; /* 在移动端时的高度 */  
    }  
}
.btn {  
    margin-bottom: 10px;  
    width: 100%;  
    margin-top: 10px;  
}  
.btn-primary {
color: #fff;
background-color: #17a2b8;
    border-color: #0e7d8f;
}

.btn-primary:hover {
    color: #fff;
background-color: #0a8093;
    border-color: #0e7d8f;
}

.btn-success {
    color: #fff;
background-color: #17a2b8;
    border-color: #0e7d8f;
}
.btn-success:hover {
    color: #fff;
background-color: #0a8093;
    border-color: #0e7d8f;
}
.btn-primary:focus { box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 阴影效果 */ 
    color: #fff;
background-color: #0a8293;
    border-color: #0e7d8f;
}
.btn-primary:active { 
        color: #fff;
background-color: #0a8093;
    border-color: #0e7d8f;
}

#slider {  
    margin-bottom: 10px;
    margin-top: 10px;  
    width: 100%;  
    -webkit-appearance: none;  
    appearance: none;  
    height: 20px;  
    background: #e9ecefeb;  
    border-radius: 7px;  
    outline: none;  
}   

#slider::-webkit-slider-thumb {  
    -webkit-appearance: none;  
    appearance: none;  
    width: 20px;  
    height: 20px;  
    background: #0e7d8f;  
    border-radius: 50%;  
    cursor: pointer;  
    transition: background 0.3s;  
}  

#slider::-webkit-slider-thumb:hover {  
    background: #0056b3;  
}  


        #aspectRatioSelect {  
            display: flex; /* 使用Flexbox */  
            flex-direction: column; /* 设置为列方向 */  
            align-items: center; /* 水平居中对齐 */  
            justify-content: center; /* 垂直居中对齐 */  
          
        }  

        
     
        
        
        
        
        
.form-control {
  border: none; /* 不显示边框 */ 
}
        label {  
            margin-bottom: 10px; /* 调整标签与下拉框之间的空间 */  
        }
       /* 按钮样式 */  
        .btn-info { 
            display: flex;  
            justify-content: flex-end; /* 按钮靠右对齐 */  
            width: 30%;
         
        }  



        .btn-icon {  
            margin-right: 5px; /* 图标与文字之间的间距 */  
        }


.button-group i {  
    margin-left: -13px;  
    width: 88px;  
}  

.button-group {  
    display: flex;  
    justify-content: space-between;  
    align-items: center; /* 垂直居中 */  
}  

/* 按钮样式 */  
.button-group .btn {  
    display: flex;  
    align-items: center; /* 垂直居中 */  
    justify-content: flex-start; /* 水平左对齐 */  
    flex: 1; /* 平均分配宽度 */  
    height: 35px; /* 高度设置为35px */  
    margin: 0 5px;  
}  
/* 移动端自适应 */  
@media (max-width: 768px) {  
    .rotate-buttons {  
        margin: 0 0 5px; /* 上下间距为5px */  
        display: flex;  
        flex-direction: column; /* 垂直排列 */  
    }  

    .rotate-buttons .button { /* 假设按钮的类名为 .btn */  
        margin: 0 0 5px; /* 上下间距为5px */  
    }  

    .rotate-buttons .btn:last-child {  
        margin-bottom: 5; /* 最后一个按钮不需要下边距 */  
    }  
}  
/* 移动端自适应 */  
@media (max-width: 768px) {  
    .custom-select {  
        margin-top: -6px; /* 移动设备上设置上边距为-6px */  
    }  
}  
/* 移动端自适应 */  
@media (max-width: 768px) {  
    .button-group {  
        flex-direction: column; /* 切换为纵向布局 */  
        align-items: stretch; /* 确保按钮宽度填满父容器 */  
    }  

    .button-group .btn {  
        width: 100%; /* 按钮在移动端占满父容器宽度 */  
        margin: 6px 0; /* 上下间距 */  
        height: 45px; /* 提高高度，以适应触摸操作 */  
    }  
}  

@media (max-width: 480px) {  
    .button-group i {  
        margin-left: -5px; /* 调整图标的左边距以适应小屏幕 */  
        width: auto; /* 让宽度自适应 */  
    }  

    .button-group .btn {  
        height: 40px; /* 在小屏幕上调整按钮的高度 */  
    }  
}

      /* 加载指示器样式 */  
        /* 加载指示器样式 */  
        .loading-indicator {  
            position: fixed;  
            top: 0;  
            left: 0;  
            width: 100%;  
            height: 100%;  
            background: rgba(255, 255, 255, 0.9);  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            z-index: 100;  
        }  

        .loading-indicator::after {  
            content: "";  
            border: 4px solid rgba(0, 123, 255, 0.8);  
            border-radius: 50%;  
            border-top: 4px solid transparent;  
            width: 20px;  
            height: 20px;  
            animation: spin 1s linear infinite;  
        }  

        @keyframes spin {  
            0% { transform: rotate(0deg); }  
            100% { transform: rotate(360deg); }  
        }