/* <style> */

  .admin-body {
      background-image: url('/static/css/bg.jpg');
      background-size: cover;
      background-repeat: no-repeat;
  }

  .admin-mask {
      background-color: #00000091;
      margin-top: -1rem;
      padding-top: 1rem;
  }

  /* Apply equal padding for table cells */
  .admin-th-3 {
      padding: 1rem;
      text-align: center;
  }

  /* Make inputs and selects take full width & height of cell */
  .admin-select,
  .admin-input,
  .btn {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0.5rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
  }

  .input-wrapper {
      display: flex;
      justify-content: center;
      /* horizontal center */
      margin-top: 3rem;
      padding: 1rem;
  }

  .admin-input-text {
      width: 50%;
      padding: 0.5rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      text-align: center;
      border-radius: 4px 0px 0px 4px;
      box-sizing: border-box;
  }


  .btn-success-text {
      background-color: #28a745;
      text-decoration: none;
      color: #fff;
      padding: 15px 22px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      border-radius: 0px 6px 6px 0px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
  }


  .btn-success-text:hover {
      background-color: #218838;
      box-shadow: 0 0 12px rgba(40, 167, 69, 0.8), 0 0 20px rgba(40, 167, 69, 0.6);
      transform: scale(1.05);
  }


  .btn-success-text:active {
      background-color: #1e7e34;
      transform: scale(0.98);
  }

  /* Remove extra spacing in select for better centering */
  .admin-select {
      appearance: none;
      /* optional: removes default arrow styling */
      background-position: right 0.7rem center;
      background-repeat: no-repeat;
  }

  .admin-th-1 {
      padding: 1rem;
      margin-bottom: 30px;

  }

  .admin-th-2 {
      padding: 1.34rem;
  }


  /* Tab switcher visible only on mobile */
  .tab-switcher {
      display: none;
  }




  .admin-form {
      background-image: url('/static/contest-bg-about.png');
      background-position: center;
      /* width: fit-content; */

  }


  .numerinput {
      background-image: url('/static/contest-bg-about.png');
      background-position: center;
  }




  .container-admin {

      margin-top: 2rem;
  }

  @media (max-width: 1068px) {
      .container-admin {
          flex-direction: column;
          margin-top: 2rem;
          justify-self: center;
          align-items: center;

      }

      .admin-input-text {
          width: 70%;
          padding: 0.5rem;
          font-size: 1rem;
          border: 1px solid #ccc;
          border-radius: 4px 0px 0px 4px;
          box-sizing: border-box;

      }

      .input-wrapper {

          margin-top: 0rem;

      }

      #leftTabContent,
      #rightTabContent {
          display: none;
          width: 100%;

      }

      .active-tab {
          display: block !important;
      }
  }

  @media screen and (max-width: 768px) {
      .responsive-form-table thead .desktop-headers {
          display: none;
      }

      .responsive-form-table tr {
          display: block;
          margin-bottom: 1.5em;
          border: 1px solid #ddd;

      }

      .mob-type {
          display: none;
      }

      .responsive-form-table td {
          display: flex;
          flex-direction: column;
          text-align: left;
          padding: 10px 15px;
          border-bottom: 1px solid #eee;
      }

      .responsive-form-table td:before {
          content: attr(data-label);
          font-weight: bold;
          margin-bottom: 10px;
          color: #ffffff;

      }

      .responsive-form-table td:last-child {
          border-bottom: 0;
      }

      .responsive-form-table {

          padding: 10px;
          font-size: 1.2em;
          width: 100%;
          /* or max-width: 600px; */
          margin: 0 auto;

      }

      .responsive-form-table .admin-select,
      .responsive-form-table .admin-input {
          width: 100%;
          height: 40px;
      }

      .btn-success {

          height: 40px;
      }


  }

  /* Default desktop styles */

  /* Mobile styles - stack the table */
  @media screen and (max-width: 550px) {



      .numerinput {
          width: 100%;
          margin: 0;
          padding: 0;
          border-spacing: 0;
          border-collapse: collapse;

      }

      .numerinput thead {
          display: none;
      }

      .numerinput {
          background: none;

      }

      .numerinput tr {
          display: block;
          width: 100%;
          margin: 0;
          margin-bottom: 2rem;
          border: 1px solid #ccc;
          border-radius: 0;
          overflow: hidden;
          background-image: url('/static/contest-bg-about.png');
          background-position: center;
          background-size: cover;
      }

      .numerinput td {
          display: block;
          width: 100%;
          box-sizing: border-box;
          position: relative;
          padding: 12px 16px 12px 50%;

          border-bottom: 1px solid #eee;
          color: white;
          font-weight: 500;

      }

      .numerinput td:before {
          content: attr(data-label);
          position: absolute;
          left: 16px;
          top: 12px;
          font-weight: bold;
          color: #fff;
          white-space: nowrap;
      }

      .numerinput tbody td:nth-of-type(1) {
          background-color: #d18109;
      }

      .numerinput a.btn-success,
      .numerinput a.btn-danger {
          display: block;
          width: 100%;
          margin: 8px auto;
          text-align: center;
          padding: 8px;
          border-radius: 5px;
          font-weight: bold;
          text-decoration: none;
      }

      .numerinput a.btn-success {
          background-color: #218838;
          color: white;
      }

      .numerinput a.btn-danger {
          background-color: #c82333;
          color: white;
      }
  }

  /* </style> */




  /* <style> */

  #leftBtn,
  #rightBtn {
      display: none;
  }


  @media (max-width: 1068px) {

      #leftBtn,
      #rightBtn {
          display: block;

      }

      .tab-buttons {
          display: flex;
          position: relative;
          border: 1px solid #ccc;
          border-radius: 8px;
          overflow: hidden;
          margin: 2rem;
          margin-top: 3rem;
      }

      .tab-buttons button {
          flex: 1;
          padding: 1rem 1rem;
          border: none;
          background: white;
          font-weight: bold;
          font-size: 17px;
          line-height: 1.5rem;
          cursor: pointer;
          z-index: 1;
          position: relative;
          transition: color 0.3s ease, background-color 0.3s ease;
      }

      .tab-buttons .active-btn {
          color: white;
          background-color: #a9250a;
      }

      .tab-slider {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 50%;
          background-color: orange;
          transition: transform 0.4s ease-in-out;
          z-index: 0;
          border-radius: 8px;
      }



      .tab-content.active-tab {
          display: block;
      }

      .h1-admin {
          margin: 20px;
      }
  }



  /* </style> */

  /* <style> */

  .btn-success {
      background-color: #28a745;
      text-decoration: none;
      color: #fff;
      padding: 8px 16px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
  }

  .btn-danger {
      background-color: #a9250a;
      text-decoration: none;
      color: #fff;
      padding: 8px 16px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 8px rgba(211, 6, 6, 0.5);
  }

  .btn-danger:hover {
      background-color: rgb(179, 7, 7);
      box-shadow: 0 0 12px rgba(225, 6, 6, 0.8), 0 0 20px rgba(214, 7, 7, 0.6);
      transform: scale(1.05);
  }

  .btn-success:hover {
      background-color: #218838;
      box-shadow: 0 0 12px rgba(40, 167, 69, 0.8), 0 0 20px rgba(40, 167, 69, 0.6);
      transform: scale(1.05);
  }


  .btn-success:active {
      background-color: #1e7e34;
      transform: scale(0.98);
  }

  .btn-danger:active {
      background-color: rgb(179, 7, 7);
      transform: scale(0.98);
  }

  /* </style> */






  .input-group-marque {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 50%;

      padding: 10px 12px;
      border-radius: 8px;
      /* box-shadow: 0 4px 10px rgba(255, 4, 4, 0.3); */
      margin: 1.5rem auto;
  }


  .form-control-marque {
      flex: 1;
      padding: 15px;
      font-size: 16px;
      border: 1px solid #9c0f0f;
      border-radius: 5px;
      /* text-align: center; */
      background-color: #ffffff;
      color: black;
      line-height: 25px;


  }



  .marque-green {
      border-color: #4caf50;
      color: #06880a;
      font-weight: 600;
  }



  /* Red when disabled */
  .marque-red {
      border-color: #f44336;
      color: #a31005;
      font-weight: 600;
  }





  .btn-icon {
      width: 36px;
      /* smaller width */
      height: 36px;
      /* same as input height */
      padding: 0;
      border: none;
      background: transparent;
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      flex-shrink: 0;
      background-color: #353330a8;
  }

  .btn-icon.edit {
      color: #07ec3d;
      transition: all 0.3s ease;
  }

  .btn-icon.edit:hover {
      color: #0a9c2c;
      box-shadow: 0 0 12px rgba(40, 167, 69, 0.8), 0 0 20px rgba(40, 167, 69, 0.6);
      transform: scale(1.05);

  }

  .btn-icon.delete {
      color: #ff0019;
      transition: all 0.3s ease;
  }

  .btn-icon.delete:hover {
      color: #bd2130;
      box-shadow: 0 0 12px rgba(225, 6, 6, 0.8), 0 0 20px rgba(214, 7, 7, 0.6);
      transform: scale(1.05);
  }

  .admin-mob-del {
      display: none;
  }

  @media (max-width:768px) {
      .input-group-marque {

          width: 90%;
          gap: 8px;
          padding: 8px;
      }
  }
    .container-result-chart {
      display: flex;
      justify-content: center; /* horizontal center */
      align-items: center;     /* vertical center */
      /* height: 100vh;           full screen height */
      /* background-color: #f0f0f0; */
    }

    .result-chart {
      height: 500px;
      width: 600px;
      padding: 20px;
      border-radius: 10px;
     filter: brightness(1.15) contrast(1.4);
    }
  @media (max-width: 568px) {
      .input-group-marque {
          flex-direction: column;
          width: 90%;
          gap: 28px;
          padding: 8px;
      }

      .admin-mob-del {
          display: block;
      }

      .form-control-marque {
          width: 100%;
          font-size: 15px;
          padding: 12px 14px;
          text-align: left;
      }

      .btn-icon {
          width: 100%;
          height: 40px;
          font-size: 1rem;
          justify-content: flex-start;
          padding-left: 10px;
      }

      .btn-icon.edit,
      .btn-icon.delete {
          width: 100%;
          max-width: 100%;
          justify-content: center;
          font-size: 1.1rem;

      }

    .container-result-chart {
      display: flex;
      justify-content: center; /* horizontal center */
      align-items: center;     /* vertical center */
      /* height: 100vh;           full screen height */
      /* background-color: #f0f0f0; */
    }

    .result-chart {
      height: 450px;
      width: 400px;
      padding: 20px;
      border-radius: 10px;
     filter: brightness(1.15) contrast(1.4);
    }


  }


@media (max-width: 440px) {
    .result-chart {
      height: 400px;
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      filter: brightness(1.15) contrast(1.4);
    }
  }