@keyframes placeHolderShimmer {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

[data-bs-theme="light"] .animate-bg {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    min-height: 12px;
    display: block;
    clear: both;
}

[data-bs-theme="dark"] .animate-bg {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #1a1d21;
    background: linear-gradient(to right, #1a1d21 8%, #212529 18%, #1a1d21 33%);
    background-size: 800px 104px;
    min-height: 12px;
    display: block;
    clear: both;
}

a{
	cursor: pointer;
}

label.is-invalid {
    color: red;
    animation: blink 0.6s infinite alternate;
    font-size: 10px;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

svg.circle-chart-list{ margin: 0 auto; height: 60px!important; width: 60px!important; }

svg.circle-chart{ margin: 0 auto; height: 150px!important; width: 150px!important; }

.circle-chart__percent {
    fill: #7c7f90;
}

.bg-transparent{ background: transparent!important; }
.image-container {
            position: relative;
            display: inline-block;
            max-width: 100%;
            height: auto;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
        }
        .word-box-container {
            position: relative;
        }
        .word-box {
            position: absolute;
            border: 2px solid red;
            line-height: 14px;
            padding: 3px;
            background-color: rgba(255, 0, 0, 0.3);
        }
        .word-box:hover {
            border: 2px solid yellow;
            cursor: pointer;
        }

.colored-toast.swal2-icon-success {
  background-color: #50cd89!important;
}

.colored-toast.swal2-icon-error {
  background-color: #f1416c!important;
}

.colored-toast.swal2-icon-warning {
  background-color: orange !important;
}

.colored-toast .swal2-title {
  color: white;
}

.colored-toast .swal2-close {
  color: white;
}

.colored-toast .swal2-html-container {
  color: white;
}