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