.transfers-page { padding: var(--Main-Padding) } .transfers-content { margin-top: var(--Margin-4); } .section-title { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: var(--Margin-4); color: var(--Main-Font-Color); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .section-title::before { content: ""; height: 20px; width: 6px; background: var(--Main-Color); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .load-area { margin-bottom: var(--Margin-4); } .tabs-container { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .tab-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; flex-direction: row; justify-content: center; margin-bottom: var(--Margin-2); margin-left: var(--Margin-2); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: var(--Padding-3); background: var(--Body-BG); border: var(--Main-Border); font-size: var(--Font-Size-1); -webkit-transition: var(--Tran-1); -moz-transition: var(--Tran-1); -o-transition: var(--Tran-1); transition: var(--Tran-1); height: 35px; overflow: hidden } .tab-item.active { pointer-events: none; color: var(--Main-Font-Color); border: 3px solid var(--Main-Color); } .tab-item img { width: 25px; height: 25px; object-fit: contain; -webkit-border-radius: var(--Border-Radius-4); -moz-border-radius: var(--Border-Radius-4); border-radius: var(--Border-Radius-4); border: 3px solid rgba(57, 219, 191, 0.4); margin-left: var(--Margin-3) } .tab-item span { line-height: 20px } #Tabi3liveTransfers { margin-top: var(--Margin-4); padding: 0 var(--Main-Padding) ; } div#top-transfers,div#recent-transfers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: var(--Main-Gap); margin: var(--Margin-4) auto } .transfer-item.top-item { background: -webkit-gradient(linear, left top, right top, from(#78529a), to(#5a83ff)); border: var(--Main-Border); background: linear-gradient(to right, #78529a, #5a83ff); color: var(--White-Color) !important } body.Night .transfer-item.top-item { background: var(--Body-BG) } div#recent-transfers .transfer-item { color: var(--Main-Font-Color) !important } .transfer-item { display: -ms-grid; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: var(--Main-Padding); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); background: var(--Body-BG); justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .transfer-item .from-sec,.transfer-item .to-sec { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--Full-width); -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start } .transfer-item .exchange-sec { margin: 0 auto; -webkit-box-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 30px } .transfer-item .exchange-label { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 30px; -webkit-box-pack: flex-end; -ms-flex-pack: flex-end; justify-content: flex-end; overflow: hidden } .transfer-item .exchange-label span { position: absolute; right: 50%; bottom: 50%; -webkit-transform: translate(50%, 50%); -moz-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); -o-transform: translate(50%, 50%); transform: translate(50%, 50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 30px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #5a83ff; width: 100px; font-size: var(--Font-Size-1); font-weight: bold; color: var(--White-Color); z-index: 3 } div#top-transfers .transfer-item .exchange-label span { background: var(--White-BG); color: var(--Black-Color) } .Night div#top-transfers .transfer-item .exchange-label span { background: var(--Main-Color); } .transfer-item .exchange-label svg { color: var(--Main-Font-Color) } div#top-transfers .transfer-item .exchange-label svg { color: var(--White-Color) } .club-logo { margin-left: var(--Margin-3); width: 30px; height: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .club-logo img { height: auto; width: auto; max-height: 30px; max-width: 30px; margin: auto } .player-sec { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; min-width: 150px; -ms-flex-align: center; align-items: center } .player-sec .img-box { width: 40px; height: 40px; -webkit-border-radius: var(--Border-Radius-2); -moz-border-radius: var(--Border-Radius-2); border-radius: var(--Border-Radius-2); margin-left: var(--Margin-4); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--White-BG); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .player-sec .img-box img { height: auto; width: auto; max-height: 35px; max-width: 35px; margin: auto } .player-sec .player-info h5 { margin: 0; font-size: var(--Font-Size-1); line-height: 25px; height: 25px; overflow: hidden } .exchange-sec .price-value { font-size: var(--Font-Size-2); font-weight: 600; position: absolute; right: calc(100% + 8px); white-space: nowrap } .transfer-item .to-sec { -webkit-box-pack: flex-end; -ms-flex-pack: flex-end; justify-content: flex-end } .transfer-item .transfer-date { font-size: var(--Font-Size-1) } .load-more-transfers-btn { width: 100%; display: block; margin: 0 auto; padding: var(--Main-Padding); background: var(--Body-BG); font-size: var(--Font-Size-3); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); text-align: center } .load-more-transfers-btn.disabled { color: var(--Main-Color); pointer-events: none } @media (max-width:768px) { .transfer-item .exchange-sec .exchange-label { width: 140px; flex-wrap: wrap } .transfer-item .exchange-sec { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .transfer-item .price-value { position: initial !important; font-size: var(--Font-Size-1) } .player-sec, .transfer-item .to-sec { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .player-sec .img-box, .club-logo { margin: 0 } .transfer-item .exchange-label span { width: 90px } } @media screen and (max-width:576px) { .tab-item { height: 51px } .tab-item img { width: 35px; height: 35px; margin-left: 0 } .tab-item span { display: none } .player-sec { min-width: var(--Full-width) } .transfer-item .exchange-label span { width: 80px } } @media screen and (max-width:344px) { .transfer-item .exchange-label svg { display: none } .transfer-item .exchange-label span { width: 70px } }