.icon {
    width:80px;
    height:80px;
    border:4px solid gray;
    border-radius:50%;
    margin:20px auto;
    position:relative;
    box-sizing: content-box;
}
.icon.error {
    border-color:#f27474
}
.icon.error .x-mark {
    position:relative;
    display:block
}
.icon.error .line {
    position:absolute;
    height:5px;
    width:47px;
    background-color:#f27474;
    display:block;
    top:37px;
    border-radius:2px
}
.icon.error .line.left {
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    left:17px
}
.icon.error .line.right {
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right:16px
}
.icon.warning {
    border-color:#f8bb86
}
.icon.warning .body {
    position:absolute;
    width:5px;
    height:47px;
    left:50%;
    top:10px;
    border-radius:2px;
    margin-left:-2px;
    background-color:#f8bb86
}
.icon.warning .dot {
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    margin-left:-3px;
    bottom:10px;
    background-color:#f8bb86
}
.icon.info {
    border-color:#c9dae1
}
.icon.info::before {
    content:"";
    position:absolute;
    width:5px;
    height:29px;
    left:50%;
    bottom:17px;
    border-radius:2px;
    margin-left:-2px;
    background-color:#c9dae1
}
.icon.info::after {
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    margin-left:-3px;
    top:19px;
    background-color:#c9dae1
}
.icon.success {
    border-color:green
}
.icon.success::before,
.icon.success::after {
    content:'';
    border-radius:50%;
    position:absolute;
    width:60px;
    height:120px;
    background:#ffffff;
    transform:rotate(45deg);
}
.icon.success::before {
    border-radius:120px 0 0 120px;
    top:-7px;
    left:-33px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    -webkit-transform-origin:60px 60px;
    transform-origin:60px 60px;
}
.icon.success::after {
    border-radius:0 120px 120px 0;
    top:-11px;
    left:30px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    -webkit-transform-origin:0 60px;
    transform-origin:0 60px
}
.icon.success .placeholder {
    width:80px;
    height:80px;
    border:4px solid rgba(165,220,134,.9);
    border-radius:50%;
    position:absolute;
    left:-4px;
    top:-4px;
    z-index:2;
    box-sizing: content-box;
}
.icon.success .fix {
    width:7px;
    height:90px;
    background-color:#ffffff;
    position:absolute;
    left:27px;
    top:8px;
    z-index:1;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
.icon.success .line {
    height:5px;
    background-color:green;
    display:block;
    border-radius:2px;
    position:absolute;
    z-index:2
}
.icon.success .line.tip {
    width:25px;
    left:14px;
    top:46px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.icon.success .line.long {
    width:47px;
    right:8px;
    top:38px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
.icon.custom {
    background-size:contain;
    border-radius:0;
    border:none;
    background-position:center center;
    background-repeat:no-repeat
}
@-webkit-keyframes showSweetAlert {
    0% {
        transform:scale(.7);
        -webkit-transform:scale(.7)
    }
    45% {
        transform:scale(1.05);
        -webkit-transform:scale(1.05)
    }
    80% {
        transform:scale(.95);
        -webkit-tranform:scale(.95)
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1)
    }
}
@-moz-keyframes showSweetAlert {
    0% {
        transform:scale(.7);
        -webkit-transform:scale(.7)
    }
    45% {
        transform:scale(1.05);
        -webkit-transform:scale(1.05)
    }
    80% {
        transform:scale(.95);
        -webkit-tranform:scale(.95)
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1)
    }
}
@keyframes showSweetAlert {
    0% {
        transform:scale(.7);
        -webkit-transform:scale(.7)
    }
    45% {
        transform:scale(1.05);
        -webkit-transform:scale(1.05)
    }
    80% {
        transform:scale(.95);
        -webkit-tranform:scale(.95)
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1)
    }
}
@-webkit-keyframes hideSweetAlert {
    0% {
        transform:scale(1);
        -webkit-transform:scale(1)
    }
    100% {
        transform:scale(.5);
        -webkit-transform:scale(.5)
    }
}
@-moz-keyframes hideSweetAlert {
    0% {
        transform:scale(1);
        -webkit-transform:scale(1)
    }
    100% {
        transform:scale(.5);
        -webkit-transform:scale(.5)
    }
}
@keyframes hideSweetAlert {
    0% {
        transform:scale(1);
        -webkit-transform:scale(1)
    }
    100% {
        transform:scale(.5);
        -webkit-transform:scale(.5)
    }
}
.showSweetAlert {
    -webkit-animation:showSweetAlert .3s;
    -moz-animation:showSweetAlert .3s;
    animation:showSweetAlert .3s
}
.hideSweetAlert {
    -webkit-animation:hideSweetAlert .2s;
    -moz-animation:hideSweetAlert .2s;
    animation:hideSweetAlert .2s
}
@-webkit-keyframes animateSuccessTip {
    0% {
        width:0;
        left:1px;
        top:19px
    }
    54% {
        width:0;
        left:1px;
        top:19px
    }
    70% {
        width:50px;
        left:-8px;
        top:37px
    }
    84% {
        width:17px;
        left:21px;
        top:48px
    }
    100% {
        width:25px;
        left:14px;
        top:45px
    }
}
@-moz-keyframes animateSuccessTip {
    0% {
        width:0;
        left:1px;
        top:19px
    }
    54% {
        width:0;
        left:1px;
        top:19px
    }
    70% {
        width:50px;
        left:-8px;
        top:37px
    }
    84% {
        width:17px;
        left:21px;
        top:48px
    }
    100% {
        width:25px;
        left:14px;
        top:45px
    }
}
@keyframes animateSuccessTip {
    0% {
        width:0;
        left:1px;
        top:19px
    }
    54% {
        width:0;
        left:1px;
        top:19px
    }
    70% {
        width:50px;
        left:-8px;
        top:37px
    }
    84% {
        width:17px;
        left:21px;
        top:48px
    }
    100% {
        width:25px;
        left:14px;
        top:45px
    }
}
@-webkit-keyframes animateSuccessLong {
    0% {
        width:0;
        right:46px;
        top:54px
    }
    65% {
        width:0;
        right:46px;
        top:54px
    }
    84% {
        width:55px;
        right:0;
        top:35px
    }
    100% {
        width:47px;
        right:8px;
        top:38px
    }
}
@-moz-keyframes animateSuccessLong {
    0% {
        width:0;
        right:46px;
        top:54px
    }
    65% {
        width:0;
        right:46px;
        top:54px
    }
    84% {
        width:55px;
        right:0;
        top:35px
    }
    100% {
        width:47px;
        right:8px;
        top:38px
    }
}
@keyframes animateSuccessLong {
    0% {
        width:0;
        right:46px;
        top:54px
    }
    65% {
        width:0;
        right:46px;
        top:54px
    }
    84% {
        width:55px;
        right:0;
        top:35px
    }
    100% {
        width:47px;
        right:8px;
        top:38px
    }
}
@-webkit-keyframes rotatePlaceholder {
    0% {
        transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg)
    }
    5% {
        transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg)
    }
    12% {
        transform:rotate(-405deg);
        -webkit-transform:rotate(-405deg)
    }
    100% {
        transform:rotate(-405deg);
        -webkit-transform:rotate(-405deg)
    }
}
@-moz-keyframes rotatePlaceholder {
    0% {
        transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg)
    }
    5% {
        transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg)
    }
    12% {
        transform:rotate(-405deg);
        -webkit-transform:rotate(-405deg)
    }
    100% {
        transform:rotate(-405deg);
        -webkit-transform:rotate(-405deg)
    }
}
@keyframes rotatePlaceholder {
    0% {
        transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg)
    }
    5% {
        transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg)
    }
    12% {
        transform:rotate(-405deg);
        -webkit-transform:rotate(-405deg)
    }
    100% {
        transform:rotate(-405deg);
        -webkit-transform:rotate(-405deg)
    }
}
.animateSuccessTip {
    -webkit-animation:animateSuccessTip .75s;
    -moz-animation:animateSuccessTip .75s;
    animation:animateSuccessTip .75s
}
.animateSuccessLong {
    -webkit-animation:animateSuccessLong .75s;
    -moz-animation:animateSuccessLong .75s;
    animation:animateSuccessLong .75s
}
.icon.success.animate::after {
    -webkit-animation:rotatePlaceholder 4.25s ease-in;
    -moz-animation:rotatePlaceholder 4.25s ease-in;
    animation:rotatePlaceholder 4.25s ease-in
}
@-webkit-keyframes animateErrorIcon {
    0% {
        transform:rotateX(100deg);
        -webkit-transform:rotateX(100deg);
        opacity:0
    }
    100% {
        transform:rotateX(0deg);
        -webkit-transform:rotateX(0deg);
        opacity:1
    }
}
@-moz-keyframes animateErrorIcon {
    0% {
        transform:rotateX(100deg);
        -webkit-transform:rotateX(100deg);
        opacity:0
    }
    100% {
        transform:rotateX(0deg);
        -webkit-transform:rotateX(0deg);
        opacity:1
    }
}
@keyframes animateErrorIcon {
    0% {
        transform:rotateX(100deg);
        -webkit-transform:rotateX(100deg);
        opacity:0
    }
    100% {
        transform:rotateX(0deg);
        -webkit-transform:rotateX(0deg);
        opacity:1
    }
}
.animateErrorIcon {
    -webkit-animation:animateErrorIcon .5s;
    -moz-animation:animateErrorIcon .5s;
    animation:animateErrorIcon .5s
}
@-webkit-keyframes animateXMark {
    0% {
        transform:scale(.4);
        -webkit-transform:scale(.4);
        margin-top:26px;
        opacity:0
    }
    50% {
        transform:scale(.4);
        -webkit-transform:scale(.4);
        margin-top:26px;
        opacity:0
    }
    80% {
        transform:scale(1.15);
        -webkit-transform:scale(1.15);
        margin-top:-6px
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1);
        margin-top:0;
        opacity:1
    }
}
@-moz-keyframes animateXMark {
    0% {
        transform:scale(.4);
        -webkit-transform:scale(.4);
        margin-top:26px;
        opacity:0
    }
    50% {
        transform:scale(.4);
        -webkit-transform:scale(.4);
        margin-top:26px;
        opacity:0
    }
    80% {
        transform:scale(1.15);
        -webkit-transform:scale(1.15);
        margin-top:-6px
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1);
        margin-top:0;
        opacity:1
    }
}
@keyframes animateXMark {
    0% {
        transform:scale(.4);
        -webkit-transform:scale(.4);
        margin-top:26px;
        opacity:0
    }
    50% {
        transform:scale(.4);
        -webkit-transform:scale(.4);
        margin-top:26px;
        opacity:0
    }
    80% {
        transform:scale(1.15);
        -webkit-transform:scale(1.15);
        margin-top:-6px
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1);
        margin-top:0;
        opacity:1
    }
}
.animateXMark {
    -webkit-animation:animateXMark .5s;
    -moz-animation:animateXMark .5s;
    animation:animateXMark .5s
}
@-webkit-keyframes pulseWarning {
    0% {
        border-color:#f8d486
    }
    100% {
        border-color:#f8bb86
    }
}
@-moz-keyframes pulseWarning {
    0% {
        border-color:#f8d486
    }
    100% {
        border-color:#f8bb86
    }
}
@keyframes pulseWarning {
    0% {
        border-color:#f8d486
    }
    100% {
        border-color:#f8bb86
    }
}
.pulseWarning {
    -webkit-animation:pulseWarning .75s infinite alternate;
    -moz-animation:pulseWarning .75s infinite alternate;
    animation:pulseWarning .75s infinite alternate
}
@-webkit-keyframes pulseWarningIns {
    0% {
        background-color:#f8d486
    }
    100% {
        background-color:#f8bb86
    }
}
@-moz-keyframes pulseWarningIns {
    0% {
        background-color:#f8d486
    }
    100% {
        background-color:#f8bb86
    }
}
@keyframes pulseWarningIns {
    0% {
        background-color:#f8d486
    }
    100% {
        background-color:#f8bb86
    }
}
.pulseWarningIns {
    -webkit-animation:pulseWarningIns .75s infinite alternate;
    -moz-animation:pulseWarningIns .75s infinite alternate;
    animation:pulseWarningIns .75s infinite alternate
}
