#dna-loader {
    /* display: flex;
  justify-content: center;
  align-items: center;
  margin: 0; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(207, 207, 207, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.dna-loader-mini {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.loader {
    display: flex;
    gap: 5px;
}

.strand {
    position: relative;
    width: 15px;
    height: 40px;
}

.top,
.bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 12px;
    width: 12px;
    border-radius: 100%;
    background-color: #fa8d18;
    animation: move 3s infinite ease-in-out;
}

.top {
    top: 0;
}

.bottom {
    top: 100%;
    animation-delay: -1.5s;
}

@keyframes move {
    0%,
    100% {
        background-color: #fa8d18;
        top: 100%;
    }
    25% {
        background-color: #ff6600;
        height: 8px;
        width: 8px;
    }
    50% {
        background-color: #fa8d18;
        top: 0;
    }
    75% {
        background-color: #f5b32f;
        height: 12px;
        width: 12px;
    }
}