
/*DROPDOWN*/

.frm-dropdown__wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  border-radius: 8px;
}

.frm-dropdown__label {
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  padding: 10px 16px;
  background-color: var(--frm-color-white);
  border-radius: 8px;
  color: var(--frm-color-neutral-700);
  /*cursor: pointer;
  border: 1px solid #304E43;*/
}

.frm-input-borde {
    border: 1px solid #304E43;
}

.frm-dropdown__label--active {
  border: 1px solid var(--frm-color-secondary-600);
  border-radius: 8px;
  color: var(--frm-color-neutral-700);
}

.frm-dropdown__label:hover {
  /*border: 1px solid var(--frm-color-secondary-300);*/
  border-radius: 8px;
  color: var(--frm-color-neutral-700);
}

.frm-dropdown__label--opened {
  background-color: var(--frm-color-secondary-50);
  border: 1px solid var(--frm-color-secondary-300);
  border-radius: 8px;
  color: var(--frm-color-secondary-600);
}

.frm-dropdown__icon {
  margin-left: 8px;
  transition: transform 0.2s;
}

.frm-dropdown__icon--opened {
  transform: rotate(180deg);
}

.frm-dropdown__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: var(--frm-color-white);
  box-shadow: 0 4px 8px rgba(63, 94, 83, 0.1);
  border-radius: 8px;
  margin-top: 4px;
  overflow-y: auto;
  max-height: 200px;
  display: none;
  flex-direction: column;
  list-style: none;
  padding: 0;
}

.frm-dropdown__list--opened {
  display: block;
}

.frm-dropdown__item {
  padding: 10px 16px;
  color: var(--frm-color-neutral-800);
  cursor: pointer;
  transition: background-color 0.2s;
}

.frm-dropdown__item:hover {
  background-color: var(--frm-color-neutral-50);
}

.frm-dropdown__item--selected {
  background-color: var(--frm-color-secondary-100);
}

/*DROPDOWN SIZES*/

.frm-dropdown--size--large__wrapper {
  max-width: 246px;
  height: 56px;
}

.frm-dropdown--size--large__label {
  font-size: var(--frm-body-l);
  padding: 12px 18px;
}

.frm-dropdown--size--large__item {
  font-size: var(--frm-body-l);
  padding: 12px 18px;
}

.frm-dropdown--size--medium__wrapper {
  max-width: 246px;
  height: 48px;
}

.frm-dropdown--size--medium__label {
  font-size: var(--frm-body-m);
  padding: 10px 16px;
}

.frm-dropdown--size--medium__item {
  font-size: var(--frm-body-m);
  padding: 10px 16px;
}

.frm-dropdown--size--small__wrapper {
  max-width: 246px;
  height: 36px;
}

.frm-dropdown--size--small__label {
  font-size: var(--frm-body-s);
  padding: 8px 12px;
}

.frm-dropdown--size--small__item {
  font-size: var(--frm-body-s);
  padding: 8px 12px;
}


/*grid*/

.w10,
.w17,
.w18,
.w20,
.w25,
.w30,
.w33,
.w40,
.w50,
.w60,
.w70,
.w75,
.w80,
.w90,
.w100,
.row {
    /*-ms-box-sizing: border-box;
    -moz-box-sizingbox-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;*/
    float: left;
    padding: 0 5px;
    /*padding-top: 5px;*/
}

.w100,
.row {
    float: none;
    width: 100%;
}

.w100:after,
.row:after {
    clear: both;
    content: " ";
    display: block;
}

.row {
    padding: 0;
    margin-bottom: 1%;
}

.w90 {
    width: 90%;
}

.w80 {
    width: 80%;
}

.w75 {
    width: 75%;
}

.w70 {
    width: 70%;
}

.w60 {
    width: 60%;
}

.w50 {
    width: 50%;
}

.w40 {
    width: 40%;
}

.w30 {
    width: 30%;
}

.w33 {
    width: 33%;
}

.w25 {
    width: 25%;
    overflow: visible;
}

.w20 {
    width: 20%;
}

.w18 {
    width: 18%;
}

.w17 {
    width: 17%;
}

.w10 {
    width: 10%;
}


.w100 input[type="text"],
.w100 input[type="number"],
.w100 select,
.w100 textarea {
    width: 100%;
    margin-top:10px;
}

.w95 textarea {
    width: 95%;
    margin-top:10px;
}

.w75 input[type="text"],
.w75 input[type="number"],
.w75 select,
.w75 textarea {
    width: 75%;
    margin-top:10px;
}

.w50 input[type="text"],
.w50 input[type="number"],
.w50 input[type="email"],
.w50 input[type="tel"],
.w50 select,
.w50 textarea {
    width: 50%;
    margin-top:10px;
}

.w60 input[type="text"],
.w60 input[type="number"],
.w60 select {
    width: 60%;
    margin-top:10px;
}

.w40 select,
.w40 input[type="text"],
.w40 input[type="number"] {
    width: 40%;
    margin-top:10px;
}

.w30 select,
.w30 input[type="text"],
.w30 input[type="number"] {
    width: 30%;
    margin-top:10px;
}

.w25 input[type="text"],
.w25 input[type="number"],
.w25 select {
    width: 25%;
    margin-top:10px;
}

.w20 input[type="text"],
.w20 input[type="number"],
.w20 select {
    width: 20%;
    margin-top:10px;
}


.w10 input[type="text"],
.w10 input[type="number"],
.w10 select {
    width: 10%;
    margin-top:10px;
}

input[type="text"].size100,
input[type="number"].size100,
input[type="email"].size100,
select.dig100 {
    width: 100%;
    margin-top:10px;
}

input[type="text"].size05,
input[type="number"].size05,
select.dig05 {
    width: 5%;
    margin-top:10px;
}


input[type="text"].size1,
input[type="number"].size1,
select.dig1 {
    width: 10%;
    margin-top:10px;
}

input[type="text"].size2,
input[type="number"].size2,
select.dig2 {
    width: 20%;
    margin-top:10px;
}

input[type="text"].size3,
input[type="number"].size3,
select.dig3 {
    width: 30%;
    margin-top:10px;
}

input[type="text"].size4,
input[type="number"].size4,
select.dig4 {
    width: 40%;
    margin-top:10px;
}

input[type="text"].size5,
input[type="number"].size5,
select.dig5 {
    width: 50%;
    margin-top:10px;
}

input[type="text"].size6,
input[type="number"].size6,
select.dig6 {
    width: 60%;
    margin-top:10px;
}

input[type="text"].size7,
input[type="number"].size7,
select.dig7 {
    width: 70%;
    margin-top:10px;
}

input[type="text"].size8,
input[type="number"].size8,
input[type="email"].size8,
select.dig8 {
    width: 80%;
    margin-top:10px;
}


input[type="text"].size9,
input[type="number"].size9,
select.dig9 {
    width: 90%;
    margin-top:10px;
}

.w40.campo-fecha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.w40.campo-fecha label {
    flex: 0 0 100%;
}

.w40.campo-fecha input[type="text"] {
    width: auto;
    flex: 0 0 auto;
}

.w40.campo-fecha input[type="text"],
.w40.campo-fecha button {
    margin-top: 10px;
}

.w40.campo-fecha button {
    padding: 2px;
    background: none;
    border: none;
}