/* https: //seguros.comunicaciones.sura.com/css-b52f-20052022
retail: https://seguros.comunicaciones.sura.com/css-f@4.2-basic
 */

/* bootstrap */

.btn-outline-primary[actived=true] {
  color: #fff;
  background-color: var(--bs-primary);
}

/* end bootstrap */

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

body {
  margin: 0;
  padding: 0;
}

::placeholder {
  color: #8b8b8b;
}

.formSura {
  display: inline-block;
  position: relative;
  width: 100%;
  /* height: 1em; */
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  position: absolute;
  transform: translateY(-30px);
}

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

.form-input_control .form-input--sura,
.form-input_control .form-select--sura {
  border: transparent solid 2px;
}

.form-input_control .form-input--sura:hover,
.form-input_control .form-select--sura:hover {
  -webkit-box-shadow: 0px 0px 16px 0px rgb(var(--bs-info-rgb));
  -moz-box-shadow: 0px 0px 16px 0px rgb(var(--bs-info-rgb));
  box-shadow: 0px 0px 16px 0px rgb(var(--bs-info-rgb));
}

.form-input_control .form-input--sura:focus,
.form-input_control .form-select--sura:focus,
.form-input_control .focus-select {
  border: var(--bs-aqua) solid 2px;
  -webkit-box-shadow: 0px 0px 16px 0px rgb(var(--bs-info-rgb));
  -moz-box-shadow: 0px 0px 16px 0px rgb(var(--bs-info-rgb));
  box-shadow: 0px 0px 16px 0px rgb(var(--bs-info-rgb));
  outline: none;
}

.input-warn {
  border: var(--bs-warning) solid 2px !important;
}

.input-error {
  border: var(--bs-danger) solid 2px !important;
}

.input-warn:focus,
.input-warn:hover {
  -webkit-box-shadow: 0px 0px 16px 0px var(--bs-warning) !important;
  -moz-box-shadow: 0px 0px 16px 0px var(--bs-warning) !important;
  box-shadow: 0px 0px 16px 0px var(--bs-warning) !important;
}

.input-error:focus,
.input-error:hover {
  -webkit-box-shadow: 0px 0px 16px 0px rgb(var(--bs-danger-rgb)) !important;
  -moz-box-shadow: 0px 0px 16px 0px rgb(var(--bs-danger-rgb)) !important;
  box-shadow: 0px 0px 16px 0px rgb(var(--bs-danger-rgb)) !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: var(--bs-border-radius-2xl);
  padding: 0px 52px 0px 25px;
  border: none;
}


.container-range--sura>div {
  width: 100%;
  height: 9px;
  background: rgb(232, 232, 232);
  position: absolute;
  top: calc(50% - 7px);
  z-index: -1;
  border-radius: 2rem;
}

.form-range--sura {
  /* width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; */
  overflow: hidden;
  z-index: 1;
}

input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

input[type=range]::-moz-range-track {
  background: transparent;
}

input[type=range]::-ms-fill-lower {
  background: transparent;
}

input[type=range]::-ms-fill-upper {
  background: transparent;
}

input[type=range]:focus::-ms-fill-lower {
  background: transparent;
}

input[type=range]:focus::-ms-fill-upper {
  background: transparent;
}

.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: 0rem;
  border-bottom-right-radius: 0rem;
}

.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;
  border: none;
  border-radius: 0rem;
}

.group-input--sura .cancel {
  background-color: var(--bs-danger);
  color: var(--bs-secondary);
  font-family: initial;
}

.group-input--sura .confirm {
  background-color: var(--bs-success);
  color: var(--bs-secondary);
  font-family: initial;
}

/* aply last child .group */
.group-input--sura span:last-child button {
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

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

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

.input-container-items {
  position: absolute;
  width: 100%;
  /* height: 150px; */
  padding-top: 38px;
  background: var(--bs-gray-100);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* top: 27px; */
  top: 73%;
  z-index: -1;
  border-radius: 0 0 1.6rem 1.6rem;
  -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;
  border: 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: 0px 25px;
  min-height: 40px;
  cursor: pointer;
  border-top: 1px solid var(--bs-gray-200);
}

.select-option:hover {
  background: var(--bs-gray-400);
}

.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 {
  border: 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: 0.24rem;
  padding-left: 13px;
  border: 2px solid var(--bs-gray-100);
  border: none;
  height: 38px;
}

.input-filter:focus {
  border: 2px solid var(--bs-gray-200);
}

/* 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;
  user-select: none;
  -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: 0.32rem;
  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: 0.8rem;
  border: 2px solid var(--bs-primary);
}

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

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

.input_auxiliary--error {
  color: var(--bs-danger);
}

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

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

/* atributo state true */
.form-input_button button[submited="true"] {
  transition: all 1s ease-in;
  border-radius: 50%;
  padding: 11px 16px;
  cursor: no-drop;
}

/* progress */
.progressForm {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: var(--bs-secondary);
  border-radius: 0rem;
  border: none;
  border: none;
  z-index: -1;
}

.progressForm::-webkit-progress-bar {
  background: var(--bs-primary);
  transition: all 1.5s linear
}

.progressForm::-webkit-progress-value {
  background-color: var(--bs-gray-800);
  opacity: 0.5;
  transition: all 1.5s linear
}

.progressForm::-moz-progress-bar {
  background-color: var(--bs-gray-800);
  opacity: 0.5;
  transition: all 1.5s linear
}

.success-verificaton::-webkit-progress-value {
  background-color: var(--bs-success);
}

.error-verificaton::-webkit-progress-value {
  background-color: var(--bs-danger);
}

.success-verificaton::-webkit-progress-bar {
  background: var(--bs-success);
}

.error-verificaton::-webkit-progress-bar {
  background: var(--bs-danger);
}

.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;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 9px;
  color: var(--bs-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: 0.32rem;
  border: 3px solid var(--bs-primary);
}

.radio-warn {
  border: 3px solid var(--bs-warning);
}

/* 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(--bs-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: #b3b3b3;
  opacity: 0.94;
}

/* 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: #b3b3b3; */
/* opacity: 0.5; */
/* } */
/* 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(--bs-primary);
  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(--bs-primary);
}

/* ===== ANIMATION ===== */

/* .panelCollapsed {
  transition: all 0.35s;
} */

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.25s ease-out;
}

.slide-down-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}

.slide-down-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.slide-fade-enter,
.slide-fade-leave-to {
  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;
}