:root{--main-color: #2c3e50;--transition-color: #2c3e50;--main-font-color: white}body,html{margin:0;font-family:Open Sans,Helvetica,sans-serif;color:#000;height:100%}#message-box{position:absolute;top:5px;left:5px;z-index:5;font-size:19px}body{position:relative;display:flex;flex-direction:row;background-color:#fff}#container-wrapper{position:relative;height:100%;flex-grow:1}#canvas{display:block;background:#fff;height:100%;width:100%}#modify-graph{display:flex;flex-direction:column;padding:10px 20px;background-color:#ecf0f1;min-width:210px}#modify-graph>*{margin-bottom:.2em}#modify-graph button,select,#graph-upload{padding:8px 12px;box-sizing:border-box;font-size:17px;border-radius:5px;border:transparent;background-color:var(--main-color);color:var(--main-font-color);font-family:inherit;display:flex}#graph-upload{cursor:pointer}#modify-graph button:hover{background-color:var(--transition-color);transition:all .1s linear}#modify-graph select.hide{display:none}#modify-graph svg{fill:#fff;height:24px}#modify-graph p{padding:0;margin:0 0 0 10px}#algorithms:focus{outline:none}#change-data.hide{display:none}#change-data{display:flex;flex-direction:column}#change-data input{font-size:16px;border:solid 2px #000000;border-radius:3px;color:#000;box-shadow:#00000029 0 1px 4px;text-align:center}#change-data input:focus{border:solid 3px #000000;outline:none}#play-box.hide{display:none}#play-box{min-width:220px;display:flex;justify-content:space-around;position:absolute;top:5px;right:5px;z-index:5}#play-box button{display:flex;justify-content:center;align-items:center;background-color:#fff;border:solid 1px black;border-radius:5px}#play-box button svg{fill:#000}#play-box button:hover{background-color:#f5f5f5;transition:all .1s linear}#play-box button.hide{display:none}#toggle-speed{border:none;padding:0;height:35px;width:35px;margin-left:10px}#speed-input{width:200px}#toggle-speed .tooltip{top:-40px;right:0}#speed-box{width:430px;height:50px;position:absolute;bottom:10px;right:5px;z-index:5;display:flex;flex-direction:row;justify-content:end;align-items:center}#speed-box.hide{display:none}#speed-box .box-information{height:100%;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;background-color:#fff;border-radius:5px}#speed-box .box-information.hide{display:none}#speed-box svg{fill:#fff}button{box-shadow:#00000029 0 1px 4px;background-color:var(--main-color);cursor:pointer}#path-info{position:absolute;bottom:5px;left:5px;z-index:5;display:flex;flex-direction:column;text-align:left;font-size:19px}#path-info.hide{display:none}#algorithm-information-box{position:absolute;top:40px;left:5px;z-index:5;width:27%}#algorithm-information-box.hide{display:none}#algorithm-info{font-size:12px;width:100%;height:70vh;border-radius:3px;border:1px solid black;box-shadow:#00000029 0 1px 4px;padding:10px;background-color:#fff;text-overflow:auto;overflow:scroll;box-sizing:border-box}#algorithm-info h4{margin-top:0}#toggle-info{border:none;padding:0;height:35px;width:35px;position:relative}#toggle-info .tooltip{position:absolute;left:40px;top:0;transform:translateY(-50%)}#toggle-info svg{fill:#fff}.toggle svg.hide{display:none}.box-information.hide{display:none}.tooltip{position:absolute;transition:all .5s linear;background-color:var(--main-color);white-space:nowrap;padding:1px 5px;border:none;border-radius:3px;color:var(--main-font-color);font-weight:700}.tooltip.hide{display:none}#ds-container{margin-top:20px;display:flex;gap:5px;flex-wrap:nowrap;margin-bottom:20px;width:100%;overflow:auto}#algorithm-info .ds-name{text-transform:capitalize;text-align:center}#info-text{font-size:14px;min-height:30%;text-wrap:wrap}.ds-box{height:25px;background-color:#f0f0f0;border:2px solid #000000;border-radius:5px;font-weight:700;width:25px;text-align:center;display:flex;justify-content:center;align-items:center;flex-shrink:0}#queue-label{margin-top:5px;display:flex;justify-content:space-between;width:100%}#stack-label{margin-top:5px;display:flex;justify-content:center;width:100%}.stack{flex-direction:column-reverse;align-items:center}.queue,.priority-queue{flex-direction:row}#screen-size-warning{position:absolute;z-index:10;display:none;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:var(--main-color);color:#fff;font-size:14px}@media (max-width: 850px),(max-height: 400px){#screen-size-warning{display:flex}}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;background:#000;border-radius:20px}input[type=range]::-webkit-slider-thumb{height:25px;width:25px;border-radius:25px;background:var(--main-color);cursor:pointer;-webkit-appearance:none;margin-top:-8px}input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;background:#000;border-radius:20px}input[type=range]::-moz-range-thumb{height:25px;width:25px;border-radius:25px;background:var(--main-color);cursor:pointer;margin-top:-8px;border:none}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;background:#000;border-color:transparent;color:transparent}input[type=range]::-ms-thumb{margin-top:1px;background:var(--main-color);height:30px;width:30px;border-radius:30px;background:#5b63b7;cursor:pointer}input[type=range]:focus::-ms-fill-lower{background:#000}input[type=range]:focus::-ms-fill-upper{background:#000}