/* Ring */
.ring_a{
   display: inline-block;
   box-sizing: border-box;
   position: fixed;
   top: 0px;
   left: 50%;
   z-index: 0;
   width: 700px;
   height: 700px;
   margin-left: -350px;
   border: 1px solid #ffd0e6;
   border-radius: 50%;

   animation: spin_c 17s linear infinite;
}
   .dark .ring_a{
      border: 1px solid #cd768a;
   }
   .ring_a_1{
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      top: -25px;
      left: 350px;
      width: 50px;
      height: 50px;
      background: #fff;
      border: 1px solid #ffd0e6;
      border-radius: 50%;

      animation: spin_c 7s linear infinite;
   }
   .dark .ring_a_1{
      background: #523241;
      border: 1px solid #cd768a;
   }
   .ring_a_1::before{
      content: '';
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      top: 70px;
      right: -25px;
      width: 20px;
      height: 20px;
      background: #ffd0e6;
      border: 1px solid #ffd0e6;
      border-radius: 50%;
   }
   .dark .ring_a_1::before{
      background: #557470;
      border: 1px solid #84bfb7;
   }
.ring_b{
   display: inline-block;
   box-sizing: border-box;
   position: fixed;
   top: -200px;
   left: 50%;
   z-index: 0;
   width: 1200px;
   height: 1200px;
   margin-left: -550px;
   border: 1px solid #ffd0e6;
   border-radius: 50%;

   animation: spin_cc 10s linear infinite;
}
   .dark .ring_b{
      border: 1px solid #cd768a;
   }
   .ring_b::before{
      content: '';
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      left: 600px;
      top: -15px;
      width: 30px;
      height: 30px;
      background: #ffd0e6;
      border: 1px solid #ffd0e6;
      border-radius: 50%;
   }
   .dark .ring_b::before{
      background: #557470;
      border: 1px solid #84bfb7;
   }
.ring_c{
   display: inline-block;
   box-sizing: border-box;
   position: fixed;
   top: -400px;
   left: 50%;
   z-index: 0;
   width: 1600px;
   height: 1600px;
   margin-left: -800px;
   border: 1px solid #ffd0e6;
   border-radius: 50%;

   animation: spin_c 30s linear infinite;
}
   .dark .ring_c{
      border: 1px solid #cd768a;
   }
   .ring_c_1{
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      bottom: -35px;
      left: 800px;
      width: 70px;
      height: 70px;
      background: #fff;
      border: 1px solid #ffd0e6;
      border-radius: 50%;

      animation: spin_cc 5s linear infinite;
   }
      .dark .ring_c_1{
         background: #2c2934;
         border: 1px solid #cd768a;
      }
      .ring_c_1::before{
         content: '';
         display: inline-block;
         box-sizing: border-box;
         position: absolute;
         top: 70px;
         right: -25px;
         width: 10px;
         height: 10px;
         background: #ffd0e6;
         border: 1px solid #ffd0e6;
         border-radius: 50%;
      }
      .dark .ring_c_1::before{
         background: #683f52;
         border: 1px solid #683f52;
      }
@keyframes spin_c { 
   100% { 
      -webkit-transform: rotate(-360deg); 
      transform:rotate(-360deg); 
   } 
}
@keyframes spin_cc { 
   100% { 
      -webkit-transform: rotate(360deg); 
      transform:rotate(360deg); 
   } 
}



/* Home */
.home{
   display: block;
}
.home-logo{
   display: block;
   width: 100%;
   max-width: 400px;
   padding-top: 30px;
}
.home-text{
   display: block;
   text-align: center;
}
.home-text_title{
   display: block;
   padding-top: 30px;
   font-family: 'prompt_medium';
   font-size: 3.6rem;
   line-height: 40px;
}
.home-text_des{
   display: block;
   padding-top: 10px;
   font-family: 'prompt_regular';
   font-size: 2.2rem;
   color: #c19a54;
}
/* Home Grade */
.home-grade{
   display: block;
   box-sizing: border-box;
   width: 100%;
   max-width: 500px;
   height: 200px;
   background-image: url('../img/home-grade_wing_1.png');
   background-size: 500px 200px;
   background-position: top;
   background-repeat: no-repeat;
   /* background-color: #75c19e; */
   margin: 0px auto 0px;
   padding: 30px 0px 0px;
   text-align: center;

   animation: home_grade 1.5s infinite;
}
   @keyframes home_grade {
      0% ,100% {background-image: url('../img/home-grade_wing_1.png');}
      35% {background-image: url('../img/home-grade_wing_2.png');}
      65% {background-image: url('../img/home-grade_wing_3.png');}
   }
.home-grade_button{
   cursor: pointer;
   display: inline-block;
   background: #c19a54;
   border-radius: 20px;
   padding: 15px 30px;
   color: #fff;

   box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.15);
   user-select: none;
   transition: all 0.3s ease;
}
   .dark .home-grade_button{
      color: #fff;
   }
   .home-grade_button:hover{
      background: #9e7e43;
   }
.home-grade_button_title{
   display: block;
   font-family: 'prompt_medium';
   font-size: 2.4rem;
}
.home-grade_button_des{
   display: block;
}
/* Responsive */
@media only screen and (min-width: 500px){
   .home-grade{
      height: 200px;
      margin: 20px auto 0px;
      padding: 60px 10px 0px;

      background-position: center;
   }
}



/* Grade */
.grade{
   display: block;
}
/* Grade Search */
.grade-search{
   display: block;
   padding: 10px 10px 20px;
   text-align: center;
}
.grade-search_row{
   display: block;
}
.grade-search_input{
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
   width: calc( 100% - 60px );
   max-width: 300px;
   background: #efefef;
   padding: 10px 10px;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   border: 0px;
   outline: 0px;
   font-family: 'prompt';
   text-align: center;
   line-height: 30px;
   color: #555;
}
.grade-search_submit{
   cursor: pointer;
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
   width: 60px;
   height: 50px;
   background-image: url('../img/grade_button_search.png');
   background-size: 50px 50px;
   background-repeat: no-repeat;
   background-position: center;
   background-color: #c19a54;
   padding: 10px 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border: 0px;
   outline: 0px;
   font-family: 'prompt_regular';
   font-size: 2.2rem;
   color: #fff !important;
   /* box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.15); */
   user-select: none;
   transition: all 0.3s ease;
}
.grade-search_des{
   display: block;
   padding-top: 5px;
   font-size: 1.8rem;
   color: #555;
}
   .dark .grade-search_des{
      color: #84bfb7;
   }
/* Grade Paper */
.grade-craft{
   min-height: 300px;
   padding: 50px 10px 70px;
}
.grade-paper{
   display: block;
   box-sizing: border-box;
   width: 100%;
   max-width: 600px;
   background: #fff;
   margin: 0px auto;
   padding: 10px;
   border-radius: 20px;
   text-align: center;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
   .dark .grade-paper{
      background: #262626;
   }
/* Grade Paper Header */
.grade-paper_header{
   display: block;
   border-bottom: 1px solid #ffdada;
   padding: 30px 0px 20px;
   /* margin: 10px 0px; */
   margin-bottom: 20px;
}
   .dark .grade-paper_header{
      border-bottom: 1px solid #48353a;
   }
.grade-paper_name{
   display: block;
   font-family: 'prompt_medium';
   font-size: 2.6rem;
}
   .grade-paper_name span{
      font-family: 'prompt_medium';
      font-size: 2.2rem;
      color: #ff77a9;
   }
      .dark .grade-paper_name span{
         color: #84bfb7;
      }
.grade-paper_des{
   display: block;
   padding-top: 3px;
   font-family: 'prompt_medium';
   font-size: 2rem;
}
   .grade-paper_des span{
      color: #59a99e;
   }

/* Grade Paper Row*/
.grade-paper_row{
   display: block;
   padding: 10px;
   border-bottom: 1px solid #eee;
}
   .dark .grade-paper_row{
      border-bottom: 1px solid #443434;
   }
.grade-paper_number{
   display: inline-block;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   text-align: center;
   line-height: 30px;
   
   background: #fb7ab7;
   font-family: 'prompt';
   font-size: 2rem;
   color: #fff;
}
.grade-paper_subject{
   display: inline-block;
   vertical-align: middle;
   width: calc( 100% - 90px );
   font-family: 'prompt_regular';
   text-align: left;
   font-size: 2.2rem;
}
   .grade-paper_subject span{
      font-family: 'prompt_regular';
      font-size: 2rem;
      color: #fb7ab7;
   }
.grade-paper_grade{
   display: inline-block;
   vertical-align: middle;
   width: 90px;
   text-align: center;
   font-family: 'prompt_semibold';
   font-size: 2.4rem;
   color: #8d63af;
}
   .grade-paper_grade_green{
      color: #75c19e;
   }
   .grade-paper_grade_red{
      color: #d47171;
   }
/* Grade Paper Sum & Gpa */
.grade-paper_gpa{
   display: block;
   padding: 30px 0px 20px;
}
.grade-paper_gpa_number{
   display: inline-block;
   position: relative;
   font-family: 'prompt_medium';
   font-size: 4rem;
   line-height: 30px;
   color: #fb7ab7;
}
   .grade-paper_gpa_number{
      font-size: 5rem;
      line-height: 50px;
      color: #8d63af;
   }
.grade-paper_gpa_text{
   display: block;   
}
/* Grade Empty */
.grade-empty{
   display: block;
   width: 100%;
   max-width: 500px;
   margin: 0px auto 0px;
   text-align: center;
}
.grade-empty_icon{
   display: inline-block;
   width: 100%;
   max-width: 250px;
}
.grade-empty_text{
   display: block;
}
.grade-empty_text_title{
   display: block;
   font-family: 'prompt_medium';
   font-size: 2.6rem;
}
.grade-empty_text_des{
   display: block;
   padding-top: 5px;
   color: #555;
}
   .dark .grade-empty_text_des{
      color: #84bfb7;
   }



.header-title_room{
   display: block;
   padding-top: 5px;
   font-family: 'prompt_medium';
   font-size: 2.4rem;
   text-align: center;
   color: #ff77a9;
}



/* Tool */
.tool{
   display: block;
   box-sizing: border-box;
   width: 100%;
   /* max-width: 800px; */
   margin: 0 auto;
   padding: 20px 10px 30px;
   text-align: center;
}
.tool-back{
   display: inline-block;
}
.tool-back_icon{
   display: inline-block;
   vertical-align: middle;
   width: 30px;
   height: 30px;
   background-image: url('../img/icon-admin_history_back.png');
   background-size: 30px 30px;
   background-repeat: no-repeat;
   background-position: center;
}
   .dark .tool-back_icon{
      background-image: url('../img/icon-admin_history_back_g.png');
   }
.tool-back_text{
   display: inline-block;
   vertical-align: middle;
}
.tool-list{
   display: block;
}
.tool-item{
   display: inline-block;
   padding: 10px;
   text-align: center;
}
.tool-item_icon{
   display: block;
   width: 100px;
}
.tool-item_text{
   display: block;
}
/* Tool Logout */
.tool-logout{
   display: block;
   padding-top: 10px;
}
   .login-submit{
      border-radius: 15px !important;
   }
/* Tool Table */
.tool-table{
   display: block;
}
.tool-table_header{
   display: block;
   padding: 20px 0px 20px;
   text-align: center;
}
.tool-table_header_button{
   cursor: pointer;
   display: inline-block;
   box-sizing: border-box;
   background: #75668d;
   padding: 10px 20px;
   border-radius: 15px;
   border: 0px;
   outline: 0px;
   font-family: 'prompt_regular';
   font-size: 2.2rem;
   color: #fff !important;
   box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 15%);
   user-select: none;
   transition: all 0.3s ease;
}
.tool-table_header_des{
   display: block;
   padding-top: 10px;
}
.tool-table_body{
   display: block;
   box-sizing: border-box;
   max-width: 800px;
   background: #fff;
   margin: 10px auto 20px;
   padding: 3px;
   border-radius: 10px;
   box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 10%);
}
.tool-table_title{
   display: block;
   box-sizing: border-box;
   padding: 10px 10px 5px;
   font-family: 'prompt_medium';
   font-size: 2.2rem;
   text-align: left;
}
.tool-table_row{
   display: block;
   box-sizing: border-box;
   background: #f5f5f5;
   padding: 5px 7px;
   border: 3px solid #fff;
   border-radius: 10px;
   transition: background 0.2s ease;
}
.tool-table_name{
   display: inline-block;
   vertical-align: top;
   width: calc( 100% - 100px );
   text-align: left;
}
.tool-table_edit{
   display: inline-block;
   vertical-align: top;
   width: 100px;
   text-align: right;
}
.tool-table_ebit_button{
   cursor: pointer;
   display: inline-block;
   box-sizing: border-box;
   background: #ddd;
   padding: 0px 10px;
   border-radius: 5px;
}
/* Tool Room */
.tool-room{
   display: block;
   padding: 10px 0px;
}
.tool-room_list{
   display: block;
   box-sizing: border-box;
   padding: 10px 0px;
}
.tool-room_list_title{
   display: block;
   width: 70px;
   background: #b3945b;
   margin: 0 auto;
   /* padding: 5px; */
   border-radius: 10px;
   /* font-family: 'prompt_medium'; */
   font-size: 2rem;
   text-align: center;
   color: #fff;
}
.tool-room_item{
   cursor: pointer;
   display: inline-block;
   vertical-align: top;
   position: relative;
   background: #fff;
   margin: 10px 5px;
   padding: 15px 20px 15px;
   border-radius: 20px;
   transition: all 0.3s ease;
   box-shadow: rgb(50 50 93 / 25%) 0px 25px 50px -20px, rgb(0 0 0 / 30%) 0px 15px 30px -30px;
}
   .tool-room_item:hover{
      margin: 0px 5px 20px;
      box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px;
   }
.tool-room_item_icon{
   display: inline-block;
   width: 100px;
}
.tool-room_item_qty{
   display: inline-block;
   position: absolute;
   top: 0px;
   right: 0px;
   padding: 0px 7px 0px 5px;
   background: #ab9fa9;
   border-bottom-left-radius: 10px;
   border-top-right-radius: 20px;
   font-size: 1.5rem;
   line-height: 24px;
   color: #fff;
}
.tool-room_item_title{
   display: block;
   font-family: 'prompt_medium';
   font-size: 2.2rem;
   color: #c5a56c;
}
.tool-room_item_des{
   display: block;
   line-height: 20px;
   color: #555;
}

/* Tool Student */
.tool-student{
   display: block;
}
.tool-student_header{
   display: block;
   padding: 20px 0px 10px;
   text-align: center;
}
.tool-student_header_button{
   display: inline-block;
   background: #b3945b;
   padding: 10px 20px;
   border-radius: 15px;
   font-family: 'prompt_medium';
   font-size: 2.4rem;
   color: #fff;
}
   .dark .tool-student_header_button{
      color: #fff;
   }
.tool-student_header_des{
   display: block;
   padding-top: 10px;
}
.tool-student_qty{
   display: block;
   padding: 10px;
   font-family: 'prompt_medium';
   font-size: 2.4rem;
}
/* Tool Student Header */
.tool-student_table_header{
   display: block;
   padding-top: 10px;
   text-align: center;
}
.tool-student_table_header_title{
   display: inline-block;
   background: #b3945b;
   padding: 5px 15px;
   border-radius: 10px;
   font-family: 'prompt_medium';
   font-size: 2.4rem;
   color: #fff;
}
.tool-student_table_header_des{
   display: block;
   padding-top: 5px;
   font-family: 'prompt_medium';
   font-size: 2.4rem;
   color: #b3945b;
}
/* Tool Student Header */
.tool-student_table_header,
.tool-student_table_footer,
.tool-student_table_row{
   display: block;
   padding: 5px 0px;
   transition: all 0.3s ease;
   border-radius: 10px;
}
   .tool-student_table_row:hover{
      background: rgba(0, 0, 0, 0.1);
   }
   .dark .tool-student_table_row:hover{
      background: #72b9b53b;
   }
   .tool-student_table_header{
      padding-top: 10px;
   }
   .tool-student_table_footer{
      padding-bottom: 30px;
   }
.tool-student_table_header_name,
.tool-student_table_header_gpa,
.tool-student_table_footer_name,
.tool-student_table_footer_gpa,
.tool-student_table_name,
.tool-student_table_gpa{
   display: inline-block;
   box-sizing: border-box;
   vertical-align: top;
   width: 430px;
   text-align: right;
   padding: 10px;
   padding-right: 5px;
   font-size: 2.2rem;

   /* background: #75c19e; */
}
   .tool-student_table_header_name,
   .tool-student_table_header_gpa{
      vertical-align: bottom;
   }
   .tool-student_table_footer_name,
   .tool-student_table_footer_gpa{
      vertical-align: top;
   }
   .tool-student_table_name_text{
      /* filter: blur(2.5px); */
      display: inline-block;
      vertical-align: top;
      /* font-family: 'prompt_regular'; */
      font-family: 'prompt_medium';
      /* font-size: 2rem; */
   }
   .tool-student_table_noun{
      display: inline-block;
      vertical-align: top;
      background: #b3945b;
      border-radius: 10px;
      padding: 0px 5px;
      line-height: 30px;
      font-size: 1.8rem;
      color: #fff;
   }
   .tool-student_table_name .number{
      vertical-align: top;
      font-size: 1.8rem;
   }
   .tool-student_table_header_gpa,
   .tool-student_table_footer_gpa,
   .tool-student_table_gpa{
      width: 170px;
      padding-left: 0px;
      font-family: 'prompt_medium';
      font-size: 2rem;
      text-align: left;
   }
   .tool-student_table_gpa_text{
      display: inline-block;
      vertical-align: top;
      background: #cd768a;
      padding: 0px 10px;
      border-radius: 10px;
      color: #fff;
   }
   .tool-student_table_edit{
      cursor: pointer;
      display: inline-block;
      box-sizing: border-box;
      vertical-align: top;
      width: 30px;
      height: 30px;
      background-color: #b396a9;
      background-image: url('../img/icon_admin_edit.png');
      background-size: 20px 20px;
      background-repeat: no-repeat;
      background-position: center;
      /* margin: -5px 0; */
      /* padding: 0px 10px; */
      border-radius: 10px;
      font-family: 'prompt_regular';
      color: #739590;
      transition: all 0.3s ease;
   }
      .tool-student_table_edit:hover{
         background-color: #977c8e;
         color: #fff;
      }
.tool-student_table_header_subject,
.tool-student_table_footer_subject{
   display: inline-block;
   vertical-align: bottom;
   box-sizing: border-box;
   width: 50px;
   padding: 15px 10px;
   padding-top: 0px;
   background: #ffffff00;
   font-family: 'prompt_regular';
   font-size: 2.4rem;
   line-height: 30px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   transform: rotate(180deg);
   text-align: right;
   color: #739590;
}
   .tool-student_table_footer_subject{
      vertical-align: top;
   }
   .tool-student_table_header_subject{
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      text-align: right;
   }
.tool-student_table_subject_row{
   display: inline-block;
   box-sizing: border-box;
   vertical-align: top;
}
.tool-student_table_empty{
   display: inline-block;
   box-sizing: border-box;
   vertical-align: top;
   width: 100%;
   max-width: 600px;
   background: rgba(0, 0, 0, 0.1);
   margin: 30px auto 10px;
   padding: 10px;
   border-radius: 10px;
}
.tool-student_table_subject{
   cursor: pointer;
   display: inline-block;
   box-sizing: border-box;
   vertical-align: top;
   position: relative;
   width: 50px;
   background: #6b8983;
   padding: 10px;
   border-radius: 10px;
   text-align: center;
   color: #fff;
   user-select: none;
   transition: all 0.3s ease;
}
   .tool-student_table_subject:hover{
      background: #48645f;
   }
.tool-student_table_subject_popup{
   opacity: 0.95;
   display: none;
   /* display: inline-block; */
   box-sizing: border-box;
   position: absolute;
   bottom: 65px;
   /* max-width: 200px; */
   background: #222;
   /* margin-left: -100px; */
   padding: 5px 10px;
   border-radius: 10px;
   color: #fff;

   left: 50%;
   transform: translate(-50%, 0);
}
   .tool-student_table_subject_popup::after{
      content: '';
      display: inline-block;
      position: absolute;
      bottom: -10px;
      left: 50%;
      width: 30px;
      height: 30px;
      margin-left: -15px;
      background: #222;
      border-radius: 10px;
      transform: rotate(45deg);
   }
.tool-student_table_subject_popup_text{
   display: inline-block;
   position: relative;
   z-index: 1;
   background: #222;
   white-space: nowrap;
}
/* Tool Student */
.tool-form{
   display: block;
   width: 100%;
   max-width: 640px;
   margin: 30px auto 20px;
   text-align: left;
}
.tool-form_wrap{
   display: block;
   box-sizing: border-box;
   background: #fff;
   padding: 10px 0px;
   border-radius: 10px;
   box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 10%);
}
   .dark .tool-form_wrap{
      background: #242326;
   }
.tool-form_row{
   display: block;
   padding: 5px 15px 5px;
}
.tool-form_des{
   display: block;
   padding-top: 5px;
   font-size: 1.8rem;
   line-height: 26px;
   color: #66b7ab;
}
/* Subject */
.tool-form_student_row{
   display: block;
   padding: 5px 0px 5px;
   border-bottom: 1px solid #eee;
}
   .tool-form_student_row:nth-last-child(1){
      border-bottom: 0px;
   }
   .dark .tool-form_student_row{
      border-color: #38343e;
   }
/* Tool Form Header */
.tool-form_header{
   display: block;
   padding: 10px 0px 10px;
   text-align: center;
}
.tool-form_header_title{
   display: block;
   font-family: 'prompt_semibold';
   font-size: 2.6rem;
}
.tool-form_header_des{
   display: block;
}
.tool-form_col_1_1,
.tool-form_col_1_2,
.tool-form_col_2_1{
   display: inline-block;
   box-sizing: border-box;
}
   .tool-form_col_1_1:nth-child(1){
      width: 50%;
      padding-right: 5px;
   }
   .tool-form_col_1_1:nth-child(2){
      width: 50%;
      padding-left: 5px;
   }
   .tool-form_col_1_2:nth-child(1){
      width: 150px;
      padding-right: 5px;
   }
   .tool-form_col_1_2:nth-child(2){
      width: calc( 100% - 150px );
      padding-left: 5px;
   }
   .tool-form_col_2_1:nth-child(1){
      width: calc( 100% - 200px );
      padding-right: 5px;
   }
   .tool-form_col_2_1:nth-child(2){
      width: 200px;
      padding-left: 5px;
   }
.tool-form_title{
   display: block;
   padding: 15px 0px 5px;
   font-family: 'prompt_semibold';
   font-size: 2.4rem;
   text-align: center;
}
.tool-form_label{
   display: inline-block;
   box-sizing: border-box;
   vertical-align: top;
   width: 50%;
   padding: 8px 0px;
   font-family: 'prompt_regular';
   font-size: 2rem;
   line-height: 24px;
   color: #333;
}
   .dark .tool-form_label{
      color: #84bfb7;
   }
.tool-form_input{
   display: inline-block;
   box-sizing: border-box;
   vertical-align: top;
   width: 50%;
   /* background: #eee; */
   background: #e7edec;
   padding: 5px 10px;
   border-radius: 10px;
   border: 0px;
   outline: 0px;
   font-family: 'prompt';
   text-align: left;
   line-height: 30px;
   color: #555;
}
   .tool-form_input::placeholder{
      color: #bbb;
      opacity: 1;
   }
   .dark .tool-form_input{
      background: #18181a;
      color: #cd768a;
   }
.tool-form_selector{
   display: inline-block;
   box-sizing: border-box;
   vertical-align: top;
   width: 50%;
   background: #e7edec;
   padding: 5px 10px;
   border-radius: 10px;
   border: 0px;
   outline: 0px;
   font-family: 'prompt';
   text-align: left;
   line-height: 30px;
   color: #555;
}
   .dark .tool-form_selector{
      background: #18181a;
      color: #cd768a;
   }
/* Tool Form Submit */
.tool-form_submit{
   display: block;
   padding: 10px 0px 10px;
   text-align: center;
}
.tool-form_submit_text{
   display: block;
   padding: 0px 10px 10px;
}
.tool-form_submit_button{
   cursor: pointer;
   display: inline-block;
   box-sizing: border-box;
   background: #75668d;
   padding: 10px 20px;
   border-radius: 10px;
   border: 0px;
   outline: 0px;
   font-family: 'prompt_regular';
   font-size: 2.2rem;
   color: #fff !important;
   box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.15);
   user-select: none;
   transition: all 0.3s ease;
}
   .tool-form_submit_button:hover{
      background: #605375;
   }
/* Submit Button Del */
.tool-form_submit_del{
   cursor: pointer;
   display: inline-block;
   background: #728f8b;
   padding: 0px 10px;
   border-radius: 10px;
   color: #fff;
   user-select: none;
   transition: all 0.3s ease;
}
   .tool-form_submit_del:hover{
      background: #55726e;
   }
.tool-form_submit_del_dialog{
   /* display: inline-block; */
   display: none;
   background: rgba(0, 0, 0, 0.1);
   margin-top: 10px;
   margin-bottom: 20px;
   padding: 10px 20px;
   border-radius: 20px;
}
.tool-form_submit_del_text{
   display: block;
   padding-bottom: 5px;
   color: #222;
}
   .dark .tool-form_submit_del_text{
      color: #84bfb7;
   }
.tool-form_submit_del_confirm{
   cursor: pointer;
   display: inline-block;
   background: #c57474;
   padding: 0px 10px;
   border-radius: 10px;
   color: #fff;
   user-select: none;
   transition: all 0.3s ease;
}
   .dark .tool-form_submit_del_confirm{
      color: #fff;
   }
   .tool-form_submit_del_confirm:hover{
      background: #9c4e4e;
   }
.tool-form_submit_del_cancel{
   cursor: pointer;
   display: inline-block;
   background: #84a9a3;
   padding: 0px 10px;
   border-radius: 10px;
   color: #fff;
   user-select: none;
   transition: all 0.3s ease;
}
   .tool-form_submit_del_cancel:hover{
      background: #5f8881;
   }
.tool-form_switch{
   display: inline-block;
   text-align: right;
}
.tool-form_switch_button{
   cursor: pointer;
   display: inline-block;
   box-sizing: border-box;
   background: #7ebbb2;
   padding: 5px 20px;
   border-radius: 10px;
   border: 0px;
   outline: 0px;
   font-family: 'prompt_regular';
   font-size: 2.2rem;
   color: #fff !important;
   /* box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 15%); */
   user-select: none;
   transition: all 0.3s ease;
}
   .tool-form_switch_button.red{
      background: #f06e6e;
   }
/* Student Form */
.form-student_number_label{
   width: 60px;
}
   .form-student_number_input{
      width: calc( 100% - 60px );
   }
.form-student_name_label{
   width: 100px;
}
   .form-student_name_input{
      width: calc( 100% - 100px );
   }
.form-student_nickname_label{
   width: 70px;
}
   .form-student_nickname_input{
      width: calc( 100% - 70px );
   }
.form-student_gender_label{
   width: 50px;
}
   .form-student_gender_input{
      width: calc( 100% - 50px );
   }
.form-student_citizen_label{
   width: 165px;
}
   .form-student_citizen_input{
      width: calc( 100% - 165px );
   }
.form-student_subject_label{
   width: calc( 100% - 100px );
}
   .form-student_subject_input{
      width: 100px;
      text-align: center;
   }
/* Form Student Gpa Row */
.form-student_gpa_row{
   padding-top: 10px;
}
.form-student_gpa_label{
   width: 180px;
}
   .form-student_gpa_input{
      width: calc( 100% - 180px );
   }

.form-room_label{
   width: 90px;
}
   .form-room_input{
      width: calc( 100% - 90px );
   }
.form-setting_year{
   width: 110px;
}
   .form-setting_year_input{
      width: calc( 100% - 110px );
   }
.form-setting_grade{
   width: 170px;
}
   .form-setting_grade_input{
      width: calc( 100% - 170px );
   }