* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    /* padding-inline:10px; */
    /* max-width: 1180px; */
    max-width: 1940px;
    margin-inline: auto;
}

.flex {
    display: flex;
}

.nologo {
    background-color: #999999;
    border-radius: 50px;
}

.nologo:hover {
    background-color: #6f6e6e;
}

.message {
    background-color: #999999;
    border-radius: 4px;
}

.message:hover {
    background-color: #6f6e6e;
}

.side1 {
    width: 64px;
    height: 100vh;
    background-color: #1D1F1F;
    flex-direction: column;
    justify-content: space-between;
}


.side21,
.side12 {
    width: 1px;
    height: 100vh;
    background-color: #434646;
}

.side3 {
    width: 70vw;
    height: 100vh;
    background-color: #161717;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


/* side3 */

.image-section {
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.btn {
    color: #0A0A0A;
    background-color: #21C063;
    text-decoration: none;
    font-weight: 500;
    padding: 10px 23px;
    border-radius: 20px;
}

.btn:hover {
    background-color: #178a47;
}

.image-section p,
h1 {
    color: white;
    text-align: center;
}

.hero-img {
    width: 330px;
}



/* side2 */

.side2 {
    background-color: #161717;
    height: 100vh;
}

.sidea {
    width: 464px;
    height: 64px;
    background-color: #161717;
    justify-content: space-evenly;
    align-items: center;
    gap: 250px;
}

.sideb {
    width: 464.188px;
    height: 44px;
    background-color: #161717;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 10px;
}

.info {
    background-color: #b1afaf;
    border-radius: 70px;
}

.info:hover {
    background-color: #969595;
}

.bar {
    background-color: #262524;
    border-radius: 100px;
    width: 424px;
    height: 40px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 12px;
}

.bar p,
i {
    color: #999999;
    font-size: large;
}

.bar:hover {
    border: 0.1px solid #656565;
}

.a2 {
    justify-content: space-between;
    gap: 20px;
}

/* side1 */
.side1a {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 10px;
}

.metai {
    width: 27px;
}

.metai:hover {
    width: 29px;
}

.info {
    width: 37px;
}

.side1b {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sidec {
    background-color: #161717;
    width: 464px;
    height: 31px;
    justify-content: flex-start;
    padding-left: 30px;
    padding-bottom: 5px;
    gap: 10px;
    text-align: center;
    align-items: center;
}

.selected {
    color: #D9FDD3;
    text-decoration: none;
    background-color: #103529;
    border-radius: 50px;
    padding: 5px 8px;
    border: 0.1px solid #656565;
}

.not-selected {
    border: 0.1px solid #656565;
    background-color: #161717;
    color: #FAFAFA;
    border-radius: 50px;
    padding: 5px 8px;

}

.not-selected:hover {
    background-color: #262524;
}

a {
    text-decoration: none;
}


.sided {
    flex-direction: column;
    background-color: #161717;
}

.d1 {
    width: 454.188px;
    height: 72px;
    border-radius: 10px;
    background-color: #161717;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-inline: 20px;
}

.d1:hover {
    background-color: #262524;
    cursor: pointer;
}




.no-profile-pic {
    background-color: #262524;
    border-radius: 50px;
    width: 52px;
    border: 0.1px solid #656565;
}

.da img {
    width: 50px;
}

.profile-pic {
    border-radius: 50px;
}

.db {
    width: 342px;
    flex-direction: column;
    gap: 8px;
}

.db1 {
    justify-content: space-between;
}

.db1 p {
    color: #FAFAFA;
}

.db2 p {
    color: #999999;
}

.db2new {
    display: flex;
    justify-content: space-between;
}

.time {
    font-size: 13px;
    font-weight: 500;
    color: #999999 !important;
}

.new {
    color: #21C063 !important;
}

.new1 {
    color: black !important;
    background-color: #21C063;
    border-radius: 50px;
    padding-inline: 5px;
}