/* START - Main styles for the container/wrapper */

/*  setting flex layout, column with centered items (question div, next/previous buttons) */
.pf-container {
    border: 1px solid #dedede;
    border-radius: 3px;
    /* display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; 
      padding-bottom: 80px;*/
    padding: 0 80px 80px;
  }
  
  /*force focus outline styles inside container (visually more pleasing) */
  .pf-container *:focus {
    outline: 1px auto -webkit-focus-ring-color;
    outline: 1px dotted #000;
  }
  
  /* form uses flex layout, setting it to show as a column with centered items (fieldset, inputs) */
  .pf-container form {
    /* min-height: 404px; */
    padding: 0 10px;
    /* display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; */
    width: 100%;
  }
  
  /* END - Main styles for the container */
  
  /* START - Styles inside the form element */

  .pf-container p {
      font-size: 20px;
  }
  
  .pf-container fieldset {
    text-align: left;
    /* width:70%; */
    margin: 0 auto;
  }
  
  .pf-container .question {
    width: 100%;
    /* margin-top: 40px; */
  }
  
 
  .pf-container .question:focus {
    outline: none;
  }
  .pf-container .progressWrapper:focus {
    outline: none;
  }
  .pf-container .field-name {
    font-weight: 700;
    font-size: 24px;
    font-family: Lato, sans-serif;
    text-align: left;
    /* margin:0 15px; */
    margin: 0;
  }
  .pf-container legend {
    float: none !important;
  }
  
  .pf-container ul {
    display: inline-block;
    text-align: left;
  }
  
  /* START - radio button styles */
  .pf-container input[type="radio"] {
    opacity: 0;
    position: fixed;
  }
  

  
  .pf-container .radio {
    background-color: #f8f8f8;
    color: #000a3d;
    border: 2px solid #dadada;
    border-radius: 4px;
    padding: 11px 12px;
    /* text-align: center;	 */
    /* text-align: left; */
    /* margin: 8px 15px; */
    margin: 8px 0;
    font-weight: normal;
    min-width: 260px;
    max-width: 360px;
    /* flex: 1 1 50%; */
  }
  .pf-container .radio.active {
    background-color: #4f5b8b;
    color: #fff;
    border: 2px solid #000a3d;
  }
  
  .pf-container .checkbox-group {
    margin-left: 35px;
  }

  /* END - radio button styles */
  
  /* START - forcing focus styles*/
  .label-focus {
    /*force focus*/
    outline: 1px auto -webkit-focus-ring-color;
    outline: 1px dotted #000;
  }
  
  /*ie & edge fix*/
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .label-focus {
      outline: 1px dotted #212121;
    }
  }
  @supports (-ms-ime-align: auto) {
    .label-focus {
      outline: 1px dotted #212121;
    }
  }
  /* END - forcing focus styles*/
  /* END - Styles inside the form element */
  
  /* START - result styles */
  
  /* forcing the focus outline to hide on the results */
  #allResults:focus, #programFinderForm {
    outline: none !important;
  }
  
  
  .result-header h2,
  .result-header h3 {
    margin-top: 0;
  }
  
  .result-footer .btn {
    /* border: 1px solid #a1e5e1;
      background-color: #5dbfbc;
      color: #000a3d;
      font-weight: bold; 
      min-width:300px;*/
    width: 100%;
  }
  
  /* END - result styles */
  
  /* START - styles for next and previous buttons */
  .btn-next {
    background-color: #c7cfef;
    border: 1px solid #4f5b8b;
    border-radius: 4px;
    padding: 5px 0;
    width: 270px;
    max-width: 270px;
    font-size: 16px;
    margin-top: 20px;
    align-self: flex-start;
    margin-left: 10px;
  }
  
  .btn-next.disabled {
    background-color: #dedede;
  }
  
  .btn-prev,
  .btn-startOver {
    font-size: 14px;
    /* text-align: center; */
    text-align: left;
    text-decoration: underline !important;
    font-family: "Noto Sans", sans-serif;
    display: block;
    margin-left: 5px;
  }
  
  .btn-startOver {
    font-size: 24px;
    padding: 0 !important;
    width: fit-content;
  /* max-width: 90px; */
  }
  
  #btnStartOver {
    padding: 1px 6px;
    margin-top: 30px;
  }
  /* END - styles for next and previous buttons */
  
  /* START - styles for progress bar */
  
  progress {
    margin-top: 20px;
    border-radius: 5px;
    height: 10px;
    width: 100%;
    /* width: 70% */
    border: 1px solid #c5cae9;
    background-color: #fff;
    border-radius: 5px;
    color: #c5cae9;
  }
  /*chrome*/
  progress::-webkit-progress-bar {
    background-color: #fff;
    border-radius: 5px;
    border-color: #c5cae9;
  }
  progress::-webkit-progress-value {
    background-color: #c5cae9;
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  /*firefox*/
  ::-moz-progress-bar {
    background-color: #c5cae9;
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  
  /*ie & edge fix*/
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    progress[value] {
      background-color: #fff;
      border-radius: 5px;
      color: #c5cae9;
      border: 1px solid #c5cae9;
    }
    ::-ms-fill {
      border: none;
    }
  }
  @supports (-ms-ime-align: auto) {
    progress[value] {
      background-color: #fff;
      border-radius: 5px;
      color: #c5cae9;
      border: 1px solid #c5cae9;
    }
    ::-ms-fill {
      border: none;
    }
  }
  /* END - styles for progress bar */
  
  .hr {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  
  /* responsive fix */
  
  @media screen and (max-width: 768px) {
    .pf-container fieldset {
      width: 100%;
    }
    /* .result-container {        
          padding: 15px!important;  
      } */
    .btn-next {
      width: 100%;
      max-width: 270px;
    }
  
    .pf-container .radio {
      min-width: none;
    }
  
    .pseudoInput {
      width: 100% !important;
    }
  
    .pf-container {
      padding: 15px;
    }
  }
  
  /* NEW V4 STYLES, TO MERGE IN WHEN FINAL */
  
  .pf-container .datalist {
    width: 335px;
    min-width: 335px;
    border: none;
    margin: 15px 0 3px 0;
    border-radius: 4px;
  }
  
  .datalist::-webkit-calendar-picker-indicator {
    opacity: 0;
  }
  
  .pf-container .datalist:focus {
    outline: 1px auto -webkit-focus-ring-color !important;
  }
  .pf-container .datalist-wrapper {
    border-bottom: 1px solid #000;
    width: max-content;
  }
  
  /* fix for IE */
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .pf-container .datalist-wrapper {
      width: 335px;
      max-width: 335px;
    }
  }
  
  /* change it back for edge */
  @supports (-ms-ime-align: auto) {
    .pf-container .datalist-wrapper {
      width: 335px;
      max-width: 335px;
    }
  }
  
  /* fix for IE */
  @media all and (max-width: 768px) and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
    .pf-container .datalist-wrapper {
      width: 100% !important;
      max-width: 335px;
    }
    .datalist-wrapper .glyphicon {
      margin-top: 15px;
      float: right !important;
    }
  }
  /* change it back for edge */
  @supports (-ms-ime-align: auto) and (max-width: 768px) {
    .pf-container .datalist-wrapper {
      width: 100% !important;
      max-width: 335px;
    }
    .datalist-wrapper .glyphicon {
      float: none !important;
    }
  }
  
  /* grid force classes */
  
  #resultContainer {
    background-color: #ced2ed;
  }
  
  #allResults {
    margin: 0 0 38px;

  }
  
  .result ul {
    display: block!important;
  }
  .result {
    padding: 0 25px 25px 25px;
    border-radius: 3px;
    min-height: 20px;
    background-color: #fff;
    /* border: 1px solid #e3e3e3;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); */
    /* margin: 5px; */
  }
  
 
  #intro {
    margin: 50px 0 0 10px;
  }
  
  
  .checkbox {
    font-weight: normal !important;
  }
  
  /* V4.2 UPDATES */
  .pseudoInput {
    display: block;
    background-color: #f8f8f8;
    color: #000a3d;
    border: 2px solid #dadada;
    border-radius: 4px;
    padding: 11px 12px;
    margin: 8px 0;
    font-weight: normal;
    width: 360px;
    font-size: 16px;
    line-height: 23px;
    padding: 11px 12px;
    height: 100%;
    min-height: 49px;
  }
  
  .badge-temp {
    display: inline-block;
    min-width: 10px;
    padding: 5px 15px;
    font-size: 16.5px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #2572b4;
    border-radius: 10px;
  }
  
  /* 
  #program-finder.negativeResult, #program-finder.result-container.negativeResult {
      background-color: none!important;    
  }
  
  #program-finder.negativeResult #allResults {
      display:block;        
  }
  
  #program-finder.negativeResult .result{
      border: none;
      background-color: none;
      width: 100%;
      box-shadow:none;
      padding:0!important;
  }
  #program-finder.negativeResult #allResults{   
      padding:0!important;
  }
  #program-finder.negativeResult .btn, #program-finder.negativeResult p{
      text-align: left;
      width: auto;
  }
  #program-finder.negativeResult.result-container .progressWrapper {
      padding:0!important;
  } */
  
  /* details/summary view all selections styles */
  
  .viewSelections {
    background-color: #fff;
    margin: 0 20px;
  }
  
  .viewSelections summary,
  .viewSelections summary:focus,
  .viewSelections summary:hover {
    background-color: #fff;
  }
  

  #tool {
    padding-top:20px;
  }