/* BsCard custom classes */

.card.clickable:hover {
    cursor: pointer;
}

/* BsModal custom classes */

.bs-show-modal {
    top: 0;    
    left: 0;
    position: fixed;
    z-index: 1055;
    overflow-x:hidden;
    overflow-y:auto;
    outline:0;
    opacity: 1;
    transition: opacity 0.3s;
}

.bs-hide-modal {
    top: 0;
    left: 0;
    position: fixed;
    z-index: -1055;
    opacity: 0;
    transition: opacity 0.3s;
}

/* BsToast custom classes */

.bs-toast-progressbar {
    height: 4px;
    background-color: #008080;
    -o-transition: width .1s linear;
    -webkit-transition: width .1s linear;
    transition: width .1s linear;
}

.toast-container {
    z-index: 5000;
}

.toast {
    animation: fadeIn 1s;
    opacity: 1;
}

.toast.error {
    background-color: rgba(255, 100, 100, .85);
    color: #fff;
}

.toast.error > .toast-header {
    background-color: rgba(255, 100, 100, .85);
    color: #fff;
}

.toast.error .bs-toast-progressbar {
    background-color: #884b4b;
}

.toast.success {
    background-color: rgba(154, 227, 151, .85);
}

.toast.success > .toast-header {
    background-color: rgba(154, 227, 151, .85);
}

.toast.success .bs-toast-progressbar {
    background-color: #4b884b;
}

.toast.info {
    background-color: rgba(161, 226, 255, .85);
}

.toast.info > .toast-header {
    background-color: rgba(161, 226, 255, .85);
}

.toast.info .bs-toast-progressbar {
    background-color: #4b4b88;
}

.toast.warning {
    background-color: rgba(241, 236, 134, .85);
}

.toast.warning > .toast-header {
    background-color: rgba(241, 236, 134, .85);
}

.toast.warning .bs-toast-progressbar {
    background-color: #88884b;
}

/* ANIMATIONS */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    100% {
        transform: translateY(38px);
        opacity: 1;
    }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(0);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(38px);
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    100% {
        transform: translateY(-38px);
        opacity: 1;
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(-38px);
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(-25%);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%);
        opacity: 1;
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(-25%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(-50%);
        opacity: 1;
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(25%);
        opacity: 0;
    }

    100% {
        transform: translateX(50%);
        opacity: 1;
    }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(25%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(50%);
        opacity: 1;
    }
}

.animate-fast {
    animation-duration: .2s;
    animation-timing-function: linear;
}

.animate {
    animation-duration: .5s;
    animation-timing-function: linear;
}

.animate-slow {
    animation-duration: 1s;
    animation-timing-function: linear;
}

.fade-in {
    animation-name: fadeIn;
}

.fade-out {
    animation-name: fadeOut;
}

.slide-down {
    animation-name: slideDown;
}

.slide-up {
    animation-name: slideUp;
}

.slide-right {
    animation-name: slideRight;
}

.slide-left {
    animation-name: slideLeft;
}

/* BsDropdown custom classes */

.dropdown-menu-center {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}