div.theme {
    margin-bottom: 12vh;
    margin-left: 16vw;
    width: 68vw;
}

div.load_status {
    padding-top: 2vmin;
    color: #777;
    font-size: small;
    text-align: center;
}

div.theme_status {
    font-size: 1.2vw;
    font-weight: 400;
    color: red;
    margin-bottom: 2vh;
}

div.theme_title {
    display: inline-block;
}

div.theme_title p {
    font-size: 1.5vw;
    font-weight: bold;
}

div.theme_title input {
    width: 30vw;
    font-size: 1.3vw;
    font-weight: bold;
}

div.theme_poster {
    display: table;
    font-size: calc(10px + 0.2vw);
    font-weight: bold;
    margin-top: 1.8vh;
    cursor: pointer;
}

div.theme_images, div.reply_images:not(:first-child) {
    margin-top: 3vh;
}

div.theme_image, div.reply_image {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

img.theme_image_src, img.reply_image_src {
    height: 30vh;
}

div.theme_audios, div.reply_audios:not(:first-child) {
    margin-top: 2.5vh;
}

div.theme_audio:not(:first-child), div.reply_audio:not(:first-child) {
    margin-top: 2vh;
}

div.theme_audio img.add_to_playlist_icon, div.reply_audio img.add_to_playlist_icon {
    display: inline-block;
    vertical-align: middle;
}

div.theme_audio_filename {
    margin-left: 0.6vw;
    display: inline-block;
    vertical-align: middle;
}

div.theme_audio_filename p,
div.reply_audio_filename p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 57vw;
}

div.theme_sheet, div.reply_sheet:not(:first-child) {
    margin-top: 2.5vh;
}

div.theme_video {
    position: relative;
    width: 64vw;
    height: 36vw;
    margin-top: 2.5vh;
}

div.theme_video img.video_play_icon {
    position: absolute;
    width: 4vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.8;
}

p.theme_video_name {
    margin-top: 0.8vh;
    font-size: 1vw;
    font-style: italic;
    color: grey;
}

p.theme_sheet_name {
    margin-top: 0.8vh;
    font-size: 1vw;
    font-style: italic;
    color: grey;
}

div.theme_compressed_files, div.reply_compressed_files:not(:first-child) {
    margin-top: 2.5vh;
}

div.theme_compressed_file,
div.reply_compressed_file {
    display: flex;
    align-items: center;
}

div.theme_compressed_file:not(:first-child),
div.reply_compressed_file:not(:first-child) {
    margin-top: 1vh;
}

div.compressed_file_filename {
    margin-left: 0.6vw;
}

div.reply_creation_time {
    margin-top: 6px;
    font-size: 0.65vw;
    color: #bbb;
}

div.theme_text {
    margin-top: 2.5vh;
    word-break: break-all;
}

div.theme_text textarea {
    display: block;
    background-color: transparent;
    padding: 1.6vh 1vw;
    margin-top: calc(-1.6vh - 1px);
    margin-left: calc(-1vw - 1px);
    line-height: 1.42857143;
    font-size: 1.1vw;
    width: 100%;
}

p.confirm_label {
    margin-top: 2vh;
    font-weight: bold;
    color: red;
}

div.add_proposal_button, div.delete_proposal_button, div.confirm_theme_type_button, div.confirm_visible_range_button {
    display: table;
    margin-top: 1vh;
    font-family: ShangYa;
    font-size: 1.1vw;
    color: #ffffff;
    background-color: #6e6e6e;
    padding: 1vh 1.5vh;
    border-radius: 6px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

select.select_proposal_type, select.select_proposal_position {
    display: block;
    margin-top: 2.5vh;
}

div.proposal {
    overflow: auto;
    min-height: 220px;
    margin-top: 1.35%;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
}

div.proposal_type_label {
    font-size: 1.2vw;
    font-weight: bold;
}

div.application_user_profile_nickname {
    font-size: 1vw;
    margin-top: 0.5vh;
    font-weight: 400;
    cursor: pointer;
}

div.application img {
    width: 7vw;
    margin-top: 0.5vh;
    cursor: pointer;
}

div.proposal_user_profile_information {
    display: inline-block;
    width: 13.5%;
    padding-bottom: 5px;
    margin-top: 1.35%;
    vertical-align: top;
    /* 兼容360浏览器*/
    float: left;
    margin-right: 4px;
}

div.replies {
    display: inline-block;
    width: 85.5%;
    min-height: 220px;
    border-left: 1px solid #f2f2f2;
}

div.reply {
    padding: 3% 2% 3%;
}

div.reply:not(:last-child) {
    border-bottom: 1px solid #f2f2f2;
}

div.upload_reply {
    overflow: hidden;
}

div.upload_reply_form {
    margin: 2vh auto 0;
}

div.upload_reply_form label {
    display: block;
    font-family: ShangYa;
    font-size: 1.1vw;
    font-weight: 700;
    margin-bottom: 1.5vh;
    text-align: center;
}

textarea.upload_reply_text {
    display: block;
    width: 95%;
    margin: 1.5vh auto 1.5vh;
    height: 20vh;
}

div.upload_reply div.submit_button {
    margin-bottom: 1vh;

}

div.reply_audio_filename {
    margin-left: 0.6vw;
    display: inline-block;
    vertical-align: middle;
}

div.reply_video {
    position: relative;
    width: 55.5vw;
    height: 31.22vw;
}

div.reply_video:not(:first-child) {
    margin-top: 2.5vh;
}

div.reply_text {
    margin-top: 2.5vh;
}

div.reply_text textarea {
    display: block;
    background-color: transparent;
    padding: 1.6vh 1vw;
    margin-top: calc(-1.6vh - 1px);
    margin-left: calc(-1vw - 1px);
    line-height: 1.42857143;
    font-size: 1.1vw;
    width: 100%;
}

div.suggestion_text textarea {
    display: block;
    background-color: transparent;
    padding: 2.4vh 1vw;
    margin-top: calc(-2.4vh - 1px);
    margin-left: calc(-1vw - 1px);
    line-height: 1.45;
    font-size: 1vw;
    width: 100%;
}

div.suggestion_user_nickname {
    font-weight: 800;
    margin-top: 3vh;
    font-size: 1vw;
    line-height: 1.45;
}

div.suggestion_text p {
    font-size: 1vw;
    line-height: 1.45;
}

div.suggestion:not(:first-child) {
    margin-top: 0.8vh;
}

div.upload_suggestion_button {
    margin-top: 2vh;
    font-family: ShangYa;
    font-size: 1.1vw;
    color: #ffffff;
    background-color: #6e6e6e;
    padding: 1vh 1.5vh;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.upload_suggestion_button:hover,
div.cancel_upload_suggestion_button:hover,
div.submit_upload_suggestion_button:hover {
    background-color: #545454;
}

div.submit_upload_suggestion_button {
    display: inline-block;
    margin-top: 2vh;
    width: 50%;
    padding: 1vh 0;
    font-family: ShangYa;
    font-size: 1.1vw;
    color: #ffffff;
    background-color: #6e6e6e;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.cancel_upload_suggestion_button {
    display: inline-block;
    width: 50%;
    padding: 1vh 0;
    float: left;
    margin-top: 2vh;
    font-family: ShangYa;
    font-size: 1.1vw;
    color: #ffffff;
    background-color: #6e6e6e;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

textarea.upload_suggestion_textarea {
    width: 99%;
    margin-top: 1vh;
    height: 30vh;
    font-size: 1vw;
}

/*作曲建议部分*/
div.composition_advice_container_in_proposal {
    margin: 2vh auto 1vh;
    width: 96%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.composition_advice_container_in_proposal textarea.request_text_input {
    width: 100%;
    height: 16vh;
    font-size: 1.1vw;
    padding: 8px;
    box-sizing: border-box;
}

div.composition_advice_container_in_proposal div.composition_advice_buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}

div.composition_advice_container_in_proposal div.get_composition_advice_button {
    border-bottom-left-radius: 6px;
}

div.composition_advice_container_in_proposal div.close_composition_advice_button {
    border-bottom-right-radius: 6px;
}

div.composition_advice_container_in_proposal div.get_composition_advice_button,
div.composition_advice_container_in_proposal div.close_composition_advice_button {
    font-size: 1.1vw;
    color: #ffffff;
    background-color: #6e6e6e;
    flex: 1;
    text-align: center;
    padding: 1vh 1.5vh;
    font-family: ShangYa;
    cursor: pointer;
}

div.composition_advice_container_in_proposal div.get_composition_advice_button:hover,
div.composition_advice_container_in_proposal div.close_composition_advice_button:hover {
    background-color: #545454;
}

div.composition_advice_container_in_proposal p.error,
div.composition_advice_container_in_proposal p.answer {
    margin-top: 1.2vh;
    width: 100%;
    white-space: pre-wrap;
}

div.composition_advice_container_in_proposal p.remain {
    margin-top: 0.5vh;
    width: 100%;
    color: grey;
}

@media screen and (max-width: 1024px) {
    div.proposal_user_profile_information {
        width: 14.5%;
        margin-top: 8px;
    }

    div.replies {
        width: 81.5%;
        padding-top: 8px;
    }
}

@media screen and (max-width: 768px) {
    div.theme_title p {
        font-size: 17px;
    }

    div.theme_poster {
        font-size: 12px;
    }

    div.theme_video {
        margin-top: 12px;
    }

    div.proposal_type_label {
        font-size: 12px;
    }

    div.application_user_profile_nickname {
        font-size: 10px;
    }

    div.suggestions {
        font-size: 10px;
    }

    div.proposal {
        margin-top: 11px;
    }

    img.compress_file_icon {
        width: 5.5vw;
        height: 5.5vw;
    }

    div.theme_status,
    div.theme_audio_filename p,
    div.theme_text p,
    div.reply_text p,
    div.suggestion_user_nickname,
    div.suggestion_text p {
        font-size: 13px;
        line-height: 19px;
    }

    div.reply_creation_time {
        font-size: 10px;
    }
}

@media screen and (max-width: 630px) {
    div.theme {
        margin-left: 9vw;
        width: 82vw;
    }

    div.application img {
        width: 93%;
        border-radius: 3px;
    }

    img.theme_image_src, img.reply_image_src {
        width: 76vw;
        height: auto;
    }
}

@media screen and (max-width: 425px) {
    img.compress_file_icon {
        width: 8vw;
        height: 8vw;
    }
}

@media screen and (max-width: 330px) {
    img.compress_file_icon {
        width: 10vw;
        height: 10vw;
    }
}