#app-checkout .card-app,
#app-confirm .card-app,
#app-order .card-app {
    padding: 0px 0px;
}

.checkout-list {
    height: calc(100% - 105px);
}

#scroll-checkout.scroll-list {
    padding: 0px 10px;
    height: 100%;
}

.card-checkout-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #cdcdcd;
}

.card-checkout-item:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: none;
}

.checkout-flex-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.card-checkout-tmb {
    width: 90px;
}

.tmb-checkout-canvas {
    display: none;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.card-app-box.underMin .tmb-checkout-canvas {
    box-shadow: 0px 0px 1px 1px red;
    border-color: red;
}

.tmb-checkout-canvas img {
    margin: auto;
    width: 100%;
}

.card-checkout-item:first-child .tmb-checkout-canvas {
    display: flex;
}

.card-checkout-info {
    flex: 1;
}

.card-checkout-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.card-checkout-title {
    opacity: 0;
    flex: 1;
}

.card-checkout-item:first-child .card-checkout-title {
    opacity: 1;
}

.card-checkout-close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    color: #cdcdcd;
}

.card-checkout-body {
    margin-bottom: 20px;
}

.card-checkout-size {
}

.card-checkout-amount {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.inp-checkout-size-canvas {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 8px;
    background-color: #f0f0f0;
}

.lbl-checkout-size-canvas {
    flex: 1;
    text-align: center;
}

.val-checkout-size-canvas {
}

.expand-checkout-size-canvas {

}

.size-confirm-select-container {
}

.size-confirm-select-section {
    padding: 10px 0px;
}

.size-confirm-sample {
    margin: auto;
    width: 100%;
}

.size-confirm-sample img {
    margin: auto;
    width: 100%;
}

.size-confirm-selector {

}

.size-confirm-lbl {
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
}

.size-confirm-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.size-confirm-info-item {
}

.size-confirm-measure {
}

.size-confirm-prize {
    font-size: 20px;
    line-height: 20px;
    font-weight: bold;
}




.checkout-amount {
}

.checkout-cost {
    font-size: 18px;
    line-height: 18px;
}

.card-checkout-footer {

}

.card-checkout-action {
    display: none;
}

.card-checkout-item:last-child .card-checkout-action {
    display: block;
}

.panel-checkout-confirm {
}

.checkout-confirm-body {
    margin: 0px;
    padding: 10px 20px;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

.checkout-confirm-flex-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.checkout-confirm-flex-item {
}

.total-confirm {
    font-size: 24px;
    line-height: 24px;
}

#btn-cta-checkout {
    padding: 16px 30px;
}

#btn-cta-size-confirm.disabled {
    background-color: #f0f0f0;
    color: #333333;
}

#btn-cta-size-confirm.enabled.size-warning {
    background-color: #f9be0b !important;
    color: #333333 !important;
}

/* confirm Start */
#app-confirm .card-checkout-header {
    margin-bottom: 15px;
}

#app-confirm .tmb-checkout-canvas {
    display: flex;
}

#app-confirm .card-checkout-title { 
    opacity: 1;
}

#app-confirm .card-checkout-item:last-child .card-checkout-action {
    display: none;
}

.canvas-confirm-flex-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.canvas-confirm-flex-item {

}

.canvas-confirm-flex-item:first-child {
    width: 70px;
}

.canvas-confirm-flex-item:last-child {
    flex: 1;
}

.part-label {
    white-space: nowrap;
}

.part-cont {
    text-align: right;
}

.txt-confirm-subtotal {

}

.txt-confirm-shipping {

}

.txt-confirm-total {
    font-size: 20px;
    line-height: 20px;
}

.address-confirm-flex-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.address-confirm-flex-item {

}

.shipping-fee-confirm-flex-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.shipping-fee-confirm-flex-item {

}

.shipping-address-body {
}

.shipping-user-detail {
    margin-bottom: 10px;
}

.txt-shipping-user-name {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}

.txt-shipping-user-phone {
}

.shipping-user-address {
    margin-bottom: 20px;
}

.photo-chosen-list {
    display: none;
}
/* confirm End */

/* order Start */
#app-order {

}

#app-order .tmb-checkout-canvas {
    display: flex;
}

#app-order #scroll-checkout.scroll-list {
    padding: 0px 10px;
    height: 100%;
}
/* order End */

/* ui Start */
.ui-cust {
    margin: 0px 10px;
}

.ui-cust.ui-widget.ui-widget-content {
    border-radius: 0px;
    border: none;
    background-color: #f0f0f0;
}

.ui-cust.ui-slider-horizontal {
    height: 4px;
}

.ui-cust .ui-widget-header {
    background-color: #4c46ff;
}

.ui-cust.ui-slider-horizontal .ui-slider-handle {
    top: -8px;
    border-radius: 50%;
    border-color: #4c46ff;
    background-color: #4c46ff;
    position: absolute;
    z-index: 20;
}

.ui-cust.ui-slider-horizontal .ui-slider-handle.ui-state-focus {
    outline: none;
    border-color: #4c46ff;
    background-color: #4c46ff;
}

.ui-cust-steps {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 10px;
    width: 100%;
}

.ui-cust-step {
    position: relative;
    z-index: 10;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #f0f0f0;
    background-color: #f0f0f0;
}

.ui-cust-step.underMin,
.ui-cust-step:first-child.underMin,
.ui-cust-step.underMin.active {
    border: 2px solid red;
}

.ui-cust-step:first-child,
.ui-cust-step.active {
    background-color: #ffffff;
    border: 2px solid #4c46ff;
}

.bar-size-container {
    position: relative;
    width: calc(100% - 10px);
    height: 34px;
    margin: auto;
}

.mask-bar-size {
    -webkit-mask-image: url('../images/size/mask-size.png');
    mask-image: url('../images/size/mask-size.png');
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left bottom;
    mask-position: left bottom;

    width: 100%;
}

.bar-size {
    width: calc(100% - 4px);
    height: 34px;
    background-image: linear-gradient(to right, #c5c3ff, #4c46ff);
}

.bar-dividers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    height: 34px;
    position: absolute;
    bottom: 0px;
    z-index: 1;
}

.bar-divider {
    width: 2px;
    height: 34px;
    background-color: #ffffff;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* ui End */