.dataForm { max-width: 750px;}
.indented {margin-left: 10%;}

.dataForm .example {padding: 3px; font-size: .9em; color: darkgray;}
.dataForm .required {border: 2px solid red !important;}
.dataForm table.required  {border: none !important; color: red; font-weight: bold;}

.optionsWrapper .required label  {color: red !important;}
.dataForm .okay {border: 2px solid green !important;} 
.dataForm table.okay {border: none !important; color: inherit; font-weight: inherit;}

.dataForm div.subTitle {color: gray; font-size: .9em; margin: 4px 0 0 5px;}

 

@media all {

  .checkOwnerDetails .dataFormWithLabels > div:last-of-type > div { justify-content: flex-start; }

  .dataFormWithLabels > div > label, 
  legend { padding-right: 10px; padding-top: 9px; color: #1C2D46; text-transform: uppercase; font-weight: 600; font-size: 14px; width: 23%; text-align: right; float: none; }

  .dataFormWithLabels > div > div,
  .dataFormWithLabels > div > fieldset > div {
    width: 74%;
    float: right;
  }

  fieldset {
    border: 0;
    padding: 0;
  }
  .dataFormWithLabels input[type=text],
  .dataFormWithLabels input[type=email],
  .dataFormWithLabels input[type=url],
  .dataFormWithLabels input[type=password],
  .dataFormWithLabels textarea,
  .dataFormWithLabels select {
    width: 95% ;
    box-sizing:border-box;
    height: 42px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    font-size: 1em;
    padding: 2px 5px;
  }

  .dataFormWithLabels textarea {
    width: 100% !important ;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 1em;
    padding: 2px 5px;
  }


  .dataFormWithLabels input[type=password], .dataFormWithLabels input.halfWidth {
    width: 50% ;
    min-width: 200px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 1em;
    padding: 2px 5px;
  }
  .dataFormWithLabels input[type=text]:focus,
  .dataFormWithLabels textarea:focus,
  .dataFormWithLabels input[type=email]:focus,
  .dataFormWithLabels input[type=url]:focus,
  .dataFormWithLabels input[type=password]:focus,
  .dataFormWithLabels textarea:focus {
    outline: 0;
    border-color: #4697e4;
  }
}
@media (max-width: 500px) {
  .dataFormWithLabels > div {
    margin: 0 0 15px 0;
  }
  .dataFormWithLabels > div > label,
  legend {
    width: 95%;
    float: none;
    margin: 0 0 5px 0;
  }
  .dataFormWithLabels > div > div,
  .dataFormWithLabels > div > fieldset > div {
    width: 95%;
    float: none;
  }
  .dataFormWithLabels input[type=text],
  .dataFormWithLabels textarea,
  .dataFormWithLabels input[type=email],
  .dataFormWithLabels input[type=url],
  .dataFormWithLabels input[type=password],
  .dataFormWithLabels textarea,
  .dataFormWithLabels select {
    width: 95%;
  }
}





@media (min-width: 700px) {
  .dataFormWithLabels > div > label,
  legend {
    text-align: right;
  }
  .cruftsPress .dataFormWithLabels > div > label,
  legend {
    text-align: right;
  }
}






@media (max-width: 600px) {
  .indented { margin-left: 3%; }
}



@media all {
  .dataTableForm { max-width: 750px; }
    .dataTableForm .row {clear: right; }
      .dataTableForm .row > label { float: left; width: 20%; padding-right: 5%; padding-top: 24px; color: #1a1a1a; margin: 0 0 10px 0; font-style: italic; text-align: right; }
      .dataTableForm .row > div  { float: right; width: 74%; padding-top: 4px; color: #1a1a1a;}
      .dataTableForm .row > div > div { float: left; margin-right: 3%; padding-bottom: 10px;}
      .dataTableForm .row > div > div.title {width: 24%; }
      .dataTableForm .row > div > div.initials {width: 24%;}
      .dataTableForm .row > div > div:last-child {width: 45%; margin-right: 0}
      .dataTableForm .row > div > label {margin: 0 0 2px 0; float: none;}

    .dataTableForm input[type=text], .dataFormWithLabels textarea, .dataTableForm input[type=email], .dataTableForm input[type=url], .dataTableForm textarea, .dataTableForm select {width: 95%; }

    .dataTableForm .okay { border: 2px solid green !important; }
    .dataTableForm table.okay { border: none !important; color: inherit; font-weight: inherit; }
    .dataTableForm .required {border: 2px solid red !important;}
    .dataTableForm table.required  {border: none !important; color: red; font-weight: bold;}

}

@media (max-width: 700px) {
  .dataTableForm .row label {text-align: left; width: 22%; padding-right: 2% }
}      
@media (max-width: 600px) {
  .dataTableForm .row label {float: none; width: 100%; text-align: left; padding: 0}
  .dataTableForm .row > div {float: none; width: 100%; }
  .dataTableForm .row > div > div:last-child {width: 45%; margin-right: 0}
}


/* [MR:14/1/26] TODELETE: Don't think this is used anymore so can be deleted in future.

#regForm.Payment h3, #divPaymentSection h3 { background-color: #999999; color: #fff; padding: 8px 5px; }

#regForm { width: 96%; padding: 1% 2%; max-width: 600px; margin: 1% auto; }
  #regForm #regExisting { padding: 1% 2%; }
  #regForm.Norm { background-color: #EEF3F7; }
  #regForm div { margin-bottom: 3px; }
  #regForm .Label { float: left; font-weight: bold; color: #284465; margin-top: 0; font-size: 1em; clear: left; width: 35%; text-align: left; padding-right: 10px; padding-top: 1% }
  #regForm.Account { max-width: 800px; }
    #regForm.Account .Control { float: left; margin-bottom: 1%; clear: none }
  #regForm .Control { clear: both; margin-bottom: 1%; width: 50% }
    #regForm .Control input[type=text], #regForm .Control input[type=email], #regForm .Control input[type=number], #regForm .Control input[type=password], #regForm .Control textarea { width: 88%; }

  #regForm.Account .Control select { width: 88%; padding: 1% 2%; }
  #regForm .Control select { width: 88%; padding: 1% 2%; }
  #regForm input[type=submit].Secure { background-image: url(../Images/template/Secure.svg); background-repeat: no-repeat; background-size: contain; padding-left: 40px; background-position: 10px center }

*/
.validationSummary { color: red; }

.dataForm *:focus { outline: none; }
.dataForm .required_notification { color: #d45252; margin: 5px 0 0 0; display: inline; float: right; clear: both; height: 25px; width: 100%; text-align: right; font-weight: bold; }
.dataForm input[type=text]:focus, .dataForm textarea:focus, #regForminput[type=email]:focus, #regForm input[type=number]:focus, #regForm input[type=password]:focus, #regForm textarea:focus { /* add this to the already existing style */ padding-right: 10%; }

.dataForm input[type=text], .dataForm textarea, .dataForm input[type=email], .dataForm input[type=number], #regForm input[type=password], #regForm textarea { padding: 12px !important; -moz-transition: padding .25s; -webkit-transition: padding .25s; -o-transition: padding .25s; transition: padding .25s; }
  .dataForm select:required, .dataForm input:required, .dataForm textarea:required { background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACpQTFRF+M7O6Wxt+djY63Z3/vX18qeo7ICA++Hi/Ovr75OU8Z2e7omK6GJj////SyXd4gAAAEtJREFUeNqczksKgEAMA9D0Nx/N3P+6uqplQBC7fIGkWNvhM2jfgGeFO7ZYGAmNZk0YCQOTDPjT0WVK81Jq4sqjgGvu4f/r73AJMAA5UgvJnpeyCQAAAABJRU5ErkJggg==') /*../images/forms/red_asterisk.png*/ no-repeat 95% center; }
  .dataForm select:focus:invalid, .dataForm input[type=text]:focus:invalid, .dataForm input[type=email]:focus:invalid, #regForm input[type=number]:focus:invalid, #regForm input[type=password]:focus:invalid, #regForm textarea:focus:invalid { /* when a field is considered invalid by the browser */ background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUpJREFUeNpivBIUxEAJYMIhngnEB4D4PxLeBcQJhAxQhGqcBsT2aHKuQDwfiLcDsTQ2A3SB+CqyRmY+PgYmDg4wjQQ8gPgSEKsgG8AGxOuAmBNZJYugIAOPlRUDm7g4usuFgHg1yA6YAckwE5EBt64ug2x2NgOPtTW2cDIA4kCYAVF4g5qREZdMAhOS/zHA70+fGP7+B0bA16+4DNCFGcCPTfbv+/cMf37+ZPj98SMuA/hhBrzGJvsHaMCHrVsZfj16hMuA1zADLmNNZcAo/PvlC8N/3GFwGWbAAmyyXJqaDJLx8Qx85ua4DJgLM2AZEJ/FCMQXLxi+XL7M8OvhQ2yaDwLxVkakzARKxseAWAIl+kCxAKMRABQoJshhAAL3gRjk1uNwEZgmVM37oOrAAc+C5iyQyVZA7A3NeYrQNAIK5JvQsNqNrAEgwAAO6VaUCoOyHgAAAABJRU5ErkJggg==') /*../images/forms/invalid.png*/ no-repeat 95% center; box-shadow: 0 0 5px #d45252; border-color: #b03535; }

  .dataForm select:required:valid, .dataForm input:required:valid, .dataForm textarea:required:valid { /* when a field is considered valid by the browser */ background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASdJREFUeNpiibkQzEAJYMIhngnEB4D4PxI+ABXHa4AiVOE0ILZHk7OHih+AqgMDFiQFckB8Hoj5CbjaHqpOD4gfIbtgPhGaYYAfqh7uhVggdiIx/EDqY2EGJBBS3SFXxNAqm4sunAAzwBif5na5AgYJbisGZkZ2dCljkAHM6H5frL+GYbb6QjC7VTabQZrPhuH518MMFY96MMICZMBfIH6NLBp7MQQo+J1hoc4aBhl+R4YnHw8xVD6aiM1xr2FeuIkuk3Ezg+Hnnw8Mzz4eZah6PAmX727C0sFcILZBl027kUIobOfCXLAYiC+QGI0g9YthBoDCIRQ9LPCA11D1f5FT4h0gtiLCJReg6u5gy0wgQUMgjgbiTUD8FCr+FMqPhsrfgWkACDAAdeFJlrFXYEcAAAAASUVORK5CYII=') /*../images/forms/valid.png*/ no-repeat 95% center; box-shadow: 0 0 5px #5cd053; border-color: #28921f; }

  .dataForm input[type=text][readonly=readonly], .dataForm input[type=text].readonly {background-color: #eaeaea;}

.dataForm input:focus + .form_hint { display: inline; }
.dataForm input:required:valid + .form_hint { background: #28921f; }
  /* change form hint color when valid */
  .dataForm input:required:valid + .form_hint::before { color: #28921f; }
/* change form hint arrow color when valid */
.dataForm :-moz-placeholder { color: lightgray; }
.dataForm ::-webkit-input-placeholder { color: lightgray; }


/* RESPONSIVE: MOBILE FRIENDLY FORM LAYOUT  */
@media all and (max-width: 480px) {

  #regForm .Label { clear: both; font-weight: bold; margin-top: 5px; color: #000; text-align: left; padding-right: 0; width: 100%; }
  #regForm .Control { width: 100%; clear: both; margin-bottom: 5px; }
  #regForm input[type=text], #regForm input[type=email], #regForm input[type=number], #regForm input[type=password], #regFormtextarea { max-width: 98%; width: 98%; padding: 8px 5px; }
  #regForm .Control select { width: 92%; max-width: 92%; padding: 8px 5px; }
  #regForm .Validator { float: left; clear: right; width: 0; }

  /* FOR MOBILES MAKE A BIG CHUNKY BUTTON EASY TO HIT  */
  #regForm .B { margin-right: 0; float: left }
    #regForm .B input[type=submit] { width: 100%; font-size: 1.4em; padding: 6px 0 6px 0 }

  #regForm input[type=text]:focus, #regForm input[type=email]:focus, #regForm input[type=number]:focus, #regForm input[type=password]:focus, #regForm textarea:focus { /* add this to the already existing style */ padding-right: 5% }
  #regForm input[type=submit].Secure { background-image: url(../Images/template/Secure.svg); background-repeat: no-repeat; background-size: contain; background-position: 10px center; padding-left: 40px; font-size: 1.1em; }
}




/*------------------------------- FORM DEFAULTS - using the .dataForm, .dataFormWithLabels and .hasSubmitButton classes --------------------*/
.dataForm, .dataFormWithLabels { margin: 40px 0 100px 0; max-width: 750px; width: 100%; }


/* Has NO Labels or SUBMIT BUTTON */
.dataForm > div { margin: 0 0 20px 0; width: 70%; }
.dataForm > div:nth-last-of-type(1) { margin: 0 0 0 0; }
.dataForm > div > div { display: block; width: 100%; text-align: left; }
.dataForm > div > div span p { margin-left: 20px; font-size: .9em }


/* Has Labels but no SUBMIT BUTTON */
.dataFormWithLabels > div { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start !important; margin: 0 0 10px 0; gap: 20px; width: 100%; }
.dataFormWithLabels > div > label { width: 30%; text-align: right; }
.dataFormWithLabels > div.row { margin: 0 0 25px 0; }
.dataFormWithLabels > div > div { display: unset !important; width: 70%; text-align: left; float: unset; }
.dataFormWithLabels > div > div > div > label { display: block; margin: 4px 0 8px 0; }


/* Has Labels and a Submit Button */
.dataFormWithLabels.hasSubmitButton > div { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start !important; margin: 0 0 10px 0; gap: 20px; }
.dataFormWithLabels.hasSubmitButton > div > label { width: 30%; text-align: right; }
.dataFormWithLabels.hasSubmitButton > div.row { margin: 0 0 25px 0; }
.dataFormWithLabels.hasSubmitButton > div > div { display: unset !important; width: 70%; text-align: left; float: unset; }
.dataFormWithLabels.hasSubmitButton > div > div > div > label { display: block; margin: 4px 0 8px 0; }
.dataFormWithLabels.hasSubmitButton > div:last-of-type { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; margin: 0; gap: 20px; }
.dataFormWithLabels.hasSubmitButton > div:last-of-type > div { padding: 0 0 0 calc(30% + 20px); width: 70%; display: flex; align-items: flex-start; justify-content: flex-start; margin: 0; }
.dataFormWithLabels.hasSubmitButton > div > div:has(.login) { padding: 0 0 0 calc(30% + 20px); }

.dataFormWithLabels.hasSubmitButton .buttonGroup { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; gap: 35px; margin: 20px 0; }


#editDogPage .dataFormWithLabels.hasSubmitButton > div:nth-last-of-type(2) > div { padding: 0 0 0 calc(23% + 40px); width: 70%; margin: 20px 0; }
#editDogPage .dataFormWithLabels.hasSubmitButton > div:nth-last-of-type(2) > div > div > h3 { margin: 0 0 20px 0; }

#myMarketingPreferencesPage .dataForm { margin-left: 65px; max-width: fit-content; }

#enterShowDefaultPage .dataForm .dataFormWithLabels { margin: 20px 0; }
#enterShowDefaultPage .dataForm > div:nth-last-of-type(1) { margin: 0; }

@media (max-width: 650px) { 

  /* Has NO Labels */ 
  .dataForm { margin-left: 0 !important; }
  .dataForm > div { width: 100%; }

  /* Has Labels but no SUBMIT BUTTON */
  .dataFormWithLabels > div { gap: 5px; flex-direction: column; margin: 0 0 15px 0; }
  .dataFormWithLabels > div > label { width: 100% !important; text-align: left; }
  .dataFormWithLabels > div > div { width: 100%; }
  .dataFormWithLabels > div > div > label { width: 100% !important; }
  .dataFormWithLabels > div:last-of-type > div { padding: 0; width: 100%; }


  /* Has Labels and a Submit Button at the Bottom*/
  .dataFormWithLabels.hasSubmitButton > div { gap: 5px; flex-direction: column; margin: 0 0 25px 0; }
  .dataFormWithLabels.hasSubmitButton > div > label { width: 100% !important; text-align: left; }
  .dataFormWithLabels.hasSubmitButton > div > div { width: 100%; }
  .dataFormWithLabels.hasSubmitButton > div > div > label { width: 100% !important; }
  .dataFormWithLabels.hasSubmitButton > div:last-of-type > div { padding: 0; width: 100%; }
  .dataFormWithLabels.hasSubmitButton > div > div:has(.login) { padding: 0; width: 100%; }

  #editDogPage .dataFormWithLabels.hasSubmitButton > div:nth-last-of-type(2) { margin: 0; }
  #editDogPage .dataFormWithLabels.hasSubmitButton > div:nth-last-of-type(2) > div { padding: 0; width: 100%; }
}