.input-h20-wauto-rounded {
    height: 20px;
    width: auto;
    border-radius: 20px;
    background-color: var(--bgc-input);
}

.input-h20-rounded {
    height: 20px;
    border-radius: 20px;
    transform-origin: right;
    transition: border-color var(--ttr300) ease-in-out, background-color var(--ttr300) ease-in-out;
    background-color: var(--bgc-input);
    border: 1px rgb(112, 0, 0) solid;
}

.input-h20-rounded:hover {
    border-color: goldenrod;
}

.input-h24-rounded {
    height: 26px;
    width: 180px;
    border-radius: 24px;
    border: 2px black solid;
    transform-origin: right;
    background-color: var(--bgc-input);
}

.input-h20-width-50-rounded {
    height: 20px;
    width: 50px;
    border-radius: 20px;
    transform-origin: right;
    transition: width var(--ttr300) ease-in-out,
    font-size var(--ttr300) ease-in-out;
    background-color: var(--bgc-input);
}

.input-h20-width-50-rounded:hover {
    height: 26px;
    width: 54px;
    font-size: 14px;
}

.input-h26-rounded-white {
    height: 26px;
    border-radius: 20px;
    width: 180px;
    background-color: white;
    border: 1px rgb(112, 0, 0) solid;
}

.textarea-h20-rounded {
    height: 12px;
    width: 124px;
    border-radius: 20px;
    border: 2px black solid;
    padding: 6px;
    overflow: hidden;
    resize: none;
    transform-origin: right;
    transition: field-sizing var(--ttr300) ease-in-out, 
    height var(--ttr300) ease-in-out,
    width var(--ttr300) ease-in-out,
    font-size var(--ttr300) ease-in-out;
    background-color: var(--bgc-input);

}

.textarea-h20-rounded:hover {
    min-width: 130px;
    height: auto;
    width: 154px;
    font-size: 14px;
    field-sizing: content;
}

.textarea-big-rounded {
    height: auto;
    max-height: 30vw;
    min-width: 96%;
    border-radius: 20px;
    border: 2px black solid;
    padding: 6px;
    overflow: auto;
    resize: none;
    transform-origin: left;
    transition: field-sizing var(--ttr300) ease-in-out;

    field-sizing: content;
}

.textarea-big-rounded::-webkit-scrollbar {
    width: 8px; /* Grosor de la barra */
}

.textarea-big-rounded::-webkit-scrollbar-track {
    background: transparent; /* Fondo de la barra */
    border-radius: 20px;
}

.textarea-big-rounded::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3); /* Color de la barra */
    border-radius: 20px; /* Se adapta al borde redondeado */
}

.textarea-big-rounded::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

.textarea-width-100pc {
    width: 100%;
    box-sizing: border-box;
}

.textarea-height-100pc {
    height: 100%;
    box-sizing: border-box;
    min-height: 100px;
    
}

.textarea-rezize-none {
    resize: none;
}


.input-h20-w60-unnanimated {
    height: 20px;
    width: 60px;
    border-radius: 20px;
    text-align: right;
    background-color: var(--bgc-input);
}

.input-background-color-app {
    background-color: rgb(200, 0, 50);
}

.input-background-color-green {
    background-color: green;
}

.input-background-color-red {
    background-color: red;
}

.input-background-color-blue {
    background-color: blue;
}

.input-background-color-yellow {
    background-color: yellow;
}

.input-background-color-orange {
    background-color: orange;
}

.input-background-color-purple {
    background-color: purple;
}

.input-background-color-crimson {
    background-color: crimson;
}

.input-background-color-gray {
    background-color: gray;
}

.input-color {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 14px;
    padding: 0;
    border: 0px transparent;
    border-radius: 0%;
    cursor: pointer;
    background: none;
}

.input-bg-white-rounded {
    border-radius: 20px;
    background-color: white;
}