.font-bold {
    font-weight: 700;
}
.filepond--image-preview-wrapper{
    height: 270px !important;
}
.filepond--label-action {
    color: #4a90e2;
    text-decoration: underline;
}
.photo-container {
    margin-bottom: 16px; /* Adds space below the photo to avoid overlap */
}

/* Style the preview images with fixed size */
.photo-preview {
    width: 100%; /* Make the image take full width of the container */
    height: 300px; /* Fixed height for the images */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow effect */
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* Basic Styles for Floating Action Buttons */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between buttons */
    z-index: 1000;
}

.fab {
    width: 60px;
    height: 60px;
    background-color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.fab:hover {
    background-color: #0056b3;
    color: white !important;
}

.fab i {
    font-size: 24px;
    color: white !important
}

.fab-label {
    margin-right: 10px;
    background-color: #333;
    color: white !important;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s, transform 0.3s;
}

.fab-container:hover .fab-label {
    opacity: 1;
    transform: translateX(0);
}

/* Icon Styles */
.fab-icon {
    display: inline-block;
}
.h2{
 font-size: 1.5rem;
}

.info-row {
    display: inline-flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.label {
    font-weight: bold;
}
.value {
    color: #555;
}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529;text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#0069d9;border-color:#0062cc;box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5a6268;border-color:#545b62}.btn-secondary.focus,.btn-secondary:focus{color:#fff;background-color:#5a6268;border-color:#545b62;box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#545b62;border-color:#4e555b}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#218838;border-color:#1e7e34;box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#138496;border-color:#117a8b;box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-warning{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{color:#212529;background-color:#e0a800;border-color:#d39e00;box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c82333;border-color:#bd2130;box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.btn-light{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#212529;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{color:#212529;background-color:#e2e6ea;border-color:#dae0e5;box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-light.disabled,.btn-light:disabled{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#23272b;border-color:#1d2124;box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1d2124;border-color:#171a1d}.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-outline-primary{color:#007bff;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-success{color:#28a745;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-info{color:#17a2b8;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-warning{color:#ffc107;border-color:#ffc107}.btn-outline-warning:hover{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-dark{color:#343a40;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-link{font-weight:400;color:#007bff;text-decoration:none}.btn-link:hover{color:#0056b3;text-decoration:underline}.btn-link.focus,.btn-link:focus{text-decoration:underline}.btn-link.disabled,.btn-link:disabled{color:#6c757d;pointer-events:none}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{transition:opacity .15s linear}

.chat-container {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background-color: #f7f7f7;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
    border-radius: 10px;
    max-width: 100%;
}
.chat-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #00C9C9;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
}
.chat-bubble {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
    position: relative;
    max-width: 100%;
    width: 100%;
}
.chat-bubble::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}
.chat-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.chat-name {
    font-weight: bold;
    color: #333;
}
.chat-time {
    font-size: 12px;
    color: #999;
}
.chat-content {
    font-size: 14px;
    color: #555;
}
.chat-footer {
    font-size: 12px;
    color: #999;
    text-align: right;
}

.chat-reply .chat-bubble::before {
    left: auto;
    right: -10px;
    border-color: transparent transparent transparent white;
}

.menu-dropdown {
    margin-top: 5px;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 10px;
    list-style-type: none;
    width: 200px;
}

.menu-dropdown li {
    padding: 8px 12px;
    cursor: pointer;
}

.menu-dropdown li:hover {
    background-color: #f0f0f0;
}


/* Container and layout styling */
.chat-container {
    display: flex;
    background-color: #f2f2f2;
}

.friend-list {
    width: 25%;
    background-color: #14213d;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
}

.search-friend {
    padding: 10px;
    margin-bottom: 20px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
}

.friend {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
}

.friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #555;
    margin-right: 10px;
}

.friend-name {
    font-size: 16px;
}

.chat-area {
    display: flex;
    flex-direction: column;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    background-color: #e5e5e5;
    padding: 15px;
    align-items: center;
}

.chat-header .friend-name {
    font-size: 18px;
    font-weight: bold;
}

.chat-actions i {
    margin-left: 10px;
    cursor: pointer;
}

.messages {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
    background-color: white;
}

.message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;
    max-width: 60%;
    line-height: 1.5;
}

.friend-message {
    background-color: #f0f0f0;
    align-self: flex-start;
}

.my-message {
    background-color: #335c67;
    color: white;
    align-self: flex-end;
}

.chat-input {
    display: flex;
    background-color: #f2f2f2;
    padding: 10px;
}

.chat-input input {
    width: 90%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.chat-input .send-button {
    width: 10%;
    padding: 10px;
    background-color: #335c67;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/*Here is started Chat Css option*/

.b-icon {
    cursor: pointer;
}

.text-disabled {
    cursor: not-allowed;
}

.dropdown-toggle {
    padding: 0;
    margin: 0;
}

.dropdown-toggle::before, .dropdown-toggle::after {
    content: none;
}

.alert-container {
    max-height: 250px;
    overflow-y: hidden;
}

.app {
    width: 95%;
    margin: 5px auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: minmax(500px, calc(100vh - 100px));
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}

.profile {
    /* border: 1px solid gold; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    cursor: pointer;
}

.profile img {
    object-fit: cover;
    width: inherit;
    height: inherit;
}

.main-left {
    background: #ffffff;
    grid-template-rows: 1fr 6fr 1fr;
    grid-auto-flow: row;
    display: flex;
    flex-direction: column;
}

.header-left {
    /* border: 1px solid salmon; */
    padding: 0px 20px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 4fr;
    height: 62px;
}

.header-left-icon-left {
    /* border: 1px solid cyan; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.header-left-icon-left > * {
    /* border: 1px solid maroon; */
    align-self: center;
    margin: 0px 5px;
}

.header-left-icon-left > .h4:last-child {
    margin-right: 0px;
}

.header-left-icon-right {
    /* border: 1px solid yellow; */
    display: grid;
    place-self: center end;
}

.header-left-icon-right > * {
    /* border: 1px solid maroon; */
    place-self: center end;
    margin: 0px 5px;
}

.header-left-icon-right > div > .list-group {
    width: max-content;
}

.recent-chat-option {
    right: 50%;
}

.notification-badge {
    display: inline;
    bottom: calc(50% + 5px);
    left: 50%;
}

.notification-list {
    left: 50%;
    max-height: 350px;
    overflow-y: auto;
}

.friend-request {
    display: grid;
    grid-template-columns: 30px 2fr 1fr 1fr;
    gap: 0px 5px;
    align-items: center;
}

.friend-request-photo {
    place-self: center;
    width: 25px;
    height: 25px;
}

.search-bar {
    padding: 5px 10px;
}

.chat-list {
    /* border: 1px solid cyan; */
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.chat-list::-webkit-scrollbar {
    width: 0px;
}

.recent-chat {
    /* border: 1px solid yellow; */
    padding: 5px 10px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 4fr 1fr;
    gap: 0px 5px;
    transition: 0.2s linear;
    cursor: pointer;
    height: 72px;
    border-top: 1px solid #e9edef;
}

.recent-chat:hover, .friend-list:hover, .add-friend:hover {
    background: #e0e1e1;
}

.friend-list > *, .add-friend > * {
    cursor: pointer;
}

.list-group-item {
    padding: 3px 10px;
    cursor: pointer;
    /* font-size: 0.8em; */
}

.friends-photo {
    width: 45px;
    height: 45px;
    place-self: center;
}

.friends-credent {
    /* border: 1px solid magenta; */
    /* padding: 5px; */
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: 1fr 1fr;
    place-items: center start;
}

.friends-name, .friends-message {
    width: 100%;
    font-weight: 600;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
}

.friends-name {
    color: #040404;
    place-self: end start;
    font-size: 1.25em;
    /* border: 1px solid magenta; */
}

.friends-message {
    /* border: 1px solid blanchedalmond; */
    color: #777;
    font-size: 0.85em;
    place-self: start;
}

.friend-list-photo {
    height: 45px;
    width: 45px;
}

.add-friend {
    display: grid;
    padding: 5px 20px;
    grid-template-columns: 1fr 4fr 1fr;
    gap: 0px 5px;
    align-items: center;
}

.add-friend > :last-child {
    place-self: center;
}

.notif-badge {
    place-self: center;
    color: white;
    min-height: 1.9em;
    min-width: 1.8em;
    background-color: #25d366;
    border-radius: 1.1em;
    padding: 0.4em;
    font-size: .75rem;
    text-align: center;
    vertical-align: top;
    font-weight: 700;
    display: inline-block;
}

.self-info {
    /* border: 1px solid magenta; */
    padding: 5px 10px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 4fr 1fr;
    align-items: center;
    background: #041b33;
    box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.4);
}

.your-photo {
    height: 45px;
    width: 45px;
    place-self: center end;
}

.your-name {
    /* border: 5px solid bisque; */
    color: white;
    margin-left: 20px;
    place-self: center start;
}

.gear {
    transition: 0.2s linear;
}

.gear:hover {
    transform: rotate(30deg);
}

/* END OF LEFT SECTION */
/* ################################################## */
/* START OF RIGHT SECTION */

.main-right {
    background: #efefef;
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: 1fr 15fr 2fr;
}

.header-right {
    /* border: 5px solid greenyellow; */
    padding: 5px;
    background: white;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 6fr 2fr;
    place-items: center;
    height: 62px;
}

.header-img {
    height: 45px;
    width: 45px;
    place-content: center start;
    place-self: center end;
}

.name {
    font-size: 1.2em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.friend-name {
    /* border: 5px solid violet; */
    place-self: center start;
    margin-left: 20px;
    color: #111b21;
}

.some-btn > * {
    place-items: center end;
    display: inline-block;
    margin: 0px 10px;
}

.chat-area {
    /* border: 5px solid lightseagreen; */
    overflow-y: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.chat-area::-webkit-scrollbar {
    width: 0;
}

.friends-chat {
    /* border: 3px solid beige; */
    padding-top: 5px;
    padding-bottom: 5px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 9fr;
}

.friends-chat-photo {
    /* border: 3px solid orchid; */
    height: 40px;
    width: 40px;
    place-self: start end;
    margin: 0px 5px;
}

.friends-chat-content {
    /* border: 3px solid red; */
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: 1fr min-content min-content;
    place-items: start;
}

.friends-chat-name {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #485373;
    font-size: 1em;
    margin: 0px 0px 3px 0px;
    font-weight: bold;
}


.friends-chat-balloon {
    /* border: 3px solid navy; */
    max-width: 90%;
    padding: 10px 20px;
    margin: 0;
    min-width: min-content;
    border-radius: 0px 20px 20px 20px; /* TL-TR-BR-BL*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #485373;
    background: white;
    font-size: 0.9em;
    word-break: break-word;
    white-space: pre-line;
}

.chat-datetime {
    /* border: 3px solid yellow; */
    margin: 3px 10px;
    font-size: 0.75em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #aaa;
}

.your-chat {
    /* border: 3px solid chocolate; */
    display: grid;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    grid-auto-flow: row;
    grid-template-rows: min-content min-content;
    place-items: start end;
}

.your-chat-balloon {
    /* border: 3px solid blueviolet; */
    max-width: 80%;
    padding: 10px 20px;
    margin: 0;
    min-width: min-content;
    border-radius: 20px 20px 0px 20px; /* TL-TR-BR-BL*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    background: darkslateblue;
    font-size: 0.9em;
    word-break: break-word;
    white-space: pre-line;
}

.your-chat-datetime .icon {
    margin-right: 5px;
    color: green;
}

.typing-area {
    /* border: 5px solid goldenrod; */
    background: white;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 9fr 1fr;
    column-gap: 5px;
    align-items: center;
    overflow-x: hidden;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);

}

.type-area {
    /* border: 5px solid blueviolet; */
    border: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    outline: none;
    background: none;
    padding: 10px 20px;
    color: #333;
    font-size: 1.1em;
}

input::placeholder {
    color: #777;
}

.creator {
    text-align: center;
    color: #777;
    font-family: 'Courier New', Courier, monospace;
}

.chat-icon:hover{
    cursor: pointer;
}
.d-table{
    display: table;
}
.d-flex{
    display: flex;
}
.d-table-cell{
    display: table-cell;
    vertical-align: middle;
}

.align-items-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}

.group-creation-container {
    margin-top: 20px;
}

.group-form {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.user-search {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.user-search ul, .group-form ul {
    list-style: none;
    padding: 0;
}

.user-search ul li, .group-form ul li {
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-search ul li button, .group-form ul li button {
    margin-left: 10px;
}

.dropdown-menu {
    position: absolute;
    top: 70px; /* Adjust based on icon size */
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    width: 150px;
    z-index: 10;
    padding: 10px; /* Add padding inside the dropdown */
}
.dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dropdown-menu li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 5px; /* Add margin between list items */
}

.dropdown-menu li:hover {
    background-color: #f5f5f5;
}
.btn-create-group{
    display: grid;
    margin-bottom: 15px;
    margin-top: 15px;
}
.highlighted {
    background-color: #f0f0f0; /* Highlight background color */
    font-weight: bold; /* Make highlighted text bold */
}

/* Container styling for the switch */
.role-block {
    background-color: #ccc;
    transition: background-color 0.3s ease;
}
input:checked + .role-block {
    background-color: #4A90E2;
}

/* Dot styling for the slider */
.dot {
    transition: transform 0.3s ease;
}
input:checked ~ .dot {
    transform: translateX(20px);
}
.btn-red{
    background-color: darkred;
}


.photo-container {
    display: flex;
    justify-content: center; /* Horizontally center the image */
    align-items: center;    /* Vertically center the image */
    height: auto;           /* Maintain aspect ratio */
    padding: 10px;          /* Optional padding */
    background-color: #f9f9f9; /* Optional background */
    border: 1px solid #ddd; /* Optional border */
    border-radius: 8px;     /* Rounded corners */
    overflow: hidden;       /* Ensure image fits within the container */
}

.photo-container img {
    max-width: 100%;        /* Scale the image to fit within the container */
    max-height: 100%;       /* Prevent overflow of the image */
    object-fit: cover;      /* Crop image to fill the container if necessary */
    border-radius: 8px;     /* Match container's rounded corners */
}

.tbl_qualification {
    border-collapse: collapse;
    width: 100%;
}

.tbl_qualification td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

.tbl_qualification tr:nth-child(even){background-color: #f2f2f2;}

.tbl_qualification tr:hover {background-color: #ddd;}

.tbl_qualification th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
}
.hidden-content{
    visibility: hidden;
}
.absent-event {
    background-color: #CE4141 !important; /* Red background */
    color: #FFFFFF !important; /* White text */
}
.align-self-center{
    align-self: center;
}
.custom-list li::before {
    content: "•";
    color: black; /* Dot color */
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}