MediaWiki:Common.css

.custom-header {
    border-radius: 4px;
    border: 1px solid #E3E8EE;
    background-color: #112B3C; /* Updated background color */
    height: 68px;
    width:100%;
     
}

.p-logo {
    margin-left: 25px;
}

#p-personal .p-personal-tools, .p-personal .p-personal-tools {
    text-align: center !important;
    margin-left: 100px;
}

#p-personal .p-personal-tools a, .p-personal .p-personal-tools a {
    color: white !important; 
}

#pt-userdashboard,
#pt-pageassignments {
    display: none;
}

.search-bar {
    margin-right: 20px;
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.searchbar-autocomplete-results {
    top: 70px !important; 
}

.custom-footer-bg {
    background-color: #111827;
    height: 100%;
    
}

#user-info {
    visibility: hidden;
}

#user-info.ready {
    visibility: visible;
}

.firstHeading {
    display: none;
}

/* Mobile view */
    @media (max-width: 767px) {
        .grid-container {
            grid-template-columns: 1fr;
            padding: 1em;
            gap: 10px;
        }
        .card {
            width: auto;
            height: auto;
            padding: 1em;
        }
        .card-content,
        .card-footer {
            flex-direction: column;
        }
        .card-footer {
            align-items: flex-start;
        }
    }

    /* Desktop view */
    @media (min-width: 768px) {
        .grid-container {
            display: grid;
            padding: 4em;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            grid-auto-rows: minmax(100px, auto);
        }
        .card {
            width: 361px;
            height: 183px;
            padding: 24px;
            background: #F3F6F9;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 10px;
        }
        .card-content,
        .card-footer {
            display: flex;
            gap: 4px;
        }
        .card-footer {
            align-self: stretch;
            justify-content: flex-start;
            align-items: center;
            margin-top: 10px;
        }
    }