@charset "UTF-8"; /*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| --------------------------------------------------------------- 領収書 --------------------------------------------------------------- |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/ #main.receiptList .contentsArea .headerBox .upperBox { padding: 0; margin-bottom: 17px; } #main.receiptList .contentsBox { display: flex; justify-content: flex-end; position: relative; } #main.receiptList .contentsBox:before { content: ""; display: block; height: 100%; } #main.receiptList .contentsBox .receiptListBox { flex: 0 0 300px; position: absolute; top: 0; bottom: 0; left: 0; } #main.receiptList .contentsBox .receiptListBox > .inner { width: 300px; height: 100%; box-sizing: border-box; overflow: auto; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox, #main.receiptList .contentsBox .receiptListBox .spDetailArea { display: none; } #main.receiptList .contentsBox .receiptListBox ul { height: 100%; max-height: 100%; overflow: auto; } #main.receiptList .contentsBox .receiptListBox ul li { border-bottom: 1px dotted #CCC; } #main.receiptList .contentsBox .receiptListBox ul li input[type="checkbox"] { display: none; } #main.receiptList .contentsBox .receiptListBox ul li label { display: block; margin-right: 0 !important; padding: 20px; text-decoration: none !important; transition: background-color ease 0.3s; } #main.receiptList .contentsBox .receiptListBox ul li label:hover, #main.receiptList .contentsBox .receiptListBox ul li label.active { background-color: #DFECF3; } #main.receiptList .contentsBox .receiptListBox ul li label span.dateOuter { display: flex; align-items: center; } #main.receiptList .contentsBox .receiptListBox ul li label span.date { display: inline-block; font-size: 11px; } #main.receiptList .contentsBox .receiptListBox ul li label span.label { display: inline-block; margin-left: 5px; font-size: 11px; line-height: 1; } #main.receiptList .contentsBox .receiptListBox ul li label span.label.important { background-color: #F30; color: #FFF; font-weight: bold; font-size: 10px; font-family: system-ui; padding: 3px 5px; vertical-align: text-bottom; } #main.receiptList .contentsBox .receiptListBox ul li label span.label.new { background-color: #FF6565; color: #FFF; font-weight: bold; font-size: 10px; font-family: system-ui; padding: 3px 5px; vertical-align: text-bottom; } #main.receiptList .contentsBox .receiptListBox ul li label span.ttl { display: block; font-size: 14px; } #main.receiptList .contentsBox .receiptListBox ul li label span.mark { display: none; } #main.receiptList > .inner > .contentsArea > .contentsBox:before { content: none !important; } #main.receiptList .contentsBox .receiptDetailBoxOuter { flex: 0 0 calc(100% - 300px); position: relative; } #main.receiptList .contentsBox .receiptDetailBoxOuter:after { content: ""; display: block; width: 20px; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.03) 100%); } #main.receiptList .contentsBox .receiptDetailBox { visibility: hidden; opacity: 0; position: absolute; top: 0; bottom: 0; left: 300px; width: calc(100vw - 408px); z-index: 1; transition: all ease 0.6s; } #colMain.menuClose #main.receiptList .contentsBox .receiptDetailBox { width: calc(100vw - 340px); } #main.receiptList .contentsBox .receiptDetailBox > .inner { height: 100%; /*padding: 40px;*/ box-sizing: border-box; overflow: hidden; } #main.receiptList .contentsBox .receiptListBox ul li input[type="checkbox"]:checked + label + .receiptDetailBox { visibility: visible; opacity: 1; padding: 40px; box-sizing: border-box; } #main.receiptList .contentsBox .receiptListBox ul li input[type="checkbox"]:checked + label + .receiptDetailBox h3 { font-size: 1.3em; font-family: system-ui; margin-bottom: 15px; } #main.receiptList .contentsBox .receiptListBox ul li input[type="checkbox"]:checked + label + .receiptDetailBox .receiptDetailOuter { height: calc(100% - 34px); padding: 10px; background: #B5D7EB; box-sizing: border-box; } #main.receiptList .contentsBox .receiptListBox ul li input[type="checkbox"]:checked + label + .receiptDetailBox .receiptDetailOuter .receiptDetailArea { height: 100%; overflow: auto; display: flex; background-color: #FFF; box-sizing: border-box; } #main.receiptList .contentsBox .receiptListBox ul li input[type="checkbox"]:checked + label + .receiptDetailBox .receiptDetailOuter .receiptDetailArea .infoImg { margin-right: 40px; min-width: 32%; } #main.receiptList .contentsBox .receiptListBox ul li input[type="checkbox"]:checked + label + .receiptDetailBox .receiptDetailOuter .receiptDetailArea .infoImg img { width: 100%; max-width: 100%; } #main.receiptList .contentsBox .receiptDetailArea .upper table tbody tr:first-of-type td { padding: 20px 0 15px; font-size: 1.5em; font-weight: bold; border-top: 1px solid #EEE; } #main.receiptList .contentsBox .receiptDetailArea p.workCount { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } #main.receiptList .contentsBox .receiptDetailArea .workDetailOuter { margin: 8px -10px -8px; padding: 8px; border-top: 1px dotted #DDD; } #main.receiptList .contentsBox .receiptDetailArea .workDetailOuter .workDetailInner .totalTable { width: 100%; } #main.receiptList .contentsBox .receiptDetailArea > .inner > .box > .col > span.verified { line-height: 1; display: inline-flex; justify-content: center; align-items: center; border-radius: 3px; font-size: 0.9em; font-weight: bold; font-family: system-ui; width: 75px; height: 20px; margin-right: 5px; color: #FFF; background-color: #63BCBC; } #main.receiptList .contentsBox .btnConf { text-decoration: none !important; line-height: 1; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 3px; transition: all 0.2s; border: 0; font-size: 0.9em; font-weight: bold; font-family: system-ui; width: 75px; height: 20px; margin-right: 5px; color: #FFF; background-color: #FF6565; } #main.receiptList .contentsBox .btnConf:hover { opacity: 0.7; } #main.receiptList .receiptDetailArea > .inner { width: 100%; background-color: #F0F7FB; } #main.receiptList .receiptDetailArea > .inner > .box { padding-bottom: 0; } #main.receiptList .receiptDetailArea > .inner > .box > .col { padding: 50px;　background-color: #F0F7FB; } #main.receiptList .receiptDetailArea .ttl { font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 10px; padding-top: 20px; border-top: 1px solid #DDD; } #main.receiptList .receiptDetailArea .upper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-top: 10px; border-top: 2px solid #639ABC; } #main.receiptList .receiptDetailArea .upper > .lt p { font-size: 14px; font-weight: bold; } #main.receiptList .receiptDetailArea .upper > .rt { display: flex; align-items: center; } #main.receiptList .receiptDetailArea .upper > .rt span { margin-right: 8px; } #main.receiptList .receiptDetailArea .upper > .rt .upperRtBox { padding: 5px; background-color: #F5F6FA; border: 1px solid #DDD; } #main.receiptList .receiptDetailArea .upper > .rt .upperRtBox > .inner { padding: 5px; background-color: #FFF; text-align: center; } #main.receiptList .receiptDetailArea table.receiptTableArea { width: 100%; } #main.receiptList .receiptDetailArea table.receiptTableArea:not(:last-of-type) { margin-bottom: 10px; } #main.receiptList .receiptDetailArea table.receiptTableArea:nth-of-type(2) tbody tr:first-of-type td { background-color: #F0F7FB; } #main.receiptList .receiptDetailArea table.receiptTableArea { border-top: 1px solid #DDD; border-left: 1px solid #DDD; } #main.receiptList .receiptDetailArea table.receiptTableArea th { border-right: 1px solid #DDD; border-bottom: 1px solid #DDD; padding: 8px 10px; font-weight: normal; white-space: nowrap; background-color: #F5F6FA; width: 100px; } #main.receiptList .receiptDetailArea table.receiptTableArea td { border-right: 1px solid #DDD; border-bottom: 1px solid #DDD; border-top: transparent; padding: 8px 10px; background-color: #FFF; } #main.receiptList .receiptDetailArea table.receiptTableArea td > table { width: 100%; } #main.receiptList .receiptDetailArea table.receiptTableArea td > table th { border-bottom: none; border-color: #DDD; } #main.receiptList .receiptDetailArea table.receiptTableArea td > table td { border-bottom: none; border-color: #DDD; } #main.receiptList .receiptDetailArea table.receiptTableArea .totalTable td { border-color: #DDD; } /*未確定用*/ #main.receiptList .contentsBox .receiptListBox ul li label span.label.pending { background-color: #FFAF43; color: #FFF; font-weight: bold; font-size: 10px; font-family: system-ui; padding: 3px 5px; vertical-align: text-bottom; } #main.receiptList .contentsBox .receiptListBox ul li input[type="checkbox"]:checked + label + .receiptDetailBox.pending .receiptDetailOuter { background: #FFE1B9; } #main.receiptList .contentsBox .receiptDetailArea > .inner > .box > .col > span.pending { height: 50px; display: inline-flex; align-items: center; padding-left: 60px; font-size: 18px; color: #FFAF43; font-weight: bold; background: url("../images/ico_error_02.svg") no-repeat left center; background-size: 50px 39px; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea > .inner, #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea > .inner > .box > .col { background-color: #FFF5E6; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .upper { border-top: 2px solid #FFAF43; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .upper > .rt .upperRtBox, #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea table.receiptTableArea th { background-color: #F0F0F0; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea table.receiptTableArea:nth-of-type(2) tbody tr:first-of-type td { background-color: transparent; } #main.receiptList .contentsBox .receiptDetailBox.pending .detailOpen span, #main.receiptList .contentsBox .receiptDetailBox.pending .detailClose span { color: #FF6565; } #main.receiptList .contentsBox .receiptDetailBox.pending .detailOpen span:after, #main.receiptList .contentsBox .receiptDetailBox.pending .detailClose span:after { border-color: #FF6565; } /*colSub 非表示時対応*/ #colMain.menuClose #main.info .contentsBox .receiptDetailBox { width: calc(100vw - 340px); } /*------------------------------------------------------------- 作業一覧 -------------------------------------------------------------*/ .modalOuter.ReceiptDetailWork .modalWindow .headBox { background-color: #639ABC; } .modalOuter.ReceiptDetailWork .modalWindow .headBox a.btnClose { border-left-color: #FFF; } .modalOuter.ReceiptDetailWork .modalWindow .headBox a.btnClose:hover { background-color: #8AB0C8; } .modalOuter.ReceiptDetailWork .modalWindow .scrollArea { background-color: #FFF; } .modalOuter.ReceiptDetailWork .modalWindow .scrollArea > .outerBox > .scrollBox { background-color: #F0F7FB; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .upperBox { padding: 0 5px 5px 10px !important; background-color: #F0F7FB; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .totalBox { background-color: #F0F7FB; padding: 0 5px 10px; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .totalBox .tableOuter { max-width: calc(100vw - 90px); overflow: scroll; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .subTabBox { width: calc(100% + 10px); margin-left: -5px; padding-top: 5px; background-color: #FFF; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .workDetailOuter { margin: 8px -5px -8px; padding: 8px; border-top: 1px dotted #DDD; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .totalTable { width: 100%; white-space: nowrap; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .totalTable thead th { padding: 10px; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .totalTable tbody th { padding: 10px; background-color: #F5F6FA; border-right: 1px solid #DDD; border-bottom: 1px solid #DDD; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .totalTable tbody td { border-top: 1px solid #DDD; padding: 8px 5px; vertical-align: middle; background-color: #FFF; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable #list-table.scrollTable tr td:nth-of-type(1) { padding-left: 10px; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable #list-table.scrollTable tr td:nth-of-type(1):before, .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable #list-table.scrollTable tr td:nth-of-type(1):after { min-height: unset; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable .checkDone { display: inline-block; width: 30px; height: 30px; border-radius: 3px; background: url("../images/ico_check_wt.svg") no-repeat center center; background-size: 19px 16px; background-color: #DDD; transition: opacity ease 0.2s; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable .checkNotyet { display: inline-block; width: 30px; height: 30px; border-radius: 3px; background: url("../images/ico_check_wt.svg") no-repeat center center; background-size: 19px 16px; background-color: #63BCBC; transition: opacity ease 0.2s; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable .checkDone span, .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable .checkNotyet span { display: inline-block; text-indent: -9999px; } .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable .checkDone:hover, .modalOuter.ReceiptDetailWork .modalWindow #main.orderList .orderListTable .checkNotyet:hover { opacity: 0.7; } .modalOuter.ReceiptDetailWork .modalWindow #colMain > .inner #main > .inner > .contentsArea > .contentsBox { background-color: #F0F7FB; } .modalOuter.ReceiptDetailWork .modalWindow #colMain > .inner #main > .inner > .contentsArea > .contentsBox > .scrollTableOuter { left: 5px; right: 5px; width: calc(100% - 10px) !important; } .modalOuter.ReceiptDetailWork .subTab1 ul li { background-color: #F0F7FB; } .modalOuter.ReceiptDetailWork .subTab1 ul li.active, .modalOuter.ReceiptDetailWork .subTab1 ul li:hover { border-top-color: #639ABC; } .modalOuter.ReceiptDetailWork .subTab1:after { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); } /*未確定用*/ .modalOuter.ReceiptDetailWork.pending .modalWindow .headBox { background-color: #FFAF43; } .modalOuter.ReceiptDetailWork.pending .modalWindow .headBox a.btnClose { border-left-color: #FFF; } .modalOuter.ReceiptDetailWork.pending .modalWindow .headBox a.btnClose:hover { background-color: #FFC77B; } .modalOuter.ReceiptDetailWork.pending .modalWindow #main.orderList .totalTable thead th, .modalOuter.ReceiptDetailWork.pending .modalWindow #main.orderList .totalTable tbody th, .modalOuter.ReceiptDetailWork.pending .scrollTable thead th, .modalOuter.ReceiptDetailWork.pending .orderListTable #list-table.scrollTable tbody:nth-child(odd) td { background-color: #F0F0F0; } .modalOuter.ReceiptDetailWork.pending .modalWindow .scrollArea, .modalOuter.ReceiptDetailWork.pending .modalWindow #main.orderList .subTabBox, .modalOuter.ReceiptDetailWork.pending .modalWindow #main.orderList .totalTable tbody td { background-color: #FFF; } .modalOuter.ReceiptDetailWork.pending .modalWindow .scrollArea > .outerBox > .scrollBox, .modalOuter.ReceiptDetailWork.pending .modalWindow #main.orderList .upperBox, .modalOuter.ReceiptDetailWork.pending .modalWindow #main.orderList .totalBox, .modalOuter.ReceiptDetailWork.pending #colMain > .inner #main > .inner > .contentsArea > .contentsBox, .modalOuter.ReceiptDetailWork.pending .subTab1 ul li { background-color: #FFF5E6; } .modalOuter.ReceiptDetailWork.pending .subTab1 ul li.active, .modalOuter.ReceiptDetailWork.pending .subTab1 ul li:hover { border-top-color: #FFAF43; } .modalOuter.ReceiptDetailWork.pending .subTab1:after { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); } .modalOuter.ReceiptDetailWork.pending .detailOpen span, .modalOuter.ReceiptDetailWork.pending .detailClose span { color: #FF6565; } .modalOuter.ReceiptDetailWork.pending .detailOpen span:after, .modalOuter.ReceiptDetailWork.pending .detailClose span:after { border-color: #FF6565; } /*------------------------------------------------------------- ダッシュボード - モーダル表示 -------------------------------------------------------------*/ .modalOuter .modalWindow .receiptDetailBox { height: 100%; overflow: hidden; box-sizing: border-box; } /*.modalOuter .modalWindow .infoDetailBox .inner { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; grid-template-areas: "col1" "col2"; } .modalOuter .modalWindow .infoDetailBox .inner .ttl { grid-area: col1; } .modalOuter .modalWindow .infoDetailBox .inner .infoDetailOuter { grid-area: col2; }*/ .modalOuter .modalWindow .receiptDetailBox .inner { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto 0 1fr; grid-template-rows: auto 1fr; gap: 0; grid-template-areas: "col1" "col2"; height: 100%; overflow: hidden; box-sizing: border-box; } .modalOuter .modalWindow .receiptDetailBox .inner .ttl { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: col1; } .modalOuter .modalWindow .receiptDetailBox .inner .receiptDetailArea { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: col2; padding: 20px; background-color: #F5F6FA; overflow: auto; box-sizing: border-box; } .modalOuter .modalWindow .receiptDetailBox .inner .ttl h3 { font-size: 1.3em; font-family: system-ui; margin-bottom: 15px; } .modalOuter .modalWindow .receiptDetailBox .inner .receiptDetailArea { height: 100%; overflow: auto; display: flex; box-sizing: border-box; } .modalOuter .modalWindow .receiptDetailBox .inner .receiptDetailArea .infoImg { margin-right: 40px; min-width: 32%; } .modalOuter .modalWindow .receiptDetailBox .inner .receiptDetailArea .infoImg img { width: 100%; max-width: 100%; height: auto; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow > .inner { height: calc(100% - 40px); margin: 20px; } .modalOuter.ReceiptDetailWork .modalWindow .bottomBox { display: none; } /*------------------------------------------------------------- スマホ用 -------------------------------------------------------------*/ @media screen and (max-width: 779px) { #main.receiptList { padding: 20px 10px 10px; } #main.receiptList h2 { font-size: 1.2em; } #main.receiptList .contentsArea { display: block !important; } #main.receiptList .contentsBox { display: block; } #main.receiptList .contentsBox .receiptListBox, #main.receiptList .contentsBox .receiptListBox > .inner { width: 100%; position: unset; } #main.receiptList .contentsBox .receiptListBox > .inner .scrollAreaOuter { height: 100%; display: -ms-grid; display: grid; -ms-grid-rows: auto 0px 1fr; grid-template-rows: auto 1fr; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 0px; grid-template-areas: "col1" "col2"; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox { display: block; padding: 10px; border-bottom: 1px dotted #CCC; grid-area: col1; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox .upper { display: flex; align-items: center; margin-bottom: 5px; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox .upper .btnPrev, #main.receiptList .contentsBox .receiptListBox .spChoiceBox .upper .btnNext { width: calc((100% - 110px) / 2); height: 28px; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox .upper .btnPrev a, #main.receiptList .contentsBox .receiptListBox .spChoiceBox .upper .btnNext a { width: calc(100% - 2px); height: calc(100% - 2px); display: flex; justify-content: center; align-items: center; background-image: none; text-decoration: none; text-indent: 0; font-weight: bold; color: #FFF; background-color: #BBB; border-color: #CCC; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox .upper .btnThisMonth { width: 100px; height: 28px; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox .upper .btnThisMonth a { color: #222; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox .lower { display: flex; } #main.receiptList .contentsBox .receiptListBox .spChoiceBox .lower .select-wrap { width: calc((100% - 5px) / 2); } #main.receiptList .contentsBox .receiptListBox .spChoiceBox .lower .select-wrap select { width: 100%; height: 28px; } #main.receiptList .contentsBox .receiptListBox ul { overflow-x: hidden; display: none; } #main.receiptList .contentsBox .receiptListBox .spDetailArea { display: block; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; grid-area: col2; } #main.receiptList .contentsBox .receiptDetailBoxOuter {} #main.receiptList .contentsBox .receiptDetailBox { width: auto !important; height: 100%; overflow: hidden; position: unset; visibility: unset; opacity: 1; padding: 10px !important; box-sizing: border-box; } #main.receiptList .contentsBox .receiptDetailBox > .inner { } #main.receiptList .contentsBox .receiptDetailBox > .inner > .receiptDetailOuter { height: 100%; overflow: auto; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea { height: 100%; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea > .inner { margin: 0 !important; height: 100%; background-color: #FFF; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea > .inner .box { padding-bottom: 0; height: 100%; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea > .inner .box > .col { height: 100%; display: -ms-grid; display: grid; -ms-grid-rows: auto 0px 1fr; grid-template-rows: auto 1fr; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 0px; grid-template-areas: "col1" "col2"; padding: 0 !important; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .spUpper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; grid-area: col1; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .spUpper > .col2 > span.verified { line-height: 1; display: inline-flex; justify-content: center; align-items: center; border-radius: 3px; font-size: 0.9em; font-weight: bold; font-family: system-ui; width: 75px; height: 20px; padding-top: 0.7px; margin-right: 5px; color: #FFF; background-color: #63BCBC; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .spUpper .printIco { width: 20px; height: 20px; background-size: 20px 18px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .monthData { grid-area: col2; border: 5px solid #B5D7EB; padding: 10px 5px 5px; height: 100%; background-color: #F0F7FB; overflow: hidden; box-sizing: border-box; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .monthData > .dataScrollBox { height: 100%;overflow: auto; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .period {} #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .period > .col { margin-left: 0; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .period > .col:nth-of-type(1) { display: flex; justify-content: flex-end; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .period > .col:nth-of-type(1) span {} #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .period > .col:nth-of-type(2) span {} #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup { margin-top: 5px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup div[class^="totalBox"] { display: flex; justify-content: space-between; padding: 5px 10px; background-color: #B5D7EB; margin-bottom: 5px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup div[class^="totalBox"] p { font-weight: bold; color: #333; font-size: 1em; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup div[class^="totalBox"] p.price { font-size: 1.2em; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup div[class^="totalBox"] + .tableSpace { margin-top: 5px; border-top: 1px solid #639ABC; padding: 0; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup .totalBox1 { padding: 10px !important; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup .totalBox1 p {} #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup .totalBox1 p.price { font-size: 1.4em !important; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup div[class^="ttlBox"] { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup div[class^="ttlBox"] p.tableTtl { font-weight: bold; color: #838691; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup .ttlBox1 { padding-top: 5px; border-top: 1px solid #639ABC; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table { display: table; width: 100%; border-collapse: collapse; -webkit-overflow-scrolling: touch; border-top: 1px solid #DDD; border-left: 1px solid #DDD; border-bottom: 1px solid #DDD; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table { margin-bottom: 5px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table th, #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table td { vertical-align: middle; border-right: 1px solid #DDD; border-bottom: 1px solid #DDD; border-color: #DDD; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table th { font-weight: bold; background-color: #F5F6FA; color: #838691; padding: 5px; white-space: nowrap; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table tbody td { background-color: #FFF; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table td.lineDotted { border-right-style: dotted; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table td.wsNo { white-space: nowrap; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table.table1, #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup > table.table6 { margin-bottom: 20px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup .tableSpace { display: flex; justify-content: center; padding: 5px; margin-bottom: 5px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup .tableSpace span.pulsIco, #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .tableGroup .tableSpace span.equalArrow { width: 13px; height: 13px; background-size: 13px 13px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .btnDetail { height: 25px; font-size: 0.8em; width: 40px; } #main.receiptList .contentsBox .receiptDetailBox .receiptDetailArea .workDetailOuter { margin: 8px -5px -8px; padding: 5px 5px 8px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow > .inner { height: 100%; margin: 0; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow .scrollArea { padding: 5px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow .scrollArea .scrollBox { padding: 0; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow .scrollArea .scrollBox #colMain { height: 100%; min-height: 100%; width: 100%; margin: 0; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow .scrollArea .scrollBox #colMain > .inner #main > .inner { overflow-x: hidden; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .upperBox { flex-direction: unset; align-items: flex-end !important; padding: 5px 5px 0 !important; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .upperBox h2 { font-size: 1.2em; white-space: nowrap; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .upperBox .col2 { padding-top: 0; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .upperBox .btnPrint { height: 25px; background-size: 15px 19px; padding: 0 10px 0 32px; background-position: 10px center; font-size: 0.9em; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .totalBox { padding: 5px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .totalBox .tableOuter { max-width: calc(100vw - 20px); } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .totalTable thead th, .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .totalTable tbody th, .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .totalTable tbody td { padding: 5px 8px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .subTabBox { min-height: 28px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .subTabBox .subTab1 { min-height: 30px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .subTabBox .subTab1 ul li a { height: 25px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .scrollTable thead tr { height: 30px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .scrollTable th, .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .scrollTable td { padding: 5px 8px 4px 8px; position: unset !important; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .scrollTable th { color: #333; font-weight: bold; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .workDetailOuter { margin: 3px -8px -5px; padding: 5px; } .modalOuter.modalSizeS.ReceiptDetailWork .modalWindow #main.orderList .workDetailOuter a.detailOpen { padding-right: 18px; } .modalOuter.modalSizeS.ReceiptDetailWork #colMain > .inner #main.orderList > .inner > .contentsArea > .contentsBox > .scrollTableOuter { top: 5px; bottom: 5px; height: calc(100% - 10px) !important; } /*未確定用*/ #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea > .inner > .box > .col { background-color: #FFF; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .monthData { background-color: #FFF5E6; border-color: #FFE1B9; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .spUpper > .col2 > span { height: 40px; display: inline-flex; align-items: center; padding-left: 43px; font-size: 14px; color: #FFAF43; font-weight: bold; background: url("../images/ico_error_02.svg") no-repeat left center; background-size: 40px 29px; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .tableGroup div[class^="totalBox"] { background-color: #FFE1B9; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .tableGroup > table th { background-color: #F0F0F0; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .tableGroup > table td { background-color: #FFF; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .tableGroup .ttlBox1, #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .tableGroup div[class^="totalBox"] + .tableSpace { border-color: #FFCA83; } #main.receiptList .contentsBox .receiptDetailBox.pending .receiptDetailArea .tableGroup div[class^="ttlBox"] p.tableTtl { color: #333; } }