:root{
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-s: 0.75rem;
    --spacing-m: 1rem;
    --spacing-l: 1.25rem;
    --spacing-xl: 1.5rem;
    --spacing-xxl-2: 2rem;
    --spacing-xxl-6: 3rem;
}
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
}
.width-1440{
    width:1440px;
}
.min-width-1440{
    min-width: 1440px;
}
.container-min-width {
    min-width: 768px;
    overflow: auto;
}
h1{
    font-size: 36px;
}
a,a:hover{
    text-decoration: none;
    color:inherit;
}
a.decoration-underline{
    text-decoration: underline;
}
table th,
table td{
    color:#212121;
}
/* space custom */
.py-10 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
}

/* nav */
.nav-custom {
    height: 60px;
}

.nav-place-hold {
    margin-top: -60px;
    padding-top: 60px;
}

/* background color custom */
.bg-custom01 {
    background-color: #B5E7EA;
}

.bg-custom02 {
    background-color: #f6f6f6 !important;
}

.bg-custom03 {
    background-color: #61C7D0;
}

.bg-custom04 {
    background-color: #737373;
}

.bg-custom05 {
    background-color: #f4f4f4;
}

.bg-custom06 {
    background-color: #dff5fa !important;
}

.bg-custom06-opacity40 {
    background-color: rgba(223, 245, 250, 0.4) !important;
}

.bg-custom07 {
    background-color: #212121;
}

.bg-custom08 {
    background-color: #333333;
}

.bg-custom09 {
    background-color: #7485C3;
}

.bg-custom10 {
    background-color: #fafafa;
}

.bg-custom11 {
    background-color: #b7b7b7;
}

.bg-custom12 {
    background-color: #9e9e9e;
}

.bg-custom13 {
    background-color: #fcecec;
}

.bg-custom14 {
    background-color: #ED7B76;
}
.bg-#f1f3f4 {
    background-color: #f1f3f4;
}
.bg-#d7d7d7 {
    background-color: #d7d7d7;
}

/* font family custom */
.font-custom01 {
    font-family: 'Noto Sans','Noto Sans TC',sans-serif ;
}

/* font size custom */
.font-size-custom01 {
    /* 10px */
    font-size: 0.625rem !important;
}

.font-size-custom02 {
    /* 12px */
    font-size: 0.75rem !important;
}

.font-size-custom03 {
    /* 14px */
    font-size: 0.875rem !important;
}

.font-size-custom04 {
    /* 16px */
    font-size: 1rem !important;
}

.font-size-custom05 {
    /* 18px */
    font-size: 1.125rem !important;
}

.font-size-custom06 {
    /* 20px */
    font-size: 1.25rem !important;
}
.font-size-custom07 {
    /* 36px */
    font-size: 2.25rem !important;
}
/* button custom */
.btn {
    border-radius: 4px;
}

.btn-custom01 {
    background-color: #61C7D0;
    height: 48px;
}

.btn-custom02,
.btn-custom02:hover {
    border: 1px solid #BDBDBD;
    background-color: white;
    color: #BDBDBD;
}

.btn-custom02::placeholder,
.btn-custom03::placeholder {
    color: #d7d7d7;
}

.nav-custom input::placeholder {
    color: #d7d7d7;
    font-weight: normal
}


.btn-custom02.datepicker,
.btn-custom02.datepicker:hover {
    border: 1px solid #BDBDBD;
    background-color: white;
    color: #212121;
    border-right: none;
}

.btn-custom03,
.btn-custom03:hover {
    border: 1px solid #d7d7d7;
    background-color: white;
    color: #212121;
}

.btn-custom04,
.btn-custom04:hover {
    border: 1px solid #61C7D0;
    background-color: #DFF5FA;
    color: #61C7D0;
}

.btn-custom05,
.btn-custom05:hover {
    border: 1px solid #61C7D0;
    background-color: #61C7D0;
    color: #ffffff;
}

.btn-custom06,
.btn-custom06:hover {
    border: 1px solid #ED7B76;
    background-color: #FCECEC;
    color: #ED7B76;
}

.btn-custom07,
.btn-custom07:hover {
    border: 1px solid #F4BB1B;
    background-color: #F4BB1B;
    color: #ffffff;
}

.btn-pagenumber {
    border: solid 1px #c6cbd4;
    color: #333333;
}

.btn-pagenumber:hover {
    border: solid 1px #c6cbd4;
    color: #333333;
}

.btn-lowStock {
    border: 1px solid #BDBDBD;
    background-color: #ffffff;
    border-radius: 2rem;
    color: #bdbdbd;
}

.btn-lowStock:hover {
    color: #bdbdbd;
    text-decoration: none;
}

.btn-lowStockError {
    border: 1px solid #ED7B76;
    background-color: #ED7B76;
    color: #ffffff;
}

.btn-lowStockError:hover {
    color: #ffffff;
}

.btn-storageTransfer {
    border: 1px solid #61C7D0;
    background-color: #61C7D0;
    color: #ffffff;
}

.btn-storageTransfer:hover {
    color: #ffffff;
}
.btn-s{
    height: 30px;
    line-height: 15px;
}
/*.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none;
}*/

/* text color custom */
.text-custom01 {
    color: #ED7B76;
}

.text-custom01:hover {
    color: #ED7B76;
}

.text-custom02 {
    color: #9e9e9e;
}

.text-custom03 {
    color: #057788;
}

.text-custom04 {
    color: #4a4a4a;
}

.text-custom05 {
    color: #FFFFF0;
}

.text-custom06 {
    color: #6b6b6b;
}

.text-custom07 {
    color: #737373;
}

.text-custom08 {
    color: #61c7d0;
}

.text-custom09 {
    color: #212121;
}

.text-custom10 {
    color: #0F9EBA;
}

.text-custom11 {
    color: #BDBDBD;
}
.text-custom12 {
    color: #666666;
}
.text-custom13 {
    color: #333333;
}
.text-custom14{
    color:#afe2e7;
}
.text-custom15{
    color:#eeca00;
}
.text-custom16{
    color:#28b9d5;
}
.text-custom-placeholder{
    color:#d7d7d7;
}

/* height custom */
.height-custom01 {
    height: 600px;
}

/* width custom */
.w-80 {
    width: 80%;
}

.w-60 {
    width: 60%;
}

.h-84 {
    height: 84%;
}

.w-90 {
    width: 90%;
}

.h-60px {
    height: 60px;
}

.h-70px {
    height: 70px;
}

.minw-86px {
    min-width: 86px;
}

.minw-114px {
    min-width: 114px;
}

.minh-250px {
    min-height: 250px;
}

/* border custom */
.border-loginError,
.border-error {
    border: 1px solid #ED7B76;
}

.border-error:hover {
    border: 1px solid #ED7B76;
}

.border-error-datepicker {
    border: 1px solid #ED7B76;
}

.border-ebedf8 {
    border-color: #ebedf8 !important;
}
.border-d7d7d7{
    border-color: #d7d7d7 ;
}
.border-search {
    border: 1px solid #BDBDBD;
    border-left: 0px;
    border-radius: 2rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.border-search::placeholder {
    color: #d7d7d7;
}

.border-search-icon {
    border: 1px solid #BDBDBD;
    border-right: 0px;
    border-radius: 2rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.border-search-icon img {
    top: -2px;
    position: relative;
}

.border-switchTab {
    border-bottom: 2px solid #61C7D0;
}

.border-pickUpTableFold {
    border-left: 4px solid #54C8C6 !important;
}

.border-ced4da, .border-ced4da:hover{
    border: 1px solid #ced4da;
}


/* date picker custom */
[data-provide=datepicker] {
    border-right: 0;
}

[data-provide=datepicker]::placeholder {
    color: #d7d7d7;
}

[data-section=card-reason-block] textarea::placeholder,
[data-section=modal-addMedicalDevice] textarea::placeholder {
    color: #d7d7d7;
}

[data-section="modal-paymentTab1-1"] tr,
[data-section="modal-paymentTab1-2"] tr {
    height: 62px;
}

/* table custom */
/* table inventory */
#table-area-payment [data-section*="table-5"] thead:first-of-type th:nth-child(2),
#table-area-payment [data-section*="table-5"] tbody:first-of-type td:nth-child(2) {
    min-width: 9.1rem;
    width: 10rem;
}

[data-section*="table-inventory-1"] thead th:nth-child(2),
[data-section*="table-inventory-1"] tbody td:nth-child(2),
[data-section*="table-inventory-2"] thead th:nth-child(2),
[data-section*="table-inventory-2"] tbody td:nth-child(2),
#table-area-pickUp [data-section*="table-1"] thead th:nth-child(2),
#table-area-pickUp [data-section*="table-1"] tbody td:nth-child(2),
#table-area-storage [data-section*="table-2"] thead th:nth-child(2),
#table-area-storage [data-section*="table-2"] tbody td:nth-child(2),
[data-section="modal-paymentTab1-2"] thead th:nth-child(3),
[data-section="modal-paymentTab1-2"] tbody td:nth-child(3) {
    min-width: 16rem;
}

#table-area-pickUp [data-section*="table-2"] thead th:nth-child(2),
#table-area-pickUp [data-section*="table-2"] tbody td:nth-child(2) {
    min-width: 16rem;
    width: 18rem;
}

#table-area-pickUp [data-section*="table-1"] thead th:nth-child(3),
#table-area-pickUp [data-section*="table-1"] tbody td:nth-child(3),
[data-section="modal-paymentTab1-2"] thead th:nth-child(2),
[data-section="modal-paymentTab1-2"] tbody td:nth-child(2),
#table-area-payment [data-section*="table-2"] thead:first-of-type th:nth-child(2),
#table-area-payment [data-section*="table-2"] tbody:first-of-type td:nth-child(2),
#table-area-payment [data-section*="table-2"] thead:last-of-type th:nth-child(3),
#table-area-payment [data-section*="table-2"] tbody:last-of-type td:nth-child(3) {
    min-width: 8rem;
}

#table-area-storage [data-section*="table-1"] thead th:last-child,
#table-area-storage [data-section*="table-1"] tbody td:last-child,
#table-area-payment [data-section*="table-1"] thead th:last-child,
#table-area-payment [data-section*="table-1"] tbody td:last-child {
    min-width: 6rem;
    width: 6rem;
}

#table-area-payment [data-section*="table-2"] thead:last-of-type th:nth-child(7),
#table-area-payment [data-section*="table-2"] tbody:last-of-type td:nth-child(7),
#table-area-payment [data-section*="table-2"] thead:first-of-type th:nth-child(7),
#table-area-payment [data-section*="table-2"] tbody:first-of-type td:nth-child(7) {
    min-width: 6rem;
    width: 6rem;
}

#table-area-payment [data-section*="table-2"] thead:first-of-type th:last-child,
#table-area-payment [data-section*="table-2"] tbody:first-of-type td:last-child {
    min-width: 3rem;
    width: 3rem;
}

#table-area-payment [data-section*="table-5"] thead:first-of-type th:first-child,
#table-area-payment [data-section*="table-5"] tbody:first-of-type td:first-child {
    min-width: 8rem;
    width: auto;
}

#table-area-payment [data-section*="table-5"] thead:first-of-type th:last-child,
#table-area-payment [data-section*="table-5"] tbody:first-of-type td:last-child {
    min-width: 12rem;
    width: auto;
}

#modal-storage [data-section="modal-storage"] thead th:first-child,
#modal-storage [data-section="modal-storage"] tbody td:first-child,
#modal-storage [data-section="modal-storage"] thead th:nth-child(2),
#modal-storage [data-section="modal-storage"] tbody td:nth-child(2),
#modal-storage [data-section="modal-storage"] thead th:nth-child(3),
#modal-storage [data-section="modal-storage"] tbody td:nth-child(3),
#modal-storage [data-section="modal-addStorage"] thead th:first-child,
#modal-storage [data-section="modal-addStorage"] tbody td:first-child,
#modal-storage [data-section="modal-addStorage"] thead th:nth-child(2),
#modal-storage [data-section="modal-addStorage"] tbody td:nth-child(2),
#modal-storage [data-section="modal-addStorage"] thead th:nth-child(3),
#modal-storage [data-section="modal-addStorage"] tbody td:nth-child(3) {
    min-width: 13rem;
    width: 15.5rem;
}

/* table pickUp */
#table-area-pickUp,
#table-area-inventory,
#table-area-storage,
#list-medicalDevice-area,
#list-company-area,
#table-area-inspection,
#table-area-sheet-view-1,
#table-area-sheet-view-2,
#table-area-sheet-view-3,
#table-area-sheet-view-4,
#table-area-sheet-view-5,
#table-area-sheet-view-6,
#table-area-sheet-view-7,
#table-area-sheet-view-8,
#table-area-payment,
#table-area-purchase,
#table-area-setting,
#table-area-setting-import,
#table-area-purchase-view-1,
#table-area-purchase-view-2,
#table-area-purchase-view-3 {
    max-height: 550px;
    overflow-y: auto;
}

#table-area-storageModal tbody tr,
#table-area-addStorageModal tbody tr,
#table-area-pickUp tbody tr,
#table-area-pickUpModal tbody tr {
    height: 72px;
}

#table-area-pickUp [data-section*="table-1"] img,
[data-section*="table-inventory-1"] thead th:first-child img,
[data-section*="table-inventory-1"] tbody th:first-child img,
#table-area-payment [data-section*="table-1"] img,
#table-area-payment [data-section*="table-2"] img,
#table-area-purchase-view-1 [data-section="table-1"] img,
#modal-medicalDeviceDatabase tr img {
    width: 20px;
}

/* #table-area-pickUp [data-section*="table-2"] img {
    width: 15px;
} */

#modal-paymentDetail thead th:nth-child(3),
#modal-paymentDetail tbody td:nth-child(3) {
    min-width: 16rem;
}

/* table inventory Modal */
#table-area-inventoryModal thead th:first-child,
#table-area-inventoryModal tbody td:first-child,
#table-area-pickUpModal thead th:first-child,
#table-area-pickUpModal tbody td:first-child {
    min-width: 16rem;
}

#table-area-inventoryModal thead th:nth-child(2),
#table-area-inventoryModal tbody td:nth-child(2),
#table-area-pickUpModal thead th:nth-child(2),
#table-area-pickUpModal tbody td:nth-child(2),
#modal-paymentDetail thead th:nth-child(2),
#modal-paymentDetail tbody td:nth-child(2) {
    min-width: 8rem;
}

#table-area-inventoryModal thead th:nth-child(3),
#table-area-inventoryModal tbody td:nth-child(3),
#table-area-inventoryModal thead th:nth-child(4),
#table-area-inventoryModal tbody td:nth-child(4),
#table-area-pickUpModal thead th:nth-child(3),
#table-area-pickUpModal tbody td:nth-child(3) {
    min-width: 8rem;
}

#table-area-pickUpModal thead th:nth-child(4),
#table-area-pickUpModal tbody td:nth-child(4),
#table-area-pickUpModal thead th:nth-child(5),
#table-area-pickUpModal tbody td:nth-child(5) {
    min-width: 12rem;
    width: 12rem;
}

#table-area-inventoryModal thead th:nth-child(5),
#table-area-inventoryModal tbody td:nth-child(5) {
    min-width: 10rem;
}

#table-area-inventoryModal input,
#table-area-inventoryModal .dropdown-toggle,
#table-area-pickUpModal input,
#table-area-pickUpModal .dropdown-toggle {
    font-size: 0.875rem;
}

#table-area-inventoryModal {
    /* max-height: 515px;
    overflow-y: auto; */
}

#table-area-pickUpModal {
    /* max-height: 515px;
    overflow-y: auto; */
}

[id*="table-area-"]::-webkit-scrollbar-track,
#list-medicalDevice-area::-webkit-scrollbar-track,
#list-company-area::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #fff;
}

[id*="table-area-"]::-webkit-scrollbar,
#list-medicalDevice-area::-webkit-scrollbar,
#list-company-area::-webkit-scrollbar {
    width: 8px;
    background-color: #fff;
}

[id*="table-area-"]::-webkit-scrollbar-thumb,
#list-medicalDevice-area::-webkit-scrollbar-thumb,
#list-company-area::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #D7D7D7;
}



/* page number custom */
.page-item.active .page-link {
    color: #fff;
    background-color: #61c7d0;
    border-color: #61c7d0;
}

.page-item a {
    height: 34px;
    width: auto;
    min-width: 34px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.875rem;
}

.page-item a span {
    top: -2px;
    position: relative;
}

/* dropdown custom */
/* .dropdown-toggle {
    width: 160px;
    min-width: 160px;
} */

.dropdown-custom01 {
    width: 160px;
    min-width: 160px;
}

.dropdown-menu:not(.datepicker) {
    width: auto;
    min-width: 160px;
    max-height: 211px;
    overflow-y: auto;
}

.modal .dropdown-menu,
#modal-company .dropdown-menu,
#modal-editCompany .dropdown-menu,
#modal-addCompany .dropdown-menu,
#modal-storage .dropdown-menu,
#modal-clinicUserAdd .dropdown-menu,
#modal-clinicUserEdit .dropdown-menu {
    width: 100%;
    min-width: 160px;
}

.dropdown-item {
    padding: 0.6rem 1.5rem;
    padding-left: 0.8rem;
}

.dropdown-item.active {
    color: #212121;
    background-color: #DFF5FA;
}

.dropdown-item:active {
    color: #212121;
    background-color: #f6f6f6;
}

/* other */
#input-userid::placeholder,
#input-password::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #d7d7d7;
    opacity: 1;
    /* Firefox */
}

.login-error-icon {
    height: 16px;
    position: relative;
    top: -2px;
    margin-right: 10px;
}

.cursor-pointer {
    cursor: pointer;
}

[class*="menu-"]:not(.bg-custom03):hover {
    background-color: #eeeeee;
}

.pickUp-countNum {
    background-color: #F4BB1B;
    border-radius: 2rem;
    padding-left: 8px;
    padding-right: 8px;
}

.text-shadow-none {
    text-shadow: none;
}

[placeholder*="*請輸入數量"]::placeholder {
    color: #ED7B76;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafafa;
}

.datepicker-dropdown {
    padding: 14px !important;
    font-size: 12px;
    border: 1px solid #d7d7d7;
}

.datepicker-dropdown thead tr:nth-child(3) {
    color: rgba(0, 0, 0, 0.54);
    height: 40px;
}

.datepicker td {
    width: 30px !important;
    height: 30px !important;
    border-radius: 20px !important;
}

.datepicker-border-d7d7d7 {
    background-color: white;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active,
.datepicker table tr td.active,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover {
    background-color: #61c7d0 !important;
    background-image: none;
    text-shadow: none;
}

.badge-pill {
    padding-right: 1em;
    padding-left: 1em;
}

.badge-custom {
    background-color: #0F9EBA;
    color: #fff;
    position: relative;
    top: -1px;
    font-size: 10px;
    border-radius: 20px;
    padding: 4px 0;
    width: 72px;
    text-align: center;
}

.badge-custom01 {
    background-color: #d7d7d7;
    color: #737373;
    position: relative;
    top: -1px;
}

.badge-custom02 {
    background-color: #ED7B76;
    color: #fff;
    position: relative;
    top: -1px;
}
.modal-form{
    border: 1px solid #fff;
}

#modal-form input::placeholder,
#modal-medicalDevice input::placeholder,
#modal-company input::placeholder,
#modal-addCompany input::placeholder,
#modal-editCompany input::placeholder,
#modal-addCompany textarea::placeholder,
#modal-editCompany textarea::placeholder,
#modal-paymentTab1 input::placeholder,
#modal-clinicUserAdd input::placeholder,
#modal-clinicUserEdit input::placeholder,
#modal-purchase input::placeholder {
    color: #d7d7d7;
}

#modal-storage input::placeholder {
    color: #d7d7d7;
}

#modal-medicalDevice input {
    border-radius: 0.15rem;
}

.color-box {
    width: 20px;
    height: 20px;
    background-color: #000;
    display: inline-block;
    margin-right: 6px;
    margin-left: 6px;
    border-radius: 1rem;
}

.days-box {
    width: 32px;
    height: 32px;
    background-color: #E0E0E0;
    display: inline;
    border-radius: 1rem;
}

.days-box.active {
    width: 32px;
    height: 32px;
    background-color: #61C7D0;
    display: inline;
    border-radius: 1rem;
    color: #ffffff;
}

.color-box-block {
    display: block;
    margin-bottom: 6px;
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
    border-bottom: none;
}

.popover-header img:last-child {
    position: relative;
    top: -2px;
}

.colorpicker {
    border: none !important;
}

.tooltip-inner {
    max-width: 350px;
    width: auto;
    background-color: rgba(0, 0, 0, 0.95);
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
    border-bottom-color: rgba(0, 0, 0, 0.95) !important;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
    border-top-color: rgba(0, 0, 0, 0.95) !important;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before,
.bs-tooltip-left .arrow::before {
    border-left-color: rgba(0, 0, 0, 0.95) !important;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before,
.bs-tooltip-right .arrow::before {
    border-right-color: rgba(0, 0, 0, 0.95) !important;
}

[src*="menu-icon"] {
    width: 20px;
    height: 20px;
    align-self: center;
}

.table-striped tbody tr.border-pickUpTableFold:nth-of-type(even) {
    background-color: #fff;
}

.table-striped tbody tr.border-pickUpTableFold:nth-of-type(odd) {
    background-color: rgba(223, 245, 250, 0.4);
}

.progress {
    height: 1.5rem;
    border-radius: 0;
    background-color: #E0E0E0;
}

.progress-bar {
    background-color: #61C7D0;
}

@media (min-width: 576px) {

    #modal-inventoryList .modal-dialog,
    #modal-pickUpList .modal-dialog,
    #modal-inspection .modal-dialog,
    #modal-paymentTab1 .modal-dialog,
    #modal-paymentDetail .modal-dialog,
    #modal-paymentDetail-wait .modal-dialog,
    #modal-paymentTab2 .modal-dialog,
    #modal-purchase [data-section="modal-purchaseSelected"],
    #modal-requisition [data-section="modal-requisitionReview"],
    #modal-requisition [data-section="modal-requisitionReviewSplit"],
    #modal-storage [data-section="modal-addStorage"],
    #modal-storage [data-section="modal-storage"],
    #modal-requisitionHistory .modal-dialog,
    #modal-medicalDeviceDatabase .modal-dialog {
        max-width: 90%;
        margin: 1.75rem auto;
    }
}

@media (min-width: 992px) {

    .modal-lg,
    #modal-storage [data-section="modal-addStorage"],
    #modal-storage [data-section="modal-storage"] {
        max-width: 800px;
    }
}


@media (min-width: 1200px) {

    #modal-inventoryList .modal-xl,
    #modal-pickUpList .modal-xl,
    #modal-inspection .modal-xl,
    #modal-paymentTab1 .modal-dialog,
    #modal-paymentDetail .modal-dialog,
    #modal-paymentDetail-wait .modal-dialog,
    #modal-paymentTab2 .modal-dialog,
    #modal-purchase [data-section="modal-purchaseSelected"],
    #modal-requisition [data-section="modal-requisitionReview"],
    #modal-requisition [data-section="modal-requisitionReviewSplit"],
    #modal-requisitionHistory .modal-dialog {
        max-width: 1140px;
    }
}

@media print {
    #btn_print_area {
        display: none;
    }
}

.print-area img {
    max-height: 96px;
}

.print-area {
    break-after: page;
}

[data-section*="input-searchTab"], [data-section*="input-database-searchTab"] {
    width: 208px;
}

::-webkit-scrollbar {
    width: 5px;
    background-color: #fff;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* margin: 80px 0 5px 0; */
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: rgb(219, 219, 219);
}

.tb-min4 {
    min-width: 4rem;
}

.tb-min6 {
    min-width: 6rem;
}

.tb-min8 {
    min-width: 8rem;
}

.tb-min9 {
    min-width: 9rem;
}

.tb-min10 {
    min-width: 10rem;
}

.tb-min12 {
    min-width: 10rem;
}

.tb-min13 {
    min-width: 13rem;
}

.tb-min15 {
    min-width: 15rem;
}

.tb-2 {
    width: 2rem;
}

.tb-3 {
    width: 3rem;
}

.tb-4 {
    width: 4rem;
}

.tb-5 {
    width: 5rem;
}

.tb-6 {
    width: 6rem;
}

.tb-7 {
    width: 7rem;
}

.tb-8 {
    width: 8rem;
}

.tb-9 {
    width: 9rem;
}

.tb-10 {
    width: 10rem;
}

.tb-12 {
    width: 12rem;
}

.tb-13 {
    width: 13rem;
}

.max-width175px {
    max-width: 175px;
}

.mb-5rem {
    margin-bottom: 5rem;
}

.opacity-50 {
    opacity: 0.5;
}

.dropdown-search {
    border-radius: 0 !important;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    top: -8px;
    position: relative;
    background-color: #DFF5FA;
}

.dropdown-search:focus {
    background-color: #DFF5FA;
}

.commonPurchase-list-hover:hover {
    background-color: #dff5fa !important;
}

.tooltip-img{
    width: 128px;
}

.hasvalidityperiod{
    opacity: 0.5;
    pointer-events: none;
}

.pointerEventsNone{
    pointer-events: none;
}
.modal-content #modal-form{
    border:1px solid transparent;
}
img[src*="main-logo-name-cyan.svg"]{
    width:103px;
}

/*login.html*/
#main-content-login{
    width:1440px;
    margin: 0 auto;
    position: relative;
}
#main-content-login::before{
    content: "";
    display: block;
    width: 50%;
    height: 100vh;
    background-color: #b5e7ea;
    position: absolute;
    left: -720px;
    top: 0;
}
#main-content-login input[type=text],
#main-content-login input[type=password]{
    height: 36px;
}
#main-content-login button.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    height:36px;
}
.login-fiels{
    max-width: 300px;
    width: 100%;
    margin-right: 0;
    margin-left: 8.688rem;
}
.login-fiels h1{
    margin-bottom:3.5rem;
}
.login-fiels #error-container{
    margin:var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-xs);
    width: 100%;
    display: block;
    min-height: 14px;
}
/* .login-fiels .form-control ~.error-message{
    display: block !important;
    min-height: 14px;
} */
/* .login-fiels .form-control ~.validate-explanation{
    display:none;
} */
.login-fiels input[type=checkbox].form-control{
    width: 18px;
    height: 18px;
    position: relative;
    top: 3px;
    opacity: 0;
}
.login-fiels input[type=checkbox].form-control +label{
    padding-left:var(--spacing-xs);
}
.login-fiels input[type=checkbox].form-control +label::before,
.login-fiels input[type=checkbox].form-control +label::after{
    content: "";
    position: absolute;
    display: block;
    left: -22px;
    top: calc(50% + 1px);
    transform: translateY(-50%);
    pointer-events: none;
}
.login-fiels input[type=checkbox].form-control +label::before{
    width: 18px;
    height: 18px;
    background-color: #fff;
    border:1px solid #d7d7d7;
    border-radius: 2px;
}
.login-fiels input[type=checkbox].form-control +label::after{
    content: "";
    position: absolute;
    display: block;
    left: -16px;
    top: calc(50% + -8px);
    width: 7px;
    height: 14px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
} 
.login-fiels input[type=checkbox].form-control.disabled:checked{
    pointer-events: none;
}
.login-fiels input[type=checkbox].form-control:checked +label::before{
    background-color: #61c7d0;
    border-color: #61c7d0;
}
.login-fiels input[type=checkbox].form-control.disabled:checked +label::before{
    background-color: #d7d7d7;
    border-color: #d7d7d7;
}
/*form 欄位*/
.field-list{
    margin-bottom: calc(var(--spacing-m));
    margin-left:var(--spacing-xs);
    width: 100%;
}
.form-control-container{
    position: relative;
}
.form-control-container .input-icon-append {
    position: absolute;
    right: var(--spacing-m);
    display: block;
    top: 8px;
    max-width: 20px;
    cursor: pointer;
}
.password-switch + .form-control{
    padding-right: calc(var(--spacing-xs) + var(--spacing-m) + 24px);
}
.form-control ~.validate-explanation{
    min-height: 14px;
}
.form-control.error{
    border-color: #ED7B76;
}
.form-control.error ~.validate-explanation{
    display:none;
}
.form-control.error ~.error-message{
    display: block;
}
.form-control ~.error-message{
    display: none;
    line-height: 1.2;
}
.form-control ~.validate-explanation{
    display:block;
    line-height: 1.2;
}
.form-control.checkbox {
    width: 100%;
    margin: 15px auto;
    position: relative;
    display: block;
}


/*widget*/
.segment-container{
    width: 100%;
}
.segment{
    border:1px solid #d7d7d7;
    border-radius: 4px;
    padding:var(--spacing-l);
    text-align: center;
    background-color: #fff;
    margin:0 auto;
}
.segment-gray{
    background-color: #f4f4f4;
}
.segment .segment-header{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.75;
    margin-bottom: var(--spacing-xxs);
}

/*bootstrap style adject*/
input::placeholder,
.form-control::placeholder{
    color: #d7d7d7 !important;
}
label{
    position: relative;
}
.form-control{
    padding-left:var(--spacing-m);
    padding-right:var(--spacing-m);
    transition:none;
}
input[type=checkbox].form-control{
    display:inline-block;
    width:auto;
    height: auto;
}
.modal-content{
    border-color:transparent;
}
.modal .modal-footer{
    padding-right:30px;
}
.modal .close{
    outline: none;
    opacity: 1;
    position: absolute;
    right: 16px;
    top: 16px;
}
.modal .modal-backdrop{
    z-index: -1;
}
.modal-header{
    margin-bottom:var(--spacing-m);
    justify-content: flex-start;
}
.modal-footer{
    margin-top:var(--spacing-m);
}
.modal .modal-title{
    color:#212121;
}
.dropdown-menu{
    border-color: #d7d7d7;
}
.dropdown-toggle{
    padding-left:var(--spacing-m);
    padding-right:var(--spacing-m);
}
.dropdown-toggle.error::after{
    color: #ED7B76;
}
.dropdown-toggle:disabled::after{
    color: transparent;
}
.dropdown-item:hover, 
.dropdown-item:focus{
    background-color: #dff5fa;
}
.spinner-border,.spinner-grow{
    color:#61c7d0;
}