1534 lines
30 KiB
CSS
1534 lines
30 KiB
CSS
:root{
|
|
--primary-color:#002b60;
|
|
--secondary-color:#001d41;
|
|
--blue-color:#00B4D5;
|
|
--pink-color:#ec407a;
|
|
}
|
|
*{
|
|
font-family: 'DM Sans', sans-serif; font-size:15px; line-height:29px;
|
|
}
|
|
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea{
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
img{
|
|
max-width:100%;
|
|
height:auto;
|
|
}
|
|
.alert{
|
|
width:100%;
|
|
}
|
|
#already_err{
|
|
color: #ff0000;
|
|
}
|
|
.parsley-errors-list {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
padding-top: 8px;
|
|
margin-bottom: 0;
|
|
color: #ff0000;
|
|
}
|
|
.custom-btn{
|
|
display: inline-block;
|
|
background-color: var(--blue-color);
|
|
color:#ffffff;
|
|
width:200px;
|
|
padding:10px;
|
|
text-align:center;
|
|
text-transform:uppercase;
|
|
border-radius:5px;
|
|
margin-top:15px;
|
|
cursor: pointer;
|
|
}
|
|
.success-message{
|
|
background: #cfeecf;
|
|
border: 1px solid green;
|
|
color: #000;
|
|
padding: 5px 10px;
|
|
display: block;
|
|
margin-top: 20px;
|
|
}
|
|
.custom-btn:hover{
|
|
background-color:var(--pink-color);
|
|
color:#ffffff;
|
|
}
|
|
.secondary-btn{
|
|
background-color:var(--pink-color);
|
|
}
|
|
.secondary-btn:hover{
|
|
background-color: var(--blue-color);
|
|
}
|
|
@media (min-width: 1200px){
|
|
.container, .container-lg, .container-md, .container-sm, .container-xl {
|
|
max-width: 1200px!important;
|
|
}}
|
|
.font-bold{
|
|
font-weight: 700;
|
|
}
|
|
a{
|
|
text-decoration:none!important;
|
|
}
|
|
.heading-font{
|
|
font-size:30px;
|
|
}
|
|
/* ----------------header---------------- */
|
|
.cart-menu img{ margin-right:5px; }
|
|
.header{
|
|
background-color:#ffffff;
|
|
height:105px;
|
|
}
|
|
.header ul{
|
|
display: flex;
|
|
align-items: baseline;
|
|
list-style-type:none;
|
|
margin-bottom:0;
|
|
padding-left:0;
|
|
}
|
|
.header ul li{
|
|
margin:0 10px;
|
|
}
|
|
.header ul li a{
|
|
color: #000000;
|
|
text-transform:uppercase;
|
|
font-weight:500;
|
|
padding:0 5px;
|
|
}
|
|
.header ul li a:hover{
|
|
color:var(--blue-color);
|
|
}
|
|
.header1 ul{
|
|
justify-content: flex-end;
|
|
margin-right:30px;
|
|
}
|
|
.header2 ul{
|
|
justify-content: flex-start;
|
|
margin-left:30px;
|
|
}
|
|
.header .nav-button{
|
|
background: var(--blue-color);
|
|
color: #ffffff;
|
|
display: inline-block;
|
|
border-radius: 50px;
|
|
padding:3px 12px;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
}
|
|
.header .nav-button:hover{
|
|
color:#fff;
|
|
background:var(--pink-color)
|
|
}
|
|
.header .nav-button img{
|
|
margin-right: 5px;
|
|
margin-bottom:2px;
|
|
}
|
|
.custom-logo-link{
|
|
padding:6px 15px;
|
|
display:inline-block;
|
|
}
|
|
.nav{
|
|
background-color: transparent;
|
|
padding:6px;
|
|
}
|
|
.nav-main{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.nav button{
|
|
height: 35px;
|
|
width:35px;
|
|
margin-top: 30px;
|
|
border: 1px solid var(--blue-color);
|
|
background-color: transparent;
|
|
color: var(--blue-color);
|
|
}
|
|
.nav-hidden ul{
|
|
list-style-type: none;
|
|
line-height: 50px;
|
|
padding-left:0;
|
|
margin:0;
|
|
}
|
|
.nav-hidden ul li{
|
|
border-bottom:1px solid #eee;
|
|
}
|
|
.nav-hidden li:last-child{
|
|
background: #e2e8f0;
|
|
border-bottom-width:0;
|
|
}
|
|
.nav-hidden ul li a{
|
|
color: #334155;
|
|
padding:10px 10px;
|
|
display:block;
|
|
}
|
|
|
|
#id section{
|
|
display: none;
|
|
}
|
|
@media only screen and (min-width: 992px) {
|
|
.nav{
|
|
display: none !important;
|
|
}
|
|
.nav-hidden{
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 992px){
|
|
.header, #demo {
|
|
display: none;
|
|
}
|
|
}
|
|
#demo{
|
|
position: absolute;
|
|
width:100%;
|
|
background:#ffffff;
|
|
z-index:99;
|
|
margin-top:15px;
|
|
}
|
|
/* ----------------footer---------------- */
|
|
.footer{
|
|
background-color: var(--primary-color);
|
|
padding-top:45px;
|
|
}
|
|
.footer .footer1, .footer .footer2, .footer .footer3{
|
|
padding:15px 35px 20px;
|
|
}
|
|
.footer ul{
|
|
list-style-type: none;
|
|
}
|
|
.footer ul li a{
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
.footer1 .footer-title{
|
|
font-size: 18px;
|
|
}
|
|
.footer1 .footer-title, .footer1 p{
|
|
color:#fff;
|
|
}
|
|
.footer1 p{
|
|
font-size:14px;
|
|
}
|
|
.footer1 .col-2{
|
|
width: 50px !important;
|
|
margin-top:6px!important
|
|
}
|
|
.footer1 img{
|
|
margin-top:5px;
|
|
}
|
|
.footer2, .footer3{
|
|
border-left: 1px solid #fff;
|
|
}
|
|
.footer2{
|
|
text-align: center;
|
|
}
|
|
.footer2 ul{
|
|
display: flex;
|
|
justify-content:space-between;
|
|
margin:25px auto;
|
|
max-width:150px;
|
|
padding-left:0;
|
|
}
|
|
.footer2 ul li a{
|
|
display:inline-block;
|
|
width: 35px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-size:18px;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
color:#002B60;
|
|
}
|
|
.footer2 ul li a:hover{
|
|
background:var(--pink-color);
|
|
color:#ffffff;
|
|
}
|
|
.footer2 ul li img{
|
|
height:20px;
|
|
}
|
|
.footer2 p{
|
|
color: #fff;
|
|
line-height: 30px;
|
|
margin-top: 30px;
|
|
}
|
|
.footer3 .col-lg-6{
|
|
line-height: 40px;
|
|
}
|
|
.footer3 ul{
|
|
padding-left:0;
|
|
}
|
|
.footer3 a:hover{
|
|
color: var(--blue-color);
|
|
}
|
|
.footer-copy{
|
|
border-top: 1px solid #fff;
|
|
text-align: center;
|
|
color:#ffffff;
|
|
padding:15px 0;
|
|
}
|
|
/*Cart*/
|
|
@media (min-width: 1100px){
|
|
.cart .cart-inner .container{
|
|
max-width:900px!important;
|
|
}
|
|
}
|
|
.cart .quantity{ display:flex; align-items:center; font-weight: 600;}
|
|
.cart .quantity span:last-child{ margin-right:10px; }
|
|
.cart .quantity .price{ margin-right:10px; }
|
|
.heading-border{
|
|
font-size:30px;
|
|
text-align:center;
|
|
position: relative;
|
|
margin-bottom:55px;
|
|
}
|
|
.heading-border::before{
|
|
content:"";
|
|
position:absolute;
|
|
background:#000;
|
|
width:40px;
|
|
height:2px;
|
|
left:48.5%;
|
|
bottom:-15px;
|
|
}
|
|
.cart, .cart .header{
|
|
background:#F9FAFB;
|
|
}
|
|
.cart .product-name{
|
|
font-weight:700;
|
|
font-size:23px;
|
|
}
|
|
.cart .product-price{
|
|
font-weight:700;
|
|
font-size:23px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.quantity{
|
|
position: relative;
|
|
margin:0 auto;
|
|
}
|
|
.quantity, .quantity input{
|
|
width:80px;
|
|
}
|
|
.quantity .plus, .quantity .minus{
|
|
position:absolute;
|
|
right:0;
|
|
background-color: transparent;
|
|
border-width:0;
|
|
}
|
|
.quantity .plus{
|
|
top:0;
|
|
}
|
|
.quantity input{
|
|
height:45px;
|
|
border:2px solid #A1A1A1;
|
|
background-color:transparent;
|
|
border-radius:5px;
|
|
padding:10px;
|
|
}
|
|
.quantity .minus{
|
|
bottom:0;
|
|
}
|
|
.remove-product a{
|
|
color:var(--pink-color);
|
|
text-transform:uppercase;
|
|
font-weight: 500;
|
|
font-size:13px;
|
|
margin-top:15px;
|
|
text-decoration:none;
|
|
}
|
|
.text-right-price{
|
|
text-align:right;
|
|
}
|
|
.credit-point{
|
|
font-size:14px;
|
|
margin:-3px 0 3px;
|
|
}
|
|
.credits-number{
|
|
font-weight:500;
|
|
font-size:17px;
|
|
}
|
|
.credit-price{
|
|
font-size:15px;
|
|
}
|
|
.subtotal-label{
|
|
font-weight:500;
|
|
text-transform: uppercase;
|
|
}
|
|
.subtotal-price{
|
|
font-weight:700;
|
|
font-size:18px;
|
|
}
|
|
#card-button{
|
|
background: var(--blue-color);
|
|
color: #fff;
|
|
border-width: 0;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
}
|
|
#card-button:hover{
|
|
background: var(--pink-color);
|
|
}
|
|
.checkout-btn{
|
|
text-align: right;
|
|
}
|
|
body.checkout .select2-container, body.checkout span.selection{
|
|
padding:0!important;
|
|
}
|
|
body.checkout .select2-container--default .select2-selection--single{
|
|
border: 2px solid #E5E7EB;
|
|
height:40px;
|
|
}
|
|
body.checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
|
|
line-height: 35px!important;
|
|
font-weight:400;
|
|
}
|
|
body.checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
|
|
top: 6px!important;
|
|
}
|
|
.checkout-btn button{
|
|
background: var(--blue-color);
|
|
color:#fff;
|
|
border-width:0;
|
|
padding:10px 20px;
|
|
border-radius:5px;
|
|
}
|
|
.checkout-btn button:hover{
|
|
background:var(--pink-color);
|
|
}
|
|
.coupon-input{
|
|
padding:5px 15px;
|
|
border-radius:5px;
|
|
}
|
|
.coupon-field button{
|
|
background:transparent;
|
|
border-width:0;
|
|
margin-left:5px;
|
|
}
|
|
.shopping-btn{
|
|
color: #000000;
|
|
border-width: 0;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
display:inline-block;
|
|
text-align:center;
|
|
border:2px solid var(--primary-color);
|
|
}
|
|
.shopping-btn:hover{
|
|
color:#ffffff;
|
|
background:var(--primary-color);
|
|
}
|
|
/*Membership*/
|
|
.membership .mem-icontitle{
|
|
font-size: 22px;
|
|
}
|
|
.evo-membership .row{
|
|
text-align:center;
|
|
}
|
|
.membership-img .mem-icontitle{
|
|
max-width:200px;
|
|
margin:5px auto 10px;
|
|
}
|
|
.membership-img>div{
|
|
border-right:1px solid #000;
|
|
padding-top:30px;
|
|
padding-bottom:15px;
|
|
}
|
|
.membership-img>div:last-child{
|
|
border-right-width:0;
|
|
}
|
|
.presale-offer-section{
|
|
background:#f8f8f4;
|
|
padding: 80px 0 80px 0;
|
|
}
|
|
@media (min-width: 768px){
|
|
.membership-img{
|
|
margin-top:30px!important;
|
|
}
|
|
}
|
|
@media (max-width: 768px){
|
|
.membership-img>div{
|
|
border-right-width:0;
|
|
border-bottom:1px solid #000;
|
|
}
|
|
}
|
|
.credit-offer-box{
|
|
background-color:#ffffff;
|
|
border-radius:5px;
|
|
text-align:center;
|
|
padding:50px 15px 30px 15px;
|
|
position: relative;
|
|
}
|
|
.credit-offer-box .offer-tag{
|
|
position:absolute;
|
|
top:-23px;
|
|
right:20px;
|
|
}
|
|
.credit-offer-box .pack-title{
|
|
font-size: 20px;
|
|
margin-top: 18px;
|
|
}
|
|
.credit-offer-box .pack-price{
|
|
font-size:45px;
|
|
display:flex;
|
|
justify-content:center;
|
|
margin:15px 0 5px;
|
|
}
|
|
.credit-offer-box .pack-credit-number{
|
|
margin-top:10px;
|
|
font-size:17px;
|
|
margin-bottom:5px;
|
|
}
|
|
.credit-offer-box .pack-credit-point{
|
|
font-size: 14px;
|
|
margin-top:-10px;
|
|
margin-bottom:8px;
|
|
}
|
|
.credit-offer-box .pack-submit, .work-submit{
|
|
color: #fff!important;
|
|
padding:5px 20px 5px 20px;
|
|
border-radius:10px;
|
|
font-size: 16px;
|
|
display:inline-block;
|
|
margin-top:20px;
|
|
cursor: pointer;
|
|
}
|
|
.credit-offer-box .pack-submit.blue, .credit-offer-box .pack-submit.pink:hover, .work-submit.pink:hover{
|
|
background-color: var(--blue-color);
|
|
}
|
|
.credit-offer-box .pack-submit.blue:hover, .credit-offer-box .pack-submit.pink, .work-submit.pink{
|
|
background-color: var(--pink-color);
|
|
}
|
|
.second-pack .credit-offer-box{
|
|
margin-top:60px;
|
|
}
|
|
.how-works{
|
|
position: relative;
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position:right top;
|
|
}
|
|
@media (max-width: 1300px){
|
|
.how-works{
|
|
background-position:140% 0%;
|
|
}
|
|
}
|
|
.work-section {
|
|
counter-reset: my-sec-counter;
|
|
}
|
|
.work-section>div{
|
|
position: relative;
|
|
padding-left:50px;
|
|
}
|
|
.work-section ul{
|
|
margin-top:20px;
|
|
}
|
|
.work-section li{
|
|
position: relative;
|
|
list-style-type:none;
|
|
margin-left: 50px;
|
|
margin-bottom: 25px;
|
|
counter-increment: my-sec-counter;
|
|
font-size:17px;
|
|
}
|
|
.work-section li::before{
|
|
content: counter(my-sec-counter);
|
|
position: absolute;
|
|
background: #4a515a;
|
|
color: #fff;
|
|
width: 33px;
|
|
height: 33px;
|
|
line-height: 33px;
|
|
text-align: center;
|
|
left: -52px;
|
|
top:0;
|
|
border-radius: 50px;
|
|
z-index: 2;
|
|
}
|
|
.work-section li::after{
|
|
content: "";
|
|
position: absolute;
|
|
background: #adadad;
|
|
width: 2px;
|
|
height: 110%;
|
|
top: 23px;
|
|
left: -36px;
|
|
}
|
|
.work-section li:last-child::after{
|
|
height: 17%;
|
|
}
|
|
.work-section>div::before{
|
|
content: "";
|
|
position: absolute;
|
|
border: 1px solid var(--primary-color);
|
|
background: #fff;
|
|
border-radius: 50px;
|
|
width: 20px;
|
|
height: 20px;
|
|
top: 4px;
|
|
left: 10px;
|
|
z-index: 1;
|
|
}
|
|
.work-section>div::after{
|
|
content: "";
|
|
position: absolute;
|
|
background: #6E6D68;
|
|
width: 2px;
|
|
height: 110%;
|
|
top: 23px;
|
|
left:20px;
|
|
}
|
|
.work-section>div:last-child:after {
|
|
height: 60%;
|
|
}
|
|
.contact-section{
|
|
background:var( --secondary-color);
|
|
}
|
|
.question-title h6{
|
|
color:#ffffff;
|
|
font-size:18px;
|
|
}
|
|
.contact-btn{
|
|
color: #fff;
|
|
|
|
background-image: none;
|
|
margin: 0 0 0 0;
|
|
padding: 12px 25px 12px 25px;
|
|
border-style: solid;
|
|
border-width: 1px 1px 1px 1px;
|
|
border-color: #00b4d5;
|
|
border-radius:10px;
|
|
font-size: 16px;
|
|
}
|
|
.contact-btn:hover{
|
|
background-color: var(--blue-color);
|
|
color:#ffffff;
|
|
}
|
|
@media (max-width: 999px){
|
|
.question-title{
|
|
margin-bottom:30px;
|
|
}
|
|
}
|
|
/*-----------------------------Checkout Start------------------------- */
|
|
.checkout input[type=radio]{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.back-card a{
|
|
color: var(--blue-color);
|
|
padding-top: 10px;
|
|
padding-left: 5px;
|
|
}
|
|
.back-card a:hover{
|
|
color:var(--pink-color);
|
|
}
|
|
.back-card a:hover i{
|
|
border-color:var(--pink-color);
|
|
}
|
|
.back-card h4{
|
|
margin-top:10px;
|
|
font-size:22px;
|
|
}
|
|
.back-card .arrow-left {
|
|
transform: rotate(135deg);
|
|
-webkit-transform: rotate(135deg);
|
|
border: solid #00B4D5;
|
|
border-width: 0 2px 2px 0;
|
|
display: inline-block;
|
|
padding: 3px;
|
|
}
|
|
.edit-address{
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
|
|
border-radius: 5px;
|
|
margin: 0 !important;
|
|
padding: 13px;
|
|
height: 60px;
|
|
align-items: center;
|
|
}
|
|
.edit-address a{
|
|
color: #D81B60;
|
|
font-weight: 500;
|
|
}
|
|
.edit-address p{
|
|
margin-bottom: 0;
|
|
color: #6B7280;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
.edit-address span{
|
|
padding-left: 20px !important;
|
|
font-weight: 500;
|
|
}
|
|
.address-form{
|
|
background: #FFFFFF;
|
|
border: 2px solid #00B4D5;
|
|
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
|
|
border-radius: 5px;
|
|
padding:20px 30px 30px 30px;
|
|
}
|
|
.address-form label{
|
|
font-weight: 500;
|
|
color: #6B7280;
|
|
}
|
|
.address-form span, .credit-card span, .google-pay span {
|
|
padding-left: 10px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
}
|
|
.checkout input[type="text"]{
|
|
width:100%;
|
|
background: #FFFFFF;
|
|
border: 2px solid #E5E7EB;
|
|
border-radius: 5px;
|
|
height: 40px;
|
|
padding:5px 10px;
|
|
}
|
|
.checkout select{
|
|
width:100%;
|
|
height: 40px;
|
|
border: 2px solid #E5E7EB;
|
|
border-radius: 5px;
|
|
color: #6B7280;
|
|
padding:5px 10px;
|
|
}
|
|
.checkout input[type="text"]:focus, .checkout input[type="text"]:hover, .checkout select:focus, .checkout select:hover{
|
|
border-color:#00B4D5;
|
|
}
|
|
.address-form button{
|
|
border: 2px solid #E5E7EB;
|
|
background-color: #fff;
|
|
height: 40px;
|
|
width:100px;
|
|
text-align:center;
|
|
font-weight:500;
|
|
color: #374151;
|
|
margin-top: 15px;
|
|
border-radius:5px;
|
|
text-transform:uppercase;
|
|
}
|
|
.address-form button:hover{
|
|
background-color:var(--blue-color);
|
|
border-color:var(--blue-color);
|
|
color:#ffffff;
|
|
}
|
|
.address-form input[type=submit]{
|
|
width:100px;
|
|
background-color: var(--blue-color);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
border-radius:5px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
border: none;
|
|
height: 40px;
|
|
margin-top: 15px;
|
|
text-transform:uppercase;
|
|
}
|
|
.address-form input[type=submit]:hover{
|
|
background-color:var(--pink-color);
|
|
}
|
|
.payment-title{
|
|
margin-top:40px;
|
|
font-size:22px;
|
|
}
|
|
.payment-method{
|
|
padding: 40px 0px;
|
|
}
|
|
.credit-card{
|
|
background: #FFFFFF;
|
|
border: 2px solid #00B4D5;
|
|
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
|
|
border-radius: 5px;
|
|
padding:25px 30px 25px 30px;
|
|
margin-top:25px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.google-pay{
|
|
padding:0 10px;
|
|
margin-bottom:35px;
|
|
}
|
|
.google-pay-content{
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
|
|
border-radius: 5px;
|
|
margin-top: 40px !important;
|
|
margin-bottom: 40px;
|
|
padding:10px;
|
|
}
|
|
.order-summary{
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
|
|
border-radius: 5px;
|
|
padding: 30px;
|
|
margin-bottom:50px;
|
|
}
|
|
.order-summary h4{
|
|
font-size: 22px;
|
|
}
|
|
.order-summary .order1{
|
|
padding-bottom: 20px;
|
|
}
|
|
.order-summary .order2{
|
|
border-top: 1px solid #6B7280;
|
|
padding:20px 0 10px;
|
|
}
|
|
.order-summary .evo{
|
|
padding-bottom: 10px;
|
|
}
|
|
.order-summary .item1{
|
|
padding-top: 20px;
|
|
border-top: 1px solid #6B7280;
|
|
}
|
|
.order-summary .item1 p, .order-summary .item2 p, .order-summary .item3 p{
|
|
line-height: 15px;
|
|
color: #6B7280;
|
|
font-weight: 500;
|
|
}
|
|
.order-summary .order-button p{
|
|
color: #6B7280;
|
|
}
|
|
.order-summary input[type="submit"]{
|
|
width: 100%;
|
|
background-color: #00B4D5;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
border: none;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
text-transform:uppercase;
|
|
}
|
|
.checkout .product-name{
|
|
font-weight:500;
|
|
font-size:18px;
|
|
}
|
|
.checkout .product-price, .checkout .product-total{
|
|
font-weight:500;
|
|
}
|
|
.checkout-inner .order-summary-main{
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
/*----------------------------- Checkout End------------------------- */
|
|
|
|
/*--------------Payment Sucessful Start ----------*/
|
|
.payment-box{
|
|
border: 2px solid #AEBCCD;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin: 50px 0px;
|
|
}
|
|
.payment-head{
|
|
text-align: center;
|
|
}
|
|
.payment-head img{
|
|
background-color: rgba(35, 162, 109, 0.12);
|
|
padding: 12px;
|
|
border-radius:50%;
|
|
}
|
|
.payment-head.alert img{
|
|
background-color: rgb(255 213 210);
|
|
}
|
|
.payment-head .sucessful-heading{
|
|
font-weight: 500;
|
|
font-size: 30px;
|
|
color: #11C8B0;
|
|
margin:30px 0 0;
|
|
}
|
|
.payment-head p{
|
|
color: #475569;
|
|
}
|
|
.aside{
|
|
padding-top: 20px;
|
|
}
|
|
.aside-content{
|
|
border-top: 2px dashed #E6F1FF;
|
|
border-bottom: 2px dashed #E6F1FF;
|
|
padding: 20px 0px;
|
|
text-align: left;
|
|
}
|
|
@media (max-width: 999px){
|
|
.aside-content{
|
|
border-bottom-width: 0;
|
|
}
|
|
.aside-content-last{
|
|
border-bottom-width:2px;
|
|
}
|
|
}
|
|
.payment .label{
|
|
font-weight: 500;
|
|
color: #475569;
|
|
}
|
|
.order{
|
|
padding: 20px 0px;
|
|
border-bottom: 2px dashed #E6F1FF;
|
|
}
|
|
.total-list{
|
|
padding: 20px 0px;
|
|
border-bottom: 2px dashed #E6F1FF;
|
|
}
|
|
.sub-total-main{
|
|
padding: 20px 0px;
|
|
}
|
|
.dashboard button{
|
|
width: 100%;
|
|
background-color: var(--blue-color);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
border: none;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
text-transform:uppercase;
|
|
margin-top:30px;
|
|
}
|
|
.dashboard button:hover{
|
|
background-color:var(--pink-color);
|
|
}
|
|
.payment .order-heading{
|
|
font-size:18px;
|
|
margin-bottom:20px;
|
|
}
|
|
.payment .product-name{
|
|
font-size:20px;
|
|
font-weight: 500;
|
|
}
|
|
.payment .credit-point{
|
|
margin-bottom:-5px;
|
|
}
|
|
.payment .order-total{
|
|
font-weight:600;
|
|
font-size:19px;
|
|
}
|
|
/*--------------Payment Sucessful End ----------*/
|
|
|
|
/*-------------------Login---------------------*/
|
|
.account-width {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 14px 28px rgba(0,0,0,0.15);
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 768px;
|
|
max-width: 100%;
|
|
min-height: 510px;
|
|
margin:0 auto;
|
|
}
|
|
.account-width h1{
|
|
text-align: center;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.account-width form{
|
|
background:#ffffff;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.account-width input[type="text"], .account-width input[type="email"], .account-width input[type="password"], .account-width input[type="tel"], .forgetpassword input[type="email"], .forgetpassword input[type="number"], .forgetpassword input[type="text"], .forgetpassword input[type="password"]{
|
|
width: 100%;
|
|
height:50px;
|
|
border:2px solid #BEBEBF;
|
|
padding:5px 10px;
|
|
border-radius:5px;
|
|
}
|
|
.account-width label{
|
|
display: block;
|
|
}
|
|
.forget-pwd{
|
|
color:var(--primary-color);
|
|
}
|
|
.forget-pwd:hover{
|
|
color:var(--pink-color);
|
|
}
|
|
.account-width .signin-btn, .account-width .signup-btn, .forgetpassword button{
|
|
width:100%;
|
|
border-width:0;
|
|
background-color:var(--blue-color);
|
|
color:#ffffff;
|
|
padding:7px 10px;
|
|
border-radius:5px;
|
|
text-transform:uppercase;
|
|
}
|
|
.account-width .signin-btn:hover, .account-width .signup-btn:hover, .forgetpassword button:hover{
|
|
background-color: var(--pink-color);
|
|
}
|
|
.account-width .login-btn{
|
|
width:100%;
|
|
border:2px solid #ffffff;
|
|
background-color: transparent;
|
|
border-radius: 5px;
|
|
padding:7px 15px;
|
|
color:#ffffff;
|
|
margin-top:15px;
|
|
text-transform:uppercase;
|
|
}
|
|
.account-width .login-btn:hover{
|
|
background-color:var(--pink-color);
|
|
color:#ffffff;
|
|
border-color:var(--pink-color);
|
|
}
|
|
|
|
.form-container {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
transition: all 0.6s ease-in-out;
|
|
}
|
|
|
|
.sign-in-container {
|
|
left: 0;
|
|
width: 50%;
|
|
z-index: 2;
|
|
padding:30px 30px;
|
|
}
|
|
|
|
.account-width.right-panel-active .sign-in-container {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.sign-up-container {
|
|
left: 0;
|
|
width: 50%;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
padding:30px 30px;
|
|
}
|
|
|
|
.account-width.right-panel-active .sign-up-container {
|
|
transform: translateX(100%);
|
|
opacity: 1;
|
|
z-index: 5;
|
|
animation: show 0.6s;
|
|
}
|
|
|
|
@keyframes show {
|
|
0%, 49.99% {
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
50%, 100% {
|
|
opacity: 1;
|
|
z-index: 5;
|
|
}
|
|
}
|
|
|
|
.overlay-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
width: 50%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
transition: transform 0.6s ease-in-out;
|
|
z-index: 100;
|
|
}
|
|
|
|
.account-width.right-panel-active .overlay-container{
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.login-overlay {
|
|
background: #002B60;
|
|
background: -webkit-linear-gradient(180deg, #00B4D5 0%, #002B60 100%);
|
|
background: linear-gradient(180deg, #00B4D5 0%, #002B60 100%);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: 0 0;
|
|
color: #FFFFFF;
|
|
position: relative;
|
|
left: -100%;
|
|
height: 100%;
|
|
width: 200%;
|
|
transform: translateX(0);
|
|
transition: transform 0.6s ease-in-out;
|
|
}
|
|
|
|
.account-width.right-panel-active .login-overlay {
|
|
transform: translateX(50%);
|
|
}
|
|
|
|
.overlay-panel {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding: 0 40px;
|
|
text-align: center;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 50%;
|
|
transform: translateX(0);
|
|
transition: transform 0.6s ease-in-out;
|
|
}
|
|
|
|
.overlay-left {
|
|
transform: translateX(-20%);
|
|
}
|
|
|
|
.account-width.right-panel-active .overlay-left {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.overlay-right {
|
|
right: 0;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.account-width.right-panel-active .overlay-right {
|
|
transform: translateX(20%);
|
|
}
|
|
|
|
/*-----Recovery Account-----*/
|
|
.recovery-account {
|
|
box-shadow: 0 14px 28px rgba(0,0,0,0.15);
|
|
border-radius:5px;
|
|
max-width:500px;
|
|
margin:0 auto 30px auto;
|
|
padding:30px 30px 45px;
|
|
}
|
|
.forgetpassword h1{
|
|
text-align:center;
|
|
font-size: 28px;
|
|
margin-bottom:30px;
|
|
}
|
|
|
|
/*Dashboard*/
|
|
/* Style the tab */
|
|
.tab {
|
|
float: left;
|
|
border: 1px solid #ccc;
|
|
background-color: #f1f1f1;
|
|
width:20%;
|
|
|
|
}
|
|
|
|
/* Style the buttons that are used to open the tab content */
|
|
.tab .tablinks {
|
|
display: block;
|
|
background-color: inherit;
|
|
color: black;
|
|
padding: 22px 16px;
|
|
width: 100%;
|
|
border: none;
|
|
outline: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
font-weight:500;
|
|
}
|
|
.tab button svg{
|
|
margin-right:8px;
|
|
}
|
|
.tab button svg path{
|
|
fill:#000000;
|
|
}
|
|
|
|
/* Create an active/current "tab button" class */
|
|
.tab button.active, .tab button:hover {
|
|
color:#EB008B;
|
|
}
|
|
.tab button.active svg path, .tab button:hover svg path{
|
|
fill:#EB008B;
|
|
}
|
|
|
|
/* Style the tab content */
|
|
.tabcontent {
|
|
float: left;
|
|
border: 1px solid #ccc;
|
|
width: 80%;
|
|
border-left: none;
|
|
padding:30px 30px 20px;
|
|
}
|
|
|
|
/*-----------------dashboard- start--------------*/
|
|
.dash-head{
|
|
background: #FFFFFF;
|
|
border: 1px solid #71D6E9;
|
|
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16), 0px 0px 1px rgba(9, 30, 66, 0.31);
|
|
border-radius: 5px;
|
|
width: 100% !important;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.dash-head h1{
|
|
color: #00B4D5;
|
|
font-size: 50px;
|
|
}
|
|
.dash-head p{
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
color: #475569;
|
|
|
|
}
|
|
.dash-table-head{
|
|
font-weight: 600;
|
|
font-size:22px;
|
|
color: #475569;
|
|
margin-bottom:0;
|
|
}
|
|
.table-design, .table-design tr{
|
|
|
|
border: 2px solid #EEF0F4;
|
|
text-align: center;
|
|
}
|
|
.table-design th{
|
|
line-height: 50px;
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
color: #475569;
|
|
}
|
|
.table-design td:nth-child(1){
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
color: #475569;
|
|
}
|
|
.table-design td:nth-child(3), .table-design td:nth-child(4){
|
|
font-weight: 500;
|
|
font-size: 22px;
|
|
color: #21BB5E;
|
|
}
|
|
.table-design tr:nth-child(1){
|
|
background: #F9FBFC;
|
|
border-radius: 10px 10px 0px 0px;
|
|
line-height: 5;
|
|
}
|
|
|
|
.table-design p:nth-child(1){
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
color: #475569;
|
|
margin-bottom: 0;
|
|
padding-top: 20px;
|
|
}
|
|
.table-design p:nth-child(2){
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
color: #475569;
|
|
}
|
|
.table-white .order-total div{
|
|
line-height: 40px;
|
|
}
|
|
.table-white .custom-font td{
|
|
font-size: 15px!important;
|
|
line-height: 40px!important;
|
|
}
|
|
.table-design .credit-trans .red-content {
|
|
background: #FFE9EB;
|
|
color: #EC4C5B;
|
|
}
|
|
|
|
.table-design .credit-trans{
|
|
font-size: 15px;
|
|
width: 65px;
|
|
height: 32px;
|
|
line-height:30px;
|
|
background: #EAFFF2;
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
display:block;
|
|
margin:0 auto;
|
|
}
|
|
.table-design .fa-caret-up:before, .table-design .fa-sort-desc:before{
|
|
font-size: 19px;
|
|
}
|
|
.table-design button:first-child{
|
|
border: 2px solid #E5E7EB;
|
|
border-radius: 5px;
|
|
font-size: 17px;
|
|
background-color: white;
|
|
color: #374151;
|
|
margin-right: 20px;
|
|
line-height: 32px;
|
|
width: 100px;
|
|
font-weight: 500;
|
|
}
|
|
.table-design button:nth-child(2){
|
|
background: #00B4D5;
|
|
border: 2px solid #00B4D5;
|
|
border-radius: 5px;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
line-height: 30px;
|
|
width: 95px;
|
|
}
|
|
.table-design .table-foot{
|
|
font-size: 14px !important;
|
|
letter-spacing: 0.1px;
|
|
color: #94A3B8 !important;
|
|
line-height: 80px;
|
|
}
|
|
|
|
.dash-foot{
|
|
background: #F9FBFC;
|
|
border-radius: 10px;
|
|
height: 40px;
|
|
}
|
|
.dash-foot div{
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 45px;
|
|
color: #4F545E;
|
|
text-align: center;
|
|
}
|
|
.dashboard-maintitle{
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
color: #475569;
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
/*-----------------dashboard- end--------------*/
|
|
|
|
/*----------------dashboard-order-start--------------*/
|
|
|
|
.table-white{
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 2px solid #EEF0F4;
|
|
border-radius: 10px
|
|
}
|
|
.table-white img,.table-grey img{
|
|
vertical-align: text-top;
|
|
}
|
|
.table-white th{
|
|
padding-top: 20px;
|
|
padding-bottom: 10px;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
color: #4F545E;
|
|
}
|
|
.table-white td{
|
|
line-height: 50px;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
color: #475569;
|
|
}
|
|
.table-white tr:first-of-type{
|
|
|
|
background: #F9FBFC;
|
|
border-radius: 10px 10px 0px 0px;
|
|
}
|
|
.table-white i{
|
|
border: 2px solid #EB008B;
|
|
border-radius: 290px;
|
|
color: #EB008B;
|
|
width: 18px;
|
|
height: 18px;
|
|
line-height: 17px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
.table-grey{
|
|
background-color: #7A7A7A;
|
|
color: #fff;
|
|
border-bottom: 2px dashed #B1B1B1;
|
|
vertical-align:top;
|
|
}
|
|
.table-grey p:first-child{
|
|
font-size: 15px;
|
|
font-weight: 100;
|
|
margin-top: 10px;
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
.table-grey p:nth-child(2){
|
|
font-size: 15px;
|
|
font-weight: 100;
|
|
margin-bottom:0;
|
|
}
|
|
.table-grey p:nth-child(3){
|
|
font-size: 14px;
|
|
font-weight: 100;
|
|
}
|
|
.table-grey td{
|
|
line-height:50px;
|
|
color: #fff;
|
|
}
|
|
|
|
.table-grey i{
|
|
color: white;
|
|
border: 2px solid #fff;
|
|
}
|
|
.table-grey li::marker{
|
|
padding:0;
|
|
}
|
|
.table-bottom{
|
|
border-bottom: none;
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (min-width: 992px) {
|
|
.table-grey{
|
|
display: none
|
|
}
|
|
}
|
|
|
|
.memberaccess .dash-icon{
|
|
display:inline-block;
|
|
width:35px;
|
|
}
|
|
|
|
/*----------------dashboard-order-end-------------*/
|
|
|
|
/*----------------dashboard-information-start--------------*/
|
|
.information h4{
|
|
font-weight: 500;
|
|
font-size: 25px;
|
|
color: #475569;
|
|
}
|
|
.information label{
|
|
font-weight: 500;
|
|
font-size:18px;
|
|
color: #6B7280;
|
|
}
|
|
|
|
.information input[type=text], .information input[type=tel], .information input[type=password], .information select{
|
|
border: 3px solid #E5E7EB;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
height: 60px;
|
|
padding:10px;
|
|
}
|
|
.information .select2-container{
|
|
width: 100%!important;
|
|
}
|
|
.information .select2-selection__arrow{
|
|
top: 15px!important;
|
|
right: 10px!important;
|
|
}
|
|
.information .select2-selection__rendered{
|
|
line-height: 34px!important;
|
|
}
|
|
.information .select2-selection--single{
|
|
border: 3px solid #E5E7EB!important;
|
|
border-radius: 8px;
|
|
width: 100%!important;
|
|
height: 60px!important;
|
|
padding:10px;
|
|
display:block!important;
|
|
}
|
|
.information input[type=radio]{
|
|
width: 45px;
|
|
height: 20px;
|
|
}
|
|
.information button{
|
|
width: 198px;
|
|
height: 50px;
|
|
left: 534px;
|
|
background: #00B4D5;
|
|
border: none;
|
|
color: white;
|
|
border-radius: 5px;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.password h3{
|
|
margin-top:50px;
|
|
margin-bottom:20px;
|
|
font-weight: 600;
|
|
font-size: 26px;
|
|
color: #475569;
|
|
}
|
|
|
|
|
|
#pswd_info {
|
|
background:#ffffff;
|
|
box-shadow: 0 14px 28px rgba(0,0,0,0.15);
|
|
color: #000;
|
|
right: -300px;
|
|
position: absolute;
|
|
top:-59px;
|
|
z-index: 99;
|
|
border-radius:5px;
|
|
padding-bottom:10px;
|
|
}
|
|
#pswd_info h4{
|
|
display: block;
|
|
font-size: 16px;
|
|
letter-spacing: 0;
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
border-bottom:1px solid #ddd;
|
|
}
|
|
#pswd_info ul {
|
|
margin:0;
|
|
}
|
|
#pswd_info ul li {
|
|
padding: 5px 5px 0;
|
|
}
|
|
|
|
.valid {
|
|
/* background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/vq43s2wib/valid.png") no-repeat scroll 2px 6px; */
|
|
color: green;
|
|
line-height: 21px;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.invalid {
|
|
/* background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px 6px; */
|
|
color: red;
|
|
line-height: 21px;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
#pswd_info::before {
|
|
background: #ffffff;
|
|
content: "";
|
|
height: 25px;
|
|
left: -13px;
|
|
margin-top: -12.5px;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: rotate(45deg);
|
|
width: 25px;
|
|
}
|
|
#pswd_info {
|
|
display:none;
|
|
}
|
|
.show-password1{ position: relative;}
|
|
.show-password1 #pswd_info{
|
|
top:-55px;
|
|
right:-310px;
|
|
}
|
|
.credit-table-heading{
|
|
margin:30px 0 20px;
|
|
}
|
|
.credit-table{
|
|
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
|
|
max-width:500px;
|
|
}
|
|
.credit-table table{
|
|
border-collapse: collapse;
|
|
width:100%;
|
|
}
|
|
.credit-table table, .credit-table table th, .credit-table table td{
|
|
border:1px solid #ddd;
|
|
}
|
|
.credit-table table th, .credit-table table td{
|
|
padding:8px;
|
|
}
|
|
.credit-table table th:last-child, .credit-table table td:last-child{
|
|
text-align: center;
|
|
}
|
|
.credit-table thead th{
|
|
background:#03a5c3;
|
|
color:#ffffff;
|
|
font-weight:600;
|
|
}
|
|
.credit-table tbody tr:nth-child(even) td{
|
|
background:#dff2f5;
|
|
} |