:root {
    --primary-color: #007bff;
    --title-font-size: 26px;
    --value-font-size: 20px;
    --title-item-height: 96px;
    --images-grid-height: 2460px;
    --index-section-width: 400px;
    --index-section-item-top-pad: 4px;
    --index-section-item-value-width: 90px;
    --image-section-width: 200px;
}

.draw-container {
    width: 2400px;
    position: fixed;
    top: 100000px;
    left: 100000px;
}

.measurement-container {
    display: inline-block;
    margin-right: 20px;
}

.measurement-container-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    font-family: 'BigShouldersDisplay-Bold';
}

.measurement-container-wrapper p {
    margin: 0;
    padding: 0;
}

.measurement-container-wrapper .indexes-section {
    background-color: #E1E2CA;
    padding: 20px;
    width: var(--index-section-width);
    flex: 0 0 var(--index-section-width);
}

.title {
    font-size: var(--title-font-size);
    text-transform: uppercase;
    text-align: center;
}

.index-item {
    display: flex;
    flex-direction: column;
    padding: var(--index-section-item-top-pad) 0 var(--index-section-item-top-pad) 0;
    border-bottom: 1px solid #A7C2A3;
    color: #627841;
    align-items: center;
}

.index-item .line2 * {
    font-size: var(--value-font-size);
}

.index-item .line1 * {
    font-size: var(--title-font-size);
}

.index-item .line1,
.index-item .line2 {
    flex: 1;
    width: 100%;
}

.index-item .line1 {
    display: flex;
}

.index-item .line2 {
    text-align: right;
}

.index-item .title {
    flex: 1;
    text-align: left;
}

.title-before,
.title-after {
    display: inline-block;
    text-align: center;
    font-size: var(--title-font-size);
}

.index-item .value1,
.index-item .value2 {
    display: inline-block;
    text-align: center;
    font-size: var(--value-font-size);
    /* width: var(--index-section-item-value-width); */
}

.index-item .diff {
    text-align: right;
    width: 110px;
    font-size: var(--title-font-size);
}

.diff[operator="+"] {
    color: green
}

.diff[operator="-"] {
    color: red;
}

.images-section {
    background-color: #90A461;
    padding: 10px;
    flex: 1;
    /* display: grid; */
    grid-template-rows: var(--title-item-height) auto;
    gap: 10px;
}

.images-grid {
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    margin: 0 auto;
    width: 100%;
    gap: 10px;
    height: var(--images-grid-height);
    width: var(--image-section-width);
    display: none;
}

.images-section .info * {
    color: #F3E0C0;
    padding: 6px 0;
    font-size: 20px;
}

.images-section .info .line1 {
    border-bottom: 2px solid whitesmoke;
    display: flex;
    flex-direction: column;
}

.images-section .images-item {
    border-bottom: 1px solid #A7C2A3;
    gap: 8px;
    color: #627841;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.images-item>* {
    position: relative;
    /* grid-template-columns: 1fr 1fr; */
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-container>img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover
}

#fake-image {
    width: 100%
}

.title-item {
    height: var(--title-item-height);
    text-align: center;
}

.measurement-vertical-wrapper {
    overflow-x: auto;
    display: inline-block;
    max-width: 100%;
    position: relative;
}

.measurement-vertical {
    display: flex;
    overflow-x: scroll;
    background-color: white;
    /* padding: 20px; */
    /* display: inline-block;
    white-space: nowrap; */
}

*[not-display] {
    display: none;
}

.measurement-vertical .measurement-image {
    width: 700px;
}

.measurement-vertical .measurement-image:first-child {
    margin-left: 0px;
}

.customer-measurement {
    position: relative;
}

.customer-list-section {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    overflow-y: auto;
    background-color: #FAE7CE;
    border-left: 1px solid #E11F26;
}

.customer-list-section .detail-data {
    margin: 0;
    border-radius: 0;
    z-index: 999;
    border: none;
}

.customer-list-section .detail-data .name,
.customer-list-section .detail-data .tel,
.customer-list-section .detail-data .award {
    padding: 0;
    width: unset;
}

.customer-list-section .detail-data .name {
    flex: 1
}

.customer-list-section .detail-data .tel {
    width: 100px;
}

.customer-list-section .detail-data .award {
    width: 70px;
}

.customer-list-section .detail-data .data-item {
    padding: 8px;
}

.index-item.feedback .line2 {
    display: flex;
    /* align-items: center; */
}

.index-item.feedback .line2 .value1,
.index-item.feedback .line2 .value2 {
    text-align: left;
    flex: 1
}

.index-item.feedback .line2 .value1 {
    padding: 6px 12px 6px 0;
}

.index-item.feedback .line2 .value2 {
    padding: 6px 0px 6px 12px;
}

.index-item.feedback .line2 .seperator {
    display: none;
}