body,
html {
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
    background: rgba(237, 240, 255, 1);
}

.Sidebar {
    width: 240px;
    height: 100vh;
    background: rgba(28, 28, 30, 1);
    display: flex;
    flex-direction: column;
}

.Sidebar_header {
    width: 100%;
    border-bottom: 1px solid rgba(71, 71, 71, 1);
    padding: 40px 20px;
}

.Sidebar_header img {
    width: 80px;
    height: auto;
    display: block;
    margin: auto;
}

.Sidebar_header h1 {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin-top: 20px;
    font-weight: 700;
    font-style: italic;
}

.Sidebar_menuwrap {
    flex: 1;
    overflow-y: auto;
    padding: 25px 15px;
}

.Sidebar_menuwrap::-webkit-scrollbar {
    width: 0;
}

.Sidebar_menutitle {
    font-size: 12px;
    color: rgba(213, 229, 255, 1);
    line-height: 1;
    padding-left: 15px;
}

.Sidebar_menuwrap ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.Sidebar_menuwrap ul li {
    width: 100%;
}

.Sidebar_menuwrap ul li>a {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 15px;
    cursor: pointer;
    position: relative;
    border-radius: 999px;
}

.Sidebar_menuwrap ul li>a svg {
    width: 24px;
    height: auto;
    flex-shrink: 0;
}

.Sidebar_menuwrap ul li>a span {
    flex: 1;
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
    line-height: 1;
}

.Sidebar_menuwrap ul li>a.active,
.Sidebar_menuwrap ul li>a:hover {
    background: linear-gradient(270deg, rgba(98, 57, 235, 0) 0%, rgba(98, 57, 235, 0.77) 90.21%, rgba(98, 57, 235, 1) 100%);
}

.Sidebar_submenu {
    width: 100%;
    display: none;
    margin-top: 10px;
}

.Sidebar_li_open>a+.Sidebar_submenu,
.Sidebar_menuwrap ul li:has(> a > .Sidebar_arrow.ZsyRotate) .Sidebar_submenu {
    display: block;
}

.Sidebar_submenu a {
    font-size: 14px;
    color: rgba(170, 170, 170, 1);
    display: block;
    padding: 10px 0 10px 45px;
}

.Sidebar_submenu a:hover,
.Sidebar_submenu a.active {
    color: rgba(255, 255, 255);
}

.Sidebar_menuwrap ul li>a svg.Sidebar_arrow {
    width: 16px;
    height: auto;
    transition: transform 0.2s ease;
}

.Sidebar_menuwrap ul li.Sidebar_li_open>a svg.Sidebar_arrow {
    transform: rotate(90deg);
}

.Main_content {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.Main_max {
    flex: 1;
    padding: 25px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Heater_top {
    width: 100%;
    background: rgba(255, 255, 255, 0.81);
    box-shadow: 0px 1px 0px rgba(217, 237, 255, 1);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    padding: 15px 25px;
}

.Heater_top button {
    font-size: 16px;
    color: rgba(106, 79, 255, 1);
    cursor: pointer;
}

.Store_select {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.Store_select_menu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 120px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scaleY(0.1) translateX(-50%);
    transform-origin: top;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 100;
}

.Store_select svg {
    width: 20px;
    height: auto;
    transition: transform 0.25s ease;
}


.Store_select:hover svg {
    transform: rotate(180deg);
}

.Store_select:hover .Store_select_menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scaleY(1) translateX(-50%);
}

.Store_select_max {
    width: 100%;
    margin-top: 10px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0px 0px 10px 5px #00000010;
}

.Store_select_max a {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
    color: #000000;
    cursor: pointer;
}

.Store_select_max a:hover {
    background: rgba(106, 79, 255, 0.08);
    color: rgba(106, 79, 255, 1);
}

.Store_select_max a.Store_select_active {
    color: rgba(106, 79, 255, 1);
    background: rgba(106, 79, 255, 0.08);
}

.Heater_userwrap {
    width: max-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

.Heater_userwrap img {
    width: 40px;
    aspect-ratio: 4 / 4;
    border-radius: 50%;
    object-fit: cover;
}

.Heater_userwrap p {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
    font-weight: 700;
}

.Heater_usertext {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.Heater_usertext span {
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
    line-height: 1;
}

.Heater_usertext p {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
    font-weight: 700;
}

.Heater_userwrap svg {
    width: 20px;
    height: auto;
    display: block;
    transition: transform 0.25s ease;
}

.Heater_user {
    width: 100%;
    position: absolute;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scaleY(0.1) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    transform-origin: top;
}

.Heater_user_menu {
    width: 100%;
    margin-top: 10px;
    background: #ffffff;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    color: #000000;
    box-shadow: 0px 0px 10px 5px #00000010;
}

.Heater_userwrap:hover .Heater_user {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scaleY(1) translateY(0);
}

.Heater_userwrap:hover svg {
    transform: rotate(180deg);
}

.Heater_title {
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1;
}

.Heater_title span {
    color: rgba(88, 93, 179, 1);
}

.Config_form {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    padding: 20px;
    overflow-y: auto;
}

.Config_form form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.Form_item {
    width: 100%;
}

.Form_item p {
    font-size: 14px;
    color: rgb(92, 92, 92);
}

.Form_item p span {
    color: red;
}

.Form_item>input,
.Form_item .Input_down {
    margin-top: 5px;
}

.Form_item input[type="file"] {
    display: none;
}

.Form_item textarea {
    width: 100%;
    height: 100px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
    margin-top: 5px;
    resize: none;
}

.Preview_img {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    border: 1px solid #d2d2d7;
    background: #000000;
    margin-top: 10px;
}

.Preview_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.Btn_upload {
    width: 90px;
    display: block;
    line-height: 32px;
    font-size: 12px;
    text-align: center;
    color: rgba(106, 79, 255, 1);
    border: 1px solid rgba(106, 79, 255, 1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 5px;
}

.Btn_upload:hover {
    background: rgba(106, 79, 255, 1);
    color: #fff;
}

.Btn_submit {
    width: 100%;
    height: 40px;
    background: rgba(106, 79, 255, 1);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.Main_title {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.Main_title a {
    width: max-content;
    position: relative;
    font-size: 16px;
    color: rgba(103, 103, 103, 1);
    line-height: 1;
    padding-bottom: 10px;
    cursor: pointer;
}

.Main_title a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(98, 57, 235, 1) 0%, rgba(98, 57, 235, 0.77) 9.79%, rgba(98, 57, 235, 0) 100%);
    transition: all 0.3s;
}

.Main_title a.active::after,
.Main_title a:hover::after {
    width: 100%;
}

.Main_but {
    width: max-content;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.Main_but button {
    width: max-content;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(219, 229, 241, 1);
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(106, 79, 255, 1);
    cursor: pointer;
}

.Main_but button svg {
    width: 14px;
    aspect-ratio: 4 / 4;
    object-fit: cover;
}

.Main_but button:nth-child(1) {
    background: rgba(106, 79, 255, 1);
    border: 1px solid rgba(106, 79, 255, 1);
    color: #fff;
}

.Manage {
    flex: 1;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow: hidden;
}

.Table {
    width: 100%;
    overflow: auto;
}

.Table_list {
    width: 100%;
    height: 100%;
}

.Table_list thead {
    width: 100%;
    background: #ffffff;
}

.Table_list thead tr {
    width: 100%;
}

.Table_list th {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    font-weight: 700;
    text-align: center;
    white-space: normal;
    border-bottom: 1px solid rgba(217, 233, 239, 1);
    padding: 0 10px;
    padding-bottom: 15px;
    max-width: 200px;
    min-width: 100px;
}

.Table_list tbody tr {
    width: 100%;
}

.Table_list td {
    padding: 15px 10px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    border-bottom: 1px dashed rgba(217, 233, 239, 1);
    white-space: normal;
    background: rgba(255, 255, 255, 1);
    text-align: center;
    max-width: 200px;
}


.Table_list td.align_left,
.Table_list th.align_left {
    text-align: left;
}


.Table_list tbody tr:hover td {
    background: rgba(245, 247, 250, 1);
}

.Fixed_left {
    position: sticky;
    left: 0;
    z-index: 5;
    background: rgb(255, 255, 255);
}

.Fixed_right {
    position: sticky;
    min-width: 130px;
    right: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 1);
}

.Table.Table_scrolled .Fixed_left::after {
    content: "";
    width: 1px;
    height: 100%;
    background: rgba(217, 233, 239, 1);
    position: absolute;
    top: 0;
    right: 0;
}

.Table.Table_scrolled .Fixed_right::after {
    content: "";
    width: 1px;
    height: 100%;
    background: rgba(217, 233, 239, 1);
    position: absolute;
    top: 0;
    left: 0;
}

.Table_list thead .Fixed_left,
.Table_list thead .Fixed_right {
    z-index: 15;
    background: rgb(255, 255, 255);
}

.Form_admin {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Table_but {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.Table_but button {
    width: 20px;
    cursor: pointer;
}

.Table_but button svg {
    width: 100%;
    height: auto;
}

.Login_box {
    width: 100%;
    height: 100vh;
    background: linear-gradient(51deg, #d3d4ff 0%, #ffffff 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.Login_box_max {
    width: 100%;
    max-width: 1400px;
    padding: 15px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 50px;
}

.Login_box_max>img {
    width: 100%;
    height: auto;
}

.Login_form h2 {
    font-size: 36px;
    color: #000000;
    font-weight: 900;
    line-height: 1.2;
}

.Login_tabs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 30px;
}

.Login_tab {
    flex: 1;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition: all 0.3s;
}

.Login_tab:hover,
.Login_tab.active {
    background: rgba(106, 79, 255, 1);
    color: #fff;
}

.Login_form_content {
    width: 100%;
}

.Login_form_content_item {
    width: 100%;
    display: none;
}

.Login_form_content_item:nth-child(1) {
    display: block;
}

.Login_form form {
    gap: 20px;
    margin-top: 30px;
}

.Login_form form button {
    width: 100%;
    height: 40px;
    background: rgba(106, 79, 255, 1);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.Switch_status {
    width: 44px;
    height: 24px;
    position: relative;
    cursor: pointer;
    margin: auto;
}

.Switch_track {
    width: 100%;
    height: 100%;
    background: rgba(216, 216, 216, 1);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.Switch_thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.Switch_status[data-status="1"] .Switch_track {
    background: rgba(106, 79, 255, 1);
}

.Switch_status[data-status="1"] .Switch_thumb {
    transform: translateX(20px);
}

.Form_san {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.Filter_bar {
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    padding: 15px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.Filter_bar>input,
.Filter_bar .Input_down {
    width: 200px;
}

.Filter_bar .Main_but {
    margin: 0;
}

.Operation_filter {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 120px;
}

.Operation_filter_content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 50px;
}

.Operation_filter_row {
    width: max-content;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.Operation_filter_row p {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
}

.Operation_filter_row a {
    width: max-content;
    line-height: 30px;
    border-radius: 5px;
    background: rgba(245, 245, 245, 1);
    font-size: 12px;
    color: rgba(51, 51, 51, 1);
    padding: 0 12px;
    cursor: pointer;
}

.Operation_filter_row a.active {
    background: rgba(22, 119, 255, 1);
    color: rgba(255, 255, 255, 1);
}

.Operation_filter_row a.Room_state_empty {
    background: rgb(216, 122, 128);
    color: rgba(255, 255, 255, 1);
}

.Operation_filter_row a.Room_state_cleaning {
    background: rgb(224, 163, 112);
    color: rgba(255, 255, 255, 1);
}

.Operation_filter_btns {
    flex-shrink: 0;
    width: max-content;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding-right: 50px;
}

.Operation_filter_btns button {
    width: max-content;
    cursor: pointer;
}

.Operation_filter_btns button img {
    width: 50px;
    aspect-ratio: 4 / 4;
    object-fit: contain;
    margin: auto;
}

.Operation_filter_btns button p {
    text-align: center;
    font-size: 16px;
    color: rgba(32, 32, 32, 1);
    line-height: 1;
    margin-top: 5px;
}

.Room_grid {
    flex: 1;
    overflow: auto;
}

.Room_card {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.Room_item {
    width: 100%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.Room_card_icon {
    width: 40px;
    height: auto;
}

.Room_card_icon img {
    width: 100%;
    height: auto;
}

.Room_card_status {
    flex: 1;
}

.Room_card_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.Room_card_title h2 {
    flex: 1;
    font-size: 17px;
    color: rgba(51, 51, 51, 1);
    line-height: 1.2;
    font-weight: 700;
}

.Room_card_title p {
    width: max-content;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 1.2;
}

.Room_link_name {
    font-size: 14px;
    color: rgba(51, 51, 51, 0.85);
    line-height: 1.3;
    margin-top: 10px;
}

.Room_card_status>p {
    font-size: 14px;
    color: rgb(96, 98, 102);
    margin-top: 10px;
}

.Room_card_status span {
    width: 100%;
    display: block;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 1.2;
    margin-top: 10px;
}

.Room_item_occupied {
    background-color: rgb(216, 122, 128);
}


.Room_item_off_clock {
    background-image: url(../../static/theme/img/xia.png);
    background-position: bottom 10px right 10px;
    background-repeat: no-repeat;
    background-size: 50px auto;
}

.Consume_stats {
    width: 100%;
    display: flex;
    gap: 40px;
    margin-top: 20px;
    color: rgba(51, 51, 51, 1);
}

.Consume_stats p {
    font-size: 13px;
}

.Room_item_cleaning {
    background: rgb(224, 163, 112);
}

.Room_item_maintenance {
    background: rgb(186, 186, 186);
}

/* .Room_item_occupied *,
.Room_item_cleaning *,
.Room_item_maintenance * {
    color: #ffffff !important;
} */

.Room_context_menu {
    position: fixed;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    width: max-content;
    z-index: 9999999;
    display: none;
}

.Room_context_menu_item {
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    cursor: pointer;
    transition: background 0.2s ease;
}

.Room_context_menu_item:hover {
    background: rgba(22, 119, 255, 0.1);
    color: rgba(22, 119, 255, 1);
}

.Consume_modal {
    width: 100%;
}

.Consume_content {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.Consume_left {
    width: 100%;
}

.Consume_left h3 {
    font-size: 16px;
    font-weight: 900;
    color: rgb(24, 144, 255);
    line-height: 1;
    border-bottom: 1px solid #dfe4ed;
    padding-bottom: 15px;
}

.Project_list {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    max-height: 400px;
    overflow: auto;
}

.Project_item {
    width: 100%;
    background: rgb(247, 248, 250);
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
}

.Project_item h4 {
    font-size: 16px;
    font-weight: bold;
    color: #606266;
}

.Project_item p {
    font-size: 12px;
    margin-top: 12px;
    color: #606266;
}

.Consume_right {
    width: 100%;
}

.Consume_right h3 {
    font-size: 16px;
    font-weight: 900;
    color: rgb(24, 144, 255);
    line-height: 1;
    border-bottom: 1px solid #dfe4ed;
    padding-bottom: 15px;
}

.Empty_tip {
    font-size: 12px;
}

.Selected_list {
    width: 100%;
    max-height: 400px;
    overflow: auto;
}

.Checkout_table {
    width: 100%;
    height: 350px;
}

.Selected_table {
    width: 100%;
}

.Selected_table thead {
    background: rgba(245, 245, 245, 1);
}

.Selected_table th {
    padding: 10px;
    font-size: 13px;
    color: rgba(51, 51, 51, 1);
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.Selected_table td {
    padding: 10px;
    font-size: 13px;
    text-align: center;
    color: rgba(51, 51, 51, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.Btn_delete_project {
    color: rgba(224, 32, 32, 1);
    cursor: pointer;
    font-size: 12px;
}

.Consume_detail {
    width: 100%;
}

.Consume_detail table {
    width: 100%;
}

.Consume_detail thead {
    background: rgba(245, 245, 245, 1);
}

.Consume_detail th {
    padding: 10px;
    font-size: 13px;
    color: rgba(51, 51, 51, 1);
    font-weight: 700;
    text-align: center;
    border: 1px solid rgba(229, 229, 229, 1);
}

.Consume_detail td {
    padding: 10px;
    font-size: 13px;
    text-align: center;
    color: rgba(51, 51, 51, 1);
    border: 1px solid rgba(229, 229, 229, 1);
}

.Btn_row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.Btn_row_link {
    color: rgba(22, 119, 255, 1);
    cursor: pointer;
    font-size: 14px;
}

.Checkout_modal {
    width: 100%;
    display: grid;
    grid-template-columns: 260px 1fr 240px;
    gap: 15px;
}

.Checkout_left {
    width: 100%;
}

.Checkout_customer {
    width: 100%;
    height: 210px;
    background: rgba(245, 246, 248, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.Checkout_customer button {
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border-radius: 4px;
    padding: 9px 18px;
    font-size: 14px;
    cursor: pointer;
}

.Checkout_card_bag {
    background: rgba(245, 246, 248, 1);
    margin-top: 15px;
    padding: 16px;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
}

.Checkout_right {
    width: 100%;
    border-left: solid 1px rgb(228, 228, 228);
    padding-left: 15px;
}

.Col_check input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(166, 166, 166, 1);
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    padding: 0;
    border-radius: 2px;
    display: block;
}

.Col_check input:focus {
    border: 1px solid rgba(22, 119, 255, 1);
}

.Col_check input:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 5px;
    border: solid rgba(22, 119, 255, 1);
    border-width: 0 0 2px 2px;
    opacity: 0;
    transform: translate(-50%, -70%) scale(1) rotate(-45deg);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.Col_check input:checked {
    border-color: rgba(22, 119, 255, 1);
}

.Col_check input:checked:after {
    opacity: 1;
}

.Checkout_entry {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.Checkout_entry_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.Checkout_entry_item p {
    width: max-content;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
}

.Checkout_entry_item .Input_down {
    flex: 1;
}

.Btn_free_single,
.Btn_add_coupon {
    width: max-content;
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    height: 40px;
    padding: 0 20px;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
}

.Price_free {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.2;
}

.Price_origin {
    text-decoration: line-through;
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
}

.Checkout_pay_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 30px;
    margin-top: 20px;
}

.Checkout_pay_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.Pay_icon {
    width: 90px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Pay_icon img {
    width: 25px;
    height: auto;
}

.Pay_icon p {
    font-size: 14px;
    color: #606266;
    line-height: 1;
    font-weight: 700;
}

.Checkout_pay_item input {
    flex: 1;
    min-width: 0;
}

.Checkout_summary {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.Summary_rows {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-top: solid 1px #e4e4e4;
    border-left: solid 1px #e4e4e4;
}

.Summary_cell {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.Summary_cell p {
    width: 50%;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #606266;
    border-right: solid 1px #e4e4e4;
    border-bottom: solid 1px #e4e4e4;
}

.Btn_cashier {
    width: 150px;
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    cursor: pointer;
}

.Checkout_tui {
    width: 100%;
}

.Checkout_tui h2 {
    width: 100%;
    background: rgba(245, 246, 248, 1);
    padding: 10px;
    font-size: 16px;
    color: #606266;
    font-weight: 700;
    text-align: center;
}

.Coupon_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.Coupon_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: solid 1px #e4e4e4;
    padding: 15px;
    border-radius: 5px;
}

.Coupon_row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: first baseline;
    gap: 10px;
}

.Coupon_row p {
    flex: 1;
    font-size: 16px;
    color: rgba(22, 119, 255, 1);
    line-height: 1;
    font-weight: 700;
}

.Coupon_row button {
    font-size: 12px;
    color: red;
    cursor: pointer;
}

.Coupon_item>p {
    font-size: 14px;
    color: #606266;
    line-height: 1;
}


.Form_row_double {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.Form_row_triple {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: flex-end;
    gap: 20px;
}

.Gift_amount {
    width: 100%;
    font-size: 30px;
    color: rgba(224, 32, 32, 1);
    line-height: 1;
    text-align: center;
}

.Section_block {
    width: 100%;
}

.Section_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Section_title h2 {
    font-size: 14px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
}

.Btn_add_groupbuy,
.Btn_add_staff {
    height: 32px;
    padding: 0 14px;
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}


.Table_list_inner {
    width: 100%;
    margin-top: 15px;
}

.Table_list_inner {
    width: 100%;
    height: 100%;
}

.Table_list_inner thead {
    width: 100%;
    background: #f8f8f9;
}

.Table_list_inner thead tr {
    width: 100%;
}

.Table_list_inner th {
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    font-weight: 700;
    text-align: center;
    white-space: normal;
    border-bottom: 1px solid rgba(217, 233, 239, 1);
    padding: 10px;
}

.Table_list_inner tbody tr {
    width: 100%;
}

.Table_list_inner td {
    padding: 10px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    border-bottom: 1px solid rgba(217, 233, 239, 1);
    white-space: normal;
    background: rgba(255, 255, 255, 1);
    text-align: center;
}

.Btn_remove_groupbuy,
.Btn_remove_staff {
    font-size: 14px;
    color: #1890ff;
    font: cursive;
    cursor: pointer;
}

.Radio_group {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.Radio_group label {
    width: max-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-size: 14px;
    color: #606266;
}

.Radio_group label input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(166, 166, 166, 1);
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    border-radius: 50%;
    padding: 0;
}

.Radio_group label input:focus {
    border: 1px solid rgba(22, 119, 255, 1);
}

.Radio_group label input:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 4px;
    border: solid rgba(22, 119, 255, 1);
    border-width: 0 0 2px 2px;
    opacity: 0;
    transform: translate(-50%, -70%) scale(1) rotate(-45deg);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.Radio_group label input:checked {
    border-color: rgba(22, 119, 255, 1);
}

.Radio_group label input:checked:after {
    opacity: 1;
}

.Filter_item {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
}

.Filter_item p {
    font-size: 14px;
    color: #606266;
    line-height: 1;
    font-weight: 700;
    flex-shrink: 0;
}

.Filter_item p span {
    color: red;
}

.Filter_item>input,
.Filter_item .Input_down {
    width: 200px;
}

.Filter_item_time .Input_down {
    width: 250px;
}

.Detail_pay_item p {
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

.Detail_pay_item span {
    color: rgba(0, 0, 0, 0.85);
}

.Customer_list_wrap {
    width: 100%;
}

.Customer_table {
    width: 100%;
    margin-top: 20px;
}

.Customer_table thead {
    background: rgba(245, 245, 245, 1);
}

.Customer_table th {
    padding: 15px 10px;
    font-size: 13px;
    color: rgba(51, 51, 51, 1);
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.Customer_table td {
    padding: 15px 10px;
    font-size: 13px;
    text-align: center;
    color: rgba(51, 51, 51, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.Customer_table input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(166, 166, 166, 1);
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    border-radius: 50%;
    padding: 0;
    display: block;
    margin: auto;
}

.Customer_table input:focus {
    border: 1px solid rgba(22, 119, 255, 1);
}

.Customer_table input:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 5px;
    border: solid rgba(22, 119, 255, 1);
    border-width: 0 0 2px 2px;
    opacity: 0;
    transform: translate(-50%, -70%) scale(1) rotate(-45deg);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.Customer_table input:checked {
    border-color: rgba(22, 119, 255, 1);
}

.Customer_table input:checked:after {
    opacity: 1;
}

.Customer_pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 20px;
}

.Customer_pagination p {
    font-size: 14px;
    color: #606266;
    line-height: 1;
    margin-right: 15px;
}

.Customer_pagination button {
    width: max-content;
    background: rgb(126, 126, 126);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    height: 30px;
    padding: 0 10px;
    line-height: 1;
    font-size: 12px;
    cursor: pointer;
}

.Customer_pagination button.active {
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
}

.Customer_goto {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 15px;
}

.Customer_goto input {
    width: 56px;
    height: 30px;
    text-align: center;
}

.Customer_goto input:focus {
    border-color: rgba(22, 119, 255, 1);
}

.Customer_goto button {
    width: max-content;
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    height: 30px;
    padding: 0 10px;
    line-height: 1;
    font-size: 12px;
    cursor: pointer;
}

#customerInfo {
    width: 100%;
}

.Customer_header {
    width: 100%;
    background: rgba(245, 246, 248, 1);
}

.Customer_title {
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.Customer_info {
    flex: 1;
}

.Customer_info h2 {
    font-size: 16px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
}

.Customer_info p {
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
    margin-top: 5px;
}

.Customer_title button {
    width: max-content;
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    height: 32px;
    padding: 0 15px;
    line-height: 1;
    font-size: 12px;
    cursor: pointer;
}

.Customer_balance_detail {
    width: 100%;
    padding: 15px;
}

.Customer_balance {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.Balance_amount {
    flex: 1;
}

.Balance_amount h2 {
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
}

.Balance_amount p {
    font-size: 24px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
    margin-top: 15px;
}

.Customer_balance button {
    width: max-content;
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    height: 32px;
    padding: 0 15px;
    line-height: 1;
    font-size: 12px;
    cursor: pointer;
}

.Customer_balance_detail>p {
    font-size: 12px;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
    margin-top: 15px;
}

.Customer_wallet {
    width: 100%;
    background: rgba(245, 246, 248, 1);
    padding: 15px;
    margin-top: 15px;
}

.Customer_wallet h2 {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
}

.Wallet_card {
    width: 100%;
    margin-top: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 5px 3px #00000010;
    position: relative;
}

.Wallet_card.Is_frozen {
    opacity: 0.6;
}

.Wallet_frozen_badge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: #ff4d4f;
    border-radius: 2px;
    z-index: 2;
}

.Wallet_info {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.Wallet_info h3 {
    width: 100%;
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border-bottom-right-radius: 8px;
    height: 32px;
    line-height: 1.2;
    text-align: center;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Wallet_info p {
    width: 100%;
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
    line-height: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Wallet_amount {
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.Wallet_amount_item {
    flex: 1;
}

.Wallet_amount_item h3 {
    font-size: 24px;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
}

.Wallet_amount_item p {
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
    line-height: 1.2;
    margin-top: 10px;
}

.Wallet_amount img {
    width: 45px;
    height: auto;
}

.Customer_wallet button {
    width: 100%;
    padding: 12px 15px;
    background: #f7f9fa;
    font-size: 12px;
    border: 1px solid #e9e9e9;
    color: rgba(22, 119, 255, 1);
    text-align: left;
    cursor: pointer;
}

.Customer_wallet button:disabled {
    color: #999;
    cursor: not-allowed;
    background: #f0f0f0;
}

.Customer_search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.Customer_search .Filter_item {
    flex: 1;
}

.Customer_search .Filter_item>input {
    flex: 1;
    width: inherit;
}

.Customer_search button {
    flex-shrink: 0;
    width: 72px;
    height: 34px;
    background: rgba(22, 119, 255, 1);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.zhenshangyin-select-placeholder {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
}


.Manage_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: auto;
}

.Link_order {
    color: rgba(22, 119, 255, 1);
    cursor: pointer;
}

.Manage_item {
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Manage_item .Table_list_inner {
    margin-top: 0px;
}

.Detail_info {
    width: 100%;
    display: flex;
    gap: 40px;
}

.Detail_info_col {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.Detail_info_item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.Detail_info_item p {
    width: 80px;
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.45);
}

.Detail_info_item span {
    flex: 1;
    color: rgba(0, 0, 0, 0.85);
}

.Back_btn {
    width: max-content;
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    border-radius: 4px;
    padding: 12px 10px;
    line-height: 1;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.Back_btn svg {
    width: 14px;
    height: auto;
    display: block;
}

.Form_row_four {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.Entry_form .Form_item>input,
.Entry_form .Form_item .Input_down {
    width: 100%;
    margin-top: 8px;
}

.Entry_form .Form_item>input,
.Entry_form .Table_list_inner input {
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0 12px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.85);
    background: #fff;
}

.Entry_form .Table_list_inner .Input_down {
    min-width: 110px;
}

.Entry_form .Table_list_inner td {
    vertical-align: middle;
}

.Btn_add_consume,
.Btn_add_coupon_row {
    height: 32px;
    padding: 0 14px;
    background: rgba(106, 79, 255, 1);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.Btn_row_remove {
    font-size: 13px;
    color: rgba(224, 32, 32, 1);
    cursor: pointer;
    background: none;
    border: none;
}

.Balance_row {
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.Balance_row_member {
    width: 100%;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    margin-top: 5px;
}

.Balance_row_member .Input_down,
.Form_item_balance .Balance_row .Input_down,
.Form_item_balance .Balance_row>input {
    margin-top: 0;
}

.Entry_actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.Btn_entry_save {
    min-width: 88px;
    height: 36px;
    padding: 0 20px;
    background: rgba(22, 119, 255, 1);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.Btn_entry_cancel {
    min-width: 88px;
    height: 36px;
    padding: 0 20px;
    background: #fff;
    color: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

#orderEntryForm.Entry_locked .Form_item:not(.Form_item_store),
#orderEntryForm.Entry_locked .Manage_item~.Manage_item,
#orderEntryForm.Entry_locked .Btn_entry_save {
    pointer-events: none;
    opacity: 0.55;
}

#orderEntryForm.Entry_locked .Btn_entry_cancel {
    pointer-events: auto;
    opacity: 1;
}

.Room_pick_form {
    width: 100%;
}

.Room_pick_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.Room_pick_row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}


.Room_filter_item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.Room_filter_item p {
    font-size: 14px;
    color: #606266;
    line-height: 1;
    font-weight: 700;
    flex-shrink: 0;
}

.Room_filter_item p span {
    color: red;
}

.Room_filter_item>input,
.Room_filter_item .Input_down {
    flex: 1;
}

.Room_pick_ops {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
}

.Btn_room_add,
.Btn_room_del {
    width: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Btn_room_add svg,
.Btn_room_del svg {
    width: 100%;
    height: auto;
}

.Btn_room_add:hover {
    color: #409eff;
}

.Btn_room_del:hover {
    color: #f56c6c;
}

.Index{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 10px;
}

.Index img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.Member_modal {
    width: 100%;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    padding: 10px 0;
}

.Member_left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: solid 1px rgba(0, 0, 0, 0.08);
    padding-right: 20px;
}

.Member_left h3 {
    font-size: 24px;
    font-weight: 700;
    color: rgba(102, 102, 102, 1);
    line-height: 1;
}

.Member_info {
    width: 100%;
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.Member_info_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1;
}

.Member_info_item p {
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
}

.Member_info_item>div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: rgba(51, 51, 51, 1);
}

.Member_info_item>div svg {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.Member_right {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.Member_overview {
    width: 100%;
    display: flex;
    gap: 15px;
}

.Member_pwd {
    width: 130px;
    flex-shrink: 0;
    background: rgba(237, 240, 250, 1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.Member_pwd button {
    flex: 1;
    font-size: 14px;
    color: rgba(22, 119, 255, 1);
    line-height: 1;
    cursor: pointer;
}

.Member_pwd button+button {
    border-top: solid 1px rgba(0, 0, 0, 0.08);
}

.Member_stats {
    flex: 1;
    background: rgba(237, 240, 250, 1);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 15px;
    padding: 40px 30px;
}

.Member_stats_item p {
    font-size: 26px;
    font-weight: 700;
    color: rgba(22, 119, 255, 1);
    line-height: 1;
}

.Member_stats_item span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(130, 145, 170, 1);
    line-height: 1;
}

.Member_tabs {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 40px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.08);
}

.Member_tabs button {
    position: relative;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1;
    padding: 14px 0;
    cursor: pointer;
    white-space: nowrap;
}

.Member_tabs button.active {
    color: rgba(22, 119, 255, 1);
    font-weight: 700;
}

.Member_tabs button.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: rgba(22, 119, 255, 1);
}

.Member_tab_body {
    width: 100%;
    padding-top: 20px;
}

.Member_tab_pane {
    transition: opacity 0.15s ease;
}

.Member_tab_pane.Is_fade {
    opacity: 0;
    pointer-events: none;
}

.Member_card_wrap {
    width: 100%;
    display: flex;
    gap: 20px;
}

.Btn_open_card {
    width: 400px;
    flex-shrink: 0;
    background: #ffffff;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

.Btn_open_card svg {
    width: 42px;
    height: 42px;
}

.Btn_open_card p {
    font-size: 18px;
    color: rgba(22, 119, 255, 1);
    line-height: 1;
}

.Member_card {
    width: 400px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.Member_card_head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Member_card_head span {
    background: rgba(22, 119, 255, 1);
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    padding: 8px 16px;
    border-top-right-radius: 8px;
}

.Member_card_head p {
    padding-right: 15px;
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
}

.Member_card_body {
    padding: 18px 20px 15px;
}

.Member_card_body p {
    font-size: 26px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.Tag_frozen {
    display: block;
    width: max-content;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: #ff4d4f;
    border-radius: 2px;
    line-height: 1.4;
}

.Member_card_body>span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
    line-height: 1;
}

.Member_card_foot {
    background: rgba(245, 247, 250, 1);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 25px;
}

.Member_card_foot button {
    background: none;
    border: none;
    font-size: 13px;
    color: rgba(22, 119, 255, 1);
    cursor: pointer;
}

.Input_card{
    width: 100px;
    margin-left: auto;

}

.Input_card input{
    width: 100%;
    background: #ffffff;
    border: solid 1px rgba(22, 119, 255, 1);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    color: rgba(22, 119, 255, 1);
    cursor: pointer;
}

.Log_plus {
    color: red;
}

.Log_minus {
    color: rgba(22, 119, 255, 1);
}