/* set the normal apperance of the card button */
.card-button{
    background-color: var(--card-other-color);
    color: var(--card-background-color);
    border-color: var(--card-other-color);
    border-width: 3px;
    --bs-btn-hover-bg:var(--button-hover-color);
    --bs-btn-hover-color:var(--card-other-color) !important;
    --bs-btn-hover-border-color:var(--card-other-color);
    --bs-btn-hover-border-width: 3px;
}

/* set  the hover style of the card button*/
.card-button:hover:focus{
    background-color:var(--button-hover-color);
    color:var(--card-other-color) !important;
}

/* set the style of buttons when it is disabled-used on the progress page */
.card-button:disabled{
  background-color:var(--card-background-color);
  border-color:var(--card-other-color);
  color:var(--card-other-color);
}

/* metric cards and homepage cards have different settings */
/* set metric card icons style */
.metric-card .icon, .metric-card-indirect .icon{
    margin: auto;
    padding-top: 3rem;
    padding-bottom:1rem;
    font-size: 100px;
    color: var(--card-other-color);

}

/* set card text style */
.metric-card p, .metric-card-indirect p, .homepage-card p{
    font-size: 12pt;
}

.metric-card h4, .homepage-card h4, .metric-card-indirect h4{
    font-weight: bold; 
}

.homepage-card h4{
    text-align: center;
}

.metric-card h1, .homepage-card h1, .metric-card-indirect h1{
    text-align: center;
}

/* adds a vertical gap between the cards and top of page */
.card-column{
    border: None;
    margin-top: 40px; 
}

/* style the appearance of the metric cards */
.metric-card{
    border-width: 5px;
    border-color: var(--card-other-color);
    background-color: var(--card-background-color);
    color: var(--card-other-color);
    width: 85%!important; 
}

/* indirect cards are less wide */
.metric-card-indirect{
    border-width: 5px;
    border-color: var(--card-other-color);
    background-color: var(--card-background-color);
    color: var(--card-other-color);
    width: 60%!important; 
}

/* make cards wider when it shifts to one column layout */
@media(max-width:1200px){
.metric-card-indirect{
    width:90%!important;
}
}

/* style homepage cards */
.homepage-card{
    border-width: 5px;
    border-color: var(--card-other-color);
    background-color: var(--card-background-color);
    color: var(--card-other-color);
    width: 100%!important;
    
}

/* adjust width and height on small screens */
@media(max-width:768px){
.homepage-card{
    width: 90%!important;
    max-height: 350px;
}
}

/* centers the homepage icons */
.dash-icon {
    margin: auto;
    margin-top: 20px;
}