/*
  Hello there!
  I'm Riad Loukili, a young, self-taught software engineer
  from Morocco.
  I felt a little bored in the COVID-19 lockdown and decided
  to make this project, and it sure was a lot of fun.
  I hope you like it.
  Bye
  -------
  Twitter: @RiadLoukili
  LinkedIn: /in/RiadLoukili
*/
body,html{margin:0;padding:0;background-color:#464646;color:#fff;height:100%}*,body,html{box-sizing:border-box;font-weight:400;font-size:13.3333px;font-family:Montserrat,sans-serif}#controls{z-index:50;padding:16px;padding-right:0;background-color:#272727;position:fixed;top:8px;left:8px;border-radius:8px;display:flex;transition:transform .3s ease-in-out;overflow:hidden}#controls.closed{transform:translateX(calc(-100% + 38px))}#controls .hide-show-container ion-icon{transform:rotateZ(180deg);transition:transform .3s ease-in-out}#controls.closed .hide-show-container ion-icon{transform:rotateZ(0)}ion-icon{font-size:18px}button{display:flex;align-items:center;padding:8px 16px;background-color:transparent;border-radius:6px;color:#fff;border-width:0;cursor:pointer;outline:0}button:disabled{color:#494949;background-color:rgba(32,32,32,.25)}button:disabled:hover{color:#494949;background-color:rgba(32,32,32,.25)}button ion-icon{margin-right:8px}.start-and-target{display:flex}.start-and-target button:first-child{margin-right:8px}.hide-show-container{display:flex;justify-content:center;margin-left:8px;background-color:#202020;margin-top:-16px;margin-bottom:-16px}.hide-show-container ion-icon{margin-right:0}.inputs-container{display:flex}.inputs-container input{flex:1;height:100%;background-color:transparent;color:#fff;border:0;outline:0}.inputs-container input:disabled{color:#494949;background:#252525}.inputs-container .input-grp{background-color:#202020;overflow:hidden;border-radius:8px;display:flex}.inputs-container .input-grp.disabled{color:#494949;background:#252525}.inputs-container .input-grp span{display:inline-block;padding:8px}.inputs-container .input-grp:first-child{margin-right:8px}.grid-size-container{border-left:5px #e67e22 solid;padding-left:8px;border-radius:4px;padding-top:4px;padding-bottom:4px}.grid-size{color:#dfdfdf;margin-bottom:8px;display:block}.starting-button{color:#2ecc71;background-color:rgba(46,204,113,.05);transition:background-color .1s ease-in-out}.starting-button:focus,.starting-button:hover{background-color:rgba(46,204,113,.15)}.target-button{color:#3498db;background-color:rgba(52,152,219,.05);transition:background-color .1s ease-in-out}.target-button:focus,.target-button:hover{background-color:rgba(52,152,219,.15)}.barriers-button{color:#e74c3c;background-color:rgba(231,76,60,.05);margin:8px 0;transition:background-color .1s ease-in-out}.barriers-button:focus,.barriers-button:hover{background-color:rgba(231,76,60,.15)}.simulate-button{color:#9b59b6;background-color:rgba(155,89,182,.05);margin-top:8px;transition:background-color .1s ease-in-out}.simulate-button:focus,.simulate-button:hover{background-color:rgba(155,89,182,.15)}.reset-button{color:#e67e22;background-color:rgba(230,126,34,.05);margin-top:8px;transition:background-color .1s ease-in-out}.reset-button:focus,.reset-button:hover{background-color:rgba(230,126,34,.15)}#root{position:absolute;top:52px;left:52px;bottom:52px;right:52px;background-color:#202020;display:flex;flex-direction:column;border:#202020 1px solid;overflow:auto}.grid-row{flex:1;display:flex}.grid-box{flex:1;min-height:24px;min-width:24px;border:#202020 .5px solid;background-color:#303030;transition:background-color .2s ease-in-out}.grid-box.starting{display:flex;align-items:center;justify-content:center;font-size:20px;color:#2ecc71;background-color:rgba(46,204,113,.15)}.grid-box.target{display:flex;align-items:center;justify-content:center;font-size:20px;color:#3498db;background-color:rgba(52,152,219,.15)}.grid-box.barrier{display:flex;align-items:center;justify-content:center;font-size:20px;color:#e74c3c;background-color:rgba(231,76,60,.25)}.grid-box.visiting{background-color:rgba(241,196,15,.3)}.grid-box.visited{background-color:rgba(241,196,15,.15)}.grid-box ion-icon{pointer-events:none}.grid-row .grid-box.path{background-color:rgba(52,152,219,.15)!important}#checklist{position:fixed;bottom:16px;left:50%;transform:translateX(-50%)}.list,.list li{margin:0;padding:0;list-style:none}.list{display:flex}.list li{margin:0 12px;display:flex;align-items:center;justify-content:center;color:#b4b4b4}.list li ion-icon{margin-right:8px}.check-start.active{color:#2ecc71}.check-target.active{color:#3498db}.check-barriers{color:#d46dff!important}.check-barriers.active{color:#e74c3c!important}#notifications{position:fixed;right:0;bottom:0;padding:0 8px;max-width:320px;width:100%;z-index:10}.notification{display:flex;margin-bottom:8px;background-color:#272727;border-radius:8px;overflow:hidden;width:100%;transition:transform 250ms ease-in-out,height .1s ease-in-out;transform:translateX(0)}.notification .icon-container{display:flex;justify-content:center;align-items:center;width:42px;background-color:#202020}.notification .icon-container ion-icon{font-size:18px}.notification .message-container{padding:12px 16px;flex:1}.notification .message-container p{padding:0;margin:0;font-size:12.5px}.notification .close-btn{display:none;padding:8px}.notification.dismissible .close-btn{display:block}.notification .close-btn ion-icon{margin:0}.notification.success .icon-container{color:#2ecc71;background-color:rgba(46,204,113,.05)}.notification.error .icon-container{color:#e74c3c;background-color:rgba(231,76,60,.05)}.notification.warning .icon-container{color:#e67e22;background-color:rgba(230,126,34,.05)}.notification.info .icon-container{color:#9b59b6;background-color:rgba(155,89,182,.05)}.notification.away{transform:translateX(calc(100% + 8px))}