/* --- Container */
.ac-adaptiveCard {
    width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
    border-radius: 4px !important;
    background-color: #F3F4F6 !important;
    font-family: 'Lato' !important;
    font-size: 16px !important;
    max-width: 550px !important;
}

.ac-adaptiveCard *{
    font-family: 'Lato' !important;
}

.ac-horizontal-separator {
    height: 10px !important;
}

.ac-container {
    justify-content: center !important;
    margin: 0px !important;
}

.ac-actionSet {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
}

/* --- Input Sets */
.ac-input {
    background-color: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 5px !important;
    width: 100% !important;
}

.ac-input:focus,
.ac-input.ac-input--focused {
    border: 1px solid #165DFB !important;
    outline: none !important;
}

.ac-adaptiveCard label {
    margin-bottom: 5px !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgb(61, 61, 61) !important;
}

.ac-input-container:has(.ac-input-validation-failed)+.ac-textBlock {
    color: #fc5b5b !important;
    font-size: 15px !important;
    padding-top: 5px;
    font-weight: 500 !important;
}

/* --Images-- */
.ac-image {
    width: 25px !important;
}

.ac-textBlock {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #3D3D3D !important;
    line-height: unset !important;
}

/* --- Checkbox style */

.ac-choiceSet {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 5px !important;
}

.ac-input[type="checkbox"] {
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #c5c8d0 !important;
    border-radius: 4px !important;
    display: inline-block !important;
    position: relative !important;
    transition: all 0.2s !important;
}

input[type="checkbox"] {
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgb(197, 200, 208) !important;
    border-radius: 4px !important;
    display: inline-block !important;
    position: relative !important;
    transition: 0.2s !important;
}

input[type="checkbox"]:checked {
    background-color: rgb(91, 95, 199) !important;
    border-color: rgb(91, 95, 199) !important;
}

input[type="checkbox"]:checked::after {
    content: url(/tick.svg) !important;
    position: absolute !important;
    left: 50% !important;
    top: 40% !important;
    transform: translate(-50%, -50%) !important;
}

.ac-toggleInput {
    background-color: #fff !important;
    border: 1px solid #E5E7EB !important;
    padding: 10px !important;
    border-radius: 4px !important;
}

div:has(> input[type="checkbox"]) label.ac-textbox {
    margin-bottom: 0px !important;
}

.ac-input-container textarea {
    resize: none !important;
    line-height: 20px !important;
    height: 180px !important;
}

/* .ac-choiceSetInput,
.ac-checkboxGroup,
.ac-radioGroup {
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
}

.ac-choiceSetInput label,
.ac-checkboxGroup label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    user-select: none;
} */

/* --- Buttons */
.ac-pushButton.style-default {
    border: 1px solid rgb(223, 223, 223) Im !important;
    background-color: rgb(255, 255, 255) Im !important;
    padding: 5px 10px Im !important;
    cursor: pointer Im !important;
    border-radius: 5px Im !important;
    font-size: 15px !important;
    border: 0px !important;
        background-color: #F3F4F6 !important;
}

.ac-pushButton.style-default img {
    width: 30px !important;
    height: 30px !important;
}

.ac-pushButton.primary {
    background-color: #5B5FC7 !important;
    color: #fff !important;
    border: none !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    font-size: 15px !important;
}

.ac-pushButton.primary:hover {
    background-color: #494da9 !important;
}

.ac-pushButton.style-destructive {
    background-color: rgb(255, 98, 112) !important;
    color: #fff !important;
    border: none !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    font-size: 15px !important;
}

.ac-pushButton.style-destructive:hover {
    background-color: rgb(235, 82, 95) !important;
}

.ac-pushButton-disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
    border: 1px solid rgb(223, 223, 223) !important;
    background-color: rgb(255, 255, 255) !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    font-size: 15px !important;
}

/* --- Table */
.ac-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-radius: 10px !important;
    border: 1px solid #E2E8F0 !important;
}

.ac-table thead tr th {
    color: #5B5FC7 !important;
    background-color: #F7F7FF !important;
    font-size: 15px !important;
    padding: 18px 18px !important;
    text-align: start !important;
}

.ac-table thead tr th:first-child {
    border-top-left-radius: 10px !important;
}

.ac-table thead tr th:last-child {
    border-top-right-radius: 10px !important;
}

.ac-table tbody tr td {
    color: #222222 !important;
    font-size: 15px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.ac-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* --- Miscellaneous (Maps some of your intended styles) */
.ac-searchBar,
.ac-filterBar {
    height: 40px !important;
    border-radius: 6px !important;
    border: 1.5px solid #E7E5E5 !important;
    margin-right: 16px !important;
}

.ac-searchBar input {
    padding: 8px 12px !important;
}

.ac-searchBar input:focus-visible {
    outline: none !important;
}

.ac-searchBar button img {
    margin-top: 4px !important;
}

.ac-highlight {
    background-color: #F8F8F8 !important;
    border: 1px solid #E5E5E5 !important;
    padding: 10px !important;
    border-radius: 4px !important;
}

.ac-file {
    background-color: #F3F4F6 !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

.ac-file-name {
    font-size: 15px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-top: 1px solid #E8E8E8 !important;
}

/* Responsive, gap, and utility classes as appropriate */
.ac-w-100,
.ac-container--full {
    width: 100% !important;
}

.ac-mt-24 {
    margin-top: 24px !important;
}

.ac-gap-2 {
    gap: 14px !important;
}

.ac-gap-3 {
    gap: 20px !important;
}

.ac-d-none {
    display: none !important;
}

/* Use the id (preferred for Adaptive Cards) or a class in a custom renderer */
#custom-badge-signed {
    background: #17993b !important;
    border-radius: 16px !important;
    color: #fff !important;
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .015em !important;
    padding: 2px 10px !important;
    text-align: center !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
}

button[title="View Detailed Info"] {
    background-color: black !important;
}

button[title="Create SOW"] {
    background-color: black !important;
}

.ac-multiline {
    height: 125px !important;
}

.ac-richTextBlock {
    width: 480px !important;
}

@media (max-width:767px) {

    .ac-adaptiveCard,
    .ac-richTextBlock {
        width: 100% !important;
        max-width: 100% !important;
    }
}