@import"https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&display=swap";*{font-family:M PLUS Rounded\ 1c,sans-serif;font-weight:800;font-style:normal}.signage-page{width:100%;height:100%;display:flex;justify-content:space-between;background-color:#cde867;padding:0 47px;min-height:100dvh}.signage-page .card-avatar{max-width:240px;max-height:240px}.signage-page .card-avatar .avatar{-o-object-fit:cover;object-fit:cover;position:relative!important;width:100%;border-radius:24px}.signage-page .notification-display .list-notifications,.signage-page .notification-history .list-notifications{min-height:calc(100vh - 220px);max-height:calc(100vh - 220px)}.signage-page .notification-display .list-notifications-empty,.signage-page .notification-history .list-notifications-empty{flex-direction:column;align-items:center;justify-content:center;background-color:#fff;border-radius:24px;flex-wrap:nowrap!important}.signage-page .notification-display .list-notifications-empty .message-empty,.signage-page .notification-history .list-notifications-empty .message-empty{font-size:57px;color:#81a500;font-weight:800;text-align:center}.signage-page .notification-display{width:calc(66% - 20px);margin-bottom:50px;z-index:2}.signage-page .notification-display .header{position:relative;display:flex;padding-bottom:8px;max-height:143px;margin-top:15px;overflow:hidden}.signage-page .notification-display .header .content .notice{font-size:57px;color:#81a500;font-weight:800}.signage-page .notification-display .header .cloud-banner{position:relative;width:100%;height:150px}.signage-page .notification-display .header .cloud-banner .giraffe-wrapper{width:121px;height:146px;z-index:30}.signage-page .notification-display .header .cloud-banner .giraffe-wrapper img{width:100%;height:100%;z-index:30;-o-object-fit:cover;object-fit:cover;position:relative}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-01,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-02,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-03,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-04,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-05,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-06,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-07,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-08,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-09,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-10,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-11{position:absolute;z-index:10;background-color:#fff;border-radius:50%;height:100%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-01{z-index:10;top:10px;left:75px;width:9%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-02{top:0;left:10%;width:13%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-03{top:9px;left:18%;width:12%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-04{top:25px;left:26%;width:10%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-05{top:8px;left:33%;width:14%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-06{top:15px;left:43%;width:12%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-07{top:35px;left:51%;width:11%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-08{top:28px;left:57%;width:11%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-09{top:15px;left:64%;width:13%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-10{top:10px;left:75%;width:15%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-11{top:14px;right:0;border-radius:45%;width:13%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-12{position:absolute;width:calc(100% - 112px);height:30%;border-radius:0 0 20px 20px;z-index:10;right:0;bottom:0;background-color:#fff}.signage-page .notification-display .header .content{position:absolute;width:100%;bottom:9px;z-index:100;display:flex;justify-content:space-between;align-items:baseline;padding-right:15px;padding-left:152px}.signage-page .notification-display .header .content .time{color:#3f5000;font-size:37px;width:371px;height:61px;display:flex;align-items:center;justify-content:center;position:relative;right:10px;font-weight:800;background-color:#e1f98c;border-radius:16px}.signage-page .notification-display .list-notifications{display:flex;flex-wrap:wrap;width:100%;gap:20px;margin-top:11px;overflow-y:auto}.signage-page .notification-display .list-notifications .item{width:calc(33.33% - 14px);border-radius:24px;padding:16px;background-color:#fff;display:flex;justify-content:center;flex-direction:column;align-items:center;z-index:10}.signage-page .notification-display .list-notifications .item .card-avatar{width:240px;height:240px}.signage-page .notification-display .list-notifications .item .card-avatar .avatar{height:100%}.signage-page .notification-display .list-notifications .item .fullname{color:#00b9ef;font-size:36px;font-weight:800;margin-bottom:0;max-width:93.6%}.signage-page .notification-display .list-notifications .item .relationship{color:#f73b50;font-size:32px;font-weight:800;margin-bottom:0}.signage-page .notification-display .list-notifications .item .classroom{color:#000;font-size:24px;font-weight:800;background-color:#ffd358;padding:11px 5px;border-radius:110px;margin-top:5px;margin-bottom:0;min-width:104px;max-width:230px;text-align:center}.signage-page .notification-history{width:33%;z-index:10}.signage-page .notification-history .header{display:flex;max-height:135px;margin-top:24px;overflow:hidden;position:relative}.signage-page .notification-history .header .cloud-banner{position:relative;width:100%;height:150px}.signage-page .notification-history .header .cloud-banner .bear-wrapper{position:relative;width:162px;height:136px;overflow:hidden;z-index:30}.signage-page .notification-history .header .cloud-banner .bear-wrapper img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:30}.signage-page .notification-history .header .cloud-banner .clouds .cloud-item-01,.signage-page .notification-history .header .cloud-banner .clouds .cloud-item-02,.signage-page .notification-history .header .cloud-banner .clouds .cloud-item-03{position:absolute;z-index:10;background-color:#fff;border-radius:50%;height:100%}.signage-page .notification-history .header .cloud-banner .clouds .cloud-item-01{top:10px;left:65px;width:30%}.signage-page .notification-history .header .cloud-banner .clouds .cloud-item-02{top:0;left:32%;width:40%}.signage-page .notification-history .header .cloud-banner .clouds .cloud-item-03{top:9px;right:0;width:39%}.signage-page .notification-history .header .cloud-banner .clouds .cloud-item-04{position:absolute;width:calc(100% - 112px);height:40%;border-radius:0 0 32px 32px;z-index:10;right:0;bottom:0;background-color:#fff}.signage-page .notification-history .header .title{position:absolute;z-index:11;bottom:10px;left:190px;color:#81a500;font-size:50px;font-weight:800}.signage-page .notification-history .list-notifications{margin-top:11.5px;width:100%;overflow-y:auto}.signage-page .notification-history .list-notifications .item{display:flex;align-items:center;background-color:#fff;border-radius:18px;padding:11.5px;gap:12px;margin-bottom:19.5px;z-index:10;max-height:106px}.signage-page .notification-history .list-notifications .item:last-child{margin-bottom:0}.signage-page .notification-history .list-notifications .item .card-avatar{width:90px;height:90px;border-radius:18px;overflow:hidden}.signage-page .notification-history .list-notifications .item .card-avatar .avatar{position:relative!important;width:100%;height:100%;border-radius:18px}.signage-page .notification-history .list-notifications .item .content{width:calc(100% - 90px);display:flex;gap:16px;padding-right:16px;min-height:auto}.signage-page .notification-history .list-notifications .item .content__left{width:calc(100% - 75px);display:flex;justify-content:space-between;overflow:hidden}.signage-page .notification-history .list-notifications .item .content__left .person-details .fullname{color:#00b9ef;font-size:28px;font-weight:800}.signage-page .notification-history .list-notifications .item .content__left .person-details .relationship{color:#f73b50;font-size:26px;font-weight:800;margin-top:2px}.signage-page .notification-history .list-notifications .item .content__left .classroom{font-size:16px;font-weight:800;color:#000;background-color:#ffd358;border-radius:90.59px;min-width:63px;max-height:34px;line-height:34px;margin-left:5px;padding:0 5px;text-align:center}@media screen and (max-width:1366px){.signage-page .notification-history .list-notifications .item .content__left .classroom{min-width:auto}}.signage-page .notification-history .list-notifications .item .content__right{display:flex;flex-direction:column;min-width:86px}.signage-page .notification-history .list-notifications .item .content__right .time{color:#222;font-size:20px;font-weight:800;text-align:right}.icon-shrub{position:fixed!important;width:240px!important;height:126px!important;top:auto!important;inset:auto;z-index:1}.icon-shrub.icon-shrub-01{right:0!important;left:auto!important}.scroll-container{scrollbar-width:thin;scrollbar-color:#9aca28 rgba(0,0,0,0);padding-right:0}.scroll-container::-webkit-scrollbar{width:6px}.scroll-container::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.scroll-container::-webkit-scrollbar-thumb{border-radius:4px;border:none;background-color:rgba(0,0,0,0);-webkit-transition:background-color .3s;transition:background-color .3s}.scroll-container:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@media screen and (min-width:1919px){.signage-page .notification-display .header .content .notice.new-notification{font-size:36px}.signage-page .notification-display .header .content .notice.new-notification .fullname{font-size:40px}.signage-page .notification-display .list-notifications .item{max-height:420px}}@media screen and (max-width:1700px){.signage-page{padding:0 2vw}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-02,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-03,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-04,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-05{display:none}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-01{width:18%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-06{width:19%;left:22%;top:5px}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-07{width:19%;left:38%;top:20px}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-08{width:19%;left:50%;top:17px}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-09{width:19%;left:62%;top:8px}.signage-page .notification-display .header .content .time{color:#3f5000;font-size:2.5vw;width:auto;padding:10px}.signage-page .notification-display .header .content .notice{font-size:3vw}.signage-page .notification-display .header .title,.signage-page .notification-history .header .title{font-size:2.8vw;bottom:15px;top:auto}.signage-page .notification-display .list-notifications .item,.signage-page .notification-history .list-notifications .item{padding:.5vw;max-height:380px}.signage-page .notification-display .list-notifications .item .card-avatar,.signage-page .notification-history .list-notifications .item .card-avatar{max-width:200px;max-height:200px}.signage-page .notification-display .list-notifications .item .fullname,.signage-page .notification-display .list-notifications .item .relationship,.signage-page .notification-history .list-notifications .item .fullname,.signage-page .notification-history .list-notifications .item .relationship{font-size:1.8vw}.signage-page .notification-display .list-notifications .item .classroom,.signage-page .notification-history .list-notifications .item .classroom{font-size:1.2vw}.signage-page .notification-display .list-notifications-empty .message-empty,.signage-page .notification-history .list-notifications-empty .message-empty{font-size:2.8vw}.signage-page .notification-display .list-notifications-empty .card-avatar,.signage-page .notification-history .list-notifications-empty .card-avatar{width:20vw;height:20vw}.signage-page .notification-history .list-notifications .item{gap:5px;padding:.5vw;margin-bottom:6px}.signage-page .notification-history .list-notifications .item .card-avatar{width:70px;height:70px;border-radius:14px}.signage-page .notification-history .list-notifications .item .card-avatar .avatar{border-radius:14px}.signage-page .notification-history .list-notifications .item .content{gap:10px}.signage-page .notification-history .list-notifications .item .content__left .person-details .fullname,.signage-page .notification-history .list-notifications .item .content__left .person-details .relationship{font-size:1.5vw}.signage-page .notification-history .list-notifications .item .content__left .classroom{font-size:1.1vw}.signage-page .notification-history .list-notifications .item .content__right{min-width:70px}.signage-page .notification-history .list-notifications .item .content__right .time{font-size:1.2vw}}@media screen and (max-width:1500px){.signage-page{padding:0 2vw}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-02,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-03,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-04,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-05,.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-06{display:none}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-01{width:18%}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-07{width:26%;left:22%;top:20px}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-08{width:20%;left:40%;top:17px}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-09{width:20%;left:50%;top:8px}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-10{width:20%;left:64%;top:8px}.signage-page .notification-display .header .cloud-banner .clouds .cloud-item-11{width:20%;right:0}.signage-page .notification-display .header .content .time{color:#3f5000;font-size:2.5vw;width:auto;padding:10px}.signage-page .notification-history .header .title{font-size:2.8vw;bottom:15px;top:auto}.signage-page .notification-history .list-notifications .item .content{padding-right:0}}@media screen and (max-width:1248px){.signage-page .notification-display .header .notice,.signage-page .notification-history .header .title{font-size:2.5vw!important;bottom:10px;left:170px}.signage-page .notification-history .list-notifications .item{padding-right:0}.signage-page .notification-history .list-notifications .item .content{gap:5px}.signage-page .notification-history .list-notifications .item .content__left{width:calc(100% - 60px)}.signage-page .notification-history .list-notifications .item .content__left .person-details{max-width:calc(100% - 50px);overflow:hidden}.signage-page .notification-history .list-notifications .item .content__left .classroom{border-radius:20px}.signage-page .notification-history .list-notifications .item .content__right{width:55px;min-width:55px}}@media screen and (max-width:991px){.signage-page .notification-display .list-notifications,.signage-page .notification-history .list-notifications{min-height:calc(100vh - 185px);max-height:calc(100vh - 185px)}.signage-page .notification-display{width:calc(60% - 10px)!important}.signage-page .notification-display .header .cloud-banner{height:100px!important}.signage-page .notification-display .header .cloud-banner .cloud-item-12{height:35%!important;bottom:-10px!important}.signage-page .notification-display .header .cloud-banner .giraffe-wrapper{width:100px;height:120px}.signage-page .notification-display .header .content{padding-left:120px!important;align-items:flex-end}.signage-page .notification-display .header .content .time{font-size:1.6vw;padding:5px;height:40px;border-radius:10px}.signage-page .notification-display .list-notifications{gap:18px!important}.signage-page .notification-display .list-notifications .item{max-height:180px!important}.signage-page .notification-display .list-notifications .item .card-avatar{max-width:80px!important;max-height:80px!important}.signage-page .notification-display .list-notifications .item .card-avatar .avatar{border-radius:16px!important}.signage-page .notification-display .list-notifications .item .fullname,.signage-page .notification-display .list-notifications .item .relationship{font-size:1.5vw}.signage-page .notification-display .list-notifications .item .classroom{font-size:1vw;padding:.4vw .5vw;max-width:100px;border-radius:20px}.signage-page .notification-display .list-notifications-empty .message-empty{font-size:2.5vw}.signage-page .notification-display .list-notifications-empty .card-avatar{width:15vw;height:15vw}.signage-page .notification-history{width:40%!important}.signage-page .notification-history .header{max-height:120px!important}.signage-page .notification-history .header .cloud-banner{height:100px!important}.signage-page .notification-history .header .cloud-banner .bear-wrapper{width:120px!important;height:100px!important}.signage-page .notification-history .header .title{left:145px!important}.signage-page .notification-history .list-notifications-empty{gap:18px!important}.signage-page .notification-history .list-notifications-empty .message-empty{font-size:2.5vw}.signage-page .notification-history .list-notifications-empty .card-avatar{width:15vw;height:15vw}}@media screen and (max-width:767px){.signage-page .notification-display .header .notice,.signage-page .notification-history .header .title{font-size:2vw!important;bottom:10px;left:170px}.signage-page .notification-display .header .cloud-banner{height:100px!important}.signage-page .notification-display .header .cloud-banner .giraffe-wrapper{width:100px;height:120px}.signage-page .notification-display .header .cloud-banner .cloud-item-12{height:35%!important;bottom:-10px!important}.signage-page .notification-display .header .content{padding-left:110px!important;padding-right:5px}.signage-page .notification-display .header .content .time{font-size:10px;padding:5px;height:30px;border-radius:6px}.signage-page .notification-display .list-notifications .item .card-avatar{max-width:15vw!important;max-height:15vw!important;border-radius:15px!important}.signage-page .notification-display .list-notifications .item .card-avatar .avatar{border-radius:15px!important}.signage-page .notification-display .list-notifications .item .classroom{padding:1vw 2vw;min-width:60px}.signage-page .notification-history .header{max-height:100px!important}.signage-page .notification-history .header .cloud-banner{height:115px!important}.signage-page .notification-history .header .cloud-banner .bear-wrapper{width:120px!important;height:100px!important}.signage-page .notification-history .header .title{left:130px!important}.signage-page .notification-history .list-notifications .item .content__left{width:calc(100% - 40px)}.signage-page .notification-history .list-notifications .item .content__left .classroom{border-radius:12px}.signage-page .notification-history .list-notifications .item .content__right{width:40px;min-width:40px}}@media screen and (min-width:744px)and (max-width:1024px)and (orientation:portrait){.signage-page .notification-display .header .notice{font-size:2.6vw!important;bottom:12px}.signage-page .notification-display .header .content .time{font-size:1.8vw;padding:6px 10px;border-radius:10px}.signage-page .notification-display .list-notifications .item{padding:.8vw;border-radius:20px;max-height:40dvh!important}.signage-page .notification-display .list-notifications .item .card-avatar{max-width:150px;max-height:150px;margin-bottom:.9vw}.signage-page .notification-display .list-notifications .item .card-avatar .avatar{border-radius:18px}.signage-page .notification-display .list-notifications .item .fullname,.signage-page .notification-display .list-notifications .item .relationship{font-size:2vw}.signage-page .notification-display .list-notifications .item .classroom{font-size:1.4vw;padding:.6vw .8vw;border-radius:20px}.signage-page .notification-history .header .title{font-size:2.6vw!important;bottom:12px}.signage-page .notification-history .header .content .time{font-size:1.8vw;padding:6px 10px;border-radius:10px}.signage-page .notification-history .list-notifications .item{padding:.8vw;border-radius:20px;max-height:110px}.signage-page .notification-history .list-notifications .item .card-avatar{width:90px;height:90px;border-radius:18px}.signage-page .notification-history .list-notifications .item .card-avatar .avatar{border-radius:18px}.signage-page .notification-history .list-notifications .item .content{display:flex;gap:1vw}.signage-page .notification-history .list-notifications .item .content__left{width:calc(100% - 70px)}.signage-page .notification-history .list-notifications .item .content__left .fullname,.signage-page .notification-history .list-notifications .item .content__left .relationship{font-size:1.7vw!important}.signage-page .notification-history .list-notifications .item .content__left .classroom{font-size:1.3vw;border-radius:13px}.signage-page .notification-history .list-notifications .item .content__right .time{font-size:1.5vw}.signage-page .notification-display .list-notifications-empty,.signage-page .notification-history .list-notifications-empty{gap:18px}.signage-page .notification-display .list-notifications-empty .message-empty,.signage-page .notification-history .list-notifications-empty .message-empty{font-size:2.4vw}.signage-page .notification-display .list-notifications-empty .card-avatar,.signage-page .notification-history .list-notifications-empty .card-avatar{width:25vw;height:25vw}}@media screen and (min-width:1024px)and (max-width:1366px)and (orientation:landscape){.signage-page .notification-display .list-notifications .item{padding:.6vw;border-radius:22px;max-height:260px}.signage-page .notification-display .list-notifications .item .card-avatar{max-width:130px;max-height:130px}.signage-page .notification-display .list-notifications .item .card-avatar .avatar{border-radius:16px}.signage-page .notification-display .list-notifications .item .fullname,.signage-page .notification-display .list-notifications .item .relationship{font-size:1.6vw}.signage-page .notification-display .list-notifications .item .classroom{font-size:1.1vw}.signage-page .notification-history .list-notifications{gap:20px}.signage-page .notification-history .list-notifications .item .card-avatar{width:80px;height:80px;border-radius:14px}.signage-page .notification-history .list-notifications .item .content__left .fullname,.signage-page .notification-history .list-notifications .item .content__left .relationship{font-size:1.4vw}.signage-page .notification-history .list-notifications .item .content__left .classroom,.signage-page .notification-history .list-notifications .item .content__right .time{font-size:1.1vw}}