.promotionsList-bc {
    display: grid;
    grid-gap: 10px
}

.promotionsListEl-bc {
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative
}

.promotionsArticleThumbnail-bc {
    display: flex;
    width: 100%;
    height: auto;
    opacity: 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    animation: promo-img var(--default-transition-duration) var(--default-transition-delay) forwards
}

@keyframes promo-img {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.promotions-article-title {
    height: 34px;
    margin-top: 1px;
    padding: 0 10px;
    color: rgba(var(--b-sc),1);
    background: rgba(var(--b-sc),.1);
    font-size: 12px;
    line-height: 34px
}

.prevent-prevent-action {
    opacity: .85;
    pointer-events: none
}

.promotions-opt-button {
    position: absolute;
    top: 10px;
    box-shadow: 0 4px 4px #00000026;
    min-width: 85px;
    z-index: 9
}

[dir=ltr] .promotions-opt-button {
    right: 10px
}

[dir=rtl] .promotions-opt-button {
    left: 10px
}

.promotion-details-img {
    width: 100%;
    object-fit: cover
}

.promotionDetSocList-bc {
    display: flex;
    justify-content: flex-end
}

.promotionDetSoc-bc {
    display: flex;
    justify-content: center;
    align-items: center
}

.promotionDetSoc-bc i {
    color: rgba(var(--b-sc),.7);
    font-size: 25px
}

.promotionDetSoc-bc+.promotionDetSoc-bc {
    margin-inline-start:10px}

.promotion-details-info {
    font-size: 14px;
    line-height: 1.2;
    color: rgba(var(--b-sc),.6);
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text
}

.promotion-details-info h3 {
    text-align: start;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 400;
    padding-bottom: 15px
}

.promotion-details-info p {
    padding: 10px 0;
    color: rgba(var(--b-sc),.9);
    line-height: 1.3
}

.promotion-details-info p img {
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--border-radius)
}

.promotion-details-info a {
    color: rgba(var(--hero),1);
    text-decoration: underline
}

.promotion-details-info iframe {
    width: 100%
}

.promotion-details-info table {
    display: flex;
    width: 100%!important;
    border-spacing: 1px;
    border-collapse: separate!important
}

.promotion-details-info table tbody {
    display: table;
    white-space: nowrap
}

.promotion-details-info table tr {
    background: rgba(var(--b-sc),.1)
}

.promotion-details-info table tr:first-child td:first-child {
    border-start-start-radius: var(--border-radius)
}

.promotion-details-info table tr:first-child td:last-child {
    border-start-end-radius: var(--border-radius)
}

.promotion-details-info table tr:last-child td:first-child {
    border-end-start-radius: var(--border-radius)
}

.promotion-details-info table tr:last-child td:last-child {
    border-end-end-radius: var(--border-radius)
}

.promotion-details-info td {
    vertical-align: middle;
    height: 32px;
    padding: 0 5px
}

.promotion-details-info td p {
    word-break: break-all
}

.promotion-details-info ul,.promotion-details-info ol {
    list-style: revert;
    list-style-position: inside
}

.promotion-details-info ul>li+li,.promotion-details-info ol>li+li {
    margin: 10px 0
}

.promotion-details-header .btn.promotions-opt-button {
    position: unset;
    height: 48px;
    margin-top: 10px;
    border-radius: 16px
}

[class*=is-web] .promotion-details-header .btn.promotions-opt-button {
    width: 100%;
    max-width: 100%
}

[class*=is-mobile] .promotion-details-header .btn.promotions-opt-button {
    width: calc(100% - 2 * var(--padding-page-aside));
    max-width: 600px;
    margin-left: auto;
    margin-right: auto
}

.promotion-details-header .btn.promotions-opt-button.a-color {
    color: rgba(var(--hero-sc));
    background-color: rgba(var(--hero),1);
    box-shadow: 0 7px 11px -4px rgba(var(--hero-sc)) inset;
    animation: OptBtnAnimation .5s infinite alternate
}

[class*=is-web] .promotion-details-header .btn.promotions-opt-button.a-color:hover {
    animation-play-state: paused
}

@keyframes OptBtnAnimation {
    0% {
        opacity: .85
    }

    to {
        opacity: 1;
        transform: scale(1.01)
    }
}

.promotionsList-bc {
    padding: 10px 0 20px
}

.promotionsList-bc:not(.gridView) {
    grid-template-columns: repeat(auto-fill,minmax(305px,1fr));
}

.promotionsList-bc.gridView {
    grid-template-columns: repeat(4,1fr)
}

.promotionsListEl-bc {
    display: flex;
    flex-direction: column;
    cursor: pointer
}

.promotionsListEl-bc.promotion-large {
    grid-column: span 2;
    grid-row: span 2
}

.promotionsListEl-bc.promotion-large:hover .promotionsArticleThumbnail-bc {
    transform: scale(1.025)
}

.promotionsListEl-bc:not(.promotion-large):hover .promotionsArticleThumbnail-bc {
    transform: scale(1.05)
}

.promotionsArticleThumbnail-bc {
    flex: auto;
    object-fit: cover;
    transition: var(--default-transition-duration)
}

.promotion-details-popup.windowed .popup-inner-bc {
    width: 100%;
    max-width: 1340px;
    height: 90vh
}

.poker-popup .status-popup-content-w-bc {
    width: 100%
}

.poker-popup .casino-popup-title {
    position: relative;
    text-align: start;
    padding-inline-start:10px;z-index: 1002
}

.poker-popup .promotion-details-container {
    padding-top: 100px;
    height: 100%
}

.promotion-details-container {
    display: grid;
    grid-template-columns: 400px auto;
    height: calc(100% - 49px);
    padding: 15px
}
@media (max-width: 768px) {
  .promotion-details-container {
    grid-template-columns: 1fr !important; 
  }
}
.promotion-footer-title {
    display: flex;
    justify-content: center;
    color: rgba(var(--b-sc),1);
    text-transform: uppercase;
    line-height: 16px;
    letter-spacing: 1px;
    align-items: flex-end;
    font-size: 12px
}

.promotion-details-img {
    border-radius: var(--border-radius)
}

.promotion-details-info {
    grid-row: span 2;
    padding-inline-start:20px;will-change: scroll-position;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.promotion-details-info table {
    overflow-y: hidden;
    overflow-x: auto
}
