@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');    
    body {
        font-family: 'Prompt', sans-serif;
        text-align: center;
        color: #172853;
        font-size: 15px;
        line-height: 1.6;
        margin: 0
    }
    
    .overlay_check {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        visibility: hidden;
        opacity: 0;
    }
    
    .header {
        top: -10;
        left: 0;
        margin: 0 5%;
        padding-top: 0%;
        padding-bottom: 5%;
        width: 90%;
        background: linear-gradient(45deg, rgba(23, 40, 83, 1) 0%, rgb(247, 125, 198) 100%);
        margin-bottom: 50px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    
    .overlay_check:target {
        visibility: visible;
        opacity: 1;
    }
    
    .popup_check {
        padding: 20px;
        background: #fff;
        border-radius: 5px;
        width: 60%;
        position: relative;
        margin: 8% auto;
    }
    
    .popup_check .close_check {
        position: absolute;
        top: -10px;
        right: 20px;
        transition: all 200ms;
        font-size: 50px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
    }
    
    .popup_check .close_check:hover {
        color: #ff6666;
        text-decoration: none;
        cursor: pointer;
    }
    
    .popup_check .content_check {
        max-height: 60%;
        overflow: auto;
    }
    
    .column_1 {
        float: left;
        width: 65%;
        padding: 0px;
    }
    
    .column_2 {
        float: left;
        width: 50%;
        padding: 0px;
    }
    
    .column_3 {
        float: left;
        width: 33.33%;
        padding: 0px;
    }
    
    .column_score_1 {
        float: left;
        width: 90%;
        padding: 0px;
    }
    
    .column_score_3 {
        float: left;
        width: 60%;
        padding: 0px;
    }
    
    .column_show_level {
        float: left;
        padding: 5px;
        font-size: 14px;
        width: 22.5%;
    }
    
    .column_score_4 {
        float: left;
        width: 40%;
        padding: 0px;
    }
    
    .column_score_2 {
        display: inline-block;
        margin: 1%;
    }
    
    .column_score_5 {
        display: inline-block;
        margin: 1%;
    }
    
    .column_score_6 {
        width: 50%;
        float: left;
    }
    
    .column_score_7 {
        width: 100%;
    }
    
    .column_4 {
        float: left;
        width: 25%;
        padding: 0px;
    }
    
    .column_60 {
        float: left;
        width: 60%;
        padding: 0px;
    }
    
    .column_50 {
        float: left;
        width: 49%;
        padding: 0px;
    }
    
    .column_47 {
        float: left;
        width: 47%;
        padding: 0px;
    }
    
    .column_4_g {
        float: left;
        width: 19%;
        padding: 0px;
        margin-right: 10;
    }
    
    .column_g {
        float: left;
        width: 215px;
        padding: 0px;
    }
    
    .column_g_2 {
        float: left;
        width: 90%;
    }
    
    .column_4_d {
        float: left;
        width: 25%;
        padding: 0px;
    }
    
    .bg_level_1 {
        background-image: url(img/system/bg_on1.jpg);
        background-size: cover;
    }
    
    .column_4_a {
        float: left;
        width: 25%;
        padding: 0px;
    }
    
    .column_4_b {
        float: left;
        width: 14%;
        padding: 0px;
        text-align: center;
    }
    
    .column_show_level_2 {
        width: 45%;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px;
        padding: 5;
    }
    
    .column_show_level_1 {
        float: left;
        width: 45%;
        border-radius: 15px;
        padding: 5;
        margin: 1.25%;
        margin-top: 2%;
    }
    
    .column_4_c {
        float: left;
        width: 14%;
        padding: 0px;
        text-align: center;
    }
    
    .column_s {
        padding: 40px;
        margin: 20px;
        background-color: #f2f2f2;
        font-size: 20px;
    }
    
    .column_e {
        padding: 40px;
        margin: 20px;
        background-color: #f2f2f2;
        font-size: 20px;
    }
    
    .column_status {
        float: left;
        width: 23.5%;
        padding: 40px;
        margin: 20px;
        background-color: #f2f2f2;
        font-size: 18px;
        border-radius: 15px;
    }
    
    .column_repass {
        width: 40%;
        padding: 20px;
        font-size: 20px;
        border-radius: 15px;
        margin: auto;
        background-color: #f2f2f2;
    }
    
    .column_status3 {
        float: left;
        width: 42%;
        padding: 20px;
        margin: 20px;
        background-color: #f2f2f2;
        font-size: 18px;
        border-radius: 15px;
    }
    
    .column_checkin {
        float: left;
        width: 27.5%;
        padding: 15px;
        margin: 15px;
        background-color: #f2f2f2;
        font-size: 18px;
        border-radius: 15px;
    }
    
    .column_checkin :hover {
        background-color: #1100ff;
    }
    
    .column_status1 {
        float: left;
        background-color: #f2f2f2;
        width: 92%;
        padding: 20px;
        font-size: 18px;
        border-radius: 15px;
    }
    
    .box_webboard {
        float: left;
        background-color: #f2f2f2;
        width: 100%;
        padding: 20px;
        font-size: 18px;
        border-radius: 15px;
    }
    
    .box_date {
        float: left;
        background-color: #f2f2f2;
        width: 28%;
        padding: 20px;
        font-size: 18px;
        border-radius: 15px;
        margin: 10px;
    }
    
    .box_date_2 {
        float: left;
        width: 16.5%;
    }
    
    .box_status {
        float: left;
        width: 90%;
        margin: 1% 5%;
        padding-top: 15px;
        padding-bottom: 20px;
        background-color: #f2f2f2;
        font-size: 16px;
        border-radius: 50px;
    }
    
    .box_name_sub {
        color: #ffffff;
        padding: 15 50;
        background: linear-gradient(45deg, rgba(23, 40, 83, 1) 0%, rgb(247, 125, 198) 100%);
        margin-bottom: 50px;
        border-radius: 50px;
    }
    
    .box_name_sub2 {
        margin: 0 5%;
        padding-top: 3%;
        padding-bottom: 6%;
        width: 90%;
        background: linear-gradient(180deg, rgba(242, 242, 242, 1) 20%, rgba(171, 97, 97, 0) 100%);
        margin-bottom: 50px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
    }
    
    .column_status5 {
        padding: 20 20;
        margin: 14px;
        font-size: 18px;
        border-radius: 30px;
    }
    
    .column_check {
        width: 20%;
        padding: 20 20;
        font-size: 18px;
        border-radius: 100px;
        margin: auto;
    }
    
    .column_b_g {
        background-color: #f2f2f2;
    }
    
    .column_b_b {
        background-color: #afbfe9;
    }
    
    .column_b_gr {
        background-color: #80ffcc;
    }
    
    .column_b_r {
        background-color: #ffb3b3;
    }
    
    .column_b_o {
        background-color: #ffbf80;
    }
    
    .column_b_y {
        background-color: #ffeb99;
    }
    
    .column_bo_g {
        border-style: solid;
        background-color: #e6fff5;
        border-color: #00e68a;
    }
    
    .column_status2 {
        float: left;
        width: 27.5%;
        padding: 20px;
        margin: 10px;
        font-size: 15px;
        border-radius: 15px;
    }
    
    .column_5 {
        float: left;
        width: 20%;
        padding: 0px;
    }
    
    .column_5_status {
        float: left;
        width: 20%;
        padding: 0px;
    }
    
    .column_7 {
        float: left;
        width: 14.2%;
        padding: 0px;
    }
    
    .column_l {
        float: left;
    }
    
    .column_r {
        float: right;
    }
    
    .p_h_100 {
        padding: 100 0 0 0;
    }
    
    .p_h_80 {
        padding: 80 0 0 0;
    }
    
    .p_h_50 {
        padding: 50 0 0 0;
    }
    
    .p_h_60 {
        padding: 60 0 0 0;
    }
    
    .p_h_5p {
        padding: 5% 0 0 0;
    }
    
    .p_h_5p_2 {
        padding: 5% 0;
    }
    
    .p_h_3p {
        padding: 3% 0 0 0;
    }
    
    .p_h_2p {
        padding: 2% 0 0 0;
    }
    
    .m_r_5p {
        margin: 0 6%;
    }
    
    .m_r_30 {
        margin: 0 30;
    }
    
    .p_2p {
        padding: 2% 0;
    }
    
    .p_h_10p {
        padding: 13% 0 0 0;
    }
    
    .p_u_5p {
        padding: 3% 0 0 0;
    }
    
    .p_chap {
        padding: 20 10 0 40;
    }
    
    .p_l {
        padding: 10 20%;
    }
    
    .p_chap_de {
        padding: 5 20 5 45;
    }
    
    .row_2:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .row_3 {
        content: "";
        display: table;
        clear: both;
        margin: auto;
    }
    
    .f_s {
        font-family: 'Prompt', sans-serif;
    }
    
    .t_l {
        text-align: left;
    }
    
    .t_r {
        text-align: right;
    }
    
    .t_c {
        text-align: center;
    }
    
    .c_w {
        color: #ffffff;
    }
    
    .f_120 {
        font-size: 120px;
    }
    
    .f_200 {
        font-size: 200px;
    }
    
    .f_100 {
        font-size: 100px;
    }
    
    .f_90 {
        font-size: 90px;
    }
    
    .f_90_i {
        font-size: 90px;
    }
    
    .f_80 {
        font-size: 80px;
    }
    
    .f_80_s {
        font-size: 70px;
    }
    
    .f_70 {
        font-size: 70px;
    }
    
    .f_60 {
        font-size: 60px;
    }
    
    .f_60_i {
        font-size: 60px;
    }
    
    .f_50 {
        font-size: 50px;
    }
    
    .f_40 {
        font-size: 40px;
    }
    
    .f_40_s {
        font-size: 40px;
    }
    
    .f_30 {
        font-size: 30px;
    }
    
    .f_30_m {
        font-size: 30px;
    }
    
    .f_30_s {
        font-size: 30px;
    }
    
    .f_25 {
        font-size: 25px;
    }
    
    .f_20 {
        font-size: 20px;
    }
    
    .f_16 {
        font-size: 16px;
    }
    
    .f_14 {
        font-size: 14px;
    }
    
    .f_c_g {
        color: #00e68a;
    }
    
    .f_c_y {
        color: #ffd11a;
    }
    
    .f_c_r {
        color: #ff6666;
    }
    
    .f_c_o {
        color: #ff8c1a;
    }
    
    .f_c_w {
        color: #ffffff;
    }
    
    .f_c_gr {
        color: #a5a5a5;
    }
    
    .t_hover_g:hover {
        color: #4b70ce;
    }
    
    .bt_back_w {
        background-color: #ffffff;
        color: #172853;
        border: 3px solid #172853;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
        border-radius: 50px;
        font-family: 'Prompt', sans-serif;
    }
    
    .bt_back_b {
        background-color: #172853;
        border: 3px solid #172853;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 15px;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
        border-radius: 50px;
        font-family: 'Prompt', sans-serif;
    }
    
    .bt_back_gray {
        background-color: #f2f2f2;
        border: 3px solid #f2f2f2;
        text-decoration: none;
        display: inline-block;
        font-size: 15px;
        height: 35px;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
        border-radius: 50px;
        font-family: 'Prompt', sans-serif;
    }
    
    .bt_width_130 {
        width: 130px;
        height: 35px;
    }
    
    .bt_width_150 {
        width: 150px;
        height: 35px;
    }
    
    .bt_width_200 {
        width: 200px;
        height: 35px;
    }
    
    .bt_hover_b_w:hover {
        background-color: #ffffff;
    }
    
    .bt_hover_red:hover {
        background-color: #ffffff;
        color: #ff6666;
    }
    
    .bt_hover_red2:hover {
        background-color: #ffffff;
        color: #ff6666;
        border: 3px solid #ff6666;
    }
    
    .bt_hover_g:hover {
        background-color: #ffffff;
        color: #00e68a;
        border: 3px solid #00e68a;
    }
    
    .bt_hover_y:hover {
        background-color: #ffffff;
        color: #ffd11a;
        border: 3px solid #ffd11a;
    }
    
    .bt_hover_blue:hover {
        background-color: #ffffff;
        color: #172853;
        border: 3px solid #172853;
    }
    
    .bt_hover_w:hover {
        background-color: #172853;
        color: #ffffff;
        border: 3px solid #172853;
    }
    
    .bt_status {
        color: #172853;
        text-align: center;
        font-size: 15px;
        border-radius: 50px;
        width: 160px;
        height: 35px;
        font-family: 'Prompt', sans-serif;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
    }
    
    .bt_color_r {
        background-color: #ff6666;
        color: #ffffff;
        border: 3px solid #ff6666;
    }
    
    .bt_color_y {
        background-color: #ffd11a;
        border: 3px solid #ffd11a;
    }
    
    .bt_color_g {
        background-color: #00e68a;
        border: 3px solid #00e68a;
    }
    
    .width_100 {
        width: 100%;
        margin: auto;
    }
    
    .width_95 {
        width: 95%;
        margin: auto;
    }
    
    .width_90 {
        width: 90%;
        margin: auto;
    }
    
    .w_img_80 {
        width: 75%;
        margin: auto;
    }
    
    .width_85 {
        width: 85%;
        margin: auto;
    }
    
    .width_80 {
        width: 80%;
        margin: auto;
    }
    
    .width_75 {
        width: 75%;
        margin: auto;
    }
    
    .width_70 {
        width: 70%;
        margin: auto;
    }
    
    .width_60 {
        width: 60%;
        margin: auto;
    }
    
    .width_50 {
        width: 50%;
        margin: auto;
    }
    
    .width_40 {
        width: 40%;
        margin: auto;
    }
    
    .width_30 {
        width: 30%;
        margin: auto;
    }
    
    .img_ex_width {
        width: 40%;
        margin: auto;
    }
    
    .width_450px {
        width: 450px;
    }
    
    .width_350px {
        width: 414px;
    }
    
    .width_50px {
        width: 50px;
    }
    
    .width_20px {
        width: 20px;
    }
    
    img {
        border-radius: 50%;
    }
    
    .img_s {
        border-radius: 0%;
    }
    
    .show_chap {
        background-color: #f2f2f2;
        padding: 25;
        margin: 10 0 20 0;
    }
    
    .show_table {
        display: grid;
        grid-template-columns: 80% 20%;
        grid-template-areas: "menu content"
    }
    
    .show_table>* {
        background-color: #f2f2f2;
        margin: 10 0 10 0;
        text-align: center;
    }
    
    .show_info {
        padding: 25 10 25 40;
        display: flex;
        grid-area: menu;
        background-color: #f2f2f2;
        ;
    }
    
    .show_status {
        grid-area: content;
        padding: 25 5 25 10;
        background-color: #f2f2f2;
    }
    
    .input {
        background: transparent;
        border: 2px solid rgba(23, 40, 83, 1.0);
        border-radius: 4px;
        color: #172853;
        padding: 4px;
        margin-top: 10px;
        font-family: 'Prompt', sans-serif;
    }
    
    .input_w_ {
        font-size: 15px;
        font-weight: 400;
    }
    
    table {
        border-collapse: collapse;
        border-radius: 15px;
        overflow: hidden
    }
    
    tr:nth-child(even) {
        background-color: #f2f2f2
    }
    
    ul {
        list-style-type: none;
        margin: 10px;
        padding: 0;
        overflow: hidden;
        background-color: none;
    }
    
    li {
        float: right;
    }
    
    li a {
        display: block;
        color: #ffffff;
        text-align: center;
        padding: 3px 30px;
        margin: 0 5 0 0px;
        text-decoration: none;
        background-color: #0b1734;
        border-radius: 50px;
        border: 3px solid #172853;
    }
    
    li a:hover {
        border-radius: 50px;
        background-color: #ffffff;
        color: #172853;
        border: 3px solid #172853;
    }
    
    .login .box {
        padding: 60px;
        padding-top: 40px;
        padding-bottom: 40px;
        width: 450px;
        background-color: #FFF;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
        border-radius: 15px;
        margin: auto;
        margin-top: 5%;
    }
    
    .login input[type=text] {
        width: 100%;
        height: 35px;
        font-size: 16px;
        padding-left: 15px;
        background: transparent;
        color: #56a4f7;
        border: 0px;
        font-family: 'Prompt', sans-serif;
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #dadada;
        background-color: #f4f4f4;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    }
    
    .login input[type=text]:focus {
        outline: none;
        border: 1px solid #56a4f7;
    }
    
    .login input[type=password] {
        width: 100%;
        height: 35px;
        font-size: 16px;
        padding-left: 15px;
        background: transparent;
        color: #56a4f7;
        border: 0px;
        font-family: 'Prompt', sans-serif;
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #dadada;
        background-color: #f4f4f4;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    }
    
     ::-webkit-input-placeholder {
        color: #bbbbbb;
        font-weight: 300;
    }
    
    .login input[type=password]:focus {
        outline: none;
        border: 1px solid #56a4f7;
    }
    
    .login input[type=submit] {
        margin-top: 25px;
        font-family: 'Prompt', sans-serif;
        width: 100%;
        height: 35px;
        font-size: 16px;
        background: linear-gradient(45deg, rgba(23, 40, 83, 1) 0%, rgb(247, 125, 198) 100%);
        border: 0px;
        margin-bottom: 20px;
        border-radius: 5px;
        color: #FFF;
        border: 1px solid #dadada;
        background-color: #f4f4f4;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    }
    
    .login input[type=submit]:hover {
        outline: none;
        color: #56a4f7;
        border: 1px solid #56a4f7;
        background: #FFF;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;
    }
    
     ::-webkit-input-placeholder {
        color: rgba(23, 40, 83, 0.6);
    }
    
     ::-moz-input-placeholder {
        color: rgba(23, 40, 83, 0.6);
    }
    
    input[type=text] {
        height: 30px;
        background: transparent;
        border: 2px solid rgba(23, 40, 83, 1.0);
        border-radius: 4px;
        color: #172853;
        font-size: 15px;
        font-weight: 400;
        font-family: 'Prompt', sans-serif;
        margin: 5px;
    }
    
    input[type=date] {
        height: 30px;
        background: transparent;
        border: 2px solid rgba(23, 40, 83, 1.0);
        border-radius: 4px;
        color: #172853;
        font-size: 15px;
        font-family: 'Prompt', sans-serif;
        margin: 5px;
    }
    
    input[type=date] {
        height: 30px;
        background: transparent;
        border: 2px solid rgba(23, 40, 83, 1.0);
        border-radius: 4px;
        color: #172853;
        font-size: 15px;
        font-family: 'Prompt', sans-serif;
        margin: 5px;
    }
    
    input[type=time] {
        height: 30px;
        background: transparent;
        border: 2px solid rgba(23, 40, 83, 1.0);
        border-radius: 4px;
        color: #172853;
        font-size: 15px;
        font-family: 'Prompt', sans-serif;
        margin: 5px;
    }
    
    select {
        font-family: 'Prompt', sans-serif;
        font-size: 15px;
        padding: 3px;
        border-radius: 4px;
        height: 35px;
        background: transparent;
        color: #172853;
        border: 2px solid #172853;
        margin: 5px;
    }
    
    .time {
        float: left;
        width: 18%;
        padding: 25px;
        margin: 20px;
        background-color: #f2f2f2;
        font-size: 20px;
        border-radius: 15px;
    }
    
    .f_status5 {
        font-size: 30px;
        color: #ff6666;
    }
    
    .f_status2 {
        font-size: 30px;
        color: #ffaa00;
    }
    
    .f_status3 {
        font-size: 30px;
        color: #1a75ff;
    }
    
    .f_status4 {
        font-size: 30px;
        color: #ac00e6;
    }
    
    .f_status1 {
        font-size: 30px;
        color: #00e68a;
    }
    
    .f_status6 {
        font-size: 30px;
        color: #009999;
    }
    
    .f_c_status5 {
        color: #ff6666;
    }
    
    .f_c_status2 {
        color: #ffaa00;
    }
    
    .f_c_status3 {
        color: #1a75ff;
    }
    
    .f_c_status4 {
        color: #ac00e6;
    }
    
    .f_c_status1 {
        color: #00e68a;
    }
    
    .f_c_status6 {
        color: #009999;
    }
    
    #box {
        margin: 50px 20%;
        text-align: left;
    }
    
    #question {
        color: #666666;
        font-weight: 100;
        font-size: 16px;
        margin: 20px 21%;
        font-family: sans-serif;
        border-radius: 5px;
    }
    
    a {
        color: #172853;
        text-decoration: none;
    }
    
    .card {
        width: 18%;
        height: 102vh;
        background: linear-gradient(135deg, rgb(16, 28, 58) 15%, rgb(247, 125, 198) 100%);
        position: fixed;
        font-family: 'Prompt', sans-serif;
    }
    
    .foo {
        color: #ffffff;
        bottom: 0;
        margin-top: 120%;
    }
    
    .icon-bar a {
        display: block;
        padding: 10px 10%;
        transition: all 0.3s ease;
        font-family: 'Prompt', sans-serif;
        color: #fff;
    }
    
    .icon-bar a:hover {
        background-color: #fff;
        color: #40026a;
    }
    
    .active {
        background-color: #fff;
    }
    
    .m {
        padding: 0px 0px 0px 10%;
    }
    
    .f_c_b {
        color: #40026a;
    }
    
    .column_r_80 {
        float: right;
        width: 80%;
        padding-right: 10px;
    }
    
    th {
        background-color: #172853;
        color: #ffffff;
    }
    
    .hid1 {
        display: block;
    }
    
    .hid2 {
        display: none;
    }
    
    .img2 {
        border-radius: 0;
    }
    
    #chart-container {
        width: 135%;
        height: auto;
        margin-left: -12%;
    }
    
    #chart-container2 {
        width: 100%;
        height: auto;
    }
    
    .status_g0 {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 5px;
        background-color: rgba(51, 214, 255, 1.0);
        border-radius: 50px;
    }
    
    .status_g1 {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 5px;
        background-color: rgba(255, 204, 102, 1.0);
        border-radius: 50px;
    }
    
    .status_g15 {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 5px;
        background-color: rgba(204, 51, 255, 1.0);
        border-radius: 50px;
    }
    
    .status_g2 {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 5px;
        background-color: rgba(0, 255, 204, 1.0);
        border-radius: 50px;
    }
    
    .status_g25 {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 5px;
        background-color: rgba(255, 153, 102, 1.0);
        border-radius: 50px;
    }
    
    .status_g3 {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 5px;
        background-color: rgba(51, 133, 255, 1.0);
        border-radius: 50px;
    }
    
    .status_g35 {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 5px;
        background-color: rgba(255, 102, 102, 1.0);
        border-radius: 50px;
    }
    
    .status_g4 {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 5px;
        background-color: rgba(153, 255, 51, 1.0);
        border-radius: 50px;
    }
    
    .status_g0_bg {
        background-color: rgba(51, 214, 255, 0.2);
        border-radius: 10px;
        margin-top: 10;
        padding: 1%;
    }
    
    .status_g1_bg {
        background-color: rgba(255, 204, 102, 0.2);
        border-radius: 10px;
        margin-top: 10;
        padding: 1%;
    }
    
    .status_g15_bg {
        background-color: rgba(204, 51, 255, 0.2);
        border-radius: 10px;
        margin-top: 10;
        padding: 1%;
    }
    
    .status_g2_bg {
        background-color: rgba(0, 255, 204, 0.2);
        border-radius: 10px;
        margin-top: 10;
        padding: 1%;
    }
    
    .status_g25_bg {
        background-color: rgba(255, 153, 102, 0.2);
        border-radius: 10px;
        margin-top: 10;
        padding: 1%;
    }
    
    .status_g3_bg {
        background-color: rgba(51, 133, 255, 0.2);
        border-radius: 10px;
        margin-top: 10;
        padding: 1%;
    }
    
    .status_g35_bg {
        background-color: rgba(255, 102, 102, 0.2);
        border-radius: 10px;
        margin-top: 10;
        padding: 1%;
    }
    
    .status_g4_bg {
        background-color: rgba(153, 255, 51, 0.2);
        border-radius: 10px;
        margin-top: 10;
        padding: 1%;
    }
    
    .zzz img {
        position: absolute;
        z-index: 100;
        text-align: right;
        margin-bottom: 0px;
    }
    
    .tabset>input[type="radio"] {
        position: absolute;
        left: -200vw;
    }
    
    .tabset .tab-panel {
        display: none;
    }
    
    .tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
    .tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
    .tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
    .tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
    .tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5),
    .tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6) {
        display: block;
    }
    
    .tabset>label {
        position: relative;
        display: inline-block;
        padding: 15px 25px 25px;
        border: 1px solid transparent;
        border-bottom: 0;
        cursor: pointer;
        font-weight: 400;
        font-size: 18px;
    }
    
    .tabset>label::after {
        content: "";
        position: absolute;
        left: 10px;
        bottom: 10px;
        width: 95%;
        height: 4px;
        background: #8d8d8d;
    }
    
    input:focus-visible+label {
        outline: 2px solid rgba(0, 102, 204, 1);
        border-radius: 3px;
    }
    
    .tabset>label:hover,
    .tabset>input:focus+label,
    .tabset>input:checked+label {
        color: #f66949;
    }
    
    .tabset>label:hover::after,
    .tabset>input:focus+label::after,
    .tabset>input:checked+label::after {
        background: #f66949;
    }
    
    .tabset>input:checked+label {
        border-color: #ccc;
        border-bottom: 1px solid #fff;
        margin-bottom: -1px;
    }
    
    .tab-panel {
        padding: 30px 0;
        border-top: 1px solid #ccc;
    }
    
    .tabset {
        width: 100%;
    }
    
    .box_center {
        display: flex;
        justify-content: center;
    }
    
    .textAlignVer {
        display: block;
        filter: flipv fliph;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        transform: rotate(-90deg);
        position: relative;
        width: 20px;
        white-space: nowrap;
    }