@keyframes rotate-border {
  0% {
    border-image-source: linear-gradient(90deg, red, yellow, green, blue, violet);
  }
  25% {
    border-image-source: linear-gradient(90deg, violet, red, yellow, green, blue);
  }
  50% {
    border-image-source: linear-gradient(90deg, blue, violet, red, yellow, green);
  }
  75% {
    border-image-source: linear-gradient(90deg, green, blue, violet, red, yellow);
  }
  100% {
    border-image-source: linear-gradient(90deg, yellow, green, blue, violet, red);
  }
}

@keyframes runLights {
  0% {
    border-color: red blue green yellow;
  }
  25% {
    border-color: blue green yellow red;
  }
  50% {
    border-color: green yellow red blue;
  }
  75% {
    border-color: yellow red blue green;
  }
  100% {
    border-color: red blue green yellow;
  }
}

@keyframes fireworks {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

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

@keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes colorChange {
    0%   { color: red; }
    25%  { color: blue; }
    50%  { color: green; }
    75%  { color: yellow; }
    100% { color: red; }
}

@keyframes slide {
    0% {
        background-position: top left;
    }
    25% {
        background-position: top right;
    }
    50% {
        background-position: bottom right;
    }
    75% {
        background-position: bottom left;
    }
    100% {
        background-position: top left;
    }
}

@keyframes colorChange {
    0% {
        background-image: linear-gradient(45deg, red, blue, yellow, green);
    }
    25% {
        background-image: linear-gradient(45deg, blue, green, red, yellow);
    }
    50% {
        background-image: linear-gradient(45deg, green, yellow, blue, red);
    }
    75% {
        background-image: linear-gradient(45deg, yellow, red, green, blue);
    }
    100% {
        background-image: linear-gradient(45deg, red, blue, yellow, green);
    }
}

@keyframes boxAnimation {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.panel-login {
/*  width: 200px;  */ /* Or any other size */
/*  height: 200px; */
  
  border-width: 10px; /* Adjust thickness as per requirement */
  border-style: solid;
  border-radius: 20px;  
/*  border-top: 12px; */
  animation: runLights 5s infinite; /* Adjust duration as per requirement */

/*  
    content: '';
    width: 0;
    height: 0;
    border-top: 12px solid #37a000; 
    border-right: 12px solid transparent;
    position: absolute;
    left: 0px;
    top: 0px;
*/    
}

.panel-bd .panel-heading-login::before {
      border-top: 12px solid #0000; 
}

.count_panel {
/*  width: 200px; */ /* You can change this to your desired width */
/*  height: 200px; */ /* You can change this to your desired height */
/*  background-color: #7b8ad7; */
  background-image: linear-gradient(#fabcbd, #c7e7e2);
/*  background-image: linear-gradient(#8889e1, #c7e7e2); */
  border: 4px solid;
  border-image: linear-gradient(90deg, red, yellow, green, blue, violet);
  border-image-slice: 1;
  animation: rotate-border 4s linear infinite;
}

.line_div {
/*  width: 200px; */ /* You can change this to your desired width */
/*  height: 200px; */ /* You can change this to your desired height */
/*  background-color: #7b8ad7; */
/*  background-image: linear-gradient(#fabcbd, #c7e7e2); */
/*  background-image: linear-gradient(#8889e1, #c7e7e2); */
  border: 4px solid;
  border-image: linear-gradient(90deg, red, yellow, green, blue, violet);
  border-image-slice: 1;
  animation: rotate-border 4s linear infinite;
}

.fireworks {
    position: relative;
}

.btn {
    border-radius: 5px;
}
/*
.btn {
    position: relative;
    z-index: 1;
    padding: 10px 20px;
    border: none;
    background-color: #ff4500;
    color: white;
    cursor: pointer;
    outline: none;
}
*/
.explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #edd428; /* #ff4500; */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.btn:hover + .explosion {
    animation: fireworks 5s forwards;
}

.zoom-in-text {
    animation: zoomIn 2s;
}

.rotate-text {
    animation: rotate 5s infinite;
}

.animated-text {
    animation: colorChange 10s infinite; /* 10s duration, infinite loop */
}    

.animated-bg {
    width: 100%;
    height: 100%;
    animation: slide 10s infinite, colorChange 2.5s infinite;
    background-size: 200% 200%;
}

.fade-in-text {
    animation: fadeIn 2s;
}

.slide-in-left {
    animation: slideInLeft 2s;
}

.blink-text {
    animation: blink 1s infinite;
}

.animated-box {
/*    width: 100px; */ /* You can set the width as per your requirement */
/*    height: 100px; */ /* You can set the height as per your requirement */
/*    border: 4px solid #000; */ /* This gives a border to all 4 sides of the div */
    animation: boxAnimation 2s infinite alternate; /* Animation */
}