@charset "UTF-8"; #property-info-byorder { min-height: 100%; margin: 0; border: none; border: 1px solid #aaaaaa; border-width: 1px 0 0; padding: 0.3em 0 0 0; background-color: #17a2b8; } #property-info-byorder .tab-area { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; gap: 0.5em; margin: 0; border: none; padding: 0.2em 0.5em 0 0.5em; list-style: none; } #property-info-byorder .tab-area li { flex-grow: 1; margin: 0; border: none; border-radius: 0.3em 0.3em 0 0; padding: 0 1em; text-align: center; line-height: calc(40px - 0.5em); white-space: nowrap; cursor: pointer; } #property-info-byorder .tab-area li { color: #ffffff; background-color: #17a2b8; border-bottom: 0.5em solid #17a2b8; } #property-info-byorder .tab-area.detail li.order-detail { color: #444444; background-color: #ffffff; border-bottom-color: #ffffff; } #property-info-byorder .tab-area.timeline li.order-timeline { color: #444444; background-color: #ffffff; border-bottom-color: #ffffff; } #property-info-byorder table { width: 100%; margin: 0; border: 1em solid #ffffff; border-collapse: collapse; background-color: #ffffff; } #property-info-byorder table tbody th { width: 1%; padding: 0.2em; color: #aaaaaa; font-weight: normal; white-space: nowrap; } #property-info-byorder table tbody td { padding: 0; line-height: 2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #property-info-byorder table tbody th.address-link { text-align: right; } #property-info-byorder table tbody th.address-link a { margin: 0; padding: 0; } #property-info-byorder table tbody td input { display: block; width: 100%; height: 2em; border: 1px solid #bbbbbb; border-radius: 0.3em; padding: 0 0.2em; } #property-info-byorder table tfoot td { text-align: right; color: #17a2b8; line-height: 1em; font-size: 0.7em; } #order-info { margin: 7em 0 3em 0; } #order-info.new { margin: 4em 0 3em 0; } #order-info .order-items > .label { margin: 1em 1em 0.5em 1em; } #order-info .order-items > .label span { vertical-align: middle; } #order-info .order-items > .label .afterorder-message { float: right; color: #17a2b8; font-size: 0.8em; line-height: 2em; } #order-info .order-items .order-item { margin: 0.5em 0; border: 1px solid #cccccc; border-width: 1px 0; padding: 1em; background-color: #ffffff; } #order-info .order-items .order-item .label { margin: 0 0 0.5em 0; line-height: 2em; } #order-info .order-items .order-item .label label { margin: 0 0.5em 0 0; vertical-align: middle; color: #aaaaaa; } #order-info .order-items .order-item .label a { float: right; vertical-align: middle; } #order-info .order-items .order-item.noback { border: none; background: none; padding-top: 0; } #order-info .order-items .order-item.noback .label label { color: #777777; } #order-info .order-items .order-item .label .require { padding: 0.2em 1em; color: #ffffff; background-color: #cc3333; line-height: 0.7em; font-size: 0.7em; vertical-align: middle; border-radius: 0.3em; } #order-info .order-items .order-item .label .afteredit { padding: 0.2em 1em; color: #cc3333; line-height: 0.7em; font-size: 0.7em; vertical-align: middle; } #order-info .order-items .order-item .label button { float: right; display: block; width: 35%; border: none; padding: 0 1em; font-size: 0.8em; white-space: nowrap; color: #ffffff; background: none; background-color: #3377ff; border-radius: 0.3em; } #order-info .order-items .order-item .label button[disabled] { background-color: #59A9ff; } #order-info .order-items .order-item .label .total, #order-info .order-items .order-item .label .subtotal, #order-info .order-items .order-item .label .tax { float: right; display: block; border: none; padding: 0 1em; white-space: nowrap; text-align: right; font-size: 1.5em; } #order-info .order-items .order-item .label .total { font-weight: bold; } #order-info .order-items .order-item .label .date { font-family: monospace; } #order-info .order-items .order-item .value { display: block; } #order-info .order-items .order-item .value input, #order-info .order-items .order-item .value textarea { display: block; width: 100%; height: 2em; border: 1px solid #bbbbbb; border-radius: 0.3em; padding: 0 0.2em; } #order-info .order-items .order-item .value textarea { height: 5em; } #order-info .order-items .order-item .value input::placeholder { color: #cccccc; } #order-info .order-items .order-item .value span { display: block; width: 100%; height: 2em; border: 1px solid transparent; padding: 0 0.2em; line-height: 2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #order-info .order-items .order-item .value span a { margin: 0 0.5em 0 0; } #order-info .order-items .order-item .value .staff { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #order-info .order-items .order-item .value .staff span { display: inline; } #order-info .order-items .order-item .value .staff .staffstoggle { margin-left: 2em; color: #777777; font-size: 0.8em; } #order-info .order-items .order-item .pdf { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 1em; bottom: 8vh; width: 100%; margin: 0; padding: 0; text-align: center; } #order-info .order-items .order-item .pdf button { display: block; flex-grow: 1; height: 2.5em; margin: 0 auto; border: none; padding: 0; line-height: 2.5em; color: #ffffff; background: none; background-color: #777777; border-radius: 7px; } #order-info .order-details > .label { margin: 1em 1em 0.5em 1em; } #order-info .order-details .detail-item { position: relative; margin: 0.5em; border: 1px solid #cccccc; border-radius: 0.3em; padding: 1em 0 0 0; background-color: #ffffff; overflow: hidden; } #order-info .order-details .detail-item .label { position: relative; margin: 0 1em 0.3em; border: none; padding: 0 0 0.25em 0; line-height: 2em; } #order-info .order-details .detail-item.detail { border-top: 0.3em solid lightseagreen; background: none; } #order-info .order-details .detail-item.detail .label { border-bottom: 1px solid #bbbbbb; } #order-info .order-details .detail-item.detail .label.subtotal { margin: 0; border: none; background-color: #ffffff; padding: 1em; } #order-info .order-details .detail-item .label label { margin: 0 0.5em 0 0; vertical-align: middle; color: #777777; white-space: nowrap; } #order-info .order-details .detail-item .label .require { padding: 0.2em 1em; color: #ffffff; background-color: #cc3333; line-height: 0.7em; font-size: 0.7em; vertical-align: middle; border-radius: 0.3em; } #order-info .order-details .detail-item .label div.select { float: right; position: relative; margin-right: 1.5em; width: 40%; padding: 0; } #order-info .order-details .detail-item .label div.selectbox { float: right; position: relative; margin-right: 1.5em; width: 40%; padding: 0; } #order-info .order-details .detail-item .label div.select select { width: 100%; height: 100%; border: none; background: none; height: 2em; border: 1px solid #bbbbbb; background-color: #ffffff; border-radius: 0.3em; text-align: right; appearance: none; } #order-info .order-details .detail-item .label div.selectbox select { width: 100%; height: 100%; border: none; background: none; height: 2em; border: 1px solid #bbbbbb; background-color: #ffffff; border-radius: 0.3em; text-align: right; appearance: none; } #order-info .order-details .detail-item .label input { float: right; margin-right: 1.5em; width: 40%; height: 2em; border: 1px solid #bbbbbb; border-radius: 0.3em; padding: 0; text-align: right; } #order-info .order-details .detail-item .label div.selectbox input { float: none; width: 100%; height: 2em; border: 1px solid #bbbbbb; border-radius: 0.3em; padding-right: 1.5em; text-align: right; } #order-info .order-details .detail-item .label div.select select, #order-info .order-details .detail-item .label div.selectbox select, #order-info .order-details .detail-item .label input[type=text], #order-info .order-details .detail-item .label input[type=number] { padding: 0 1.2em 0 0.2em; } #order-info .order-details .detail-item .label div.selectbox select { position: absolute; top: 0; right: 0; width: 1em; border: none; background: none; outline: none; } #order-info .order-details .detail-item .label div.select::before, #order-info .order-details .detail-item .label div.selectbox::before { position: absolute; top: 0.7em; right: 0.3em; content: ''; width: 0.4em; height: 0.4em; border-top: 2px solid #333333; border-left: 2px solid #333333; transform: rotate(-135deg); pointer-events: none; } #order-info .order-details .detail-item .label span.value { float: right; margin-right: 1.5em; width: 40%; height: 2em; border: none; padding: 0; text-align: right; } #order-info .order-details .detail-item .label.item input { float: none; width: 100%; margin: 0; text-align: left; } #order-info .order-details .detail-item .label.item div { width: 100%; margin: 0; text-align: left; } #order-info .order-details .detail-item .label .subtotal { float: right; margin-right: 1.5em; width: 40%; height: 2em; border: none; padding: 0; font-size: 1.5em; text-align: right; font-weight: bold; } #order-info .order-details .detail-item .number-nospin { position: relative; } #order-info .order-details .detail-item .number-nospin input::-webkit-outer-spin-button, #order-info .order-details .detail-item .number-nospin input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #order-info .order-details .detail-item .number-nospin .spinner { position: absolute; top: 0.2em; width: 1em; height: 1em; line-height: 0.8em; padding: 0; font-size: 1.4em; text-align: center; color: #ffffff; background-color:lightseagreen; cursor: pointer; user-select: none; border-radius: 0.5em; } #order-info .order-details .detail-item .number-nospin .spinner-down { left: calc( 60% - 2.2em); } #order-info .order-details .detail-item .number-nospin .spinner-up { left: calc(100% - 1em); } #order-info .order-details .detail-item .detail-close-icon { position: absolute; top: 0; right: 0; width: 2em; height: 2em; line-height: 2em; font-size: 1.5em; text-align: center; cursor: pointer; } #order-info .order-details button[name=append] { display: block; width: calc(100% - 1em); height: 2.5em; margin: 0.5em; border: none; padding: 0; line-height: 2.5em; background: none; border-radius: 7px; } #order-info .order-details button[name=append] { box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -moz-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -ms-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); } #order-info .order-details button[name=append] { color: #444444; background-color: #ffffff; } #order-info button[name=fileupload] { display: block; width: 100%; height: 2.5em; margin: 0; border: none; padding: 0; line-height: 2.5em; background: none; border-radius: 7px; } #order-info button[name=fileupload] { box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -moz-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -ms-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); } #order-info button[name=fileupload] { color: #ffffff; background-color: #007bff; text-align: center; cursor: pointer; } #order-info button[name=fileupload] i { margin-right: 1em; } #order-info button[name=fileupload]:disabled { background-color: #7799aa; cursor: not-allowed; } #order-info button[name=corporate] { display: block; width: 100%; height: 2.5em; margin: 0; border: none; padding: 0; line-height: 2.5em; background: none; border-radius: 7px; } #order-info button[name=corporate] { box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -moz-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -ms-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); } #order-info button[name=corporate] { color: #ffffff; background-color: #007bff; text-align: center; cursor: pointer; } #order-info button[name=corporate]:disabled { background-color: #7799aa; cursor: not-allowed; } #order-info .file-area { position: relative; margin: 0; padding: 0 1em;} #order-info .file-area .order-file { position: relative; display: inline-block; width: 132px; height: 132px; margin: 0 0.5em 0.5em; border: none; border-radius: 0.2em; padding : 0; background-color: #ffffff; } #order-info .file-area .order-file img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; cursor: pointer; } #order-info .file-area .order-file i { position: absolute; width: 1.5em; height: 1.5em; top: -0.75em; right: -0.75em; border-radius: 0.75em; background-color: #ffffff; color: #444444; text-align: center; line-height: 1.5em; font-size: 1em; cursor: pointer; } #order-info .file-area .order-file i { box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -moz-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -ms-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); } #property-order-detail-button-area { position: fixed; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 1em; bottom: 8vh; width: 100%; margin: 0; padding: 0 1em; text-align: center; } #property-order-detail-button-area button { display: block; flex-grow: 1; height: 2.5em; margin: 0 auto; border: none; padding: 0; line-height: 2.5em; background: none; border-radius: 7px; } #property-order-detail-button-area button { box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -moz-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -ms-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); } #property-order-detail-button-area button[name=tmpsave] { color: var(--color_order_status00); background-color: var(--bgcolor_order_status00); } #property-order-detail-button-area button[name=order] { color: var(--color_order_status01); background-color: var(--bgcolor_order_status01); } #property-order-detail-button-area button[name=approve] { color: var(--color_order_status10); background-color: var(--bgcolor_order_status10); } #property-order-detail-button-area button[name=inspwait] { color: var(--color_order_status60); background-color: var(--bgcolor_order_status60); } #property-order-detail-button-area button[name=inspcomp] { color: var(--color_order_status70); background-color: var(--bgcolor_order_status70); } #property-order-detail-button-area button[name=takeback] { color: var(--color_order_status90); background-color: var(--bgcolor_order_status90); } #property-order-detail-button-area button[name=remand] { color: var(--color_order_status90); background-color: var(--bgcolor_order_status90); } #property-order-detail-button-area button[name=remove] { color: var(--color_order_status99); background-color: var(--bgcolor_order_status99); } #order-timeline { margin: 0; border: none; padding: 7em 0 0 0; background-color: #ffffff; height: 93vh; } #order-timeline .not-available { margin: 0; border: none; padding: 2em 1em; color: #cc0033; } #order-timeline .message-list { margin: 0; border: none; padding: 1em 1em calc(7vh + 6em); flex-grow: 1; background-color: #ffffff; } #order-timeline .message-list .date-header { margin: 0 1em; border-bottom: 2px solid #17a2b8; padding: 0.2em 0 0 0; line-height: 2em; font-size: 1em; text-align: center; color: #17a2b8; } #order-timeline .message-list .timeline-status { display: flex; flex-direction: column; gap: 0; margin: 1em 2em; color: #17a2b8; line-height: 1em; } #order-timeline .message-list .timeline-status .time-name { display: flex; flex-direction: row; gap: 0; justify-content: space-between; border-bottom: 1px solid #17a2b8; padding: 0 0 0.2em 0; } #order-timeline .message-list .timeline-status .time-name .time { text-align: left; } #order-timeline .message-list .timeline-status .time-name .name { text-align: right; } #order-timeline .message-list .timeline-status .status { margin: 0.3em 0 1em; border: none; border-radius: 0.5em; padding: 0; line-height: 2em; font-size: 1em; text-align: center; color: #ffffff; background-color: #17a2b8; } #order-timeline .message-list .timeline-message { position: relative; margin: 1em; } #order-timeline .message-list .timeline-message .name { margin: 0 8em 0 0; text-align: right; line-height: 2em; } #order-timeline .message-list .timeline-message .message { position: relative; margin: 0 8em 0 2em; border: none; border-radius: 0.5em; padding: 1em; text-align: left; line-height: 1.5em; color: #444444; background-color: #dddddd; white-space: normal; } #order-timeline .message-list .timeline-message .message:after { content: ""; position: absolute; width: 0; height: 0; } #order-timeline .message-list .timeline-message .message:after { margin: auto 0; top: 0px; right: auto; bottom: 0px; left: -20px; border-top: 10px solid transparent; border-right: 30px solid #dddddd; border-bottom: 20px solid transparent; border-left: none; } #order-timeline .message-list .timeline-message .time { margin: -1.2em 4.5em 0 0; text-align: right; color: #17a2b8; } #order-timeline .message-list .timeline-message .delete-icon { position: absolute; top: 1.2em; left: auto; width: 1.2em; line-height: 1.2em; font-size: 1.2em; text-align: center; cursor: pointer; } #order-timeline .message-list .timeline-message.self .name { margin: 0 0 0 8em; text-align: left; } #order-timeline .message-list .timeline-message.self .message { margin: 0 2em 0 8em; } #order-timeline .message-list .timeline-message.self .message:after { margin: auto 0; top: 0px; right: -20px; bottom: 0px; left: auto; border-top: 10px solid transparent; border-left: 30px solid #dddddd; border-bottom: 20px solid transparent; border-right: none; } #order-timeline .message-list .timeline-message.self .time { margin: -1.2em 0 0 4.5em;; text-align: left; } #order-timeline .message-list .timeline-message.self .delete-icon { position: absolute; right: 0; } #order-timeline-input-area { position: fixed; bottom: 7vh; display: flex; flex-direction: row; gap: 0.5em; width: 100%; height: 6em; margin: 0; border: none; padding: 0.5em; background-color: #ffffff; } #order-timeline-input-area textarea { display: block; flex-grow: 1; border: 1px solid #17a2b8; resize: none; border-radius: 0.3em; } #order-timeline-input-area button { flex-grow: 0; width: 3em; border: none; line-height: 100%; background: none; } #order-timeline-input-area button span { font-size: 2em; color: #34495e; }