*, ::after, ::before {
    box-sizing: border-box;
}

body {
  /* font-family: 'Barlow', sans-serif; */
  margin: 0;
  padding: 0;
  /* background-color: #f2f2f2; */
}

::placeholder {
  color: #8b8b8b;
}

.zl-1 {
  z-index: 1 !important;
}

.zl-3 {
  z-index: 3 !important;
}

.zl-4 {
  z-index: 4 !important;
}

.zl-5 {
  z-index: 5 !important;
}

.form-input_control {
  position: relative;
  z-index: 2;
}

.form-input_control .form-input--sura:hover, .form-input_control .form-select--sura:hover {
  -webkit-box-shadow: 0px 0px 16px 0px var(--opacity-primary);
  -moz-box-shadow: 0px 0px 16px 0px var(--opacity-primary);
  box-shadow: 0px 0px 16px 0px var(--opacity-primary);

}

.form-input_control .form-input--sura:focus, .form-input_control .form-select--sura:focus, .form-input_control .focus-select {
  outline: var(--txt-tertiary) solid 2px;
  -webkit-box-shadow: 0px 0px 16px 0px var(--opacity-primary);
  -moz-box-shadow: 0px 0px 16px 0px var(--opacity-primary);
  box-shadow: 0px 0px 16px 0px var(--opacity-primary);
}

.input-error {
  outline: var(--color-error) solid 2px !important;
}

.input-error:focus {
  -webkit-box-shadow: 0px 0px 16px 0px var(--opacity-error) !important;
  -moz-box-shadow: 0px 0px 16px 0px var(--opacity-error) !important;
  box-shadow: 0px 0px 16px 0px var(--opacity-error) !important;
}

.form-input_container {
  min-height: 100px;
  padding: 5px 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.form-input_container--wlh {
  padding: 5px 0px;
  /* display: flex; */
  flex-direction: column;
  justify-content: flex-end;
}

.form-input--sura {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  padding: 0px 52px 0px 25px;
  border: none;
}

.group-input--sura {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.group-input--sura > .form-input--sura {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.group-input--sura > span {
  display: -ms-flexbox;
  display: flex;
  margin-left: -1px;
}

.group-input--sura button {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 0px;
}

.group-input--sura .cancel {
  background-color: var(--color-error);
  color: var(--txt-secondary);
}

.group-input--sura .confirm {
  background-color: var(--color-success);
  color: var(--txt-secondary);
}
/* aply last child .group */
.group-input--sura span:last-child button {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.form-select--sura {
  appearance: none;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  padding: 0px 52px 0px 25px;
  border: none;
  cursor: pointer;
  background: var(--color-white1);
  display: flex;
  align-items: center;
}

.option-default {
  color: #8b8b8b;
}

.input-container-items {
  position: absolute;
  width: 100%;
  /* height: 150px; */
  padding-top: 38px;
  background: var(--color-white1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* top: 27px; */
  top: 73%;
  z-index: -1;
  border-radius: 0 0 20px 20px;
  -webkit-box-shadow: 0px 12px 14px 12px --shadow-primary;
  -moz-box-shadow: 0px 12px 14px 12px --shadow-primary;
  box-shadow: 0px 12px 14px 4px --shadow-primary;
  outline: 2px solid white;
}
.container-options{
  padding: 0px;
  width: 100%;
  max-height: 165px;
  overflow-y: overlay;
}

.select-option {
  display: flex;
  align-items: center;
  list-style: none;
  width: 100%;
  /* padding-left: 25px; */
 padding: 0px 25px;
  min-height: 40px;
  cursor: pointer;
}

.select-option:hover {
 background: var(--opacity-secondary);
}

.select-option--actived {
 background: #52626542;
}

.select-option--actived:hover {
  background: #52626542;
 opacity: 0.8;
}

.option-other input {
 border: none; cursor: pointer;background: transparent;
  width: 100%;
}

.option-other input:focus {
  outline: none;
}

.option-other span {
 background: var(--bs-success);
 border-radius: 50%;
 padding: 0 8px;
}

.option-other span:active {
 opacity: 0.9;
}

.arrow-actived-select {
  transform: rotateZ(180deg);
}

.input-container-filter {
  width: 100%;
  padding: 0px 10px;
}

.input-filter {
  width: 100%;
  border-radius: 3px;
  padding-left: 13px;
  outline: 2px solid var(--color-white1);
  border: none;
  height: 38px;
}

.input-filter:focus {
  outline: 2px solid var(--color-white2);
}

/* select multiple */
.select-multiple--sura {
 padding: 6px 25px 6px 25px;
  height: auto !important;
  min-height: 50px;
}
.select-multiple-container {
 flex: 0 0 auto;
 width: 100%;
 display: block;
 box-sizing: border-box;
 margin: 0;
 position: relative;
 vertical-align: middle;
}
.select-multiple-selection {
 min-height: calc(2.25rem + 2px);
 /* cursor: text; */
 box-sizing: border-box;
 display: flex;
 -webkit-user-select: none;
}
.sct-mlple-selection_rendered {
 padding: 0px 0px 3px 0px;
 margin-bottom: -0.375rem;
 box-sizing: border-box;
 list-style: none;
 margin: 0;
 width: 100%;
 display: inline-block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.sct-mlple-selection__choice {
 float: left;
 list-style: none;
 margin-right: 5px;
 padding: 0px 10px;
 background-color: #e4e4e4;
 border: 1px solid #aaa;
 border-radius: 4px;
 cursor: default;
 margin-top: 0.31rem;
}

.sct-mlple-selection__choice span {
  float: right;
  cursor: pointer;
  margin-left: 5px;
  margin-right: -2px;
}

.form-checkbox--sura {
  width: 25px;
  height: 25px;
  border-radius: 10px;
  border: 2px solid var(--bg-primary);
}

.form-input_description {
  padding: 0px 0px 8px 25px;
  color: var(--txt-secondary);
  font-weight: 500;
  font-size: 14px;
}

.form-input_auxiliary {
  color: var(--color-gray2);
  font-size: 14px;
  padding: 8px 25px 0px 25px;
  min-height: 29px;
}

.input_auxiliary--error {
  color: var(--color-error);
  /* position: absolute; */
}

.form-input_button {
  text-align: center;
}

.form-input_button button {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  padding: 11px 33px;
  color: var(--txt-secondary);
  font-weight: 800;
  background: var(--opacity-tertiary);
  border: none;
  letter-spacing: 2px;
  z-index: 1;
  transition: width 1s ease;
}

/* progress */
progress {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: var(--color-white2);
  border-radius: 0px;
  border: none;
  outline: none;
  z-index: -1;
}
progress::-webkit-progress-bar {
  background: var(--bg-tertiary);
  transition: all 1.5s linear
}
progress::-webkit-progress-value {
  background-color: var(--progress-primary);
  transition: all 1.5s linear
}
progress::-moz-progress-bar {
  background-color: var(--progress-primary);
  transition: all 1.5s linear
}
.success-verificaton::-webkit-progress-value {
  background-color: var(--progress-success-value);
}
.error-verificaton::-webkit-progress-value {
  background-color: var(--progress-error-value);
}
.success-verificaton::-webkit-progress-bar {
  background: var(--progress-success-bar);
}
.error-verificaton::-webkit-progress-bar {
  background: var(--progress-error-bar);
}

.input-container-icon--md {
  position: absolute;
  top: calc(50% - 14px);
  right: 17px;
  width: 28px;
  height: auto;
  max-height: 28px;
}

.input-container-icon--md img {
  vertical-align: top;
}

.input-container-icon--xs {
  position: absolute;
  /* top: 13px; */
  top: calc(50% - 14px);
  right: 26px;
  width: 11px;
  height: auto;
  max-height: 14px;
}

/* CHECKBOX */
.input_label_custom {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  /* font-size: inherit; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 9px;
  color: var(--txt-secondary);
  font-size: inherit;
}
/* Hide the browser's default checkbox */
.input_label_custom input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark--checkbox {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border-radius: 4px;
  border: 3px solid var(--txt-secondary);
}
/* Create a custom radio */
.checkmark--radio {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border-radius: 50%;
  border: 3px solid var(--txt-secondary);
}
/* On mouse-over, add a grey background color */
.input_label_custom:hover input ~ .checkmark--checkbox,
.input_label_custom:hover input ~ .checkmark--radio {
  background-color: var(--opacity-quaternary);
}
/* When the checkbox is checked, add a blue background */
.input_label_custom input:checked ~ .checkmark--checkbox,
.input_label_custom input:checked ~ .checkmark--radio {
  background-color: var(--txt-secondary);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark--checkbox:after, .checkmark--radio:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.input_label_custom input:checked ~ .checkmark--checkbox:after, .input_label_custom input:checked ~ .checkmark--radio:after {
  display: block;
}
/* Style the checkmark(CHECKBOX)/indicator */
.input_label_custom .checkmark--checkbox:after {
  left: 3px;
  top: -2px;
  width: 8px;
  height: 14px;
  border: solid var(--bg-secondary);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Style the checkmark(RADIO)/indicator */
.input_label_custom .checkmark--radio:after {
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid var(--bg-secondary);
}

/* ===== ANIMATION ===== */
/* .slide-fade-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
} */
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateY(10px);
  opacity: 0;
}
.slide-fade-down-enter, .slide-fade-down-leave-to
{
  transform: translateY(-10px);
  opacity: 0;
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s ease;
}
.slide-fade-down-enter-active {
  transition: all .7s ease;
}
.slide-fade-down-leave-active {
  transition: all .3s ease;
}
/* @keyframes gradientTo20 {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 80% 100%;
  }
}

@keyframes gradientTo50 {
  from {
    background-position: 80% 100%;
  }
  to {
    background-position: 50% 100%;
  }
} */

/* #8189A9 relleno - 707070 border */