/*

Further Styling in button-spinner.css

*/
#card-menu {
    width: 100%;
}

    #card-menu .tile-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* Space between tiles */
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

        #card-menu .tile-container .tile {
            flex: 1 1 200px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 58, 90, 0.1); /* Use rgba() for alpha */
            box-sizing: border-box;
            text-align: center;
            max-width: 200px;
            min-height: 200px;
            position: relative;
            border-radius: 4px;
        }

            #card-menu .tile-container .tile,
            #card-menu .tile-container .tile * {
                display: block;
                user-select: none; /* Prevent text selection */
            }

                #card-menu .tile-container .tile .tile-title {
                    text-align: left;
                    color: var(--mapit-secondary-color);
                }

                #card-menu .tile-container .tile .tile-icon {
                    position: absolute;
                    display: inline-block;
                    bottom: 10px;
                    right: 20px;
                    color: var(--mapit-primary-color);
                    font-size: 30px;
                }

                    #card-menu .tile-container .tile .tile-icon * {
                        display: inline-block;
                    }

                #card-menu .tile-container .tile:hover {
                    background-color: #004a73;
                    cursor: pointer;
                }

                    #card-menu .tile-container .tile:hover .tile-title {
                        color: white;
                    }

                    #card-menu .tile-container .tile:hover .tile-icon {
                        color: white;
                    }

                #card-menu .tile-container .tile:active {
                    background-color: #007dc3;
                }

    #card-menu .menu-section {
        margin: 10px 0px;
    }

        #card-menu .menu-section .menu-section-child {
            margin-bottom: 10px;
        }

@media (max-width: 645px) {

    #card-menu .tile-container {
        justify-content: start; /* Center align the tiles */
    }

        #card-menu .tile-container .tile {
            flex: 1 1 100%;
            max-width: 150px;
            min-height: 150px;
        }
}


#card-menu .tile a {
    height: 100%;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    padding: 20px;
}