/*---------------------------------------------------------------------
General Animations
---------------------------------------------------------------------*/

/**animation: fadein 1s;**/
@keyframes fadein {
    from {
        opacity: 0;
    }
    to   {
        opacity: 1;
    }
}

/**animation: 750ms popupbox-fadeout ease-out;**/
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to   {
        opacity: 0;
    }
}

/**animation: expandX 500ms ease-in-out forwards;*/
@keyframes expandX {
    0% {
        transform: scaleX(0);
    }
    /*80% {
        transform: scaleX(1.1);
    }*/
    100% {
        transform: scaleX(1);
    }
}

/**animation: expand-y-animation 300ms ease-in-out forwards;*/
/*transform-origin: top center*/
@keyframes expand-y-animation {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}

/*animation: rotate-animation 400ms ease-in-out forwards*/
/*transform-origin: top center*/
@keyframes rotate-animation {
    0% {
        transform: rotateX(-90deg)
    }
    70% {
        transform: rotateX(20deg)
    }
    100% {
        transform: rotateX(0deg)
    }
}

/*animation: down-out-animation 300ms ease-in-out forwards*/
/*transform-origin: center center*/
@keyframes down-out-animation {
    0% {
        transform: translateZ(200px) transLateY(40px)
    }
    80% {
        transform: translateZ(-10px) transLateY(0px)
    }
    100% {
        transform: translateZ(0px) transLateY(0px)
    }
}

/*animation: grow-out-animation 300ms ease-in-out forwards*/
/*transform-origin: top center*/
@keyframes grow-out-animation {
    0% {
        transform: scale(0)
    }
    80% {
        transform: scale(1.1)
    }
    100% {
        transform: scale(1)
    }
}

/*animation: rotate-y-animation 300ms ease-in-out forwards*/
/*transform-origin: top center*/
@keyframes rotate-y-animation {
    0% {
        transform: rotateY(90deg)
    }
    80% {
        transform: rotateY(-10deg)
    }
    100% {
        transform: rotateY(0)
    }
}

@keyframes fall-from-sky-animation {
    from {
        opacity: 0;
        transform: translateY(-400px);
    }

    to {
        opacity: 1;
        transform : translateY(0);
    }
}

/**animation: slide-down-100-animation .25s linear forwards;**/
@keyframes slide-down-100-animation {
    from {
        opacity: 1;
        background-color: #f1f4fb;
    }

    to {
        opacity: 0;
        transform: translateY(100px);
        background-color: transparent;
    }
}

/**animation: slide-up-100-animation .25s linear forwards;**/
@keyframes slide-up-100-animation {
    from {
        opacity: 1;
        background-color: #f1f4fb;
    }

    to {
        opacity: 0;
        transform: translateY(-100px);
        background-color: transparent;
    }
}

/*animation: delete-animation 1s ease-out;*/
@keyframes delete-animation {
    0% {
        opacity: 1;
        transform: rotateZ(0);
    }

    100% {
        opacity: 0;
        transform: translateY(69px) rotateZ(45deg);
    }
}

/**animation: swipe-left 0.5s ease-in forwards;**/
@keyframes swipe-left {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }

    100% {
        opacity: 0;
        transform: translateX(-200%);
    }
}

/*---------------------------------------------------------------------
General
---------------------------------------------------------------------*/

.modtrjct_general.item-hide {
    display: none;
}

.modtrjct_general.item-disabled {
    display: none !important;
}

.modtrjct_general.item-show-flex {
    display: flex;
}

.modtrjct_general.color-positive {
    color: #269320;
}

.modtrjct_general.color-negative {
    color: #FF4136;
}

/*---------------------------------------------------------------------
Spinner
---------------------------------------------------------------------*/

.modtrjct_general.xspinner {
    height:24px;
    width:24px;
    -webkit-animation: xspinner_rotation .6s infinite linear;
    -moz-animation: xspinner_rotation .6s infinite linear;
    -o-animation: xspinner_rotation .6s infinite linear;
    animation: xspinner_rotation .6s infinite linear;
    border-left: 6px solid rgba(0,174,239,.15);
    border-right: 6px solid rgba(0,174,239,.15);
    border-bottom: 6px solid rgba(0,174,239,.15);
    border-top: 6px solid rgba(14, 49, 112,.8);
    border-radius: 100%;
    flex: 0 0 auto;
    margin: 0;
}

@-webkit-keyframes xspinner_rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes xspinner_rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
}
@-o-keyframes xspinner_rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
}
@keyframes xspinner_rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}

.modtrjct_general.xhidden {
    display: none;
}

/*---------------------------------------------------------------------
Buttons
---------------------------------------------------------------------*/

.modtrjct_general.information-button {
    font-size: 1.1rem;
    color: #1a438c;
    border: 0;
    background-color: transparent;
    padding: 0 0;
    cursor: pointer;
    margin: 0 0.5em;
    opacity: 1;
    text-align: left;
    position: relative;
    white-space: nowrap;
}