/* 🥹placeholder set up ************************************ */
.dk_text_field input::placeholder, .dk_textarea textarea::placeholder {
    color: var(--gray-500);
    font-size: 15px;
    font-weight: 300;
    opacity: 1; /* firefox blur 방지 */
}
input::-webkit-input-placeholder {
    color: var(--status-lv-01);
}
/* IE */
input:-ms-input-placeholder {
    color: var(--status-lv-01);
}
/* Firefox */
input:-mos-input-placeholder {
    color: var(--status-lv-01);
}

textarea::placeholder {
    color: var(--status-lv-01);
    opacity: 1; /* firefox blur 방지 */
}
textarea::-webkit-input-placeholder {
    color: var(--status-lv-01);
}
textarea:-ms-input-placeholder {
    color: var(--status-lv-01);
}
textarea:-mos-input-placeholder {
    color: var(--status-lv-01);
}

/* dk bulk cmm | components */

@media screen and (max-width:768px){
    .global_container { padding: 0; }
    .dk_title_box { margin-bottom: 0; }
    /*.dk_button.fill { width: calc( 100% - 16px ); }*/
    .dk_stepper { width: 100%; }
    .wrap { background: var(--gray-30)}


}

/* Layout | Quotation, Details */
.wrapper { display: flex; align-items: start; flex-wrap: wrap }
.wrapper > aside {
    /*max-height: calc(100vh - 80px); */ align-self: flex-start; padding-bottom: 80px;
    position: sticky; top: 80px; overflow-x: hidden; overflow-y: visible;
}
@media screen and (max-width:768px){
    .wrapper { flex-direction: row; background: var(--gray-30); }
    .wrapper > aside { margin: 0; width: 100%; background: var(--gray-0); overflow-y: unset; }
}

.bulk_order_item_list_wrapper {
    /* Layout */
    display: inline-flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;

    /* Style */
    background: #F5F5F5;

    /* Shadow/01 */
    box-shadow: 0px 0px 4px 0px rgba(32, 32, 32, 0.05);
}
.quotation_wrapper .bulk_order_item_list_wrapper {
    border: 1px solid var(--gray-300);
}
.bulk_order_item_list_wrapper,
#bulk_order_item_list { width: 100%; display: flex; gap: 12px; flex: 1; flex-direction: column; align-items: center; }
.bulk_order_item {
    display: flex; flex-direction: column; align-items: flex-start; align-self: stretch;
    background: #FFFFFF; border: 1px solid #DEDEDE; box-shadow: 0 0 4px 0 rgba(32, 32, 32, 0.05);
}
@media screen and (max-width:768px){
    .bulk_order_item_list_wrapper { border: none; }
}

/* Layout | order summary */
.bulk_order_form_with_subtotal {
    width: 477px; display: flex; flex-direction: column; align-items: center; align-self: stretch;
    border: 3px solid #28917B;
}
@media screen and (max-width:768px){
    .bulk_order_form_with_subtotal { width: 100%; margin-top: 12px; border: none; }
}

/* details, quotaion cmm style이라 임시로 이동시켜두었어요. @rogan */
.remove_button {
    /* Layout */
    display: flex;
    width: 100px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;

    /* Style */
    border: none;
    background: var(--dk-dgb-800, #274553);
    cursor: pointer;

    /* Typography */
    color: var(--label-color-dark-primary, #FFF);
    text-align: center;
    font-family: Gotham;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.32px;
    text-transform: capitalize;
}
@media screen and (max-width:768px){
    .remove_button { padding: 0 12px; width: unset; height: unset; font-size: 14px; }
    }

/* bulkorder pricing */
.PricingDesc { min-height: 100%; box-sizing: border-box; border-radius: 4px; font-size: 15px; }
.PricingDesc h4 { font-weight: 500; font-size: 16px; color: var(--dk-orange-700); text-transform: uppercase; }
.PricingDesc span { color: var(--gray-600) ;font-size: 14px; letter-spacing: -.4px; }
.PricingDesc i { margin-right: 4px; }
.PricingDetail {
    width: 100%;
    margin: 4px 0;
    border-collapse: collapse; border-radius: 4px;
    /*border-top: 2px solid var(--gray-200);*/
    /*border-bottom: 2px solid var(--gray-200);*/
    border:  1px solid var(--gray-300);
    box-sizing: border-box;
    color: var(--gray-600);
    line-height: 20px;
}
.PricingDetail th {  background: var(--gray-0); letter-spacing: -.4px;  font-weight: 500; }
.PricingDetail th, td {  box-sizing: border-box; padding: 8px;  }
.PricingDetail td { padding: 4px 12px; border-top: 1px solid var(--gray-200);}
.PricingDetail td:nth-child(1) {  border-right: 1px solid var(--gray-200);}
.PricingDetail tr:nth-child(even) {  background: var(--gray-100); }
.PricingDetail tr:hover { background: var(--gray-200); }
@media screen and (max-width:768px){
    .PricingDesc { width: 100%; margin: 16px 0; font-size: 14px; }
    .PricingDesc span { line-height: 20px; }
}