/* Cards
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.card_container {
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute space evenly between cards */
    margin: 0 -0.15em; /* Balance the card spacing visually by applying a slight negative margin 
    on the container */
}

.card-col {
    flex: 0 0 25%; /* Ensure each card takes up exactly 25% of the row */
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-bottom: 1em;
    box-sizing: border-box;
}

.card-col:nth-child(n+6) {
    margin-bottom: 0px; /* Remove margin-bottom on the second row */
}


/* Default Card Design
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card {
    background: None;
}

.my-card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    transition: transform .2s;
    height: 180px;  /* adjust as needed */
    border: 1px solid white;
    /* do NOT add width -- this will break the flexbox  */
}


/* Card Body
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-card .card-body {
    padding: 10px;  /* Adjust as needed */
}
.my-card-body {
    padding: 2px;  /* adjust as needed */
}

/* Card Title & Subtitle
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card-title {
    margin: 0px;
}
.card_subtitle{
    font-size: 12px;
    color: #B6B7BB;
    margin-bottom: 6px;
}

/* Card Text
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card-text {
    margin: 0px;
    font-size: 15px;
    margin: 0px;    
}


/* Default Card Button   
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card_button_right_arrow {
    color: #1D9BD1;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
}
.card_button_right_arrow:hover {
    text-decoration: underline;
    color: #1D9BD1;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
}
.card_button_right_arrow::before {
    content: "";
    display: inline-block;
    width: 14px; 
    height: 14px; 
    margin-right: 5px; /* Customize the space between the icon and text */
    background-image: url("/assets/icons/arrow_right_blue.svg");
    background-size: contain;
    background-repeat: no-repeat;
}


/* Icon Button for c.add_button_callback */
.card_button_icon {
    color: #1D9BD1;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
}
.card_button_icon:hover {
    text-decoration: underline;
    color: #1D9BD1;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
}
.card_button_icon::before {
    content: "";
    display: inline-block;
    width: 20px; 
    height: 20px; 
    margin-right: 5px; 
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* Aligns the icon with the text */
}

/* Icon Buttons for c.add_button_nav */
.card_button_nav_icon {
    color: #1D9BD1;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: flex;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
    text-decoration: none !important;
}
.card_button_nav_icon:hover {
    color: #1D9BD1;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: flex;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline !important; 
}
.card_button_nav_icon::before {
    content: "";
    display: flex;
    width: 14px; 
    height: 14px; 
    margin-right: 5px; 
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* Aligns the icon with the text */
    margin-left: -4.7px;
}

/* Remove text underline */
/* a.card_button_nav_icon{
    text-decoration: none !important;
} */


/* MUST be used in combination with card_button_icon or .card_button_nav_icon */
.card_button_icon_balance::before {
    background-image: url("/assets/icons/balance.svg");
}
.card_button_icon_invoice::before {
    background-image: url("/assets/icons/invoice.svg");
}
.card_button_icon_invoice_pending::before {
    background-image: url("/assets/icons/invoice_pending.svg");
}
.card_button_icon_invoice_minus::before {
    background-image: url("/assets/icons/invoice_minus.svg");
}
.card_button_icon_user::before {
    background-image: url("/assets/icons/user_round_blue.svg");
}
.card_icon_button_user_settings::before {
    background-image: url("/assets/icons/user_settings.svg");
}
.card_icon_button_customer::before {
    background-image: url("/assets/icons/customer.svg");
}
.card_icon_button_send::before {
    background-image: url("/assets/icons/send_blue.svg");
}
.card_icon_button_send_filled::before {
    background-image: url("/assets/icons/send_filled_blue.svg");
}
.card_icon_button_trash::before {
    background-image: url("/assets/icons/trash_blue.svg");
}
.card_button_download::before {
    background-image: url("/assets/icons/cloud_download_blue.svg");
}
.card_button_icon_right_arrow::before {
    background-image: url("/assets/icons/arrow_right_blue.svg");
}




/* Upload */
.card_button_upload {
    color: #1D9BD1;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: flex;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
}
.card_button_upload:hover {
    text-decoration: underline;
    color: #1D9BD1;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: flex;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
}
.card_button_upload::before {
    content: "";
    display: flex;
    width: 20px; 
    height: 20px; 
    margin-right: 5px; 
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* Aligns the icon with the text */
}
.card_button_upload_icon::before {
    background-image: url("/assets/icons/cloud_upload_blue.svg");
    margin-left: -12px;
}
/* alternate class to handle misalignments */
.card_button_upload_icon_2::before {
    background-image: url("/assets/icons/cloud_upload_blue.svg");
    margin-left: 0px;
}



/* Client Branded Card Buttons  
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.card_button_themed {
    color: #63A4CE;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
}
.card_button_themed:hover {
    color: #B12328;
    background: none;
    border: none;
    padding-left: calc(var(--bs-gutter-x) * .51);
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
}



/* Card Right Icon Bubble Toggler
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Container: html.div's */
.card_icon_container {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    width: auto;
    background-color: transparent;
}

/* Icons: html.Img's */
.card_icons {
    display: flex;
    justify-content: flex_end; 
}