.app-div{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;padding:0 1%;flex-direction:column}.main{display:grid;width:100%;height:750px;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:16px;padding:12px;justify-content:center}.section{background-color:#3d3d3a;min-width:30px;border-radius:35px;padding:20px}.section-title{display:flex;column-gap:10px;align-items:center;text-transform:capitalize;padding:5px 10px;border-radius:28px;width:fit-content;background-color:#2b2b29}.sub-font{color:gray}.task-queue-section,.completed-task-section{grid-row:span 7}.current-task-section{grid-row:span 4}.add-task-section{grid-row:span 3}.fallback-div{background-color:#2b2b29;padding:12px;border-radius:10px;width:fit-content;align-self:center;margin-top:8px;text-align:center;opacity:.6}.card{position:relative;background-color:#2b2b29;border-radius:25px;padding:15px}.header{display:flex;align-items:center;width:100%;padding:20px 0;justify-content:space-between}.section::-webkit-scrollbar{width:5px}.section:hover::-webkit-scrollbar-thumb{background:#888;border-radius:5px}.section::-webkit-scrollbar-thumb:hover{background:#555}.section::-webkit-scrollbar-track-piece:end{background:transparent;margin-bottom:36px}.section::-webkit-scrollbar-track-piece:start{background:transparent;margin-top:36px}.google-div{height:44px;width:auto}.nav-btn{background-color:#2b2b29;color:#fbd1a2;transition:all .15s ease-in-out}.nav-btn svg{color:#fbd1a2}.nav-btn:hover,.nav-btn.active{background-color:#fbd1a2;color:#2b2b29}.nav-btn:hover svg,.nav-btn.active svg{color:#2b2b29}@media (max-width: 992px){.main{grid-template-columns:1fr 1fr;padding:12px 4%;column-gap:4%}.section{border-radius:30px}.section-title{font-size:14px}}@media (max-width: 878px){.main{grid-template-columns:1fr 1fr;padding:12px 2%;column-gap:2%}}@media (max-width: 768px){.main{grid-template-columns:1fr;grid-template-rows:none;padding:12px 10%}.task-queue-section{min-height:400px}}@media (max-width: 576px){.main{grid-template-columns:1fr;grid-template-rows:none;padding:12px 1%}}.card{font-size:14px}.card-title{color:#fff;padding-right:20px}.card-div{display:flex;align-items:center;column-gap:2px;font-size:14px;margin:12px 0}.card-div svg{height:11px}.ellipsis-btn{display:grid;place-content:center;position:absolute;right:15px;top:15px;padding:1px;border-radius:50%}.task-queue-section{padding:20px 10px 20px 20px;display:flex;flex-direction:column;row-gap:20px;overflow-y:scroll}.DDMenu{display:flex;color:#fff;flex-direction:column;font-weight:400;font-size:13px;position:absolute;border-radius:10px;border:1px solid #23230a;background-color:#2b2b29;box-shadow:0 4px 4px #00000040;top:15px;transform:translateY(-10%);transition:transform .2s ease-in-out,opacity .2s ease-in-out;right:35px;opacity:0}.DDMenu button{padding:8px 24px 8px 8px;border-radius:10px}.drop-menu{transform:translateY(0);opacity:1}.completed-task-section-div,.completed-task-section{display:flex;flex-direction:column;row-gap:20px}.completed-task-section{overflow-y:scroll}@media (max-width: 992px){.completed-task-section{display:none}}.current-task-section-btn{display:flex;color:#27fb6b;column-gap:8px;width:fit-content;border:1px solid #27fb6b;padding:10px 48px;border-radius:50px;align-self:center;margin-top:auto;transition:all .25s ease-in-out}.current-task-section-btn:hover{background-color:#27fb6b;color:#3d3d3a}.current-task-section-btn svg path{transition:all .25s ease-in-out}.current-task-section-btn:hover svg path{fill:#3d3d3a}.current-task-section{display:flex;flex-direction:column;row-gap:20px;position:relative}.ctc-btn{position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#2b2b29;transition:opacity .25s ease-in-out}.cts-div{display:flex;flex-direction:column;row-gap:12px;height:90%}.ctc-btn svg{width:16px;height:16px}.ctc-btn.inactive{opacity:0;visibility:hidden}.streak{display:flex;column-gap:4px}.streak-bar{margin-left:12px;padding:4px 0;width:12px;position:relative;bottom:-2px;display:grid;place-content:center;background-color:#2b2b29;border-radius:4px;height:50px;container-type:size;transform:rotate(180deg)}.streak-bar-ind{border-radius:5px;overflow:hidden;transition:height 50ms ease-in-out}.streak-bar-ind-bg{height:100cqh;background:linear-gradient(to top,#90ee90,#ff474c);width:3px}.alm-btn{transition:all .25s ease-in-out;transform:translate(0)}.alm-active{transform:translate(-44px)}.alm-btn svg{height:20px;width:20px;color:#b50000}.alm-btn:hover svg{color:#2b2b29}.alm-btn:hover{background-color:#b50000}.ats-div .task-name-input{width:100%;padding:12px 15px 8px;background-color:#2b2b29;color:gray;border-radius:10px;border:none;font-size:16px}.range-input-background{width:100%;height:5px;background:linear-gradient(to right,#90ee90,#ff474c);position:relative;border-radius:10px;margin-top:10px}.range-input{position:absolute;width:100%;height:5px;background:none}.range-monitor{width:fit-content;height:fit-content;padding:10px;background-color:#2b2b29;border-radius:10px}.ats-div{display:flex;flex-direction:column;margin-top:12px;row-gap:14px;min-height:100%}.time-input{display:flex;align-items:center;justify-content:space-between}.time-input-div{display:flex;gap:3px}.time-input-div-input{background-color:#2b2b29;padding:10px;width:30px;border-radius:8px;color:gray;font-size:18px}.time-input-div-div{display:flex;align-items:end}.submit-btn{width:fit-content;padding:10px 28px;align-self:center;border-radius:50px;border:none;font-family:Roboto;font-weight:500;color:#3d3d3a;background-color:#fbd1a2}input[type=range]{-webkit-appearance:none;-moz-appearance:none;padding:0;border-radius:5px;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-webkit-border-radius:5px;height:16px;width:16px;border-radius:50%;background:gray}input[type=range]::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;-moz-border-radius:5px;height:14px;width:14px;border-radius:50%;background:gray}input[type=range]::-ms-track{width:300px;height:6px;background:transparent;border-color:transparent;border-width:2px 0;color:transparent}input[type=range]::-ms-thumb{height:14px;width:14px;border-radius:5px;background:gray}input[type=range]::-ms-fill-lower{background:#919e4b;border-radius:2px}input[type=range]::-ms-fill-upper{background:#c5c5c5;border-radius:2px}input[type=range]::-ms-tooltip{display:none}input[type=text]{border:none}.top-menu{height:44px;background-color:#3d3d3a;display:flex;align-items:center;padding:0 10px;border-radius:60px;column-gap:10px;width:fit-content;position:relative}.top-menu>button{height:30px;width:30px;display:flex;justify-content:center;align-items:center;border-radius:50%}.top-menu>.drop-down{position:absolute;border:1px solid #4c4c4c;background-color:#3d3d3a;display:flex;flex-direction:column;row-gap:16px;padding:24px 12px;width:300px;right:0;top:50px;z-index:99;transform:translateY(-30px);opacity:0;visibility:hidden;border-radius:30px;transition:all .15s ease-in-out}.top-menu>.drop-down:has(.google-div){width:fit-content;padding:8px 6px;height:fit-content;border-radius:20px}.top-menu>.drop-down.active{display:block;visibility:visible;transform:translateY(0);opacity:1}.drop-down .range-input-background{background:#fbd1a2}.toggle{width:40px;height:24px;border-radius:20px;display:flex;align-items:center;background-color:#2b2b29}.toggle>.knob{height:104%;width:60%;background-color:gray;border-radius:50%;display:grid;transition:all .15s ease-in-out;place-content:center;cursor:pointer}.toggle>.knob svg{color:#2b2b29;height:16px;width:16px}.knob.active{transform:translate(16px);background-color:#fbd1a2}:root{background-color:#2b2b29;font-family:Roboto,Inter,system-ui,sans-serif;font-weight:500;color:gray}*:after,*,*:before{margin:0;padding:0;box-sizing:border-box}input{outline:none}button{all:unset;cursor:pointer}button:focus:not(:focus-visible){outline:none}button:focus{outline:3px solid white}