<style>
    
    * {
        box-sizing: content-box;
      
   
    }
    /*Boiler plate*/
    
    body {
        /* This causes anything to be centered on the screen */
        
        margin: 0;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        color: #333;
        background-color: #9bd;
    }
    
    .centercontent{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .border {
        border: solid 1px red;
    }
    
    @media screen and (max-width:124px) {
      
      .gr_label {
         grid-column:1/2;
      }  
      
      .gr_pnl_4 {
            grid-template-columns: 1fr;
        }
    }
    
    
    .gr_label {
        font-family: Tahoma;
        height: max-content;
        grid-column: 1/2;
        text-align: right;
        padding-top: .5ch;
        align-content: center;
        margin: 0px;
        font-weight: normal;
        font-size: 12px;
        padding-right:1em;
        user-select: none;
        //border:1px green solid;
        
    }
    
        /*      If you put input in a div you can control its width otherwise it take sup the full width of the grid item*/
    
    .gr_sm {
        width: 9ch;
    }
    
    .gr_lg {
        width: 21ch;
    }
    
    .gr_xl {
        width: 31ch;
    }
    
    /* ************************************************************************************************************************************ */
    /*Some <input>'s have what are called 'spinners' (clock, calendar, up/down arrows). These spinners increase the height of <input> by 4px
      /*At the moment, it's by 2px top and bottom so we need to pad out 'non-spinner' <input>'s accordingly to make the height consistent */
    
    .gr_input[type="date"],
    .gr_input[type="time"]{
          font-family:'Courier New', Courier, monospace;        
      dmargin:0px;
      padding-left: 4px;
      
      
      /*If you change top and bottom padding, you need to increase non-spinner by 4px */
      padding-top: 0px;
      padding-bottom: 0px;
      /outline:none;
                
    }
    .gr_textarea{
      padding-top: 6px;
      padding-bottom: 2px;
      
      resize:none;      

    }
    
    .gr_select{

      padding-top:1px;
      padding-bottom:1px;
      padding-left:0px !important;
      
    
    }
    .gr_input,
    .gr_select,
    .gr_textarea
     {
      
      font-family:'Courier New', Courier, monospace;          
      font-size:14px;
      height: max-content;
        
        doutline:none;
        border: 1px rgb(155, 197, 199) solid;
        border-radius: 2px;
        background-color: azure;
        color: black;
        padding-left: 4px;
        padding-right: 4px;
        
        margin-left:4px;
        font-weight:normal;
                
        /*Added to give small gap between fields as it looks better */
        margin-bottom:1px;
    }
    

    
    
    /*If you change top and bottom padding, you need to decrease spinner <input't> by 4px */
    
    
    

    
    .gr_input[type="email"],
    .gr_input[type="password"],
    .gr_input[type="text"],
   .gr_textarea {
         padding-top:3px;
         padding-bottom:3px;
        
      
      padding-left: 4px;
        border-radius: 2px;
        
        /*Checked*/
        grid-column:2/4;
               
      
    }
    
    
    
    /* *************************************************************************************************************************** */
    .gr_input[type="email"]:focus,
    .gr_input[type="password"]:focus,
    .gr_input[type="text"]:focus,
    .gr_input[type="date"]:focus,
    .gr_input[type="time"]:focus,
    .gr_select:focus,
    .gr_textarea:focus{
       background-color:black;
       color:yellow;
    }    
    
























    
    
      
      
    
    
    
    
    
    
    
    @media screen and (max-width:1024px) {
      width:100vw;
      .gr_label {
            
            grid-column: 2/4;
            text-align: left;
        }
    }
    
    .gr_break {
      /*Checked*/  
      grid-column: 1/4;
        border-top: 1px  solid black;
        dborder-bottom: 1px rgb(216, 212, 212) solid;
        
        margin-bottom: 2px;
        margin-top: 1px;
    }
    
    .bm {
        margin-bottom: 0px;
    }
    
    .bm1 {
        margin-bottom: 10px;
    }
    
    .bm2 {
        margin-bottom: 15px;
        margin-top: 15px;
    }
    
    .gr_hr {
        grid-column: 1/4;
        margin: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 5px;
        border: none;
        background-color: rgb(182, 182, 182);
    }
    
    .gr_footer {
        height: max-content;
        grid-column: 1/6;
        margin-top: 10px;
        font-family: Tahoma;
        font-size: 7px;
        border-top: grey 1px solid;
        padding: 3px;
        //padding-left: 3px;
        /*This is linked to the padding in gr_panel_4*/
        margin-left: -18px;
        margin-right: -18px;
        text-align:center;
    }
    
    .gr_footer:before {
        
      content: "(c) Courier Systems 2020";
    }
    
    .gr_section {
      
      font-size: 14px;
      font-weight: 900;
      
      //border-radius: 3px;
      
      grid-column:1/4;
      padding:3px;
      //margin-right:-18px;
      //margin-left:-18px;
      text-left:center;
      color:black;        
      border-bottom:1px black solid;
      margin-top:1px;
      margin-bottom:3px;
      
      
       

}




    .gr_header {
        font-family: Tahoma;
        font-size: 16px;
        font-weight: normal;
        padding: 6px;

        border-radius: 0px;
        margin-top: 0px;
        
        
        /*This is linked to the padding of the main container div*/
        /*We want the title to be full width like a vb6 form */
        margin-left: -20px;
        margin-right: -20px;
        border-top-left-radius:4px;
        border-top-right-radius:4px;
        
        grid-column: 1/4;
        
        
        background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(12, 109, 186, 1) 0%, rgba(0, 212, 255, 1) 100%);
        color: white;
        margin-bottom:10px;
    }
    
    .gr_pnl_4 {
        display: grid;
        height: max-content;
        /* This ensures the column is the height of the content otherwise it becomes the height of its container and grid rows are apportion */
        grid-template-rows: minmax(min-content, max-content);
        /*
        
        */
        /* <label> <checkbox/radio> <input> */
        grid-template-columns: minmax(min-content, max-content)  1fr;
        //grid-template-columns: 50% 1fr;
        
        
        /* Best practice states that modals should never be more than 50% of screen */
        //width:50%;
        
        
        margin-top:0px;
        padding-top: 0px;
        padding-left: 20px;
        padding-right: 20px;
        border-style: solid;
        border-width: 1px;;
        border-top-left-radius:5px;
        border-top-right-radius:5px;
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
        background-color: rgb(225, 225, 225);
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.45);
        border-color:black;
    }
    
    
    .gr_tm {
        margin-top: 10px;
    }
    
    
    .gr_button{
       padding:4px;
     
    }
    
    /*Description area, normally just below the heading title */
    .gr_intro{
       grid-column:1/3;
       font-family:Tahoma;
       font-size:14px;
       padding-bottom:5px;
       border-bottom:1px black solid;
       text-align:justify;
       text-justify:inter-word;
       margin-bottom:12px;
    }
    
    /*Ensures content fits entire grid*/
    .gr_fullwidth{
       grid-column:1/3;
    }
    .gr_bm {
      margin-bottom: .5em !important;/* Overrides any other margin-bottom if set */
   }
   
  .gr_rm {
   margin-right: 5px !important;/* Overrides any other margin-bottom if set */
}
  
  .gr_width_1280{
   min-width:1280px;
  }

  .gr_width_800{
   min-width:800px;
  }
  
  .gr_width_640{
   min-width:640px;
  }
  .gr_width_480{
   min-width:480px;
  }

  .gr_width_320{
   max-width:320px;
  }
  .gr_width_240{
   max-width:240px;
  }

  .gr_width_66percent{
   min-width:66%;
  }
  

.gr_dialogtext {
   border:none;
   background-color:transparent;
   resize:none;
   text-align:justify;
   text-justify:inter-word;
   font-size:14px;
}

.gr_hidden {
   display: none;
}
/*Used to style the <span> element which contains errors*/
.gr_fielderror{
   height:1em;
margin-left:4px;

font-size:11px;
color:red;
grid-column:2/3;
ddtext-align:center;


//font-weight:800;
}

/*Used to hilight the input field which has an error*/
.gr_bordererror {
   border: solid 2px red !important;
}
</style>