/* General */

table td.nowrap,
table th.nowrap {
	white-space: nowrap;
}

table td.center,
table th.center {
    text-align: center;
}
table td.align-right,
table th.align-right {
    text-align: right;
}


/* Data table overrides */

table.dataTable {
    border-collapse: collapse;

    thead th {
        background-color: var(--table-header-background);
    }

    th,
    td {
        border-style: solid;
        border-width: 1px;
        border-top-color: silver;
        border-bottom-color: silver;
    }

    th {
        border-left-color: #bfc6db;
        border-right-color: #bfc6db;
    }
    td {
        border-left-color: #efefef;
        border-right-color: #efefef;
    }
    thead th, table.display tbody td {
        padding: 4px 6px;
    }

    tbody td.dt-body-right {
        padding-right: 20px;
    }
    tbody td div.dt-cell-v-middle {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    tbody td.dt-body-center div.dt-cell-v-middle {
        justify-content: center;
    }

    tbody td.team_name,
    tbody td.manager_name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media screen and (min-width: 750px) {
        tbody td.team_name,
        tbody td.manager_name {
            max-width: 200px;
        }
    }

    th.divider_left {
        border-left: 2px solid #aaa;
    }
    td.divider_left {
        border-left: 2px solid #ccc;
    }
}

table.display tbody tr td a {
	text-decoration: none;
	color: black;
}
table.display tbody tr td a:hover {
	color: blue;
	cursor: pointer;
}
table.display tbody tr.linked {
    cursor: hand;
}

table.display tbody td.rank {
	background-repeat: no-repeat;
	background-position: 60% 50%;
	padding-right: 40px;
}
table.display tbody td.rank.nochange {
	background-image: url('../img/misc/same.png');
}
table.display tbody td.rank.rise {
	background-image: url('../img/misc/up.gif');
}
table.display tbody td.rank.fall {
	background-image: url('../img/misc/down.gif');
}
table.display img.icon {
    width: 22px;
    height: 22px;
    vertical-align: bottom;
}

.dt-container div.dt-buttons {
	float: left;
}
.dt-container div.dt-search {
	float: right;
}
.dataTables_filter input[type="search"], .dt-container div.dt-search {
    margin-top: 5px;
    margin-right: 3px;
    margin-bottom: 2px;
}
table.dataTable td.linked {
    cursor: hand;
}
table.dataTable td.linked:hover {
    background-color: var(--table-hover-background);
}

table.dataTable.with_links td, table.bordered.with_links td {
    cursor: hand;
}
table.dataTable.with_links tr:hover:not(.ignore_rollover) td, table.bordered.with_links tr:hover:not(.ignore_rollover) td:not(.header, .title, .divider) {
    background-color: var(--table-hover-background);
}
table.light_rollover tr:hover:not(.ignore_rollover) td:not(.header, .title, .divider) {
    filter: brightness(92%);
    cursor: pointer;
}

/* Bordered */

table.bordered {
	border-width: 0px;
	width: 100%;
	border-collapse: collapse;

    &.outside_border {
        border-width: 2px;
        border-color: silver;
        border-style: solid;
    }

    tr.normal {
        background-color: #F0F3FF;
    }

    td.header,
    th {
        border-style: solid;
        border-width: 1px;
        border-top-color: silver;
        border-bottom-color: silver;
        border-left-color: #c5cde3;
        border-right-color: #c5cde3;
        padding: 4px 6px;
        font-weight: bold;
        background-color: var(--table-header-background);
        text-align: left;
    }
    td.normal {
        border-style: solid;
        border-width: 1px;
        border-top-color: silver;
        border-bottom-color: silver;
        border-left-color: #efefef;
        border-right-color: #efefef;
        padding: 4px 6px;
    }
    td.normal.center {
        text-align: center;
    }
    td.normal.alignright {
        text-align: right;
    }
    td.normal.top {
        vertical-align: top;
    }

    td.title {
        border-style: solid;
        border-width: 1px;
        border-top-color: silver;
        border-bottom-color: silver;
        border-left-color: #efefef;
        border-right-color: #efefef;
        font-weight: bold;
        color: black;
        background-color: #C7D2F0;
        padding: 4px 6px;
    }

    td.autowidth {
        width: 1%;
    }

    tr.linked:nth-child(odd), .bordered.striped tr:nth-child(odd) {
        background-color: white;
    }
    tr.linked:nth-child(even), .bordered.striped tr:nth-child(even) {
        background-color: #F5F6FC;
    }

    tr.highlight, tr.highlight, table.display tbody tr.highlight td {
        background-color: var(--table-highlight-background) !important;
    }


    tr.linked td.notlinked {
        background-color: white;
    }

    tr.total_row {
        border-top-width: 3px;
        border-top-color: silver;
        border-top-style: solid;
    }

    td.blank {
        background-color: white;
    }
    td.empty {
        border: none;
    }
    td.error {
        background-color: pink;
    }
}


.bordered td a,
.flowgrid a,
.wrap_grid a {
	text-decoration: none;
	color: black;
}

.bordered tr.linked:hover,
.bordered td.linked:hover,
.bordered td.celllinked:hover,
.flowgrid div.linked:hover,
.wrap_grid div.linked:hover,
.club_code_grid div.linked:hover {
    background-color: var(--table-hover-background);
    cursor: pointer;
}

.bordered td div.button a {
	color: white;
}

.bordered td.linked,
.flowgrid div.linked,
.wrap_grid div.linked {
	border-style: solid;
	border-width: 1px;
	border-top-color: silver;
	border-bottom-color: silver;
	border-left-color: #efefef;
	border-right-color: #efefef;
	padding: 4px 6px;
}

.bordered td.highlight,
.flowgrid div.highlight,
.wrap_grid div.highlight,
.club_code_grid div.highlight {
	background-color: var(--table-highlight-background);
}

.bordered td > img {
    vertical-align: middle;
}

.bordered caption {
    text-align: left;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 1px;
    margin-bottom: 1px;
	padding: 4px 6px;
    border: 1px solid silver;
}
.bordered caption.bottom {
    caption-side: bottom;
}
.bordered caption.warning {
    background-color: var(--table-highlight-background);
}
.bordered caption.error {
    background-color: #F78181;
}

td.divider, th.divider {
    padding: 0;
    height: 3px;
    background-color: #DDDDDD;
}
.bordered td.spacer {
    padding: 0;
    height: 6px;
}
.bordered td.vertical_divider, .bordered th.vertical_divider {
    padding: 0;
    width: 3px;
    background-color: var(--table-header-background);
}

table.desktop_centered_mobile_full {
    width: 100%;
}

@media only screen and (min-width : 760px) {
	table.bordered {
		border-width: 0px;
	}
	
	.bordered td.header, th {
		white-space: nowrap;
	}

	table.desktop_centered_mobile_full {
        display: grid;
        justify-items: center;
	}
}

.bordered td.good {
	background-color: #ECF8E0;
}

.bordered td.bad {
	background-color: #F8E0E0;
}

.bordered td.notgood {
	background-color: #F7F2E0;
}

.bordered td.error {
	background-color: #F78181;
}

table.bordered td.empty_data {
    text-align: center;
    padding: 3px;
}

/* Messages */

.messages tr {
	cursor: pointer;
}

.messages tr.msg td {
	border-style: solid;
	border-width: 1px;
	border-top-color: silver;
	border-bottom-color: silver;
	border-left-color: #efefef;
	border-right-color: #efefef;
	padding: 4px 6px;
}

.messages tr.expired {
	background-color: pink;
}

.messages tr.newmessage {
	background-color: #F0F3FF;
}

.messages tr.readmessage {
	background-color: white;
}

.messages tr.importantnewmessage {
	background-color: #D0FFE8;
}

.messages tr.importantreadmessage {
	background-color: #F3FFF5;
}

.messages tr.msg:hover {
	background-color: var(--table-highlight-background);
}

.message_detail {
    margin-left: 15px;
}

/* Squad details */

.squaddetails tr td {
	border-style: solid;
	border-width: 1px;
	border-top-color: silver;
	border-bottom-color: silver;
	border-left-color: #efefef;
	border-right-color: #efefef;
}
.squaddetails tr td:not(.divider) {
	padding: 4px 6px;
}

.squaddetails tr.goalkeeper td {
	background-color: var(--goalkeeper-light-color);
}

.squaddetails tr.defender td {
	background-color: var(--defender-light-color);
}

.squaddetails tr.midfielder td {
	background-color: var(--midfielder-light-color);
}

.squaddetails tr.striker td {
	background-color: var(--striker-light-color);
}

.squaddetails tr.goalkeeperstarter td {
	background-color: #FFFFDD;
}

.squaddetails tr.defenderstarter td {
	background-color: #D0FFFF;
}

.squaddetails tr.midfielderstarter td {
	background-color: #FFE0FF;
}

.squaddetails tr.strikerstarter td {
	background-color: #FFEECC;
}

.squaddetails tr.goalkeepersub td {
	background-color: #FFFFEA;
}

.squaddetails tr.defendersub td {
	background-color: #E4FFFF;
}

.squaddetails tr.midfieldersub td {
	background-color: #FFEEFF;
}

.squaddetails tr.strikersub td {
	background-color: #FFF0DD;
}

.squaddetails th.selectioncol {
    min-width: 35px;
}

.squaddetails td.selectioncell {
    text-align: center;
}

.squaddetails td .button {
    min-width: 40px;
}

.squaddetails td.status {
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
}
.squaddetails td.status.starter-confirmed {
    background-image: url('../img/squad_details/starter-green.png');
}
.squaddetails td.status.starter-removed-pending {
    background-image: url('../img/squad_details/starter-grey.png');
}
.squaddetails td.status.sub-confirmed {
    background-image: url('../img/squad_details/bench-green.png');
}
.squaddetails td.status.sub-removed-pending {
    background-image: url('../img/squad_details/bench-grey.png');
}
.squaddetails td.status.sub-pending {
    background-image: url('../img/squad_details/bench-blue.png');
}
.squaddetails.invalidsubs td.status.sub-pending {
    background-image: url('../img/squad_details/bench-red.png');
}
.squaddetails td.status.starter-pending {
    background-image: url('../img/squad_details/starter-blue.png');
}
.squaddetails.invalidstarters td.status.starter-pending {
    background-image: url('../img/squad_details/starter-red.png');
}

/* Transfers */

.transfers tr.bought td {
	background-color: #EEFFFF;
}

.transfers tr.sold td {
	background-color: #FFF0F0;
}

/* Played */

.played tr.fullplay td {
	background-color: #F0FFF0;
}

.played tr.partialplay td {
	background-color: #F0FFFF;
}

.played tr.smallplay td {
	background-color: #FFF8E0;
}

.played tr.unusedsub td {
	background-color: #FFF2F2;
}

.played tr.noplay td {
	background-color: #FFFFFF;
}

/* Other */

table.striped tr.odd td {
    background-color: #F4FFFF;
}

table.striped td.even td {
    background-color: #FFF8E0;
}

td.details-control {
    background: url('../img/misc/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../img/misc/details_close.png') no-repeat center center;
}

td.bigtitle {
	font-size: 14pt;
	color: var(--border-color);
}


table td input[type="text"], table td input[type="number"], table td select {
    width: 100%;
    max-width: 500px;
    min-width: 30px;
    box-sizing: border-box;
}
table td.multiinput input[type="text"], table td.multiinput input[type="number"], table td.multiinput select {
    width: auto;
}


.wrap_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 2px;
}
.wrap_grid > div {
    width: auto;
    white-space: nowrap;
    padding: 2px 5px 2px 5px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 3px;
}
.wrap_grid > div.fullwidth {
    text-align: center;
}

.club_code_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: 2px;
}
.club_code_grid > div {
    width: auto;
    white-space: nowrap;
    padding: 2px 5px 2px 5px;
    margin: 0;
    border: 1px solid grey;
}
.club_code_grid > div.linked {
}


.flowgrid {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.flowgrid > div.fullwidth {
    width: 100%;
    text-align: center;
}
.flowgrid > div {
    min-width: 50px;
    width: auto;
    white-space: nowrap;
    padding: 2px 5px 2px 5px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 3px;
}
.flowgrid > .fake {
    height: 0;
    border: none;
}


.promotion_relegation_table tr.promotion_place {
    background-color: #edfcf2;
}
.promotion_relegation_table tr.relegation_place {
    background-color: #faefdc;
}
table.matchup .winner {
    font-weight: bold;
}

.new_change {
    background-color: #ebfff0;
}

.bordered td.border_right {
    border-right-width: 1px;
    border-right-color: #aaaaaa;
}