body{padding:0;margin:0;box-sizing:border-box;font-family:Poppins,sans-serif;color:var(--primary-color);background-color:var(--background-color)}body.light-theme{--primary-color: #000;--background-color: #fff}body.dark-theme{--primary-color: #fff;--background-color: #000}:root{--primary-gradient: linear-gradient( to left bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12 );--primary-color: #000;--background-color: #fff}.home-container{height:100vh}.home-container .home-content{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:50px}.home-container .home-content .home-hero{background:var(--primary-gradient);border-radius:20px;height:20rem;width:70%;display:flex;justify-content:center;align-items:center}.home-container .home-content .home-hero h1{padding:0;margin:0;color:#fff}.home-container .home-content .view-button{width:100%;padding:15px 30px;font-size:18px;font-weight:700;color:#fff;background-color:#000;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease,transform .3s ease}.home-container .home-content .view-button:hover{background-color:#00bf72;transform:scale(1.05)}.home-container .home-content .view-button:active{background-color:#004d7a;transform:scale(1)}.home-container .home-content .info{width:70%;display:flex;justify-content:space-around}.home-container .home-content .info .box{width:100%;border:1px solid black;border-radius:10px;margin-top:30px;margin-right:10px;padding:20px 10px}.home-container .home-content .info .box span{font-weight:bolder}.home-container .home-content .info .dark{color:#fff;border-color:#fff}.toggle-button{position:relative;width:60px;height:30px;background-color:#ccc;border:none;border-radius:15px;cursor:pointer;transition:background-color .3s ease;display:flex;align-items:center}.toggle-button.toggled{background-color:#4caf50}.toggle-circle{position:absolute;top:3px;left:3px;width:24px;height:24px;background-color:#fff;border-radius:50%;transition:left .3s ease}.toggle-button.toggled .toggle-circle{left:33px}.icon{position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:left .3s ease}.left{left:5px}.right{right:5px}.nav{padding:10px;display:flex;justify-content:space-between;align-items:center}.nav .logo{font-size:19px;font-weight:700;display:flex;align-items:center}.nav .logo .arrow{cursor:pointer;margin-top:.4rem;margin-left:1.5rem}.nav .logo span{margin-right:10px;display:flex}.nav .logo .text{margin-left:10px}.nav ul{display:flex;align-items:center;font-size:19px;list-style-type:none;padding:0;margin:0}.nav ul li{margin-right:15px;padding:5px 10px;cursor:pointer}.nav ul li:not(:first-child):hover{background-color:#00bf72}.inbox-container .inbox-content{display:flex;justify-content:space-between}.inbox-container .inbox-content .sidebar{background-color:#ececec;display:flex;flex-direction:column;padding:20px 10px;height:100vh;width:30%}.inbox-container .inbox-content .sidebar ul{padding:0;margin:0}.inbox-container .inbox-content .sidebar ul li{cursor:pointer;list-style-type:none;font-size:19px;display:flex;align-items:center;padding:8px 10px;border-radius:10px}.inbox-container .inbox-content .sidebar ul li div{margin-left:15px}.inbox-container .inbox-content .sidebar .active{background-color:#00bf72}.inbox-container .inbox-content .tag-container{margin-top:10rem;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;font-weight:700}.inbox-container .inbox-content .section-content{width:100%}.inbox-container .inbox-content .section-content .section{padding:10px}.inbox-container .sidebar-dark{background-color:#000!important}.inbox-container{height:100vh;overflow:hidden}.inbox-container .title{font-size:2rem;font-weight:700}.inbox-container .search-bar{display:flex;position:relative}.inbox-container .search-bar input{width:97%;font-size:16px;border:1px solid #ccc;border-radius:15px;padding:10px 30px 10px 10px;position:relative}.inbox-container .search-bar .close-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.inbox-container .inbox-list{margin-top:15px;height:calc(100vh - 100px);overflow-y:auto}.inbox-container .message-container .message{position:relative;border-bottom:1px solid #dcdcdc;padding:10px 0;width:100%;display:flex;align-items:center;cursor:pointer}.inbox-container .message-container .message .single-icon{margin-right:10px;cursor:pointer}.inbox-container .message-container .message .single-icon.starred{color:gold}.inbox-container .message-container .message .subject{font-weight:700}.inbox-container .message-container .message .subject-read{font-weight:400}.inbox-container .message-container .message:not(:first-child){border-top:1px solid #dcdcdc}.actions-list{display:flex;margin-left:auto}.icons-list{position:absolute;right:0;top:50%;transform:translateY(-50%);display:none}.icons-list .action-icon{margin-right:10px}.message:hover .icons-list{display:flex}.msg-container{display:flex;justify-content:center;height:100vh;position:relative;overflow:hidden}.msg-container .arrow{width:100%;display:flex;justify-content:space-between;position:absolute;cursor:pointer}.msg-container .arrow .left-arrow{margin-top:1rem;margin-left:1.9rem}.msg-container .arrow .home{margin-right:1.9rem;margin-top:1rem}.msg-container .msg-content{margin:3rem 0;background-color:#f0f4f8;width:60%;border-radius:20px}.msg-container .dark{background-color:#000!important;color:#fff;border:white 1px solid}.msg-container .msg{padding:20px}.msg-container .line{height:1px;background-color:gray;width:100%;margin:10px 0}.profile-container{height:100vh;display:flex;flex-direction:column;flex-wrap:wrap;background-color:#f0f4f8;box-shadow:0 4px 6px #0000001a}.profile-container .profile-content{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 10px}.profile-container .profile-content h2{margin-bottom:20px;font-size:24px;color:#333}.profile-container .profile-content .profile-info{display:flex;gap:20px}.profile-container .profile-content .info-box{background-color:#17b794;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;text-align:center;font-size:18px;font-weight:700;width:10rem}.profile-container .profile-content .info-box span{font-size:24px;color:#fff}@media (max-width: 890px){.profile-content .profile-info{flex-direction:column;align-items:center}}.profile-dark{background-color:#000!important}.profile-dark h2{margin-bottom:20px;font-size:24px;color:#17b794!important}
