body.path-webform {
  background-color: black !important;
  main {
    margin-bottom: 60px;
    #block-protocole-content {
      form {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: calc(100% - 42px);
        padding: 0px;
        margin: 0px auto;
        h2 {
          text-transform: uppercase;
          font-family: var(--font-mono);
          letter-spacing: var(--letter-spacing-title);
          font-size: 18px;
          font-weight: var(--font-weight-bold);
          color: var(--color-primary);
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 27px 0px;
        }
        h3 {
          text-transform: uppercase;
          font-family: var(--font-mono);
          letter-spacing: var(--letter-spacing-title);
          font-size: 14px;
          font-weight: var(--font-weight-bold);
          color: var(--color-primary);
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 18px 0px;
        }
        input[type="radio"] {
          color: var(--color-primary);
          background-color: black;
          border: 1px solid var(--color-primary);
        }
        p,
        td,
        label {
          text-transform: none;
          font-family: var(--font-mono);
          letter-spacing: var(--letter-spacing);
          font-size: 12px;
          color: var(--color-primary);
        }
        .description {
          font-transform: italic;
          font-size: 10px;
          color: var(--color-primary);
          margin-top: 4px;
        }
        textarea {
          width: 100%;
          max-width: 600px;
          padding: 6px;
          font-family: var(--font-mono);
          letter-spacing: var(--letter-spacing);
          font-size: 12px;
          color: var(--color-primary);
          background-color: black;
          border: 1px solid var(--color-primary);
        }
        span::after,
        label::after {
          background-image: unset;
          content: " *";
          color: var(--color-primary);
          margin: 0px 5px;
          vertical-align: top;
        }
        label + div.form-textarea-wrapper {
          margin-top: 6px;
        }
        .form-item,
        .form-actions {
          width: 100%;
          max-width: 600px;
          margin: 0px auto 18px auto;
        }

        div.js-webform-type-tableselect {
          &.form-item-qui-remplit {
            table {
              thead {
                tr {
                  th {
                    padding: 6px;
                    text-align: left;
                  }
                }
              }
              tbody {
                tr {
                  display: flex;
                  flex-flow: row nowrap !important;
                  align-items: baseline;
                  column-gap: 13px;
                  td {
                    padding: 6px;
                    input[type="checkbox"] {
                      width: 20px;
                      height: 20px;
                    }
                  }
                }
              }
            }
          }
        }
        div.js-webform-type-date {
          input {
            width: 100%;
            max-width: 200px;
            padding: 6px;
            font-family: var(--font-mono);
            letter-spacing: var(--letter-spacing);
            font-size: 12px;
            color: var(--color-primary);
            background-color: black;
            border: 1px solid var(--color-primary);
          }
        }
        div.js-webform-type-range {
          display: flex;
          flex-flow: column nowrap;
          row-gap: 6px;
          label {
          }
          input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 9px;
            background: var(--color-secondary);
            border: 1px solid var(--color-primary);
            outline: none;
            cursor: pointer;
          }
          input[type="range"]::-webkit-slider-runnable-track {
            height: 9px;
            background: black;
            border: 1px solid var(--color-primary);
          }
          input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--color-primary);
            border: 2px solid var(--color-primary);
            cursor: pointer;
            margin-top: -4px;
          }
          input[type="range"]:hover::-webkit-slider-thumb {
            background: #00ffff;
            border-color: #00ffff;
            box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
          }
          input[type="range"]:hover::-moz-range-thumb {
            background: #00ffff;
            border-color: #00ffff;
            box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
          }
          input[type="range"]:focus {
            outline: none;
          }
          input[type="range"]:focus::-webkit-slider-thumb {
            background: #00ffff;
            border-color: #00ffff;
            box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
          }
        }
        div.js-webform-type-textfield {
          input {
            width: 100%;
            max-width: 600px;
            padding: 6px;
            font-family: var(--font-mono);
            letter-spacing: var(--letter-spacing);
            font-size: 12px;
            color: var(--color-primary);
            background-color: black;
            border: 1px solid var(--color-primary);
          }
        }
        div.js-webform-type-number {
          display: flex;
          flex-flow: column nowrap;
          row-gap: 6px;
          label {
          }
          input {
            width: 100%;
            max-width: 200px;
            padding: 6px;
            font-family: var(--font-mono);
            letter-spacing: var(--letter-spacing);
            font-size: 12px;
            color: var(--color-primary);
            background-color: black;
            border: 1px solid var(--color-primary);
          }
        }
        div.js-webform-type-number:nth-child(2),
        div.js-webform-type-number:nth-child(4) {
          padding-bottom: 12px;
          margin-bottom: 24px;
          border-bottom: 2px solid var(--color-primary);
        }
        section#edit-section-1-etat-general {
        }
        section#edit-section-2-dimensions-relationnelles {
        }
        div.form-actions {
          input[type="submit"] {
            background-color: var(--color-primary);
            color: black;
            border: none;
            padding: 10px 20px;
            font-family: var(--font-mono);
            letter-spacing: var(--letter-spacing);
            font-size: 14px;
            font-weight: var(--font-weight-bold);
            cursor: pointer;
            transition:
              background-color 0.3s ease,
              color 0.3s ease;
          }
        }
      }
    }
  }
}