#task-checker-link{
    margin: 0 15px;
}
.task-checker-container{
    width: 300px;
    height: fit-content;
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
}
.task-checker-element{
    position: relative;
    height:50px;
    background-color: #f6f9fc;
    border: 1px solid #e7eaf3;
    border-radius: 3px;
    margin: 10px;
    animation: bounce 1s;
    transition: all 0.3s;
}
.task-checker-loader {
    margin-left: 10px;
    border: 4px solid #fff;
    border-radius: 50%;
    border-top: 4px solid #31ac5f;
    width: 30px;
    height: 30px;
    animation: spinner 2s linear infinite;
    justify-self: end;
}
.loader-in-line{
    border-top: 4px solid #ffc107;
}
.loader-started{
    border-top: 4px solid #377dff;
}
.task-checker-label{
    margin: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}
.label-error{
    color: #dc3545;
}
.label-success{
    color: #28a745;
}
.task-checker-close{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    border: 5px solid #fff;
    transform: translate(-50%, -50%);
    top: 0;
    left: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 11;
    height: 16px;
    width: 16px;
    font-size: 18px;
}
.task-checker-close i{
    color: #e7eaf3;
    transition: all 0.2s;
}
.task-checker-element:hover > .task-checker-close i{
    color: #8c98a4;
}
.task-checker-close i:hover{
    color: #8c98a4;
}
.task-checker-close:active{
    transform: translate(-50%, -50%) scale(0.95);
}
.text-overflow{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
  
@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes bounce {
    0% { transform: translateY(-100%) }
    50% { transform: translateY(10%) }
    100% { transform: translateY(0%) }
}