/*
        Ratings Stars
        (with as little code as possible)
    */
    .rating-solid-star{
       color: gold;
    }

    .rating {
      display: inline;
    }

    .ratingSurveyDiv {
        border-radius: var(--bradius);
        padding: 0.5rem;
    }

    /* FOR FADING GLOW */

    .glowProgressBar {
      animation-name: glowProgressBar;
      animation-duration: .9s;
    }
    @keyframes glowProgressBar {
      0% {
        box-shadow: 0px 0px 10px 10px #cb00f5;
         }
    }

    .glowOptionSelected {
      animation-name: glowOptionSelected;
      animation-duration: .9s;
    }
    @keyframes glowOptionSelected {
      0% {
        box-shadow: 0px 0px 5px 5px lightgreen;
         }
    }
    .glowOptionDeselected {
      animation-name: glowOptionDeselected;
      animation-duration: .9s;
    }
    @keyframes glowOptionDeselected {
      0% {
        box-shadow: 0px 0px 5px 5px orange;
         }
    }
    .glowOptionNotSelected {
      animation-name: glowOptionNotSelected;
      animation-duration: .9s;
    }
    @keyframes glowOptionNotSelected {
      0% {
        box-shadow: 0px 0px 5px 5px lightgray;
         }
    }

    .glowRating {
      animation-name: glowRating;
      animation-duration: 2s;
    }
    @keyframes glowRating {
      0% {
        box-shadow: 0px 0px 5px 5px var(--midblue);
         }
    }
    
    /* FOR Animated GLOW */

    .animated-glow-button {
        position: relative;
        margin: 10px;
        background-color:white;
    }
    
    .animated-glow::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      height: 100%;
      -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
              box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
      z-index: -1;
      -webkit-animation-name: half-yellow-shadow;
              animation-name: half-yellow-shadow;
      -webkit-animation-timing-function: ease;
              animation-timing-function: ease;
      -webkit-animation-duration: 5s;
              animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
    }
    
    .animated-glow::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 50%;
      height: 100%;
      -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
              box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
      z-index: -1;
      -webkit-animation-name: half-cyan-shadow;
              animation-name: half-cyan-shadow;
      -webkit-animation-timing-function: ease;
              animation-timing-function: ease;
      -webkit-animation-duration: 5s;
              animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
    }
    
    @-webkit-keyframes yellow-shadow {
      0% {
        top: 0;
        left: 0;
      }
      25% {
        top: 50%;
        left: 0;
      }
      50% {
        top: 50%;
        left: 50%;
      }
      75% {
        top: 0;
        left: 50%;
      }
      100% {
        top: 0;
        left: 0;
      }
    }
    
    @keyframes yellow-shadow {
      0% {
        top: 0;
        left: 0;
      }
      25% {
        top: 50%;
        left: 0;
      }
      50% {
        top: 50%;
        left: 50%;
      }
      75% {
        top: 0;
        left: 50%;
      }
      100% {
        top: 0;
        left: 0;
      }
    }
    
    @-webkit-keyframes cyan-shadow {
      0% {
        right: 0;
        bottom: 0;
      }
      25% {
        right: 0;
        bottom: 50%;
      }
      50% {
        right: 50%;
        bottom: 50%;
      }
      75% {
        right: 50%;
        bottom: 0;
      }
      100% {
        right: 0;
        bottom: 0;
      }
    }
    
    @keyframes cyan-shadow {
      0% {
        right: 0;
        bottom: 0;
      }
      25% {
        right: 0;
        bottom: 50%;
      }
      50% {
        right: 50%;
        bottom: 50%;
      }
      75% {
        right: 50%;
        bottom: 0;
      }
      100% {
        right: 0;
        bottom: 0;
      }
    }
    
    @-webkit-keyframes gradient-shadow {
      0% {
        -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
                box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
      }
      20% {
        -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
                box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
      }
      40% {
        -webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
                box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
      }
      60% {
        -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
                box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
      }
      80% {
        -webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
                box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
      }
      100% {
        -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
                box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
      }
    }
    
    @keyframes gradient-shadow {
      0% {
        -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
                box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
      }
      20% {
        -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
                box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
      }
      40% {
        -webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
                box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
      }
      60% {
        -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
                box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
      }
      80% {
        -webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
                box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
      }
      100% {
        -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
                box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
      }
    }
    
    @-webkit-keyframes half-yellow-shadow {
      0% {
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
      }
      16.66% {
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
      }
      32.32% {
        top: 0;
        left: 50%;
        height: 50%;
        width: 50%;
      }
      49.98% {
        top: 50%;
        left: 50%;
        height: 50%;
        width: 50%;
      }
      66.64% {
        top: 50%;
        left: 0;
        height: 50%;
        width: 100%;
      }
      83.3% {
        top: 50%;
        left: 0;
        height: 50%;
        width: 50%;
      }
      100% {
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
      }
    }
    
    @keyframes half-yellow-shadow {
      0% {
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
      }
      16.66% {
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
      }
      32.32% {
        top: 0;
        left: 50%;
        height: 50%;
        width: 50%;
      }
      49.98% {
        top: 50%;
        left: 50%;
        height: 50%;
        width: 50%;
      }
      66.64% {
        top: 50%;
        left: 0;
        height: 50%;
        width: 100%;
      }
      83.3% {
        top: 50%;
        left: 0;
        height: 50%;
        width: 50%;
      }
      100% {
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
      }
    }
    
    @-webkit-keyframes half-cyan-shadow {
      0% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
      }
      16.66% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 100%;
      }
      32.32% {
        bottom: 0;
        right: 50%;
        height: 50%;
        width: 50%;
      }
      49.98% {
        bottom: 50%;
        right: 50%;
        height: 50%;
        width: 50%;
      }
      66.64% {
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 100%;
      }
      83.3% {
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 50%;
      }
      100% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
      }
    }
    
    @keyframes half-cyan-shadow {
      0% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
      }
      16.66% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 100%;
      }
      32.32% {
        bottom: 0;
        right: 50%;
        height: 50%;
        width: 50%;
      }
      49.98% {
        bottom: 50%;
        right: 50%;
        height: 50%;
        width: 50%;
      }
      66.64% {
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 100%;
      }
      83.3% {
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 50%;
      }
      100% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
      }
    }