:root {
    --xs: 4px;
    --xs2: 8px;
    --sm: 16px;
    --lg: 24px;
    /* --cp-scroller-height: 428px; */
    --cp-scroller-height: 470px;
}

.connection-provider-chooser-popup {
    font-family: Inter;
}

.connection-provider-chooser-popup .modal-header {
    border-bottom: 1px solid var(--sds-grey-400);
    padding: var(--sm) var(--lg);
}

.connection-provider-chooser-popup .modal-body {
    padding: 0px;
}

.connection-provider-chooser-popup .modal-footer {
    border-top: 1px solid var(--sds-grey-400);
    padding: var(--lg);
    gap: var(--xs2);
}

.connection-provider-chooser-popup .modal-header .title {
    color: var(--sds-grey-900);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: var(--xs);
}

.connection-provider-chooser-popup .modal-header .subtitle {
    color: var(--sds-grey-600);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.connection-provider-popup-wrapper {
    display: flex;
}

.connection-provider-popup-wrapper .connection-providers-filter-list {
    padding: var(--xs2) var(--sm);
    min-width: 208px;
    border-right: 1px solid var(--sds-grey-400);
    max-height: var(--cp-scroller-height);
    overflow-y: auto;
}

.connection-provider-popup-wrapper .connection-providers-list {
    padding: var(--sm) var(--lg);
    width: 100%;
}

.connection-provider-popup-wrapper .connection-providers-filter-list,
.connection-provider-popup-wrapper .connection-providers-list {
    min-height: var(--cp-scroller-height);
}

.connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lg);
    max-height: calc(var(--cp-scroller-height) - 84px);
    overflow-y: auto;
    /* padding-right: var(--xs2); */
}

.connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item {
    flex: 0 0 30.3%;
    -webkit-animation: fadein 300ms;
    -moz-animation: fadein 300ms;
    -ms-animation: fadein 300ms;
    -o-animation: fadein 300ms;
    animation: fadein 300ms;
    cursor: pointer;
}


.connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item .cpl-card {
    text-align: center;
}

.connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item.selected .cpl-card {
    border: 2px solid var(--sds-primary-500)
}

.connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item .capl-img {
    max-height: 70px;
    width: 100%;       /* ✅ always fill the card width */
    object-fit: contain; /* ✅ keep aspect ratio */
    font-size: 10px;
}

.connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item .cpl-title {
    margin: 0px;
    color: var(--sds-grey-900);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.connection-provider-popup-wrapper .connection-providers-filter-list .cpfl-wrapper {
    padding: 0px;
    list-style: none;
    margin: 0px;
}

.connection-provider-popup-wrapper .connection-providers-filter-list .cpfl-wrapper .cpfl-item {
    min-height: 32px;
    padding: 5px 8px;
    align-items: center;
    display: flex;
    align-self: stretch;
    margin-bottom: var(--xs2);
    color: var(--sds-grey-900);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

.connection-provider-popup-wrapper .connection-providers-filter-list .cpfl-wrapper .cpfl-item:hover,
.connection-provider-popup-wrapper .connection-providers-filter-list .cpfl-wrapper .cpfl-item.selected {
    color: var(--sds-primary-500);
    border-radius: 6px;
    background: var(--sds-grey-200);
}

.connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item .cpl-card {
    display: flex;
    width: 100%;
    height: 94px;
    border: 1px solid rgb(211 211 211 / 20%);
    border-radius: 6px;
    margin-bottom: 8px;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 1px 0px rgba(2, 3, 3, 0.25), 0px 2px 1px 0px rgba(2, 3, 3, 0.05);
}

.connection-providers-search-container {
    border-radius: 6px;
    border: 1px solid var(--sds-grey-500);
    background: var(--sds-grey-000);
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: var(--xs2);
    margin-bottom: 16px;
}

.connection-providers-search-container #connection-provider-search-input {
    border: none;
    padding: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.connection-provider-chooser-popup .btn:hover,
.connection-provider-chooser-popup .btn {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    display: flex;
    height: 36px;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    margin: 0px;
}

.connection-provider-chooser-popup .btn.btn-primary,
.connection-provider-chooser-popup .btn.btn-primary.disabled,
.connection-provider-chooser-popup .btn.btn-primary:disabled {
    background-color: var(--sds-primary-500);
    border-color: var(--sds-primary-500);
}

.connection-provider-chooser-popup .btn.btn-outline-secondary {
    border-color: var(--sds-grey-500);
    color: var(--sds-grey-900);
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper {
        justify-content: space-evenly;
    }
    .connection-provider-chooser-popup .modal-dialog {
        max-width: 80%;
    }
}

@media screen and (max-width: 767px) {
    .connection-provider-popup-wrapper .connection-providers-filter-list{
        display: none;
    }
    .connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper{
        justify-content: space-evenly;
    }
    .connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item .cpl-title{
        text-align: center;
    }
    .connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item .cpl-card{
        padding: 5px;
    }
    .connection-provider-popup-wrapper .connection-providers-list .cpl-wrapper .cpl-item .capl-img{
        max-width: 107px;
    }

    .cpds-wrapper .cpd-details-action{
        justify-content: unset;
    }

    .sds-connection-settings .accordion-body .cpd-details-action > .btn{
        width: 100%;
    }

    #cpd-details .row.g-0.align-items-center {
        gap: 12px
    }

   #cpd-details .row.g-0.align-items-center > .col-12.col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }   
}
@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}