/* bootstrap5 をコピペ */
:root {
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

.my-bootstrap5 {

    .btn {
        /* elogi の default を reset */
        min-width: unset;
        height: unset;

        /* my-bootstrap5 の default(#000) を reset */
        &.btn-info {
            --bs-btn-color: #fff !important;
            --bs-btn-active-color: #fff !important;
        }
        &.btn-outline-info {
            --bs-btn-hover-color: #fff !important;
            --bs-btn-active-color: #fff !important;
        }
    }

    .form-control {
        /* my-bootstrap5 の default(1.2rem) を reset */
        font-size: 1rem;
    }

    /* pagination カラーを info系に */
    .pagination {
        --bs-link-color: var(--bs-info) !important;
        --bs-pagination-active-bg: var(--bs-info) !important;
        --bs-pagination-active-border-color: var(--bs-info) !important;
    }
}

html {
    /* https://dev.elogi.jp/labels/show_ebay_order 入力・支払・ラベル発行 */
    &.Labels_show_ebay_order .my-bootstrap5 {
        .form-check {
            min-height: unset;
        }
        small, .small {
            margin-right: 0.3rem;
            color: gray !important;
        }
        .labels_detail_img img {
            object-fit: contain;
            max-width: 120px;
            max-height: 85px;
            @media (max-width: 768px) {
                max-width: 50vw;
                max-height: 50vw;
            }
        }
    }
}


@media (max-width: 768px) {
    body {
        min-width: unset;
    }

    /* ２段組 下段は下寄せ */
    header {
        height: 109px !important;
        display: flex;
        flex-direction: column;

        /* メニュ領域 */
        .labels_header_btm {
            height: unset;
            padding: 10px 0;
            margin-top: auto;
            display: flex;
            max-width: 100%;

            .sp-menu {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 15px;
                .fa-navicon {
                    color: white;
                    cursor: pointer;
                    &:hover {
                        opacity: 0.8;
                    }
                }
            }

            /* ログイン情報は右寄せ */
            .labels_header_inner {
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex: 1;
                min-width: 0;
                width: 100% !important;

                .labels_header_user {
                    max-width: 70%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin: 0;
                }
            }
        }
    }

    main {
        .labels_tools_inner
        {
            display: block;
            width: 100%;
            padding-top: 0;

            .labels_content {
                padding-left: 10px;
                padding-right: 10px;
            }

            /* サイドメニュ */
            .labels_sub {
                position: fixed;
                z-index: 1000;

                transform: translateX(-100%);
                transition: transform 0.3s ease;

                height: calc(100vh - 100px);
                overflow: auto;
                -ms-overflow-style: none;
                scrollbar-width: none;
                &::-webkit-scrollbar {
                    display: none;
                }

                &.sp-open {
                    transform: translateX(0);
                    box-shadow: 5px 0 5px #aaa;
                }

                .labels_side_ttl {
                    border-bottom: unset;
                    margin: 10px;
                }
            }

            .labels_main {
                width: 100%;
                padding: 10px;
            }
        }
    }
    footer {
        .labels_footer_inner {
            max-width: 100%;
        }
    }

    .labels_form_w {
        width: 100%;
    }

    .sub_btn:not(.btn_ml) {
        /* 高さ指定によるpaddingをリセットする。.btn_ml は極小ボタンなのでリセットしない */
        height: unset;
        line-height: 1.2;
        padding: 5px;
    }

    .btn_l {
        min-width: unset;
        height: unset;
        line-height: 1.2;
        font-size: 20px;
        padding: 10px;
    }

    /* https://dev.elogi.jp/users/login ログインページ周り */
    html.Users_login,
    html.Users_forget_password,
    html.Users_contact {

        .sp-menu {
            opacity: 0;
        }

        .labels_content {
            padding-top: 0;
            form {
                width: 90%;
                margin: 20px auto;
            }
        }

        .labels_login_form {
            table, tbody, tr, th, td {
                display: block;
                width: 100%;
            }
            th, td {
                padding: 0 0 10px 0;
            }
        }
    }

    /* https://dev.elogi.jp/labels/view_quotation 料金支払ページ */
    html.Labels_view_quotation,
    html.Labels_execute_payment {
        .sp-custom-table {
            display: block;
            width: 100%;
            border: none;
            tbody, tr, th, td {
                display: block;
                width: 100%;
                border: none;
            }
            td {
                padding: 0 0 1rem 1.5rem;
                text-align: left;
                .form_checkbox {
                    height: unset;
                }
            }
            th {
                padding: 0 0 0.5rem 0;
                margin-bottom: 0.7rem;

                text-align: left;
                border-bottom: 1px solid #ccc;

                margin-top: 1rem;
                display: flex;
                align-items: center;
                &::before {
                    content: '●';
                    color: var(--bs-info);
                    font-size: 1.2rem;
                    margin-right: 0.2rem;
                    line-height: 1;
                }
            }
        }
    }

    html.Labels_show_ebay_order {
        .labels_list_table.table-responsive table {
            min-width: 1000px;
        }
    }

    html.Labels_view_quotation {
        .labels_list_table.table-responsive table {
            min-width: 1000px;
        }
    }

}