/**
 * NexusLIMS Homepage CSS Override
 *
 * This file overrides the core_main_app/css/homepage.css that loads last on the homepage.
 * Since INSTALLED_APPS has nexuslims_overrides before core_main_app, Django will serve this file.
 */

#intro {
    margin-top: 0.25em;
    text-align: justify;
}

#intro #mgi-diagram {
    width: 15em;
}

#browse-btn {
    float: right;
    color: #c0c0c0;
    font-size: 0.6em;
}

/**
 * Tiles CSS - NexusLIMS customizations
 */

.tile .icon {
    background-color: var(--nx-primary-color, #11659c);  /* NexusLIMS blue, not orange */
    background-image: -moz-linear-gradient(center top , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("../img/bg01.png");
    border-radius: 100%;
    box-shadow: 0 0 0 7px white, 0 0 0 8px #e0e0e0;
    color: #fff;
    cursor: default;
    display: inline-block;
    height: 2em;
    line-height: 2em;
    margin: 0.5em 0.75em 0.25em 0.25em;
    width: 2em;
    font-size: 2em;
    float: left;
    text-align: center;
    transition: all 0.3s ease-in-out;  /* Smooth transitions for hover */
}

.tile {
    display: inline-block;
    width: 100%;
    border-radius: 20px;
    background-color: inherit;
    padding: 0px 30px;
    transition: all 0.3s ease-in-out;
}

.tile .text h3 {
    margin-bottom: 0.1em;
}

.tile .text {
    margin-top: 1.25em;
    font-size: 0.85em;
    text-align: justify;
}

/**
 * Available Options heading
 */
#available-options {
    margin-bottom: 0;
}

/* Additional NexusLIMS tile styles for hover effects */
.tile a > i {
    color: white;
}

.tile a:hover {
    color: var(--nx-primary-color);
}

.tile a div.icon {
    cursor: pointer;
}