/*
* Styles for standing
*/

#standing-wrapper {
padding: 1.32em 0 5.2em 0;
}

h1.standing-list-title {
margin: 0 auto 1.2em auto;
text-align: center;
font-weight: normal;
font-size: 1.32em;
line-height: 1.4em;
}


.standing-header {
margin-top: 3.2em;
padding-left: 0.8em;
line-height: 2.8em;
text-align: left;
color: var(--game-title-color);
background: var(--game-title-bg-color);
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.standing-header:first-of-type {
margin-top: 0;
}

.standing-countries {
column-width: 320px;
column-gap: 0;
}

.standing-countries div {
width: 100%;
line-height: 3.2em;
}

.standing-countries div a {
display: block;
width: max-content;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: var(--link-color);
}

.standing-countries div a:visited {
color: var(--link-color);
}

.standing-countries div a:hover {
text-decoration: underline;
}

.standing-countries div a img {
vertical-align: middle;
margin-left: 0.8em;
margin-right: 0.72em;
}

.standing-countries img.country-flag, .standing-countries img.international-flag {
width: 32px;
height: 24px;
background: var(--image-bg-color);
}

@media screen and (max-width: 1024px) {
.standing-countries div a {
width: 100%;
}
}







table.standing {
width: 100%;
margin: 0;
border-collapse: collapse;
}

table.standing th {
line-height: 2.8em;
text-align: center;
font-weight: bold;
background: var(--game-title-bg-color);
color: var(--game-title-color);
}

table.standing td {
line-height: 2.8em;
padding-left: 10px;
padding-right: 0;
border-bottom: 1px solid var(--game-border-color);
}

table.standing td.team {
vertical-align: top;
}

table.standing td.position {
width: 24px;
white-space: nowrap;
text-align: right;
padding-left: 0;
padding-right: 6px;
}

table.standing td.matches, table.standing td.goals, table.standing td.points {
width: 32px;
white-space: nowrap;
text-align: right;
padding-left: 0;
padding-right: 16px;
}

table.standing td.diff {
width: 36px;
white-space: nowrap;
text-align: right;
padding-left: 0;
padding-right: 12px;
}

table.standing td.form {
width: 82px;
white-space: nowrap;
text-align: left;
padding-left: 8px;
padding-right: 2px;
}

table.standing td.form span.form-section {
display: inline-block;
}

table.standing a {
text-decoration: none;
color: var(--link-color);
}


table.standing a:visited {
color: var(--link-color);
}

table.standing a:hover {
text-decoration: underline;
}


@media screen and (max-width: 1024px) {
table.standing a {
display: inline-block;
width: 100%;
}
}


@media screen and (max-width: 767px) {
table.standing td.matches, table.standing td.goals, table.standing td.points {
width: 30px;
padding-right: 14px;
}
table.standing td.diff {
width: 32px;
padding-right: 12px;
}
}


@media screen and (max-width: 640px) {
table.standing .hide-form {
display: none
}
}


@media screen and (max-width: 639px) {
table.standing td.matches, table.standing td.goals, table.standing td.points {
width: 24px;
padding-right: 12px;
}
table.standing td.diff {
width: 32px;
padding-right: 8px;
}
}


@media screen and (max-width: 480px) {
table.standing .hide-goals {
display: none
}
}


@media screen and (max-width: 420px) and (min-width: 401px) {
table.standing td.matches, table.standing td.goals {
padding-right: 8px;
}
}


@media screen and (max-width: 400px) and (min-width: 361px) {
table.standing td.matches, table.standing td.goals {
padding-right: 6px;
}
}


@media screen and (max-width: 360px) {
table.standing .hide-matches {
display: none
}
}





/*
* Highlight for standings positions and legend for it and also standing amendments
*/
.standing-legend {
margin: 2em 0 1.4em 1.4em;
}

.standing-legend div {
margin: 0.4em 0;
}

.standing-legend-color {
display: inline-block;
width: 1.2em;
height: 1.6em;
margin-right: 0.6em;
vertical-align: middle;
}

.standing-legend-text {
display: inline-block;
line-height: 1.6em;
vertical-align: middle;
}

.standing-amendments {
width: 5%;
margin: 2em 0 1.4em 1.4em;
border-collapse: collapse;
white-space: nowrap;
}

.standing-amendments th {
padding: 0.4em 0;
text-align: left;
font-weight: bold;
}

.standing-amendments td {
padding: 0.4em 0.4em;
border-bottom: 1px solid var(--game-border-color);
}

.standing-amendments td.points {
padding-left: 3em;
text-align: right;
}


@media screen and (max-width: 360px) {
.standing-legend, .standing-amendments {
margin-left: 0.8em;
}
.standing-legend-color {
margin-right: 0.4em;
}
}





/*
* Standing form and standing colors
*/
span.form-el {
display: block;
width: 10px;
height: 12px;
border-radius: 1px;
margin-right: 3px;
float: right;
}

span.form-win {
background: var(--win-color);
}

span.form-draw {
background: var(--draw-color);
}

span.form-loss {
background: var(--loss-color);
}

.stp7, .stp11, .stp13, .stp17, .stp20, .stp30 {
background: var(--stp01);
}

.stp6, .stp12, .stp15, .stp18 {
background: var(--stp02);
}

.stp9, .stp14, .stp19, .stp22 {
background: var(--stp03);
}

.stp24, .stp31 {
background: var(--stp04);
}

.stp1, .stp32 {
background: var(--stp05);
}

.stp2, .stp5, .stp23 {
background: var(--stp06);
}

.stp4, .stp8, .stp10, .stp16, .stp21 {
background: var(--stp07);
}

.stp3 {
background: var(--stp08);
}

.stp25 {
background: var(--stp09);
}

.stp26, .stp28 {
background: var(--stp10);
}

.stp27, .stp29 {
background: var(--stp11);
}




/*
* Styles about standing navigation
*/
h1.standing-title {
margin: 0.8em 0 1.2em 0;
font-size: 1.2em;
font-weight: normal;
text-align: center;
}

h1.standing-title-int {
margin: 0 0 1.2em 0;
font-size: 1.2em;
font-weight: normal;
text-align: center;
}

div.standing-title-wrapper {
position: relative;
}

img.standing-country-flag {
width: 40px;
height: 30px;
position: absolute;
right: 0;
top: -4px;
background: var(--image-bg-color);
}

img.standing-international-flag {
width: 40px;
height: 30px;
position: absolute;
right: 0;
top: -4px;
background: var(--image-bg-color);
}

h2.standing-group-title {
margin: 3.2em 0 1.2em 0;
text-align: center;
font-size: 1.2em;
font-weight: normal;
}

h2.standing-group-title-games {
margin: 3.2em 0 -1.2em 0;
text-align: center;
font-size: 1.2em;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

h2.standing-subtitle {
margin: -0.88em 0 0.92em 0;
text-align: center;
font-size: 1em;
font-weight: normal;
text-transform: lowercase;
}

h2.standing-country-group-title {
margin: 4.2em 0 1em 0.6em;
text-align: left;
font-size: 1.2em;
font-weight: normal;
}

h2.standing-country-group-title-fisrt {
margin-top: 1.4em
}

.standing-group-details {
margin: 1em 0.6em 0 0;
text-align: right;
font-size: 1.2em;
}

.standing-group-details a {
text-decoration: none;
color: var(--link-color);
}

.standing-group-details a:visited {
color: var(--link-color);
}

.standing-group-details a:hover {
text-decoration: underline;
}

#standing-navigation {
padding-bottom: 0.6em;
border-bottom: 1px solid var(--game-border-color);
}

#standing-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}

#standing-navigation li {
display: inline-block;
margin-right: 1.4em;
}

#standing-navigation li:last-of-type {
margin-right: 0;
}

#standing-navigation a {
text-decoration: none;
color: var(--link-color);
}

#standing-navigation a:visited {
color: var(--link-color);
}

#standing-navigation a:hover {
text-decoration: underline;
}

#standing-navigation span {
color: var(--attention-color);
}

#standing-navigation img {
margin-right: 1.4em;
vertical-align: -3px;
background: var(--image-bg-color);
}

#standing-group-navigation {
margin-bottom: 0.6em;
padding-bottom: 0.6em;
border-bottom: 1px solid var(--game-border-color);
}

#standing-group-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}

#standing-group-navigation li {
display: inline-block;
margin-right: 1.4em;
}

#standing-group-navigation li:last-of-type {
margin-right: 0;
}

#standing-group-navigation a {
text-decoration: none;
color: var(--link-color);
}

#standing-group-navigation a:visited {
color: var(--link-color);
}

#standing-group-navigation a:hover {
text-decoration: underline;
}

#standing-group-navigation span {
color: var(--attention-color);
}


@media screen and (max-width: 1200px) {
#standing-navigation ul {
margin-left: 1em;
}
img.standing-country-flag, img.standing-international-flag {
right: 1em;
}
}

@media screen and (max-width: 640px) {
#standing-navigation ul {
margin-left: 0;
}
#standing-navigation, #standing-group-navigation {
border-bottom: 0 none var(--game-border-color);
}
#standing-navigation li, #standing-group-navigation li {
display: block;
line-height: 2.2em;
margin-left: 0.6em;
margin-right: 0.6em;
padding-left: 0.4em;
padding-right: 0.4em;
border-bottom: 1px solid var(--game-border-color);
}
#standing-navigation li:last-of-type {
margin-right: 0.6em;
}
#standing-navigation a, #standing-group-navigation a {
display: block;
}
}

@media screen and (max-width: 480px) {
h1.standing-title {
width: calc(100% - 50px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

@media screen and (max-width: 420px) {
img.standing-country-flag, img.standing-international-flag {
right: 0.32em;
}
}


@media screen and (max-width: 360px) {
h1.standing-title {
margin-top: 0.42em;
}
}






h2.standing-games {
margin: 5.2em 0 -1.2em 0;
text-align: center;
font-size: 1.2em;
font-weight: normal;
}

.standing-games-date {
margin-top: 3.2em;
margin-bottom: 0.6em;
font-size: 1em;
padding-left: 0.8em;
line-height: 2.8em;
text-align: left;
font-weight: bold;
background: var(--game-title-bg-color);
color: var(--game-title-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}



.standing-fixtures {
margin-top: 1.8em;
margin-bottom: -1.2em;
font-size: 1.2em;
text-align: right;
}

.standing-games-list {
margin-top: 2.2em;
font-size: 1.2em;
text-align: center;
}

.standing-games-list-main {
margin-top: 4.2em;
}

.standing-fixtures a, .standing-games-list a {
text-decoration: none;
color: var(--link-color);
}

.standing-games-list a:first-of-type {
margin-right: 0.5em;
}

.standing-games-list a:last-of-type {
margin-left: 0.5em;
}

.standing-fixtures a:visited, .standing-games-list a:visited {
color: var(--link-color);
}

.standing-fixtures a:hover, .standing-games-list a:hover {
text-decoration: underline;
}

@media screen and (max-width: 1200px) {
.standing-fixtures {
padding-right: 0.6em;
}
}




.dc {
position: relative;
max-width: 100%;
display: block;
}

.dce {
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
width: 100%;
top: 0;
left: 0;
}

.dce a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.season-starts-from {
margin: 1.2em 0;
text-align: center;
font-size: 1.2em;
color: var(--attention-color);
}


.standing-season {
margin-top: -1.12em;
margin-bottom: 1em;
text-align: center;
}

.seasons-select {
height: 2.4em;
margin-top: 0.6em;
margin-bottom: 1em;
text-align: center;
}

.seasons-label {
color: var(--main-color);
padding-right: 0.52em;
}

.seasons-button {
height: 2.4em;
width: 2em;
background-position: right;
background-repeat: no-repeat;
background-size: 1.52em 1.52em;
background-image: url("/svg/select.svg");
filter: var(--settings-select-filter);
}

.seasons-select a {
color: var(--link-color);
text-decoration: none;
white-space: nowrap;
font-size: 1em;
line-height: 2.4em;
padding: 0.4em 0.2em 0.52em 0.52em;
}

.seasons-select a span {
display: inline-block;
vertical-align: middle;
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.seasons-select a:visited {
color: var(--link-color);
}

.seasons-select a:hover {
background-color: var(--settings-hover-color);
}


.seasons-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 12000;
background: var(--settings-bg-color);
max-height: 50%;
display: flex;
flex-direction: column;
}

.seasons-select-arrow {
position: relative;
display: block;
text-align: center;
width: 100%;
height: 2.4em;
line-height: 2.4em;
flex: none;
cursor: pointer;
background-color: var(--settings-bg-header-color);
}

.seasons-select-button {
display: inline-block;
height: 2.4em;
width: 2.4em;
background-position: center;
background-repeat: no-repeat;
background-size: 2.4em 2.4em;
filter: var(--settings-bg-header-filter);

}

.seasons-select-up-button {
background-image: url("/svg/move-up.svg");
}

.seasons-select-down-button {
background-image: url("/svg/move-down.svg");
}

.seasons-select-items {
min-height: 0;
flex-grow: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}

.seasons-select-item {
display: block;
color: var(--settings-link-color);
text-decoration: none;
line-height: 2.4em;
padding: 0 1em;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
min-width: 132px;
}

.seasons-select-item:visited {
color: var(--settings-link-color);
}

.seasons-select-item:hover {
background-color: var(--settings-hover-color);
}

.seasons-close-button2 {
display: block;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 2.4em;
height: 2.4em;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
background-image: url("/svg/close.svg");
filter: var(--settings-bg-header-filter);
}

.seasons-close-button2:hover {
background-color: var(--settings-bg-header-hover-color);
}


@media screen and (max-height: 768px) {
.seasons-window {
max-height: 60%;
}
}


@media screen and (max-height: 640px) {
.seasons-window {
max-height: 70%;
}
}


@media screen and (max-height: 480px) {
.seasons-window {
max-height: calc(100% - 20px);
}
}

@media screen and (max-width: 480px) {
.standing-season {
width: calc(100% - 50px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}




.groups-select {
height: 2.4em;
margin-top: 0.6em;
margin-bottom: 1em;
text-align: center;
}

.groups-label {
color: var(--main-color);
padding-right: 0.52em;
}

.groups-button {
height: 2.4em;
width: 2em;
background-position: right;
background-repeat: no-repeat;
background-size: 1.52em 1.52em;
background-image: url("/svg/select.svg");
filter: var(--settings-select-filter);
}

.groups-select a {
color: var(--link-color);
text-decoration: none;
white-space: nowrap;
font-size: 1em;
line-height: 2.4em;
padding: 0.4em 0.2em 0.52em 0.52em;
}

.groups-select a span {
display: inline-block;
vertical-align: middle;
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.groups-select a:visited {
color: var(--link-color);
}

.groups-select a:hover {
background-color: var(--settings-hover-color);
}


.groups-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 12000;
background: var(--settings-bg-color);
max-height: 50%;
display: flex;
flex-direction: column;
}

.groups-select-arrow {
position: relative;
display: block;
text-align: center;
width: 100%;
height: 2.4em;
line-height: 2.4em;
flex: none;
cursor: pointer;
background-color: var(--settings-bg-header-color);
}

.groups-select-button {
display: inline-block;
height: 2.4em;
width: 2.4em;
background-position: center;
background-repeat: no-repeat;
background-size: 2.4em 2.4em;
filter: var(--settings-bg-header-filter);

}

.groups-select-up-button {
background-image: url("/svg/move-up.svg");
}

.groups-select-down-button {
background-image: url("/svg/move-down.svg");
}

.groups-select-items {
min-height: 0;
flex-grow: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}

.groups-select-item {
display: block;
color: var(--settings-link-color);
text-decoration: none;
line-height: 2.4em;
padding: 0 1em;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
min-width: 132px;
}

.groups-select-item:visited {
color: var(--settings-link-color);
}

.groups-select-item:hover {
background-color: var(--settings-hover-color);
}

.groups-close-button2 {
display: block;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 2.4em;
height: 2.4em;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
background-image: url("/svg/close.svg");
filter: var(--settings-bg-header-filter);
}

.groups-close-button2:hover {
background-color: var(--settings-bg-header-hover-color);
}


@media screen and (max-height: 768px) {
.groups-window {
max-height: 60%;
}
}


@media screen and (max-height: 640px) {
.groups-window {
max-height: 70%;
}
}


@media screen and (max-height: 480px) {
.groups-window {
max-height: calc(100% - 20px);
}
}





table.cross-games {
width: 100%;
margin: 0;
border-collapse: collapse;
}

table.cross-games th {
line-height: 2.8em;
text-align: center;
font-weight: bold;
background: var(--game-title-bg-color);
color: var(--game-title-color);
vertical-align: top;
}

table.cross-games th.header-national img {
width: 32px;
height: 24px;
vertical-align: middle;
background: var(--image-bg-color);
}

table.cross-games th.header-team img {
width: 28px;
height: 28px;
padding: 4px;
border-radius: 50%;
vertical-align: -12px;
background: var(--image-bg-color);
}

table.cross-games td {
line-height: 2.8em;
border-bottom: 1px solid var(--game-border-color);
}

table.cross-games td.flag-national {
width: 38px;
text-align: center;
}

table.cross-games td.flag-national img {
width: 28px;
height: 21px;
vertical-align: middle;
background: var(--image-bg-color);
}

table.cross-games td.flag-team {
width: 32px;
text-align: center;
}

table.cross-games td.flag-team img {
width: 24px;
height: 24px;
padding: 4px;
border-radius: 50%;
vertical-align: -10px;
background: var(--image-bg-color);
}

table.cross-games td.team {
vertical-align: top;
padding-left: 8px;
}

table.cross-games td.res {
text-align: center;
width: 92px;
}





@media screen and (max-width: 800px) {
table.cross-games td.res {
width: 82px;
}
}

@media screen and (max-width: 767px) {
table.cross-games td.res {
width: 72px;
}
}

@media screen and (max-width: 719px) {
table.cross-games td.res {
width: 62px;
}
}

@media screen and (max-width: 640px) {
table.cross-games td.res {
width: 58px;
}
}

@media screen and (max-width: 560px) {
table.cross-games td.res {
width: 46px;
}
}

@media screen and (max-width: 480px) {
table.cross-games td.res {
width: 44px;
}
}

@media screen and (max-width: 420px) {
table.cross-games th.header-national img {
width: 28px;
height: 21px;
vertical-align: -5px;
}
table.cross-games th.header-team img {
width: 24px;
height: 24px;
vertical-align: -6px;
}
table.cross-games td.flag-national {
width: 32px;
}
table.cross-games td.flag-national img {
width: 24px;
height: 18px;
vertical-align: -4px;
}
table.cross-games td.flag-team {
width: 28px;
}
table.cross-games td.flag-team img {
width: 20px;
height: 20px;
vertical-align: -4px;
}
table.cross-games td.team {
padding-left: 2px;
}
table.cross-games td.res {
width: 40px;
}
}

@media screen and (max-width: 384px) {
table.cross-games td.flag-national {
width: 28px;
}
table.cross-games td.flag-national img {
width: 20px;
height: 15px;
vertical-align: -2px;
}
table.cross-games td.flag-team {
width: 28px;
}
table.cross-games td.flag-team img {
width: 20px;
height: 20px;
vertical-align: -4px;
}
table.cross-games td.team {
padding-left: 0;
}
table.cross-games td.res {
width: 38px;
}
}

@media screen and (max-width: 360px) {
table.cross-games th.header-national img {
width: 24px;
height: 18px;
vertical-align: -3px;
}
table.cross-games th.header-team img {
width: 22px;
height: 22px;
vertical-align: -6px;
}
table.cross-games td.flag-national {
width: 24px;
}
table.cross-games td.flag-national img {
width: 20px;
height: 15px;
vertical-align: -2px;
}
table.cross-games td.flag-team {
width: 24px;
}
table.cross-games td.flag-team img {
width: 20px;
height: 20px;
vertical-align: -4px;
}
table.cross-games td.team {
padding-left: 0;
}
table.cross-games td.res {
width: 34px;
font-size: 0.8em;
}
}

@media screen and (max-width: 320px) {
table.cross-games td.res {
width: 32px;
}
}





.gml {
width: 100%;
margin-top: -0.6em;
margin-bottom: 3.2em;
}

.gm {
display: block;
width: 100%;
line-height: 2.8em;
clear: both;
border-bottom: 1px solid var(--game-border-color);
}

.gma {
display: block;
width: 100%;
line-height: 2.8em;
color: var(--main-color);
clear: both;
border-bottom: 1px solid var(--game-border-color);
text-decoration: none;
}

.gma:hover {
background: var(--game-hover-color);
}

.gm span, .gma span {
display: inline-block;
vertical-align: top;
}

.hour {
width: 48px;
padding-left: 4px;
text-align: left;
white-space: nowrap;
}

.date {
width: 92px;
padding-left: 4px;
text-align: left;
white-space: nowrap;
}

.res {
width: 64px;
text-align: center;
font-weight: bold;
}

.od {
width: 196px;
color: var(--game-odds-color);
}

.ho1, .do, .ao1, .ho2, .ao2 {
width: 64px;
text-align: right;
}

.ht1, .at1 {
width: calc(50% - 156px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.ht2, .at2 {
width: calc(50% - 178px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.ht1, .ht2 {
text-align: right;
}

.at1, .at2 {
text-align: left;
}


.win {
font-weight: bold;
}

.psp {
background: var(--game-psp-color);
border-bottom: 1px solid var(--game-psp-color);
}



@media screen and (max-width: 768px) {
.hour {
width: 42px;
padding-left: 2px;
}
.date {
width: 86px;
padding-left: 2px;
}
.res {
width: 56px;
}
.od {
width: 152px;
}
.ho1, .do, .ao1, .ho2, .ao2 {
width: 50px;
}
.ht1, .at1 {
width: calc(50% - 126px);
}
.ht2, .at2 {
width: calc(50% - 148px);
}
}



@media screen and (max-width: 568px) {
.ht1, .at1 {
width: calc(50% - 50px);
}
.ht2, .at2 {
width: calc(50% - 72px);
}
.gma {
line-height: 1.8em;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.od {
display: block;
width: 100%;
color: var(--game-odds-secondary-color);
}
.do {
width: 56px;
text-align: center;
}
.ho1 {
width: calc(50% - 26px);
text-align: right;
padding-right: 20px;
}
.ao1 {
width: calc(50% - 70px);
text-align: left;
padding-left: 20px;
}
.ho2 {
width: calc(50% - 4px);
text-align: right;
padding-right: 20px;
}
.ao2 {
width: calc(50% - 92px);
text-align: left;
padding-left: 20px;
}
}