.required {
  border: 2px red solid !important;
}

.codform_form{
margin-top: 17px;
}
.diilii_modal_btnn{
width:-webkit-fill-available;
align-items: center;
gap: 10px;
justify-content: center;
display:flex;
margin-block: 24px;
}
.cf-dinp{
text-align: -webkit-auto;
position:relative
}
input:focus-visible {
  outline: 1px solid rgb(0, 0, 0);
  outline-offset: 2px;
  box-shadow: none;
}
.flo_lable{
position: absolute!important;
top: -12px!important;
margin-inline: 10px!important;
background-color: white !important;
}
.shaking_btn {
position: relative;
animation-name: shake;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
cursor: pointer;
}
.shaking_btn_infini {
position: relative;
animation-name: shake;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
cursor: pointer;
}
.shaking_btn_2s {
position: relative;
animation-name: shake;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
cursor: pointer;
}
.shaking_btn_2s:hover {
animation-name: shakeAnim;
}
.shaking_btn_3s {
position: relative;
animation-name: shake;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
cursor: pointer;
}
.shaking_btn_3s:hover {
animation-name: shakeAnim;
}
.shaking_btn_4s {
position: relative;
animation-name: shake;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
cursor: pointer;
}
.shaking_btn_4s:hover {
animation-name: shakeAnim;
}
.zoom {
position: relative;
animation-name: zoom;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
cursor: pointer;
}
.tada_2 {
position: relative;
animation-name: tada_2_3;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
cursor: pointer;
}
.tada_3 {
position: relative;
animation-name: tada_2_3;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
cursor: pointer;
}

.tada_6 {
position: relative;
animation-name: tada_6_8;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
cursor: pointer;
}
.tada_8 {
position: relative;
animation-name: tada_6_8;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
cursor: pointer;
}
.tada_10 {
position: relative;
animation-name: tada;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
cursor: pointer;
}
.zoom:hover {
animation-name: zoomHover;
}
@keyframes shake {
0% {
  left: 0;
}

1% {
  left: -3px;
}

2% {
  left: 5px;
}

3% {
  left: -8px;
}

4% {
  left: 8px;
}

5% {
  left: -5px;
}

6% {
  left: 3px;
}

7% {
  left: 0;
}
}
@keyframes zoom {
0% {
  scale: 1;
}

50% {
  scale: 1.05;
}

100% {
  scale: 1;
}
}
@keyframes zoomHover {
0% {
  scale: 1;
}

100% {
  scale: 1;
}
}
@keyframes shakeAnim {
0% {
  left: 0;
}

1% {
  left: -3px;
}

2% {
  left: 5px;
}

3% {
  left: -8px;
}

4% {
  left: 8px;
}

5% {
  left: -5px;
}

6% {
  left: 3px;
}

7% {
  left: 0;
}
}
@keyframes tada {
0% {
  transform: scaleX(1);
}

1%,
2% {
  transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
}

3%,
5%,
7%,
9% {
  transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
}

4%,
6%,
8% {
  transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
}

10% {
  transform: scale3d(1, 1, 1) rotate(0deg) scaleX(1);
}

to {
  transform: scaleX(1);
}
}
@keyframes tada_2_3 {
0% {
  transform: scaleX(1);
}

5%,
10% {
  transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
}

15%,
25%,
35%,
45% {
  transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
}

20%,
30%,
40% {
  transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
}

50% {
  transform: scale3d(1, 1, 1) rotate(0deg) scaleX(1);
}

to {
  transform: scaleX(1);
}
}
@keyframes tada_6_8 {
0% {
  transform: scaleX(1);
}

3%,
6% {
  transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
}

9%,
15%,
21%,
27% {
  transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
}

12%,
18%,
24% {
  transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
}

30% {
  transform: scale3d(1, 1, 1) rotate(0deg) scaleX(1);
}

to {
  transform: scaleX(1);
}
}
.animate-spin	{
  animation: spin 1s linear infinite;
}
@keyframes spin {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
}
.cf_upsell_body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
padding-top: 0px;
}
.cf_upsell-image {
width: 80%;
align-self: center;
}
@media only screen and (min-width: 600px) {
.cf_upsell_body {
  flex-direction: row;
}
.cf_upsell-image {
  width: 40%;
}
.cf_upsell {
  max-width: 550px;
  min-width: 500px;
}
}

@media only screen and (min-width: 900px) {
.cf_upsell_body {
  flex-direction: row;
}
.cf_upsell {
  max-width: 750px;
  min-width: 600px;
}
}

@media only screen and (min-width: 1200px) {
.cf_upsell_body {
  flex-direction: row;
}
.cf_upsell {
  max-width: 900px;
  min-width: 800px;
}
}
#cf_upsell_variant_select{    
padding: 5px;
border-radius: 5px;
outline: none;
margin: 10px;
}
.codform_upsell_modal{
position: fixed;
display:none;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
justify-content: center;
align-items: center;
background-color: #0000004f;
z-index: 400000  !important;   
}
.codform_upsell_modal_div{
border-radius:10px;
margin: 10px ;
flex-direction: column ;
direction: ltr ;
display:flex;
}
.codform89231asd52a6{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
}
.modal-close-btn{
position: absolute;
cursor: pointer;
top: 0;
transform: translateY(-76%);
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
border: none;
background-color:white;
-webkit-box-shadow: 0px 0px 9px -3px rgb(63 63 63);
-moz-box-shadow: 0px 0px 9px -3px rgb(63 63 63);
box-shadow: 0px 0px 9px -3px rgb(63 63 63);
}
.cf-ctb{
border-bottom: 1px solid #c7c7c7;
border-top: 1px solid #c7c7c7;
}
.cf-qn{
height: 30px;
width: 30px;
padding: 0px !important;
display: flex;
justify-content: center;
align-items: center;
}
.cf-qitems{
padding: 3px;
display: flex;
margin-inline: 5px;
}
.iti__flag {
display: block !important
}
.iti__arrow {
display: block !important
}
.iti{
width: 100%;
}
.codform_cart_items{
width: 100%;
display: flex;
align-items: center;
padding: 10px 0;
-webkit-box-align: center;
box-sizing: border-box;
justify-content: space-around;
}
.codform_cart_items_d1{
position: relative;
width: 62px !important;
height: 62px !important;
flex-shrink: 0;
-webkit-box-flex: 0;
flex-grow: 0;
box-sizing: border-box;
}
.codform_cart_items_i1{
box-sizing: border-box;
width: 60px !important;
height: 60px !important;
display: block;
object-fit: cover;
border-radius: 6px;
}
.codform_cart_items_d2{
-ms-flex-negative: 1;
display: flex;
flex-direction: column;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
align-items: flex-start;
width: 216px;
}
.codform_cart_items_a1{
color:black;
line-height:  1.2;
max-height: calc(1em * 1.2 * 2);
display:  block;
text-decoration: none;
display:  -webkit-box;
white-space: nowrap;
overflow:  hidden;
-o-text-overflow:  ellipsis;
text-overflow:  ellipsis;
-webkit-line-clamp:  2;
-webkit-box-orient:  vertical;
max-width: 216px;
}
.text_area{
padding-right: 10px !important;
padding-left: 10px !important;
width: 100% !important;
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
max-width: 100% !important;
outline: none;
box-shadow: none;
}
.required_field::after {
content: '*';
color: red;
}
.cf-offer{
width: -webkit-fill-available;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.5rem;
border-radius: 0.5rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
cursor: pointer;
}
.cf-offer-d1{
/* flex flex-col items-start */
display: flex;
flex-direction: column;
align-items: start;
}
.cf-offer-tag{
/*  px-2 rounded-lg */
padding-left: 0.5rem;
padding-right: 0.5rem;
border-radius: 0.5rem;

}
.cf-offer-prices{
/* flex flex-col items-end justify-center flex-1 */
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
flex:1 1 0%;
}
.cf-offer-main{
/* flex gap-2*/
display: flex;
gap: 0.5rem;
}
.cf-offer-oldprice{
text-decoration: line-through;
}
.cf-offers-variants{
/*  flex flex-col items-start gap-2 */
display: flex;
flex-direction: column;
align-items: start;
gap: 0.5rem;
}
.cf-offers-variant-select{
min-width: 100px;
padding: 3px;
border-radius: 4px;
color: black;
}
.cf-offer-input{
display: none;
}
.cf-cart-item-price{
padding-left: 12px;
line-height: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
width: 106px;
min-inline-size: fit-content
}
.cf-cart-item{
padding-left: 12px !important;
line-height: 1 !important;
-ms-flex-negative: 0 !important;
flex-shrink: 0 !important;
-webkit-box-flex: 1 !important;
-ms-flex-positive: 1 !important;
width: 106px !important;
}
.cf-input{
outline: none !important;
box-shadow: none !important;
}
.upsell_btn{
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
border: 0;
display:flex;
justify-content:center;
align-items:center;
cursor: pointer;
gap:5px;
}
.upsell_loading{
width: 22px;
height: 22px;
margin-inline: 6px;
display: none;
}
.cf-scroller{
position: fixed;
bottom: 0px;
right: 0px;
left: 0px;
justify-content: center;
display: flex;
padding: 10px;
z-index: 9999999999999999999;
}

@media (min-width: 768px) {
.cf-scroller{
  display: none !important;
}

}
.quantity-plus{
border:none;
height: 30px;
width: 30px;
padding: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.quantity-min{
border:none;
height: 30px;
width: 30px;
padding: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.cf-html{
max-width: 100%;
width: -webkit-fill-available;
}
.sku_by_country{
background-color: white;
width: -webkit-fill-available;
padding: 10px;
border-radius: 6px;
border: 1px #cfcfcf solid;
}
.cod_form_countdown{
direction: ltr;
}
.cf-5a2{
width: 100%;
margin-top: 0px;
box-sizing: border-box;
}
.cf-ord-pop {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999999999999999; /* Sit on top */
padding-top: 120px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.cf-ord-pop-content {
background-color:white;
padding:20px;
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
border-radius: 9px;
margin: auto;
border: 1px solid #888;
position: fixed;
z-index: 1111;
top: 110px;
right: 0px;
width: 100%;
}

@media only screen and (min-width: 680px) {
.cf-ord-pop-content {
translate: -50%;
width: 50%;
}
}



.cf-ord-pop-title {
color: black;
font-size: xx-large;
margin:10px;
padding: 0px !important;
}
.cf-ord-pop-message {
font-size: 19px;
margin: 0px;
   text-align: center;
  color: #556973;
  font-weight: 500;
}
.cf-rbsp{
font-weight:600;
margin-inline-start: auto;
}
.cf-rbdiv1{
    width: 100%;
    text-align: start;
    display: flex;
    gap:3px;
    flex-direction: column
}
.cf-rb-lab{
display: flex;
align-items: center;
font-family: 'Tajawal';
width: -webkit-fill-available;
gap: 10px;
padding: 10px 20px;
}
.cf-shipping{
display: flex;
width: -webkit-fill-available;
padding-inline: 6px;
}

.cf-shi-typs{
display: flex;
flex-direction: column;

}
.vf-shlable{
display: flex;
width: -webkit-fill-available;
padding-inline: 12px;
}
.cf-shlable{
padding-inline: 6px;
display: flex;
justify-content: start;
align-items:center
}
.cf-ord-pop-close {
padding: 10px 20px !important;
border-radius: 10px !important;
margin: 10px !important;
border: 0px !important;
font-weight: 600 !important;
background-color: #f0f0f0;
color: black;
}
.cf-wbsvg{
display:flex;
justify-content:center;
align-items:center
}
.cf-wbtn{
width:100%;
align-items: center;
gap: 10px;
justify-content: center;
display:flex;
}
.cf-mch{
width:100%;
  text-align:start;
  display:flex;
  gap:3px;
  flex-direction:column;
}
.cf-rboxd{
align-items: center;
width: 100%;
border-radius:6px;
gap: 10px;
}
.cfw-min{
  width: min-content;
}
.cf-cicla{
display:flex;
flex-direction:column;
gap:2px;
width:-webkit-fill-available;
padding:16px;
border-radius:10px
}
.cf-wcb{
width:100%;
color: black;
justify-content: space-between;
}
.cf-wcfb{
width:100%;
display:flex;
color: black;
justify-content: space-between;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}