.loader-001 {
    background-image: url(../img/gif/loader-001.gif);
    background-position: center;
    background-color: rgba(0, 0, 0, 0.7);
    background-size: 20rem;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 15;
}

.check-001 {
    background-image: url(../img/gif/check.gif);
    background-position: center;
    background-color: rgba(0, 0, 0, 0.7);
    background-size: 20rem;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 15;
}


/* hover */

.hover-1:hover {
    animation-duration: 1s;
    animation-name: rotate-01;
}

@keyframes rotate-01 {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.3);
        box-shadow: 0px 0px 8px black;
        border-radius: 100px;
    }
    100% {
        transform: scale(0.8);
        filter: grayscale(1);
    }
}

.hover-2:hover {
    transform: scale(0.95);
    transition: 0.3s;
    opacity: 1;
    filter: contrast(1);
}

.hover-2 {
    transition: 1s;
    opacity: .7;
}

.scan-40:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.btn-tag:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.btn-back:hover {
    filter: grayscale(0);
    transform: scale(0.8);
    padding: 0;
    transition: 1s;
}

.complete_count:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.complete_count {
    transition: 1s;
}

.btn-grey-100:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.btn-grey-100 {
    transition: 1s;
}

.btn-sc-red:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.btn-sc-red {
    transition: 1s;
}

.btn-sc-grey:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.btn-sc-grey {
    transition: 1s;
}

.btn-sales-history:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.btn-sales-history {
    transition: 1s;
}

.btn-complete:hover {
    transform: scale(0.8);
    transition: 0.5s;
    margin-left: -5vw;
    filter: grayscale(1);
}

.btn-nocomplete {
    transition: 1s;
}

.btn-complete:hover {
    transform: scale(0.8);
    transition: 0.5s;
    margin-left: -5vw;
    filter: grayscale(1);
}

.btn-complete {
    transition: 1s;
}

.btn-process:hover {
    transform: scale(0.8);
    transition: 0.2s;
    margin-right: -5vw;
    filter: grayscale(1);
}

.btn-process {
    transition: 1s;
}

.btn-uom:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.btn-uom {
    transition: 1s;
}

.btn-scan:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.btn-scan {
    transition: 1s;
}

.product-box .btn-cam img:hover {
    transform: scale(0.8);
    transition: 0.5s;
    filter: grayscale(1);
}

.product-box .btn-cam img {
    transition: 1s;
}

.hover-3:hover {
    transform: scale(1.2) rotate(360deg);
    transition: 0.5s;
}
.hover-4{
    filter: grayscale(.1);
    transition: 1s;
}
.hover-4:hover {
    transform: scale(0.9);
    filter: grayscale(1);
    transition: 0.3s;
}

.hover-5:hover {
    animation-duration: 2s;
    animation-name: boom-01;
}

@keyframes boom-01 {
    0% {
        transform: scale(1);
    }
    5% {
        transform: scale(1.3);
        box-shadow: 0px 0px 8px black;
        border-radius: 100px;
    }
    10% {
        transform: scale(0.9);
    }
    15% {
        transform: scale(1.2);
    }
    20% {
        transform: scale(0.8);
    }
    25% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.7);
    }
    100% {
        transform: scale(0.7);
        filter: grayscale(1);
    }
}

.hover-6:hover {
    animation-duration: 2s;
    animation-name: boom-02;
}

@keyframes boom-02 {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.3);
        box-shadow: 5px 0px 16px black;
        border-radius: 100px;
    }
    100% {
        transform: scale(0.7);
        filter: grayscale(1);
    }
}


/* calculator */

.c-hover {
    animation-name: btn-calc-normal;
    animation-duration: 1s;
}

@keyframes btn-calc-normal {
    0% {
        background-color: #da4466;
    }
    80% {
        background-color: #4f4f4f;
    }
}

.c-hover:active {
    animation-duration: 3s;
    animation-name: btn-calc;
}

@keyframes btn-calc {
    5% {
        background-color: #da4466;
    }
}

.select-75:hover {
    animation-duration: 2s;
    animation-name: plop-01;
}

@keyframes plop-01 {
    25% {
        transform: scale(0.8);
        filter: grayscale(1);
    }
    100% {
        transform: scale(1);
        filter: grayscale(0);
    }
}

.win-up {
    animation-name: up;
    animation-duration: 1s;
}

@keyframes up {
    0% {
        bottom: -50vh;
    }
    100% {
        bottom: 0vh;
    }
}

.win-down {
    animation-name: down;
    animation-duration: 1s;
}

@keyframes down {
    0% {
        bottom: 0vh;
    }
    100% {
        bottom: -56vh;
    }
}

.right-s {
    animation-name: move-r;
    animation-duration: 0.5s;
}

@keyframes move-r {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.left-s {
    animation-name: move-l;
    animation-duration: 0.5s;
}

@keyframes move-l {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.type-movement {
    animation-name: opacity-01;
    animation-duration: 0.5s;
}

@keyframes opacity-01 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.calculator-60:active {
    animation-duration: 0.3s;
    animation-name: calculator;
}

@keyframes calculator {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}


/* TABLE TAGS */

.style-tags div tbody tr td:hover {
    animation-name: action-tag;
    animation-duration: 1s;
}

@keyframes action-tag {
    50% {
        background-color: #272727;
    }
}

.tag-item {
    animation-name: tag-plop;
    animation-duration: 1s;
}

@keyframes tag-plop {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* END TABLE TAGS */

.up-002 {
    animation-duration: 0.6s;
    animation-name: up-float;
}

@keyframes up-float {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.down-002 {
    animation-duration: 0.6s;
    animation-name: down-float;
}

@keyframes down-float {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

.appear-001 {
    animation-name: appear;
    animation-duration: 1s;
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hide-001 {
    animation-name: hide;
    animation-duration: 1s;
}

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

a:hover {
    text-decoration: none;
}

.hover-g:hover {
    animation-name: hover-g;
    animation-duration: 1s;
    text-decoration: none;
}

@keyframes hover-g {
    0% {
        transform: scale(1);
        filter: grayscale(0);
    }
    50% {
        transform: scale(0.8);
        filter: grayscale(1);
    }
    100% {
        transform: scale(1);
        filter: grayscale(0);
    }
}

.btn-grey-icon:hover {
    animation-name: btn-icon;
    animation-duration: 1s;
}

@keyframes btn-icon {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
        background-color: #da4466;
    }
    100% {
        transform: scale(1);
    }
}

.btn-header img:active {
    animation-name: push-btn;
    animation-duration: 1s;
}

@keyframes push-btn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

.impersonate-btn img:active {
    animation-name: up-btn;
    animation-duration: 2s;
}

@keyframes up-btn {
    0% {
        filter: grayscale(1);
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        filter: grayscale(0);
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        filter: grayscale(1);
        transform: scale(1);
        opacity: 0.5;
    }
}

.signal-scroll {
    background-image: url(../img/svg/cursor-hand-01.svg);
    background-size: cover;
    display: block;
    height: 8rem;
    width: 8rem;
}

.signal-scroll {
    position: absolute;
    left: 0;
    right: 0;
    top: 30vh;
    margin: auto;
}

.signal-scroll {
    animation-name: anima-scroll;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    transition: 1s;
    opacity: 0;
}

@keyframes anima-scroll {
    0% {
        transform: scale(1);
        /* initial */
        top: 30vh;
        opacity: 0;
    }
    10% {
        transform: scale(0.8);
        opacity: 1;
    }
    20% {
        transform: scale(1);
        top: 25vh;
    }
    30% {
        transform: scale(1);
        /* initial */
        top: 30vh;
    }
    40% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
        top: 25vh;
    }
    60% {
        transform: scale(1);
        /* initial */
        top: 30vh;
    }
    70% {
        transform: scale(0.8);
    }
    80% {
        transform: scale(1);
        top: 25vh;
    }
    90% {
        transform: scale(1);
        /* initial */
        top: 30vh;
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        /* end */
        opacity: 0;
    }
}

.btn-red:active {
    animation-name: hover-btn-red;
    animation-duration: 1s;
}

@keyframes hover-btn-red {
    0% {
        background-color: #da4466;
        color: #ffffff;
        transform: scale(1);
    }
    100% {
        background-color: #4f4f4f;
        color: #ffffff;
        transform: scale(0.8);
    }
}


/* loading screen */

.anima-loading {
    animation: loading-001 2s infinite;
}

@keyframes loading-001 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.ajax-loading{
    background-image: url('../../img/ajax-loader.gif') !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px;
    background-position: center !important;
    min-width: 100px;
}

/* end loading screen */