body{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #141218;
}



.login_content{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #141218;
}


.Loginbox{
    background-color: #222127;
    width: calc(414px - 70px);
    height: calc(380px - 70px);
    padding: 70px;
}

.Login_title{
    width: calc(100% - 20px);
    /* border-left: 5px solid #D0BCFF; */
    color: #ffffff;
    /* padding-left: 15px; */
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    
}

.border_left{
    border: 2.5px solid #D0BCFF;
    border-radius: 8px;
    height: 20px;
    margin-right: 15px;
}

.login_btn{
    border-radius: 8px;
    background: #D0BCFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #ffffff; 
    height: 40px;
    margin-top: 18px;
    cursor: pointer;
}

.Login_inputbox{
    height: 92px;
}

.input_area{
    width: 100%;
}

.input_area > div:nth-child(2){
    width: 100%;
    height: 40px;
}

.input_area > div:nth-child(2) > input{
    width: calc(100% - 45px);
    height: calc(100% - 4px);
    border: 2px solid #D0BCFF;
    padding: 0px;
    background: none;
    color: #ffffff;
    padding-left: 25px;
    padding-right: 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.Login_waringtext{
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    color : #9747FF;
}

.Login_waringtext > div{
    margin-right: 18px;
    margin-top: 4px;
}

.Login_inputtext{
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    color: #D0BCFF;
    margin-bottom: 8px;
}

.class_content{
    display: flex;
    background-color: #141218;
    width: 100%;
    height: 100vh;
}

.left_manubar{
    display: flex;
    flex-direction: column;
    width: 200px;
    height: calc(100vh - 258px);
    position: fixed;
    background-color: #211F26;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    padding: 129px 0px;
    z-index: 2;
}

.L_manuobj{
    display: flex;
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    cursor: pointer;
    height: 56px;
    align-items: center;
    
}

.L_manuicon{
    margin: 0px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.select_manuobj {
    background-color: #36343B;
}

.def_videoobj{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
}

.def_videoobj > video {
    width: 100%;
    height: 304px;
}

.main_content{
    width: calc(100% - 200px);
    height: 100%;
    padding-left: 200px;
    display: flex;
    justify-content: center;
}

.video_tap{
    width: calc(500px - 30px);
    height: calc(731px - 30px);
    padding: 15px;
    background-color: #222127;
    border-radius: 8px;
    margin-left: 30px;
    margin-top: 30px;
}

.videoP{
    width: 100%;
    height: 100%;
    
}
.video_control{
    display: flex;
    justify-content: space-between;
    width: calc(100% - 20px);
    position: absolute;
    padding: 10px;
    bottom: 10px;
}

.video_control > div{
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #CAC4D014;
    cursor: pointer;
    
}

.video_btnbox{
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-self: center;
    padding: 15px 0px;
}

.video_btnbox > div{
    display: flex;
    width: 151px;
    height: calc(44px - 20px);
    padding: 10px;
    justify-content: center;
    background-color: #D0BCFF;
    border-radius: 8px;
    margin-right: 8px;
    cursor: pointer;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

.video_btnbox > div > img{
    margin-right: 5px;
}

.video_btnbox > div > div{
    margin-top: 2px;
}


.video_btnbox > div:nth-last-child(1){
    margin-right: 0px;
}

.file_tap{
    width: calc(300px - 30px);
    min-height: calc(247px - 25px);
    padding: 15px;
    background-color: #222127;
    border-radius: 8px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.file_tap > .file_top {
    width: calc(100% - 10px);
    height: calc(34px - 10px);
    display: flex;
    justify-content: end;
}

.file_btn{
    cursor: pointer;
}

.file_middle{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    margin-bottom: 2px;
    max-height: 810px;
    overflow-y: auto;
}


.file_obj{
    width: calc(100% - 12px);
    height: calc(32px - 12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    /* cursor: pointer; */
    background-color: #424047;
    margin-bottom: 5px;
}

.file_obj:nth-last-child(1){
    margin-bottom: 0px;
}

.file_obj > .file_img{
    width: 15px;
    height: 15px;
}

.file_obj > .filedeletebtn{
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.file_obj > .file_name{
    color: #ffffff;
    display: flex;
    justify-content: start;
    flex: 1;
    margin-left: 10px;
    margin-right: 5px;
    height: 100%;
    align-items: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.file_tap > .file_bottom{
    padding: 10px;
    height: calc(60px 20px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.file_uploadbtn {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    height: 40px;
    cursor: pointer;
    background-color: #D0BCFF;
}

.chat_tap{
    width: calc(340px - 24px);
    height: calc(100% - 86px);
    background-color: #222127;
    border-radius: 8px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    padding: 12px;
    margin-bottom: 32px;
}

.chat_topbox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    padding-left: 5px;
    border-bottom: 2px solid #424047;
    margin-bottom: 40px;
}

.chat_title {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 44px;
    padding-left: 5px;
    cursor: pointer;
}

.chat_title > div{
    margin-left: 8px;
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 2px;
}

.chatinside_tap{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.user_tap{
    display: none;
}

.user_obj{
    display: flex;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    background: #424047;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.select_chattitle > div{
    color: #D0BCFF !important;
}

.chat_area{
    flex: 1;
}


.other_massage {
    background-color: #141218;
    max-width: 236px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: start;
    color: #ffffff;
    padding: 10px; 
    border-radius: 8px;
    flex-direction: column;
    min-width: 140px;
}

.my_massage{
    background-color: #424047;
    max-width: 150px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    justify-content: end;
    align-items: center;
    color: #ffffff;
    padding: 10px; 
    border-radius: 8px;
    min-width:140px;
    flex-direction: column;
}

.other_massage_box{
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    margin-top: 15px;
}

.other_username{
    color: #ffffff;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 5px;
}

.my_username{
    color: #ffffff;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 5px;
}

.my_massage_box{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-top: 15px;
    flex-direction: column;
    align-items: end;
}

.other_massage_time{
    color: #aeaeae;
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    display: flex;
    justify-content: end;
}

.chat_input{
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat_input > input{
    border: none;
    background-color: #424047;
    width: calc(100% - 30px);
    height: 40px;
    border-radius: 8px;
    color: #ffffff;
    padding: 0px 15px;
}

.chat_input > div{
    margin-left: 5px;
    width: 40px;
    height: 40px;
    background-color: #D0BCFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
}

.def_title{
    width: calc(100% - 20px);
    color: #ffffff;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 44px;
    display: flex;
}

.test_content{
    width: 1080px;
    margin-top: 95px;
}

.def_border_left{
    border: 6.5px solid #36343B;
    border-radius: 8px;
    height: 30px;
    margin-right: 15px;
}

.select_testbox{
    width: calc(100% - 160px);
    height: calc(340px - 160px);
    background-color: #222127;
    border-radius: 10px;
    padding: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.def_test {
    width: 266px;
    height: 180px;
    background-color: #D0BCFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    color: #ffffff;
    margin-right: 50px;
    border-radius: 8px;
    cursor: pointer;
}

.def_test:nth-last-child(1){
    margin-right: 0px;
}

.def_test > img{
    width: 24px;
    height: 24px;
    margin-right: 10px;
}


.test_listbox{
    display: flex;
    flex-direction: column;
    padding: 10px
}

.test_listtop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 20px);
    height: 40px;
    margin-bottom: 10px;
    padding: 0px 10px;
}

.test_listtop > div{
    color: #ffffff;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}

.testlist_deletebtn > img{
    margin-right: 5px;
    width: 24px;
    height: 24px;
}

.test_tablebox{
    width: 100%;
    height: 522px;
}

.test_listtable{
    width: 100%;
    color: #ffffff;
    max-height: 522px;
}

.test_listtable > thead{
    background-color: #36343B;
    height: 62px;
}

.test_listtable > thead > tr > td{
    width: calc(200px - 40px);
    padding: 0px 40px;
    
}

.test_listtable > thead > tr > td:nth-child(2){
    width: calc(640px - 40px);
    border-right: 5px solid #141218;
    border-left: 5px solid #141218;
}

.test_listtable > tbody > tr:nth-child(1) > td{
    border-top: 10px solid #141218;
}   

.test_listtable > tbody > tr > td{
    width: calc(200px - 40px);
    height: 40px;
    padding: 0px 40px;
    background-color: #211F26;
    border-top: 5px solid #141218;
    border-bottom: 5px solid #141218;
    color: #CAC4D0;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.test_listtable > tbody > tr > td:nth-child(2){
    width: calc(640px - 40px);
    border-right: 5px solid #141218;
    border-left: 5px solid #141218;
}

.test_addpage{
    background-color: #211f26;
    padding: 20px;
    width: 100%;
    max-width: 1080px;
    /* max-height: 564px; */
    /* height: 100%; */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.test_add_titlebox{
    display: flex;
    width: calc(100% - 20px);
    justify-content: space-between;
    margin-bottom: 10px;
    
}

.test_addtitle{
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    color: #ffffff;
}

.test_addbtn{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    cursor: pointer;
}

.test_addbtn > img{
    margin-right: 5px;
}


.add_topbox{
    height: calc(110px - 20px);
    padding: 10px;
}

.add_topbox{
    width:  calc(100% - 60px);
    border: none;
    background-color: #36343B;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    color: #ffffff;
}

input::placeholder{
    color: #ffffff;
}

.add_middle{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 24px;
    padding: 10px;
    width: calc(100% - 20px);
}

.question_obj {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    margin: 5px 0px;

}

.quiz_box{
    width: 100%;
}

.quiz_obj{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.question_obj > .question_text{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #36343B;
    background: #211F26;
}

.question_text > input{
    width: calc(100% - 60px);
    height: 100%;
    color: #CAC4D0;
    font-size: 16px;
    font-weight: 400;
    padding-left: 50px;
    padding-right: 10px;
    border: 1px solid #36343B;
    background-color: #211F26;
}

.question_checkbox{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 122px;
    height: 100%;
    border: 1px solid #36343B;
    margin-left: 5px;
}

.question_checkbox > input{
    display: none;
}


.question_checkbox input[type="radio"]:checked + label{
    background-color: #211F26;
    border-color: #CAC4D0;
}


.question_checkbox label{
    background-color: #211F26;
    border: 2px solid #CAC4D0;
    /* border-radius: 50%; */
    cursor: pointer;
    height: 14px;
    position: relative; 
    width: 14px;
}


.question_checkbox label:after {
    border: 2px solid #CAC4D0;
    border-top: none;
    border-right: none;
    content: "";
    height: 3px;
    left: 3px;
    opacity: 0;
    position: absolute;
    top: 3px;
    transform: rotate(-45deg);
    width: 6px;
}

.question_checkbox input[type="radio"]:checked + label:after {
    opacity: 1;
}

.question_checkbox input[type="radio"] {
    display: none;
}

.add_question_btn{
    padding-top: 7px;
    height: calc(44px - 7px);
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    justify-content: center;
}

.add_question_btn > div{
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.add_filetopbox{
    width: calc(100% - 60px);
    padding: 20px;
    height: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #36343B;
    margin: auto;
    margin-top: 5px;
    color: #ffffff;
}

.margin_bottom{
    margin-bottom: 77px;
}

.user_videotap{
    margin-top: 30px;
    margin-bottom: 30px;
}


.user_content{
    display: flex;
    background:linear-gradient(0deg, #5481CD 1.51%, #BBE1FF 97.12%);
    width: 100%;
    height: 100vh;
    min-width: 1440px;
    overflow-x: auto;
    z-index: 10;
    display: none;
    position: fixed;
}

.unity-desktop {
    z-index: 1;
}

.user_videotap{
    flex: 1;
}

.user_content > .main_content{
    max-width: 1440px;
    margin: auto;
    padding: 30px;
    padding-left: 200px;
    height: calc(100vh - 60px);
}

.main_video {
    width: calc(100% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
}

.main_video > video{
    width: 100%;
}

#user_addfile{
    display: none;
}

.add_filebtn{
    width: 100%;
}

.bottom_userbox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
}

.sub_video{
    flex: 1;
    width: 530px;
}

.sub_video > video{
    width: 100%;
}


.file_box{
    width: calc(403px - 30px);
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.31);
    height: calc(328px - 25px);
    padding: 15px;
    padding-bottom: 10px;
}

.add_filebtn{
    width: 100%;
    border-radius: 8px;
    border: 2px solid #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-bottom: 15px;
}

.append_filebox{
    height: 100%;
    max-height: 250px;
    overflow-y: auto;
}



.append_filebox::-webkit-scrollbar{
    width: 8px;
}


.append_filebox::-webkit-scrollbar-thumb{
    background-color: #8BAADE;
    border-radius: 10px;
}

.append_filebox::-webkit-scrollbar-track{
    background:  #BBE1FF;
}



.fileobj{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    margin-bottom: 5px;
    background-color: #b5cded;
    padding: 0px 6px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    color: #ffffff;
}

.filename{
    flex: 1;
    margin-left: 10px;
    margin-right: 5px;
}

.deletefilebtn{
    cursor: pointer;
}

.pw_waringtext , .id_waringtext{
    display: none;
}

.test_listbtnbox > div{
    color: #ffffff;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
/* 
.test_listbtnbox > div:nth-child(1){
    margin-right: 20px;
} */


.close_userbtn{
    position: fixed;
    right: 15px;
    top: 15px;
    width: 100px;
    cursor: pointer;
}

.close_userbtn > img{
    width: 100%;
    height: 100%;
}