@charset "UTF-8";

@import 'react-toastify/scss/variables';
@import 'react-toastify/scss/toastContainer';
@import 'react-toastify/scss/toast';
@import 'react-toastify/scss/theme';
@import 'react-toastify/scss/closeButton';
@import 'react-toastify/scss/progressBar';
@import 'react-toastify/scss/icons';
// entrance and exit animations
// @import 'react-toastify/scss/animations/bounce.scss';
// @import 'react-toastify/scss/animations/zoom.scss';
@import 'react-toastify/scss/animations/flip.scss';
// @import 'react-toastify/scss/animations/slide.scss';
@import 'react-toastify/scss/animations/spin.scss';

.Toastify {
    .Toastify__toast-container.Toastify__toast-container--top-right {
        top: 3em;
    }

    .Toastify__toast-icon {
        margin-right: 5px;
    }
}

#TB_ajaxContent {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}

#progress-bar-container {
    width: 100%;
    margin: auto;
    transition: opacity 0.3s;

    &.invisible {
        opacity: 0;
    }

    .progress-bar {
        height: 4px;
        background-color: rgba(5, 114, 206, 0.2);
        width: 100%;
        overflow: hidden;
    }

    .progress-bar-value {
        width: 100%;
        height: 100%;
        background-color: rgb(5, 114, 206);
        animation: progressBarAnimation 2s infinite linear;
        transform-origin: 0% 50%;
    }
}

@keyframes progressBarAnimation {
    0% {
        transform: translateX(0) scaleX(0);
    }
    30% {
        transform: translateX(0) scaleX(0.3);
    }
    100% {
        transform: translateX(100%) scaleX(0.3);
    }
}

.text-error {
    color: #b32d2e !important;
}