body {padding: 0;border: 0;margin: 0;background-color: #eee;overflow: hidden;}
::-webkit-scrollbar {width: 0;}
::-webkit-scrollbar:horizontal {height: 0;}

#topbar {position: absolute;width: 100vw;height: 7vh;left: 0;top: 0;z-index: 1000;}
#topbar .waves-effect {position: absolute;width: 7vh;height: 7vh;}
#topbar .waves-effect img {position: absolute;width: 4vh;height: 4vh;left: 1.5vh;top: 1.5vh;}
#exit {left: 0;top: 0;}
#topbar_title {position: absolute;width: calc(100vw - 7vh) !important;height: 7vh;left: 7vh;top: 0;font-size: 2.8vh;display: flex;justify-content: start;align-items: center;}

#title {
    position: absolute;
    width: calc(100vw - 2vh);height: calc(5vh - 1px);left: 0;top: 7vh;
    font-size: 2.2vh;padding: 1vh;border: none;border-bottom: 1px solid #e0e0e0;resize: none;outline:none;font-family: Arial, Helvetica, sans-serif;border-radius: 0;
}
#title::placeholder {color: #9e9e9e;}
#title:focus {border-bottom: 1px solid #e0e0e0;box-shadow: none !important;}

#intro {
    position: absolute;width: 100vw;height: 14vh;left: 0;top: 14vh;
    font-size: 2.2vh;padding: 1vh;border: none;border-bottom: 1px solid #e0e0e0;resize: none;outline:none;font-family: Arial, Helvetica, sans-serif;border-radius: 0;
}
#intro::placeholder {color: #9e9e9e;}

#type {position: absolute;width: 100vw;height: 7vh;left: 0;top: 28vh;border-bottom: 1px solid #e0e0e0;}
#type_tip {
    position: absolute;width: 100vw;height: 7vh;left: 0;top: 0;
    font-size: 2.2vh;padding-left: 2vh;display: flex;align-items: center;
}
#type_value {
    position: absolute;width: 100vw;height: 7vh;left: 0;top: 0;
    font-size: 2.2vh;padding-right: 2vh;display: flex;justify-content: end;align-items: center;
}

#category {position: absolute;width: 100vw;height: 7vh;left: 0;top: 35vh;border-bottom: 1px solid #e0e0e0;}
#category_tip {
    position: absolute;width: 100vw;height: 7vh;left: 0;top: 0;
    font-size: 2.2vh;padding-left: 2vh;display: flex;align-items: center;
}
#category_value {
    position: absolute;width: 100vw;height: 7vh;left: 0;top: 0;
    font-size: 2.2vh;padding-right: 2vh;display: flex;justify-content: end;align-items: center;
}

#tag {position: absolute;width: 100vw;height: 14vh;left: 0;top: 42vh;border-bottom: 1px solid #e0e0e0;}
#tag_list {
    position: absolute;width: 69vw;height: 5vh;left: 3vw;top: 1vh;
    background-color: transparent;font-size: 2.2vh;padding: 1vh;border: none;color: #81d4fa;white-space: nowrap;overflow-x: auto;overflow-y: hidden;display: flex;align-items: center;
}
#tag_input {
    position: absolute;width: calc(69vw - 2vh);height: 3vh;left: 3vw;top: 8vh;
    font-size: 2.2vh;border-radius: 1vh 0 0 1vh;padding: 1vh;border: none;outline: none;
}
#tag_input::placeholder {color: #9e9e9e;}
#tag_input:focus {border:none;box-shadow: none;}
#tag .btn {position: absolute;width: 25vw;height: 5vh;font-size: 2.2vh;display: flex;justify-content: center;align-items: center;white-space: nowrap;}
#add_tag_btn {right: 3vw;top: 8vh;border-radius: 0 1vh 1vh 0;}
#delete_tag_btn {right: 3vw;top: 1vh;border-radius: 1vh;}

#file {position: absolute;width: 100vw;height: 44vh;left: 0;top: 56vh;}
.flie_text {position: absolute;width: 94vw;height: 5vh;font-size: 2.2vh;white-space: nowrap;overflow-x: auto;overflow-y: hidden;display: flex;align-items: center;}
#text_mp4 {left: 3vw;top: 0;}
#text_jpg {left: 3vw;top: 10vh;}
.file_input {
    position: absolute;width: 94vw;height: 5vh;
    padding: 0;border-radius: 1vh;font-size: 2.2vh;cursor: pointer;outline: none;border: 0;
}
.file_input::file-selector-button {background-color: transparent;color: transparent;border: none;line-height: normal;height: 100%;width: 0;}
#file_mp4 {left: 3vw;top: 5vh;}
#file_jpg {left: 3vw;top: 15vh;}
#submit_btn {
    position: absolute;width: 94vw;height: 5vh;left: 3vw;top: 25vh;
    font-size: 2.5vh;border-radius: 1vh;display: flex;justify-content: center;align-items: center;white-space: nowrap;
}
#text_tip {left: 3vw;top: 30vh;justify-content: center;cursor: pointer;}

#type_choice_bar {
    position: absolute;width: 100vw;height: 93vh;left: 0;top: 7vh;
    display: flex;flex-wrap: wrap;align-content: flex-start;overflow-x: hidden;overflow-y: auto;z-index: 999;
}
.type_choice {
    position: relative;width: 100vw;height: 5vh;left: 0;top: 0;
    font-size: 2.2vh;border-bottom: 1px solid #e0e0e0;padding: 1vh;display: flex;align-items: center;
}

#category_choice_bar {
    position: absolute;width: 100vw;height: 93vh;left: 0;top: 7vh;
    display: flex;flex-wrap: wrap;align-content: flex-start;overflow-x: hidden;overflow-y: auto;z-index: 998;
}
.category_choice {
    position: relative;width: 100vw;height: 5vh;left: 0;top: 0;
    font-size: 2.2vh;border-bottom: 1px solid #e0e0e0;padding: 1vh;display: flex;align-items: center;
}

#progress_bar {position: absolute;width: 0%;height: 93vh;left: 0;top: 7vh;background-color: rgba(0, 0, 0, 0.2);z-index: 1001;}