@media screen and (max-width: 767px)
{
    .header-nav .profile
    {
        min-width: auto;
    }  
    .header-icons .profile
    {
        padding: 6px 8px;
    }
    .head-bar .name-greetings h4
    {
        font-size: 16px !important;
        width: 160px !important; 
    } 
    .head-bar .name-greetings .greetings
    {
        font-size: 14px;
    } 
    .head-nav-bar .logo
    {
        width: 100% !important;
    }
    .logo img
    {
        width: 140px;
    }
    .head-nav-bar
    {
        padding: 20px 14px;
    }
    .sidebar
    {
        width: 100%;
    }
    .sidebar
    {
        left: -800px;
    }
 
    .toggleswitch
    {
        position: static !important;
    }
    .menu-name
    {
        margin-left: 8px;
    }
    .head-bar .menu-name h4
    {
        font-size: 24px;
    }
    .res-mob-view
    {
        display: none;
    }
    .dropdown-toggle::after
    {
        content: none;
    }
    .breadcrumb
    {
        margin-bottom: 12px;
    }
    .qr-code
    {
        flex-direction: column;
    }
    .pro-drop .pro-options
    {
        transform: translate(10px, 48px) !important;
    }
    .topbar-responsive
    {
        flex-direction: column;
        align-items: baseline;
        gap: 8px;
    }
    .topbar-responsive .add-new-entry
    {
        gap: 10px;
        width: 100%;
    }
    .table-top-bar .menu-title h3
    {
        font-size: 20px;
    }
    .multiple-delete span
    {
        display: none;
    }
}
/* End of 767px */

@media screen  and (max-width: 425px)
{
    .head-nav-bar
    {
        flex-direction: row-reverse;
    }
    .header .toggle-sidebar-btn
    {
        padding: 0px;
        margin-right: 10px;
    }  
    .upload-area
    {
        display: flex;
        flex-direction: column;
    }
    .upload-area p
    {
        margin-bottom: 10px;
    }
    .preview-item
    {
        max-width: 100%;
    }
    .preview-item img, .preview-item video
    {
        height: 240px;
    }
    .sidebar
    {
        width: 100%;
        left: -425px;
    }
    .table-data
    {
        overflow: hidden;
        overflow-x: auto;
    }
    .datatable thead th
    {
        white-space: nowrap; 
        width: 100%; 
        overflow: hidden;
        text-overflow: clip; 
    }
    .datatable tbody td
    {
        white-space: nowrap; 
        width: 100%; 
        overflow: hidden;
        text-overflow: clip; 
    }
    .datatable tbody td, .datatable thead th
    {
        font-size: 14px;
    }
    .register
    {
        display: flex;
        flex-direction: column;
    }
    .header-icons i
    {
        font-size: 16px;
    }
    .topbar
    {
        gap: 10px;
    }
    .head-bar .name-greetings .greetings
    {   
        white-space: nowrap; 
        width: 80px; 
        overflow: hidden;
        text-overflow: ellipsis; 
        display: block;
    }
    .footer-allrights
    {
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        margin-top: 24px;
    }
    .footer-allrights p
    {
        font-size: 14px;
    }
    #upload-container p
    {
        font-size: 14px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    #upload-container .browse-files
    {
        margin-top: 8px;
        margin-left: 0px;
        font-size: 14px;
        padding: 8px 16px;
    }
    .selected-options
    {
        display: block;
    }
    .selected-options .mem-price
    {
        width: auto;
    }
    .payment-period
    {
        display: block;
        padding: 10px;
        border-radius: 6px;
        background-color: #FAFAFA;
        border: 1px solid #EBEBEB;
        margin-top: 8px;
        margin-left: 0px;
    }
    .payment-period .schedule
    {
        margin-top: 6px;
        gap: 6px;
    }
    .payment-period .repeat,
    .payment-period .select-period
    {
        width: 50%;
    }
    .tab-card .tab-opt .nav-link
    {
        font-size: 14px;
    }
    .days-list
    {
        flex-wrap: wrap;
    }
    .days-list label
    {
        font-size: 14px;
    }
    .lib-doc .file-name p
    {
        width: 200px;
    }
    .lib-assets .dropdown-menu
    {
        width: auto;
    }
    .lib-file-upld .preview-item
    {
        max-width: fit-content;
    }
    .lib-file-upld .preview-item img,
    .lib-file-upld .preview-item video
    {
        object-fit: contain;
        height: 100px;
    }
    .table-top-bar .add-new-entry .btn
    {
        font-size: 14px;
    }
    .add-new-entry a
    {
        width: 100%;
    }
    .breadcrumb a
    {
        font-size: 16px;
    }
    .card-logo img
    {
        width: 150px;
        margin-bottom: 6px;
    }
    .login-card h3
    {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .unit-entries .entry
    {
        gap: 8px;
        align-items: baseline;
        flex-wrap: wrap;
    }
    .topbar-responsive .add-new-entry
    {
        flex-direction: column;
        align-items: baseline;
    }
    .topbar-responsive .add-new-entry .layout-modifier
    {
        max-width: fit-content;
        width: 100%;
        flex-wrap: wrap;
    }
}
/* End of 425px */

@media screen and (max-width: 375px)
{
    .new-prop h5
    {
        font-size: 16px;
    }    
    .new-prop .btn,
    .breadcrumb .menu
    {
        font-size: 14px;
    }
    .forgot-password
    {
        flex-direction: column-reverse;
    }
    .head-bar .name-greetings h4,
    .head-bar .name-greetings .greetings
    {   
        width: 120px !important;
    }
    .tab-card .tab-opt .nav-link
    {
        width: 116px !important;
    }
    .lib-doc .file-name p
    {
        width: 150px;
    }
    .table-top-bar .add-new-entry .btn
    {
        font-size: 12px;
        padding: 10px;
    }
    .logo img
    {
        height: 30px;
    }
    .table-top-bar .menu-title h3
    {
        font-size: 18px;
    }
    .breadcrumb
    {
        gap: 8px;
    }
}
/* End of 375px */

@media screen and (max-width: 390px)
{
    .tab-card .tab-opt .nav-link
    {
        white-space: nowrap;
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tab-card .tab-opt
    {
        justify-content: center;
    }
    .filters button {
        padding: 8px 5px;
      }
      .chart-name h5
      {
        font-size: 14px;
        align-items: center;
      }
      .chart-name
      {
        align-items: center;
      }
}
/* End of 390px */

@media screen and (max-width: 991px)
{
    .login-img
    {
        display: none;
    }   
    .head-bar
    {
        height: auto;
    }    
    .head-bar .name-greetings h4 
    {
        font-size: 22px;
        line-height: 24px;
    }
    .table-data
    {
        overflow: hidden;
        overflow-x: auto;
    }
    .datatable thead th
    {
        white-space: nowrap; 
        width: 100%; 
        overflow: hidden;
        text-overflow: clip; 
    }
    .datatable tbody td
    {
        white-space: nowrap; 
        width: 100%; 
        overflow: hidden;
        text-overflow: clip; 
    }
    .datatable tbody td, .datatable thead th
    {
        font-size: 14px;
    }
    .days-list
    {
        margin-bottom: 12px;
    }
    .head-bar .name-greetings h4
    {
        font-size: 20px !important;
        margin-bottom: 2px;
        white-space: nowrap; 
        width: 240px; 
        overflow: hidden;
        text-overflow: ellipsis; 
    } 
    .head-bar .name-greetings .greetings
    {
        font-size: 14px;
    } 
    .head-nav-bar .logo
    {
        width: 278px;
    }
    .table-textfield
    {
        display: inline;
    }
    .import-btn
    {
        margin-bottom: 16px;
    }
    .delivery-details .detail
    {
        flex-direction: column;
        align-items: baseline;
    }
    .delivery-details h6
    {
        width: auto;
    }
    .tab-content>.tab-pane
    {
        display: block;
        opacity: 1;
    }
    .tab-h-scroll
    {
        max-width: 150px;
        overflow: hidden !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        scrollbar-width: thin;
        scrollbar-color: #EBEBEB #FFF;
    }
    .categories
    {
        display: none;
    }
    .img-resp
    {
        display: none;
    }
    .login-page
    {
        justify-content: center;
    }
}
/* End of 991px */

@media screen and (min-width: 575px) and (max-width: 616px)
{
    .head-bar .name-greetings h4
    {   
        width: 80px;
    }
    .head-bar .name-greetings .greetings
    {
        white-space: nowrap; 
        width: 80px; 
        overflow: hidden;
        text-overflow: ellipsis; 
        display: block;
    }
}

@media screen and (max-width: 525px)
{
    .logo img
    {
        width: auto;
    }
    .head-bar .name-greetings h4
    {   
        width: 150px;
    }
    .head-bar .name-greetings .greetings
    {   
        white-space: nowrap; 
        width: 114px; 
        overflow: hidden;
        text-overflow: ellipsis; 
        display: block;
    }
    .dropdown-mobile
    {
        display: contents;
    }
    #mobile-view
    {
        display: none;
    }
    .pro-drop .pro-options
    {
        width: auto;
    }
}
/* End of 525px */
@media screen and (min-width: 526px)
{
    .dropdown-mobile
    {
        display: none;
    }
}
@media screen and (max-width: 561px)
{
    .expiration-select .warning-text h6
    {
        font-size: 16px;
        line-height: normal;
    }
}

@media screen and (max-width: 1199px)
{
    .footer-allrights p
    {
        padding-left: 0px;
    }
}
/* End of 1199px */

@media screen and (max-width: 574px)
{
    .head-nav-bar
    {
        background-color: transparent;
        padding: 0px;
    }
    .header .toggle-sidebar-btn
    {
        padding: 19.5px 14px;
        font-size: 16px;
        width: auto;
        gap: 8px;
        margin: 0px;
    }
    .table-top-bar
    {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column !important;
    gap: 10px;
    }
}

@media screen and (min-width: 528px) and (max-width: 574px)
{
    .reminder-notification .icons-drop .drop-content
    {
        left: -310px !important;
        right: auto !important;
        border: 1px solid #E6E6E6;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1289px)
{
    .tab-text-overflow
    {
      max-width: 600px;
    }
}

@media screen and (max-width: 575px)
{
    .lib-file
    {
        flex-direction: row;
        border: 1px solid #F0F0F0;
    }
    .lib-file img
    {
        width: auto;
        height: 42px;
        object-fit: contain;
        margin: 0px 12px 0px 0px;
    }
    .lib-file .file-name
    {
        background: none;
        border: none;
        text-align: left;
        padding: 0px;
    }
    .lib-assets
    {
        position: static;
    }
    .mob-hide
    {
        display: none;
    }
    .asset-details
    {
        display: flex;
        align-items: center;
    }
    .lib-doc
    {
        justify-content: space-between;
    }
    .lib-doc .video img
    {
        width: 42px;
        height: 42px;
        object-fit: cover;
        margin: 0px;
        border-radius: 8px;
    } 
    .lib-doc .video
    {
        margin: 0px 12px 0px 0px;
    }
    .lib-doc .video::before
    {
        width: 42px;
        height: 42px;
    }
    .lib-doc .video::after
    {
        font-size: 24px;
    }
    .login-card
    {
        width: 100% !important;
        padding: 16px !important;
    }
    .add-item-table
    {
        overflow-x: auto;
    }
    .add-item-table table
    {
        width: max-content;
    }
    .chart-key
    {
        justify-content: left;
    }
}
/* End of 575px */

@media screen and (max-width: 1440px)
{
    .login-card
    {
        width: 460px;
        padding: 30px;
    }
}

@media screen and (min-width: 576px)
{
    .mob-show
    {
        display: none;
    }
   
}

@media screen and (min-width: 576px) and (max-width: 991px)
{
    .lib-doc .video img
    {
        height: 136px;
        object-fit: cover;
    }
}

@media screen and (min-width: 768px)
{
    .responsive-view
    {
        display: none;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1218px)
{
    .insight-card .name
    {
        font-size: 15px;
    }
}

/* @media screen and (max-width: 992px)
{
    .img-resp
    {
        display: none;
    }
} */