.header {
  position: relative;
}
.form-account, .form-register{
    text-transform:uppercase;
}
.form-account h2, .form-register h2{
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 30px;
    padding: 0;
    text-transform: capitalize;
}
.account-location{
    text-transform: capitalize;
    font-size:12px;
    margin-bottom: 30px;
}
.account-location a{
    color:#2196F3;
}

.form-account input{
    border-radius: 0;
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    /* height: 44px; */
}
.form-register h6{
  font-size:14px;
  font-size:11px;
  margin: 0 0 50px;
}
.form-register p.txt{
    font-size: 12px;
    color: #888;
    margin: 0 0 50px 0;
    text-transform: none;
}
.form-register p.txt a{
    float:right;
}

.form-register p{
    line-height: 16px;
}
.form-register p small{
    font-size: 10px;
    color: #888;
    text-transform: none;
}
p.hr{
    width:100%;
    background:#eee;
    height: 1px;
    margin: 20px 0;
    text-align:center;
}
p.hr small{
    font-size: 11px;
    display: block;
    line-height: 3px;
}

.form-account input[type="radio"], .form-register input[type="radio"]{
    height:auto;
    margin: 0 5px 0 0;
    vertical-align: middle;
}
.form-header{
  margin: 0 3% 50px;
  width: 94%;
  border-bottom: 1px solid #000;
}

.button-shipping a{
  color: #888;
  text-decoration: underline;
  font-size:10px;
  text-transform: capitalize;
  text-align: center;
}



.form input.circle-checkbox {
  width: 12px !important;
  height: 12px !important;
  margin-right: 10px !important;

}
.form .circle-checkbox-label{
  font-size:13px;
}

hr{
  margin-bottom:50px;
}



.form {
    /* display: grid;
    grid-template-areas: "firstname lastname" "email email" "password password" "submit submit";
    row-gap: 2.35rem;
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
    width: 100%;
    height: auto;
    margin-top: 2rem; */
  }
  .form-control {
    position: relative;
    width: 100%;
    height: 3rem;
    margin: 0 auto;
    border:0;
  }
  .form-control:nth-child(1) {
    grid-area: Email;
  }
  .form-control:nth-child(2) {
    grid-area: Password;
  }
  .form-control:nth-child(3) {
    grid-area: Confirm Password;
  }
  .form-control:nth-child(4) {
    grid-area: First name;
  }
  .form-control:nth-child(5) {
    grid-area: Last name;
  }
  
  .form-label {
    /* position: absolute;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    left: 0.75rem;
    top: 0.75rem;
    padding: 0 0.35rem;
    color: var(--color-light-500);
    background: var(--color-white);
    transition: all 0.35s ease; */
  }
  .form-input {
    /* position: absolute;
    display: block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 0.75rem 1rem;
    z-index: 1;
    outline: none;
    border-radius: 0.25rem;
    border-width: 1.75px;
    border-style: solid;
    border-color: var(--color-light-300);
    color: var(--color-black);
    background-clip: padding-box;
    background-color: transparent;
    transition: all 0.35s ease-in-out; */
  }
  .form-input::-moz-placeholder {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .form-input:-ms-input-placeholder {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .form-input::placeholder {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .form-input:focus {
    border-color: var(--color-black);
  }
  .form-input:focus + .form-label {
    font-size: 10px;
    font-weight: 400;
    top: -0.65rem;
    left: -5px;
    z-index: 5;
    color: #aeaeae;
  }
  .form-input:not(:-moz-placeholder-shown).form-input:not(:focus) + .form-label {
    font-size: 10px;
    font-weight: 400;
    top: -0.65rem;
    left: -5px;
    z-index: 5;
    color: #ea4636;
  }
  .form-input:not(:-ms-input-placeholder).form-input:not(:focus) + .form-label {
    font-size: 10px;
    font-weight: 400;
    top: -0.65rem;
    left: -5px;
    z-index: 5;
    color: #ea4636;
  }
  .form-input:not(:placeholder-shown).form-input:not(:focus) + .form-label {
    font-size: 10px;
    font-weight: 400;
    top: -0.65rem;
    left: -5px;
    z-index: 5;
    color: #888;
    /* z-index: 9;
    background: #fff;
    display: block;
    width: 100%; */

    /* opacity: 0; */
  }
  .form-alert {
    /* position: absolute;
    display: block;
    font-size: 0.875rem;
    line-height: 1.5;
    left: 0;
    bottom: -1.5rem;
    opacity: 0;
    visibility: hidden;
    color: var(--color-black); */
  }
 
  
  .form-control.invalid .form-input {
    border-color: red;
  }
  .form-control.invalid .form-alert {
    /* opacity: 1;
    visibility: visible;
    color: red;
    font-size: 10px;
    bottom:auto;
    bottom: 2.5rem;
    left: 0;
    background: #fff;
    z-index: 5; */

    bottom: -15px;
  }

  .wrap-overview h6{
    position: relative;
  }
  .wrap-overview h6 a{
    position: absolute;
    right: 0;
    top:5px;
    font-size:11px;
    color:#888;
    text-transform: initial;
    text-decoration: underline;
  }
  .wrap-overview p{
    font-size: 12px;
    color: #888;
    text-transform: none;
  }


  .wrap-favorite{
    position: relative;
  }
  .wrap-favorite a{
    position: absolute;
    left: 15px;
    bottom: 5px;
    font-size: 12px;
    text-transform: initial;
    text-decoration: underline;
    color:#888;
  }
  .list-favorite{}
  .list-favorite li{
    display: inline-block;
    width: 31.5%;
    margin: 0 0.5% 0.5%;
  }
  .list-favorite li a{
    display: block;
  }
  .list-favorite li a img{
    /* max-width:250px; */
    width:100%;
    height:auto;
    max-height:250px;
  }


  .nav-profile{
    width: 200px;
    position: absolute;
    bottom: 0;
    left: 10%;

    bottom: auto;
    top:0;
    left:13%;
  }
  .nav-profile ul li a{
    font-size: 10px;
    color: #aeaeae;
    text-transform: capitalize;
  }
  .nav-profile ul li a:hover{
    color: #888888;
  }
  
  .nav-profile ul li:last-child a ,.nav-profile ul li a.active{
    color:#222222;
  }

  /* from checkout.css & cart.css */
  .shopping-form {
    margin: 0 10px 100px;
  }
  .shopping-form ul {
      width: 100%;
      margin: 0 auto;
  }
  .shopping-form .cart-box{
    width:100%;
  }



  @media  (max-width: 768px) {
    .form-header {
      width: 100%;
      margin: 0;
      border-bottom: 0;
    }
    .form-header .col-md-2{
      padding:0;
    }
    .form-header .col-md-8{
      display:none;
    }
    .form-header .form-registe h2{
      margin-bottom:10px;
    }
    .nav-profile {
      position: relative;
      width: auto;
      left: 0;
      top: auto;

      margin-bottom: 40px;
      padding: 0 0 30px;

      overflow-x: scroll;
      overflow-y: hidden;
      border-bottom: 1px solid #000;
    }
    .nav-profile ul{
      width:140%;
    }
    .nav-profile  li{
      display:inline-block;
      margin-right: 10px;
    }
    .list-favorite li{
      width:30.5%;
    }
    .shopping-form .cart-box img{
      width:100%;
    }
  }