.SideBarButton{background-color:var(--tertiary);color:var(--primary);padding:5px 15px;border-radius:8px;border:4px solid var(--primary);text-transform:uppercase;font-weight:700;font-size:16px;font-family:inherit;margin:10px 0;cursor:pointer;box-shadow:0 2px 2px #d3d3d3;transition:ease background-color .25s;max-width:100%}.SideBarButton:hover{color:var(--tertiary);background-color:var(--primary)}.SideBarButton:hover rect{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:422,0;transition:all .35s linear}.SideBarButton:active{transform:translateY(2px)}.SideBar{background-color:var(--secondary);width:20%;display:flex;align-items:center;justify-content:center;flex-direction:column;position:sticky;top:0}:root{--font-family: "Franklin Gothic Medium";--primary: #2B7A78;--secondary: #3AAFA9;--secondaryTransparent: #3AAFA901;--tertiary: #DEF2F1;--quarternary: #17252A;--quinary: #FEFFFF;--scroll: visible}.App{font-family:var(--font-family)}.Header{background-color:var(--secondary);color:#fff;position:fixed;width:11%;height:100px;z-index:20}.SideBar,.TimeTable{height:100vh}.HourLegend{grid-template-rows:repeat(24,100px);padding-top:4.5em;display:grid;text-align:center;color:var(--secondary)}.HourText{height:50px}.PopUp{width:15em;height:10em;background-color:var(--secondary);border:3px solid var(--secondary);position:absolute;right:100%;z-index:3;border-radius:20px;color:var(--tertiary);display:grid;grid-template-columns:1px repeat(6,1fr);grid-template-rows:repeat(3,1fr)}.PopUp input{color:var(--secondary);background-color:var(--tertiary);margin:10px;border:4px solid var(--primary);border-radius:8px;grid-row:1/2;grid-column:2/8}.PopUp .Colorbox{background-color:var(--primary);border-radius:25%;width:30px;height:30px;align-self:center;grid-row:2/3;grid-column:7/8}.PopUp .Confirmbtn{grid-row:3/4;grid-column:2/5;margin:5px}.PopUp .Cancelbtn{grid-row:3/4;grid-column:5/8;margin:5px}.PopUp .Colorbtn{display:inline-block;grid-column:2/7;grid-row:2/3;margin:5px}.PopUp button{background-color:var(--tertiary);color:var(--secondary);padding:0;border-radius:8px;border:4px solid var(--primary);text-transform:uppercase;font-family:inherit;font-weight:700;font-size:1em;letter-spacing:1px;margin:10px 0;cursor:pointer;transition:ease background-color .25s;width:auto}.PopUp button:hover{color:#feffff;background-color:var(--primary)}.PopUp button:hover rect{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:422,0;transition:all .35s linear}.PopUp button:active{transform:translateY(2px)}.HexColorPicker{border:4px solid var(--primary);border-radius:6%;right:100%;top:10em;z-index:4}.Day{color:#b5cefc;text-align:center;background-color:#f5f5f5;width:100%;border-left:2px solid white;display:grid;grid-template-columns:100%;grid-template-rows:100px repeat(48,50px)}.DayContainer{background-color:#000}.Highlight{position:relative;grid-column:1/2;background-color:#47b5ff33;z-index:1}.Task{background-color:red;z-index:1;grid-column:1/2;color:#fff;padding-top:10px;border-radius:20px}.HourLine{border-bottom:1px dashed var(--secondary);border-top:1px dashed var(--secondary);background-color:var(--tertiary);opacity:100%;grid-column:1/2;z-index:0}.TimeTable{display:flex;width:80%;justify-content:center;height:100%}.App{display:flex}body{-webkit-user-select:none;user-select:none;margin:0;overflow:var(--scroll)}.popup-content{margin:auto;background:#fff;width:50%;padding:5px;border:1px solid #d7d7d7}[role=tooltip].popup-content{width:200px;box-shadow:0 0 3px #00000029;border-radius:5px}.popup-overlay{background:#00000080}[data-popup=tooltip].popup-overlay{background:transparent}.popup-arrow{-webkit-filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));color:#fff;stroke-width:2px;stroke:#d7d7d7;stroke-dasharray:30px;stroke-dashoffset:-54px;left:0;right:0;top:0;bottom:0}