* {
        margin: 0;
        padding: 0;
          }

          html {
              height: 100%;
          }

          p {
            color: grey;
          }

          #heading {
            text-transform: uppercase;
            color: #ffffff;
            font-weight: normal;
          }

          #msform {
              text-align: center;
              position: relative;
              margin-top: 20px;
          }

          #msform fieldset {
              /* background: white; */
              border: 0 none;
              border-radius: 0.5rem;
              box-sizing: border-box;
              width: 100%;
              margin: 0;
              padding-bottom: 20px;

              /*stacking fieldsets above each other*/
              position: relative;
          }

          .form-card {
            text-align: left;
          }

          /*Hide all except first fieldset*/
          #msform fieldset:not(:first-of-type) {
              display: none;
          }

          /* #msform input, #msform textarea {
              padding: 8px 15px 8px 15px;
              border: 1px solid #ccc;
              border-radius: 0px;
              margin-bottom: 25px;
              margin-top: 2px;
              width: 100%;
              box-sizing: border-box;
              font-family: montserrat;
              color: #2C3E50;
              background-color: #ECEFF1;
              font-size: 16px;
              letter-spacing: 1px;
          } */

          #msform input:focus, #msform textarea:focus {
              -moz-box-shadow: none !important;
              -webkit-box-shadow: none !important;
              box-shadow: none !important;
              border: 1px solid #ffffff;
              outline-width: 0;
          }

          /*Next Buttons*/
          #msform .action-button {
              width: 200px;
              background: #ffffff;
              font-weight: bold;
              color: white;
              border: 0 none;
              border-radius: 0px;
              cursor: pointer;
              padding: 10px 5px;
              margin: 10px 0px 10px 5px;
              float: center;
          }

          #msform .action-button:hover, #msform .action-button:focus {
              background-color: #ffffff;
          }

          /*Previous Buttons*/
          #msform .action-button-previous {
              width: 200px;
              background: #616161;
              font-weight: bold;
              color: white;
              border: 0 none;
              border-radius: 0px;
              cursor: pointer;
              padding: 10px 5px;
              margin: 10px 5px 10px 0px;
              float: center;
          }

          #msform .action-button-previous:hover, #msform .action-button-previous:focus {
              background-color: #000000;
          }

          /*The background card*/
          .card {
              z-index: 0;
              border: none;
              position: relative;
          }

          /*FieldSet headings*/
          .fs-title {
              font-size: 25px;
              color: #673AB7;
              margin-bottom: 15px;
              font-weight: normal;
              text-align: left;
          }

          .purple-text {
            color: #673AB7;
              font-weight: normal;
          }

          /*Step Count*/
          .steps {
            font-size: 25px;
              color: gray;
              margin-bottom: 10px;
              font-weight: normal;
              text-align: right;
          }

          /*Field names*/
          .fieldlabels {
            color: gray;
            text-align: left;
          }

          /*Icon progressbar*/
          #progressbar {
              margin-bottom: 10px;
              overflow: hidden;
              color: lightgrey;
          }

          #progressbar .active {
              color: #000000;
          }

          #progressbar li {
              list-style-type: none;
              /* font-size: 12px; */
              width: 15%;
              float: left;
              text-align: center;
              position: relative;
              font-weight: 200;
          }

          /*Icons in the ProgressBar*/
          #progressbar #filtrasi:before {
              font-family: FontAwesome;
              content: "";
              color: #0077FF;
          }

          #progressbar #memilih_produk:before {
              font-family: FontAwesome;
              content: "";
              color: #0077FF;
          }

          #progressbar #memilih_jadwal:before {
              font-family: FontAwesome;
              content: "";
              color: #0077FF;
          }

          #progressbar #akad_pembelajaran:before {
              font-family: FontAwesome;
              content: "";
              color: #0077FF;
          }

          #progressbar #pembayaran:before {
              font-family: FontAwesome;
              content: "";
              color: #0077FF;
          }

          #progressbar #selesai:before {
              font-family: FontAwesome;
              content: "";
              color: #0077FF;
          }

          /*Icon ProgressBar before any progress*/
          #progressbar li:before {
              width: 20px;
              height: 20px;
              line-height: 45px;
              display: block;
              font-size: 20px;
              color: #ffffff;
              background: lightgray;
              border-radius: 50%;
              margin: 15px auto 10px auto;
              padding: 2px;
          }

          /*ProgressBar connectors*/
          #progressbar li:after {
              content: '';
              width: 100%;
              height: 2px;
              background: lightgray;
              position: absolute;
              left: 0;
              top: 25px;
              z-index: -1;
          }

          /*Color number of the step and the connector before it*/
          #progressbar li.active:before, #progressbar li.active:after {
            
              background: #0077FF;
          }

          /*Animated Progress Bar*/
          .progress {
            height: 10px;
          }

          .progress-bar {
            background-color: #0077FF;
          }

          /*Fit image in bootstrap div*/
          .fit-image{
              width: 100%;
              object-fit: cover;
          }

          /* @media (max-width: 560px) {  
            #progressbar li.active:before, #progressbar li.active:after {
                background: #0077FF;
            }
          } */