#FriendsList .offcanvas-header{background-color:var(--PureBlack);color:var(--White);align-items:center;display:flex}#FriendsList .offcanvas-header button{color:var(--White);background-color:var(--SecondaryDark);border:none;border-radius:5px;width:40px;height:40px;transition:all .4s;position:relative;top:0}#FriendsList .offcanvas-header button:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}#FriendsList .offcanvas-header button:active{background-color:var(--PrimaryColor);color:var(--PureBlack);position:relative;top:2.5px}#FriendsList .OffcanvasBody{background-color:var(--Black);flex-direction:column;flex-grow:1;gap:5px;padding:15px;display:flex;overflow-y:auto}#FriendsList .OffcanvasBody .Friend{background-color:var(--SecondaryDark);border-radius:5px;align-items:center;gap:10px;padding:10px;transition:all .6s;display:flex}#FriendsList .OffcanvasBody .Friend:hover{background-color:var(--PureBlack)}#FriendsList .OffcanvasBody .Friend .UserData{flex:1;gap:10px;display:flex}#FriendsList .OffcanvasBody .Friend .UserData img{aspect-ratio:1;object-fit:cover;border-radius:50rem;height:40px}#FriendsList .OffcanvasBody .Friend .UserData .Texts{flex-direction:column;flex:1;gap:2px;display:flex}#FriendsList .OffcanvasBody .Friend .UserData .Texts .Name{color:var(--White);font-size:14px}#FriendsList .OffcanvasBody .Friend .UserData .Texts .Role{color:var(--White50);font-size:14px;font-style:italic}#FriendsList .OffcanvasBody .Friend button{color:var(--White);background-color:var(--SecondaryDark);border:none;border-radius:5px;width:40px;height:40px;transition:all .4s;position:relative;top:0}#FriendsList .OffcanvasBody .Friend button:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}#FriendsList .OffcanvasBody .Friend button:active{background-color:var(--PrimaryColor);color:var(--PureBlack);position:relative;top:2.5px}#FriendsList .OffcanvasBody .Friend button{scale:.75;background-color:var(--White25)!important}
#Notifications{background-color:var(--Black)}#Notifications .offcanvas-header{background-color:var(--PureBlack);color:var(--White)}#Notifications .offcanvas-header button{color:var(--White);background-color:var(--SecondaryDark);border:none;border-radius:5px;width:40px;height:40px;transition:all .4s;position:relative;top:0}#Notifications .offcanvas-header button:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}#Notifications .offcanvas-header button:active{background-color:var(--PrimaryColor);color:var(--PureBlack);position:relative;top:2.5px}#Notifications .Notifs{flex-direction:column;gap:5px;display:flex}#Notifications .Notifs .Notif{background-color:var(--dark);color:var(--White);border-radius:5px;align-items:center;gap:10px;padding:10px;transition:all .4s;display:flex;position:relative}#Notifications .Notifs .Notif:hover{background-color:var(--PureBlack)}#Notifications .Notifs .Notif:hover:not(:first-child){margin-top:10px}#Notifications .Notifs .Notif .NotSeen{background-color:var(--PrimaryColor);width:10px;height:10px;padding:0;position:absolute;bottom:5px;right:5px}#Notifications .Notifs .Notif>span{color:var(--White);background-color:var(--PrimaryColor25);border-radius:5px;place-content:center;width:40px;height:40px;display:grid}#Notifications .Notifs .Notif div{flex-direction:column;gap:5px;font-size:14px;display:flex}#Notifications .Notifs .Notif div :first-child{-webkit-line-clamp:1;-webkit-box-orient:vertical;transition:all .4s;display:-webkit-box;overflow:hidden}#Notifications .Notifs .Notif div :last-child{opacity:.4}
#Requests{background-color:var(--Black)}#Requests .offcanvas-header{background-color:var(--PureBlack);color:var(--White)}#Requests .offcanvas-header button{color:var(--White);background-color:var(--SecondaryDark);border:none;border-radius:5px;width:40px;height:40px;transition:all .4s;position:relative;top:0}#Requests .offcanvas-header button:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}#Requests .offcanvas-header button:active{background-color:var(--PrimaryColor);color:var(--PureBlack);position:relative;top:2.5px}#Requests .Notifs{flex-direction:column;gap:5px;display:flex}#Requests .Notifs .Notif{background-color:var(--dark);color:var(--White);border-radius:5px;align-items:center;gap:10px;padding:10px;transition:all .4s;display:flex;position:relative}#Requests .Notifs .Notif:hover{background-color:var(--PureBlack)}#Requests .Notifs .Notif:hover:not(:first-child){margin-top:10px}#Requests .Notifs .Notif img{border-radius:5px;width:40px;height:40px}#Requests .Notifs .Notif .NotSeen{background-color:var(--PrimaryColor);width:10px;height:10px;padding:0;position:absolute;bottom:5px;right:5px}#Requests .Notifs .Notif>span{color:var(--White);background-color:var(--PrimaryColor25);border-radius:5px;place-content:center;width:40px;height:40px;display:grid}#Requests .Notifs .Notif .Texts{flex-direction:column;flex:1;gap:5px;font-size:14px;display:flex}#Requests .Notifs .Notif .Texts>:first-child{-webkit-line-clamp:1;-webkit-box-orient:vertical;transition:all .4s;display:-webkit-box;overflow:hidden}#Requests .Notifs .Notif .Texts>:last-child{opacity:.4}#Requests .Notifs .Notif .Btns{flex-direction:row;gap:5px;display:flex}#Requests .Notifs .Notif .Btns button{color:var(--White);background-color:var(--SecondaryDark);border:none;border-radius:5px;width:40px;height:40px;transition:all .4s;position:relative;top:0}#Requests .Notifs .Notif .Btns button:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}#Requests .Notifs .Notif .Btns button:active{background-color:var(--PrimaryColor);color:var(--PureBlack);position:relative;top:2.5px}#Requests .Notifs .Notif .Btns button{place-content:center;display:grid}#Requests .Notifs .Notif .Btns button:first-child{background-color:var(--PrimaryColor);color:var(--PureBlack);background-color:var(--PrimaryColor)}#Requests .Notifs .Notif .Btns span{opacity:1;border-radius:50rem;padding:5px 10px;font-size:12px}#Requests .Notifs .Notif .Btns span.Reject{color:#e11212;background-color:#e1121220}#Requests .Notifs .Notif .Btns span.Accept{background-color:var(--PrimaryColor25);color:var(--PrimaryColor)}
.offcanvas-header{background-color:var(--PureBlack);color:var(--White)}.offcanvas-header button{color:var(--White);background-color:var(--SecondaryDark);border:none;border-radius:5px;width:40px;height:40px;transition:all .4s;position:relative;top:0}.offcanvas-header button:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}.offcanvas-header button:active{background-color:var(--PrimaryColor);color:var(--PureBlack);position:relative;top:2.5px}#Messages{background-color:var(--Black);color:#fff}#Messages .HeaderModal{align-items:center;gap:10px;margin-bottom:10px;display:flex}#Messages .HeaderModal span{background-color:var(--PureBlack);border-radius:5px;flex:1;align-items:center;padding:5px 10px;display:flex}#Messages .HeaderModal span:has(input:focus) svg{color:var(--White)}#Messages .HeaderModal span svg{color:var(--White75);transition:all .2s}#Messages .HeaderModal span input{color:var(--White);background-color:#0000;border:none;outline:none;flex:1}#Messages #MessageHa{flex-direction:column;gap:10px;display:flex}#Messages #MessageHa .Message img{object-fit:cover;width:40px;height:40px}#Messages .NewMessage{color:var(--White);background-color:var(--SecondaryDark);z-index:111;border:none;border-radius:5px;align-items:center;gap:5px;padding:5px 15px;font-size:14px;transition:all .4s;display:flex;bottom:20px;left:20px}#Messages .NewMessage:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}#Messages .NewMessage:active{background-color:var(--Black);color:var(--White);bottom:22.5px}#Messages .NewMessage svg{position:relative;top:2px}#Messages .Message{background-color:var(--PureBlack);border-radius:5px;align-items:center;gap:10px;padding:5px;display:flex;position:relative}#Messages .Message:hover{margin-top:10px;transition:all .4s}#Messages .Message:active{background-color:#161616}#Messages .Message .TextMessage *{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#Messages .Message .TextMessage .TextMessage{color:var(--White50)}.modalMessage .modal-content{background-color:var(--dark);color:#fff}.modalMessage .modal-content .modal-header button{color:var(--White);background-color:var(--SecondaryDark);border:none;border-radius:5px;width:40px;height:40px;transition:all .4s;position:relative;top:0}.modalMessage .modal-content .modal-header button:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}.modalMessage .modal-content .modal-header button:active{background-color:var(--PrimaryColor);color:var(--PureBlack);position:relative;top:2.5px}.modalMessage .modal-content .modal-footer input{color:var(--White);background-color:var(--White25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;border-radius:50rem;padding:5px 20px;font-size:14px}.modalMessage .modal-content .modal-footer input:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}.modalMessage .modal-content .modal-footer button{color:var(--Black);background-color:var(--PrimaryColor);text-transform:uppercase;border:none;border-radius:50rem;padding:5px 20px;font-weight:600}.modalMessage .modal-content .modal-footer button:hover{background-color:var(--PrimaryColor75);outline:1px solid var(--SecondaryDark)}.modalMessage .Message{border-radius:10px;flex-direction:column;gap:10px;width:100%;padding:5px 10px;display:flex}.modalMessage .Message.Sender{background-color:var(--PureBlack)}.modalMessage .Message.Reciever{background-color:var(--PrimaryColor50)}.modalMessage .Message .Date{background-color:var(--PrimaryColor50);border-radius:5px;width:max-content;padding:5px;font-size:12px}.modalMessage .Message .Submited{background-color:var(--PrimaryColor);color:var(--PureBlack);text-transform:uppercase;border-radius:5px;padding:5px;font-size:12px;font-weight:700}.modalMessage .Message .Btn{background-color:var(--dark);color:var(--White);text-transform:uppercase;border:none;border-radius:5px;outline:none;padding:5px;font-size:12px;font-weight:700}#SendMessage{flex-direction:column;gap:15px;display:flex}#SendMessage div{flex-direction:column;gap:5px;display:flex}#SendMessage div input,#SendMessage div textarea{color:var(--White);background-color:var(--White25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;border-radius:50rem;padding:5px 20px;font-size:14px}#SendMessage div input:hover,#SendMessage div textarea:hover{background-color:var(--dark);outline:1px solid var(--SecondaryDark)}#SendMessage div input,#SendMessage div textarea{border-radius:5px}#SendMessage div textarea{resize:none}#SendMessage button{color:var(--Black);background-color:var(--PrimaryColor);text-transform:uppercase;border:none;border-radius:50rem;padding:5px 20px;font-weight:600}#SendMessage button:hover{background-color:var(--PrimaryColor75);outline:1px solid var(--SecondaryDark)}#SendMessage button{font-weight:400}