@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body { font-family: 'Open Sans', sans-serif; background: #fff; }
textarea { resize: none;  }
.navbar-brand {	font-size: 200%;}
#navbar-libro {	background-color: #FFCB05; height: 25px;	min-height: 25px;}
.header-libro {	background-color: #FFCB05;	height: 80px;}
.header-libro img { height: 50px; }

.box_login { background: #fff; padding: 45px 0 30px 0;  }
.login-left { text-align: center;  }
.login-left h3 { font-weight: bold; margin-bottom: 25px; }
.login-right h3 { font-weight: bold; text-align: center; margin-bottom: 25px; }
.login-right form .btn.btn-info { margin-top: 15px; }
.form-login {  padding-bottom: 15px;   }

#id_tipo_persona .radio {	display: inline; 	margin-right: 20px;}

h1 {	margin-bottom: 25px; text-align: center; font-weight: bold;}

h2 {	margin-bottom: 23px;}

.item-help {	font-size: 90%;	margin-left: 5px;	color: #8c8c8c;}

form#frm_reclamo fieldset { background: #fff; padding: 0 15px; margin-bottom: 30px; }
form#frm_reclamo .form-group {    border-bottom: 1px dashed #ddd;    padding-bottom: 15px; }

legend.ec{	background-color: #e98f07;	padding: 4px 8px;	font-size: 120%;	color:#FFF;	font-weight: bold;}

#frm_reclamo textarea {	height: 110px;}

.tipo-bien .form-group {	margin-bottom: 4px;}
.tipo-bien .form-group .checkbox{	margin-top:0px;	padding-top: 0px;}
.tipo-id select {	width: 200px;}

.jumbotron { background: #fff;  }
.jumbotron h1 { font-size: xx-large; }

.txt_nreclamo { font-size: 180%; }
.btn-center { text-align: center; margin-top: 5px; }

footer { background: #333; padding: 10px 0 0 0; position: fixed; bottom: 0; width: 100%; }
footer p { color:#fff; }

.panel-default>.panel-heading {    background-color: #e98f07; color: #fff; }
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: 1px dashed #ddd;
}

.resp-hist td .label {
  font-size: 90%;
}
.resp-ultima td {
  background-color: #bfdbff;
}
.resp-fecha {
  display: block;
  padding-bottom: 8px;
  font-weight: bold;
}

.estado-enproceso {
  background-color: #f0ad4e;
}
.estado-atendido {
  background-color: #5cb85c;
}
.estado-pendiente {
  background-color: #777;
}

.card {
  border-radius: 20px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card_title {
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
}

.card_subtitle {
  font-size: 14px;
  line-height: 20px;
}

.button {
  font-size: 14px;
  line-height: 22px;
  background-color: #000;
  color: #fff;
  border-radius: 50px;
  padding: 12px;
  border: none;
}
.button:hover,
.button:focus,
.button:active,
.button:active:focus  { 
  color: white; 
  background-color: black; 
  outline: none !important;
  box-shadow: none !important;
}

.button-secondary {
  font-size: 14px;
  line-height: 22px;
  background-color: #EEEEEE;
  color: #66686C;
  border-radius: 50px;
  padding: 12px;
  border: none;
}

.button-secondary:hover,
.button-secondary:focus,
.button-secondary:active,
.button-secondary:active:focus  {
  background-color: #EEEEEE;
  color: #66686C;
  outline: none !important;
  box-shadow: none !important;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.align-items-center {
  align-items: center;
}

.height-100 {
  height: 100%;
}

.mt-auto {
  margin-top: auto;
}

.h-screen-full {
  min-height: calc(100vh - 80px);
}

.h-70 {
  height: 70px;
}

.h-60 {
  height: 60px;
}

.w-160 {
  width: 160px;
}

.max-w-620 {
  max-width: 620px;
}

.bg-cream {
  background-color: #FFF4CD;
}

.text-lg {
  font-size: 38px;
  line-height: 34px;
  font-weight: bold;
  color: #020B15;
}

.p-24 {
  padding: 24px;
}

.mt-0 {
  margin-top: 0px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-40 {
  margin-bottom: 40px;
}

.lead-lg {
  font-size: 26px;
  line-height: 34px;
  color: #000;
}

.w-100 {
  width: 100%;
}

.input-label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.input-with-border {
  width: 100%;
  height: 50px;
  padding: 8px 12px;
  border: 1px solid #BDBDBD;
  border-radius: 8px;
  font-size: 16px;
  line-height: 20px;
  color: #333;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  background-color: white
}

.select-icon {
  pointer-events: none;
  color: #333;
  font-size: 14px;
  position: absolute;
  right: 12px;
  transform: translateY(calc(50% + 9px));
}

.steps_container {
  background-color: #F3F3F4;
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.steps {
  display: flex; 
  justify-content: space-between; 
  position: relative; 
  z-index: 3;
}

.steps_content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.steps_line {
  position: absolute; 
  top: 18px; 
  left: 12.5%; 
  width: 75%; 
  height: 2px; 
  background-color: #ddd; 
  z-index: 1;
}

.steps_line_progress {
  position: absolute; 
  top: 18px; 
  left: 12.5%; 
  height: 2px; 
  background-color: #FFCB05; 
  width: 0%; 
  transition: width 0.3s; 
  z-index: 2;
}

.step {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.step > p {
  font-size: 16px;
  line-height: 24px; 
  font-weight: 400; 
}

.step_circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  transition: all 0.3s;
}

.step:hover .step_circle { 
  transform: scale(1.1); 
}

.step.active .step_circle {
  border: none;
  background: #FFCB05;
}

.step.active .step_circle span {
    color: #fff;
    font-weight: 700;
}

.step.active p {
    color: #0C0C0C;
    font-weight: 600;
}

.step_circle span {
  font-size: 14px;
  line-height: 18px; 
  color: #000000;
}

.step:not(.active) .step_circle {
    background: #fff;
    border: 2px solid #ddd;
}

.step:not(.active) .step_circle span {
    color: #66686C;
    font-weight: 600;
}
.step:not(.active) p {
    color: #66686C;
    font-weight: 400;
}

.type-person-container {
    display: flex;
    flex-direction: row;
}

.input-custom {
    margin-right: 40px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #0C0C0C;
    cursor: pointer;
    position: relative;
    padding-left: 0 !important;
}

.input-custom input[type="radio"],
.input-custom input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.input-custom input[type="radio"] + span:before,
.input-custom input[type="checkbox"] + span:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 1px solid #BDBDBD;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.input-custom input[type="radio"]:checked + span:before,
.input-custom input[type="checkbox"]:checked + span:before {
    border-color: #FFCB05;
    background-color: #FFCB05;
    box-shadow: inset 0 0 0 4px white;
}

.input-custom:hover input[type="radio"] + span:before,
.input-custom:hover input[type="checkbox"] + span:before {
    border-color: #FFCB05;
}

.container-captcha {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.captcha-image {
  display: flex;
  align-items: center;
  gap: 6px;
}

.captcha-image img {
  margin-left: 6px;
}

.captcha-container input[type="text"] {
    width: 150px;
    height: 50px;
    padding: 10px;
    border: 1px solid #BDBDBD;
    border-radius: 8px;
    font-size: 16px;
    line-height: 20px;
    color: #333;
}

.info-value {
    width: 100%;
    min-height: 50px;
    padding: 8px 12px;
    border: 1px solid #BDBDBD;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    background: #FFFFFF;
    border-radius: 8px;
    background-color: white;
    display: flex;
    align-items: center;
}

.wizard-step {
  display: none;
}

.wizard-step.is-active {
  display: block;
}

.logos-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}

.logos-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
}

.logos-row {
  flex-wrap: nowrap;
  min-width: max-content;
}

.logos-row img {
  flex: 0 0 auto;
  display: block;
  width: 60px; 
  height: 60px;
}

.logos-row img.club {
  flex: 0 0 auto;
  display: block;
  width: 55px; 
  height: 55px;
}

@media (min-width: 531px) {
  .logos-scroll {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 530px) {
  .container-captcha {
    display: flex; 
    flex-direction: column;
    align-items: start; 
  }

  .captcha-image img {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .h-screen-full {
    min-height: calc(100vh - 50px);
  }

  .header-libro {
    height: 50px;
  }

  .header-libro .flex {
    justify-content: center;
  }

  .header-libro img {
    height: 35px;
  }

  .h-screen-140 {
    min-height: auto;
    height: 140px;
  }

  .text-md {
    font-weight: bold;
    font-size: 24px;
    line-height: 20px;
  }

  .text-md-xs {
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
  }

  .text-left-xs {
    text-align: left;
  }

  .flex-col-xs {
    flex-direction: column;
  }

  .h-auto-xs {
    min-height: auto;
    height: auto;
  }

  .h-40-xs {
    height: 40px;
  }

  .mb-0-xs {
    margin-bottom: 0px;
  }

  .mb-8-xs {
    margin-bottom: 8px;
  }

  .mb-16-xs {
    margin-bottom: 16px;
  }

  .flex-xs {
    display: flex;
  }

  .justify-content-center-xs {
    justify-content: center;
  }

  .align-items-center-xs {
    align-items: center;
  }

  .step > p {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .h-auto-md {
    min-height: auto;
    height: auto;
  }

  .w-100-md {
    width: 100%;
  }
}