.arnica-widget-wrapper {
    position:fixed !important;
    top:0 !important;
    width: 600px !important;
    height: 100% !important;
    text-align: center !important;
    background: white !important;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.06) !important;
}

.arnica-widget-wrapper.arnica-widget-wrapper-center {
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

.arnica-widget-wrapper.arnica-widget-wrapper-hide.arnica-widget-wrapper-center {
    display: none !important;
}

.arnica-widget-wrapper.arnica-widget-wrapper-show.arnica-widget-wrapper-center {
    display: block !important;
}

.arnica-widget-wrapper-show.arnica-widget-wrapper-left {
    left: 0 !important;
    animation-name: slideinLeft !important;
}

.arnica-widget-wrapper-show.arnica-widget-wrapper-right {
    right: 0 !important;
    animation-name: slideinRight !important;
}

.arnica-widget-wrapper-hide.arnica-widget-wrapper-left {
    left: -718px !important;
    animation-name: slideoutLeft !important;
}

.arnica-widget-wrapper-hide.arnica-widget-wrapper-right {
    right: -718px !important;
    animation-name: slideoutRight !important;
}

.arnica-widget-wrapper {
    animation-duration: .4s !important
}

#arnica-preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#arnica-loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #777777;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#arnica-loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #888888;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#arnica-loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #999999;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
.arnica-layer {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}
.arnica-layer.arnica-layer-show {
    display: block;
}
.arnica-layer.arnica-layer-hide {
    display: none;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes slideinRight {
    from { right: -700px }
    to { right: 0 }
}
@-webkit-keyframes slideinRight {
    from { right: -700px }
    to { right: 0 }
}
@-moz-keyframes slideinRight {
    from { right: -700px }
    to { right: 0 }
}
@-o-keyframes slideinRight {
    from { right: -700px }
    to { right: 0 }
}
@keyframes slideinLeft {
    from {left: -700px}
    to {left: 0}
}
@-webkit-keyframes slideinLeft {
    from {left: -700px}
    to {left: 0}
}
@-moz-keyframes slideinLeft {
    from {left: -700px}
    to {left: 0}
}
@-o-keyframes slideinLeft {
    from {left: -700px}
    to {left: 0}
}

@keyframes slideoutRight {
    from {right: 0}
    to {right: -700px}
}
@-webkit-keyframes slideoutRight {
    from {right: 0}
    to {right: -700px}
}
@-moz-keyframes slideoutRight {
    from {right: 0}
    to {right: -700px}
}
@-o-keyframes slideoutRight {
    from {right: 0}
    to {right: -700px}
}
@keyframes slideoutLeft {
    from {left: 0}
    to {left: -700px}
}
@-webkit-keyframes slideoutLeft {
    from {left: 0}
    to {left: -700px}
}
@-moz-keyframes slideoutLeft {
    from {left: 0}
    to {left: -700px}
}
@-o-keyframes slideoutLeft {
    from {left: 0}
    to {left: -700px}
}