:root {
    --ets-body-font: "Open Sans", "Font Awesome 5 Pro", sans-serif;
    --ets-1unit: 8px;
    --ets-2units: 16px;
    --ets-3units: 24px;
    --ets-4units: 32px;
    --ets-required-icon-width: 12px;
    --ets-azure: rgb(48, 114, 190);
    --ets-azure-extra-light: rgb(216, 234, 255);
    --ets-body-black: rgb(21, 21, 21);
    --ets-gray-medium: rgb(148, 148, 148);
    --ets-midnight: rgb(0, 51, 86);
    --ets-midnight-medium-dark: rgb(55,91,132);
    --ets-navy: rgb(0, 48, 130);
    --ets-gray-medium-dark: #3d3d3d;
    --ets-status-error: rgb(168, 0, 5);
    --ets-status-error-light: rgb(237, 194, 196);
    --ets-status-error-extra-light: rgb(244, 220, 221);
    --transitionSlowInFastOut: "cubic-bezier(0.2, 0, 0.1, 1)";
  }
  
  .form-input-container {
    width: 100%;
  }
  
  .form-error {
    height: 12px;
    display: block;
    position: relative;
    font-size: 1rem;
    direction: ltr;
    transition: none;
    border: 0;
    color: var(--ets-status-error);
    /* margin: 0 var(--ets-1unit) var(--ets-2units) var(--ets-required-icon-width); */
    margin: 0 var(--ets-1unit) var(--ets-2units) 22px;
  }
  #form-error-phone {
    margin-top: 5px;
  }
  
  .form-error-nopad {
    clear: both;
    padding-left: 0px;
    color: var(--ets-status-error);
    font-size: 1rem;
  }
  
  .dev-notes {
    margin: 0 auto 2rem;
    padding: 2em !important;
    font-size: 0.75em;
    background-color: white;
    border-radius: 16px;
    /* box-shadow: 0 0 8px rgba(0 0 0 / 25%); */
    box-shadow: 5px 10px 40px rgb(0 0 0 / 25%);
    max-width: 620px;
    margin-bottom: 32px;
  }
  
  .dev-notes h1 {
    margin: 0;
    padding: 0;
    color: var(--ets-midnight);
    font-family: var(--ets-body-font);
    font-weight: 600;
    line-height: 38.4px;
    font-size: 32px;
    padding-bottom: 24px;
  }
  .dev-notes h2 {
    font-size: 1.125rem;
  }
  .dev-notes h3 {
    font-size: 1.125rem;
  }
  .dev-notes h4 {
    font-size: 1.125rem;
  }
  .dev-notes p {
    font-size: 1.125rem !important;
    line-height: 2rem;
  }
  
  .dev-notes ul,
  .dev-notes ol {
    margin: 0;
    list-style: none;
    padding-left: 0;
  }
  
  .dev-notes ul + ol {
    margin-top: 1em;
  }
  
  .dev-notes textarea,
  .dev-notes input[type="text"] {
    display: block;
    position: relative;
     /*margin: 0 var(--ets-1unit) var(--ets-1unit) 0; */
    margin: 0 var(--ets-1unit) 4px 0;
    /* padding: 0 var(--ets-1unit) 0 var(--ets-required-icon-width); */
    padding: 0 var(--ets-1unit) 0 22px;
    width: 100%;
    color: var(--ets-body-black);
    background-color: white;
    font-family: var(--ets-body-font);
    font-size: 18px;
    line-height: 50px;
    border: 1px solid var(--ets-gray-medium);
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
  }
  
  .dev-notes input.field-error, .dev-notes textarea.field-error, .dev-notes select.field-error {
    background: #f4dcdd;
    border: 2px solid #a80005;
  }
  
  .dev-notes textarea:hover,
  .dev-notes input[type="text"]:hover {
    outline: 0;
    border-color: var(--ets-azure);
    border-width: 1px;
    box-shadow: 0 0 0 1px var(--ets-azure);
    background-color: var(--ets-azure-extra-light);
  }
  
  .dev-notes textarea:focus,
  .dev-notes input[type="text"]:focus {
    outline: 0;
    background-color: var(--ets-azure-extra-light);
    border-color: var(--ets-azure);
    box-shadow: 0 0 0 1px var(--ets-azure);
  }
  
  .dev-notes input[type="checkbox"] {
    padding: 12px;
  
    color: #151515;
  
    font-weight: 400;
  
    font-size: 16px;
  
    border: 2px solid transparent;
  }
  
  .accordion-panel-2 label:hover,.accordion-panel-2 label:active,.accordion-panel-2 input[type="checkbox"]:hover+label,.accordion-panel-2 input[type="checkbox"]:active+label {
  /* .dev-notes input[type="checkbox"]:hover {  */
  /* label:hover, label:active,input[type="checkbox"]:hover+label,input[type="checkbox"]:active+label */
    padding: 5px;
    color: #003082;
    background-color: #deeaff;
    border-color: transparent;
  }
  
  
  .accordion-panel-2 label:focus-within,.accordion-panel-2 label:active,.accordion-panel-2 input[type="checkbox"]:focus-within+label,.accordion-panel-2 input[type="checkbox"]:active+label,.label-input-focus {
  /* .dev-notes label:focus-within{ */
  /* label:focus,label:active,input:focus+label,input:active+label { */
  /* .dev-notes input[type="checkbox"]:focus { */
    padding: 5px;
    color: #003082;
    background-color: #deeaff !important;
    border: 2px solid #3072be !important;
    border-radius: 8px;
    /* border-color: #3072be  */
  }
  
  
  .agree label:hover,.agree label:active,.agree input[type="checkbox"]:hover+label,.agree input[type="checkbox"]:active+label {
  /* .dev-notes input[type="checkbox"]:hover {  */
  /* label:hover, label:active,input[type="checkbox"]:hover+label,input[type="checkbox"]:active+label */
    padding: 5px;
    color: #003082;
    background-color: #deeaff;
    border-color: transparent;
  }
  /* label.fw-400 {
    padding: 5px;
  } */
  label.fw-400:hover {
    color: #003082;
    background-color: #deeaff;
    border-color: transparent;
  }
  
  
  .agree label:focus-within,.agree label:active,.agree input[type="checkbox"]:focus-within+label,agree input[type="checkbox"]:active+label, label.fw-400:focus-within, label.fw-400:active {
  /* .dev-notes label:focus-within{ */
  /* label:focus,label:active,input:focus+label,input:active+label { */
  /* .dev-notes input[type="checkbox"]:focus { */
    /* padding: 5px; */
    color: #003082;
    background-color: #deeaff !important;
    border: 2px solid #3072be !important;
    border-radius: 8px;
    /* border-color: #3072be  */
  }
  
  
  /* to do:
  - remove the table structure from the products on the forms.
      It worked in the past with SF forms, but it's causing issues with the new style guidelines
  - style the checkbox + labels
    use --ets-azure-extra-light as the background
  */
  
  /*
  
  The following works, but it doesn't look right. See above.
  
  .dev-notes table.inner-opts tr:hover {
      all: revert;
      margin: 0;
      padding: .375em calc(.375em + var(--ets-required-icon-width)) .375em 0;
      border: 1px solid transparent;
      border-radius: 8px;
      transition: all .2s ease-in-out;
      border-color: transparent;
      background-color: var(--ets-azure-extra-light);
  } */
  
  .dev-notes select {
    display: block;
    /* padding: 10px var(--ets-1unit) 10px var(--ets-required-icon-width); */
    padding: 10px var(--ets-1unit) 10px 22px;
    width: 100%;
    position: relative;
    font-family: var(--ets-body-font);
    font-size: 1.125rem;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid var(--ets-gray-medium);
    background-color: transparent;
    height: 50px;
    margin: 0 var(--ets-1unit) var(--ets-1unit) 0;
    /* padding: 0 var(--ets-1unit) 0 var(--ets-required-icon-width); */
  }
  
  .dev-notes select:after {
    position: absolute;
    top: -1px;
    right: -1px;
    content: "";
    font: var(--fa-font-light);
    display: block;
    width: 2.75rem;
    height: calc(100% + 1px);
    color: white;
    /* background-color: var(--ets-midnight); */
    text-align: center;
    line-height: calc(100% + 2 * var(--ets-1unit) + 10px);
    pointer-events: none;
    border-radius: 0 8px 8px 0;
    background-color: transparent;
  }
  
  .as-label,
  .dev-notes label {
    position: relative;
  
    display: inline-block;
  
    /* margin: 0 0 10px 0; */
  
    padding: 5px 10px 4px 5px;
  
    font-size: 1rem;
  
    font-weight: 600;
  
    border: 2px solid transparent;
  
    border-radius: 8px;
  }
  
  label.fw-400 {
    font-weight: 400;
    cursor: pointer;
    padding: 5px;
  }
  
  span.required,
  .dev-notes span.required {
    color: #a80005;
    font-size: 1.125rem !important;
    font-weight: bold;
  }
  
  .dev-notes input[type="submit"] {
    margin: var(--ets-1unit);
    padding: var(--ets-1unit) var(--ets-3units);
    color: white;
    background-color: var(--ets-midnight-medium-dark);
    font-family: var(--ets-body-font);
    font-size: 14px;
    font-weight: 600;
    border: 2px solid white;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
  }
  
  .dev-notes input[type="submit"].disabled {
    /* opacity: 0.5; */
    color: #595959;
    background-color: #d7d7d7;
    pointer-events: none;
  }
  
  .dev-notes input[type="submit"]:hover {
    /* outline: 0; */
    /* border-color: var(--ets-azure); */
    /* border-width: 1px;*/
    /* box-shadow: 0 0 0 1px var(--ets-azure); */
    background-color: #000;
  }
  
  .dev-notes input[type="submit"]:focus {
    outline: 4px solid #3072be;
    background-color: #000;
  }
  
  .dev-notes table {
    margin-bottom: 10px;
  }
  
  .dev-notes table tr td {
    padding: 0.75rem 0 0 0;
  }
  
  .dev-notes .question-container-required {
    margin-top: 7px;
    float: left;
    width: 0.7em;
    color: var(--ets-status-error);
    font-size: 1.125rem !important;
    font-weight: bold;
  }
  .dev-notes .question-container-label {
    float: left;
    width: 90%;
  }
  
  .question-container-label p {
    float: left;
    width: 90%;
    margin: 0;
  }
  
  .radio-container-wrap-indent p {
    margin: 0;
  }
  
  .dynamic,
  #dyn-business,
  #dyn-progSupport,
  #dyn-department,
  #hei-options,
  #mft-options,
  #epp-options,
  #assessment-header {
    display: none;
  }
  
  .clearboth {
    clear: both;
  }
  
  body {
    font-family: var(--ets-body-font);
    background-color: var(--ets-aem-gray);
  }
  
  .radio-group label {
    display: block;
  }
  
  label.required::before {
    content: "*";
    color: var(--ets-status-error);
  }
  
  /* -- -- -- */
  
  .nowrap {
    white-space: nowrap;
  }
  
  .btn-trigger {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 12px;
  }
  
  .btn-trigger:hover {
    color: var(--ets-navy);
    background-color: var(--ets-azure-extra-light);
  }
  
  .btn-trigger:focus {
    color: var(--ets-navy);
    border-color: var(--ets-azure);
  }
  
  .as-checkbox::before {
    content: "+";
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 1em;
    overflow: hidden;
  }
  
  .as-checkbox + span {
    vertical-align: middle;
  }
  
  [aria-expanded="true"] .as-checkbox::before {
    content: "–"; /* en dash */
  }
  
  .field-wrapper {
    position: relative;
  }
  .field-wrapper i {
    position: absolute;
    top: 12.5px;
    right: var(--ets-1unit);
    z-index: 1;
    color: var(--ets-status-error);
    font-size: 24px;
    display: none;
  }
  .field-wrapper .field-error + i {
    display: block;
  }

  /* master checkbox styles */
.checkbox-colums {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  box-sizing: border-box;
  margin-left: 52px;
  margin-bottom: 30px;
  padding-top: 5px;
}
.master-checkbox {
  display: block;
  width: 100%;
}
.as-label.lg-label-checkbox {
  padding-left: 40px;
  cursor: pointer;
}
.as-label.lg-label-checkbox:hover, .as-label.lg-label-checkbox:focus {
  color: #003082;
  background-color: #deeaff;
  border-color: transparent;
}
label.lg-label-checkbox {
  position: relative;
  padding-left: 40px;
  min-height: 22px;
  line-height: 23px;
}
@media (max-width: 600px) {
  .as-label.lg-label-checkbox {
    padding-left: 35px;
    white-space: normal;
  }
  label.lg-label-checkbox {
    padding-left: 35px;
  }
  .checkbox-colums {
    margin-left: 15px;
  }
  .master-checkbox {
    white-space: nowrap;
  }
  .form-error {
    margin-bottom: 32px;
  }
}
@media (max-width: 359px) {
  .checkbox-colums {
    grid-template-columns: repeat(1, 1fr);
  }
}
.lg-label-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.lg-label-checkbox i {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  background-image: url("https://www.ets.org/etc.clientlibs/ets/clientlibs/clientlib-site/resources/images/checkbox_unchecked.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg-label-checkbox input:indeterminate + i:after {
  content: '';
  background-color: #083454;
  width: 13px;
  height: 3px;
}
.lg-label-checkbox input:checked + i {
  background-image: url("https://www.ets.org/etc.clientlibs/ets/clientlibs/clientlib-site/resources/images/checkbox_checked.png");
}