/*
* Styles for game tips page
*/

.tipsters {
margin-top: 5.2em;
margin-bottom: 5.2em;
}

h1 {
text-align: center;
font-weight: normal;
font-size: 1.52em;
line-height: 1.4em;
}


.tipsters {
margin: 3.2em auto 3.2em auto;
max-width: 760px;
}


.tipster {
position: relative;
margin: 7.2em auto 9.2em auto;
height: 100px;
}


.avatar-pic {
float: left;
}


.balance {
display: block;
float: left;
height: 100px;
line-height: 100px;
padding-left: 20px;
width: calc(100% - 120px);
color: var(--main-color);
text-decoration: none;
}

.balance:hover {
color: var(--main-color);
}

.balance:visited {
color: var(--main-color);
}

.balance-data {
display: inline-block;
vertical-align: middle;
width: 100%;
padding-bottom: 2em;
}

.data {
display: block;
float: left;
width: 25%;
text-align: center;
}

.num {
display: block;
font-size: 1.2em;
font-weight: bold;
line-height: 1.2em;
}

.label {
display: block;
font-size: 0.92em;
line-height: 1.2em;
margin-top: 0.52em;
color: var(--tertiary-color);
}



.balance-positive {
color: var(--balance-positive-color);
}

.balance-negative {
color: var(--balance-negative-color);
}



@media screen and (max-width: 768px) {
.tipster {
margin-top: 5.2em;
margin-bottom: 16em;
}
.avatar-pic {
float: unset;
margin-left: auto;
margin-right: auto;
width: max-content;
margin-top: 0;
margin-bottom: 2.8em;
}
.balance {
float: unset;
height: unset;
line-height: unset;
padding-left: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
background-color: var(--secondary-bg-color);
}
.balance-data {
padding-top: 1em;
padding-bottom: 1em;
}
}

@media screen and (max-width: 420px) {
.num {
font-size: 1.12em;
}
.label {
font-size: 0.82em;
}
}

@media screen and (max-width: 380px) {
.num {
font-size: 1em;
}
.label {
font-size: 0.82em;
}
}

@media screen and (max-width: 360px) {
.num {
font-size: 0.92em;
}
.label {
font-size: 0.72em;
}
}



.more-links {
margin-top: -3.2em;
text-align: center;
}

.more-link {
text-decoration: none;
color: var(--link-color);
}

.more-link:visited {
color: var(--link-color);
}

.more-link:hover {
text-decoration: underline;
}

.more-links .disabled {
color: var(--link-disabled-color);
}

.link-disabled {
pointer-events: none;
color: var(--link-disabled-color);
}

.links-hidden {
display: none;
}



@media screen and (max-width: 640px) {
.more-links {
margin-top: 5.2em;
}
}




.all-tipsters {
font-size: 1.2em;
text-align: right;
margin: 2.2em auto -2.2em auto;
max-width: 684px;
padding-right: 76px;
}

.all-tipsters a {
display: inline-block;
margin-left: 1.52em;
color: var(--link-color);
text-decoration: none;
}

.all-tipsters a:hover {
text-decoration: underline;
}

.all-tipsters a:visited {
color: var(--link-color);
}

@media screen and (max-width: 768px) {
.all-tipsters {
text-align: center;
max-width: unset;
margin-top: 1.8em;
margin-bottom: -0.92em;
padding-right: 0;
}
.all-tipsters a {
display: block;
width: max-content;
white-space: nowrap;
margin: 0.52em auto;
}
}

@media screen and (max-width: 360px) {
.all-tipsters {
font-size: 1em;
font-weight: bold;
}
}