:root{
  --darkcyan: #009e9e;
  --darkblue: #0431B4;
  --light: #f8f9fa;
  --darkgreen:#298A08;
  --gray94:#f0f0f0;
  --bluelight1:#e1fcf9;
  --green1:#00FF00;
  --color-treatment-style:#04B431;
  --color-bgr-survey-header:var(--darkcyan);
  --color-txt-survey-header: var(--light);
  --color-bgr-submit-btn:var(--darkcyan);
  --color-bgr-label-uck-btn:#F8FAFD;/* #d3d3d3;*/
  --color-bgr-label-ck-btn:var(--darkcyan);

  --letter_space:70px;
  --space-after-text-input-questions:25px;
  --space-after-option-select-questions:40px;
  --space-inside-questions:15px;

  }


  .missing_input_message {
    font-size:28px;
    color:red;
    font-style: oblique;
    max-width:80%;
    display:block;
    padding-left:40px;
    background:#ffffff;
    text-align: center;
  }

  .cmp-label_ck{
      display:none;
      border: 0px solid #666;
      border-radius: 0.25em;
      /*font-weight:bold;*/
      background-color: var(--color-bgr-label-ck-btn);
      color:white;
      font-family: 'Roboto', sans-serif;
      font-size:20px;
      padding:2px;
      margin-right:50px;
   }

   .cmp-label_uck{
       display:inline;
       border: 0px solid #666;
       border-radius: 0.25em;
       font-weight:500;
       background-color: var(--color-bgr-label-uck-btn); /* var(--gray94); */
       color:var(--grey_medium_1); /* darkseagreen;*/
       font-family: 'Roboto', sans-serif;
       font-size:20px;
       box-shadow: rgba(0, 0, 0, 0.15) 8px 7px 12px -1px;
       padding:2px;
       margin-right:50px;
    }

    .checkmark_uck {
      color: var(--color-bgr-label-uck-btn);  /* var(--gray94); */
    }

    .wrap_container {
      display:flex;
      flex-wrap:wrap;
      row-gap: 20px;
    }

    .sform {
      max-width: 70%;
      margin: 0 auto;
      padding: 20px;
      border: 0px solid #ccc;
      border-radius: 5px;
      background-color: #FFFFFF; /* var(--light); */
      color:var(--grey_dark);
      font-size:24px;
      font-family: var(--font_Noto); /*  'Roboto', sans-serif; */
      font-weight:500;
    }


    .optional_label {
    font-style: italic;
    font-weight:400;
    }

    .txt_input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 15px;
      background-color : #FFFFFF;
      font-size:18px;
    }

    .recaptcha-checkbox {
      font-size: 25px;
    }

    .txt_input::placeholder {
      font-size:20px;
      color: var(--grey_medium_1);
    }


    /* Media queries for responsiveness 568px is for phone landscape*/
    @media screen and (max-width: 600px) {

      .missing_input_message {
        font-size:16px;
      }


      survey_form {
        max-width: 100%;
        padding: 10px;
      }

      .cmp-label_ck{
        font-size:14px;
      }

      .cmp-label_uck{
        font-size:14px;
      }


      .txt_input{
        font-size:14px;
      }

      .txt_input::placeholder {
        font-size:14px;
      }


      .sform {
        font-size:16px;
      }
    }

    /* Questions counter */
    .questions-container {
      counter-reset: question-counter; /* Initialize the counter */
    }

    .question::before {
      content: counter(question-counter) ". "; /* Display the counter with a period after the number */
      counter-increment: question-counter; /* Increment the counter for each question */

      //copy from .survey_label
      /*
      color: #000000;
      font-size:1.5rem;
      font-family: var(--font_Noto);
      font-weight:500;
      */
    }