@import url(https://fonts.googleapis.com/css?family=Montserrat);
@media only screen and (max-width: 600px) {

    body {
        font-family: 'Montserrat', 'Helevtica', sans-serif;
        position: relative;
        width: 100%;
        height: 100vh;
        /* background-image: url('../images/mobile/PMS.png');
        background-size: cover;
        background-repeat: no-repeat; */
        /* color: #4B4848;
        display: flex;
        justify-content: center;
        align-items: center; */
        background-color: #fff;
        transition: background-color 1.25s ease-in-out;
    }
.page-body {
    margin-top: var(--tblr-content-padding);
    margin-bottom: 20%;
}
    .fixed-image {
        width: auto;
        height: 20%;
        position: fixed;
        top: 85%;
        left: 80%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }

    .table_project tr{
        border-bottom: 1px solid #ddd;
    }
    /* List Project */

    #myUL {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    #myUL li a {
        border-bottom: 1px solid #ddd;
        /* Prevent double borders */
        padding: 12px;
        text-decoration: none;
        font-size: 15px;
        display: block
    }
    /*  */
    header {
        background-color: #ffffff;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
        position: sticky;
        z-index: 999;
    }

    header .container-xl {
        padding: 10px;
    }

    header .page-body {
        margin-top: 0;
        margin-bottom: 0;
    }

    .cate {
        text-align: center;
    }

    .icon-header a {
        float: right;
        margin-left: 5px;
        height: fit-content;
    }

    .card-header {
        display: flow;
    }

    .icon-header {
        display: flex;
        justify-content: end;
    }

    .avatar-sm {
        --tblr-avatar-size: 3rem;
        background-color: #fff;
        box-shadow: none;

    }

    .avt {
        background-size: 30px;
    }

    ul {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Content */

    .icon-chart .title {
        color: rgb(32, 107, 196);
        padding-top: 20px;
        font-size: 9px;
        text-align: center;
    }


    .icon-chart .menu {
        display: flex;
        justify-content: center;
        box-shadow: 0 0 7px rgb(145 136 136 / 70%);
        border-radius: 5px;
        padding: 20px 0;
        margin: 0 10px;
    }

    .icon-chart .menu button {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.5);
        margin: 0 10px;
        color: #333;
        border: 1px solid transparent;
        border-radius: 5px;
        transition: all 0.3s;
        width: 17%;
        background: #fff;
    }

    .icon-chart .menu .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50px;

    }

    .icon-chart .menu img {
        max-width: 40px;
        margin-left: -50%;
    }

    .icon-chart button:active {
        transform: scale(0.95);
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.5);
    }

    .icon-chart button:hover {
        background-color: rgb(37 62 116);
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.5);
    }

    .icon-chart button:hover .title {
        color: #fff;
    }

    .icon-chart button:hover img {
        filter: brightness(0) invert(1);
        -webkit-filter: brightness(0) invert(1);
    }

    #show_char_sample,
    #show_char_sdw,
    #show_char_mos,
    #char_sample,
    #char_sdw,
    #char_mos {
        display: none;
    }

    .navbar-nav {
        display: contents;
    }
    .nav-item:active, .nav-item:hover{
        color: red;
    }
    .card-footer nav {
        position: relative;
        z-index: 2;
        height: 3.5rem;
        overflow-y: hidden;
        scroll-behavior: smooth;
      }
      
    .card-footer ul {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1.5rem;
        padding-left: 0;
        margin-block: 0;
        overflow-x: auto;
        list-style: none;
        text-align: center;
        white-space: nowrap;
      }



    /* Footer */

    
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }


    .card-footer .title {
        color: rgb(32, 107, 196);
        padding-top: 20px;
        font-size: 8px;
    }

    .card-footer .menu-container {
        overflow-x: auto;
        white-space: nowrap;
        background-color: #f2f2f1;
    }

    .card-footer .menu {
        display: flex;
        height: 70px;
    }

    footer .card-footer .menu a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3px;
        text-decoration: none;
        color: #333;
        border: 1px solid transparent;
        border-radius: 5px;
        transition: all 0.3s;
        margin: 0 auto;
    }

    .card-footer .menu .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 65px;
    }


    .card-footer .menu img {
        max-width: 40px;
        margin-left: -40%;
    }

    .card-footer a:active {
        transform: scale(0.95);
        background-color: #fefefe;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.5);
    }

    .card-footer a:hover {
        background-color: rgb(37 62 116);

    }

    .card-footer a:hover .title {
        color: #fff;
    }

    .card-footer a:hover img {
        filter: brightness(0) invert(1);
        -webkit-filter: brightness(0) invert(1);
    }

    .card-footer .menu-container {
        overflow-x: scroll;
        white-space: nowrap;
        width: 100%;
    }

    /* Project */
    .layout-download-file{
        padding: 20px 0;
    }
    /* Project tab con */


    /* Login */
    .download-app{
        display: none;
    }
    .sign-in-locale{
        display: none;
    }
    /* notify dropdown */
    .notify-internal {
        max-height: 45em;
        overflow: auto;
    }
    .notify-internal .list-group-item{
        padding: 1% 4%;
    }
    .dropdown .notify{
        width: 1200%;
        margin-top: 57%!important;
    }
    .navbar-brand-image {
        height: 3rem;
        width: 13rem;
    }
}

.card-footer .menu-container::-webkit-scrollbar,
.tabs__nav::-webkit-scrollbar {
    display: none;
}