@charset "UTF-8";
/*==================================================================*/
/*                ** FOREST WALKERS WEBSITE **                      */
/*                                                                  */
/*     Application Form - Cascading Style Sheets  CSS               */
/*                                                                  */
/*   01/09/2021 -   Ver 03.00 Adaptive/Responsive CSS support       */
/*   13/10/2021 -   Ver 03.04 Removed tick box CSS for:             */ 
/*                            "Paid the Annual Forest Walkers Mem.."*/
/*                            and replace it with a reminder note.  */
/*   01/02/2022 -   Ver 04.00 Replaced Heart Foundation registration*/
/*                            check with Prerequisite Walks check.  */  
/*                                                                  */
/*------------------------------------------------------------------*/
/* This CSS file is divided inthe following sections:               */
/*                                                                  */
/*   1) The Application Form header grid.                           */
/*   2) Member Application Form grid.                               */
/*   3) Member Application Form fields attributes (Classes/Id).     */
/*   4) Member Application Form Header grid for small devices.      */
 /*  5) Member Application Form fields for small devices.           */
/*                                                                  */
/*==================================================================*/ 

/*======================================================================*/
/*   1) Member Application Form  - Header grid                          */
/*----------------------------------------------------------------------*/  
#application_header_container {          
  display: grid;
  margin: auto;                                 /* To display in the width centre on large screen */
  width: clamp(65vw, 82vw, 90vw); 
  grid-template-columns: 1fr 4fr 4fr 1.4fr;
  grid-template-areas: 
        "hbtn club title hflogo"
        "sep1 sep1 sep1  sep1";
  row-gap: 0;      
}
/*----------------Back home button ----------------------*/ 
#app_button {
  grid-area: hbtn;
}
#app_backhome {
  background: #1f8722;
  border: outset;
  border-width: 1px;
  border-radius: 10px; 
  text-decoration: none; 
  color: white;
  font-size: clamp(9px, 1.2vw, 19px);
  font-weight: bold;
  height: clamp(5.2vh, 7vh, 8vh);
  width: clamp(10px, 11vw, 12vw);
  text-align: center;
  margin-left: 16px;
}
#app_backhome:hover { 
  font-weight: bold;
  color: rgba(24, 97, 2, 0.959);
  background: rgb(250, 250, 193); 
  border: none;
}
/*---------------- Header text ------------------------*/ 
#app_banner_club {
  grid-area: club;
  padding-top: 2vh;
  font-size: clamp(14px, 3vw, 4.5vw);
  text-align: center;
}
#app_banner_title {
  grid-area: title;
  padding-top: 3vh;
  font-weight: bold;
  font-size: clamp(12px, 1.8vw, 2.5vw);
}
/*---------------- Header Heart Foundation logo ------------*/ 
#app_banner_hflogo {
  grid-area: hflogo;
 }
  #app_hf_logo {
  background-color: white;
  padding-left: 4px;
  padding-right: 2px;
  padding-top: 4px;
  object-fit: cover;
  width: 90%;
 }
 #header_end_separator {                                     /*  A small separator row  */
  grid-area: sep1;
}
/*======================================================================*/
.app_banner {
  background-color: #639c19;
  color: white; 
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
/*======================================================================*/


/*======================================================================*/
/*   2) Member Application Form grid                                    */
/*----------------------------------------------------------------------*/ 
#application_form  {  
  display: grid;
  margin: auto;           /* To display in the width centre on large screen */
  width: clamp(65vw, 82vw, 90vw); 
  background: rgb(146, 182, 199);                /* #92b6c7 */
  grid-template-columns: 13vw 3vw 12vw 4vw 12vw 18vw 20vw; 
  grid-template-areas: 
  /*                    Columns                   --  Row */
  /*  "  1    2    3      4    5      6     7  "  --  --- */
      "stat  stat stat  send    .   note  note "    /*  1 */
      "snml  snml snml    .   fnml  fnml  datel"    /*  2 */
      "snm   snm  snm     .   fnm   fnm   date "    /*  3 */
      "add1l  .    .      .    .    pstcl   .  "    /*  4 */ 
      "add1  add1 add1 add1  add1   pstc    .  "    /*  5 */ 
      "add2  add2 add2 add2  add2    .      .  "    /*  6 */
      "hphl   .   mphl   .     .    emal    .  "    /*  7 */
      "hph    .   mph    .     .    ema    ema "    /*  8 */
      "pwc   pwc  pwc   pwc  pwc    pwc    pwc "    /*  9 */
      "pwc   pwc  pwc   pwc  pwc    pwc    pwc "    /* 10 */
      " .     .   .    rfrm  rfrm  sfrm     .  ";   /* 11 */
  row-gap: 4px;
}

/* --------------- Row  1 [status] [send wait] [note on required fields ---*/
#status {                   
  grid-area: stat;
}
#sending {          /* wait on send reuest - animated image */
  grid-area: send; 
  display: none;
  padding-top: 6px; 
  padding-left: 4px; 
}
#note {         /* Note about mandatoy  input field */
  grid-area: note; 
}

/* --------------- Row  2 -  Label: [surname] [first name ] [date] ---*/
#surname-label {
  grid-area: snml; 
}
#firstName-label {
  grid-area: fnml; 
}
#date-label {
  grid-area: datel; 
}

/* --------------- Row  3 -  Input: [[surname] [first name ] [date] ---*/
#surname {
  grid-area: snm;
}
#firstname {
  grid-area: fnm; 
}
#date-fld {
  grid-area: date; 
}

/* --------------- Row  4 -  Label: [address] [postcode]     ----------*/
#address1-label {
  grid-area: add1l; 
}
#postcode-label {
  grid-area: pstcl; 
}
/* --------------- Row  5 -  input: [address 1] [postcode]   ---------*/
#address-1 {
  grid-area: add1; 
}
#postcode {
  grid-area: pstc;
}
/* --------------- Row  6 -  input: [address 2] ----------------------*/
#address-2 {
  grid-area: add2; 
}

/* --------------- Row  7 -  Label: [home phone] [mobile]  [email] -----*/
#phoneHome-label {
  grid-area: hphl; 
}
#phoneMobile-label {
  grid-area: mphl; 
}
#email-label {
  grid-area: emal; 
}
/* --------------- Row  8 -  input: [home phone] [mobile]  [email] -----*/
#phoneHome {
  grid-area: hph; 
}
#phoneMobile {
  grid-area: mph; 
}
#email  {
  grid-area: ema; 
}
/* ------------------ Row  9 -  Check box -----*/
#prerequisiteWalksCkeck {
  grid-area: pwc; 
}
fieldset {
  margin-top: 12px;
  margin-bottom: 4px;
  margin-left: 6px;
  margin-right: 6px;
  background: rgb(201, 209, 232);  
}  
#checkLine1 {
  color: #046777;
  padding-left: clamp(4vw, 6vw, 10vw);
}
/* ------------------ Row  10 -  Pay annual fee reminder    -----*/

fieldset #pay_fee {
  margin-left: 16vw;
  margin-right: 14vw;
  margin-bottom: 1px;
  background: rgb(192, 200, 215);
  font-size: clamp(1vh, 1.4vw, 2.2vw);
}

#pay_annual_fee_note {
  margin-left: 4vw;
  font-weight: bold;
  font-size: 1.6vw;
  color: #4a6164;
  text-decoration: underline;
}
#pay_annual_fee_text {
  margin-left: 1vw;
  font-size: 1.5vw;
  font-style: italic;
  font-weight: normal;
  color: #2d3e41;
  text-decoration: none;
}
/* ------------------ Row  11  - Buttons [reset Form] -- [Submit Application] */
#resetForm {
  grid-area: rfrm; 
  padding-bottom: 1vh;
}
#res_form_btn {  
  background: rgb(165, 99, 143);
}
#res_form_btn:hover {
    color: rgba(24, 97, 2, 0.959);
    background: rgb(250, 250, 193); 
}
#submitForm {
  grid-area: sfrm; 
}
#sub_app_btn {  
  background: rgb(1, 121, 75);
}
#sub_app_btn:hover {
  color: rgba(24, 97, 2, 0.959);
  background: rgb(250, 250, 193); 
}
/*======================================================================*/
 

/*======================================================================*/
/*  3)  Member Application Form field attributes (Classes/Id).          */
/*----------------------------------------------------------------------*/  
#application_form label {  
  display: inline-block;                      /* Required for margin-top to work */
  margin-top: 1vh;
  margin-left: 4px;
  font-weight: bold;
  font-size: clamp(1vh, 1.4vw, 2.2vw);
}
.statusFld {
  font-size: 1.3vw;
  background: white;
  font-weight: bold;
  padding-top: 7px;
  padding-bottom: 4px;
  text-align: center;
}

.noteFld {
  padding-top: 5px;
  margin-right: 4px;
  font-style: italic;
  font-size: 1.6vw;
  color: navy;
  padding-left: 0.5vw;
  text-align: left;
}

.mandatory {      /* Show a redish "*" at end of field label to indicates a mandatory input */
  color: rgb(131, 2, 2);
  font-size: 20px;
  font-weight: bold;
}

 #application_form input {  
  margin-bottom: 1.5vh;
  margin-left: 4px;
  font-size: clamp(1vh, 1.6vw, 2.4vw);
}
.dateFld {  
  width: clamp(11vw, 14vw, 16vw);
}


.showAsRequired label::after {  /* Show a redish "*" at end of field label to indicates a mandatory input */
  content: "*";
  color: rgb(131, 2, 2);
  font-size: clamp(1vh, 1.4vw, 2.2vw);
  font-weight: bold;
  margin-left: 2px
}

.addrFld {
  width: clamp(32vw, 35vw, 40vw);    /* clamp(MIN, VAL, MAX) */
}
.nameFld {
  width: clamp(23vw, 25vw, 32vw);    /* clamp(MIN, VAL, MAX) */
}
.postFld {
  width: clamp(4vw, 6vw, 8vw);       /* clamp(MIN, VAL, MAX) */
}
.phoneFld {
  width: clamp(9vw, 11vw, 13vw);      /* clamp(MIN, VAL, MAX) */
}
.mailFld {
  width: clamp(30vw, 36vw, 40vw);   /* clamp(MIN, VAL, MAX) */
}
.legend {
  background-color: rgb(170, 155, 155);
  font-weight: bold;
  font-style: italic;
  color: white;
  font-size: clamp(1vw, 1.6vw, 3vw);
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 6px;
  padding-left: 6px;
}
.fbutton {
  border: outset;
  border-width: 1px;
  border-radius: 10px; 
  text-decoration: none; 
  width: clamp(6vw, 9vw, 10vw);
  height: clamp(2vw, 5vw, 6vw);
  margin-left: 20px;
  margin-top: 12px;
  font-size: clamp(1vw, 1.3vw, 2vw);
  font-weight: bold;
  color: white;
} 

/*======================================================================*/
/*   4)  Member Application Form  - Header grid  for small devices      */
/*----------------------------------------------------------------------*/  
@media only screen and (max-width: 576px) {
  #application_header_container {      
    display: grid;
    width: 100vw; 
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
      "hbtn club  hflogo"
      "hbtn title hflogo"
      "sep1 sep1  sep1";
  }  
  #app_banner_club {
    grid-area: club;
    padding-top: 0.5vh;
    padding-bottom: 0vh;
    font-size: clamp(12px, 4.5vw, 5vw);
  }
  #app_banner_title {
    grid-area: title;
    padding-top: 0.5vh;
    text-align: center;
    font-size: clamp(10px, 3.5vw, 4vw);
  }      
  #app_hf_logo {
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 9px;
  } 
  /*======================================================================*/
  /*  5)  Member Application Form field for small devices.                */
  /*----------------------------------------------------------------------*/ 
  #application_form  {  
    display: grid;
    width: 100vw; 
    grid-template-columns: 16vw 6vw 16vw 5vw 10vw 20vw 26vw; 
    grid-template-areas: 
      /*                    Columns                 --  Row */
      /*  "  1     2    3     4    5      6    7  " --  --- */
        "stat  stat stat  send   note  note  note "   /*  1 */
        " .     .    .      .    datel date   .   "   /*  2 */
        "snml  snml snml    .    fnml  fnml   .   "   /*  3 */
        "snm   snm  snm     .    fnm   fnm    .   "   /*  4 */
        "add1l  .    .      .     .    pstcl  .   "   /*  5 */
        "add1  add1 add1 add1    add1  pstc   .   "   /*  6 */  
        "add2  add2 add2 add2    add2    .    .   "   /*  8 */
        "hphl   .   mphl   .      .   emal    .   "   /*  9 */
        "hph    .   mph    .     ema  ema    ema  "   /* 10 */
        "pwc   pwc  pwc  pwc     pwc  pwc    pwc  "   /* 11 */
        "pwc   pwc  pwc  pwc     pwc  pwc    pwc  "   /* 12 */
        " .     .   rfrm rfrm     .   sfrm    .   ";  /* 13 */
  } 
  .statusFld {
    font-size: 2.2vw;
  }
  .noteFld {
    margin-left: 1vw;
    font-size: 2.6vw;
  }  
  .mandatory {
    font-size: 16px;
  }
  #application_form input {  
    margin-bottom: 0;
    font-size: clamp(1vw, 2.5vw, 4vw);
  }  
  .dateFld {  
    width: clamp(18vw, 26vw, 28vw);
    text-align: center;
  }
  .nameFld {
    width: clamp(30vw, 38vw, 40vw);    /* clamp(MIN, VAL, MAX) */
  }
  .addrFld {
    width: clamp(42vw, 46vw, 48vw);    /* clamp(MIN, VAL, MAX) */
  }
  .postFld {
    width: clamp(6vw, 8vw, 10vw);      /* clamp(MIN, VAL, MAX) */
  }
  .phoneFld {
    width: clamp(15vw, 18vw, 20vw);     /* clamp(MIN, VAL, MAX) */
  }
  .mailFld {
    width: clamp(45vw, 48vw, 50vw);   /* clamp(MIN, VAL, MAX) */
  }
  .legend {
    font-size: clamp(1vw, 2.6vw, 3vw);
  }
  .fbutton {
    border-radius: 8px; 
    text-decoration: none; 
    width: clamp(12vw, 15vw, 18vw);
    height: clamp(5vw, 7vw, 8vw);
    margin-left: 20px;
    margin-top: 12px;
    font-size: clamp(1vw, 2.3vw, 3vw);
    font-weight: bold;
    color: white;
  } 
} /*-----------------------------------------------------------------------*/  
/*=========================================================================*/