/* Colors */

/* Lightest Blue */
/* #1dc4f6 */

/* Light 2  */
/* #2082ce */

/* Dark 1 */
/* #2a6fad */

/* Dark 2  */
/* #1849b8 */

/* Darkest / Purple */
/* #464484 */


/* Brain Left */
/* 5150a9 */

/* Brain mid */
/* 1ec6ff */

/* Brain End */
/* #464484 */

:root {
  /* --prime-default-graident:#1B1A8F, #0E36C2, #0958EC, #0E82FD, #1CCEFF, #278BC1, #244894,#342F7B, #635F87 */
  --prime-default-graident: #2a6fad, #1dc4f6, #464484;
  --prime-error-graident:  #f32013, #f0d500,  #ca0b00;

  
}


@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}




.card-primary.card-outline {
    border-top: 3px solid #1849b8;
	  --angle: 0deg;
     border-image: linear-gradient( var(--angle),var(--prime-default-graident)) 1;
     animation: 5s rotate linear infinite;
}


.card-primary .error-line{
  border-top: 3px solid #1849b8;
  --angle: 0deg;
   border-image: linear-gradient( var(--angle),var(--prime-error-graident)) 1;
   animation: 5s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

.incorrect-text{
    margin-bottom: 1rem;
    padding: 0px;
    
    text-align: center;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active{
  background-color: #2082ce;
}


.btn-primary {
    color: #fff;
    background-color: #2082ce;
    border-color: #2082ce;
    box-shadow: none;
}

a {
    color: #2082ce;
    text-decoration: none;
    background-color: transparent;
}

.login-box{
    -webkit-animation: login 1.5s ; /* Safari 4+ */
    -moz-animation:    login 1.5s ; /* Fx 5+ */
    -o-animation:      login 1.5s ; /* Opera 12+ */
    animation:         login 1.5s ; /* IE 10+, Fx 29+ */
}

.input-group{
    animation: animateIn 700ms;
    animation-delay: calc(var(--animation-order) * 100ms);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}


.btn-primary:hover {
    color: #fff;
    background-color: #1849b8;
    border-color: #0062cc;
}

/* ANIMS */

@keyframes login {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes animateIn {
    0% {
      opacity: 0;
      transform: scale(0.6) translateY(-8px);
    }
    
    100% {
      opacity: 1;
    }
  }