body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;height:auto}h1{font-size:2.2em;line-height:1.1}overflow-y: auto; border: 1px solid #192434; border-radius: 7px; padding: 10px; } .menu-item{position:relative;margin-bottom:5px;cursor:pointer}#main-category-list{display:none;list-style:none;width:72%;position:relative;left:24%;margin-top:-.1%}#category-select{width:72%;margin-left:7%;height:32px;margin-top:30px;background-color:#161920}.popup{position:fixed;top:30%;left:37%;transform:translate(-50%,-50%);background-color:#161920;padding:2rem;border-radius:7px;z-index:1000;max-width:400px;width:90%}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999;color:#fff}.loading-spinner{border:8px solid #f3f3f3;border-top:8px solid #3498db;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite}body{min-width:320px;background-color:#0e1015;margin:0;color:#e9eff6;font-family:"Exo 2",sans-serif}html,body{height:100%;margin:0;padding:0;background-color:#0e1015}.flexbox-container#menu{display:flex;flex-direction:column;width:100%;min-width:100px;overflow:visible;height:10vh;justify-content:center;align-items:center;align-content:center}#content{display:flex;flex-direction:row}@media screen and (orientation: portrait){#content{flex-direction:column}}p{font-size:clamp(12px,1.2vw,26px);margin:0}.btn{width:10%;flex-grow:1;align-items:center;margin-bottom:-3px;margin-left:-1vw;list-style:none;padding:0}.btn button{background-color:transparent;border:none;margin-left:300%;width:auto;height:auto;padding:0}.btn button:hover{cursor:pointer;filter:drop-shadow(0 0 12px rgba(198,90,12,.79))}h4{margin:0}img.logo{padding:0 20px 20px;height:auto;width:700%;filter:drop-shadow(0 0 12px rgba(255,140,21,.67))}@media (max-width: 800px){img.logo{padding:0 20px 20px 5px}}form{color:#e9eff6}.form-container{top:50%;left:50%;background-color:#161920;position:fixed;transform:translate(-50%,-50%)}#kliens{padding:5px}.closeButton{cursor:pointer;margin-left:5px;margin-bottom:5px;background-color:#161920;color:#fff}.submit{display:block;background-color:gray;color:#fff;margin-top:5px}#root{width:100%;height:100%;top:0;display:flex;flex-direction:column}.menu-icon{flex-shrink:1;width:4vw;min-width:30px}#top-row{display:flex;list-style:none;align-items:center;justify-content:space-between}#top-row li{max-width:200px;height:100%}.search{position:relative;border-radius:10px;background-color:#161920;border:1px solid #192434;min-width:20vw;top:.2vh;flex-grow:1;margin:0;margin-left:30vw;margin-top:5vh;font-family:inherit}.icon-top{height:5vh;width:auto}.icon-top:not(.search):hover{filter:drop-shadow(0 0 12px #e9630aaa);cursor:pointer}#side-menu{min-width:40px;position:absolute;left:0;top:0;background-color:#0e1015;width:10%;border-radius:3px;border-left:none;border-top:none;height:auto;display:flex;flex-direction:column;align-content:flex-start;justify-content:cener}#side-menu button{margin-left:200%}textarea{resize:none}.client-container,.company_container{background-color:#0e1015;border:2px solid #282c37;border-radius:10px 0 10px 10px;width:40%;height:auto;border-bottom:0;border-right:0;margin:0 0 0 6%;font-family:Poppins,sans-serif;font-weight:500;z-index:1;padding:1%;display:inline-block}.client-container,.company_container{flex-direction:row}@media (max-width: 620px){.client-container,.company_container{flex-direction:column}}#client-form,#company-form{width:50%;display:block}@media screen and (orientation: portrait){#client-form,#company-form{display:none}}#list-table{width:50%}@media (max-width: 600px){.client-container,.company_container{margin-left:40px;padding:6px}}.client-container h3,.company_container h3{display:inline;color:#e9eff6;margin-right:1vw}.client-container button,.company_container button{margin-right:1vw}button{background-color:#161920;color:#e9eff6;border:1px solid #192434;margin-bottom:20px}button:hover{background-color:#202738;border:1px solid white}#save{margin-bottom:5px;background-color:#f18a2b;border:none}#save:hover{background-color:#b1641c;border:1px solid white}@media (max-width: 420px){#save{display:block}}label{color:#e9eff6}input,#aida-form,textarea{margin-bottom:6vh;background-color:#161920;color:#e9eff6;border:1px solid #192434;border-radius:7px;padding:5px;font-size:15px;font-family:inherit;width:90%}#aida-form{width:52%}input:focus{outline:none;color:#e9eff6}input::placeholder{color:#ffffff81;font-size:clamp(8px,15px,16px)}.client-container .color-picker,.company_container .color-picker{padding:0;border:0px;background-color:transparent;height:26px;width:50px}.input-div{position:relative;width:100%}.input-div label{display:inline-block;font-size:clamp(14px,1.2vw,22px);width:50%;margin-right:2%}.input-div input{position:relative;right:0}.input-div input::placeholder,.input-div select::placeholder{font-size:clamp(14px,1.2vw,22px)}@media (max-width: 700px){.input-div label{display:block}.input-div input{margin-top:4px;margin-bottom:30px}}#table{display:inline-block;width:50%;border-top:2px solid #282c37;border-right:2px solid #282c37;border-top-right-radius:15px;border-bottom-right-radius:15px}#table-search{width:80%;display:inline-block}.row{background-color:#161920;border:1px solid #192434;border-radius:7px;margin-bottom:10px;padding:7px;font-size:15px;cursor:pointer;display:flex;align-items:center;align-content:center}.row:hover{background-color:#11141a;border:1px solid white}.rowimg{height:42px;width:42px}.row button{margin:0}@media (max-width: 700px){.rowimg{height:32px;width:32px}}.info{display:inline-block;margin-left:5px;padding-right:5px;font-size:15px}.color-div{display:inline-block;position:relative;top:.4vh;width:3vh;height:3vh;margin-left:2%;border:1px solid #192434;border-radius:50%;background-color:#fff}#data{height:clamp(50vh,120vh,150vh);overflow-y:auto;border:1px solid #192434;border-radius:7px;padding:10px}.menu-item{position:relative;margin-bottom:5px;cursor:pointer}.menu-item:hover{background-color:red}.submenu{list-style:none;position:relative;width:100%;left:0}.submenu button{background:none;display:block;height:1%;border:none;width:100%}.submenu:hover{background-color:red}.menu-item:hover .submenu{display:block}.input-div ul{background-color:#161920;color:#e9eff6;border:1px solid #192434;padding:5px;border-radius:7px;font-size:15px;font-family:inherit}#csv_input{margin-right:15px;margin-top:0;margin-bottom:30px}#main-category-list{display:none;list-style:none;width:120%;position:relative;left:8%;margin-top:-18%}#category-select{width:120%;margin-left:7%;height:32px;margin-top:30px;background-color:#161920}#category-div{width:70%}#category-div:not(#settings-btn):hover #main-category-list{display:block}.popup{position:fixed;top:30%;left:37%;transform:translate(-50%,-50%);background-color:#161920;padding:2rem;border-radius:7px;z-index:10;max-width:400px;width:90%}@media screen and (orientation: portrait){.popup{left:55%;width:50%}}.popup h2{display:inline-block;margin-top:0;margin-bottom:10px}.popup img{float:left;margin-right:7px;height:5vh}.popup .popup_close{float:right;background-color:red}.popup .popup_close:hover{background-color:#a60000}.popup:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#161920;z-index:-1;border:1px solid #192434;border-radius:7px}.popup_img_edit_bin{display:flex;margin-top:20px;justify-content:space-evenly}#popupComment{height:20vh;overflow-y:auto}#category-setting{position:absolute;background-color:#0d0f13;top:1vh;left:25vw;border:2px solid #192434;padding:1%;width:60%;z-index:10001;display:none}.subcategory-setting{margin-left:5%}#cat-settings{margin-bottom:0}#setting-save{margin-left:5%;background-color:#f18a2b}#setting-save:hover{background-color:orange}.pButton{background:none;border:none}#closeSettings{float:right;background-color:red}#closeSettings:hover{background-color:#a60000}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;height:auto;zoom:normal}h1:not(.login-content h1){font-size:2.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}#confirm{display:none;background-color:#192434;position:absolute;top:50%;left:10%;padding:1%;border:5px solid white}#confirm-button{background-color:red}#confirm-button:hover{background-color:#771c1c}#lenyilik{width:25%;height:2%;display:none;min-width:115px}@media screen and (orientation: portrait){#lenyilik{display:block}}#login{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-background{position:absolute;top:20%;left:0;width:100%;height:100%;background-image:url(/pages/assets/Logo-Darkmode-hMFm4Qun.png);background-size:cover;background-position:center;filter:blur(20px);z-index:0}.login-content{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}#login img{width:60%;margin-bottom:20px}.login-div{background-color:#192434;width:90%;max-width:500px;border:2px solid white;border-radius:20px;padding:15px;margin-bottom:10px;box-sizing:border-box}.login-div input{display:block;margin:0 0 10px}.login-div button{background-color:#f18a2b;border:1px solid white}.login-div button:hover{background-color:#ac6520}.login-content h1{display:none;font-size:10px}#task-div{overflow-y:auto;background-color:red;height:40vh}.profile-dropdown{position:absolute;display:block;top:100%;left:-400%;background-color:#121a25;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 10px #0000001a;z-index:1000;min-width:120px;width:1000%;margin-top:5px}.profile-dropdown h5{margin-top:0;padding-left:15px}.profile-dropdown p{margin-bottom:10px;padding-left:15px;width:50%}.new-user-div{display:flex;border-bottom:1px solid rgb(122,122,122)}.profile-dropdown .new-user-div button{font-size:32px;padding:0;background:none;margin-left:25px}.logout-button{width:100%;padding:10px 15px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:14px;color:#fff;transition:background-color .2s}.logout-button:hover{background-color:#0e1015}.icon-top:hover{opacity:.8;transition:opacity .2s}#notifications{width:35vw;height:30vh;z-index:5;background-color:#0d0f13;border:2px solid #282c37;display:none;position:absolute;left:38%;top:10%;padding:3px;border-radius:10px;overflow-y:auto}.bell-icon{cursor:pointer;width:4%}.bell-icon:hover{filter:drop-shadow(0 0 12px rgba(198,90,12,.79));width:4.5%}@media screen and (orientation: portrait){.bell-icon{width:5%}.bell-icon:hover{width:5.5%}#notifications{width:50vw}.client-container,.company_container{width:90%}#side-menu{width:10%}#table{width:90%;margin-left:10vw}}.ertesites-div{margin-bottom:5px;background-color:#121a25;border:1px solid #282c37;padding:8px}.ertesites-div a{color:#fff;width:100%;display:block;padding:5px}.ertesites-div button{padding:0;width:35%}.ertesites-div a:hover{color:#ff0;text-decoration:underline}#table-mode{background-color:#1a1a1a;border:none;color:#fff;height:4%;width:20%;min-width:120px;border-radius:10px;text-align:center;font-size:18px;font-family:inherit;cursor:pointer}#table-mode:hover{background-color:#292626;border:1px solid white}#table-mode option:hover{cursor:pointer}#droppable{background-color:#0c490a;display:inline-block;position:relative;width:50%;text-align:justify;padding:5px;border-radius:15px}#droppable-label{text-wrap:auto}@media screen and (orientation: portrait){#droppable-label{display:block;margin:10px}}.employee-client:hover{text-decoration:underline}#comments{padding:6px;overflow-y:auto;height:40vh;margin-bottom:10px}#comments button{background-color:#ac6520;border:1px solid white;margin-left:5px}#comments button:hover{background-color:#8b4c0d}#comments h3{display:block}#client-popup p{font-size:18px}@media screen and (orientation: portrait){#comments input{margin-bottom:1vh}}.comment-holder{border-bottom:1px solid white}.ui-droppable-active{background-color:#747441}.loader-container{text-align:center;padding:40px;color:#fff}.spinner{margin:0 auto 15px;border:4px solid #ccc;border-top:4px solid #09f;border-radius:50%;width:40px;height:40px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#task-container{position:absolute;top:3%;left:29%;background-color:#161920;display:none;padding:1%;border:1px solid white;position:fixed;width:40%;overflow-y:auto;max-height:90vh;z-index:11}@media (max-width: 700px){#task-container{width:67%}}#task-container input{display:block;margin:10px 0 20px;background-color:#0e1015}#task-data{border:1px solid #192434;overflow-y:auto;height:clamp(30vh,40vh,80vh);background-color:#121a25;margin:0;width:99%}#user-container{width:70%;background-color:#11141a;height:30vh;overflow-y:auto;border:1px solid white;border-radius:15px}#user-container input{width:10%}#task-container button{margin-top:10px;background-color:#f18a2b;border:1px solid white;border-radius:15px}#addTask{background-color:#f18a2b;border:1px solid white;border-radius:15px}#task-div{background-color:#0e1015;overflow-y:auto;height:20vh}.task-date{display:inline-block;width:20%}#date-container{display:flex;flex-direction:row}#date-container label{margin-top:18px}