﻿.perfil {
  padding: 50px 0; }
  .perfil .subtitle-tab {
    text-transform: uppercase;
    font-size: 15px;
    background-color: #fff !important;
    cursor: default;
    padding: 5px 16px;
    font-family: 'BarlowBold'; }
    .perfil .subtitle-tab:hover {
      background-color: #fff !important; }

.tab {
  border: 0;
  background-color: #fff; }

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: #000;
  padding: 10px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: .3s;
  font-size: 14px; }

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #F2F2F2; }

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #E5E5E5; }

/* Style the tab content */
.tabcontent {
  display: block;
  border: 0;
  max-width: 670px;
  margin: 0px auto; }
  .tabcontent h5 {
    font-family: BarlowBold;
    font-size: 15px;
    line-height: 21px;
    text-transform: uppercase; }
  .tabcontent .container_form {
    padding: 20px 10px 5px 10px;
    margin: 20px 0;
    border: 1px solid #E5E5E5; }
    .tabcontent .container_form.entregado {
      background-color: #E1FDF4; }
    .tabcontent .container_form.cancelado {
      color: #E37725; }
    .tabcontent .container_form.anulado {
      color: #ec0b20; }
  .tabcontent input, .tabcontent select {
    background: #F2F2F2;
    height: 48px;
    font-size: 14px;
    font-family: Barlow;
    color: #000;
    font-weight: 600; }
    .tabcontent input::placeholder, .tabcontent select::placeholder {
      color: #000;
      font-weight: 600;
      opacity: 1;
      /* Firefox */ }
    .tabcontent input:-ms-input-placeholder, .tabcontent select:-ms-input-placeholder {
      color: #000;
      font-weight: 600; }
    .tabcontent input::-ms-input-placeholder, .tabcontent select::-ms-input-placeholder {
      color: #000;
      font-weight: 600; }
  .tabcontent #btnGuardarCambiosFacturacion, .tabcontent #btnGuardarSalir {
    margin: 0; }
  .tabcontent button {
    text-transform: uppercase;
    font-size: 14px;
    height: 38px; }
    .tabcontent button:hover {
      background-color: #16ab7d;
      text-decoration: none;
      color: #fff;
      opacity: 1; }

.card {
  margin-bottom: 15px; }

.card-body {
  padding: 20px 15px 0 15px; }
  .card-body h6 {
    font-size: 14px;
    font-family: BarlowBold;
    color: #000 !important; }
  .card-body p {
    font-size: 14px;
    font-family: Barlow;
    margin: 0; }
  .card-body ul {
    margin: 0; }
    .card-body ul li {
      margin: 0 15px 0 0; }
      .card-body ul li button {
        margin: 10px 0;
        height: 30px; }

label {
  font-family: Barlow;
  font-size: 14px; }

#Datos {
  max-width: 700px;
  padding-left: 80px;
  margin: 0; }

#Pedidos h5 {

  font-size: 13px;
  text-transform: uppercase; }

#Pedidos p.marca {
  color: #616d70;
  font-family: Barlow;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px; }

#Pedidos .cantidad-text {
  color: #000;
  font-family: Barlow;
  font-weight: 600;
  font-size: 13px; }

#Pedidos ul {
  display: flex;
  margin: 25px auto; }
  #Pedidos ul li {
    width: 33.3%;
    font-family: BarlowBold;
    font-size: 14px;
    text-align: center;
    color: #000; }

#Pedidos .text-estado {
  position: absolute;
  top: 15px;
  right: 15px; }
  #Pedidos .text-estado p {
    font-family: BarlowBold;
    font-size: 14px;
    text-transform: uppercase; }
    #Pedidos .text-estado p.entregado {
      color: #09A04A; }
    #Pedidos .text-estado p.cancelado {
      color: #E37725; }
    #Pedidos .text-estado p.anulado {
      color: #ec0b20; }

#Pedidos .progress {
  border-radius: 10px; }
  #Pedidos .progress-bar {
    border-radius: 10px;
    background: #f3ba1f;
    position: relative; }
    #Pedidos .progress-bar::before {
      content: "";
      position: absolute;
      background: #fff;
      width: 10px;
      height: 10px;
      right: 3px;
      top: 3px;
      border-radius: 50%; }
  #Pedidos .progress-message {
    color: #f3ba1f;
    font-weight: bold;
    font-size: 14px; }
  #Pedidos .progress-status {
    color: gray; }

#Pedidos .tracking {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: .8rem; }
  #Pedidos .tracking__status {
    overflow: hidden;
    width: var(--width-status); }
    #Pedidos .tracking__status__img {
      position: relative;
      background: #ECEFF2;
      border-radius: 50%;
      width: 100%;
      height: var(--width-status);
      padding: var(--padding-inner); }
      #Pedidos .tracking__status__img__contend {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        border: solid var(--border-size) #fff;
        display: flex;
        justify-content: center;
        align-items: center; }
        #Pedidos .tracking__status__img__contend img {
          width: calc(var(--width-status) / 2);
          height: calc(var(--width-status) / 2); }
      #Pedidos .tracking__status__img.complete {
        background-color: #7FB6AE; }
      #Pedidos .tracking__status__img.active {
        background-color: #E6BD1A; }
      #Pedidos .tracking__status__img.cancel {
        background-color: #C95F64; }
      #Pedidos .tracking__status__img.fullComplete {
        background-color: #658FC6; }
    #Pedidos .tracking__status__name {
      padding-top: 1.5rem; }
      #Pedidos .tracking__status__name p {
        width: 100%;
        font-size: var(--font-size);
        text-align: center;
        font-weight: 700; }
  #Pedidos .tracking__readline {
    width: calc((100% - (var(--width-status) * 6)) / 5);
    height: 10px;
    background-color: #ECEFF2;
    margin-top: calc((var(--width-status) / 2) - 5px); }
    #Pedidos .tracking__readline.complete {
      background-color: #7FB6AE; }
      #Pedidos .tracking__readline.complete.active {
        background: linear-gradient(to right, #7FB6AE, #E6BD1A); }
      #Pedidos .tracking__readline.complete.cancel {
        background: linear-gradient(to right, #7FB6AE, #C95F64); }
      #Pedidos .tracking__readline.complete.fullComplete {
        background: linear-gradient(to right, #7FB6AE, #658FC6);
        background-color: #658FC6; }

#Pedidos #btnCancelar {
  width: 196px;
  height: 38px;
  background: #FFFFFF;
  border: 1px solid #E37725;
  color: #E37725;
  text-transform: uppercase;
  font-weight: 600;
  font-family: Barlow; }

.progressbar-wrapper {
  background: #fff;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 5px; }

.progressbar li {
  list-style-type: none;
  width: 20%;
  float: left;
  position: relative;
  text-align: center;
  color: #7d7d7d;
  font-weight: 700;
  font-size: 12px !important;
  font-family: Barlow !important; }
  .progressbar li::before {
    width: 12px;
    height: 12px;
    content: "";
    line-height: 60px;
    border: 2px solid #000;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 0;
    position: relative;
    z-index: 2;
    background-color: #fff; }
  .progressbar li:after {
    width: 110%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: #C4C4C4;
    top: 5px;
    left: -62%;
    z-index: 0; }
  .progressbar li:first-child:after {
    content: none; }

.progressbar li.active:before {
  background: #000;
  background-size: 60%; }

.progressbar li.active:after {
  background: #000; }

.progressbar li::before {
  background: #fff url(../../scss/Perfil/user.svg) no-repeat center center;
  background-size: 60%; }

.progressbar {
  counter-reset: step;
  margin: 0px auto 25px auto !important; }

.progressbar li:before {
  counter-increment: step;
  margin-bottom: 20px; }

.entrega {
  font-family: Barlow;
  font-style: normal;
  font-weight: normal;
  font-size: 14px; }

.cerrar_sesion {
  color: #ee0005 !important;
  font-family: Barlow;
  font-weight: 600;
  font-size: 14px;
  padding: 30px 15px;
  text-decoration: none !important; }
@media (max-width: 768px) {
    .form-input {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .btn-block {
        width: 100%;
        margin-top: 10px;
    }

    label[for="isDireccionPredeterminada"] {
        top: 0;
        margin-left: 8px;
    }
}
