.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;
    /* transition: padding 0.1s, height 0.1s, margin 0.1s; */
}
.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;
    /* border: 1px solid #000; */
    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;
}

/* animation preview
------------------------------ */
.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;
    /* color: #a7ceaf; */
}

/* animations_in
------------------------------ */
.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}
}

/* animations_out
------------------------------ */
.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)}
}

/*LOADER
--------------------------------------------------*/
.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;
}