.shopire_wcpemi-spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
animation: shopire_wcpemi-sk-scaleout 1.0s infinite ease-in-out;
}
@keyframes shopire_wcpemi-sk-scaleout {
0% {
transform: scale(0);
} 100% {
transform: scale(1.0);
opacity: 0;
}
} .shopire_wcpemi-overlay {
background-color: rgba(0,0,0,.6);
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
}
.shopire_wcpemi {
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
min-width: 700px;
max-width: 840px;
min-height: 100px;
height: auto;
background-color: #fff;
z-index: 999999;
border-radius: 5px;
display: none;
}
.shopire_wcpemi-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 0 5px 0 25px;
border-bottom: 1px solid #f0f0f0;
}
.shopire_wcpemi-header__col1 {
display: -ms-flexbox;
display: flex;
-ms-flex: 1;
flex: 1;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
.shopire_wcpemi-header--close {
width: 30px;
font-size: 21px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
margin-left: 25px;
padding: 15px 25px;
cursor: pointer;
}
.shopire_wcpemi-header__title {
font-size: 1.8rem;
font-weight: 500;
color: var(--wf-secondary-color);
}
.shopire_wcpemi-body {
padding: 10px 25px 5px 25px;
}
.shopire_wcpemi-method {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 10px;
}
.shopire_wcpemi-method__item {
cursor: pointer;
font-size: 14px;
padding: 6px 12px;
margin-right: 5px;
border-radius: 4px;
border: 0.1rem solid rgba(189, 189, 189, 0.4);
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.shopire_wcpemi-emis {
display: none;
margin-top: 10px;
}
.shopire_wcpemi-emis.shopire_wcpemi-emis--selected {
display: -ms-flexbox;
display: flex;
}
.shopire_wcpemi-bank {
width: 30%;
height: 280px;
padding-right: 15px;
overflow-x: auto;
}
.shopire_wcpemi-bank__item {
cursor: pointer;
font-size: 15px;
padding: 6px 12px;
margin-bottom: 5px;
border-radius: 4px;
transition: background-color 200ms ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.shopire_wcpemi-plan {
width: 70%;
height: 280px;
overflow-x: auto;
display: none;
}
.shopire_wcpemi-plan.shopire_wcpemi-plan--selected {
display: block;
}
.shopire_wcpemi-plan .shopire_wcpemi-plan__row:first-child {
margin-bottom: 15px;
}
.shopire_wcpemi-plan .shopire_wcpemi-plan__row:first-child .shopire_wcpemi-plan__col {
font-weight: bold;
}
.shopire_wcpemi-plan__row {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
margin-bottom: 10px;
}
.shopire_wcpemi-plan__col {
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
text-align: center;
}
.shopire_wcpemi-footer {
padding: 5px 25px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
}
.shopire_wcpemi-m-emis {
display: none;
} .shopire_wcpemi-variable-message {
text-align: center;
padding: 30px 20px 10px 20px;
}
.shopire_wcpemi-variable-prices {
padding: 6px 10px 20px 10px;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.shopire_wcpemi-variable-prices > div {
padding: 8px 20px;
margin: 10px;
border-radius: 4px;
cursor: pointer;
}
@media ( max-width: 699px ) {
.shopire_wcpemi-overlay {
display: none;
}
.shopire_wcpemi {
width: 100%;
min-width: 100%;
height: 100%;
border-radius: 0;
}
.shopire_wcpemi-header {
padding: 10px 15px;
}
.shopire_wcpemi-body {
padding: 5px 15px;
}
.shopire_wcpemi-emis,
.shopire_wcpemi-emis.shopire_wcpemi-emis--selected {
display: none;
}
.shopire_wcpemi-method__item {
font-size: 13px;
text-align: center;
margin-bottom: 5px;
}
.shopire_wcpemi-m-emis {
display: none;
margin-top: 10px;
padding-bottom: 50px;
overflow-y: auto;
max-height: 73vh;
}
.shopire_wcpemi-m-emis.shopire_wcpemi-m-emis--selected {
display: block;
}
.shopire_wcpemi-m-bank {
margin-bottom: 10px;
padding: 10px 15px;
overflow: hidden;
height: 42px;
background: #f5f5f5;
cursor: pointer;
transition: height 200ms ease-in-out;
}
.shopire_wcpemi-m-bank.shopire_wcpemi-m-bank--selected {
height: auto;
transition: height 200ms ease-in-out;
}
.shopire_wcpemi-m-bank__title {
font-size: 14px;
color: #111;
margin-bottom: 12px;
position: relative;
}
.shopire_wcpemi-m-bank__title::after {
content: "\f067";
font: normal normal normal 14px/1 FontAwesome;
position: absolute;
top: 6px;
right: 0;
color: #555;
}
.shopire_wcpemi-m-bank__title.shopire_wcpemi-m-bank__title--selected::after {
content: "\f068";
}
.shopire_wcpemi-m-plan {
border-top: 1px solid #ccc;
padding-top: 10px;
}
.shopire_wcpemi-m-plan .shopire_wcpemi-m-plan__row:first-child {
margin-bottom: 5px;
}
.shopire_wcpemi-m-plan__row {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.shopire_wcpemi-plan__col {
font-size: 13px;
}
.shopire_wcpemi-m-plan__col {
-ms-flex: 1;
flex: 1;
text-align: center;
font-size: 13px;
}
.shopire_wcpemi-footer {
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padding: 10px 15px;
box-shadow: 0 0 60px rgba(0,0,0,0.1);
}
}
.shopire_wcpemi-method__item.shopire_wcpemi-method__item--selected, .shopire_wcpemi-method__item.shopire_wcpemi-method__item--selected:hover, .shopire_wcpemi-variable-prices > div:hover {
background-color: var(--wf-main-color);
border-color: var(--wf-main-color);
color: #ffffff;
}
.shopire_wcpemi-variable-prices > div:hover span {
color: #fff;
}
.shopire_wcpemi-bank__item:hover, .shopire_wcpemi-method__item:hover, .shopire_wcpemi-bank__item.shopire_wcpemi-bank__item--selected {
background-color: #f0f0f0;
color: #6d6d6d;
}
button.button.shopire_wcpemi-popup-trigger {
margin-left: 5px;
}
.shopire-emi-content {
display: inline-block;
font-size: 1.6rem;
margin: 1rem 0 0.5rem;
}
.shopire-emi-content a.shopire_wcpemi-popup-trigger {
font-weight: 600;
text-decoration: none;
cursor: pointer;
color: inherit;
}
.shopire-emi-content a.shopire_wcpemi-popup-trigger:after {
font-family: 'FontAwesome';
font-style: normal;
content: "\f105";
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
margin-left: 5px;
font-size: 14px;
line-height: 21px;
}