/* Placement/Spacing Classes */

.dashboard-column {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    gap: 1rem;
    margin-bottom: 2rem;
}

.patient-column {
    display: flex;
    flex-direction: column;
    width: calc(400px + 5rem);
    gap: 2rem;
    margin-bottom: 2rem;
}




.dashboard-row {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    margin-top: 1rem;
    margin-left: 0rem;
    margin-right: 2rem;
    gap: 2rem;
}

    @media only screen and (max-width: 1690px) {
        .dashboard-row {
            flex-direction: column;
            gap: 0rem;
        }

        .dashboard-column {
            margin-bottom: 1rem;
        }

        .patient-column {
            width: auto;
            gap: 2rem;
        }

        .patients-container {
            max-height: 400px !important;
        }

    }

.card-row > input[type=submit] {
    margin-top: 0px;
    margin-bottom: 0;
    background-color: rgba(var(--white), 0.10);
    color: rgba(var(--text), 1);
    border: none;
    border-radius: 10px;
    font-size: 35px;
    flex-grow: 1;
    height: 250px;
}

        .card-row > input[type=submit]:hover {
            background-color: rgba(var(--white), .20);
        }

.welcome-column {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    gap: 2rem;
    margin-bottom: 2rem;
}

.message-center {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    height: 250px;
    background-color: rgba(var(--card-dim), 1);
    border: 1px solid rgba(var(--border), 1);
    border-radius: 10px;
    padding-left: 2rem;
    padding-right: 2rem;
}

    .message-center:hover {
        cursor: pointer;
    }

.message-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13px 10px;
    border: 1px solid rgba(var(--blue), 1);
    background-color: rgba(var(--blue-dim), 1);
    color: rgba(var(--blue), 1);
    font-size: 30px;
    border-radius: 10px;
}

.green-counter {
    border: 1px solid rgba(var(--blue), 1);
    background-color: rgba(var(--blue-dim), 1);
}

.announcements {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    color: rgba(var(--text), 0.5);
    background-color: rgba(var(--blue-dim), 1);
    border-radius: 10px;
    border: 1px solid rgba(var(--blue), 1);
}

    .announcements:hover {
        cursor: pointer;
    }

    /* Card Classes */
    .card-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        gap: 1rem;
        width: 100%;
        height: 3rem;
        color: var(--text);
    }

        .card-header > h1 {
            margin-bottom: 0px;
        }

        a > h1 {
            margin-bottom: 0px;
        }

    .card-row-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        color: var(--text);
        max-width: calc(960px + 2rem);
    }
    
    .card-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        gap: 1.5rem;
        min-height: 100px;
        max-width: 100%;
    }


.welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    gap: 1.5rem;
    min-height: 100px;
    max-width: 100%;
    background-color: rgba(var(--card), 1);
    padding: 25px 25px 25px 25px;
    border-radius: 20px;
    border: 1px solid rgba(var(--border), 1);
}

    .card-column {
        display: flex;
        flex-direction: column;
        gap: 5px 5px;
    }

    /* Welcome Card */

.welcome-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    height: 250px;
    background-color: rgba(var(--card-dim), 1);
    border: 1px solid rgba(var(--border), 1);
    border-radius: 10px;
}

    .welcome-card:hover {
        cursor: pointer;
    }

.welcome-card-background {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 400px;
    height: 240px;
    gap: 15px;
    color: rgba(var(--text), 1);
    border-radius: 5px;
}      

        .company-logo > img {
            width: 96px;
            height: 96px;
        }

        .teams-logo {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: url(images/teams-1.png) no-repeat center center;
        }

.visit-table {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    gap: 5px;
    max-height: 400px;
    overflow-y: scroll;
}

.no-visits {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(400px - 4.25rem);
    background-color: rgba(var(--card), 1);
    border-radius: 10px;
}

#noVisits {
    display: flex;
    justify-content: center;
    align-items: center;
}

#noPatients {
    display: flex;
    justify-content: center;
    align-items: center;
}

.visit-card {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    height: 250px;
    background-color: rgba(var(--body), 1);
    border: none;
    border-radius: 10px;
    color: rgba(var(--text), 1);
    animation: fadein 2s;
}

.visit-card-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    height: calc(100% - 4rem);
    width: 100%;
    margin-left: 2rem;
}

.visit-date {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 10px;
    height: fit-content;
    border: 1px solid rgba(var(--text), 0.5);
    background-color: rgba(var(--text), 0.25);
    border-radius: 5px;
}

        .visit-today {
            border: 1px solid rgba(var(--greenIOC), 0.5);
            background-color: rgba(var(--greenIOC), 0.25);
        }

.visit-description-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    background-color: transparent;
    border-radius: 5px;
    overflow-y: scroll;
    gap: 0.75rem 0.75rem;
}

.visit-description {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 10px;
    height: fit-content;
    border: 1px solid rgba(var(--greenIOC), 0.5);
    background-color: rgba(var(--greenIOC), 0.25);
    border-radius: 5px;
}

    .purple-description {
        border: 1px solid rgba(var(--lightPurple), 0.5);
        background-color: rgba(var(--lightPurple), 0.25);
    }

    .yellow-description {
        border: 1px solid rgba(var(--mustard), 0.5);
        background-color: rgba(var(--mustard), 0.25);
    }

    .green-description {
        border: 1px solid rgba(var(--greenIOC), 0.5);
        background-color: rgba(var(--greenIOC), 0.25);
    }

    .orange-description {
        border: 1px solid rgba(var(--orange), 0.5);
        background-color: rgba(var(--orange), 0.25);
    }

    .blue-description {
        border: 1px solid rgba(var(--cyanIOC), 0.5);
        background-color: rgba(var(--cyanIOC), 0.25);
    }

    .pink-description {
        border: 1px solid rgba(var(--lightRed), 0.5);
        background-color: rgba(var(--lightRed), 0.25);
    }

.visits-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 1.5rem 1.5rem;
    min-height: 300px;
    height: calc(100vh - 575px);
    overflow-y: auto;
    color: rgba(var(--white), 0.5);
    background-color: rgba(var(--card), 1);
    padding: 25px 25px 25px 25px;
    border-radius: 20px;
    border: 1px solid rgba(var(--border), 1);
}

.patient-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: rgba(var(--body), 1);
    border: 5px solid rgba(var(--border), 1);
    border-radius: 10px;
    color: rgba(var(--text), 1);
}

    .patient-card:hover {
        box-shadow: 0 0 2rem rgba(var(--text), .25);
    }

@media only screen and (max-width: 1690px) {
    .patient-card {
        width: none;
        flex-grow: 1;
    }
}

#btnPatientRedirect {
    display: block;
    position: relative;
    float: left;
    margin-bottom: 5px;
    margin-top: 16px;
    padding: 1px 25px 2px 25px;
    border: 1px solid rgba(var(--greenIOC), .15);
    background-color: rgba(var(--greenIOC), .15);
    color: rgba(var(--greenIOC), 1);
    border-radius: 5px;
}

.patient-card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2rem;
    width: calc(100% - 4rem);
    margin-left: 2rem;
    margin-right: 2rem;
    color: rgba(var(--text), 1);
}

    .purple-patient {
        border: 5px solid rgba(var(--lightPurple), 1);
    }

        .purple-patient:hover {
            box-shadow: 0 0 2rem rgba(var(--lightPurple), .5);
        }

    .yellow-patient {
        border: 5px solid rgba(var(--mustard), 1);
    }

        .yellow-patient:hover {
            box-shadow: 0 0 2rem rgba(var(--mustard), .5);
        }

    .green-patient {
        border: 5px solid rgba(var(--greenIOC), 1);
    }

        .green-patient:hover {
            box-shadow: 0 0 2rem rgba(var(--greenIOC), .5);
        }

    .orange-patient {
        border: 5px solid rgba(var(--orange), 1);
    }

        .orange-patient:hover {
            box-shadow: 0 0 2rem rgba(var(--orange), .5);
        }

    .blue-patient {
        border: 5px solid rgba(var(--cyanIOC), 1);
    }

        .blue-patient:hover {
            box-shadow: 0 0 2rem rgba(var(--cyanIOC), .5);
        }

    .pink-patient {
        border: 5px solid rgba(var(--lightRed), 1);
    }

        .pink-patient:hover {
            box-shadow: 0 0 2rem rgba(var(--lightRed), .5);
        }

.patients-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 20px;
    padding: 5px;
    background-color: rgba(var(--text), 0.25);
    -webkit-text-stroke: 2px rgba(var(--text), 0.15);
    color: rgba(var(--text), 1);
    font-size: 20px;
    border-radius: 5px;
}

.patients-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 1.5rem 1.5rem;
    max-height: calc(100vh - 16.57rem);
    overflow-y: auto;
    color: rgba(var(--text), 1);
    background-color: rgba(var(--card), 1);
    padding: 25px 25px 25px 25px;
    border-radius: 20px;
    border: 1px solid rgba(var(--border), 1);
}

    .patient-card-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: calc(100% - 2rem);
        color: rgba(var(--white), 0.75);
        margin-bottom: 2rem;
    }

.card-name {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    margin-left: 2rem;
}