.input{position:relative;display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:100%;width:100%;>div>svg{position:absolute;top:50%;transform:translateY(-50%);left:.875rem;& path{fill:var(--neutral-500);transition:.3s ease-out}}.input-wrapper{position:relative;width:100%}.password-toggle-btn{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;cursor:pointer;z-index:2;& svg path{fill:var(--neutral-300);transition:.3s ease-out}&:hover svg path{fill:var(--neutral-400)}}&:has(.password-toggle-btn) input{padding-right:2.5rem}&:has(>div>svg):not(:has(.password-toggle-btn)) input{padding-left:2.5rem}&:has(input:focus) svg path{fill:var(--green-500)}>div{display:flex;justify-content:space-between}& label{display:flex;align-items:center;justify-content:space-between;color:var(--neutral-400);font-weight:500;font-size:.8rem;text-wrap:nowrap}& button{color:var(--neutral-400);font-size:.8rem;font-weight:450;cursor:pointer;&:hover{color:var(--green-500);text-decoration:underline}}& input,textarea{width:100%;height:2.5rem;padding:0 .875rem;border:1px solid var(--neutral-150);border-radius:.75rem;background:var(--neutral-white);font-size:.875rem;font-weight:450;color:var(--neutral-600);transition:.3s ease-out;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&::placeholder{color:var(--neutral-150);font-size:.875rem;font-weight:450}&:disabled{background:var(--neutral-60);border-color:var(--neutral-150);color:var(--neutral-400)}}& textarea{resize:none;height:6rem;padding-block:.75rem}& input[type=search]{-moz-appearance:textfield;appearance:textfield}& input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}& input[type=number]{-moz-appearance:textfield;appearance:textfield}& input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}& input[type=number]{appearance:none}& ul{position:absolute;top:calc(100% + .25rem);z-index:2;display:flex;flex-direction:column;gap:.25rem;width:100%;max-height:10rem;overflow-x:hidden;padding:.25rem;background:var(--neutral-white);border:1px solid var(--neutral-150);border-radius:1rem;box-shadow:var(--shadow2);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:auto;touch-action:auto;&.dropdown-upwards{bottom:calc(100% + .25rem);top:auto}&::-webkit-scrollbar{width:.5rem}&::-webkit-scrollbar-track{margin:.5rem 0}&::-webkit-scrollbar-thumb{background-color:var(--neutral-250);border-radius:.5rem;border:1px solid var(--neutral-white)}&::-webkit-scrollbar-thumb:hover{cursor:grab;background-color:var(--neutral-400)}& li{display:flex;align-items:center;padding:.625rem .625rem .625rem .75rem;border-radius:.8rem;width:100%;font-size:.875rem;font-weight:450;text-wrap:nowrap;background:var(--neutral-30);color:var(--neutral-600);cursor:pointer;transition:.3s ease-out;&:hover{background-color:var(--neutral-60)}}}& ul.dropdown-align-left{width:calc(100% + 1rem);left:0;right:auto}& ul.dropdown-align-right{width:calc(100% + 1rem);left:auto;right:0}}.search-input-wrapper{position:relative;width:100%;& ul>li{text-overflow:ellipsis;text-wrap:wrap}}.color-input{position:relative;width:max-content;& div>svg{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}.selected-color>div>input{border:1px solid var(--neutral-150)!important}.input-large{grid-column:1 / -1}.input-medium{grid-column:1 / -1;grid-row:span 2;>div{height:5rem}}.input-big{grid-column:1 / -1;grid-row:span 2;>div{height:10rem}}.input-bigger{grid-column:1 / -1;grid-row:span 2;>div{height:20rem}}.select-input{position:relative;width:100%;height:100%;>div{display:flex;justify-content:space-between;align-items:center;height:2.5rem;width:100%;gap:.5rem;padding:0 .875rem;border:1px solid var(--neutral-150);background:var(--neutral-white);border-radius:.75rem;font-size:.875rem;font-weight:450;color:var(--neutral-600);transition:.3s ease-out;cursor:pointer;& span.select-label{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}& svg{flex-shrink:0;margin-left:.5rem;transition:transform .3s ease}& svg>path{fill:var(--neutral-300);transition:.3s ease-out}&:hover{color:var(--neutral-700);border-color:var(--neutral-400)}}&.disabled{pointer-events:none;>div{background:var(--neutral-60);border-color:var(--neutral-150);color:var(--neutral-400)}}&.open>div svg{transform:rotate(180deg)}}.file-input{display:flex;align-items:center;justify-content:space-between;min-width:0;max-width:100%;width:100%;border:1px solid var(--green-400);background:var(--green-50);border-radius:.75rem;padding:0 .875rem;gap:.625rem;height:2.5rem;cursor:default;>div{display:flex;align-items:center;justify-content:center;max-width:90%;gap:.5rem;& input{display:none}& svg path{fill:var(--green-600)}& p{color:var(--green-600);font-size:.75rem;font-weight:500;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}& span{color:var(--green-500);font-size:.75rem;font-weight:500}}& button{cursor:pointer;& svg path{fill:var(--green-600);transition:.3s ease-out}&:hover svg path{fill:var(--red-700)}}&.no-file{justify-content:center;border:1px dashed var(--neutral-300);background:unset;transition:.3s ease-out;cursor:pointer;& svg path{fill:var(--neutral-300);transition:.3s ease-out}& p{color:var(--neutral-300);font-weight:400;transition:.3s ease-out}&:hover{border-color:var(--neutral-400);background:var(--neutral-60);& svg path{fill:var(--neutral-500)}& p{color:var(--neutral-600)}}}}.image-input{position:relative;display:flex;align-items:center;justify-content:space-between;min-width:0;max-width:100%;min-height:0;max-height:100%;overflow:hidden;border:1px solid var(--green-400);border-radius:.75rem;height:2.5rem;cursor:default;>div{display:flex;align-items:center;justify-content:center;height:100%;width:100%;position:relative;gap:.5rem;& img,video,iframe{height:100%;width:100%;border-radius:.5rem;transition:.3s ease-out;object-fit:cover;&:hover{filter:brightness(.7)}}&:hover button{opacity:1}& button{opacity:0;position:absolute;top:2%;right:2%}& input{display:none}}&.no-file{justify-content:center;border:1px dashed var(--neutral-300);background:unset;transition:.3s ease-out;cursor:pointer;& svg path{fill:var(--neutral-300);transition:.3s ease-out}& p{color:var(--neutral-300);font-weight:400;transition:.3s ease-out}&:hover{border-color:var(--neutral-400);background:var(--neutral-60);& svg path{fill:var(--neutral-500)}& p{color:var(--neutral-600)}}}}.input.invalid label{color:var(--red-700)}.input.invalid input,.input.invalid textarea{border-color:var(--red-700)}.input.invalid:has(.password-toggle-btn) input{color:var(--red-700)}.input ul li.selected-option{background:var(--neutral-60);color:var(--green-600);&:hover{color:var(--neutral-600);&:before{background-color:var(--neutral-600)}}}@media(max-width:1024px){.input input{height:3rem;font-size:1rem!important;&::placeholder{font-size:1rem}}.select-input>div{height:3rem;font-size:1rem}.file-input{height:3rem}}