<header role="banner" class="container-fluid nopads nopads mb-5">
  <div class="card index-9">
    <div class="card-body card--shadow">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 align-self-center">
            <figure class="m-0">
              <img src="{{img_src}}/logo-velke.svg" alt="logo společnosti Moneta">
            </figure>
          </div>
          <div class="col-lg-6 align-self-center">
            <h1 class="text-center h4 pb-0">Kreditní karta</h1>
          </div>
          <div class="col-lg-3 align-self-center text-right">
            <h4 class="h4 pb-0"> <i class="icon icon--phone"></i> 224 444 555</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <main class="card card-body card--shadow p-5" role="main">
        <h4 class="h4">Kde pracujete? </h4>
        <form class="" action="" method="post">
          <div class="row">
            <div class="col-lg-12">
              <div class="form-group">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Název firmy<span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Název firmy" class="form-control " value="">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-6">
              <div class="form-group">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">IČO<span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="IČO" class="form-control " value="">
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-lg-9">
              <div class="form-group">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Ulice<span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Ulice" class="form-control " value="">
              </div>
            </div>
            <div class="col-lg-3">
              <div class="form-group">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Číslo popisné<span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Číslo popisné" class="form-control " value="">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-9">
              <div class="form-group">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Město / obec<span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Město / obec " class="form-control " value="">
              </div>
            </div>
            <div class="col-lg-3">
              <div class="form-group">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">PSČ<span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="PSČ" class="form-control " value="">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-6">
              <div class="form-group">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Pracuji zde od<span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Pracuji zde od" class="form-control " value="">
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-lg-12">
              <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label">Stát zaměstnavatele<span class="required"> </span> </label>
              <div class="input-group">
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Stát zaměstnavatele" class="form-control " value="">
                <div class="input-group-btn">
                  <button type="button" name="button" class="btn btn-primary btn-sm p-2 btn-no-shadow"> <i class="icon icon--arr-down"></i> </button>
                </div>
              </div>
            </div>
          </div>

          <div class="row mb-4">
            <div class="col-lg-12">
              <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label">Zkušební doba a výpovědní lhůta<span class="required"> </span> </label>
              <div class="input-group">
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Vyberte odpovídající položku" class="form-control " value="">
                <div class="input-group-btn">
                  <button type="button" name="button" class="btn btn-primary btn-sm p-2 btn-no-shadow"> <i class="icon icon--arr-down"></i> </button>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-6">

            </div>
            <div class="col-lg-6">
              <button type="button" class="btn btn-block btn-primary" disabled name="button">Pokračovat</button>
            </div>
          </div>
        </form>
      </main>
    </div>
    <div class="col-lg-4">
      <aside class="pl-5">
        <h4 class="h4">Co váš čeká?</h4>
          <ul class="stepper mt-2 pl-0">
          <li class="stepper-item row">
            <div class="col-2">
              <div class="badge badge-primary badge-rounded badge-stepper stepper-done">
                <i class="icon icon--old-tick"></i>
              </div>
            </div>
            <div class="col-10">
              <div class="stepper-text">Nastavení kreditní karty. Výše úvěrového rámce <strong>30 000 Kč</strong> </div>
            </div>
          </li>
          <li class="stepper-item row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">2</span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--mid row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper--mid-step"></span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--mid row stepper-item--disabled">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper--mid-step badge-stepper--mid-step__disabled"></span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--disabled row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">3</span>
            </div>
            <div class="col-10">
              <div class="stepper-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--disabled row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">4</span>
            </div>
            <div class="col-10">
              <div class="stepper-text">
                Peníze
              </div>
            </div>
          </li>
        </ul>
      </aside>
    </div>
  </div>
</div>
