.active {
          background: red;
          color: white;
      }

      .details_modal {
          display: none;
          /* Hidden by default */
          position: fixed;
          /* Stay in place */
          z-index: 1;
          /* Sit on top */
          left: 0;
          top: 0;
          width: 100%;
          /* Full width */
          height: 100%;
          /* Full height */
          overflow: auto;
          /* Enable scroll if needed */
          background-color: rgb(0, 0, 0);
          /* Fallback color */
          background-color: rgba(0, 0, 0, 0.4);
          /* Black w/ opacity */
      }

      .loader {
          position: relative;
          width: 100px;
          height: 100px;
      }

      .loader:before,
      .loader:after {
          content: '';
          border-radius: 50%;
          position: absolute;
          inset: 0;
          box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
      }

      .loader:after {
          box-shadow: 0 2px 0 #FF3D00 inset;
          animation: rotate 2s linear infinite;
      }

      @keyframes rotate {
          0% {
              transform: rotate(0)
          }

          100% {
              transform: rotate(360deg)
          }
      }