body {
    padding-top: 3.1rem;
    font-size: 0.7rem;
}

a {
    text-decoration: none;
}

a.photo-link:hover {
    cursor: pointer !important;
}

.photo-link {
    color: #333399;
}

.photo-link:hover {
    color: white;
}

tbody {
    font-size: 0.7rem;
}

td {
    padding: 1px !important;
}

td p {
    margin: auto 0px;
}

a:focus {
    text-decoration: none;
    outline: none;
}

a:hover {
    text-decoration: none;
}

h4 {
    font-size: 1.2rem !important;
}

.h-center-block {
    margin: 0 auto !important;
}

.h-center-inline {
    text-align: center !important;
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
}

.hover-pointer:hover {
    cursor: pointer;
    outline-style: inset;
    outline-color: lightgray;

}

.hover-table-line:hover {
    /*filter: contrast(200%);*/
    /*border-style: inset;*/
    /*border-radius: 3px;*/
    /*border-color: deepskyblue;*/
    /*text-decoration: underline;*/
    /*background-color: #307095!important;*/
    background-color: #3366cc !important;
    /* color: white !important; */
    transition-duration: 200ms;
    border-radius: 10%;
    /* color: white !important; */
    text-shadow: #000066 0.5px 0.5px;
    border-bottom: #000000 1px solid !important;
    border-bottom-width: 1px !important;
}

.hover-delete:hover {
    font-size: 0.9rem;
    color: red;
}

.txt-deco-line-through {
    text-decoration: line-through;
}

.w-20 {
    width: 20% !important;
}

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60% !important;
}

.w-80 {
    width: 80% !important;
}

.ht-1 {
    height: 1rem;
}

.v-scroll {
    overflow-y: scroll
}

/* 信息提示：常见问题答案 */
.qa-question {
    padding: 0px 5px;
}

.ticon {
    background-image: url('/css/icons.png');
    width: 50px;
    height: 50px;
    display: inline-block;
}

.ticon-plus-square {
    background-position: 0 0;
}

.adj-btn-img {
    max-height: 8px;
}

.adj-btn-img:hover {
    background-color: lightblue;
}

.adj-btn-img-low {
    max-height: 8px;
    padding: -3px auto 0px auto;
}

.circled {
    border: 1px solid;
    border-radius: 50%;
    padding: 2px;
    width: 1.5em;
    height: 1.5em;
}

.v-middle {
    margin: auto 0px !important;
}

.v-middle-flex {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

li {
    list-style-type: none;
}

.rotate-0 {
    transform: rotate(0deg)
}

.rotate-1 {
    transform: rotate(90deg)
}

.rotate-2 {
    transform: rotate(180deg)
}

.rotate-3 {
    transform: rotate(270deg)
}

.fs15 {
    font-size: 1.5rem;
}

.fs14 {
    font-size: 1.4rem;
}

.fs13 {
    font-size: 1.3rem;
}

.fs12 {
    font-size: 1.2rem;
}

.fs11 {
    font-size: 1.1rem;
}

.fs09 {
    font-size: 0.9rem;
}

.fs08 {
    font-size: 0.8rem;
}

.fs07 {
    font-size: 0.7rem;
}

.fs06 {
    font-size: 0.6rem;
}

.fs05 {
    font-size: 0.5rem;
}

.fs04 {
    font-size: 0.4rem;
}

.fs03 {
    font-size: 0.3rem;
}

.fs02 {
    font-size: 0.2rem;
}

.fsm-120p {
    font-size: 120% !important;
}

.ref_no_deco {
    text-decoration: none;
    color: #ffffff;
    font-size: medium;
}

.ref_no_deco:hover {
    color: white;
}

.navbar {
    /*font-size: 0.8rem;*/
    padding: 4px 8px;
}

.navbar a {
    /*font-size: 0.8rem;*/
}

.nav-item {
    padding-right: 3rem;
}

.btn-logout {
    color: #ffffff;
}

.ucenter_panel {
    padding: 0rem 0.5rem 1rem 0.5rem;
    width: 99vw;
}

.ucenter_action_bar {
    padding: 0.2rem;
}

.thead-list {
    background-color: #000066;
    color: white;
    font-size: 0.7rem;
}

.form-block {
    /*border: inset 2px lightseagreen;*/
    border-left: 1px lightgray solid;
    border-top: 1px lightgray solid;
    border-radius: 3px;
    /*padding-top: 5px;*/
    padding-left: 1rem;
    margin-right: 1rem;
    box-shadow: 3px 3px 3px gray;
    /*font-size: 0.6rem;*/
}



.form-block-title {
    margin-right: 1rem;
}

.form-block h5 {
    text-shadow: 2px 0px 2px gray;
    padding-bottom: 0.5rem;
    border-bottom: dotted 1px black;
}

.form-block h6 {
    text-shadow: 2px 0px 2px gray;
    /*padding-bottom: 0.5rem;*/
    padding: 3px;
    border-bottom: dotted 1px black;
    font-size: 0.8rem;
    background-color: #002752;
    color: white;
}

.form-block-label {
    text-shadow: 2px 0px 2px gray;
    padding: 3px;
    border-bottom: dotted 1px black;
    font-size: 0.8rem;
    background-color: #002752;
    color: white;
}

.form-block .input-group-text {
    font-size: 0.75rem !important;
    padding: .1rem .2rem !important;
}

.form-block .form-control-xs {
    border: gray !important;
}

.cus-btn-xs {
    margin: auto;
    width: 100%;
}

.cus-btn-xs:hover {
    cursor: pointer;
}

.form-item {
    border-top: outset 1px;
    border-bottom: ridge 2px;
    box-shadow: 1px 1px 2px darkgray;
    min-height: 3rem;
}

.component-form-item {
    border-bottom: none 2px;
    box-shadow: 2px 2px 2px gray;
    min-height: 3rem;
}

.component-form-top-list {
    border-bottom: none 2px;
    /*box-shadow: 2px 2px 2px grey;*/
    box-shadow: inset -2px -2px 0px 0px grey;
    min-height: 3rem;
}

.input-group-text {
    font-weight: bold;
}


.svg-inline--fa:hover {
    cursor: pointer;
}

.fa-check-circle {
    color: #008000;
}

.fa-times-circle {
    color: red;
}

.fa-history {
    color: saddlebrown;
}

.fa-edit {
    color: blue;
}

.fa-trash-alt {
    color: red;
}

.fa-edit:hover {
    /*font-size:1.1rem;*/
    color: blue;
    cursor: pointer;
}

.fa-trash-alt:hover {
    /*font-size:1.2rem;*/
    color: red;
    cursor: pointer;
}

.fa-history:hover {
    /*font-size:1.2rem;*/
    cursor: pointer;
}

.fa-question {
    color: #c2d1f0;

}

.fa-question:hover {
    /*font-size:1.2rem;*/
    cursor: pointer;
}

label.error {
    /*color: white;*/
    /*background-color: #ff0000;*/
    font-size: 0.5rem;
    color: red;
    border-radius: 2px;
    margin: auto 5px;
    padding: 0 0.5rem;
}

label.error::before {
    content: "! ";
}

.label-warning {
    background-color: sandybrown;
    color: #ffffff;
    border-radius: 3px;
    padding: 2px;
    margin: auto 0px;
}

.label-success {
    background-color: green;
    color: #ffffff;
    border-radius: 3px;
    padding: 2px;
    margin: auto 0px;
}

.label-info {
    background-color: steelblue;
    color: #ffffff;
    border-radius: 3px;
    padding: 2px;
    margin: auto 0px;
}

.image-preview-bg {
    position: fixed;
    top: 10vh;
    left: 20%;
    /*min-width: 200px;
    max-width: 400px;*/
    min-width: 20vw;
    max-width: 60vw;
    z-index: 11000;
    /*background-color: dimgray;*/
    border-radius: 10px;
    /*padding: 10px;*/
    opacity: 0.999;

}

.image-preview-title {
    background-color: #000066;
}

.image-preview-container {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.image-preview-img {
    width: 100%;
}

.readonly-checkbox {
    display: inline-block;
    width: 2rem;
    font-size: 1rem;
    color: #0000ff;
    border-color: #0000ff;
    border-radius: 5px;
    margin: 1px auto;
}

.form-el-xs {
    font-size: 0.8rem;
    display: inline-block;
    padding: auto 5px;
}

.list-img-xs {
    height: 100%;
    width: 100%;
    max-width: 20px;
    max-height: 20px;
    display: inline-block;
    position: inherit;
}

.list-img-xs:hover {
    height: 100%;
    width: 100%;
    max-width: 300px;
    max-height: 300px;
    position: fixed;
    border: outset 1px;
    border-radius: 5px;
    box-shadow: 3px 3px 3px gray;
}

.list-img-md {
    padding-left: 2rem;
    height: 100%;
    width: 100%;
    max-width: 200px;
    max-height: 200px;
    display: inline-block;
    position: inherit;
}

.list-img-md:hover {
    /*width: 100%;*/
    height: 100%;
    max-height: 480px;
    max-width: 640px;
    /*position: relative;*/
    /*top:  100px;*/
    /*left: 100px;*/
    border: outset 1px;
    border-radius: 5px;
    box-shadow: 3px 3px 3px gray;
    z-index: 4000;

}

.custom-file-label:after {
    content: "选择";
}

.custom-file-input {
    overflow: hidden;
}

.blinder-h {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 3000;
    background-color: #000000;
    opacity: 0.90;
    width: 100vw;
    height: 100vh;
    /* display: none; */
}

.blinder {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 3000;
    background-color: #000000;
    opacity: 0.90;
    width: 100vw;
    height: 100vh;
    display: none;
}

.component-modal-sm {
    z-index: 3100;
    position: fixed;
    top: 15vh;
    left: 20vw;
    background-color: lightgray;
    width: 60vw;
    height: 60vh;
    /* display: none; */
    border-radius: 11px;
}

.component-modal-md {
    z-index: 3100;
    position: fixed;
    top: 10vh;
    left: 10vw;
    background-color: lightgray;
    width: 80vw;
    height: 80vh;
    display: none;
    border-radius: 11px;
}

.component-modal-md select {
    background-color: lightgray;
    border-radius: 10px;
    border-color: darkgray;
    margin: 5px;

}

.component-modal-lg {
    z-index: 3100;
    position: fixed;
    top: 5vh;
    left: 5vw;
    background-color: lightgray;
    width: 90vw;
    height: 90vh;
    display: none;
    border-radius: 11px;

}

.component-modal-lg select {
    background-color: lightgray;
    border-radius: 10px;
    border-color: darkgray;
    margin: 5px;

}

.component-modal-xl {
    z-index: 3100;
    position: fixed;
    top: 1vh;
    left: 1vw;
    background-color: lightgray;
    width: 97vw;
    height: 93vh;
    display: none;
    border-radius: 11px;
}

.component-modal-lv2-xl {
    z-index: 4100;
    position: fixed;
    top: 5vh;
    left: 5vw;
    right: 5vw;
    background-color: lightgray;
    width: 90vw;
    height: 90vh;
    display: none;
    border-radius: 11px;
}

.blinder-lv2 {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 4000;
    background-color: #000000;
    opacity: 0.90;
    width: 100vw;
    height: 100vh;
    display: none;
}

.component-modal-lv3-xl {
    z-index: 5100;
    position: fixed;
    top: 10vh;
    left: 10vw;
    right: 10vw;
    background-color: lightgray;
    width: 80vw;
    height: 80vh;
    /*display: none;*/
    border-radius: 11px;
}

.blinder-lv3 {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 5000;
    background-color: #000000;
    opacity: 0.90;
    width: 100vw;
    height: 100vh;
    display: none;
}

.component-modal-lv3 {
    z-index: 5100;
    background-color: lightgray;
    border-radius: 11px;
    position: fixed;
}

.info-tip-overlay {
    z-index: 1200;
    width: 320px;
    min-height: 300px;
    background-color: #e6eeff;
    color: black;
    position: fixed;
    padding: 15px;
    border-style: outset;
    border-width: medium;
    border-radius: 15px;
    /*display: none;*/
    /*display: block;*/
}

.tf-modal-xl {
    top: 2vh;
    left: 2vw;
    right: 2vw;
    width: 100vw;
    height: 96vh;
}

.tf-modal-lg {
    top: 5vh;
    left: 5vw;
    right: 5vw;
    width: 90vw;
    height: 90vh;
}

.tf-modal-sm {
    top: 15vh;
    left: 20vw;
    right: 20vw;
    width: 60vw;
    height: 70vh;
}

.tf-modal-xs {
    top: 15vh;
    left: 25vw;
    right: 25vw;
    width: 50vw;
    height: 50vh;
}

.component-modal-lv3-xl {
    z-index: 5100;
    position: fixed;
    top: 5vh;
    left: 5vw;
    right: 5vw;
    background-color: lightgray;
    width: 90vw;
    height: 90vh;
    /*display: none;*/
    border-radius: 11px;
}

.component-modal-lv3-sm {
    background-color: lightgray;
    border-radius: 11px;
    position: fixed;
    z-index: 5100;
    top: 15vh;
    left: 20vw;
    right: 20vw;
    width: 60vw;
    height: 70vh;
}

.component-modal-lv3-xs {
    z-index: 5100;
    position: fixed;
    top: 15vh;
    left: 25vw;
    right: 25vw;
    background-color: lightgray;
    width: 50vw;
    height: 70vh;
    min-height: 400px;
    /*display: none;*/
    border-radius: 11px;
}

.blinder-lv3 {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 5000;
    background-color: #000000;
    opacity: 0.90;
    width: 100vw;
    height: 100vh;
    /*display: none;*/
}


.component-modal-xl select {
    background-color: lightgray;
    border-radius: 5px;
    border-color: darkgray;
    margin: 5px;
}


.component-title {
    background-color: #002451;
    color: #ffffff;
    width: 100%;
    /*padding-left: 2rem;*/
    padding: 5px 2rem;
    border-radius: 10px 10px 0px 0px;
    font-size: 1rem;

}


.component-close {
    float: right
}

.component-actions {
    margin: auto 0rem auto 4rem;
}

.component-summary-val {
    text-decoration: underline;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #ffffe6;
    border-radius: 3px;
}

.component-summary-val-with-bg {
    text-decoration: underline;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #fff2cc;
    border-radius: 3px;
}

.style-brief {
    font-size: 0.8rem;
    padding: 0px 5px 0px 0px;
}

.style-brief p {
    margin: 2px auto;
}

.style-brief-xs {
    font-size: 0.6rem;
    padding: 5px 5px 0px 0px;
}

.style-brief-xs p {
    margin: 2px auto;
}


.form-brief {
    font-size: 0.8rem;
    padding: 5px 5px 0px 0px;
}

.form-brief select {
    font-size: 0.7rem;
    padding: 1px
}

.form-block .row {
    min-height: 0.5rem;
}

.medium_list_item {
    font-size: 0.7rem;
}

.small_list_item {
    font-size: 0.5rem;
}

.small_list_item p {
    margin: 2px;
}

.bespoke-option-item-list {
    padding-left: 2rem;
    max-height: 70vh;
    overflow-y: scroll
}

.bespoke-option-item-title {
    background-color: #3771bb;
    color: #ffffff;
    border-radius: 2px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.bespoke-option-item-title-xs {
    /*font-size: 0.5rem;*/
    font-weight: bold;
    color: #3771bb;
    border-radius: 2px;
    padding-left: 5px;
    /*padding-right: 2rem;*/
    text-overflow: ellipsis;
    /*overflow:hidden;*/
}

.bespoke-option-item-title-lg {
    font-size: 1.2rem !important;
    font-weight: bold;
    color: #3771bb;
    border-radius: 2px;
    padding-left: 5px;
    /*padding-right: 2rem;*/
    text-overflow: ellipsis;
    /*overflow:hidden;*/
}

.bespoke-option-item-img {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.bespoke-option-item-list-title {}

.option-item-no-select {
    border: solid 1px darkslategray;
    border-radius: 5px;
    background-color: white;
    overflow: hidden;
}

.option-item-selected {
    border: solid 1px darkslategray;
    border-radius: 5px;
    background-color: royalblue;
    overflow: hidden;
}

.option-item-no-select-xs {
    border: solid 1px darkslategray;
    border-radius: 5px;
    background-color: white;
    overflow: hidden;
}

.option-item-selected-xs {
    border: solid 1px darkslategray;
    border-radius: 5px;
    overflow: hidden;
    background-color: royalblue;
}

.option-item-selected-xs label {
    color: white;
}

/*.group-order-selected {
    border-color: darkblue!important;
    border-style: solid!important;
    border-width: 2px!important;
}*/

.group-order-selected {
    color: white !important;
    /*background-color: darkblue!important;*/
    /*background-color: #3399ff!important;*/
    background-color: #3366cc !important;
    text-shadow: 1px 1px 0 #444
}

/*尺寸组件的样式*/

/*分组*/
.size-cpn-group {}

/*分组名称*/
.size-cpn-group-title {}

.size-cpn-option {}

.size-cpn-option input {
    max-width: 100px;
    font-size: 0.5rem;
}

.size-cpn-option-name {
    font-size: 0.5rem;
}

.size-adjustments-changed {
    font-weight: bold;
    color: #fff !important;
    background-color: steelblue !important;
    ;
    /*background-color: #17a2b8!important;*/
}


.address-modal {
    display: none;
}

.historical-order-modal {
    display: none;
}

.historical-order-list {}

.historical-order-list td {
    /*overflow:hidden;*/
    /*white-space:nowrap;*/
    /*text-overflow:ellipsis;*/
    max-width: 100px;
}

.fabrics-selection-modal {
    display: none;
}

.fabrics-selection-modal-fabrics {
    display: none;
}

.fabrics-selection-modal-buttons {
    display: none;
}

.fabrics-selection-modal-threads {
    display: none;
}



[v-cloak] {
    display: none
}

.size-name-label {
    /*color: black;*/
    /* margin: auto; */
    margin: auto 0px auto 0px;
}

.size-params {
    /*border:none;*/
    padding-left: 5px;
    padding-right: 0px;
    width: 2.5rem;
    /*margin-left: 4px;*/
    max-height: 1.2rem;
}

.size-params:focus {}

.temp-input {
    border: none;
    background-color: steelblue;
    color: #ffffff;
    /* width: 35px; */
    /*padding-left: 5px;*/
    padding-right: 0px;
    width: 2rem;
    margin-left: 4px;
}

.fa-cloud-download-alt:hover {
    font-size: 1rem;
    cursor: pointer;

}

/* toastr*/
.ss-toast-top-full-width {
    top: 20vh;
    left: 40vh;

}