.an-location {
position: fixed;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: stretch;
justify-content: center;
}
.an-container {
box-sizing: border-box;
position: relative;
width: 100%;
font-size: 14px; }
.an-container a {
transition: none;
}
.an-content {
float: left;
width: 100%;
}
.an-content p {
margin: 0;
}
.an-content img {
max-width: 100%;
}
.an-header, .an-footer {
float: left;
width: 100%
}
.an-close-container {
position: absolute;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
z-index: 1;
}
.an-close-button {
z-index: 9;
}
.an-close-icon {
text-decoration: none;
text-align: center;
}
.an-delay {
animation: 0!important;
display: none!important;
}
.an-design-default {
color: #383838;
background-color: #edf6ee; box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 30%);
border-bottom: 6px solid #c60606;
}
.an-design-default a {
color: #383838;
}
.an-design-default .an-close-container a {
color: #a8a8a8;
}
.an-design-success {
color: #ffffff;
background-color: #37c1aa;
}
.an-design-success a {
color: #ffffff;
}
.an-design-info {
color: #ffffff;
background-color: #3473c1;
}
.an-design-info a {
color: #ffffff;
}
.an-design-warning {
color: #000000;
background-color: #ffee9e;
}
.an-design-warning a,
.an-design-warning .an-close-button {
color: #000000;
}
.an-design-danger {
color: #ffffff;
background-color: #d64f62;
}
.an-design-danger a {
color: #ffffff;
} .an-preview-container {
float: left;
width: 80%;
height: 70vh;
min-height: 300px;
margin: 10px 10%;
border: 2px dashed #a7ceaf;
padding: 20px;
background-color: #edf6ee;
display: flex;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
flex-direction: column;
}
.an-preview-title {
font-size: 22px;
line-height: 30px;
}
.an-preview-status {
font-size: 28px;
line-height: 40px;
color: #c60606;
}
.an-preview-devices {
font-size: 20px;
line-height: 30px; } .an-fedein {
animation-name: anFedeIn;
}
@keyframes anFedeIn {
from{ opacity:0; }
to{ opacity:1; }
}
.an-fedein-left {
animation-name: anFedeInLeft;
}
@keyframes anFedeInLeft {
from{opacity:0;transform:translate3d(-100%,0,0)}
to{opacity:1;transform:none}
}
.an-fedein-right {
animation-name: anFedeInRight;
}
@keyframes anFedeInRight {
from{opacity:0;transform:translate3d(100%,0,0)}
to{opacity:1;transform:none}
}
.an-fedein-up {
animation-name: anFedeInUp;
}
@keyframes anFedeInUp{
from{opacity:0;transform:translate3d(0,100%,0)}
to{opacity:1;transform:none}
}
.an-fedein-down {
animation-name: anFedeInDown;
}
@keyframes anFedeInDown{
from{opacity:0;transform:translate3d(0,-100%,0)}
to{opacity:1;transform:none}
}
.an-bounce-in {
animation-name: anBounceIn;
}
@keyframes anBounceIn{
20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;transform:scale3d(.3,.3,.3)}
20%{transform:scale3d(1.1,1.1,1.1)}
40%{transform:scale3d(.9,.9,.9)}
60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}
80%{transform:scale3d(.97,.97,.97)}
to{opacity:1;transform:scale3d(1,1,1)}
}
.an-bounce-in-left {
animation-name: anBounceInLeft;
}
@keyframes anBounceInLeft{
60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;transform:translate3d(-110%,0,0)}
60%{opacity:1;transform:translate3d(25px,0,0)}
75%{transform:translate3d(-10px,0,0)}
90%{transform:translate3d(5px,0,0)}
to{transform:none}
}
.an-bounce-in-right {
animation-name: anBounceInRight;
}
@keyframes anBounceInRight{
60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;transform:translate3d(110%,0,0)}
60%{opacity:1;transform:translate3d(-25px,0,0)}
75%{transform:translate3d(10px,0,0)}
90%{transform:translate3d(-5px,0,0)}
to{transform:none}
}
.an-bounce-in-up {
animation-name: anBounceInUp;
}
@keyframes anBounceInUp{
60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;transform:translate3d(0,110%,0)}
60%{opacity:1;transform:translate3d(0,-20px,0)}
75%{transform:translate3d(0,10px,0)}
90%{transform:translate3d(0,-5px,0)}
to{transform:translate3d(0,0,0)}
}
.an-bounce-in-down {
animation-name: anBounceInDown;
}
@keyframes anBounceInDown{
60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;transform:translate3d(0,-110%,0)}
60%{opacity:1;transform:translate3d(0,25px,0)}
75%{transform:translate3d(0,-10px,0)}
90%{transform:translate3d(0,5px,0)}
to{transform:none}
}
.an-slide-in-left {
animation-name: anSlideInLeft;
}
@keyframes anSlideInLeft{
from{transform:translate3d(-110%,0,0);}
to{transform:translate3d(0,0,0)}
}
.an-slide-in-right {
animation-name: anSlideInRight;
}
@keyframes anSlideInRight{
from{transform:translate3d(110%,0,0);}
to{transform:translate3d(0,0,0)}
}
.an-slide-in-up {
animation-name: anSlideInUp;
}
@keyframes anSlideInUp{
from{transform:translate3d(0,110%,0);}
to{transform:translate3d(0,0,0)}
}
.an-slide-in-down {
animation-name: anSlideInDown;
}
@keyframes anSlideInDown{
from{transform:translate3d(0,-110%,0);}
to{transform:translate3d(0,0,0)}
}
.an-vertical-flip-in {
animation-name: anVerticalFlipIn;
animation-fill-mode: both;
}
@keyframes anVerticalFlipIn{
60%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{transform:rotateX(-90deg)}
60%{transform:rotateX(40deg)}
to{transform:none}
}
.an-unfold-down-in {
animation-name: anUnfoldDownIn;
animation-fill-mode: both;
transform-origin: 50% 0%;
}
@keyframes anUnfoldDownIn{
0%{transform:perspective(350px) rotateX(-90deg)}
to{transform:none}
} .an-fedeout {
animation-name: anFedeOut;
animation-fill-mode: both;
opacity:0;
}
@keyframes anFedeOut {
from{ opacity:1; }
to{ opacity:0; }
}
.an-fedeout-left {
animation-name: anFedeOutLeft;
animation-fill-mode: both;
opacity:0;
}
@keyframes anFedeOutLeft {
from{opacity:1;transform:none}
to{opacity:0;transform:translate3d(-100%,0,0)}
}
.an-fedeout-right {
animation-name: anFedeOutRight;
animation-fill-mode: both;
opacity:0;
}
@keyframes anFedeOutRight {
from{opacity:1;transform:none}
to{opacity:0;transform:translate3d(100%,0,0)}
}
.an-fedeout-up {
animation-name: anFedeOutUp;
animation-fill-mode: both;
opacity:0;
}
@keyframes anFedeOutUp{
from{opacity:1;transform:none}
to{opacity:0;transform:translate3d(0,-100%,0)}
}
.an-fedeout-down {
animation-name: anFedeOutDown;
animation-fill-mode: both;
opacity:0;
}
@keyframes anFedeOutDown{
from{opacity:1;transform:none}
to{opacity:0;transform:translate3d(0,100%,0)}
}
.an-slide-out-left {
animation-name: anSlideOutLeft;
animation-fill-mode: both;
}
@keyframes anSlideOutLeft{
from{transform:translate3d(0,0,0);}
to{transform:translate3d(-110%,0,0)}
}
.an-slide-out-right {
animation-name: anSlideOutRight;
animation-fill-mode: both;
}
@keyframes anSlideOutRight{
from{transform:translate3d(0,0,0);}
to{transform:translate3d(110%,0,0)}
}
.an-slide-out-up {
animation-name: anSlideOutUp;
animation-fill-mode: both;
}
@keyframes anSlideOutUp{
from{transform:translate3d(0,0,0);}
to{transform:translate3d(0,-110%,0)}
}
.an-slide-out-down {
animation-name: anSlideOutDown;
animation-fill-mode: both;
}
@keyframes anSlideOutDown{
from{transform:translate3d(0,0,0);}
to{transform:translate3d(0,110%,0)}
} .an-loader-container {
display: none;
float: right;
width: 100%;
height: 200px;
}
.an-loader {
color: var(--maincolor);
font-size: 80px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: -40px auto;
top: 50%;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.an-page-loader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9999999;
}