.add-box{border:1px solid black;margin-bottom:10px;border-radius:2px;padding:10px;height:fit-content;background-color:#64748b}.edit-box{padding:5px 20px 20px;height:fit-content;background-color:#15803d;border-radius:2px}.ratings-box,.sort-box{background-color:#15803d;border:1px solid black;border-radius:2px;box-shadow:0 0 20px #000;display:none;height:fit-content;inset:0;margin:auto;padding:5px 20px 20px;position:fixed;width:300px}.edit-box-outer{box-shadow:0 0 20px #000;border-radius:2px;border:1px solid black;position:fixed;inset:0;margin:auto;width:300px;height:fit-content;display:none}@media (max-width: 700px){.edit-box-outer,.edit-box{width:fit-content;height:fit-content;overflow:scroll}.ratings-box{width:80%;height:fit-content;overflow:scroll}}.sort-button{background-color:#155e75}.sort-button-active{background-color:#164e63}.sort-button,.sort-button-active{border-radius:2px;font:small-caps 18px/1 sans-serif;border:1px solid black;padding:10px;color:#fff;margin-bottom:10px;margin-right:5px}.submit-button{background-color:#0f766e}.cancel-button{background-color:#4338ca}.clear-button{background-color:#991b1b}.reset-button{background-color:#166534}.submit-button,.cancel-button,.clear-button,.reset-button{border:1px solid black;border-radius:2px;color:#d3d3d3;font:small-caps 18px/1 sans-serif;margin-left:5px;padding:10px}.remove-button{background-color:#dc2626;border:1px solid black;border-radius:2px;color:#fff;font:small-caps 15px/1 sans-serif;margin-right:5px;padding:7px}.edit-button{background-color:#65a30d;border:1px solid black;border-radius:2px;color:#fff;font:small-caps 15px/1 sans-serif;margin-right:5px;padding:7px}@media (max-width: 700px){.sort-button,.sort-button-active,.clear-button,.reset-button{width:100%;margin:0 0 10px}}.fade-in{animation:fadein .05s;-moz-animation:fadein .05s;-webkit-animation:fadein .05s;-o-animation:fadein .05s}@keyframes fadein{0%{opacity:0}to{opacity:1}}.fade-out{animation:fadeout .05s;-moz-animation:fadeout .05s;-webkit-animation:fadeout .05s;-o-animation:fadeout .05s}@keyframes fadeout{0%{opacity:1}to{opacity:0}}body{font:small-caps 24px/1 sans-serif;background-color:#334155}.normal-font{font:24px/1 sans-serif}a:hover{text-decoration:underline}a{cursor:default;text-decoration:none;color:#000}::placeholder{color:#000;opacity:1}::-ms-input-placeholder{color:#000}.percentage{width:100%;background-color:gray;border-right:1px solid black;border-top:1px solid black;border-bottom:1px solid black;margin-top:5px;margin-bottom:10px;padding-right:1px}.bar{margin-top:-1px;margin-bottom:-1px;width:0%;height:30px;background-color:green;border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black}.error-text{color:#000}.input-field{border:1px solid black}.input-field-error{border:2px solid darkred}.input-field,.input-field-error{border-radius:2px;font:small-caps 18px/1 sans-serif;background-color:#789;padding:10px}.box{border:1px solid black;border-radius:2px;margin-bottom:10px;padding:10px;background-color:#64748b}.box-inner{display:inline-flex;flex-direction:row}.main-grid{display:grid;grid-template-columns:3fr 1fr;gap:10px}.float-right{float:right}.arrow{-webkit-user-select:none;-ms-user-select:none;user-select:none}.star:hover{color:#20b2aa}.star{-webkit-user-select:none;-ms-user-select:none;user-select:none;color:#000}.sort-button-list-mobile{display:none}.button-list,.header{display:flex;flex-direction:row;justify-content:space-between}.sort-button-list{overflow:hidden}.swap-arrows-mobile{display:none}.swap-arrows{display:inline}@media (max-width: 700px){.swap-arrows-mobile{display:inline}.swap-arrows{display:none}.box-inner{display:block;flex-direction:column}.header,.button-list{place-content:center;display:block;flex-direction:row;justify-content:space-between}.main-grid{display:block;grid-template-columns:3fr 1fr;gap:10px}.sort-button-list{overflow:hidden;display:none}.sort-button-list-mobile{display:block}.header .input-field{width:100%;padding:10px 0}.header{font-size:30px;width:100%;text-align:center}.header div:nth-child(1){margin-top:10px}.header div:nth-child(2){margin-top:10px}.box-inner div:nth-child(4){margin-top:10px}.header div:nth-child(2) label:nth-child(1){display:none}.button-list div:nth-child(3){display:flex;column-gap:5px}}