/* General styles */
      * {
          box-sizing: border-box;
          font-family: "Tajawal", "Cairo", sans-serif;
      }
      
      html, body {
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: auto;
          direction: rtl;
      }
      
      /* Remove default form element appearance */
      input[type="range"] {
          -webkit-appearance: none;
          -moz-appearance: none;
      }
      
      /* positioning and background image*/
      input[type="range"] {
          width: 100%;
          height: 15px;
          background: rgba(51, 58, 68, 0.15);
          background: repeating-linear-gradient(90deg, rgba(51, 58, 68, 0.2), rgba(99, 107, 124, 0.2) 2px, transparent 0px, transparent 35.35px);
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: 7px center;
      }
      
      /* Form element re-Styling */
      input[type=range]::-webkit-slider-runnable-track {
          -webkit-appearance: none;
          background: rgba(35, 147, 219, 0.9);
          width: 100%;
          height: 4px;
          border-radius: 4px;
      }
      
      input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
          border: 3px solid rgba(35, 147, 219, 0.9);
          height: 18px;
          width: 18px;
          border-radius: 50%;
          background: #fff;
          margin-top: -7px;
          cursor: pointer;
          transition: all 0.2s ease;
      }
      
      input[type=range]::-webkit-slider-thumb:hover {
          transform: scale(1.1);
          box-shadow: 0 0 10px rgba(35, 147, 219, 0.7);
      }
      
      input[type=range]:focus {
          outline: none;
      }
      
      /* scores box styles */
      .score {
          text-align: center;
          display: inline-block;
          font-size: 0.9em;
          background: rgba(18, 20, 30, 1);
          color: #fff;
          border-radius: 8px;
          height: 34px;
          padding: 5px 10px;
          position: absolute;
          top: 5px;
          left: -5px;
          margin-right: 10px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          min-width: 50px;
          border: 1px solid rgba(35, 147, 219, 0.2);
      }
      
      /* Form presentation element styles */
      #container {
          position: absolute;
          top: 5%;
          left: 5%;
          width: 25vw;
          margin: 30px auto 0;
          padding: 12px 30px 30px 30px;
          background: rgba(84, 84, 84, 0.448);
          box-shadow: 0 0 15px rgba(129, 129, 129, 0.516);
          border-radius: 10px;
          border: 1px solid rgba(35, 147, 219, 0.3);
      }
      
      #container h1 {
          line-height: 42px;
          margin: 5px 0 10px;
          font-size: 26px;
          color: #2393db;
          text-align: center;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          border-bottom: 1px solid rgba(35, 147, 219, 0.3);
          padding-bottom: 10px;
      }
      
      label {
          display: inline-block;
          margin-bottom: 7px;
          margin-top: 8px;
          color: #e0e0e0;
          font-size: 0.9em;
          text-shadow: 0 1px 1px rgba(56, 56, 56, 0.5);
      }
      
      hr {
          border: none;
          height: 1px;
          background: linear-gradient(to right, transparent, rgba(35, 147, 219, 0.3), transparent);
          margin-bottom: 15px;
      }
      
      /* Button Styles */
      input[type="submit"] {
          font-weight: bold;
          font-size: 1.1em;
          cursor: pointer;
          color: #fff;
          width: 100%;
          height: 48px;
          margin-top: 15px;
          background: rgba(35, 147, 219, 1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 6px;
          transition: all 0.2s ease;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      }
      
      input[type="submit"]:hover {
          background: rgba(35, 147, 219, 1);
          box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
          transform: translateY(-2px);
      }
      
      input[type="submit"]:active {
          transform: translateY(1px);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
      
      .perf {
          position: relative;
          padding-bottom: 15px;
          margin-bottom: 5px;
          background: rgba(0, 0, 0, 1);
          border-radius: 8px;
          padding: 10px 15px;
          margin-top: 10px;
          border: 1px solid rgba(35, 147, 219, 0.2);
      }
      
      .warning {
          font-size: 0.75em;
          color: #ff9800;
          text-align: center;
          margin-top: 10px;
          text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      }