@import"https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Manrope:wght@200..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--cyan-gradient: #22d3ee;--purple-gradient: #c084fc;--pink-gradient: #f472b6;--blueish-purp: #3d76dc;--cute-blue: #56b9f2;--visible-blue: #2087c3;--linear-gradient: linear-gradient(var(--cyan-gradient), var(--purple-gradient), var(--pink-gradient));--gradient: var(--cyan-gradient), var(--purple-gradient), var(--pink-gradient);--muted-gradient: #22d3ee, #c084fc, #f472b6;--opaque-gradient: rgba(34, 211, 238, .4), rgba(192, 132, 252, .4), rgba(244, 113, 181, .4);--light-gradient: rgba(34, 211, 238, .6), rgba(192, 132, 252, .6), rgba(244, 113, 181, .6)}*{font-family:Inter,sans-serif;border:0;margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;background-color:unset}body,#root{width:100%;display:flex;flex-direction:column}.hidden{display:none!important}.invisible{visibility:hidden!important}header{width:100%;display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}#um-conversions-app{font-size:40px;font-weight:800;letter-spacing:-.5px;background-image:linear-gradient(to right,var(--gradient));color:transparent;-webkit-background-clip:text;background-clip:text}header p{font-size:14px;line-height:1.4}#main-page{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3.5rem}.emphasize{font-style:italic;font-weight:700;letter-spacing:.3px;filter:brightness(.8) saturate(1.5)}@media screen and (max-width:480px){header{gap:12px}header p{font-size:10px;line-height:1.3;text-wrap-style:balance}#main-page{padding:2rem 1rem}#um-conversions-app{font-size:22px;line-height:1.1;letter-spacing:0px;text-align:center;text-wrap-style:auto}}.units-main{width:100%;margin:1rem auto 0;display:flex;flex-direction:column;align-items:center;gap:2.5rem}.units-main .container{display:flex;flex-direction:column;width:90%;gap:2rem}.units-main .container-with-sidebar{display:flex;flex-direction:column;width:100%;gap:2rem}.list-container{overflow:hidden;transition:height .2s ease-out}@media screen and (max-width:480px){.units-main{width:100%;margin-top:0;gap:1.5rem}.units-main h1{font-size:21px;letter-spacing:.3px}.units-main .container{width:100%;gap:1rem}}.container .systems-list{display:flex;row-gap:4rem;flex-wrap:wrap;justify-content:space-between;width:100%}.container .system{display:flex;flex-direction:column;width:48%;height:fit-content;gap:26px;background-color:#f7f7f7;padding:2rem;transition:all .2s ease-out}.system.main h3{position:relative;overflow:hidden;cursor:pointer}.container [data-expanded=false].system{gap:0!important;padding:1rem;transition:all .2s ease-out}.container .single .system{width:100%}.container.ungrouped .system{display:flex;width:100%;height:fit-content;background-color:#f7f7f7;padding:2rem}.container.ungrouped .units-list{gap:22px 0;justify-content:space-around}.container.ungrouped .system-unit{width:22%}@media screen and (max-width:480px){.container.ungrouped .system{padding:1rem}.container.ungrouped .system-unit{width:46%}.container.ungrouped .units-list{gap:14px 0}}.systems-list h3{font-size:20px;font-weight:500;border-bottom:1px solid lightgray;padding-bottom:7px;transition:all .2s ease-out}.systems-list [data-expanded=false] h3{border:none;padding:0;transition:all .2s ease-out}.systems-list.single h3{text-align:center}.system .units-list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px}.single .system .units-list{gap:2rem;justify-content:space-evenly}.system-unit{display:flex;flex-direction:column;gap:4px;position:relative;width:47%}.single .system-unit{flex:0 1 22%}.units-list .system-unit.in-list{display:none}.unit-name{display:flex;justify-content:space-between;align-items:center}.units-list .unit-name p{font-weight:400;font-size:16px}.add-here .unit-name p{font-weight:500;font-size:16px}.unit-name p span{font-size:smaller}.icon-add-unit{cursor:pointer;color:#87cefa;font-size:22px;transition:color .5s}.input-area{display:flex;border:1px solid pink}.input-converter{border:1px solid pink;padding:12px;line-height:1;font-size:18px;background-color:#fff}input:invalid{border:2px solid red}input:focus{outline:none}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.unit-symbol{position:absolute;bottom:14px;right:10px;font-size:13px;font-weight:500;filter:brightness(.7);color:var(--purple-gradient)}.icon-add-unit:hover,.icon-add-unit:focus{position:relative;color:var(--visible-blue);transition:color .5s}[role=tooltip]{visibility:hidden;position:absolute;top:6px;right:0;color:var(--cute-blue);border-radius:3px;font-size:12px;font-weight:500;letter-spacing:.3px;opacity:0;transition:visibility .4s,opacity .4s}.icon-add-unit:hover+[role=tooltip],.icon-add-unit:focus+[role=tooltip],[role=tooltip]:hover,[role=tooltip]:focus{visibility:visible;opacity:1;transition:visibility .6s .2s,opacity .6s .2s}.system.main[data-expanded] h3 [role=tooltip]{visibility:hidden;opacity:0}.system.main[data-expanded] h3:hover [role=tooltip]{visibility:visible;opacity:1}.system.main[data-expanded=false] h3 [role=tooltip]{translate:100px 0px 0px;transition:translate .5s,visibility .6s .2s,opacity .6s .2s}.system.main[data-expanded=true] h3 [role=tooltip]{translate:0px 100px 0px;transition:translate .7s .1s,visibility .6s .2s,opacity .6s .2s}.system.main[data-expanded=false] h3:hover [role=tooltip]{translate:0px 0px 100px;transition:translate .5s,visibility .5s,opacity .5s}.system.main[data-expanded=true] h3:hover [role=tooltip]{translate:0px 0px 100px;transition:translate .5s,visibility .6s .2s,opacity .6s .2s}@media screen and (max-width:480px){.container .systems-list,.container-with-sidebar .systems-list{flex-direction:column;row-gap:2rem}.container .system,.container-with-sidebar .system.main{width:100%;padding:1rem;gap:15px}.systems-list h3{font-size:15px}.system .units-list{gap:18px 0}.system-unit[data-is-formula=true]{width:100%}.units-list .unit-name p{font-size:12px;font-weight:450;letter-spacing:.3px}.input-converter{padding:8px 10px;font-size:16px}.unit-symbol{right:6px;font-size:12px;letter-spacing:.1px;bottom:10px}.icon-add-unit{font-size:17px}.sidebar{width:100%;order:3}.container-with-sidebar .system.main{width:100%}.single .system .main .units-list{gap:18px}}.title-size{display:flex;align-items:center;gap:7px}.size-square,.size-lines{position:relative}.line-container{display:flex;align-items:flex-end}.size-line{border-right:2px solid white;height:var(--height, calc(2 * var(--size)));width:5px;transition:all .8s;background-color:#000}[draggable=true]{cursor:grab;transition:transform .4s,opacity .5s,filter .5s}.dragging{opacity:.2;transform:scale(1)}.grabbing{cursor:grabbing}.not-allowed{cursor:not-allowed}:not(.dragging).reorder-unit *{font-style:italic!important}.dragover .units-list{perspective:1000px;transform-style:preserve-3d}.dragover [draggable=true]:not(.dragging):not(.reorder-unit),.dragover [draggable=true]:not(.dragging){opacity:.6;transition:opacity .5s}.dragover [draggable=true]:not(.dragging).reorder-unit{opacity:1;filter:saturate(2);transition:opacity .5s,filter .5s}.invalid-drop{opacity:.4}.double-input{display:flex}.double-input .formula{width:50%;position:relative}.double-input .formula input{width:100%}.double-input .formula:last-child input{border-left:none}#conversion-chart{width:80%;display:flex;justify-content:space-evenly}.chart-system-container,.chart-system-units{display:flex;flex-direction:column;gap:10px}.chart-system-container{width:40%}.chart-system-container h4{font-size:18px;background-color:#87cefa;padding:6px}.chart-unit,.current-unit,.prev-unit{display:flex;justify-content:space-between;gap:10px}.chart-unit *{font-size:16px}nav{width:100%;margin:10px auto 0}#unit-tabs{display:flex;justify-content:space-evenly;position:relative}#unit-tabs button{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:10px 15px;font-size:15px;font-weight:500;letter-spacing:.3px;box-shadow:0 1px #d3d3d3;color:#000;transition:font-size .4s,font-weight .4s,box-shadow .4s}#unit-tabs button.active{font-weight:600;transition:all .4s,font-size .4s,font-weight .4s,box-shadow .4s}@media screen and (min-width:481px){#unit-tabs button.active:after{content:"";background:#000;height:2px;position:absolute;z-index:2;bottom:-2px;width:100%;transition:all .8s}#unit-tabs .unit-icon{height:22px;width:22px}#unit-tabs>.line{background-image:linear-gradient(to right,var(--gradient));height:2px;pointer-events:none;opacity:0;transition:all .5s;position:absolute;bottom:-2px;left:var(--left, var(--active-offset));width:var(--width, var(--hover-width));--index: 0}#unit-tabs>button:hover~.line{left:var(--left, var(--hover-offset));opacity:1}#unit-tabs>button.active~.line{--index: var(--active)}#unit-tabs>button:nth-of-type(1):hover~.line{--index: 1 }#unit-tabs>button:nth-of-type(2):hover~.line{--index: 2 }#unit-tabs>button:nth-of-type(3):hover~.line{--index: 3 }#unit-tabs>button:nth-of-type(4):hover~.line{--index: 4 }#unit-tabs>button:nth-of-type(5):hover~.line{--index: 5 }#unit-tabs>button:nth-of-type(6):hover~.line{--index: 6 }#unit-tabs>button:nth-of-type(7):hover~.line{--index: 7 }#unit-tabs>button:nth-of-type(8):hover~.line{--index: 8 }#unit-tabs>button:nth-of-type(9):hover~.line{--index: 9 }#unit-tabs>button:nth-of-type(10):hover~.line{--index: 10 }#unit-tabs>button:nth-of-type(11):hover~.line{--index: 11 }#unit-tabs>button:nth-of-type(12):hover~.line{--index: 12 }#unit-tabs>button:nth-of-type(13):hover~.line{--index: 13 }#unit-tabs>button:nth-of-type(14):hover~.line{--index: 14 }}@media screen and (max-width:480px){nav{width:100%;padding:5px 0 12px;overflow-x:scroll;scroll-behavior:smooth}#unit-tabs{gap:10px;justify-content:flex-start;flex-wrap:nowrap}nav::-webkit-scrollbar{height:6px;background-color:#f7f7f7}nav::-webkit-scrollbar-thumb{background-clip:padding-box;border-radius:8px;background-image:linear-gradient(to right,var(--opaque-gradient));opacity:.5}#unit-tabs button{flex:1 0 fit-content;font-size:10.5px;padding:6px;box-shadow:none;background-color:#f7f7f7;border:1px solid var(--purple-gradient);border-radius:8px;font-weight:500}#unit-tabs button.active{background-color:var(--purple-gradient);color:#fff;display:none}}.list-organize{width:90%;margin:2rem auto 0;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.conversions-header{font-size:25px;font-weight:500;width:100%;text-align:center;background-image:linear-gradient(to right,var(--gradient));background-color:#ffffff7f;background-blend-mode:overlay;padding:10px 0}.drag-here{width:45%;min-height:40px;height:auto;border:1px solid lightblue;padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.drag-here p{text-align:center}.instructions-1{font-size:17px;font-weight:400;filter:brightness(.7) saturate(1.5);color:#56b9f2;width:fit-content;opacity:1;margin-bottom:0;transition:margin-bottom .5s,opacity 1s}.instructions-2{font-size:14px;font-weight:350}.custom-list{width:100%;display:flex;flex-direction:column;align-items:center;overflow:clip;margin-bottom:0;transition:margin-bottom .5s}.custom-list.hiding{margin-bottom:-1rem;transition:margin-bottom .6s}.instructions-1.hiding{margin-bottom:-2rem;opacity:0;transition:margin-bottom .6s,opacity 1s}.custom-list .system-unit{width:17%}.custom-list .system-unit[data-is-formula=true]{width:30%}.add-here{width:100%;display:flex;gap:1rem;padding:1rem .5rem;flex-wrap:wrap;justify-content:space-evenly}.organize{width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:7px;border-bottom:1px solid pink}.sort-list{display:flex;align-items:flex-end;gap:8px}.sort-list button,.sort-list .organize-icon,.reset-list,.remove-grouping{cursor:pointer;line-height:1.2;color:#696969;font-weight:400;letter-spacing:.3px;transition:color .6s}.reset-list,.remove-grouping.center-right{text-align:right}.remove-grouping:hover,.reset-list:hover,.sort-list button:hover,.sort-list .organize-icon:hover{color:var(--visible-blue);transition:color .6s}.organize-icon,.organize-icon svg{height:20px;width:20px}.icon-add-example{color:var(--visible-blue);vertical-align:text-top;font-size:18px}@keyframes shake{0%{transform:scale(1.1) rotate(0)}40%{transform:scale(1.5) rotate(-20deg)}60%{transform:scale(1.5) rotate(0)}80%{transform:scale(1.5) rotate(20deg)}to{transform:scale(1.1) rotate(0)}}@media screen and (max-width:480px){.list-organize{margin:0;width:100%;gap:1.5rem}.conversions-header{font-size:18px;letter-spacing:.3px}.drag-here{width:95%;padding:1rem .7rem;gap:8px}.instructions-1{font-size:13px;line-height:1.3;letter-spacing:.1px;text-wrap-style:balance}.instructions-2{font-size:10px;max-width:100%;line-height:1.2;text-wrap-style:balance}.icon-add-example{font-size:13px}.add-here{padding:.5rem .3rem .3rem}.custom-list .system-unit,.custom-list .system-unit[data-is-formula=true]{width:47%}.add-here .unit-name p{font-size:11px;letter-spacing:.2px}.organize{padding-bottom:3px}.organize-icon,.organize-icon svg{width:13px;height:13px}.sort-list{gap:5px}.sort-list button,.sort-list .organize-icon,.reset-list,.remove-grouping{font-size:9.5px;letter-spacing:0}}