*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}html{font-size:62.5%}:root{--bgColor: #f2536b}.bgimg{background-size:cover;background-position:center;background-repeat:no-repeat;width:99.9vw;height:99.6vh;position:relative;background-color:var(--bgColor);display:flex;justify-content:center;align-items:center;flex-direction:column}.form-container{position:relative;z-index:9;background-color:#0000004d;top:-8rem;left:0;display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:transparent}form{display:flex;flex-direction:column;color:#fff;border:.1rem solid white;padding:2rem;border-radius:1rem}.logoimg{width:15rem;height:15rem}.heading{margin-bottom:1rem;font-size:3rem;border-bottom:.2rem solid white;padding-bottom:.5rem}label{font-size:1.6rem;margin-bottom:1rem}.inputfiled{font-size:1.7rem;padding:.8rem 1rem;width:40rem;border:none;outline:none;border-radius:.3rem;margin-bottom:2rem}.inputfiled::placeholder{color:gray}.loginBtn{padding:.5rem 1rem;font-size:1.7rem;background-color:transparent;color:#fff;border:white;transition:.2s ease-in-out;cursor:pointer}.loginBtn:hover{background-color:#fff;color:#000}.btn-container{display:flex;justify-content:center;align-items:center}.innersubmitbtn{border:.2rem solid white;border-radius:.5rem;transition:.2s ease-in-out;padding:.7rem 2rem;font-size:1.8rem;background-color:transparent;color:#fff;cursor:pointer}.innersubmitbtn:hover{background-color:#fff;color:#000;border-radius:.5rem}.main-container{display:grid;grid-template-columns:30rem 1fr}.profile-img{width:7rem;height:7rem;border-radius:50%;box-shadow:#0000003d 0 3px 8px}.first-sec{box-shadow:#0000003d 0 3px 8px;position:fixed;top:0;left:0;width:300px;height:100vh;background-color:#fff;border-right:1px solid #ddd;overflow-y:auto;padding:20px;box-sizing:border-box;z-index:1000}.content-area{margin-left:300px;padding:10px;height:100vh;width:80vw;overflow-y:auto;box-sizing:border-box}.profile-sect{display:flex;justify-content:space-between;align-items:center;padding:0 1rem 1rem;border-bottom:.2rem solid grey;margin:2rem 0}.table-profile{display:grid;grid-template-columns:.5fr 1fr;align-items:center;justify-content:right;width:80%;position:fixed;top:0;left:30rem;background-color:#fff;z-index:999;padding:2rem 1rem;box-shadow:0 2px 4px #0000001a}.table-img-sec{display:flex;justify-content:space-between;align-items:center;padding:0 3rem;z-index:10001}.btns{text-align:center;display:flex;gap:3rem;justify-content:center}.table{width:100%;margin-top:14rem}.table-head th{background-color:var(--bgColor);font-size:1.6rem;color:#fff;padding:.8rem 1.2rem}td{padding:.7rem;font-size:1.2rem}table tr:nth-child(2n){text-align:center;font-size:1.8rem;background-color:#f2f2f2}table tr:nth-child(odd){text-align:center;font-size:1.8rem}.user-btn{padding:1rem 1.5rem;background-color:var(--bgColor);color:#fff;border-radius:1rem;border:none;outline:none;cursor:pointer}.user-btn:hover{background-color:var(--bgColor)}.btns-container{display:inline-flex;border:2px solid #ccc;border-radius:.8rem;position:relative;overflow:hidden;width:50%;justify-content:end}.active-btn{position:absolute;top:0;bottom:0;width:50%;background-color:var(--bgColor);transition:left .3s;color:#fff}.all-user{position:relative;flex:1;padding:10px 20px;background:transparent;border:none;z-index:1;cursor:pointer}.dle-btn{padding:.3rem 1rem;background-color:var(--bgColor);border:none;outline:none;color:#fff}.more-btn{padding:.3rem 1rem;background-color:var(--bgColor);border:none;outline:none;color:#fff;cursor:pointer}.more-del{display:flex;justify-content:center;align-items:center;gap:1rem;cursor:pointer}.outer-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0000004d;z-index:1001;display:flex;justify-content:center;align-items:center}.inner-container{background-color:#fff;padding:2rem;border-radius:1rem;line-height:3rem;width:51.5%;height:55vh}.popup-text-container{display:grid;grid-template-columns:repeat(2,1fr);overflow-y:scroll;overflow-y:hidden}.popup-img-container{display:flex;gap:10px;overflow-x:auto;max-width:100%;padding-bottom:10px}.popup-img-container img{width:100px;height:100px;object-fit:cover;border-radius:8px;flex:0 0 auto;margin-top:1rem}.logoutBtn{padding:.5rem 1.2rem;background-color:var(--bgColor);border:none;color:#fff;outline:none}.logoutBtnMob{display:none}.table-img-sec-web{width:70%;display:flex;justify-content:space-around;align-items:center}.search-container{position:absolute;top:8.7rem;background-color:#fff;width:100%;padding:1rem;z-index:1003;box-shadow:0 4px 6px -4px #0003}.search-sub-container{display:flex;justify-content:center;gap:2rem}.search-field{width:25rem;padding:.7rem 1rem;font-size:1.4rem;border:none;outline:none;box-shadow:0 2px 4px #0000001a}.search-field::placeholder{color:gray}.searchBtn-container{display:flex;align-items:center}.search-btn{font-size:1.3rem;padding:.5rem 1rem;cursor:pointer;background-color:#87ceeb;border:none;outline:none;color:#fff}@media (max-width: 768px){.search-container{position:absolute;top:11.8rem;background-color:#fff;width:100%;padding:1rem;z-index:1003;box-shadow:0 4px 6px -4px #0003}.logoimg{width:15rem;height:15rem;margin-top:5rem}.inputfiled{font-size:1.7rem;padding:.8rem 1rem;width:30rem;border:none;outline:none;border-radius:.3rem;margin-bottom:2rem}.table-img-sec-web{width:60%;display:flex;justify-content:space-around;align-items:center}.logoutBtnMob{display:inline-block}.first-sec{display:none}.content-area{margin-left:0;height:100vh;width:100%;overflow-y:auto;box-sizing:border-box}.table-profile{display:grid;grid-template-columns:1fr;align-items:center;width:100%;gap:1rem;position:fixed;top:0;left:0;justify-content:center;background-color:#fff;z-index:999;padding:2rem 1rem;box-shadow:0 2px 4px #0000001a}.profile-img{width:5rem;height:5rem;border-radius:50%;box-shadow:#0000003d 0 3px 8px}.table-img-sec{display:flex;justify-content:space-around;align-items:center;padding:0 2rem;width:90%}.main-container{display:grid;grid-template-columns:1fr}.all-user{position:relative;flex:1;padding:10px 20px;background:transparent;border:none;z-index:1;cursor:pointer;width:100%}.btns-container{display:inline-flex;border:2px solid #ccc;border-radius:.8rem;position:relative;overflow:hidden;width:90%;justify-content:end;margin-bottom:1rem}.table{width:100%;margin-top:16.7rem}.more-btn{padding:.3rem 1rem;background-color:var(--bgColor);border:none;outline:none;width:10rem}.logoutBtnMob{padding:.5rem 1.2rem;background-color:var(--bgColor);border:none;color:#fff;outline:none}.inner-container{background-color:#fff;padding:2rem;border-radius:1rem;line-height:3rem;width:85%;height:70vh}.popup-text-container{display:grid;grid-template-columns:1fr;margin-top:2rem;height:40vh;overflow-y:scroll}.popup-img-container img{width:20rem;height:20rem;object-fit:cover;border-radius:8px;flex:0 0 auto;margin-top:1rem}}@media (max-width: 344px){.inputfiled{font-size:1.7rem;padding:.8rem 1rem;width:28rem;border:none;outline:none;border-radius:.3rem;margin-bottom:2rem}.content-area{margin-left:0;padding:10px;height:100vh;width:100%;overflow-y:auto;box-sizing:border-box}.table-profile{display:grid;grid-template-columns:1fr;align-items:center;justify-content:center;position:fixed;width:100%;top:0;left:0;background-color:#fff;z-index:999;padding:1rem 2rem;box-shadow:0 2px 4px #0000001a}.more-btn{padding:.3rem 1rem;background-color:#87ceeb;border:none;outline:none;width:10rem}.logoutBtnMob{padding:.5rem 1.2rem;background-color:#87ceeb;border:none;outline:none}}