@charset "utf-8";
/* CSS Document */

:root {
  --first-color: #fe0000;
 	--second-color: #71b841;
   --third-color: #c10001;	
}

 
 
 /*
.top-checkout{
    background: url(image/image-1.jpg);
    background-position: center;
    background-size: cover;
    backdrop-filter: blur(2px);
    color: #3c3c39;
    display: flex;
    justify-content: center;

    font-family: 'Monsterrat', sans-serif;
    position: relative;
    padding: 2rem 0;
}
.checkout-container {
    max-width: 120rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
}
*/
.top-checkout{
margin-top: 70px;
margin-bottom: 70px;
}
em {
  font-style: normal;
  font-weight: 700;
}

hr {
  color: #fff;
  margin-bottom: 1.2rem;
}
 /*
 Left Side Of Container
.left-side {
  background: url( "image/image-2.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
  width: 100%;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
  border-radius: 7px 0px 0px 7px;
}
 */

.text-box {
  background: rgba(95, 121, 134, 0.8);
  width: 100%;
  padding: 1rem 2rem;
  position: absolute;
  bottom: 0;
}

/* Left container text */

.home-heading {
  color: #e8e8e1;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1rem;
}

.home-price {
  color: #aeae97;
  font-size: 2rem;
  margin-bottom: 1.2rem;
}

.home-desc {
  color: #e8e8e1;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* Right Side of container */

.right-side {
  background-color: #fff;
  padding: 35px 35px;
  width: 100%;
  box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 6px;
}

.receipt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.receipt-heading {
    font-size: 18px;
    color: var( --first-color);
    text-align: left;
    font-weight: 700;
}

.table {
  border-spacing: 5px;
  color: #64645f;
  margin-top: -12px;
  font-size: 12px;
  margin-bottom: 0.5rem;
  width: 100%;
}

.total td {
  font-size: 20px;
  font-weight: 700;
}

.price {
  text-align: end;
}

/* Payment Section */

.payment-heading {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.form-box {
  display: grid;
  gap: 10px;
  margin-top: -13px;
}

.card-logo {
  font-size: 2rem;
  color: var(--third-color);
}

.expires,
.form-box label {
  font-size: 1.2rem;
  font-weight: 700;
}

.form-box input {
  font-family: inherit;
  font-size: 1.2rem;
  padding: 0.5rem;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #EDECEC;
  margin-top: 4px;
}

.form-box select {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #EDECEC;
}

.form-box #cvv {
  width: 25%;
}

.cvv-info:link,
.cvv-info:visited {
 color: inherit;
 text-decoration: underline;
}

.cvv-info:hover,
.cvv-info:active {
 color: #5f7986;
 text-decoration: none;
}

.btn-tab {
    background-color: var(--second-color);
    border: none;
    border-radius: 8px;
    color:#fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
	width: 100%;
    padding: 8px 5px 8px 5px;
}

.btn-tab:hover {
  background-color:var(--third-color);
  transition: ease-out 0.1s;
}
button.btn-tab{
margin-top: 0px;
}

.footer-text {
  font-size: 1rem;
  text-align: center;
}

.form-box *:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(139, 139, 107, 0.5);
  border-radius: 8px;
}

.card-experation{
    width: 219px;
    float: inline-start;
    margin-top: 5px;
}

.card-logos i{
 color:var(--third-color);
}

.form-box *:focus {
    outline: none;
    box-shadow: 0 0 0 0.8rem rgba(139, 139, 107, -8.5);
    border-radius: 6px;
	border: 1px solid var(--second-color);
	
}

.total .price{
border: none;
font-size: 20px;
color: var(--third-color);

}

 .price.price-tab{
color:var(--third-color)!important;	
}
 
.new-tab-box i{
    font-size: 15px;
    background-color: #71b841;
    padding: 8px 9px 8px 9px;
    border-radius: 50%;
    color: #fff;
    margin-left: 39px;	
}

.total .tab-box{
border: none;
color: var(--third-color);
font-size: 20px;
}

/***************card-page*******************/

.right-side .table{
 border-bottom: 1px solid #dee2e6d9;	
}

.card-tab-box{
	background: linear-gradient(45deg, #90d18566, #91c78866);
	padding-bottom: 40px;
    padding-top: 40px;
}
.img-card{
width:  50%;
}

.box-tab{
padding-top: 10px;
padding-right: 15px;
display: flex;	
}

.text-card{
width:  50%;
display: flex;
padding-left:9px;
align-items: center;
}

 .text-card a{
    margin-left: 62px;
    font-size: 32px;
	color: var(--second-color)!important;
   }

.text-card img{
    max-width: 56px;
    border-radius: 5px;
    width: 100%;
}

.text-card p{
    font-size: 15px;
    padding: 13px 0px 5px 10px;
    color: var(--second-color);
    }

 .total-tab span{
    font-size: 20px;
    padding: 0px 18px;
    color: var(--third-color);
}

.total-tab p{
     color: var(--second-color);
    font-size: 25px;
    font-weight: 600;
    padding: 0px 10px 0px 10px;
    border-radius: 5px;
   }

.total-tab{
    display: flex;
    align-items: center;
    /*margin: 0px 0px 0px 80px;*/
}

.total-tab p.total-box{
	font-size: 17px;
    margin-top: 7px;
    padding: 5px 20px 5px 32px;
}

.box-tab .fa-solid{
    font-size: 15px;
    background-color: var(--second-color);
    padding: 8px 9px 8px 9px;
    border-radius: 50%;
    margin-left: 43px;
    color: #fff;	
    }

.totals-tabs{
border: none;
}

.box-tab button, input, optgroup, select, textarea {
    margin: 1px;
    font-family: inherit;
    font-size: 18px!important;
    border: none;
    text-align: center;
	color: var(--second-color);
	font-weight: 700;
    background-color: #e9e8e7;
}

.box-tab button, input, optgroup, select, textarea {
    font-size: 15px!important;
	color: var(--second-color);
	font-weight: 600; 
}

#field1{
background-color: #e9e8e7;
padding: 0px 6px 0px 6px;
border-radius: 3px;
}

#field2{
background-color: #e9e8e7;
padding: 0px 8px 0px 8px;
border-radius: 3px;	
}
/****************************/

.tab-sec .row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  margin: 0 -16px;
}

	.tab-sec .col-25 {
  -ms-flex: 25%; 
  flex: 25%;
}

	.tab-sec .col-50 {
  -ms-flex: 50%;
  flex: 50%;
}
.tab-sec .col-75 {
  -ms-flex: 75%;
  flex: 75%;
}

	.tab-sec .col-25,
	.tab-sec .col-50,
	.tab-sec .col-75 {
  padding: 0 16px;
}

 .men-tab input[type=text]{
    width: 100%;
    margin-bottom: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
	font-size: 13px;
	font-weight: 100;
	text-align: left;
	background-color: #fff
	}

.tab-sec label {
  margin-bottom: 0px;
  font-size: 16px;
  margin-left: 5px;

}

.tab-sec .icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 20px;
  margin-left: 12px;
}

.icon-container

.tab-sec .btn {
  background-color: var(--second-color);
  color: white;
  padding: 7px 13px 7px 13px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.tab-sec .btn:hover {
  background-color: var(--third-color);
 color: #FFFFFF;
}

.tab-sec a {
    color:#495057;
    font-size: 16px;
    text-decoration: none;
}

.tab-sec hr {
  border: 1px solid lightgrey;
}

 span.price {
    float: right;
    font-size: 19px;
    color: #495057;
    font-weight: 400;
    padding-top: 0px;
}
	.next-tab{
	padding: 40px 0px;
	}
    .next-tabs{
	padding: 40px 0px;	
}

 p.total-no{
font-size: 21px;
color: var(--third-color);
font-weight: 600;
margin: 0px;
}
	
 .tab-sec{
	padding-bottom: 0px;
	padding-top: 0px;
	/* background: linear-gradient(45deg, #90d18566, #91c78866);*/
	}
	
 .men-tab{
	background-color: #fff;
    padding: 40px 40px;
    border-radius: 6px;	
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}
	
  .right-tab-box{
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 6px;	
    box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}
	
    .tab-sec input[type=text]:focus-visible {
	outline: 0px;
	 border: 1px solid var(--second-color);
	}

  .icons-tabs .fa,   .icons-tabs .fa-brands, .icons-tabs .fa-classic, .icons-tabs .fa-regular, .icons-tabs .fa-sharp, .icons-tabs   .icons-tabs .fa-solid, .icons-tabs.fab, .icons-tabs.far, .icons-tabs.fas {
	 color:var(--third-color);
	}

	.men-tab h3{
	color: var(--third-color);	
	font-weight: 600;
    margin-left: 8px;
	}

.tab-sec input[type="radio"] {
	 background-color: transparent;
	 border: 1px solid #c7c3c3;
	 border-radius: 50%;
	 box-shadow: inset 0 0 0 0 white;
	 cursor: pointer;
	 font: inherit;
	 height: 1em;
	 outline: none;
	 width: 1em;
	 -moz-appearance: none;
	 -webkit-appearance: none;
  }
    .tab-sec input[type="radio"]:checked {
	 background-color: #c7bdbd;
	 box-shadow: inset 0 0 0 0.1875em var(--third-color);
	 -webkit-transition: background 0.15s, box-shadow 0.1s;
	 transition: background 0.15s, box-shadow 0.1s;
}

/********************************************/

.shipping-tab{
    padding-top: 4%;
    padding-bottom: 3%;	
}

.shipping-tab-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.address h2{
    color: var( --first-color);
    padding: 5px 10px 5px 10px;
    font-size: 24px;
    border-radius: 4px;
    width: fit-content;
	margin: 0px;
    text-align: center;
}

.add-new a{
    padding: 7px 13px 7px 13px;
    border: 1px solid #ECEAEA;
    font-size: 17px;
    font-weight: 500;
    border-radius: 4px;
    background-color: var(--second-color);
	color: #FFFFFF!important;
}
.add-new a:hover{
    background-color: var(--third-color);
	color: #FFFFFF!important;	
}

.add-new{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wex-tab{
    padding: 30px 35px;
    border-radius: 6px;
    box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: #FFFFFF;
}
.weps h5{
    color: var(--third-color);
    padding: 5px 10px 5px 0px;
    font-size: 19px;
}
.weps p{
    font-size: 14px;
    font-family: system-ui;
    word-spacing: 3px;
	margin-top: 25px;
}
.ship-tab{
margin-top: 20px;
border-top: 1px solid #DBD7D7;
}

.number-tab{
margin-top:16px;
	
}

.form-checks{
 margin-top: 22px;
}

.form-check-labels{
    font-size: 15px;	
}

.btn-tab-weps a{
    background-color: var(--second-color);
    color:#FFFFFF!important;
    padding: 7px 13px 7px 13px;
    margin: 10px 0;
    display: block;
    border: none;
	text-decoration: none;
    width: 100%;
    text-align: center;
    font-size: 19px;
    border-radius: 6px;
    font-weight: 500;	
}

.btn-tab-weps a:hover{
    background-color: var(--third-color);
    color:#FFFFFF!important;	
}

.button, input, optgroup, select, textarea:focus-visible{
	outline: 0px;
	
}

.right-tab-box h4{
 font-size: 21px;
 color: var( --first-color);
 padding-bottom: 7px;
}
/***************************/

.wex-tab-box{
    border-radius: 6px;
    box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: #FFFFFF;
}

.items{
padding: 40px 40px;	
}

.items h2{
    color: var(--third-color);
    padding: 5px 10px 5px 10px;
    font-size: 19px;
    border-bottom: 2px solid;
    border-radius: 4px;
    width: 240px;
    text-align: center;	
}

.added-tab{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.left-tab-box img{
	width: 100%;
    max-width: 127px;
	border-radius: 4px;
}

.left-tab-box{
	display: flex;
	align-items: center;
	margin-top: 20px;
	
}
.nons-tab{
	margin-left: 15px;
}

.nons-tab p{
    font-size: 15px;
    color:var(--third-color)!important;	
    font-weight: 500;
    margin-top: 9px;
}
.nons-tab a{
    font-size: 14px;
    border: 1px solid var(--second-color);
    padding: 3px 5px 3px 5px;
    border-radius: 4px;
	text-decoration: none;
	color: var(--second-color)!important;	
    
}
.nons-tab a:hover{
    background-color: var(--second-color)!important;	
	color: #FFFFFF!important;
}

.nons-tab span{
    font-size: 14px;
    margin-top: 10px!important;
}

.nons-tab p.later {
    font-size: 15px;
    color: var(--second-color)!important;	
    font-weight: 500;
    margin-top: 7px;
}

.nons-tab p.later b{
	color:var(--third-color) !important; 
    font-weight: 500;
}

.right-tab-boxs{
    margin-top: 44px;	
}

.right-tab-boxs p{
    font-size: 17px;
    font-weight: 600;
    color: var(--third-color);  	
}

.continue-tab a{
background-color: var(--second-color);
    color: #FFFFFF !important;
    padding: 10px;
    margin: 28px 0px 0px 0px;
    display: block;
    border: none;
    text-decoration: none;
    width: 100%;
    text-align: center;
    font-size: 21px;
    border-radius: 6px;
    font-weight: 500;	
}

.tab-apply{
 order-radius: 6px;
 box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
 background-color: #FFFFFF;
 height: fit-content;
 border-radius: 6px;
}

.can-tab{
padding: 40px 19px;
margin-top: 25px;
margin-bottom: 25px;
}

.can-tab h2{
font-size: 18px;
color: var(--first-color);
font-weight: 600;	
}

.can-tab .form-check .form-check-input {
    float: right;	
    margin-top: 37px;
}

.can-tab label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color:var(--second-color);
    margin-top: 15px;
    line-height: 19px;
}

.can-tab .form-check {
	padding: 0px;
}

.can-tab label span{
color: var(--third-color)!important;	
}

.apply-btn{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 25px;
}

.apply-btn a{
text-decoration: none;
color: var(--third-color);
font-size: 15px;
font-weight: 600;
}

.product-tab-box .col-sm-3 {
flex: 0 0 auto;
width: 30%;
margin-left: 32px;
padding-left: 3px;	
}

#billing-tab{
    font-size: 20px !important;
    font-weight: 600 !important;
    background-color:var(--second-color);
    width: 100%;
    margin-top: 20px;
    color: #fff;
}

#billing-tab:hover{
   color: #fff;
 background-color: var(--third-color);
}

/*********************/

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

.text-card{
display: flex;
}
		
th.quantity-tab{
  color:var(--second-color);
 text-align: unset;
 font-size: 16px;

} 	
#field1 {
    border-radius: 3px;
	background-color: #f7f7f7;
    width: max-content;
}
	
#field2{
border-radius: 3px;
background-color: #f7f7f7;
width: max-content;	
}


td.text-card-box{
min-width: 210px;
padding-left: 30px;
}
td.text-tab-boxs{
min-width: 100px;
padding-left: 36px;
		}
		
.sub,.add{
border: none;
background-color: transparent;
		}
		
button, input, optgroup, select, textarea {
		border: none;	
		outline: 0;
		text-align: center;
	    background-color: transparent;
		}
		
		p.total-box{
	    color: #71b841;
        font-weight: 500;
		margin: 0px;
		font-size: 15px;
		padding-left: 31px;
		}

.tabs-nombers{
    display: flex;
    justify-content: center;	
}
		
.qr-tab .fa-solid {
    font-size: 15px;
    background-color: #71b841;
    padding: 8px 9px 8px 9px;
    border-radius: 50%;
    color: #fff;
	margin-left: 38px;
}
		
p.total-tab-box{
margin-left: 10px;
font-size: 15px;
}
			
.left-card {
    margin: 0px 0px 0px 0px;
    padding-bottom: 32px;
    padding-top: 30px;
    border-radius: 6px;
    box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: #FFFFFF;
    height: fit-content;
	margin-top: 25px;
}
		
.top-tabs-box{
padding-top: 40px;
padding-bottom: 40px;
}

 .sub,
 .add{
font-size: 20px;
}

.card-tab-box .col-lg-3 {
margin-left: 56px;	
	
}

tbody, td, tfoot, th, thead, tr {
padding-left: 50px;
}

.full-tab{
margin: 0px;
padding: 0px;
}

.wex-tab{
width: 100%!important;
}

.left-card{
width: 100%!important;	
}

.qr-tab .row{
    padding: 0px 15px 0px 17px;	
}

.qr-tab {
	padding-top: 40px;
}

.tab-apply{
width: 100%!important;		
}

.tab-sec .container{
padding-left: 0px;
}

.shipping-tab .row{
  padding: 0px 7px 0px 10px;
}

.head-text-tab{
    padding-bottom: 0px;
    padding-left: 40px;
    width: fit-content;
}

.head-text-tab h2{
    color: var( --first-color);
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    border-radius: 4px;
    line-height: 35px;
}

.head-text-tabs{
    padding-bottom: 16px;
    width: fit-content;	
}

.head-text-tabs h2{
    color: var( --first-color);
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    border-radius: 4px;
    line-height: 35px;
}

th.tab-quantity{
    text-align: start;
    padding-right: 43px;	
}

/******************************************/
.order-tab-page .container .steps {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-top: 0px;
}
.steps .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  color: #999;
  font-size: 22px;
  font-weight: 500;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #e0e0e0;
  transition: all 200ms ease;
  transition-delay: 0s;
  margin-right: 35px;
}
.steps .circle.active {
    transition-delay: 100ms;
    border-color: #71b841;
    background-color: #fff;
    color: #71b841;
}
.steps .progress-bar {
  position: absolute;
  height: 5px;
  width: 80%;
  background: #e0e0e0;
  z-index: -1;
  margin-left: 17px;
}
.progress-bar .indicator {
  position: absolute;
  height: 100%;
  width: 28%;
  background: #71b841;
  transition: all 300ms ease;
}
.order-tab-page .container .buttons {
  display: flex;
  gap: 20px;
  margin-top: 8%;

}
.buttons button {
    padding: 8px 40px;
    background: #4070f4;
    border: none;
    background-color: #71b841;
    border-radius: 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: all 200ms linear;
}
		.buttons button:hover{
		 background: #c10001;
		 color: #FFFFFF;	
		}		
		
.buttons button:active {
  transform: scale(0.97);
}
.buttons button:disabled {
  background: #71b841;
  cursor: not-allowed;
}
.buttons button:disabled:hover{
 background: #c10001;
 color: #FFFFFF;
}
		
.steps{
position: relative;
}
.texts-boxs-bars p span{
	color:#4E4C4C;
}

.text-boxs-bars  p span{
	color:#4E4C4C;	
}

.text-box-bars p span{
		color:#4E4C4C;	
}

.text-box-bar  p span{
	color:#4E4C4C;		
}
		
	.text-box-bar{
	position: absolute;
    top: 113%;
    line-height: 25px;
    font-weight: 500;
    font-size: 13px;
	color: #71b841;
		}
	.text-box-bars{
	position: absolute;
    top: 113%;
	left: 24%;
    line-height: 25px;
    font-weight: 500;
    font-size: 13px;
	color: #71b841;	
		}
		
	.text-boxs-bars{
	position: absolute;
    top: 113%;
    left: 49%;
    line-height: 25px;
    font-weight: 500;
    font-size: 13px;
	color: #71b841;		
		}
		
	.texts-boxs-bars{
	position: absolute;
    top: 113%;
    left:74%;
    line-height: 25px;
    font-weight: 500;
    font-size: 13px;
	color: #71b841;	
		}
		.ocean-tab{
	   text-align: center;
       margin-top: 20px;
	   margin-right: 8%;
		}	
		
	.ocean-tab p{	
	font-size: 21px;
    font-weight: 500;
	color:var( --first-color);
	margin: 0px;
    padding-top: 32px;
	}
		
		.del-tab{
		font-size: 16px;
		}
		
	.transit-tab{
	border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 0px 20px 90px 165px;
		}
/******************************************/
.uds-tab{
    padding-left: 20px!important;	
}
.image-box-tab img{
    width: 100%;
    max-width: 122px;
    border-radius: 5px;
}

.text-tab-new h2{
    color: var( --first-color);
    padding: 5px 10px 5px 0px;
    font-size: 24px;
	font-weight: 400;
    border-radius: 4px;
    width: fit-content;
    margin: 0px;
    text-align: center;
    margin-bottom: 13px;
}

.new-tab2 tbody, td, tfoot, th, thead, tr {
padding: 13px 40px;

}
.new-tabs-boxs{
    margin: 0px 0px 0px 0px;
    padding: 40px 40px;
    border-radius: 6px;
    box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: #FFFFFF;

}
.new-tab2{
	padding-top: 40px;
}

.new-tab2 td.text-no{
	font-size: 17px;
	text-align: end;
    color: #71b841;
    font-weight: 500;
}
.new-tab2 td.texts-no{
	font-size: 17px;
	text-align: end;
    color: #71b841;
    font-weight: 500;
}


.image-box-tab{
display: flex;
align-items: center;
margin-bottom: 15px;

}
.later-tab{
padding-left: 20px;
}
.later-tab p{
font-size: 14px;
margin-bottom: 12px;
color: #495057;

}
.later-tab a{
font-size: 12px;	
border: 1px solid  var(--second-color);
padding:6px 6px 6px 6px;
margin-bottom: 4px;
color: var(--second-color)!important;
}
.later-tab a:hover{
color: var(--third-color)!important;	
border: 1px solid  var(--third-color)!important;
}

.later-tab p.save-tab{
 font-size: 14px;
margin-top: 8px;
color: var(--second-color);
}

.btn-tab-continue a{
    background-color: var(--second-color);
    color: #FFFFFF !important;
    padding: 7px 13px 7px 13px;
    margin: 10px 0;
    display: block;
    border: none;
    text-decoration: none;
    width: 100%;
    text-align: center;
    font-size: 21px;
    border-radius: 6px;
    font-weight: 500;	
}

.btn-tab-continue a:hover{
  background-color: var(--third-color);	
}
.btn-tab-continue {
    padding: 0px 3px;
    width: 52%;
}



/*******top-tab**************/

.top-tab{
 padding-top: 40px;
 padding-bottom: 40px;
}

.top-tab .lefts-tab{
 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 background-color: #FFFFFF;
 border-radius: 6px;
}

.top-tab .lefts-tab a:hover{
background-color: #c10001;
color: #FFFFFF!important;
}

/************
.lefts-tab .active{
background-color: #c10001;
color: #FFFFFF!important;
border-radius: 6px 6px 0px 0px;
}

.lefts-tab .active.tab-one{
background-color: #fe0000;	
}
************/
.lefts-tab a{
text-decoration: none;

transition-duration:0.6s;
color:var(--second-color); 
font-size: 21px;
display: block;
padding: 9px 0px 8px 15px;
box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;
border-bottom: 1px solid #f0e9e9cf;
}

.lefts-tab a:nth-child(8){
border-radius: 0px 0px 6px 6px;	
}

.lefts-tab a span{
    padding-left: 15px;
    font-size: 16px;
    font-weight: 500;	
}

/******tab-image-box**********/

.rights-tab{
display: flex;
justify-content: space-between;
align-items: center;
box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;
padding: 40px 40px;
border-radius: 6px;
}

.tab-image-box img{
 width: 100%;
 max-width: 85px;
 border-radius: 100%;
 border: 1px solid var(--second-color);
}

.tab-image-box h2{
font-size: 20px;
font-weight: 600;
color: var(--third-color);
padding-top: 2px;	
}

.profile-tab span{
 color:  var(--second-color);
 padding-left: 10px;
 line-height: 25px;
 font-size: 15px;
}

.Welcome-tab p{
    text-align:left;
    font-size: 17px;
    font-weight: 600;
    color: #5F5C5C;
    padding-left:  21px;
}
.Welcome-tab{
display: flex;
align-items: center;
}
.Welcome-tab span{
    font-size: 22px;
    font-weight: 600;
    color: var(--third-color);
    padding-top: 2px;
}

.tab-image-box h2 span{
color:#5F5C5C; 	
}

.logout-tab-box a{
text-decoration: none;
padding: 7px 16px 7px 16px;
border: 1px solid #ECEAEA;
font-size: 17px;
font-weight: 500;
border-radius: 4px;
color: #fff;
background-color: var(--second-color);
}

.logout-tab-box a:hover{
background-color:var(--third-color);
color: #FFFFFF!important;
}
/*******************************/

/*******status-tab*************/
td.tab-eumosone{
 padding-left: 17px;	
}



.status-tab{
	padding-bottom: 40px;
	padding-top:17px;
}

.summary{
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;	
padding-bottom: 14px;
}

.summary h2{
 font-size:17px;
 color: var( --first-color);
 font-weight: 600;
}

.summary p,
.shipping-address p,
.payment-method p,
.order-details p{
 font-size: 13px;
 font-weight: 500;
 color: #000;
 margin: 0px;
 line-height:22px;
padding: 0px 20px 0px 20px;
}

.summary p span{
color:var(--third-color);
}

/**************/

.shipping-address{
margin-top:12px;
border-radius: 6px;
box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;	
padding-bottom: 14px;	
}

.shipping-address h2{
 font-size:17px;
 color: var( --first-color);
 font-weight: 600;	
}

.shipping-address span{
 color:var(--third-color);
}
/***************/

.payment-method{
margin-top:12px;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;	
padding-bottom:14px;	
}

.payment-method h2{
 font-size:17px;
 color: var( --first-color);
 font-weight: 600;	
}

/************/

.order-details{
margin-top: 12px;
border-radius: 6px;
box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;
padding-bottom:14px;
	
}

.order-details h2{
 font-size:17px;
 color: var(--first-color);
 font-weight: 600;	
}


.order-details p a{
text-decoration: none;
color:var(--second-color);
}

.order-details span{
 color:#c10001;	
}

.box-tab-top h2.active{
	background-color:#EFEAEA;
    color:var --first-color);
    padding:7px 6px 7px 19px;
    border-radius: 6px 6px 0px 0px;
	margin-bottom: 4px;

}

/**************************************/
.order-number{
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;
padding: 20px 20px;
}

.number-tab-text h2{
     margin-bottom: 11px;
    font-size: 16px;
    font-weight: 400;
    color: var(--third-color);
}

.number-tab-text span{
color:var(--second-color);
font-weight: 500;
}

/******************/
.pending-tab table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-top: 12px;
  border-bottom: 1px solid #ddd;
}

.pending-tab th, td {
    text-align: left;
    padding: 8px;
    font-size: 17px;
    font-weight: 500;
}

.pending-tab tr:nth-child(1){
background-color:#EFEAEA;
color:var(--third-color);
}

.product-image img{
width: 100%;
max-width: 70px;
max-height: 70px;
border-radius: 6px;
margin: 15px 0px;
}

 td.eumosone-tab{
   color:#000;
   font-size:14px;
}

.lefts-tab a:hover {
    color:#FFFFFF;
    background-color:var(--third-color);
}

/************************/

.subtotal-tab{
	
}

.subtotal-tab table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.subtotal-tab th, td {
  text-align: left;
  padding: 2px;
  font-size: 16px;
}
.subtotal-tab tr:nth-child(1){
}

.first-tab{
width: 84%;
color:#000;
font-size:14px;
}

td.price-tab-box{
 font-size:21px;
 color:var(--third-color);
}

/***********address-tab-box***********/
.address-tab-box{
	padding-top: 40px;
}

.address-text-tab-box{
border-radius: 6px;
box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;
padding:28px 28px 28px 28px;
}

.tab-box-address{
padding: 13px 5px 6px 5px;
border:1px solid #dee2e6d9;
border-radius: 5px;
}

.address-text-tab h2{
    font-size: 22px;
    font-weight: 500;
    color:var( --first-color);
    padding: 0px 10px 10px 6px;
}

.address-text-tab a{
    display: block;
    padding-left: 8px;
    font-size: 15px;
}

.address-text-tab a i{
    color: var(--second-color);
    font-size: 15px;
    padding-right: 3px;
    padding-bottom: 14px;
}

.address-text-tab a span{
padding-left:24px
}

.top-tab-modal{
margin-top: 25px!important;
}

button.tab-modal-box{
    padding: 7px 13px 7px 13px;
    border:none;
    font-size: 17px;
    font-weight: 500;
    border-radius: 4px;
    background-color: var(--second-color);
    color: #FFFFFF !important;	
}
button.tab-modal-box:hover{
background-color: var(--third-color);
color: #FFFFFF;
}

button.secondary-tab{
    padding: 7px 13px 7px 13px;
    border:none;
    font-size: 17px;
    font-weight: 500;
    border-radius: 4px;
    background-color: var(--second-color);
    color: #FFFFFF !important;	
}

button.secondary-tab:hover{
background-color: var(--third-color);
color: #FFFFFF;	
}
.icon-tab-sec-box-icon{
position: relative;
}

.modal-tab-box-icon{
    position: absolute;
    top: 17px;
    font-size: 18px;
    left: 20px;
    color: var(--third-color);
}

.icon-tab-sec-box-icon label{
  font-size: 16px;
  margin-left: 4px;
}
.icon-tab-sec-box-icon .form-control {
padding: 10px;
margin-top: 7px;
text-align: left;
padding-left:  40px;
	
}
.icon-tab-sec-box-icon .form-control:focus-visible {
    border-color:var(--second-color);
    outline: 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#staticBackdrop .modal-header {
    padding: 20px 23px 15px 18px;
}

/**********profile*******************/

.profile{
padding-top: 40px;
padding-bottom: 40px;
}

.details-tab-box{
border-radius: 6px;
box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;
padding: 19px 28px;	
}

.details-tab-box h2{
    font-size: 22px;
    font-weight: 500;
    color: var( --first-color);
    margin: 0px;
    padding: 0px 0px 10px 0px;
}

.email-tab-box label{
    font-size:17px;
    margin-bottom: 4px;
    padding-left: 5px;
    font-family: sans-serif;
}

.details-tab-box .form-control {
padding: 10px;
text-align: left;
padding-left: 36px;
}

.details-tab-box .form-control:focus {
    color: var(--bs-body-color);
    border-color: #71b841;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, -7.75);
}

.email-tab-box i{
    padding: 0px 3px 0px 10px;
    color:var(--third-color);
    font-size: 18px;
}

.icon-tab-sec-box{
	position: relative;
}

.icon-text-box-tab {
    position: absolute;
    top: 45px;	
}

.profile-btn{
margin-top: 25px;	
}

/***********sipping-address-tab************/
/********
.sipping-address-tab{
 padding-top: 40px;
 padding-bottom: 40px;
}
**********/
.center-tab{
margin: auto;	
}
.email-tab-boxs .form-control{
  padding: 10px;
  margin-top: 6px;
  text-align: left;
  padding-left: 40px;
}

.email-tab-boxs label{
font-size: 16px;
margin-left: 4px;
}

.icon-tab-sec-boxs{
position: relative;
}

.icon-text-boxs-tabs{
    position: absolute;
    top: 8px;
    font-size: 18px;
    left: 10px;
	color: var(--third-color);
}

.email-tab-boxs .form-control:focus {
    background-color:transparent;
    border-color: var(--second-color);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, -11.75);
}

.create-text-tab h2{
    font-size: 22px;
    font-weight: 500;
    color: var( --first-color);	
}

.modal-content {
    width: 115%!important;	
}

.top-head-tab{
    padding: 20px 20px;	
}



/***********change-password-tab************/

.change-password-tab{
	padding-top: 40px;
	padding-bottom: 40px;
}

.right-tab-pas{
border-radius: 6px;
box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;
padding: 40px 40px;		
}
.pas-text-tab h2{
font-size: 24px;
font-weight: 500;
color: var( --first-color);
margin-bottom: 19px;
}

.right-tab-pas .form-control{
    padding: 10px;
    text-align: left;
	margin-top: 7px;
    padding-left: 35px;

}

.right-tab-pas label{
	font-size: 16px;
	margin-left: 5px;
}
.pas-icon-tab{
position: relative;
}

.pas-icon{
    position: absolute;
    top: 37px;
    left:20px;
    font-size: 20px;
    color: var(--third-color);	
}

.right-tab-pas .form-control:focus {
    border-color:var(--second-color);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, -6.75);
}

.sipping-address-tab select {
    background: url( "image/down-arrow.png");
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 91% 63%;
}

.control-tab{
width:67%!important;
}
#pwdch,#pwdnew,#pwdold{
width: 66%;	
}

/***********my-account**********/

.my-account{
	padding-top: 40px;
	padding-bottom: 40px;
}

.head-tab-account{
margin: auto;
}

.head-tab-accounts{
 
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #FFFFFF;
padding: 40px 40px;	
}

.account-tab h2{
font-size: 28px;
font-weight: 500;
color: var(--first-color);
margin-bottom: 10px;
}

.account-tab label{
font-size:16px;
margin-left: 5px;
}

.account-tab .form-control {
padding: 10px;
margin-top: 8px;
text-align: left;
padding-left: 38px;
}

.account-tab .form-control:focus {
    border-color:var(--second-color);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, -7.75);
}

.box-tab-account{
display: flex;
align-items: center;
}

.your-tab-box{
position: relative;
}

.name-icon-tab{
font-size: 19px;
color: var(--third-color);
position: absolute;
top: 7px;
left: 10px;	
}


/***********login************/



.wrapper {
  width: 100vw;
  min-height: 100vh;
  background-color: #91c78866;
  padding: 22px 0px;
  background: linear-gradient(45deg, #90d18566, #91c78866);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login {
  width: 100%;
  max-width: 815px;
  background-color: #fff;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}
.login .login-form {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  max-width: 50%;
  background-color: #fff;
  padding: 45px 45px;
}

.login .login-form .login-title {
    font-family: 'Roboto Flex';
    font-size: 28px;
    color: var(--first-color);
	font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
   }
.login .login-form .form-wrapper .input-wrapper .label,
.login .login-form .form-wrapper .input-wrapper .input {
  display: block;
  width: 100%;
}
.login .login-form .form-wrapper .input-wrapper .label {
    font-size:16px;
    color: #393939;
	font-family: system-ui;
    padding-left: 3px;
}
.login .login-form .form-wrapper .input-wrapper .label i {
	padding-right: 5px;}

.login .login-form .form-wrapper .input-wrapper .input {
  padding: 10px 10px 10px 36px;
  border-radius: 5px;
  border: 1.5px solid #cae9c4;
  margin-top: 5px;
  margin-bottom: 15px;
  text-align: left;
}
.login .login-form .form-wrapper .action-help {
    padding: 1px 0px 16px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login .login-form .form-wrapper .action-help .help-link {
  color: var(--third-color);
  font-family: system-ui;
  text-decoration: none;
  font-weight: 500;
  transition: color 9.1s ease-in-out;
  font-size:16px;
}
.login .login-form .form-wrapper .action-help .help-link:hover {
  color:  #71b841; 
}
.login .login-form .form-wrapper .actions {
  display: flex;
  flex-flow: column;
}
.login .login-form .form-wrapper .actions .action {
  display: flex;
  font-size: 17px;
  font-family: system-ui;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 30px;
  margin-bottom: 15px;
  margin-top: 8px;
  border-radius: 25px;
  color: #fff;
  background-color:var(--second-color);
  text-decoration: none;
  border: 1px solid var(--second-color);
  transition: transform 5.2s ease-in-out, box-shadow 5.2s ease-in-out;
}
.login .login-form .form-wrapper .actions .action:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 25px -15px rgba(0, 0, 0, 0.5);
}

.login .login-decoration {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  background-image: url( "../card-page/image/image-3.jpg");
  background-position: center;
  background-size: cover;
}

.check-box{
    font-size: 0.9rem;
    font-weight: 500;
	font-family: system-ui;
}
/*******
.check-box .form-check-input:focus {
    outline: 5;
	box-shadow:none;
}
.check-box .form-check-input{
 border: 1px solid #71b841;
}
*********/
.tops-tabs-boxs .input-wrapper{
    padding-bottom: 3px;
    font-size:16px;
    color: #393939;
	font-weight: 500;
	font-family: system-ui;
    margin-top: 15px;
}
.tops-tabs-boxs .form-control:focus {
	box-shadow: none;
	border: 2px solid #000;
}

.tops-tabs-boxs .form-control{
    padding: 10px;
    border-radius: 5px;
    border: 1.5px solid #cae9c4;	
}

.logo-tab img{
  width: 100%;
  max-width: 70px;
}
.logo-tab{
    display: flex;
    justify-content: center;
	margin-bottom: 10px;
}

.tops-tabs-boxs .input-wrapper{
 position: relative;
}

.tops-tabs-boxs .far{font-size: 40px;}

.tops-tabs-boxs .fas{
    position: absolute;
    display: block;
    color: var(--second-color);
    left: 10px;
    top: 40px;
    font-size: 17px;
    }

.tops-tabs-boxs .fa-solid{
    position: absolute;
    display: block;
    color: var(--second-color);
    left: 10px;
    top: 40px; 
    font-size: 17px;	
    }

.login .login-form .form-wrapper .input-wrapper .input:focus-visible {
    outline: 0;
	 border: 1px solid #71b841;
}
/******************************/
.input-wrapper-tab{
    padding-bottom: 3px;
    font-size: 12px;
    color: #393939;
    font-weight: 500;
    font-family: system-ui;
    margin-top: 15px;
    word-spacing: 5px;
    line-height: 20px;
}

.input-wrapper-tab p span{
  color: #c10001;
}

.input-wrapper-tab p span:hover{
  color: #71b841;
}

.login .login-form.tab-form {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    max-width: 50%;
    background-color: #fff;
    padding: 35px 45px;
}

/* * * * * create * * * * */
.login .login-form.tab-form {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    max-width: 50%;
    background-color: #fff;
    padding: 35px 45px;
}

.login.tab-login{

    width: 100%;
    max-width: 970px;
    background-color: #fff;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);

   }
.inputBox .label-tab{
	font-size: 0.9rem;
    color: #393939;
	font-weight: 500;
    font-family: system-ui;
    padding-left: 3px;
}

.login .login-form .form-wrapper .action-help.tab-help{
    padding: 13px 0px 13px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tops-tabs-boxs .form-check-label{
font-size: 16px;
}

h2.text-icon-pws{
margin: 10px 0px;
}
.address-tab-box {
    padding-top: 50px;
    padding-bottom: 50px;
}

/********************************************/	
@media (max-width: 800px) {
  	.tab-sec .row {
    flex-direction: column-reverse;
  }
  	.tab-sec .col-25 {
    margin-bottom: 20px;
  }
	.right-tab-box {
	margin-bottom: 22px;
	}
	
}
@media only screen and (max-width: 767.98px) {
	  .login .login-decoration {
   display: none;
  }
	.login .login-form.tab-form {
		    max-width: 100%;
	}
	
	  .login .login-form {
    max-width: 100%;
  }
	
	
	
		.tab-image-box h2 {
	font-size: 21px;
	}
	
	.checkout-container {
	 grid-template-columns: none;
	}
	.items {
    padding: 40px 10px;
}
.added-tab {
    display: flow;
}	
	
.right-tab-boxs {
    margin-top: 23px;
}
.right-tab-box {
	margin-bottom: 22px;
	}
	td.text-card-box {
    min-width: 135px;
    padding-left: 30px;
}

}

@media only screen and (max-width: 393px) {
	.control-tab{
     width: 100%!important;
    }
    #pwdch,#pwdnew,#pwdold{
      width: 100%;	
    }
	
	td.text-tab-boxs {
	padding: 0px;
	}
	
	p.total-box {
	  padding-left: 2px;	
	}
	
	.qr-tab .fa-solid {
	    margin-left: 26px;	
	}
	.new-tab-box i {
	    margin-left: 0px;	
	}
		.rights-tab {
	    padding: 40px 10px;
	}
	    .tab-image-box h2 {
        font-size: 19px;
		padding-left: 9px;
    }
	
	.logout-tab-box a {
	    font-size: 16px;	
	}
	
	.tab-image-box img {
	max-width: 75px;
	}
	    .text-box-bars {
        top: 22%;
	    left: 17%!important;
	}
	
	    .text-boxs-bars {
        top: 45%;
        left: 17%!important;
    }
	
	    .texts-boxs-bars {
        top: 67%;
        left: 17%!important;
    }
	
	.progress-bars-tab {
        position: absolute;
        top: 149px!important;
        right: 219px !important;
        transform: rotate(90deg);
        height: 5px;
        width: 41%;
        background: #e0e0e0;
        z-index: -1;
    }

	.new-tabs-boxs{
	    margin-bottom: 30px;	
	}
	th.quantity-tab {
    text-align: center;
}
	td.text-card-box {
	 padding-left: 11px;	
	}
	.fa-solid {
	    margin-left: 20px;	
	}
	    .new-tab2 tbody, td, tfoot, th, thead, tr {
        padding: 13px 8px;
    }

	.new-tab2 td.text-no {
    font-size: 13px;
		font-weight: 600;
	}
	.later-tab p {
    font-size: 11px;
    margin-bottom: 7px;
}
.later-tab a {
  font-size: 10px;
	}
	
.later-tab p.save-tab {
    font-size: 12px;
    margin-top: 5px;
}	
		
.image-box-tab img {
 max-width: 80px;
    
}
	.later-tab {
    padding-left: 10px;
}
	.new-tab2 td.texts-no {
    font-size: 13px;
    font-weight: 600;
 
}
	.btn-tab-continue {
    padding: 0px 0px;
    width: 100%;
    margin: auto;
}
    th.tab-quantity {
    text-align: left;
    padding-left: 12px;
    }
	.order-tab {
    padding:0px;
  
}
.right-side {
  padding: 35px 33px;	
}
	td.text-card-box {
    min-width: 165px;
}
	
	.right-side-tab p {
	padding: 5px 25px 5px 25px;
    font-size: 15px;
	}
	
	.total-tab {
	margin: 0px;
	}
	
	.total-tab p.total-box {
	    padding: 5px 25px 5px 26px;	
	}
	
	.left-side-tab p {
	    font-size: 15px;	
	}
.total-tab p.total-box {
    font-size: 14px;	
	}
	
    .box-tab .fa-solid {
        margin-left: 13px;
    }	
	
    .total-tab p.total-box {
     padding: 5px 20px 5px 16px;
    }
	
.left-side-tab p {
    padding: 5px 15px 5px 0px;
	}
	.text-card {
	    padding-left: 0px;	
	}
	.right-tab-box {
	margin-bottom: 22px;
	}
	
	tbody, td, tfoot, th, thead, tr {
    padding-left: 0px;
}
	.head-text-tab {
     padding-left: 12px;	
	}
	
	.weps h5 {
	padding: 5px 10px 5px 0px;	
		
	}
	
.btn-tab-step button {
	margin-left: 120px;
    margin-bottom: 30px;
	}
	
.multi-steps 
	> li {
 font-size: 15px;		
}
	
.steps .progress-bar {
 width: 72%!important;	
		}
	.transit-tab {
	border-radius: 0px;
    box-shadow:none;
    padding:0px!important;	
	}
	
	.text-box-bars {
	 font-size: 13px;	
	}
	
		.steps .circle {
		margin-right: 17px !important;
		}
		
	.text-box-bars {
	left: 26%;	
	}
	
	.text-boxs-bars {
	    left: 57%;	
	}
	
	.text-boxs-bars {
        left: 55%;
	}
	
	.texts-boxs-bars {
        left: 82%;	
	}
		.text-box-bar,
		.text-box-bar,
		.text-boxs-bars,
		.texts-boxs-bars{
		font-size: 13px;
		
		}
	    .order-tab-page .container .buttons {
            margin-top: 23% !important;
		    margin-bottom: 60px;
    }
	
	.order-tab-page .container .buttons {
	    display: flex;
    justify-content: center;	
	}
	
		}
			
@media only screen and (max-width: 991px) {
	.control-tab{
     width: 66%!important;
    }
   #pwdch,#pwdnew,#pwdold{
      width: 66%;	
    }
	
	.address-text-tab-box {
	margin-top: 40px;
	}
	.right-tab-pas {
	margin-top: 40px;	
	}
	
	.details-tab-box {
	  margin-top: 40px;	
	}
	
	.address-text-tab {
	 margin-top: 50px;	
	}
	
	.order-number{
	  margin-top: 40px;
	  margin-bottom: 40px;	
	}
	
	.shipping-address {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	
	.order-details {
		margin-top: 40px;
	}
	
	
	.rights-tab{
	 margin-top: 40px;
	}
	
	.progress-bars-tab{
        position: absolute;
        top: 149px;
        right: 443px;
        transform: rotate(90deg);
        height: 5px;
        width: 45%;
        background: #e0e0e0;
        z-index: -1;	
	}
	.progress-bar .indicator {
	    width: 44%;	
	}

	.ocean-tab {
    text-align: left;
}
	.text-box-bars {
    top: 22%;
    left: 10%;
	font-size: 13px;
	}
	
	.text-boxs-bars {
    top: 45%;
    left: 10%;
	}
	
	.texts-boxs-bars {
    top: 67%;
	left: 10%;
	}

	.text-box-bar {
	top: -2%;
    left: 60px;	
	font-size: 13px;
	}
	
	.steps .circle {
	
    margin-bottom: 50px;
	}
	
	.order-tab-page .container .steps {
		display: block;
	}
	
	.new-tabs-boxs{
	    margin-bottom: 30px;	
	}
      .steps .progress-bar {
	   width: 45%;
       
		}
			.transit-tab {
			padding: 0px 63px 40px 43px;	
			}
		.steps .circle {
		 margin-right: -21px;	
		}
		
		.order-tab-page .container .buttons {
		 margin-top: 14%;
		}
		.text-box-bar,
		.text-box-bar,
		.text-boxs-bars,
		.texts-boxs-bars{
		font-size: 13px;	
		}
		
.left-card {
  
    margin-bottom: 20px;
	}
	.add-new a {
	  margin-top: 30px;	
	}	
	.shipping-tab-box {
	    display: flow;	
	}
	
	.weps {
	    display: flow;	
	}
	
	.form-checks {
    margin-top: 30px;
}
	
	.btn-tab-weps a {
	 margin: 22px 0;	
	}
	   .total-tab {
        margin: 0px 0px 0px -50px;
    }
	
	.tab-apply {
	margin-left: 0px;

	}
	
	.tab-apply{
	    margin-top: 20px!important;	
	}
	
	.ship-tab {
	    display: flow;	
	}
	
	}

		@media only screen and (max-width: 768px) {
			
			.new-tabs-boxs{
	    margin-bottom: 30px;	
	}
			.new-tab2 tbody, td, tfoot, th, thead, tr {
             padding: 13px 0px;
             }
			
		.steps .progress-bar {
		    width: 48%;	
		}
		.steps .circle {
		 margin-right: -21px;	
		}
			.transit-tab {
			    padding: 0px 51px 40px 43px;	
			}
		
		.container .buttons {
        margin-top: 15% !important;
		}
		.text-box-bar,
		.text-box-bar,
		.text-boxs-bars,
		.texts-boxs-bars{
		font-size: 13px;	
		}
	
		}
		
@media only screen and (max-width: 412px) {
	.new-tabs-boxs{
	    margin-bottom: 30px;	
	}
.box-tab .fa-solid {
    margin-left: 16px;	
}
	.right-side-tab p {
	    padding: 5px 8px 5px 40px;
        font-size: 15px;	
	}
	.left-side-tab p {
	    font-size: 15px;	
	}
	.right-tab-box {
	margin-bottom: 22px;
	}

}

@media only screen and (max-width: 575px) {
	.login .login-form {
    padding: 40px 20px;
  }
   #pwdch,#pwdnew,#pwdold{
    width: 100%;    
    }
	.control-tab{
	width: 100%!important;
	}
}

@media only screen and (max-width: 920px) {
	.new-tabs-boxs{
	    margin-bottom: 30px;	
	}
	
	.right-tab-box {
	    margin-top: 25px;
	}	
	.right-tab-box {
	margin-bottom: 22px;
	}
	
}

@media only screen and (max-width: 468px) {
	.new-tabs-boxs{
	    margin-bottom: 30px;	
	}
	
	.box-tab .fa-solid {
	    margin-left: 20px;	
	}
	.right-tab-box {
	margin-bottom: 22px;
	}
}

@media only screen and (max-width: 420px) {
	.new-tabs-boxs{
	    margin-bottom: 30px;	
	}
	    .box-tab .fa-solid {
        margin-left: 26px;
    }
	
	.total-tab p.total-box {
	    padding: 5px 20px 5px 20px;	
	}
	.right-tab-box {
	margin-bottom: 22px;
	}
}


@media only screen and (max-width: 412px) {
	.new-tabs-boxs{
	    margin-bottom: 30px;	
	}
	
td.text-card-box {
    min-width: 161px;
}
	.right-tab-box {
	margin-bottom: 22px;
	}
}