*{margin:0;padding:0}.app-container{display:flex;min-height:100vh;width:100%;gap:0;overflow:hidden}.navbar{width:30vw;background-color:#fff;font-family:Roboto,sans-serif}.pocket-title{position:absolute;left:6vw;top:58px;font-family:Roboto,sans-serif;height:38px;width:211px;font-weight:500;font-size:34px}.plus-button{background-color:#16008b;height:72px;width:72px;border-radius:50%;position:absolute;top:85vh;left:22vw;display:flex;justify-content:center;align-items:center;cursor:pointer}.plus-1{height:35px;width:8px;background-color:#fff;position:absolute}.plus-2{height:35px;width:8px;background-color:#fff;transform:rotate(90deg);position:absolute}@media screen and (max-width:767px){.navbar{width:100vw}.nav-selected{display:none}.dummy-nav{width:100vw}.plus-button{height:52px;width:52px;top:85vh;left:75vw;z-index:5}.pocket-title{display:flex;justify-content:center;text-align:center;position:static;width:100vw;font-size:28px;margin-top:40px}.plus-1,.plus-2{height:25px;width:6px}}.group-box{height:81vh;width:30vw;position:relative;top:14px;margin-top:120px;align-items:center;text-align:center;display:flex;flex-direction:column;overflow-y:auto;overflow-x:clip;font-family:Roboto,sans-serif;letter-spacing:.02em}.group-item{display:flex;gap:2vw;align-items:center;cursor:pointer;border-radius:16px;width:99%;padding:14px 5px}.selected-group{background:#2f2f2f2b}.item-title{display:flex;text-align:center;justify-content:center;align-items:center;height:54px;width:54px;border-radius:50%;background-color:#000;color:#fff;font-weight:500;font-size:19px;margin-left:3vw}.item-name{font-family:Roboto,sans-serif;display:flex;text-align:left;justify-content:start;align-items:center;font-weight:500;font-size:20px;height:48px;width:198px}.custom-scroll::-webkit-scrollbar{width:8px}.custom-scroll::-webkit-scrollbar-track{background:#e5e5e5;border-radius:10px}.custom-scroll::-webkit-scrollbar-thumb{background:#fff;border-radius:10px;border:1px solid #e5e5e5}@media screen and (max-width:767px){.group-box{width:100vw;top:5px;margin-top:15px;height:87vh}.group-item{gap:16px;padding:10px 12px 10px 50px;width:95%}.item-title{font-size:16px;height:48px;width:48px}.item-name{font-size:15px}}.main-section{background-color:#dae5f5;height:100vh;width:73vw}.content{padding-top:90px;display:flex;flex-direction:column;text-align:center;justify-content:center;align-items:center}.img-bg{width:580px;height:280px}.home-text-1{font-family:Roboto,sans-serif;letter-spacing:.02em;height:59px;width:313px;font-weight:700;font-size:48px;margin-bottom:10px}.home-text-2,.home-text-3{font-family:Roboto,sans-serif;height:32px;width:650px;font-weight:500;font-size:20px;letter-spacing:.02em;line-height:32px}.lock{margin-top:125px;letter-spacing:.02em;font-family:Roboto,sans-serif;font-size:18px}.lock-img img{height:18px;width:15px;padding-top:5px;padding-right:7px;position:relative;top:1.5px}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;z-index:4}@media screen and (max-width:767px){.dummy-ms{display:none}.ms-selected{display:block;width:100vw}.main-section{width:100vw}}.create-container{display:flex;flex-direction:column;position:absolute;top:230px;right:400px;z-index:5;height:222px;width:575px;border-radius:6px;background-color:#fff;gap:18px;font-family:Roboto,sans-serif;padding-top:30px;letter-spacing:.0135em}.cng-text{font-weight:500;padding-left:45px;font-size:22px}.group-name{display:flex;justify-content:space-between;padding-left:45px;padding-right:45px;align-items:center}.name-text{font-weight:500;font-size:20px}.name-input{border-radius:18px;border:2px solid #cccccc;padding:11px;width:294px;height:17px;font-family:Roboto,sans-serif;font-size:18px}.name-input::placeholder{font-size:18px;font-weight:400;color:#999;padding:10px}.color-stack{margin-top:1px}.choose-text{padding-left:45px;font-weight:500;letter-spacing:.035;font-size:20px}.create-btn{height:29px;width:119px;margin-left:435px;background-color:#001f8b;font-family:Roboto,sans-serif;color:#fff;border-radius:7px;font-size:16px;position:relative;margin-top:14px;cursor:pointer}.color-1{position:relative;top:10px;display:inline-block;height:31px;margin-left:35px;width:31px;border-radius:50%;background-color:#b38bfa;cursor:pointer}.color-2{position:relative;top:10px;display:inline-block;height:31px;margin-left:10px;width:31px;border-radius:50%;background-color:#ff79f2;cursor:pointer}.color-3{position:relative;top:10px;display:inline-block;height:31px;margin-left:10px;width:31px;border-radius:50%;background-color:#43e6fc;cursor:pointer}.color-4{position:relative;top:10px;display:inline-block;height:31px;margin-left:10px;width:31px;border-radius:50%;background-color:#f19576;cursor:pointer}.color-5{position:relative;top:10px;display:inline-block;height:31px;margin-left:10px;width:31px;border-radius:50%;background-color:#0047ff;cursor:pointer}.color-6{position:relative;top:10px;display:inline-block;margin-left:10px;height:31px;width:31px;border-radius:50%;background-color:#6691ff;cursor:pointer}.bright{box-shadow:0 0 8px 2px #00000080}@media screen and (max-width:767px){.create-container{top:35vh;right:9vw;height:27vh;width:82vw;gap:7px}.cng-text{font-size:17px;padding-left:7vw}.group-name{padding-left:7vw;padding-right:19px;justify-content:start;margin-top:5px;gap:1px}.name-text{width:30vw;font-size:13px}.name-input{width:33vw;height:1vh;font-size:10px}.name-input::placeholder{font-size:10px;padding:2px}.color-stack{margin-top:0;display:flex;height:7vh;gap:6px}.choose-text{font-size:13px;padding-left:7vw;height:7vh;padding-top:10px}.color-1,.color-2,.color-3,.color-4,.color-5,.color-6{height:15px;width:15px;margin-left:0}.button-div{display:flex;align-items:center;justify-content:center}.create-btn{margin-left:10px;width:50vw;margin-top:4px}}.note-heading{display:flex;gap:29px;justify-content:left;align-items:center;background-color:#001f8b;padding:11px 25px}.note-title{display:flex;text-align:center;justify-content:center;align-items:center;height:54px;width:54px;border-radius:50%;background-color:#000;color:#fff;font-family:Roboto,sans-serif;font-weight:500;font-size:20px}.note-name{font-family:Roboto,sans-serif;display:flex;text-align:left;justify-content:start;align-items:center;font-weight:500;font-size:20px;height:48px;width:398px;color:#fff}.input-div{position:absolute;bottom:0;height:25vh;background-color:#001f8b;width:70vw;display:flex;align-items:center;justify-content:center;font-family:Roboto,sans-serif}.text-area{width:65vw;height:6em;border-radius:7px;padding-left:25px;padding-top:18px;padding-right:10px;font-size:20px;font-family:Roboto,sans-serif;color:#999}.text-area::placeholder{font-size:20px;font-weight:400;color:#999;font-family:Roboto,sans-serif}.text-area:focus{outline:none;border:none}.blue-button,.grey-button{position:absolute;bottom:34px;right:48px}.blue-button{cursor:pointer}.all-note-itmes{width:70vw;height:64vh;overflow-y:auto;overflow-x:hidden}.all-note-itmes::-webkit-scrollbar{width:8px}.all-note-itmes::-webkit-scrollbar-track{background:#000000a1;border-radius:10px}.all-note-itmes::-webkit-scrollbar-thumb{background:#fff;border-radius:10px;border:1px solid #e5e5e5}.content-box{display:flex;flex-direction:column;background-color:#fff;margin:20px 10px 10px 42px;width:62vw;height:14vh;border-radius:5px;box-shadow:0 2px 7px 2px #b7b7b7;padding:16px 10px 35px 13px;position:relative}.item-text{font-size:15px;font-family:Roboto,sans-serif;letter-spacing:.035em;word-break:break-word;line-height:1.4;overflow-y:auto;overflow-x:hidden}.item-text::-webkit-scrollbar{display:none}.item-time{position:absolute;font-family:Roboto,sans-serif;font-weight:500;color:#353535;font-size:14px;bottom:10px;right:15px}.back{display:none}@media screen and (max-width:767px){.back{display:block;cursor:pointer}.note-page,.all-note-itmes{width:100vw}.input-div{width:100vw;height:20vh}.note-title{height:30px;width:30px;font-size:15px}.note-heading{padding:3px 15px;gap:9px}.note-name{width:60vw;font-size:15px}.text-area{font-size:13px;padding-left:3vw;padding-top:2vh;padding-right:5vw;width:84vw;height:7.5em}.text-area::placeholder{font-size:15px;font-weight:400;color:#999;font-family:Roboto,sans-serif}.blue-button,.grey-button{position:absolute;bottom:5vh;right:8vw;height:20px}.all-note-itmes{height:73vh}.item-text{font-size:11px}.item-time{font-size:10px}.content-box{margin-left:8vw;margin-right:5vw;width:75vw;height:18vh}}