@import "https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Raleway:wght@100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{font-family:Montserrat,sans-serif}.auth{background:linear-gradient(71.17deg,#feaf00 19.35%,#f8d442 90.12%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth .auth-flex{background-color:#fff;border-radius:20px;padding:40px 30px}.auth .auth-img{justify-content:center;padding-bottom:43px;display:flex}.auth h2{text-align:center;font-weight:600;font-style:SemiBold;text-transform:uppercase;padding-bottom:9px;font-size:22px}.auth p{text-align:center;color:#6c6c6c;font-size:14px;font-weight:400}.auth .auth-flex .signin .paraTitle{padding-bottom:50px}.auth .auth-div-input{flex-direction:column;display:flex}.auth .auth-div-input label{color:#6c6c6c;padding-bottom:10px;font-size:14px;font-weight:500}.auth .auth-div-input input{border:1px solid #e5e5e5;border-radius:4px;outline-width:0;width:100%;max-width:415px;height:44px;margin-bottom:25px;padding-left:8px}.auth .auth-div-input input::placeholder{color:#cdcdcd;font-size:12px;font-weight:400}.auth .authSubmit{width:415.874px;height:44px;font-weight:500;font-style:Medium;color:#fff;cursor:pointer;background-color:#feaf00;border:none;border-radius:4px;margin-bottom:27px;font-size:14px}.auth-flex p a{color:#feaf00}.auth .auth-flex .signup .inline{width:50%;display:inline-block}.fileImage{display:none}.upload-box{cursor:pointer;border:2px dashed #ccc;border-radius:10px;justify-content:center;align-items:center;width:100px;height:100px;margin-bottom:10px;display:flex;overflow:hidden}.upload-box img{width:50px}.imgeDiv{width:100%}@media (width<=600px){.auth{height:auto;min-height:100vh;padding:20px}.auth .auth-flex{width:100%;padding:30px 20px}.auth .auth-flex .signup .inline{width:100%}.auth .auth-div-input input{max-width:100%}.auth .authSubmit{width:100%}.upload-box{width:90px;height:90px}.upload-box img{width:40px}.auth h2{font-size:20px}.auth p{font-size:13px}}.sidebar{background-color:#f2eae1;flex-direction:column;align-items:center;height:100vh;display:flex;position:sticky;top:0;left:0}.sidebarImg{width:84px;height:23px;margin:35px 0 54px;position:relative}.sidebarImg img{width:100%;height:100%}.sidebarImg:before{content:"";background-color:#f8d442;width:4px;height:100%;position:absolute;top:0;left:-10px}.sidbarImgPerson{width:128px;height:128px;padding-bottom:20px}.sidbarImgPerson img{border-radius:50%;width:100%;height:100%}.personInfo{flex-direction:column;align-items:center;display:flex}.personInfo h2{padding-bottom:91px;font-size:17px;font-weight:700}.sidebar .links{flex-direction:column;justify-content:center;display:flex}.sidebar .links a{color:#000;justify-content:space-between;font-size:14px;font-weight:500;text-decoration:none;display:flex}.active{background-color:#feaf00;border-radius:4px}.links a{margin-bottom:31px;padding:12px 56px 12px 40px}.logout{cursor:pointer;justify-content:space-around;align-items:center;width:85px;height:100%;display:flex}.sidebarToggle{display:none}@media (width<=768px){.sidebarToggle{cursor:pointer;z-index:99999;background-color:#f8d442;border:none;border-radius:0 6px 6px 0;justify-content:center;align-items:center;width:30px;height:60px;font-size:22px;display:flex;position:absolute;top:16%;right:-30px;transform:translateY(-50%)}.sidebar{z-index:99998;height:100vh;transition:transform .3s;position:fixed;top:0;left:0;transform:translate(calc(30px - 100%))}.sidebar.open{transform:translate(0)}}.dash{grid-template-columns:1fr 4fr;display:grid}@media (width<=768px){.dash{grid-template-columns:none}}.mainProducts{grid-template-columns:repeat(4,208px);justify-content:center;gap:40px;padding:30px;display:grid}@media (width<=1230px){.mainProducts{grid-template-columns:repeat(3,208px)}}@media (width<=945px){.mainProducts{grid-template-columns:repeat(2,208px)}}@media (width<=695px){.mainProducts{grid-template-columns:repeat(1,208px);padding:0}}.card{border-radius:12px;width:208px;height:208px;position:relative;overflow:hidden;box-shadow:0 4px 12px #00000026}.card img{object-fit:cover;width:100%;height:100%}.overlay{opacity:0;background-color:#f2eae1bf;flex-direction:column;justify-content:space-between;align-items:center;padding:20px;transition:opacity .3s;display:flex;position:absolute;inset:0}.card:hover .overlay{opacity:1}.overlay h2{text-align:center;line-clamp:2;-webkit-box-orient:vertical;font-size:clamp(18px,2vw,28px);font-weight:500;display:-webkit-box;overflow:hidden}.buttons{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.buttons button{cursor:pointer;border:none;border-radius:6px;font-size:14px;font-weight:500;transition:all .2s}.buttons button:hover{transform:scale(1.03)}.buttons button:first-child{color:#fff;background-color:#feaf00}.deleteButton{color:#fff;background-color:#fe0000;padding:10px 20px}.editButton a{color:#fff;width:100%;height:100%;padding:10px 20px;text-decoration:none;display:block}.pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:30px;display:flex}.pagination button{cursor:pointer;border:none;border-radius:50%;min-width:45px;height:45px;font-size:16px;transition:all .2s}.pagination button:hover:not(:disabled){transform:scale(1.05)}.pagination button:disabled{opacity:.5;cursor:not-allowed}.activePage{color:#fff;background-color:#feaf00}.search-box{width:min(600px,100%);margin:20px auto;padding:0 20px;position:relative}.search-box input{box-sizing:border-box;border:1px solid #e5e5e5;border-radius:10px;outline:none;width:100%;height:40px;margin-left:14px;padding:12px 45px 12px 15px;font-size:16px}.search-box input::placeholder{color:#c4c4c4;font-weight:400;font-style:Regular;font-size:14px}.search-box input:focus{border-color:#feaf00}.icon{color:#777;align-items:center;font-size:22px;display:flex;position:absolute;top:50%;right:35px;transform:translateY(-50%)}.add-task-btn{justify-content:end;width:75%;margin:0 auto;display:flex}.add-task-btn p{cursor:pointer;background-color:#feaf00;border-radius:4px;font-size:14px;font-weight:500}.add-task-btn p a{color:#fff;padding:13px 24px;text-decoration:none;display:block}@media (width<=696px){.add-task-btn{justify-content:center;width:50%;margin-bottom:10px;display:flex}.add-task-btn p{font-size:10px}}.cardSkeleton{border-radius:12px;width:208px;height:208px;padding:12px;overflow:hidden;box-shadow:0 4px 12px #00000026}.skeletonImage{background:#e5e5e5;border-radius:8px;width:100%;height:120px;animation:1.2s infinite skeleton-loading}.skeletonTitle{background:#e5e5e5;border-radius:4px;width:70%;height:20px;margin:15px auto;animation:1.2s infinite skeleton-loading}.skeletonButtons{justify-content:center;gap:10px;display:flex}.skeletonButtons div{background:#e5e5e5;border-radius:6px;width:70px;height:35px;animation:1.2s infinite skeleton-loading}@keyframes skeleton-loading{0%{background-color:#e5e5e5}50%{background-color:#f5f5f5}to{background-color:#e5e5e5}}.popupOverlay{z-index:5;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.popup{text-align:center;background:#fff;border-radius:20px;width:70%;padding:80px;animation:.3s popup;position:relative;box-shadow:2px 5px 10px #0000001a}.popup p{color:#000;font-weight:600;line-height:1.6;font-style:SemiBold;text-transform:uppercase;padding-bottom:80px;font-size:22px}.buttonsPop{justify-content:center;gap:150px;padding:0 85px;display:flex}.buttonsPop button{cursor:pointer;color:#fff;font-weight:500;font-style:Medium;background-color:#feaf00;border:none;border-radius:4px;flex:1;padding:12px;font-size:24px}@keyframes popup{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (width<=767px){.popup{padding:50px}.popup p{padding-bottom:20px;font-size:14px;line-height:1.1}.buttonsPop{gap:50px;padding:0 30px}}@media (width<=600px){.popup{padding:30px}.buttonsPop button{font-size:16px}}.mainDetails{padding:40px 40px 0}.backDetails svg{border:1px solid #000;border-radius:50%;width:40px;height:40px;transition:all .2s}.mainDetails .backDetails svg:hover{background-color:#f5f2ef}.mainDetails .imgDetails{justify-content:center;display:flex}.mainDetails .imgDetails img{width:350px;height:350px}.detailsInfo{flex-wrap:wrap;justify-content:center;gap:25px 160px;padding-top:40px;display:flex}.mainDetails .nameDetails{padding:46px 0 40px}.detailsInfo h1{font-size:clamp(22px,5vw,30px)}.detailsInfo h1 span{font-weight:500;font-style:Medium;text-transform:capitalize;color:var(--miscellaneous-alert-menu-action-sheet-separators,#8080808c)}@media (width<=970px){.mainDetails{padding:10px}.mainDetails .nameDetails{padding:10px 0}.detailsInfo{padding-top:20px}.mainDetails .imgDetails img{width:180px;height:250px}}@media (width<=767px){.mainDetails{padding-left:70px}}.crudMain{padding:40px 40px 0}.crudMain svg{border:1px solid #000;border-radius:50%;width:40px;height:40px;margin-bottom:25px;transition:all .2s}.crudMain h1{padding-bottom:25px;font-size:clamp(25px,5vw,60px);font-weight:600}.feildsCrud{grid-template-columns:1fr 1fr;align-items:stretch;gap:40px;display:grid}.feildsCrud>div:first-child,.feildsCrud>div:nth-child(2){grid-column:1}.feildsCrud>div:nth-child(3){grid-column:2}.feildsCrud>div{flex-direction:column;display:flex}.crudupload-box{cursor:pointer;background-color:#f7f9ff;border:2px dashed #cfd8ff;border-radius:10px;justify-content:center;align-items:center;width:100%;height:100%;min-height:220px;transition:all .2s;display:flex;overflow:hidden}.crudupload-box:hover{border-color:#7a8cff}.crudupload-box img{object-fit:contain;width:60px;height:60px}.crudMain svg{border:1px solid #000;border-radius:50%;width:40px;height:40px;transition:all .2s}.upload-container{height:100%;display:flex}.crudupload-box{cursor:pointer;background-color:#f8f8ff;border:1px dashed #ccc;border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;min-height:120px;display:flex;overflow:hidden}.crudupload-box img{width:30%;height:70%}.feildsCrud{grid-template-columns:1fr 1fr;grid-template-areas:"a c""b c";align-items:stretch;gap:20px;display:grid}.feildsCrud>div:first-child{grid-area:a}.feildsCrud>:first-child{padding-bottom:50px}.feildsCrud>div:nth-child(2){grid-area:b}.feildsCrud>div:nth-child(3){flex-direction:column;grid-area:c;display:flex}.feildsCrud input{border:1px solid #ccc;border-radius:4px;outline:none;padding:10px}.feildsCrud label{font-weight:500;font-style:Medium;color:#6c6c6c;margin-bottom:5px;font-size:clamp(16px,5vw,32px)}.addProductBtn{justify-content:center;display:flex}.addProductBtn button{color:#fff;font-weight:500;font-style:Medium;cursor:pointer;background-color:#feaf00;border:none;border-radius:4px;margin-top:100px;padding:11px 60px;font-size:clamp(10px,5vw,32px)}@media (width<=900px){.crudMain{padding:10px}.feildsCrud{grid-template-columns:1fr;grid-template-areas:"a""b""c"}.crudupload-box{width:100%;min-height:180px}.addProductBtn button{margin-top:50px}.feildsCrud>:first-child{padding-bottom:0}}@media (width<=600px){.feildsCrud{gap:15px}.feildsCrud input{padding:9px}.crudupload-box{min-height:160px}}@media (width<=769px){.crudMain{margin-left:50px}}
