@keyframes slideIn {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
.log-message {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 10px;
z-index: 10000000; animation: slideIn 0.5s ease forwards; text-align: center;
}
.log-message.show {
display: block;
}
.log-message.danger {
background-color: #E25A4B;
color: white;
}
.log-message.success {
background-color: #7BD4A3;
color: white;
}
.log-message.info {
background-color: #6E6FDA;
color: white;
}
.log-message.hide {
animation: slideOut 0.5s ease forwards; } .ark-loading-container {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
inset: 0;
background-color: rgba(255,255,255,0.5);
z-index: 1000000;
animation: fadeIn 0.3s ease backwards;
}
.ark-loading-container.closing {
opacity: 0;
animation: fadeOut 0.3s ease backwards;
}
.ark-loading {
color: #57B33D;
}
.ark-loading,
.ark-loading:after {
box-sizing: border-box;
}
.ark-loading {
display: inline-block;
width: 120px;
height: 120px;
}
.ark-loading:after {
content: " ";
display: block;
width: calc(100% - 16px);
height: calc(100% - 16px);
margin: 8px;
border-radius: 50%;
border: 10px solid currentColor;
border-color: currentColor transparent currentColor transparent;
animation: loaderSpin 1.2s linear infinite;
}
@keyframes loaderSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
} .ark-steps{
padding: 10px;
}
.ark-steps .step{
display: none;
padding: 30px;
border-radius: 5px;
}
.ark-steps .step-content{
font-size: 20px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 400px;
gap: 30px;
}
.ark-steps .step select{
font-size: 20px;
padding: 10px;
width: 100%;
}
.ark-steps .step-buttons{
display: flex;
justify-content: space-between;
margin-top: auto;
}
.ark-steps .step h2{
font-size: 48px;
text-align: center;
margin: 0;
padding: 0;
} .ark-steps button{
background-color: #57B33D !important;
color: #fff !important;
border: 0 !important;
}
.ark-steps button:hover{
background-color: #000 !important;
} .ark-steps .steps-path{
position: relative;
display: flex;
justify-content: space-between;
align-self: center;
gap: 10px;
margin: 20px 0;
padding: 0 20px;
}
.ark-steps .steps-path::after{
content: '';
height: 2px;
width: calc(100% - 40px);
background-color: #ccc;
position: absolute;
z-index: 1;
top: 19px;
left: 50%;
margin-left: calc(-50% + 20px);
}
.ark-steps .step-dot{
position: relative;
z-index: 2;
border-radius: 100%;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #9B9B9B;
background-color: #FFF;
color: #9B9B9B;
box-shadow: 0 0 0 10px #fff;
}
.ark-steps .step-dot.active{
border-color: #57B33D;
background-color: #57B33D;
color: #FFF;
} .ark-steps .step-radio{
display: flex;
flex-direction: column;
gap: 10px;
}
.ark-steps .step-radio .step-option{
flex: 1;
display: flex;
gap: 10px;
background-color: #f8f8f8;
border: 3px solid transparent;
border-radius: 5px;
font-size: 18px;
font-weight: normal;
padding: 20px;
cursor: pointer;
justify-content: center;
} .ark-steps .step-options{
display: flex;
gap: 10px;
}
.ark-steps .step-options .step-option{
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 10px;
background-color: #f8f8f8;
border: 3px solid transparent;
border-radius: 5px;
padding: 20px;
cursor: pointer;
text-align: center;
}
.ark-steps .step-options .step-option img{
height: 60px;
width: 60px;
object-fit: contain;
}
.ark-steps .step-options .step-option.active{
border-color: #57B33D;
}
.ark-steps .step-options .step-option:hover{
opacity: .65;
background-color: #57b33d52;
} @media (max-width: 576px) {
.ark-steps .step-options{
flex-direction: column;
}
.ark-steps .step-buttons{
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
gap: 10px;
margin-top: 20px;
}
} .step-errors{
text-align: center;
font-weight: bold;
color: #E25A4B;
} .ark-steps .step-results{
gap: 5px;
}
.ark-steps .step-results .step-title,
.ark-steps .step-results .step-info{
font-size: 20px;
text-align: center;
margin: 0;
padding: 0;
}
.ark-steps .step-results img{
display: block;
margin: 0 auto;
height: 160px;
width: 250px;
object-fit: contain;
}
.ark-steps .step-results .step-description{
font-size: 48px;
text-align: center;
margin: 0;
padding: 0;
}