.navbar {
            position: fixed;
            width: 100%;
            z-index: 100;
            background-color: #f8f9fa; /* Bootstrap's 'light' gray color */
        }

        /* Add a padding to the body to prevent the fixed navbar to overlap the content */
        body {
            padding-top: 0px;
            font-family: 'Roboto', sans-serif;  /* Use Roboto font */
        }

        .file-icon {
            width: 120px;
            height: 120px;
            border-radius: 20px;
            background-color: #E9ECEF; /* Bootstrap's 'secondary' gray color */
            color: #4D4D4D;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-bottom: 20px;
            transition: transform .2s;  /* Animation for scaling */
        }

        .file-icon:hover {
            transform: scale(1.05);  /* Scale the element to 105% when hover */
            background-color: #007bff;
        }

        .file-icon p {
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 90px;  /* Limit the width of the text */
            margin: 0;
        }

        .file-icon a {
            text-decoration: none; /* Remove underline */
            color: inherit; /* Inherit parent's color */
        }

        .file-icon .pdf-icon {
            color: #ff7f7f; /* Set PDF icon color to red */
        }

        .file-icon .folder-icon {
            color: #EBBE3F; /* Set folder icon color to yellow */
        }

        .file-icon .word-icon {
            color: blue; /* Set Word icon color to blue */
        }

        .file-icon .excel-icon {
            color: green; /* Set Excel icon color to green */
        }

        .file-icon .powerpoint-icon {
            color: orange; /* Set PowerPoint icon color to orange */
        }

        .file-icon .ai-icon {
            color: purple; /* Set AI icon color to purple */
        }

        .file-icon .ps-icon {
            color: pink; /* Set PS icon color to pink */
        }

        .file-icon .txt-icon {
            color: brown; /* Set TXT icon color to brown */
        }
        
        
        .image-preview {
            width: 100px;
            height: 100px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            border-radius: 20px;
        }


        .modal-content {
            border-radius: 20px;
        }

        .modal-header,
        .modal-body {
            padding: 20px;
        }

        .modal-header {
            background-color: #007bff; /* Bootstrap's 'primary' blue color */
            color: white;
        }

        .btn {
            border-radius: 20px;
        }
        
    /* Styles for tooltip */
    .my-tooltip {
        position: relative;

    }

    .my-tooltip .tooltiptext {
        visibility: hidden;
        width: 130px;
        background-color: rgba(0, 0, 0, 0.5); /* Color negro con 50% de opacidad */
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: -30px; /* Adjust this value to change the tooltip's position */
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
        /* Styling the tooltip text */
        font-weight: bold; /* Make the text bold */
        font-size: 10px; /* Change the text size to 10px */
    }

    .my-tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }