/*
* Tips styles that are included for tips pages.
*/



.game-tips {
margin-top: 2.2em;
}

.game {
display: block;
width: 100%;
position: relative;
line-height: 2.6em;
color: #30336b;
border-top: 1px solid #f1f2f6;
background: #f8f8ff;
}



a.game:visited {
color: #30336b;
}

a.game:hover {
background: #ecf0f1;
}

a.game:hover .home, a.game:hover .away {
text-decoration: underline;
}


.game .flag {
display: block;
white-space: nowrap;
text-align: center;
position: absolute;
top: 0;
left: 6px;
width: 30px;
}

.game .flag img {
vertical-align: -3px;
}

.game .time {
display: block;
white-space: nowrap;
text-align: right;
position: absolute;
top: 0;
left: 42px;
width: 36px;
}

.game .score {
display: block;
white-space: nowrap;
text-align: center;
font-weight: bold;
position: absolute;
top: 0;
left: 50%;
margin-left: -22px;
width: 44px;
}

.game .teams {
position: relative;
display: block;
margin-left: 92px;
margin-right: 72px;
height: 2.6em;
line-height: 2.6em;
}

.game .home, .game .away {
display: block;
width: 50%;
}

.game .home {
float: left;
text-align: right;
}

.game .away {
float: right;
text-align: left;
}

.game .home span, .game .away span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.game .home span {
margin-right: 26px;
}

.game .away span {
margin-left: 26px;
}

.game .status {
display: block;
white-space: nowrap;
text-align: right;
position: absolute;
top: 0;
right: 6px;
width: 64px;
}

.tip {
line-height: 2em;
color: #30336b;
text-align: right;
margin-bottom: 2.2em;
}

.ttip {
font-weight: bold;
}

.tbet {
display: inline-block;
width: 20px;
text-align: left;
}

.tcount {
display: inline-block;
width: 20px;
padding-right: 8px;
text-align: right;
}

.tspace {
display: inline-block;
width: 16px;
padding-left: 8px;
text-align: center;
}

.twin {
display: inline-block;
padding: 0 6px 0 6px;
width: 18px;
}

.twin img {
width: 18px;
vertical-align: -3px;
}

.tuser, .stuser {
float: left;
text-align: left;
margin-left: 6px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.tuser {
width: calc(100% - 216px);
}

.stuser {
width: calc(100% - 178px);
}

.wtip {
position: relative;
color: #30336b;
line-height: 1.72em;
margin-bottom: 3.2em;
}

.dtip {
position: absolute;
top: 0;
left: 95px;
right: 6px;
line-height: 2em;
height: 2em;
text-align: right;

}

.tdesc {
margin-top: 0.32em;
}

.tip-avatar {
height: 75px;
width: 75px;
margin: 6px 20px 0 6px;
float: left;
}

#tips .tdesc p {
margin: 0 6px 0 6px;
line-height: 1.64em;
padding-top: 2.32em;
}

#tips .tdesc p:hover {
cursor: pointer;
}

.tuser a, .stuser a, .ttip a {
text-decoration: none;
color: #0057a0;
}

.tuser a:hover, .stuser a:hover, .ttip a:hover {
text-decoration: underline;
}

.tuser a:visited, .stuser a:visited, .ttip a:visited {
color: #0057a0;
}

.tlnk {
text-decoration: none;
color: #0057a0;
font-weight: bold;
float: right;
margin-right: 6px;
}

.tlnk:hover {
text-decoration: underline;
}

.tlnk:visited {
color: #0057a0;
}

@media screen and (max-width: 640px) {
.game .flag {
width: 24px;
}
.game .time {
text-align: center;
font-weight: normal;
top: 0;
left: 50%;
margin-left: -22px;
width: 44px;
font-size: 0.82em;
color: #7f8fa6;
}
.game .teams {
margin-left: 36px;
margin-right: 36px;
}
.game .noscore {
display: none;
}
.game .notime {
display: none;
}
.game .status {
font-size: 0.82em;
}
.game .ended {
display: none;
}
}


@media screen and (max-width: 460px) {
.dtip {
position: unset;
}
#tips .tdesc p {
padding-top: 0;
line-height: 1.48em;
}
}


@media screen and (max-width: 420px) {
.tip-avatar {
margin-right: 14px;
}
}


@media screen and (max-width: 360px) {
.game .flag {
left: 2px;
}
.game .status {
right: 2px;
}
.twin {
padding: 0 3px 0 3px;
}
.tuser {
margin-left: 2px;
width: calc(100% - 186px);
}
.stuser {
margin-left: 2px;
width: calc(100% - 158px);
}
.tip-avatar {
margin: 6px 10px 0 2px;
}
#tips .tdesc p {
margin: 0 2px 0 2px;
}
.tlnk {
margin-right: 2px;
}
}





.play {
color: #d63031;
}

.event {
background: #dfe4ea;
}

.goal {
color: #b33939;
}

.game .started {
color: #95a5a6;
}

.game .ended {
color: #95a5a6;
}

.game .end {
color: #95a5a6;
}



.summary-link {
margin-bottom: 1.2em;
text-align: right;
}

.summary-links {
margin-bottom: 1.2em;
text-align: center;
}

.summary-links a {
margin: 0 1.2em;
}

.summary-link a, .summary-links a {
text-decoration: none;
color: #0057a0;
}

.summary-link a:hover, .summary-links a:hover {
text-decoration: underline;
}

.summary-link a:visited, .summary-links a:visited {
color: #0057a0;
}


@media screen and (max-width: 580px) {
.summary-links a {
display: block;
width: max-content;
max-width: calc(100% - 1.2em);
margin: 0.2em auto 0.2em auto;
padding: 0.24em 0.52em;
text-align: center;
}
}

@media screen and (max-width: 480px) {
.summary-link {
text-align: center;
}
}