/*在这里编写相关的CSS代码*/
body {
    overflow: hidden;
}

form {
    width: 100%;
}

.左侧导航布局 {
    margin-top: 60px;
    border-radius: 0px;
}

.左侧导航布局>li>dl>dd>a {
    margin-left: 20px;
}

.顶边导航布局 {
    border-radius: 0px;
}

.顶边导航布局>.LOGO布局 {
    width: 180px;
    height: 60px;
    display: inline-block;
    vertical-align: top;
}

.顶边导航布局>.行导航 {
    width: 120px;
    height: 60px;
    display: inline-block;
    vertical-align: top;
}

.顶部用户头像 {
    float: right;
}

.顶部用户头像>a>img {
    width: 50px;
    height: 50px;
    line-height: 200px;
    border-radius: 100px;
}

.选项卡布局 {
    margin-left: 200px;
}

.layui-tab {
    margin-top: 0px;
}

.layui-tab-content {
    padding: 0px 0px;
}

.index_tab {
    width: 100%;
    /*height: calc(100vh - 140px);*/
    height: calc(100vh - 100px);
    border: 0px;
}

.禁止删除标签 i {
    display: none !important;
}

@media (max-width: 640px) {
    .左侧导航布局 {
        margin-top: 60px;
        border-radius: 0px;
        display: none;
    }

    .选项卡布局 {
        margin-left: 0px;
    }

    .顶部用户头像 {
        float: none;
    }
}

/* 定义表格数量按钮样式 */
.number-input-group {
    display: flex;
    /* 使用Flex布局 */
    align-items: center;
    /* 垂直居中 */
}

.number-input-group .layui-input {
    /*商品订单_产品主页_数量输入框样式 */
    width: 60px;    /* 设置输入框的宽度 */
    /* margin-right: 5px; */   
    margin: 0 5px 0 5px;  /* 与按钮之间的间距 */
    text-align: center;  /*内容居中 */
    padding-left:0px;    
}

.number-input-group .layui-btn {
    padding: 0 10px;
    /* 按钮的内边距 */
}

.index_div {
    display: flex;
    height: auto;
    /*order/index 操作框高度*/
    margin: 20px 0px;
    /*保留的边距*/
    width: 100%;
}

.index-footer {
    display: flex;
    height: 40px;
    width: auto;
    justify-content: center;
    align-items: center;
    background-color: #2f363c;
    color: #FFF;
}

.index_div>div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 450px;
}

.index_div>div>div {
    margin-left: 0 !important;
}

.order_index_div {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    align-items: center;
    /* 确保容器高度占满可用空间 */
}

.order_index_shousuo {
    flex-shrink: 0;
    /* 防止搜索栏被压缩 */
    width: 100%;
    align-items: center;
    font-size: 12px;
}

/*主页_表格框显示滚动条 */
.amis_index {
    height: 100vh;    /*order/index 操作框高度*/
    /*width: 98%;*/
    /*给内部组件保留的边距*/
    /*margin: auto;*/
    overflow-y: auto;
    line-height: 50px;
    border: 1px solid rgb(233, 233, 233);
    flex-grow: 1;
    /* 让表格区域占据剩余的所有空间 */
}
/*主页_表格框显示滚动条 */
.index_div_table {
    height: 100vh;    /*order/index 操作框高度*/
    /*width: 98%;*/
    /*给内部组件保留的边距*/
    /*margin: auto;*/
    overflow-y: auto;
    line-height: 50px;
    border: 1px solid rgb(233, 233, 233);
    flex-grow: 1;
    /* 让表格区域占据剩余的所有空间 */
}
.table_hide {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}


.order_index_button {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    /* 保持分页组件位置固定 */
}

/*主页_表格表头锁定样式*/
.index_div_table th {
    position: sticky;
    top: -6px;
    background-color: rgb(240, 240, 240);
    z-index: 10;
    transform: translateY(-5px);
    text-align: center;
}

/*.index_div_table td {
    text-align: center;
}*/

.index_div button {
    margin: 0 0 0 20px;
    /*给内部组件保留的边距*/
}

.index_div select {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/*购物车页面布局*/
.cart {
    padding: 0px;
    background-color: #fff;
    border-radius: 5px;
}

.cart-header {
    /* 购物车标题样式 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    background-color: #eee;
}

.cart-body {
    /* 商品列表容器样式 */
    height: calc(100vh - 200px);
    overflow-y: auto;
    border: #ccc 1px solid;
    padding: 2px;
}

.cart-footer {
    /* 购物车底部样式 */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: left;
}

.cart-total {
    /* 数量信息样式 */
    display: flex;
    margin: 10px 10px;
    width: 98%;
    height: 40px;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    border-style: dashed;
    border-radius: 5px;
    border-color: #ccc;
    border-width: 1px;
    font-size: 16px;
    font-weight: bold;
    background-color: #eee;
}

.cart-total-btn {
    /* 结算按钮样式 */
    display: flex;
    height: 40px;
    margin: 10px 10px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.cart-items {
    /* 商品列表容器样式 */
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
    flex-direction: column;
}

.cart-items>div {
    /* 商品项容器样式 */
    display: flex;
    width: 98%;
    align-items: center;
    margin: 3px;
    flex-direction: column;
    border-style: dashed;
    border-color: #ccc;
    border-width: 1px;
    border-radius: 5px;
}

.cart-item {
    /* 商品项样式 */
    display: flex;
    justify-content: center;
    width: 80%;
    align-items: center;
    margin: 10px;
}

.cart-item>button {
    /* 删除按钮样式 */
    display: block;
    margin-left: auto;
    margin-bottom: 10px;
}

.cart-item img {
    /* 商品图片样式 */
    width: 100px;
    height: 100px;
    margin-right: 10px;
}

.cart-item-info h4 {
    /* 商品名称样式 */
    margin: 0;
}

.cart-item-info p {
    /* 商品信息样式 */
    margin: 5px 0;
}

.cart-item-info input {
    /*数量输入框样式*/
    width: 50px;
    height: 30px;
    text-align: center;
    margin-right: center;
}

/*去掉输入框的箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.order-div {
    /*订单页*/
    /* 订单页列表容器样式 */
    height: calc(100vh - 5px);
    overflow-y: auto;
    border: #ccc 1px solid;
    padding: 2px;
}

.order_div_table {
    height: 300px;
    /*order/index 操作框高度*/
    /*width: 95%;    /*给内部组件保留的边距*/
    margin: 0px 20px 0px 20px;
    /*保留的边距*/
    overflow-y: auto;
    line-height: 50px;
    border: 1px solid rgb(233, 233, 233);
}

.total-bar {
    display: flex;
    justify-content: flex-end;
    background-color: #f0f0f0;
    font-weight: bold;
    padding: 8px 16px;
    margin: 5px 20px 0px 20px;
}

.total-item {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.total-item .label {
    margin-right: 8px;
    color: rgb(114, 114, 114);
}

.total-item .value {
    text-align: center;
    font-size: 20px;
    color: rgb(170, 0, 0);
}

/*主页_表格表头锁定样式*/
.order_div_table th {
    position: sticky;
    top: 0;
    background-color: rgb(223, 223, 223);
    z-index: 10;
    transform: translateY(-1px);
    /* 根据需要调整这个值 */
    text-align: center;
}

.order_div_table td {
    text-align: center;
}

.order-submit {
    /* 订单提交按钮样式 */
    /* display: flex; */
    /* height: 40px; */
    margin: 40px 10px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.penOrder_nav {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid #dddddd;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.sh_goods {
    margin: 1px 20px 0px 20px;
    width: 90%;
    height: auto;
    border: 1px solid #f8f8f8;
    border-radius: 5px;
    padding: 10px;
}

.order_info td,
.order_items td {
    padding: 5px;
    font-size: 12px;
}

.order_items th {
    text-align: left;
    background-color: #f8f8f8;
}

.sh_total_row {
    font-weight: bold;
}

.sh_goods_width {
    width: 95%;
}

.sh_goods_border {
    display: flex;
    /*padding: 5px;*/
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
    border: 1px solid #f8f8f8;
}

.sh_goods_flex {
    display: flex;
    justify-content: center;
}
.am_button_left {
    float: right;
    text-align: center;
}

.sh_goods_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
}

.layui-btn-container {
    margin: 5px 0;
    /* 调整按钮之间的间距 */
}

.sh_td_width {
    width: 80px;
    font-weight: bold;
}
.sh_td_center {
    text-align: center;
}
.sh_td_center>span {
    width: 50px;
}


.am_border_blur {
    width: 95%;
    margin: 10px auto;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid #dddddd;
    flex-grow: 1;
    display: flow-root;
}
.am_border_tbody>tr>td {
    font-size: 12px;
}
.am_border_thead>tr>th {
    font-size: 12px;
}

.layui-elem-quote1 {
    margin-bottom: 10px;
    padding: 15px;
    line-height: 1.8;
    border-left: 5px solid #ffe342;
    border-radius: 0 2px 2px 0;
    background-color: #fafafa;
}

.am_image-container {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.am_font_size_12 {
    font-size: 12px;
}