/* 0. For Preloader */
/* 1. For Slider */
/* 2. For Category Filter */
/* 3. For Frontend */
/* 4. Misc */

/* 0. For Preloader */
@keyframes loading_ball-o {
    0%    { opacity: 1; transform: translate(0 0) }
   49.99% { opacity: 1; transform: translate(40px,0) }
   50%    { opacity: 0; transform: translate(40px,0) }
  100%    { opacity: 0; transform: translate(0,0) }
}

@keyframes loading_ball {
    0% { transform: translate(0,0) }
   50% { transform: translate(40px,0) }
  100% { transform: translate(0,0) }
}

.loading_ball div {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 60px;
  left: 20px;
}

.loading_ball div:nth-child(1) {
  background: #f26f63;
  animation: loading_ball 1s linear infinite;
  animation-delay: -0.5s;
}

.loading_ball div:nth-child(2) {
  background: #ed317f;
  animation: loading_ball 1s linear infinite;
  animation-delay: 0s;
}

.loading_ball div:nth-child(3) {
  background: #f26f63;
  animation: loading_ball-o 1s linear infinite;
  animation-delay: -0.5s;
}

.loadingio-spinner-dual-ball {
  width: 100px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  background: none;
}

.loading_ball {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}

.loading_ball div { 
    box-sizing: content-box; 
}

.display_none {
    display: none;
}

/* Loding Back */
.loading__modal__background{
  position: fixed;
  top:0; left: 0; bottom: 0; right: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 999;
}

/* Loding Window */
.loading__modal__box{
  position: absolute;
  top: calc(50vh - 100px); left: calc(50vw - 200px);
  background-color: transparent;
  display: flex; justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 400px;
  height: 200px;
}

/* 1. For Slider */
.module { 
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left : -20px;
    margin-right : -20px;
    margin-bottom : 20px;
    background : #fff;
    overflow: hidden;
}

.slick-dots li {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 10px;
    cursor: pointer;
    background: #ccc;
    border-radius: 30px;
    transition: 0.5s;
    position: relative;
}

.slick-dots li.slick-active:after {
    content: "";
    width: 7px;
    height: 7px;
    background: #333333;
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    border-radius: 30px;
}

[id^='sl-dots'] > [class*='prev-arrow'],
[id^='sl-dots'] > [class*='next-arrow'] {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: 0;
  border-radius: 30px;
  width: 30px;
  line-height: 30px;
}

[id^='sl-dots'] > [class*='prev-arrow']:hover,
[id^='sl-dots'] > [class*='next-arrow']:hover {
  background: #333;
  color: #fff;
  border: 0;
  border-radius: 30px;
  width: 30px;
  line-height: 30px;
}

[id^='sl-dots'] > [class*='prev-arrow']{
  right: 156px;
}

[id^='sl-dots'] > [class*='next-arrow']{
  right: 40px;
}


#sl-dots1 { 
    /* For Mobile Main Slider */
    display: none;
}

a[class^='play-stop-toggle'] {
    width: 20px;
}


a[class^='play-stop-toggle'] > i {
    padding-left: 10px; 
    color: #fff;
}
    
.slick-counter {
    position: absolute;
    right: 74px;
    bottom: 15px;
    height: 32px;
    width: 78px;
    line-height: 32px;
    box-sizing: border-box;
    padding: 0 15px;
    color: #fff;
    font-family: Roboto;
    letter-spacing: -0.5px;
    font-size: 14px;
    font-weight: normal;
    border-radius: 18px;
    background-color: rgba(0, 0, 0, 0.3);
}

.mslide .slick-arrow {
    top: -60px;
    /* right: 0; */
    position: absolute;
    text-align: center;
    /* border: 1px solid #eaeaea; */
    /* background: #eaeaea; */
    border-radius: 30px;
}

@media only screen and (min-width: 1100px){ 
    .mslide.top-banner0 {
       /* padding-top: 112px; */
    }
}

@media only screen and (max-width: 1100px) and (min-width: 768px){ 
    .mslide.top-banner0 {
        /*padding-top: 53px;*/
    }
}

@media only screen and (max-width: 767px) { 
    [id^='sl-dots'] {
        display: none;
    }

    .slick-counter a[class^='play-stop-toggle']
    {
        display: none;
    }

    .slick-counter
    {
        text-align: center;
        right: 30px;
    }

    .mslide.top-banner1 {
        /* padding-top: 53px; */
    }
}

@media only screen and (max-width: 767px) { 
    #slideshow0 {
        display : none;
    }

    .home-1 .madeshop-slide .slick-slide { 
        /*padding-top: 75px;*/
    }   
}

@media only screen and (min-width: 768px) { 
    #slideshow1 {
        display : none;
    }
}

/* 2. For Category Filter */
#ocfilter {
    border: 0;
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ocfilter-option  {
    padding: 0;
    background: transparent;
    border: 0;
    border-width: 0px 0 !important;
}

.selected-options {
    background: transparent;
    margin-bottom: 5px;
}

.selected-options i {
font-size: 10px;
}

.ocfilter-option .ocf-option-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.selected-options .btn-block {
    margin: 20px 0px;
}

#ocfilter .panel-heading, .ocf-option-values input {
  display: none !important;
}

#scale-price {
    margin: 20px 10px 60px 10px;
    height: 2px;
    border: 0;
    box-shadow: none;
}

.noUi-connect {
    background: black;
}

.noUi-background {
    background: #dbdbdb;
    box-shadow: none;
}

.noUi-horizontal .noUi-handle {
    width: 20px;
    height: 20px;
    box-shadow: none;
    background: black;
    border: 0;
    border-radius: 100%;
    top: -9px;
    left: -10px;
    cursor: e-resize;
}

.noUi-handle:after, .noUi-handle:before {
    height: 8px;
    left: 8px;
    top: 6px;
}

.noUi-handle:after {
    left: 11px;
}

.ocf-option-values input + span:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: #dcdcdc;
}

.ocf-option-values input:checked + span:after {
    position: absolute;
    top: 4px;
    left: 4px;
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #ed317f;
    background-size: contain;
    -webkit-animation: click-wave 0.2s;
    -moz-animation: click-wave 0.2s;
    animation: click-wave 0.2s;
}

.ocf-option-values span {
    position: relative;
    padding: 1px 0px 0px 24px;
    cursor: pointer;
}

.ocfilter-option .ocf-color {
    margin-right: 7px;
}

.ocfilter-option .badge {
    background-color: #eee;
    color: #000000;
}

.ocfilter-mobile .panel {
    padding: 70px 20px 20px 20px;
}

.flex-group {
    align-items: center;
}

.category-page .m-bottom {
    background: #eaeaea;
}

.ocf-offcanvas .ocfilter-mobile-handle .btn {
    border: 0px solid #ed317f;
}

.viewed img {
    filter: brightness(0.92);
}

th.next {
  position: inherit;
    transform: inherit;
}


/* 3. For Frontend */

.container-product {
    width: 100%;
    max-width: 1300px;
    /* min-height: 100%; */
    padding: 0 40px;
    margin: auto;
}

.soldout {
    position: absolute;
    top: 38%;
    left: 50%;
    display: block;
    z-index: 2;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    font-size: 14px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

@media (max-width: 768px) { 
    .container-product {
        padding: 0 15px;
        margin: auto;
    }
}

/* Account Page */

ul.account-url.list-unstyled {
    text-align: center;
}

.row.customer-row {
    margin-bottom: 30px;
}

.customer-account i {
	font-size: 36px;
	color: #000000;
	line-height: 24px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.customer-account .CustomH2-i {
	font-size: 26px;
	color: #999999;
}

.customer-account h2 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEE;
	padding-bottom: 10px;
	color: #999999;
}

.customer-account > li {
	font-size: 14px;
	line-height: 24px;
	padding: 10px;
	text-align: center;
	list-style-type: none;
	min-height: 160px !important;
	border: 3px solid rgb(249, 249, 249);
    background: #fff;
}

.customer-account > li:hover {
	border : 1px solid #ed317f;
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(204,204,204,1);
    box-shadow: 0px 0px 5px 0px rgba(204,204,204,1);
    /* -webkit-transition: border 1s ease-out;
    -moz-transition: border 1s ease-out;
    -o-transition: border 1s ease-out;
    transition: border 1s ease-out; */
}

.customer-account > li:hover a,
.customer-account > li:hover i {
	color: #ed317f;
}

/* Order Page */
.product-status {
    position: relative;
    padding-top: 15px;
    padding-bottom: 3px;
}

.product-status-indicator-column {
    position: absolute;
    top: 10px;
    width: 100%;
    padding-right: 60px;
}

.product-status-indicator {
    position: absolute;
    top: 17px;
	padding-right: 10px;
    font-family: FontAwesome;
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.product-status-indicator-label {
    position: relative;
}

.product-status-bar {
    padding: 1px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.10);  
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.product-status-bar > div.product-progress-bar {
    background-color: #ed317f;
    height: 20px;
    border-radius: 10px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    transition: 0.4s linear;  
    transition-property: width, background-color;
}

/* Pending Start */
/* .package-product-status > #status-1-column {
    left : 2%;
} */

.product-status-indicator#status-1 {
    left : 2%;
}

.product-status-indicator#status-1:before {
	content: "\f017";
}

.product-status-bar > #status-1 { 
  animation: pending 3s normal forwards;
}

@keyframes pending {
    0% { width: 0; }
    100% { width: 50px;}
  }

@media (max-width: 768px) { 
    @keyframes pending {
        0% { width: 0; }
        100% { width: 30px;}
    }
}

/* Pending End */

/* Processing Start */
/* .package-product-status > #status-2-column {
    left : 19%;
} */

.product-status-indicator#status-2 {
    left : 14%;
}

.product-status-indicator#status-2:before {
	content: "\f1b2";
}

.product-status-bar > #status-2 { 
  animation: processing 3s normal forwards;
}

@keyframes processing {
  0% { width: 0; }
  100% { width: 17%; }
}

@media (max-width: 768px) { 
    @keyframes processing {
        0% { width: 0; }
        100% { width: 20%; }
    }
}
/* Processing End */

/* Shipped Start */
/* .package-product-status > #status-3-column {
    left : 39%;
} */

.product-status-indicator#status-3 {
    left : 28%;
}

.product-status-indicator#status-3:before {
	content: "\f0d1";
}

.product-status-bar > #status-3 { 
  animation: shipped 3s normal forwards;
}

@keyframes shipped {
  0% { width: 0; }
  100% { width: 31%; }
}

@media (max-width: 768px) { 
    @keyframes shipped {
        0% { width: 0; }
        100% { width: 34%; }
    }
}

/* Shipped End */

/* Air Freight Start */
/* .package-product-status > #status-18-column {
    left : 59%;
} */

.product-status-indicator#status-18 {
    left : 42%;
}

.product-status-indicator#status-18:before {
	content: "\f072";
}

.product-status-bar > #status-18 { 
  animation: freight 3s normal forwards;
}

@keyframes freight {
  0% { width: 0; }
  100% { width: 45%; }
}

@media (max-width: 768px) { 
    @keyframes freight {
        0% { width: 0; }
        100% { width: 48%; }
    }
}

/* Air Freight End */

/* Customs Start */
/* .package-product-status > #status-19-column {
    left : 59%;
} */

.product-status-indicator#status-19 {
    left : 56%;
}

.product-status-indicator#status-19:before {
	content: "\f002";
}

.product-status-bar > #status-19 { 
  animation: customs 3s normal forwards;
}

@keyframes customs {
  0% { width: 0; }
  100% { width: 59%; }
}

@media (max-width: 768px) { 
    @keyframes customs {
        0% { width: 0; }
        100% { width: 62%; }
    }
}

/* Customs End */


/* Delivering Start */
/* .package-product-status > #status-17-column {
    left : 59%;
} */

.product-status-indicator#status-17 {
    left : 70%;
}

.product-status-indicator#status-17:before {
	content: "\f0d1";
}

.product-status-bar > #status-17 { 
  animation: delivering 3s normal forwards;
}

@keyframes delivering {
  0% { width: 0; }
  100% { width: 73%; }
}

@media (max-width: 768px) { 
    @keyframes delivering {
        0% { width: 0; }
        100% { width: 77%; }
    }
}
/* Delivering End */

/* Store Start */
/* .package-product-status > #status-20-column {
    left : 59%;
} */

.product-status-indicator#status-20 {
    left : 84%;
}

.product-status-indicator#status-20:before {
	content: "\f007";
}

.product-status-bar > #status-20 { 
  animation: store 3s normal forwards;
}

@keyframes store{
  0% { width: 0; }
  100% { width: 87%; }
}

@media (max-width: 768px) { 
    @keyframes store {
        0% { width: 0; }
        100% { width: 90%; }
    }
}
/* Store End */

/* Complete Start */
/* .package-product-status > #status-6-column {
    right : 3%;
} */

.product-status-indicator#status-5 {
    right : 1%;
}

.product-status-indicator#status-5:before {
	content: "\f015";
}

.product-status-bar > #status-5 { 
  animation: complete 3s normal forwards;
}

@keyframes complete {
  0% { width: 0; }
  100% { width: 100%; }
}
/* Complete End */

button.btn-reorder,
button.btn-trace {
    color: #ed317f;
    background: #fff;
    border: 1px solid #ed317f;
    border-radius: 5px;
    font-size: 14px;
    /* margin-left: 10px; */ 
}

button.btn-reorder:hover,
button.btn-trace:hover {
    color: #000;
    background: #fff;
    border: 1px solid #000;
    font-size: 14px;
    /* margin-left: 10px; */
}

button.btn-reorder {
    margin-right:10px;
    width: 26px;
    height: 27px;
}

.search-filter-wrap {
    padding: 20px 30px;
    margin-bottom : 20px;
    background: #fff;
}

.search-filter-value {
    height: 60px;
    padding: 20px 0;
    box-sizing: border-box;
}

.search-filter-value .value {
    float: left;
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
    color: #000;
}

.search-filter-value .date {
    color: #E72A50;
    font-family: 'Roboto', sans-serif;
}

.package-order-value {
    position: relative;
    padding: 20px 30px;
    font-size: 13px;
    line-height: 20px;
    border-bottom: 5px solid rgb(249, 249, 249);
    background: #fff;
}

.package-order-value .key,
.package-shipping-address .key {
    font-weight: 900;
    color: #000;
}

.package-order-value .val {
    margin-left: 10px;
    color: #000;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0;
}

.package-order-value .val+.key {
    margin-left: 10px;
    padding-left: 10px;
    position: relative;
}

.package-order-value .val+.key:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 14px;
    width: 1px;
    margin-top: -7px;
    background: #ddd;
}

.package-order-value .link-detail {
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -15px;
}

.link-detail {
    position: relative;
    display: inline-block;
    /* padding-right: 11px; */
    font-size: 13px;
    color: #000;
    line-height: 26px;
    color: #ed317f;
}

.package-shipping-address {
    overflow: hidden;
    position: relative;
    padding: 20px 30px;
    font-size: 13px;
    line-height: 20px;
    border-bottom: 5px solid rgb(249, 249, 249);
    color: #333;
    background: #fff;
}

p.shipping_address {
    display: block;
    margin: 0px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.package-shipping-address .key+.val {
    margin-left: 10px;
    padding-left: 10px;
    position: relative;
}

.package-shipping-address .key+.val:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 14px;
    width: 1px;
    margin-top: -7px;
    background: #ddd;
}

.package-shipping-address .edit-detail {
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -15px;
}
.edit-detail {
    position: relative;
    display: inline-block;
    /* padding-right: 11px; */
    font-size: 13px;
    color: #000;
    line-height: 26px;
    color: #ed317f;
}

.package-product-status {
    overflow: hidden;
    position: relative;
    padding: 30px 30px 10px 30px;
    font-size: 15px;
    line-height: 20px;
    border-bottom: 5px solid rgb(249, 249, 249);
    color: #ed317f;
    background: #fff;
}

.account-order-info .package-product-status {
    margin-top: 20px;
    margin-bottom: 20px;
}


.package-product {
    display: table;
    width: 100%;
    table-layout: fixed;
    background: #fff;
    border-bottom: 5px solid rgb(249, 249, 249);
}

.package-product>* {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.package-product-item {
    width: auto;
    text-align: left;
    padding: 20px 0 20px 10px;
    height: 100px;
    display: table-cell;
}

.package-product-item>a .package-product-title {
    display: block;
    font-size: 13px;
    color: #000;
    line-height: 24px;
}

.package-product-item>a .package-product-title:hover {
    color: #ed317f;
}

.package-product-item>a .package-product-option {
    display: block;
    font-size: 12px;
    color: #000;
    line-height: 24px;
}

.package-product-thumb {
    width: 100px;
    height: 100px;
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
}

img.package-product-thumb-img{
    width: 100px;
    height: 100px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.package-product-item .val {
    margin-left: 10px;
    color: #000;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0;
}

.package-product-item .package-product-price+.package-product-quantity {
    margin-left: 10px;
    padding-left: 10px;
    position: relative;
}

.package-product-item .package-product-price+.package-product-quantity:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 14px;
    width: 1px;
    margin-top: -7px;
    background: #ddd;
}

.package-product-total {
    width: 150px;
    color: #000;
    font-size: 15px;
    text-align: right;
    padding: 0 30px 0 10px;
    box-sizing: border-box;
}

.package-list-items>li+li {
    margin-top: 20px;
}

[class*='package-list-item']:after {
    content: '';
    display: block;
    clear: both;
}

@media (max-width: 768px) { 
    span.column_link_detail, 
    span.column_edit_detail {
        display: none;
    }   

    .package-product-total {
        width: auto;
    }
}

/* Order Info Page */
.package-list-item .package-list-title {
    color: #ed317f;
    padding: 20px 30px;
    margin-bottom: 10px;
    background: #fff;
    border-bottom: 5px solid rgb(249, 249, 249);
}

.package-list-item .package-list-title span.title{
font-size: 15px;
font-weight: 600;
}

.package-list-item.second-package-list-item {
    padding-top: 5px;
}

.package-address-title {
    margin-bottom: 10px;
}

.package-address-title span.title{
    font-size: 15px;
    font-weight: 900;
}

div.package-order-value.col-sm-6 { 
    width: calc(50% - 5px);
    margin-right: 5px;
}

.account-return .package-list-item:first-child {
    border-top: 5px solid rgb(249, 249, 249);
}

.account-order .package-order-value:first-child {
    border-top: 5px solid rgb(249, 249, 249);
}

div.package-order-value.col-lg-6+div.package-order-value.col-lg-6 { 
    width: calc(50% - 5px);
    margin-left: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.package-product-item-front {
    position: relative;
    text-align: left;
    margin: 10px 0;
    padding: 20px 0 20px 10px;
}

.package-product-item-back {
    text-align: right;
    padding-right: 30px;
}

.package-product-item-front .package-product-action {
    position: absolute;
    right: 20px;
}

.package-product-title {
    width: 50%;
    vertical-align: middle;
    text-align: left;
}

span.package-product-title {  
    width: 100%;
    font-size: 13px;
    line-height: 24px;
    vertical-align: middle;
    text-align: left;
}

span.package-product-title:hover {
    color: #ed317f;
    width: 100%;
    vertical-align: middle;
    text-align: left;
}

.order-info .package-product-title,
.order-info .package-product-action,
.order-info .package-product-quantity,
.order-info .package-product-price,
.order-info .package-product-total {
    display: inline-block;
    width: auto;
}

@media (max-width: 768px) { 

    .package-product-title {
        width: 100%;
        vertical-align: middle;
        text-align: left;
    }

}
  
  .order-info .package-product-option .key {
      color: #000;
  }
  
  .order-info .package-product-option .key+.val {
      margin-left: 10px;
      color: #000;
      letter-spacing: 0;
  }
  
  a.btn-reorder {
      color: #ed317f;
      background: #fff;
      border: 1px solid #ed317f;
      border-radius: 5px;
      font-size: 13px;
      padding: 5px;
  }
  
  a.btn-reorder:hover {
      color: #000;
      background: #fff;
      border: 1px solid #000;
      font-size: 13px;
  }
  
  .package-product-quantity .key, 
  .package-product-price .key {
      font-weight: 500;
      color: #000;
  }
  
  .package-product-quantity .key+.val,
  .package-product-price .key+.val {
      margin-left: 10px;
      margin-right: 15px;
      padding-left: 10px;
      position: relative;
      
  }
  
  .package-product-quantity .key+.val:before,
  .package-product-price .key+.val:before {
      content: '';
      position: absolute;
      text-align: right;
      top: 50%;
      left: 0;
      height: 14px;
      width: 1px;
      margin-top: -7px;
      background: #ddd;
  }
  
  .order-info .package-product-total {
      text-align: right;
      padding: 0 0 0 20px;
      box-sizing: border-box;
  } 
  
  
  @media only screen and (max-width: 1200px) { 
      .order-info div.package-order-value.col-lg-6+div.package-order-value.col-lg-6 { 
          width: 100%;
          margin-left: 0px;
          margin-right: 0px;
          margin-bottom: 5px;
      }
  }
  
  @media only screen and (max-width: 1100px) { 
        .package-product-action {
            padding-top: 5px;
        }
    
        .order-info .package-product-quantity .key, 
        .order-info .package-product-price .key {
            display: none;
        }
    
        .package-product-quantity .key+.val,
        .package-product-price .key+.val {
            margin-left: 10px;
            margin-right: 0px;
            padding-left: 10px;
            position: relative;
            text-align: right;
        }
  }
  
  @media only screen and (max-width: 768px) { 
        .package-product-item-front .package-product-action {
            position: inherit;
            right: 0px;
            transition: all 0.2s linear;
        }
    
        .order-info .package-product-quantity .key, 
        .order-info .package-product-price .key,
        .package-product-quantity .key, 
        .package-product-price .key {
            display: none;
        }

        .package-product-item .package-product-price+.package-product-quantity:before {
            display: none;
        }
    
        .package-product-quantity .key+.val,
        .package-product-price .key+.val {
            margin-left: 0px;
        }
  }
  
  .package-list-totals {
      text-align: right;
      padding: 20px 30px;
      margin-top: 10px;
      margin-bottom: 20px;
      background: #fff;
  }
  
  .package-list-totals .key {
      display: inline-block;
      width: 200px;
      font-size: 13px;
      font-weight: 900;
      color: #000;
  }
  
  .package-list-totals .key+.val {
      position: relative;
      display: inline-block;
      width: 100px;
      margin-left: 10px;
      padding-left: 10px;
      font-size: 13px;
  }
  
  .package-list-totals .key+.val:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      height: 14px;
      width: 1px;
      margin-top: -7px;
      background: #ddd;
  }


/* Address Page */
.address-list {
    margin-top: 20px;
    margin-bottom: 20px;
}

.address-list-items>li+li {
    margin-top: 20px;
}

[class*='address-list-item']:after {
    content: '';
    display: block;
    clear: both;
}

.address-list .address-list-item:first-child {
    border-top: 5px solid rgb(249, 249, 249);
}

.address {
    display: table;
    width: 100%;
    table-layout: fixed;
    background: #fff;
    border-bottom: 5px solid rgb(249, 249, 249);
}

.address>* {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.address-item {
    width: auto;
    text-align: left !important;
    padding: 20px 0 20px 30px;
    height: 100px;
    display: table-cell;
}

.address-title .key {
    color: #ed317f;
    font-weight: 900;
}

.address-title {
    display: block;
    font-size: 13px;
    line-height: 24px;
}

.address-content {
    display: block;
    font-size: 13px;
    color: #000;
    line-height: 24px;
}

.address-total {
    width: 165px;
    color: #000;
    font-size: 18px;
    text-align: right;
    padding: 0 20px 0 0 ;
    box-sizing: border-box;
}

.address.top-total {
    margin-bottom: 20px;
}

a.btn-edit {
    color: #000;
    background: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 10px;
    padding : 10px;
}

a.btn-edit:hover {
    color: #ed317f;
    background: #fff;
    border: 1px solid #ed317f;
    font-size: 12px;
    margin-left: 10px;
}

a.btn-delete {
    color: #fff;
    background: #ed317f;
    border: 1px solid #ed317f;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 10px;
    padding : 10px;
}

a.btn-delete:hover {
    color: #fff;
    background: red;
    border: 1px solid red;
    font-size: 12px;
    margin-left: 10px;
}

a.btn-delete:focus {
    color: #fff;
    background: red;
    border: 1px solid red;
    font-size: 12px;
    margin-left: 10px;
}

a.btn-disabled {
    color: #ddd;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 10px;
    padding : 10px;
}

a.btn-disabled:hover {
    color: #fff;
    background: #ddd;
    border: 1px solid #ddd;
    font-size: 12px;
    margin-left: 10px;
}

/* d_quickcheckout */
#d_quickcheckout .panel-default {
    margin-bottom: 30px;
}

#d_quickcheckout .panel-default > .panel-heading {
    color: #333;
    background-color: #fff;
    padding: 10px 30px;
    border-bottom: 5px solid;
    border-color: #f9f9f9;
}

#d_quickcheckout .panel-default > .panel-body {
    padding: 10px 30px;
}

#d_quickcheckout .panel-title {
    color: #ed317f;
    padding: 10px 0;
    border-bottom: 0px solid #fff;
}

.qc-cart.table > tbody > tr > td,
.qc-cart.table > tbody > tr > th,
.qc-cart.table > tfoot > tr > td,
.qc-cart.table > tfoot > tr > th,
.qc-cart.table > thead > tr > td,
.qc-cart.table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857143;
    /* vertical-align: top; */
    border-top: 0px solid #ddd !important;
}

.qc-cart.table > tbody > tr:first-child {
    border-top: 1px solid #ddd;
}

.qc-cart.table > tbody > tr {
    border-bottom: 1px solid #ddd;
}

#d_quickcheckout .btn {
    width: 100%;
    padding: 17px 0px;
    background: #ed317f !important;
    color: #fff !important;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid #ed317f;
    line-height: 1.42857143;
    border-radius: 4px;
    /* box-shadow: inset 0 0px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);*/
}

#d_quickcheckout .btn:hover {
    width: 100%;
    padding: 17px 0px;
    background: #fff !important;
    color: #ed317f !important;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid #ed317f;
    line-height: 1.42857143;
    border-radius: 4px;
    /* box-shadow: inset 0 0px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);*/
}

#d_quickcheckout .qc-quantity .btn {
    width: 100%;
    padding: 17px 0px;
    background: #ed317f !important;
    color: #fff !important;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid #ed317f;
    line-height: 1.42857143;
    border-radius: 4px;
    /* box-shadow: inset 0 0px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);*/
}

#d_quickcheckout .qc-quantity .btn:hover {
    width: 100%;
    padding: 17px 0px;
    background: #fff !important;
    color: #ed317f !important;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid #ed317f;
    line-height: 1.42857143;
    border-radius: 4px;
    /* box-shadow: inset 0 0px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);*/
}

#d_quickcheckout .qc-coupon .btn, 
#d_quickcheckout .qc-voucher .btn { 
    padding: 0px 0px;
    text-shadow: 0 0px 0 rgb(0 0 0 / 25%);
    width: 38px;
    height: 35px;
    margin-left: 10px;
    /* margin-top: -2px;  */
}

#d_quickcheckout .qc-coupon .btn:hover,
#d_quickcheckout .qc-voucher .btn:hover { 
    padding: 0px 0px;
    text-shadow: 0 0px 0 rgb(0 0 0 / 25%);
    width: 38px;
    height: 35px;
    margin-left: 10px;
    /* margin-top: -2px;  */
}

#d_quickcheckout .btn-primary { 
    color: #ffffff;
    text-shadow: 0 0px 0 rgb(0 0 0 / 25%);
}

#d_quickcheckout .input-group-btn > .btn + .btn {
    margin-left: 2px !important;
}

#d_quickcheckout .input-group-btn:last-child > .btn, 
#d_quickcheckout .input-group-btn:last-child > .btn-group {
    /* top: -1px; */
}

/* #d_quickcheckout #cart_view .qc-cart .qc-quantity button, */
#d_quickcheckout #cart_view .qc-cart .qc-quantity input, 
#d_quickcheckout #cart_view .qc-cart .qc-quantity .input-group {
    height: 38px;
    width: 38px;
    border-radius: 20px;
    padding: 0;
}

#d_quickcheckout #cart_view .qc-cart .qc-quantity button.increase,
#d_quickcheckout #cart_view .qc-cart .qc-quantity button.decrease {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 0;
    padding: 0;
    background: none !important;
    color: #333 !important;
    font-weight: 500;
    font-size: 14px;
    border: 0px solid #ed317f;
    line-height: 1.42857143;
}

#d_quickcheckout #cart_view .qc-cart .qc-quantity button.increase {
    top: -20px
}

#d_quickcheckout #cart_view .qc-cart .qc-quantity button.decrease {
    top: 38px;
    left: -38px;
}

#d_quickcheckout #cart_view .qc-cart .qc-quantity button.delete {
    height: 38px;
    width: 38px;
    border-radius: 20px;
    padding: 0;
}

#d_quickcheckout button.btn.btn-primary.delete,
#d_quickcheckout button.btn.btn-primary.increase,
#d_quickcheckout button.btn.btn-primary.decrease {
    margin: 0 10px;
}

#d_quickcheckout button.btn.btn-primary.delete,
#d_quickcheckout button.btn.btn-primary.increase,
#d_quickcheckout button.btn.btn-primary.decrease {
    margin: 0 10px;
}

#d_quickcheckout .fa {
    font-size: 20px;  
}

#d_quickcheckout .qc-quantity .fa,
#d_quickcheckout .qc-coupon .fa,
#d_quickcheckout .qc-voucher .fa {
    font-size: 15px;  
}


#d_quickcheckout td.qc-image {
    /* margin: auto; */
    width: 100px;
}

#d_quickcheckout td.qc-name {
    width: calc(30% - 7px);
    text-align: left !important;
    vertical-align: middle !important;
}

#d_quickcheckout td.qc-quantity {
    max-width: 10%;
    /* max-width: 50px; */
    vertical-align: middle;
}

#d_quickcheckout td.qc-price {
    vertical-align: middle;
    text-align: right !important;
    
}

#d_quickcheckout td.qc-total {
    font-size: 15px;
    width: 20%;
    vertical-align: middle;
    text-align: right !important;
}

#d_quickcheckout .price {
    font-size: 14px;
}

#d_quickcheckout label {
    line-height: 28px;
}

#d_quickcheckout .input-group > input {
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px;
}

#payment_address label, #shipping_address label {
    vertical-align: top;
}

@media (max-width: 767px)  {

    body.checkout-checkout #modal-panel .container {
        overflow-y: auto;
    }

    #d_quickcheckout #cart_view .qc-quantity .input-group-btn {
        display: block !important;
    }

    #d_quickcheckout #cart_view .qc-cart .qc-quantity button, 
    #d_quickcheckout #cart_view .qc-cart .qc-quantity input, 
    #d_quickcheckout #cart_view .qc-cart .qc-quantity .input-group {
        height: 38px;
        width: 38px;
        padding: 0px;
        border-radius: 20px;
    }

    #d_quickcheckout #cart_view .qc-cart .qc-quantity button.decrease {
        top: 38px;
        left: 0px;
    }

    #d_quickcheckout p {
        margin: 0 0 10px;
        overflow: hidden;
        width: 335px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #d_quickcheckout .panel-default > .panel-heading,
    #d_quickcheckout .panel-default > .panel-body {
        padding: 10px 10px; 
    }

    #d_quickcheckout td.qc-quantity {
        width: 10%;
        min-width: 50px;
        vertical-align: middle;
    }
  
}


/* 4. Misc */
input[type='checkbox'],
input[type='radio'] {
    -webkit-appearance:none;
    width:17px;
    height:17px;
    /* [라디오 버튼 테두리 색상 정의] */
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    /* [라디오 버튼 배경 색상 정의] */
    background:#ffffff;
}

input[type='checkbox']:before,
input[type='radio']:before {
    /* [content null 설정해서 커스텀 지정] */
    content:'';
    display:block;
    width:70%;
    height:70%;
    margin: 15% auto;
    border-radius:50%;  
    background:#ffffff;
}

input[type='checkbox']:checked:before,
input[type='radio']:checked:before {
    /* [라디오 버튼이 클릭 되었을 경우 내부 원형 색상] */
    background:#ed317f;
}

.product select[name^='option'] {
    width: calc(100% - 138px);
}

/* Banner for Mobile */
@media (max-width: 767px) {
    .banner__modal__background {
        position: fixed;
        height: 270px;
        left: 0;
        right: 0;
        bottom: -100%;
        padding: 20px 20px;
        opacity: 1;
        background: #fff;
        color: black;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 16px 16px 0 0;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)) drop-shadow(0 1px 3px rgba(0,0,0,.3));
        transition: 0.4s;
        -webkit-transition: 0.4s;
        z-index: 959;
    }

    .banner__modal__background.on__modal{
        bottom: 0;
    }
}