.an-location {
    position: fixed;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
}

.an-container {
    position: relative;
    width: 100%;
    font-size: 14px;
    transition: padding 0.1s, height 0.1s, margin 0.1s;
}

.an-container a {
    transition: none;
}

.an-content {

}

.an-content p {
    margin: 0;
}

.an-header, .an-footer {
    float: left;
    width: 100%
}

.an-close-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

.an-close-icon {
    text-decoration: none;
    text-align: center;
}

.an-close-container.top_left,
.an-close-container.bottom_left {
    justify-content: flex-end;
}

.an-close-container.top_center,
.an-close-container.bottom_center {
    justify-content: center;
}

.an-close-container.top_right,
.an-close-container.bottom_right {
    justify-content: flex-start;
}
.an-close-container.custom {
    position: absolute;
    z-index: 1;
}

.an-delay {
    animation: 0!important;
    display: none!important;
}

.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(-100vw,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(100vw,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,100vh,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,-100vh,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(-100vw,0,0);}
    to{transform:translate3d(0,0,0)}
}

.an-slide-in-right {
    animation-name: anSlideInRight;
}
@keyframes anSlideInRight{
    from{transform:translate3d(100vw,0,0);}
    to{transform:translate3d(0,0,0)}
}

.an-slide-in-up {
    animation-name: anSlideInUp;
}
@keyframes anSlideInUp{
    from{transform:translate3d(0,100vh,0);}
    to{transform:translate3d(0,0,0)}
}

.an-slide-in-down {
    animation-name: anSlideInDown;
}
@keyframes anSlideInDown{
    from{transform:translate3d(0,-100vh,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(-100vw,0,0)}
}

.an-slide-out-right {
    animation-name: anSlideOutRight;
    animation-fill-mode: both;
}
@keyframes anSlideOutRight{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(100vw,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,-100vh,0)}
}

.an-slide-out-down {
    animation-name: anSlideOutDown;
    animation-fill-mode: both;
}
@keyframes anSlideOutDown{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(0,100vh,0)}
}