/* VARIABLES */
  
  :root {
    --main-color: #5E0241; 
    --primary-color-medium:#a07392;
    --primary-color-light: #CEB3C6;
    --secondary-color-light: #F8F6F7;
    --secondary-color-medium: #EDE8EB;
    --secondary-color-dark: #C7BEC4;
    --color-light: white;
    --color-dark: black;
    --h1: 32px;
    --h2: 24px;
    --h3: 16px;
    --h4: 12px;
    --h5: 8px; 
  }


.steps-container {
    display: flex;
    flex-direction: column;
    align-items:space-between;
  }
  
  .steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    border-bottom: 3px solid var(--primary-color-light);
  }
  
  .steps li {
    position: relative;
    margin:0px;
    font-size: 10px;
    padding: 8px 8px;
    width: 25%;
    text-align: center;
  }

  .steps li a {
    color: var(--primary-color-light);
  }
  
  .steps li.active {
    color: var(--main-color);
    font-weight: 700;
    border-bottom: 3px solid var(--main-color);
  }
  
  .list-inline > li {
    display: inline-block;
  }
  
  .password-icon {
    background-color: none;
    border: none;
  }

 .carro20 hr {
   margin-bottom: 24px;
 }

  
/* SHOP RESUME */

.form-resume {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .form-resume fieldset {
    margin-right: 8px;
  }
  
  .delete-ic {
    height: 32px;
  }


  /* LOGIN */

  .input-group-prepend {
    position: absolute;
    z-index: 2;
    right: 16px;
    top: 13px;
}



/* NEW COSTUMER */

.show-password-container.input-group-prepend {
right: 32px;
}

.new-costumer-container {
  flex-direction: column-reverse;
}


  /*
  ####################################################
  M E D I A  Q U E R I E S
  ####################################################
  */
  
  /*
  ::::::::::::::::::::::::::::::::::::::::::::::::::::
  Bootstrap 4 breakpoints
  */
  
  /* 
  Extra small devices (portrait phones, less than 576px) 
  No media query since this is the default in Bootstrap because it is "mobile first"
  */
  
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {


  }
  
  /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
  @media (min-width: 768px) {

    .steps li {
      font-size: 16px;
      padding: 16px 32px;
    }

  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .new-costumer-container {
      flex-direction: row;
    }
   

  }
      
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {

  }
  
 

  /* -------------------------------------------------------------*/


  
  /* SHOP RESUME */
  
  .form-resume {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .form-resume fieldset {
    margin-right: 8px;
  }
  
  
  /* ZONA CLIENTES */
  
  .customer-zone {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-right: 1px solid var(--secondary-color-light);
    padding-right: 0px;
  }
  
  .customer-zone li {
    padding: 16px;
    width: 100%;
  }
  
  .customer-zone li:not(:last-child) {
  border-bottom:  1px solid var(--secondary-color-light);
  }
  
  .nav-tabs {
    border-bottom: none;
  }
  
  .customer-zone .active {
    background-color: var(--primary-color-light);
  }

  .customer-zone .active a {
    color: var(--main-color);
  }

  .customer .tab-content {
    padding: 16px;
    background-color: var(--secondary-color-light);
  }

  .customer h2 {
    margin-bottom: 0px;
    padding-bottom: 4px;
  }
  
  .customerdata {
    margin-top: 24px;
  }
  
  /* LOGIN */
  
  .form-login .form-control {
    background-color: var(--secondary-color-light);
  }
  
  .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .form-group .form-control {
    margin: 8px 0px;
  }
  
  .section-login {
    margin-bottom: 40px;
  }
  
  .input-group-prepend {
     position: absolute;
      z-index: 2;
      right: 24px;
      top: 18px;
  }
  
  .checkout-list .submitButton {
    margin: 16px 0px;
  }
  
  
    /* CARRITO */

  .thanks-tpv-title {
    color: var(--main-color);
  }
  
  .thanks-tpv-text {
  margin: 24px;
  }
  
  .get_user   {
    margin: auto 12px auto 0px; 
  }
  
  .billing {
    margin-top: 32px;
  }
  
  input.cantidad {
    width: 40px !important;
    padding: 4px;
  }
  
  section.checkout-list ul {
    padding: 0px 0px 0px 16px;
    margin: 20px 0px 20px 0px;
  }
  
  section.checkout-list label {
    font-weight: 400;
  }
  label.custom-radio {
    padding-left: 0px;
    cursor: pointer;
  }
  
  section.checkout-list ul li {
    margin: 16px 0px 0px 0px;
  }
  
  section.checkout-list ul li:hover {
  background-color: var(--secondary-color-light);
  }
  
  .checkout-cmp section {
    margin-top: 30px;
  }
  
  section.checkout-list input[type="radio"] {
    float: left;
    display: inline !important;
    margin: 0px 12px;
  }
  section.checkout-list label {
    display: inline;
  }
  section.checkout-list .address div, .billing div {
    padding:0px;
  }
  
  section.checkout-list div  {
    /* padding-left:0px; */
  }
  
  /* carro */
  .customerzone .customerdata {
    font-size:18px;
    font-weight: 700;
  }
  
  .carro, .customerzone {
    padding-left:12px;
  }
  
  .totalpagar {
    font-size:14px;
    font-weight: 700;
  }
  .compras {
    background-color: #313131;;
    width:100%;
    text-align: right;
    position:relative;
    margin-bottom:0px;
    height: 36px;
  }
  .compras span {
    color:#fff;
    font-size:14px;
    vertical-align: bottom;
    padding-right:6px;
  }
  .compras i {
    font-size:20px;
    padding-top:4px;   
  }
  .compras img {
    font-size:20px;
  }
  .btn-comprar2 {
    color: #fff;
    background-color: #8c8a88;
    border-color: #8c8a88;
    border-radius: 0rem;
    padding: 4px 6px 2px 6px;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
  }
  
  
  .availability .available {
    background: url(/static/img/ico_disponible.svg) no-repeat 0;
    background-size: auto;
    color: #438c2f;
    background-size: 21px;
  }
  .availability .soon {
    color: orange;
    background: url(/static/img/ico_disponible_enbreve.svg) no-repeat 0;
        background-position-x: 0px;
        background-position-y: center;
        background-size: auto;
    background-size: 21px;
    background-position: 0px -2px;
  }
  .availability .out-of-stock {
    color: #d22f30;
    background: url(/static/img/ico_no_disponible.svg) no-repeat 0;
    background-size: auto;
    background-size: 21px;
  }
  .availability > span {
    margin: 8px 0;
    color: #1eaf9b;
    display: inline-block;
  }
  
  
   
    /*
    ####################################################
    M E D I A  Q U E R I E S
    ####################################################
    */
    
    /*
    ::::::::::::::::::::::::::::::::::::::::::::::::::::
    Bootstrap 4 breakpoints
    */
    
    /* 
    Extra small devices (portrait phones, less than 576px) 
    No media query since this is the default in Bootstrap because it is "mobile first"
    */
    
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {
     
  }
  
  /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
  @media (min-width: 768px) {
     .control-label {
       text-align: right;
     } 
     
     .form-group .form-control {
      margin: 8px 0px;
    }
  
    .steps li {
      position: relative;
      font-weight: 700;
      margin:0px;
      font-size: 16px;
      padding: 16px 32px;
    }
  
  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
  
    .cart-iva {
      padding-left: 16px;
      border-left: 1px solid rgb(216, 216, 216);
    }
  }
      
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    
  }
  
  /*
  ::::::::::::::::::::::::::::::::::::::::::::::::::::
  Custom media queries
  */
  
  /* Set width to make card deck cards 100% width */
  @media (max-width: 950px) {
  }