.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; gap: var(--Gap-1); } .tab-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: 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: right; gap: var(--Gap-1); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); padding: var(--Padding-3); background: var(--Body-BG); border: var(--Main-Border); font-size: var(--Font-Size-1); height: 35px; width: 150px; 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: linear-gradient(135deg, #5a3d78 0%, #7c569a 50%, #4766c4 100%); border-color: rgba(255, 255, 255, 0.08); color: var(--White-Color); } body.Night .transfer-item.top-item { background: var(--Body-BG) } div#recent-transfers .transfer-item { color: var(--Main-Font-Color) !important } .transfer-item { display: grid; display: -ms-grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; 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; column-gap: var(--Main-Gap); padding: var(--Main-Padding); -webkit-border-radius: var(--Main-Border-Radius); -moz-border-radius: var(--Main-Border-Radius); border-radius: var(--Main-Border-Radius); border: var(--Main-Border); min-width: 0; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .tab-item:hover { border: 3px solid var(--Main-Color); } .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: var(--Main-Color); width: 100px; font-size: var(--Font-Size-1); font-weight: bold; color: var(--Main-Font-Color); z-index: 3 } .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; text-align: center; 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 } .loading-transfers{ display: flex; justify-content: center; align-items: center; height:300px } @media (max-width:768px) { .transfer-item .exchange-sec .exchange-label { width: 110px; 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: 11px } .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 { font-size: 11px; width: 90px } } @media screen and (max-width:576px) { .tab-item { height: 51px; width: auto; } .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 } .transfer-item .exchange-label svg { display: none; } .transfer-item .transfer-date,.player-sec .player-info h5 { font-size: 11px; } } @media screen and (max-width:344px) { .transfer-item .exchange-label svg { display: none } .transfer-item .exchange-label span { width: 70px } }