.swa_loader {
display: none;
width: 20px;
height: 22px;
}
.swa_loader:after {
content: " ";
display: block;
width: 15px;
height: 15px;
margin: 2px;
border-radius: 50%;
border: 6px solid #8c2621;
border-color: #8c2621 transparent #8c2621 transparent;
animation: swa_loader 1.2s linear infinite;
}
@keyframes swa_loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 20px;
height: 20px;
border-radius: 50%;
display: none;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
margin: 2px;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill 0.4s ease-in-out 0.4s forwards,
scale 0.3s ease-in-out 0.9s both;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
.crossmark__circle.animateElement {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #ff0000;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.crossmark.animateElement {
width: 20px;
height: 20px;
border-radius: 50%;
display: none;
stroke-width: 2;
stroke: #ff0000;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #ff0000;
animation: fillred .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.crossmark__check.animateElement {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
.cross__path.animateElement {
stroke: #ffffff;
stroke-dasharray: 48;
stroke-dashoffset: 48;
transform-origin: 50% 50% 0;
}
.cross__path--right.animateElement {
animation: 0.3s ease 0.8s normal forwards 1 running stroke;
}
.cross__path--left.animateElement {
animation: 1s ease 0.8s normal forwards 1 running stroke;
}
@keyframes fillred {
100% {
box-shadow: inset 0px 0px 0px 30px #ff0000;
}
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
.wrapper{
display: inline-flex;
height: 60px;
width: 400px;
align-items: center;
justify-content: space-evenly;
padding: 5px;
margin-bottom:1em;
}
.wrapper .option{
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot{
height: 16px;
width: 16px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before{
position: absolute;
content: "";
top: 20%;
left: 20%;
width: 10px;
height: 10px;
background: #0099CC;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"]{
display: none;
}
#option-1:checked:checked ~ .option-1,
#vies_checkbox:checked:checked ~ .vies_checkbox{
border-color: #0099CC;
background: #0099CC;
}
#option-1:checked:checked ~ .option-1 .dot,
#vies_checkbox:checked:checked ~ .vies_checkbox .dot{
background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#vies_checkbox:checked:checked ~ .vies_checkbox .dot::before{
opacity: 1;
transform: scale(1);
}
.wrapper .option span{
font-size: 16px;
color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#vies_checkbox:checked:checked ~ .vies_checkbox span{
color: #fff;
}
.company-details {
margin-bottom:1em;
}
#customer_login .u-column1.prijava,
#customer_login .u-column2.registracija {
float: none;
margin: 0 auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 20%;
}
.woocommerce-account .avada-woocommerce-myaccount-heading {
display: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .swa-dashboard-orders-front {
border-radius: 15px;
-webkit-box-shadow: 1px 1px 9px 2px rgba(0, 0, 0, 0.13);
box-shadow: 1px 1px 9px 2px rgba(0, 0, 0, 0.13);
padding: 1.5em;
}
.profile-photo img {
margin: 0 auto !important;
border-radius: 15px;
aspect-ratio: 1/1;
object-fit: cover;
}
.profile-photo {
margin-bottom: 1em;
}
.stat {
border-radius: 15px;
-webkit-box-shadow: 1px 1px 9px 2px rgba(0, 0, 0, 0.13);
box-shadow: 1px 1px 9px 2px rgba(0, 0, 0, 0.13);
padding: 1em;
}
.stat-heading {
font-weight: bold;
}
.woocommerce-account .stat {
width: 50%;
height: 230px;
}
.woocommerce-account .stat-container {
display: flex;
gap: 10px;
margin-bottom: 1.5em;
}
.stat-container .stat-heading {
margin-bottom: 0.7em;
}
.woocommerce-account .second-stat {
padding: 1em;
}
.woocommerce-account .bars {
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-start;
height: 100%;
gap: 15px;
}
.bar-container {
width: 100%;
}
.bar-container .bar {
width: 100%;
height: 5px;
background: #dfdfdf;
}
.bar-container .bar-info {
display: flex;
justify-content: space-between;
}
.bar-container .bar-title {
font-weight: bold;
font-size: 13px;
}
.bar-container .bar-amount {
font-size: 13px;
margin-right: 2px;
}
.woocommerce-account .swa-dashboard-orders-front {
padding: 0.5em 1em;
}
@media only screen and (max-width: 1000px) {
.woocommerce-account
.swa-dashboard-orders-front
.table-container
table
table {
margin: auto;
border-collapse: collapse;
overflow-x: auto;
display: block;
width: fit-content;
max-width: 100%;
}
}
.woocommerce-account .swa-dashboard-orders-front thead {
background-color: #353a41;
color: white;
}
.woocommerce-account .swa-dashboard-orders-front thead th {
padding: 10px 5px;
}
.woocommerce-account .swa-dashboard-orders-front thead th:first-child {
border-radius: 5px 0 0 5px;
}
.woocommerce-account .swa-dashboard-orders-front thead th:last-child {
border-radius: 0 5px 5px 0;
}
.woocommerce-account .swa-dashboard-orders-front td,
.woocommerce-account .swa-dashboard-orders-front td a,
.woocommerce-account .swa-dashboard-orders-front td span {
font-size: 15px !important;
padding: 10px 0;
}
.woocommerce-account .dashboard-sidebar-account {
text-align: center;
font-weight: bold;
font-size: 15px;
margin-bottom: 2em;
}
.woocommerce-account .dashboard-sidebar-account a {
font-size: 12px;
}
.woocommerce-account .woocommerce-MyAccount-content {
display: inline-block;
float: left;
margin: 0 0 0 4%;
width: 75%;
padding: 0.8em;
border: none;
padding-top: 3px;
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
.woocommerce-MyAccount-navigation-link--dashboard
a {
background-color: #eaeaea;
border-radius: 5px;
text-align: center;
margin-bottom: 1em;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
padding: 0;
border-top: 1px solid #eee;
font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
list-style: none;
padding-bottom: 0;
line-height: 2em;
color: #242424;
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.is-active
a:before {
opacity: 1;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
padding: 10px 5px;
display: block;
color: #242424;
border: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:before {
margin-right: 10px;
opacity: 0.25;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover:before {
opacity: 1;
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.woocommerce-MyAccount-navigation-link--dashboard
a svg {
width:15px;
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.woocommerce-MyAccount-navigation-link--dashboard
a:before {
font-family: "FontAwesome";
content: "\f0e4";
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.woocommerce-MyAccount-navigation-link--orders
a:before {
font-family: "FontAwesome";
content: "\f291";
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.woocommerce-MyAccount-navigation-link--downloads
a:before {
font-family: "FontAwesome";
content: "\f1c6";
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.woocommerce-MyAccount-navigation-link--edit-address
a:before {
font-family: "FontAwesome";
content: "\f015";
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.woocommerce-MyAccount-navigation-link--payment-methods
a:before {
font-family: "FontAwesome";
content: "\f09d";
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.woocommerce-MyAccount-navigation-link--edit-account
a:before {
font-family: "FontAwesome";
content: "\f007";
}
.woocommerce-account
.woocommerce-MyAccount-navigation
ul
li.woocommerce-MyAccount-navigation-link--customer-logout
a:before {
font-family: "FontAwesome";
content: "\f08b";
}
.woocommerce-account .woocommerce-MyAccount-content h2 {
font-size: 25px;
text-align: center;
font-weight: 600;
}
.woocommerce-account p.order-again {
text-align: right;
}
.woocommerce-account .woocommerce-EditAccountForm input[type="submit"] {
margin-top: 50px;
float: right;
}
@media (max-width: 640px) {
.shop_table {
overflow-y: scroll !important;
height: 273px !important;
display: block;
}
.circle-wrap {
width: 100px !important;
height: 100px !important;
}
.circle-wrap .circle .mask, .circle-wrap .circle .fill {
width: 100px !important;
height: 100px !important;
}
.circle-wrap .circle .mask {
clip: rect(0px, 100px, 100px, 50px) !important;
}
.mask .fill {
clip: rect(0px, 50px, 100px, 0px) !important;
}
.circle-wrap .inside-circle {
width: 90px !important;
height: 90px !important;
}
.inside-circle .order-status {
font-size: 12px !important;
}
.stat-container .stat-heading {
font-size: 15px !important;
}
}