Navbar styles
 .nav-icon {
    font-size: 1.25rem;
}

/* Profile dropdown animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#profileMenu {
    animation: fadeIn 0.2s ease-out;
}

.comments {
max-height: 150px !important;
overflow-y: auto !important;
}


body {
    color: #e2e8f0;
    margin: 0;
    font-family: 'Nunito','inter','Roboto Mono','Gill Sans';
}
*{
    font-family:'Nunito','Cal Sans','Noto Sans Jp',"Space Mono",'inter','Roboto Mono','Gill Sans';
}
.link{
    color: #1a7feb;
    font-weight: bold;
    text-decoration: underline;
}
.link:hover{
    color: #207cdd;
}
.round-btn{
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 20px;
    height: 20px;
}
.ellipsed{
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-area{
border-radius: 5px;
width: 100%;
background-color: #f0f0f0;
input{
    outline: none;
    background-color: #f0f0f0;
    border:0; 
    width: 85%;
}
i:hover{
    cursor: pointer;

}
}
.toggle-btn {
display: none;
color: white;
background-color: #333;
border: none;
font-size: 24px;
cursor: pointer;
}
@media (max-width: 768px) {
    .navbar-center {
        display: none;
    }
    .toggle-btn {
    display: block;
}

}
/* @media (min-width: 768px){
    #mobile-search{
    display: block;
}
} */

/*---notif---*/
.notifier{
    font-size: small;
    /* padding: 4px; */
}

    .search-result{
        padding: 1rem;
        min-height: 100vh;
        background-color: #ddd;
        position: absolute;

    }

    .options{
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: absolute;
        z-index: 99;
    }
    /* i{
        font-size: larger;
    } */

    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(10, 10, 10, 0.5);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
    }
    
    .loading-overlay.active {
        display: flex;
    }


    .filter-button.active {
        background-color: #e67010;
        /* color: #1a202c; */
    }
    .filter-container::-webkit-scrollbar {
            height: 6px;
        }
    .filter-container::-webkit-scrollbar-thumb {
            background-color: #4a5568;
            border-radius: 3px;
        }
    *::-webkit-scrollbar {
            height: 6px;
            width: 6px;
        }
    *::-webkit-scrollbar-thumb {
            background-color: #4a5568;
            border-radius: 3px;
        }
        
    @media (max-width: 640px) {
        .fab{
            display: block;
        }

        .filter-container {
            flex-wrap: nowrap;
            overflow-x: auto;
            padding-bottom: 1rem;
        }
        .filter-button {
            flex: 0 0 auto;
        }
        
    }
    @media (min-width: 640px){
        .filter-container {
        justify-content: center;
        }
        /* .bottom-nav{
            display: none;
        } */
    }


    #top-toastContainer{
        z-index: 9999;
    }
    .my-toast {
        max-width: 350px;
        min-width: 150px;
        padding: 12px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
        margin: auto;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        animation: fadeInDown 0.5s forwards;
        /* animation-duration: 0.5s;
        animation-fill-mode: forwards;  */
    }

.my-toast-success {
background-color: #10B981;
color: #ffffff;
}

.my-toast-error {
background-color: #EF4444;
color: #ffffff;
}

.my-toast-warning {
background-color: #F59E0B;
color: #ffffff;
}

.my-toast-info {
background-color: #3B82F6;
color: #ffffff;
}

.my-toast-close {
background: none;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}

@keyframes slideIn {
from {
    transform: translateX(100%);
    opacity: 0;
}
to {
    transform: translateX(0);
    opacity: 1;
}
}

@keyframes fadeOut {
from {
    opacity: 1;
}
to {
    opacity: 0;
}
}
@keyframes scaleIn {
     from { transform: scale(0.9); opacity: 0; }
     to { transform: scale(1); opacity: 1; }
 }
 .animate-scaleIn {
     animation: scaleIn 0.3s ease-out;
 }

 .myImg{
    cursor: pointer;
   }
    
    /* The Modal (background) */
    .img-modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1000; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;

      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

        /* Modal Content (image) */
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    border-radius: 10px;
    }
       
    
    /* Add Animation */
    .modal-content, #caption {  
      /* min-height: 300px; */
        animation-name: zoom 2s;
      animation-duration: 0.6s;
    }
    
    
    /* The Close Button */
    .close {
      position: absolute;
      top: 135px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
    
    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
      .modal-content {
        width: 70%; 
      }

      #mobile-search{
                display: block;
            }
    }
    @keyframes zoom {
      from {transform: scale(0.1)} 
      to {transform: scale(1)}
    }
    
    }

    .v-divider{
        height: 100%;
        width: 2px;
        background-color: #ccc;
        color: white;
        margin: 0 10px;
        
    }