/* Allow for placeholders to be shown on floating label forms */
/* https://github.com/twbs/bootstrap/issues/33999 */
.form-floating > .form-control::placeholder {
    color: revert !important;
}

.form-floating > .form-control:not(:focus)::placeholder {
    color: transparent !important;
}

/* Background color ara green (#22b573) */
.text-bg-ara {
    color: #fff !important;
    background-color: RGBA(34,181,115,var(--bs-bg-opacity,1)) !important;
}

/* Font size for the accordion headers */
.accordion-button {
    font-size: 65% !important;
}

/* Fill the accordion svg arrow with white */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

.accordion-body {
    background-color: var(--bs-light-bg-subtle) !important;
}

/* Remove extraneous padding around card collapse header buttons */
.ara-card-collapse {
    padding: 0 !important;
}

/* Size playbook labels and add padding/margin */
.ara-label {
    font-size: 90% !important;
    padding: 0.10rem 0.25rem !important;
    margin-bottom: 3px;
}

.ara-playbook-status-badge {
    padding-top: 0.05rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.ara-result-status-badge {
    padding: 0.05rem 0.30rem !important;
}

.ara-playbook-card-table td {
    border-bottom: none !important;
}

.card-header {
    padding: 0.3rem 1.0rem !important;
    height: 50px;
}

.card-footer {
    padding: 0.3rem 1.0rem !important;
}

.card-border-left {
    border-left: 1px solid #444;
}

.card-border-right {
    border-right: 1px solid #444;
}

/* Size and text formatting on some table columns */
.report-column {
    width: 60px;
    text-align: center;
}

.short-status-column {
    width: 60px;
    text-align: center;
    white-space: nowrap;
}

.medium-status-column {
    width: 100px;
    text-align: center;
    white-space: nowrap;
}

.long-status-column {
    width: 160px;
    text-align: center;
    white-space: nowrap;
}

.cli-column {
    width: 60px;
    text-align: center;
}

.date-column {
    width: 200px;
    white-space: nowrap;
}

.duration-column {
    width: 100px;
    white-space: nowrap;
}

.single-pill-column {
    width: 25px;
    text-align: center;
}