.card-container {
    /* background-color: red; */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Equal columns, responsive */
    gap: .5rem;
    /* justify-content: space-between; */
    /*width: 100%;*/
    /*max-width: 100%;*/
    height: auto;
    /*padding: 1rem;*/
    /*flex-wrap: wrap;*/
}

.expert_card {
    /*width: 250px;*/
    padding: .5rem;
    background-color: var(--switch-darkBGShaded);
    border: 1px solid var(--switch-darkBorderlight);
    color: var(--switch-textWhite);
}
.expert_head {
    /* background: red; */
    display: flex;
    align-items: center;
    justify-content: start;
     padding-bottom: 0.4rem; 
    border-bottom: 1px solid var(--switch-darkBorderlight);
    position: relative;
}
.expert_head_title {
    /* background-color: blue; */
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}
.expert_title {
    font-size: 13px;
    padding: 0 10px;
    display: flex;
    justify-content: start;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--switch-textWhite);
}
.expert_count_title {
    font-size: 10px;
    /* padding: 3px; */
}
.expert_head_img {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    overflow: hidden;
    background: #ca00ff14;
}
.expert_head_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.expert_title_flag {
    position: absolute;
    top: 0px;
    /*border: 1px solid #fff;*/
    left: 19px;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    /*overflow: hidden;*/
}
.expert_title_flag img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50px;
}
.expert_getaccess {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 4px 6px;
    font-size: 10px;
    text-decoration: none;
    border-radius: 24px;
    transition: all .3s ease;
    cursor: pointer;
    border: 1px solid var(--switch-betopick);
}
.expert_getaccess:hover{
    background: var(--switch-betopick);
    border: 1px solid rgba(var(--switch-betopick), 0.5);
    color: #fff;
}
.expert_body {
    padding: 0.1rem 0 .2rem;
}
.expert_item__count {
    font-weight: 500;
    font-size: 15px;
    color: var(--switch-textWhite);
}
.expert_count_title {
    font-size: 13px;
    padding: 3px;
}
.expert_body span {
    font-size: 25px;
    color: var(--switch-betopick);
    font-weight: 600;
}
.expert__form h3 {
    font-size: 9px;
    font-weight: 400;
    color: var(--switch-textWhite);
}
.expert__form {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    /* width: 100%; */
    justify-content: center;
}
.result__tick {
    background: #53af75;
    width: 13px;
    height: 13px;
    border-radius: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
}
.result__tick_red {
    background: #f34040;
    width: 13px;
    height: 13px;
    border-radius: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
}
.time__loading{
    width: 13px;
    height: 13px;
}
.time__loading svg {
    width: 15px;
    height: 15px;
    stroke: #8e1c92;
    stroke-width: 1;
    stroke-linecap: square;
    stroke-linejoin: miter;
    fill: none;
    color: #8e1c92;
}
.cta_button.big {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    /*box-shadow: inset 0 -13px 0 0 rgb(111 15 113);*/
    padding: 8px 6px;
    margin: 1px;
    border-radius: 5px;
}
.cta_button.primary {
    background-color: var(--switch-betopick);
    width: 100%;
}
.cta_button.primary:hover {
    background-color: #652166;
    color: #fff !important;
}

/*Pagina*/
:root {
    --color-text: #111111;
    --color-text-8-percent: rgba(17, 17, 17, 0.08);
    --color-text-alpha: rgba(17, 17, 17, 0.35);
    --color-text-meta: rgba(17, 17, 17, 0.6);
    --color-text-link: #000000;
    --color-text-error: #D02F2E;
    --color-text-success: #478947;
    --color-background: #ffffff;
    --color-border: #aaaaaa;
    --color-border-meta: rgba(170, 170, 170, 0.6);
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-background-meta: #f5f5f5;
    --color-background-meta-alpha: rgba(245, 245, 245, 0.6);
    --color-background-darker-meta: #e8e8e8;
    --color-background-darker-meta-alpha: rgba(232, 232, 232, 0.6);
    --color-background-placeholder: #e8e8e8;
    --color-background-placeholder-lighter: #f0f0f0;
    --color-foreground-placeholder: rgba(17, 17, 17, 0.4);
    --color-border-input: #aaaaaa;
    --color-border-input-alpha: rgba(170, 170, 170, 0.25);
    --color-text-input: #111111;
    --color-text-input-alpha: rgba(17, 17, 17, 0.04);
    --color-text-button: #ffffff;
    --color-background-button: #111111;
    --color-background-button-alpha: rgba(17, 17, 17, 0.6);
    --color-background-outline-button-alpha: rgba(17, 17, 17, 0.1);
    --color-background-button-hover: #444444;
    --color-icon: rgba(17, 17, 17, 0.4);
    --color-icon-darker: rgba(17, 17, 17, 0.6);
    --color-text-sale-badge: #C31818;
    --color-background-sold-badge: #414141;
    --color-text-sold-badge: #ffffff;
    --color-text-header: #000000;
    --color-text-header-half-transparent: rgba(0, 0, 0, 0.5);
    --color-background-header: #ffffff;
    --color-background-header-transparent: rgba(255, 255, 255, 0);
    --color-icon-header: #000000;
    --font-body-base-size: 19px;
    --line-height-heading: 1.1;
    --line-height-subheading: 1.33;
    --line-height-body: 1.5;
}

:root {
    --height-input: 48px;
    --quick-buy-button-height: 60px;
    --easing: cubic-bezier(.33, 0, 0, 1);
    --duration-ultra-fast: .1s;
    --duration-fast: .3s;
    --duration-normal: .5s;
    --duration-slow: 1.2s;
    --delay-small: 33ms;
    --delay-normal: 67ms;
    --delay-long: 133ms;
}

:root {
    --spacing-unit: 4px;
    --spacing-unit-half: 2px;
    --spacing-1: calc(var(--spacing-unit) * 1);
    --spacing-2: calc(var(--spacing-unit) * 2);
    --spacing-3: calc(var(--spacing-unit) * 3);
    --spacing-4: calc(var(--spacing-unit) * 4);
    --spacing-5: calc(var(--spacing-unit) * 5);
    --spacing-6: calc(var(--spacing-unit) * 6);
    --spacing-7: calc(var(--spacing-unit) * 7);
    --spacing-8: calc(var(--spacing-unit) * 8);
    --spacing-9: calc(var(--spacing-unit) * 9);
    --spacing-10: calc(var(--spacing-unit) * 10);
    --spacing-11: calc(var(--spacing-unit) * 11);
    --spacing-12: calc(var(--spacing-unit) * 12);
    --spacing-15: calc(var(--spacing-unit) * 15);
    --spacing-16: calc(var(--spacing-unit) * 16);
    --spacing-17: calc(var(--spacing-unit) * 17);
    --spacing-18: calc(var(--spacing-unit) * 18);
    --spacing-20: calc(var(--spacing-unit) * 20);
    --spacing-25: calc(var(--spacing-unit) * 25);
    --spacing-30: calc(var(--spacing-unit) * 30);
}




.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    margin-top: var(--spacing-8)
}

@media (max-width: 479px) {
    .pagination {
        font-size: var(--font-size-body-75)
    }
}

@media (min-width: 480px) {
    .pagination {
        margin-top: 48px;
        margin-top: var(--spacing-12)
    }
}

.pagination__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: -8px;
    margin: calc(var(--spacing-2) * -1);
    padding: 0
}

.pagination__item {
    display: inline-flex;
    margin: 4px;
    margin: var(--spacing-1)
}

.pagination__item.pagination__item--ellip {
    align-items: center
}

@media (max-width: 479px) {
    .pagination__item {
        display: none
    }

    .pagination__item.pagination__item--arrow,
    .pagination__item.pagination__item--active,
    .pagination__item.pagination__item--active+.pagination__item,
    .pagination__item.pagination__item--previous-page {
        display: inline-flex
    }
}

.pagination__navigation-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-width: var(--spacing-10);
    height: 40px;
    height: var(--spacing-6);
    padding: 5px 10px;
    /*padding: var(--spacing-2) var(--spacing-4);*/
    border: 1px solid var(--color-border);
    background-color: var(--switch-darkBGShaded);
    color: var(--switch-textWhite);
    text-align: center
}

.pagination__item--active .pagination__navigation-button {
    border-color: var(--color-text)
}

.pagination__item--ellip .pagination__navigation-button {
    width: 28px;
    width: var(--spacing-7);
    padding: 8px;
    padding: var(--spacing-2);
    border: 0
}

.pagination__item--arrow .pagination__navigation-button {
    /*min-width: unset;*/
    /*padding: 12px 4px;*/
    /*padding: var(--spacing-3) var(--spacing-1);*/
    /*border: 0*/
}

.pagination__item--arrow .pagination__navigation-button .icon {
    width: 16px;
    height: 16px
}

.pagination__navigation-button.pagination__navigation-button--previous .icon {
    transform: rotate(90deg)
}

.pagination__navigation-button.pagination__navigation-button--next .icon {
    transform: rotate(-90deg)
}

.pagination__navigation-button.pagination__navigation-button--hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}

.pagination__footer {
    text-align: center
}

.pagination__list+.pagination__footer {
    margin-top: 12px;
    margin-top: var(--spacing-3);
    font-size: 14px;
}


@media (max-width: 82rem) {
    .card-container {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    /* width: 100%; */
    max-width: 100%;
    height: auto;
    /*flex-wrap: wrap;*/
    padding: 0;
}
.expert_card {
    /*width: 25%;*/
    padding: .5rem;
    background-color: var(--switch-darkBGShaded);
    border: 1px solid var(--switch-darkBorderlight);
    color: var(--switch-textWhite);
}
}


@media(max-width:62rem){
    
.card-container {
    /* background-color: red; */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .3rem;
    /* width: 100%; */
    max-width: 100%;
    height: auto;
    /*flex-wrap: wrap;*/
    padding: 0;
    margin-top: 1rem;
}
.expert_card {
    /*width: 45%;*/
    padding: .5rem;
    background-color: var(--switch-darkBGShaded);
    border: 1px solid var(--switch-darkBorderlight);
    color: var(--switch-textWhite);
}

}


 @media (max-width: 43rem) {
    .expert_card {
    width: 100%;
    padding: .5rem;
    background-color: var(--switch-darkBGShaded);
    border: 1px solid var(--switch-darkBorderlight);
    color: var(--switch-textWhite);
}
     
}