/*
===========================================================

AdminLTEをBootstrap5で動かす用css。

===========================================================
*/
body,
.btn,
.form-control,
.dropdown-menu,
.badge {
    font-size: 14px;
}
body a {
    text-decoration: none;
}
.table {
    --bs-table-striped-bg: none;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f4f7f9;
}
.table-striped>tbody>tr.accent {
    background-color: lightblue;
    --bs-table-accent-bg: none;
}
.table.edit>tbody>tr>td,
.table.edit>tbody>tr>th,
.table.edit>thead>tr>td,
.table.edit>thead>tr>th {
    border-top: none;
}
.table.edit>:not(caption)>*>* {
    border-bottom-width: 0px;
}
.table-striped.conf>tbody>tr:nth-of-type(odd),
.table-striped.edit>tbody>tr:nth-of-type(odd) {
    background-color: initial;
}
.table-striped.conf>tbody>tr.accent,
.table-striped.edit>tbody>tr.accent {
    background-color: initial;
}
.table.conf>tbody>tr>th {
    background: #eee;
}
.table.edit>tbody>tr>th {
    background: #fff;
}
.table.conf>tbody>tr>td {
    border-right: 1px solid #f4f4f4;
}

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
label {
    font-weight: 700;
}
.img-circle {
    border-radius: 50%;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 15px;
}
.dropdown-menu {
    border-radius: 0px;
}
.dropdown-menu.show {
    margin-top: 0px;
}
.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
.dropdown-menu>li>a {
    color: #777;
}
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
}

/* パンくず */
.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}

/*
サイドメニューバー、ヘッダーメニューバーのデザイン
*/
nav.navbar.navbar-expand {
    padding: 0px;
}
nav.navbar.navbar-expand .container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}
a.sidebar-toggle {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}


/*
新テーマ
*/
.panel-default {
    border-color: #ddd;
}
.panel {
    background: #f4f7f9;
    padding: 4px;
}
.panel .panel-body {
    background: #fff;
}

/*
DataTables
*/
.dataTables_length {
    margin-bottom: 10px;
}

.chosen-container.chosen-container-single {
    width: 100%;
}

#data_length {
    border: 1px solid #ccc;
    color: #000;
    padding: 4px 10px;
    border-radius: 4px;
    background: #f9f9f9;
}
#data_length .unit {
    font-size: 12px;
    margin-left: 2px;
}

.col_title {
    font-size: 12px;
}

.btn-margin {
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.w_break {
    word-break: break-all;
}

.mr1 { margin-right: 1px; }
.mr2 { margin-right: 2px; }
.mr3 { margin-right: 3px; }

.mb5 {
    margin-bottom: 5px;
}

.fs10 {
    font-size: 10px;
}
.fs11 {
    font-size: 11px;
}
.fs12 {
    font-size: 12px;
}
.fs13 {
    font-size: 13px;
}
.fs14 {
    font-size: 14px;
}
.fs15 {
    font-size: 15px;
}
.fs16 {
    font-size: 16px;
}
.fs20 {
    font-size: 20px;
}

.badge_size_xs {
    font-size: 11px;
}

.card-body.info {
    padding: 4px;
}
.card-body.info table {
    margin-bottom: 0px;
}

/* 売上レポート表 */
.sales_report .sub_total {
    background: #f4f7f9 !important;
}
.sales_report .total {
    background: #f4f7f9 !important;
}
.sales_report .month_head {
    min-width: 65px;
}
.sales_report .nendo_total_head {
    min-width: 65px;
}

/* 検索ボタン */
.btn.btn_search {
    border: 1px solid #0d6efd;
    color: #0d6efd;
    background: #fefefe;
}
.btn.btn_search:hover {
    color: #fff;
    background: #0d6efd;
}
div.table_like {
    display: table;
}
.table_row {
    display: table-row;
}
.table_cell {
    display: table-cell;
    width: 3%;
    text-align: center;
    padding: 3px;
    border: 1px solid #ededed;
}
.table_like_responsive {
    width: 100%;
}

.btn_circle {
    font-size: 0.9rem;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    padding: 0;
    background-color: #ededed;
    border-radius: 50% !important;
}

.btn_circle.btn_circle_sm {
    font-size: 0.6rem;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.input_calendar {
    padding: 6px 12px !important;
    border-radius: 0px !important;
}

/* カスタムポップオーバー（入金確認用） */
.popover.payment_confirm_popover {
    width: 400px !important;
    max-width:100%;
}
.payment_confirm_popover h3.popover-header {
  margin: 0px;
  border-left: none;
}

@media screen and (max-width:768px) {
    table.res-table-2col {
        border: 1px solid #eee;
    }
    table.res-table-2col.table-striped>tbody>tr:nth-of-type(odd) {
        --bs-table-accent-bg: none;
    }
    .table-striped>tbody>tr.accent th {
        background-color: lightblue;
    }
    .table-striped>tbody>tr.accent td {
        background-color: #fff;
    }
    table.res-table-2col th,
    table.res-table-2col td {
        width: 100%;
        display: block;
        border: none;
    }
    table.res-table-2col th {
        background-color: #f4f7f9;
    }
    table.res-table-2col td {
        background-color: #fff;
    }
    table.res-table-2col .row {
        margin-right: 0px;
        margin-left: 0px;
    }
    /* .edit table design */
    .table.edit>:not(caption)>*>* {
        border-bottom-width: 1px;
    }
    table.edit.res-table-2col th {
        background-color: #fff;
        border-bottom: 1px solid #f4f7f9;
    }
    table.edit.res-table-2col td {
        border-bottom: 1px solid #f4f7f9;
    }
    /* 表 */
    td.table_like {
        overflow:scroll;
    }
    .table_like_responsive {
        width: 300px;
    }
}

@keyframes btn_shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

.btn_animate_shiny {
    text-decoration: none;
    color: #ffffff;
    background-color: #384878;
    overflow: hidden;
}

.btn_animate_shiny::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: btn_shiny;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}