/**
 * This is for any custom CSS that needs to be defined.
 * 
 * @author  Gareth Palmer   [Github & Gitlab /projector22]
 * @since   0.1.0-alpha
 */

.btn-primary {
    background-color: #222a41;
    border-color: #222a41;
}

.modal__container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.modal__entry {
    width: 100vw;
    height: 100vh;
    background-color: rgba(108, 117, 125, 0.75);
}

.toast-container {
    bottom: 10px;
    right: 10px;
}

.dropdown-menu-overwride {
    inset: 0px auto auto 0px;
    margin: 0px;
    margin-top: 5px;
    transform: translate(0px, 40px);
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .dropdown-menu-overwride {
        left: 25%;
        width: 75%;
    }
}

@media only screen and (min-width: 992px) {
    .dropdown-menu-overwride {
        left: 16.66666667%;
        width: 75%;
    }
}

.text-red {
    color: #ff0000;
}

.highlight-box {
    background-color: #222a41;
    color: #fff;
    text-align: center;
    padding: 1.8rem;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}

.category-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem;
}

.app-text {
    margin-top: 1.2rem;
    text-align: left;
}

.watermark {
    position: fixed;
    bottom: 0;
    right: -250px;
    opacity: 20%;
    z-index: -999;
}