/* Color */
:root {
    --white-color: #fff;
    --gray-color: gray;
}

.container {
    margin: 20px;
    padding: 20px;
    border: 1px solid gray;
    border-radius: 5px;
}

.mb-3 {
    padding: 20px;
}

.card-text {
    text-align: center;
    font-size: 20px;
}

.message {
    margin-bottom: 5px;
}

.picture {
    display: flex;
    justify-content: center;
}

.separator{
    margin: 30px;
}

.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    position: absolute;
    top: 400px;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    animation: rotate 3000ms linear infinite;
    animation-fill-mode: forwards;
}

.quad {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 60px;
    height: 60px;
    border: 8px solid transparent;
    border-radius: 50%;
    border-left-color: rgb(3, 200, 226);
    animation-fill-mode: forwards;
    opacity: 0;
}

.quad.show {
    opacity: 1;
}

.quad-1{
    animation: rotate1 1200ms linear infinite;
}

.quad-2{
    animation: rotate2 1200ms linear infinite;
}

.quad-3{
    animation: rotate3 1200ms linear infinite;
}
.quad-4{
    animation: rotate4 1200ms linear infinite;
}

@keyframes rotate{
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}
@keyframes rotate1{
    0%{
        transform: rotateZ(0deg);
    }
    12.5%{
        transform: rotateZ(90deg);
    }
    25%{
        transform: rotateZ(180deg);
    }
    37.5%{
        transform: rotateZ(270deg);
    }
    50%{
        transform: rotateZ(310deg);
    }
    62.5%{
        transform: rotateZ(330deg);
    }
    75%{
        transform: rotateZ(340deg);
    }
    87.5%{
        transform: rotateZ(350deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}

@keyframes rotate2{
    0%{
        transform: rotateZ(0deg);
    }
    12.5%{
        transform: rotateZ(10deg);
    }
    25%{
        transform: rotateZ(90deg);
    }
    37.5%{
        transform: rotateZ(180deg);
    }
    50%{
        transform: rotateZ(270deg);
    }
    62.5%{
        transform: rotateZ(330deg);
    }
    75%{
        transform: rotateZ(340deg);
    }
    87.5%{
        transform: rotateZ(350deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}
@keyframes rotate3{
    0%{
        transform: rotateZ(0deg);
    }
    12.5%{
        transform: rotateZ(10deg);
    }
    25%{
        transform: rotateZ(20deg);
    }
    37.5%{
        transform: rotateZ(90deg);
    }
    50%{
        transform: rotateZ(180deg);
    }
    62.5%{
        transform: rotateZ(270deg);
    }
    75%{
        transform: rotateZ(340deg);
    }
    87.5%{
        transform: rotateZ(350deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}

@keyframes rotate4{
    0%{
        transform: rotateZ(0deg);
    }
    12.5%{
        transform: rotateZ(10deg);
    }
    25%{
        transform: rotateZ(20deg);
    }
    32.5%{
        transform: rotateZ(30deg);
    }
    50%{
        transform: rotateZ(90deg);
    }
    62.5%{
        transform: rotateZ(180deg);
    }
    75%{
        transform: rotateZ(270deg);
    }
    87.5%{
        transform: rotateZ(350deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}

/* Scroll Bar */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: var(--white-color);
}

body::-webkit-scrollbar-thumb {
    background: var(--gray-color);
    border-radius: 10px;
}

.delete-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
}

.delete-icon:hover {
    cursor: pointer;
    opacity: 70%;
}