.upload-wrapper {
    width: 100%;
    /* background: #f00; */
    /* max-width: 900px; */
    /* margin: auto; */
    padding: 10px;
    /* display: flex; */
}

.upload-wrapper .upload-title {
    /* font-size: 20px; */
    /* font-weight: bold; */
    /* text-transform: capitalize; */
}

.upload-wrapper .upload-content {
    width: 100%;
    display: flex;
}

.upload-wrapper .upload-content .preview-upload {
    width: 400px;
    max-width: 100%;
    display: flex;
    /* background: #f00; */
    height: 100dvh;
    justify-content: center;
    align-items: center;
}

.upload-wrapper .upload-content .action-upload {
    flex: 1;
    background: #2e2d2d;
}

.choose-file-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
}

.choose-file-wrapper label.upload-title {
    box-sizing: border-box;
    margin-block: 0;
    font-size: var(--tux-fontSizeP2);
    line-height: 1.5;
    font-family: var(--tux-fontFamilyParagraph);
    font-weight: var(--tux-fontWeightSemibold);
    color: var(--tux-colorTextPrimary);
}

.choose-file-wrapper p {
    margin-top: 4px;
    margin-bottom: 24px;
    /* box-sizing: border-box; */
    margin-block: 3px;
    font-size: var(--tux-fontSizeP4);
    line-height: 1.5;
    font-family: var(--tux-fontFamilyParagraph);
    font-weight: var(--tux-fontWeightRegular);
    color: var(--tux-colorTextSecondary);
}

.choose-file-wrapper .select-file-wrapper {
}

.choose-file-wrapper .select-file-wrapper label {
}

.choose-file-wrapper .select-file-wrapper ul {
}

.choose-file-wrapper .select-file-wrapper ul li {
}

.choose-file-wrapper .Dropdown-root {

}

.choose-file-wrapper button.select-video {

    padding: 10px;

    width: 300px;

    text-align: center;

    border-radius: 0;

    margin-top: 10px;

    background-color: var(--tux-colorPrimary);

    border-color: var(--tux-colorPrimary);

    color: #fff;

    font-size: 15px;

    outline: none;

    border: none;

    cursor: pointer;
}

.choose-file-wrapper .Dropdown-arrow {
    display: none;
}

.choose-file-wrapper .Dropdown-placeholder {

}

.choose-file-wrapper .Dropdown-option {
    text-align: center;
}

.preview-content {
    width: 284px;
    height: 587px;
    /*background: url(../images/app-frame.png) no-repeat center;*/
    position: relative;
    background-size: cover;
    /* border: 1px solid; */
    display: flex;
    flex-direction: column;
}

.overlay-sidebar {
    position: absolute;
    padding-inline: 5px;
    padding-bottom: 8px;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 16px;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

.overlay-sidebar .avatar-container {
}

.overlay-sidebar .avatar-container img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.6;
}

.overlay-sidebar .music-bar-icon {
    z-index: 2;
    opacity: 0.6;
}

.overlay-sidebar .music-bar-icon img {
}

.overlay-sidebar .album-container {
    z-index: 2;
    opacity: 0.6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(from 90deg at 50% 50%, rgb(57, 57, 57) -40.11deg, rgb(21, 21, 21) 47.27deg, rgb(57, 57, 57) 143.02deg, rgb(22, 22, 22) 227.49deg, rgb(57, 57, 57) 319.89deg, rgb(21, 21, 21) 407.27deg);
}

.overlay-sidebar .album-container img {
    position: relative;
    width: 24px;
    height: 24px;
    top: 8px;
    left: 8px;
    right: 8px;
    border-radius: 50%;
}

.preview-content .preview-content-main {
    flex: 1;
    /* padding: 10px; */
    width: calc(100% - 20px);
    /* background: #f00; */
    margin: auto;
    margin-top: 9px;
    border-radius: 35px 35px 0 0;
    overflow: hidden;
    position: relative;
}

.preview-content .preview-content-main video {
    width: 100%;
    /* display: none; */
    height: 100%;
    object-fit: cover;

}

.preview-content .preview-botton {
    height: 56px;
}

.preview-content .preview-botton img {
    width: 100%;
}

.preview-content .control-container {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 0 0 35px 35px;
    height: 90px;
    padding: 0 22.5px;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 200ms ease 0s;
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
}

.preview-content:hover .control-container {
    opacity: 1;
}

.preview-content .control-container .control-operation {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.preview-content .control-container .control-operation .play-info {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.preview-content .control-container .control-operation .play-info .play-btn {

    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    cursor: pointer;
}

.preview-content .control-container .control-operation .play-info .play-btn.play {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUxMiA5ODEuMzU3NzE0QTQ2OS4yODQ1NzEgNDY5LjI4NDU3MSAwIDEgMSA1MTIgNDIuNzE1NDI5YTQ2OS4yODQ1NzEgNDY5LjI4NDU3MSAwIDAgMSAwIDkzOC42NDIyODV6TTUxMiAxMjhhMzg0IDM4NCAwIDEgMCAwIDc2OCAzODQgMzg0IDAgMCAwIDAtNzY4ek0zNzUuMDc2NTcxIDMyOS4zNjIyODZhMjQuMzU2NTcxIDI0LjM1NjU3MSAwIDAgMSAyMS43MjM0MjkgMGwyOTguNjQyMjg2IDE2Ni40YTE3LjA0MjI4NiAxNy4wNDIyODYgMCAwIDEgMCAzMS4xNTg4NTdMMzk2LjggNjkzLjM5NDI4NmEyNC4yODM0MjkgMjQuMjgzNDI5IDAgMCAxLTIxLjcyMzQyOSAwIDE4LjI4NTcxNCAxOC4yODU3MTQgMCAwIDEtMTEuMTE3NzE0LTE2LjE2NDU3MlYzNDUuNTI2ODU3YTE4LjI4NTcxNCAxOC4yODU3MTQgMCAwIDEgMTEuMTE3NzE0LTE2LjIzNzcxNHoiIC8+PC9zdmc+);
}

.preview-content .control-container .control-operation .play-info .play-btn.pause {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM0OC4yNjI0IDE3MC42NDk2aDIwLjI3NTJjMjEuODYyNCAwIDMyLjk3MjggMy40ODE2IDQzLjE2MTYgMTAuMDM1MiAxMC4yNCA2LjU1MzYgMTguMjI3MiAxNi4xNzkyIDIzLjY1NDQgMjguNDE2IDUuNDc4NCAxMi4yMzY4IDguMzk2OCAyNS42IDguMzk2OCA1MS44MTQ0djUwMi4xNjk2YzAgMjYuMjY1Ni0yLjkxODQgMzkuNTc3Ni04LjM5NjggNTEuODE0NGE2My43NDQgNjMuNzQ0IDAgMCAxLTIzLjY1NDQgMjguNDE2Yy0xMC4xODg4IDYuNTUzNi0yMS4yOTkyIDEwLjAzNTItNDMuMTYxNiAxMC4wMzUyaC0yMC4yNzUyYy0yMS44NjI0IDAtMzIuOTcyOC0zLjQ4MTYtNDMuMTYxNi0xMC4wMzUyYTYzLjc0NCA2My43NDQgMCAwIDEtMjMuNjU0NC0yOC40MTZjLTUuNDc4NC0xMi4yMzY4LTguMzk2OC0yNS42LTguMzk2OC01MS44MTQ0VjI2MC45MTUyYzAtMjYuMjY1NiAyLjkxODQtMzkuNTc3NiA4LjM5NjgtNTEuODE0NCA1LjQyNzItMTIuMjg4IDEzLjQxNDQtMjEuODYyNCAyMy42NTQ0LTI4LjQxNiAxMC4xODg4LTYuNTUzNiAyMS4yOTkyLTEwLjAzNTIgNDMuMTYxNi0xMC4wMzUyek02NTUuNDYyNCAxNzAuNjQ5NmgyMC4yNzUyYzIxLjg2MjQgMCAzMi45NzI4IDMuNDgxNiA0My4xNjE2IDEwLjAzNTIgMTAuMjQgNi41NTM2IDE4LjIyNzIgMTYuMTc5MiAyMy43MDU2IDI4LjQxNiA1LjQyNzIgMTIuMjM2OCA4LjM0NTYgMjUuNiA4LjM0NTYgNTEuODE0NHY1MDIuMTY5NmMwIDI2LjI2NTYtMi45MTg0IDM5LjU3NzYtOC4zNDU2IDUxLjgxNDRhNjMuNzk1MiA2My43OTUyIDAgMCAxLTIzLjcwNTYgMjguNDE2Yy0xMC4xODg4IDYuNTUzNi0yMS4yOTkyIDEwLjAzNTItNDMuMTYxNiAxMC4wMzUyaC0yMC4yNzUyYy0yMS44NjI0IDAtMzIuOTcyOC0zLjQ4MTYtNDMuMTYxNi0xMC4wMzUyYTYzLjc5NTIgNjMuNzk1MiAwIDAgMS0yMy42NTQ0LTI4LjQxNmMtNS40Nzg0LTEyLjIzNjgtOC4zOTY4LTI1LjYtOC4zOTY4LTUxLjgxNDRWMjYwLjkxNTJjMC0yNi4yNjU2IDIuOTE4NC0zOS41Nzc2IDguMzk2OC01MS44MTQ0IDUuNDI3Mi0xMi4yODggMTMuNDE0NC0yMS44NjI0IDIzLjY1NDQtMjguNDE2IDEwLjE4ODgtNi41NTM2IDIxLjI5OTItMTAuMDM1MiA0My4xNjE2LTEwLjAzNTJ6IiAgLz48L3N2Zz4=);
}

.preview-content .control-container .control-operation .play-info .play-time {
    font-family: "TikTok Font SemiBold", Arial, Tahoma, PingFangSC, sans-serif, "Segoe UI Emoji", "Noto Emoji";
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
    padding: 0 6px;
    color: rgb(255, 255, 255);
}

.preview-content .control-container .progress-bar-container {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    /*background-image: linear-gradient(#ff4500, #ff4500);*/
    background-image: linear-gradient(#fff, #fff);
    background-size: 0 100%;
    background-repeat: no-repeat;
}

.preview-content .control-container .progress-bar-container::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    /*background: #ff4500;*/
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 2px 0 #555;
    transition: background .3s ease-in-out;
}