body, html {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

#app {
	min-height: 100vh;
}

.hold-height-150-px {
	min-height: 150px;
}
.hold-height-75-px {
	min-height: 75px;
}

.main-content-4040 {
	min-height: 85vh;
}

/* utility classes */
.navbar-right {
	display: flex;
	justify-content: right;
}

.no-scroll {
	overflow-y: hidden !important;
	overflow-x: hidden !important;
}

.no-wrap {
	white-space: nowrap;
}

.scroll-col {
	overflow-y: scroll;
	overflow-x: hidden;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-bold {
	font-weight: bold;
}
.text-bold-underline {
	font-weight: bold;
	text-decoration: underline;
}

.text-italic {
	font-style: italic;
}
.text-italic-underline {
	font-style: italic;
	text-decoration: underline;
}

.text-enormous {
	font-size: 200%;
}

.text-ginormous {
	font-size: 400%;
}

.font-size-150-pct {
	font-size: 150%;
}

.main-title {
	font-size: 20px;
	line-height: 1.3;
}

.title-4040 {
	font-size: 18px;
	line-height: 1.3;
}

.supplementary {
	font-size: 12px;
	line-height: 1.3;
}

.float-left {
	float: left;
}

.float-center {
	display: flex;
	justify-content: center;
}

.float-right {
	float: right;
}

.flex-vert-align-center {
	align-items: center;
}

.inline-block {
	display: inline-block;
}

.vertical-align-top {
	vertical-align: top;
}

.new-msg-indicator {
	font-size: 300%;
	color: rgba(0,0,0,0);
	font-weight: bold;
	padding: 3px;
}

.new-msg-indicator.indicator-on {
	color: #409EFF;
}

.msg-ownerid {
	font-size: 85%;
	display: block;
}

.msg-teamname {
	display: block;
	margin-top: 1.1rem;
}

.chat-thread-picker {
	width: 20px;
	height: 70px;
	border-right: 5px solid silver;
}

.chat-thread-picker.chat-thread-active {
	border-right: 10px solid #67C23A;
}

.logo-box {
	height: 0;
	overflow-y: visible;
	z-index: 999;
	position: absolute;
	left: 0;
	right: 0;
}
.logo-box img {
	display: block;
	margin: auto;
	width: 100px;
	margin-top: 1rem;
}
.menu-logo-box img {
	display: block;
	margin: auto;
	width: 70px;
	margin-top: 0.5rem;
}
.home-page-logo-box img {
	display: block;
	margin: auto;
	width: 200px;
	margin-top: 0.5rem;
}

.site-name {
	font-weight: bold;
	color: white;
}

.top-bar {
	height: 5rem;
}

.site-title {
	padding-top: 1rem;
	font-weight: 400;
	color: white;
}

.logo-row {
	height: 0;
	overflow-y: visible;
}

.el-card.tag-info-container .el-card__body {
	padding: 0.25rem
}
.el-card.tag-info-container .el-card__body .number {
	font-size: 14px;
}

.page-tip {
	padding: 8px 16px;
	background-color: #ecf5ff;
	border-radius: 4px;
	border-left: 5px solid #409EFF;
	margin: 20px 0;
	width: 85%;
}
.page-tip p {
	font-size: 14px;
	color: #182738;
	line-height: 1.5em;
}
.page-tip.success {
	background-color: #efffe7;
	border-left: 5px solid #67c23a;
}
.page-tip.warning {
	background-color: #fff6e8;
	border-left: 5px solid #e6a23c;
}
.page-tip.danger {
	background-color: #ffeded;
	border-left: 5px solid #f56c6c;
}
.page-tip.info {
	background-color: #eff4ff;
	border-left: 5px solid #909399;
}

.page-bar-4040 .title-4040 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.zero-dark-4040,
.zero-dark-4040 .el-dialog {
	background-color: #182738;
}

.zero-dark-4040 .reversed a {
	display: block;
}

.zero-dark-4040 .reversed a,
.zero-dark-4040 .reversed p,
.zero-dark-4040 .reversed h1,
.zero-dark-4040 .reversed h2,
.zero-dark-4040 .reversed h3,
.zero-dark-4040 .reversed h4,
.zero-dark-4040 .reversed h5,
.zero-dark-4040 .reversed h6,
.zero-dark-4040 .el-dialog__header {
	color: white;
	background-color: #182738;
}

.zero-dark-4040 .reversed .el-divider__text {
	color: white;
	background-color: #182738;
	padding: 0 8px;
}

.zero-dark-4040 .reversed .el-submenu__title {
	color: white;
}

.zero-light-4040 {
	background-color: #f7f7f7;
	padding-bottom: 0;
	padding-top: 0;
}

.home-page-bg {
	background: rgb(24,39,56);
	background: linear-gradient(135deg, rgba(24,39,56,1) 25%, rgba(52,83,120,1) 100%);
}

.tiny-text-4040 {
	font-size: 65%;
}

.special-section-4040 {
	border: 2px solid #e8b87e;
	border-radius: 0.5rem;
	margin-top: 3rem;
	padding-bottom: 1.5rem;
}

.special-section-4040 h3 {
	color: white;
}

.el-popover.darkened {
	background-color: #182738;
	color: whitesmoke;
}
.el-popper.darkened .popper__arrow {
	border-bottom-color: #182738;
}
.el-popper.darkened .popper__arrow::after {
	border-bottom-color: #182738;
}
.el-popover.darkened .el-descriptions__header .el-descriptions__title {
	color: whitesmoke;
}

.padding-0 {
	padding: 0;
}

.padding-5-px {
	padding: 5px;
}

.padding-0-25rem {
	padding-bottom: 0.25rem;
	padding-top: 0.25rem;
}

.padding-0-5rem {
	padding: 0.5rem;
}
.padding-1rem {
	padding: 1rem;
}

.padding-1-25rem {
	padding: 1.25rem;
}

.padding-left-1-25rem {
	padding-left: 1.25rem;
}

.padding-2rem {
	padding: 2rem;
}
.padding-10-px {
	padding: 10px;
}

.padding-bottom-4-rem {
	padding-bottom: 4rem;
}

.padding-top-bottom-0-5rem {
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.padding-top-bottom-1rem {
	padding-bottom: 1rem;
	padding-top: 1rem;
}

.padding-top-bottom-13-px {
	padding-bottom: 13px;
	padding-top: 13px;
}

.padding-left-0 {
	padding-left: 0;
}

.padding-top-0 {
	padding-top: 0;
}

.padding-top-2-rem {
	padding-top: 2rem;
}

.padding-top-bottom-0 {
	padding-bottom: 0;
	padding-top: 0;
}

.padding-left-right-1-rem {
	padding-left: 1rem;
	padding-right: 1rem;
}

.padding-left-right-0-5-rem,
.el-button--medium.is-round.padding-left-right-0-5-rem {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.padding-left-right-0-25-rem {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.margin-0,
.el-button+.el-button.margin-0,
.el-checkbox.is-bordered+.el-checkbox.is-bordered.margin-0 {
	margin: 0;
}

.margin-top-bottom-0 {
	margin-bottom: 0;
	margin-top: 0;
}

.margin-top-bottom-0-5-rem {
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

.margin-top-bottom-0-75-rem {
	margin-bottom: 0.75rem;
	margin-top: 0.75rem;
}

.margin-top-bottom-1-rem {
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.margin-top-bottom-2-rem {
	margin-bottom: 2rem;
	margin-top: 2rem;
}

.margin-top-neg-7px {
	margin-top: -7px;
}

.margin-top-0 {
	margin-top: 0;
}

.margin-top-0-6-rem {
	margin-top: 0.6rem;
}

.margin-top-0-25-rem {
	margin-top: 0.25rem;
}

.margin-top-0-5-rem {
	margin-top: 0.5rem;
}

.margin-top-0-75-rem {
	margin-top: 0.75rem;
}

.margin-top-1-rem {
	margin-top: 1rem;
}

.margin-top-1-25-rem {
	margin-top: 1.25rem;
}

.margin-top-1-5-rem {
	margin-top: 1.5rem;
}

.margin-top-2-rem {
	margin-top: 2rem;
}

.margin-top-3-rem {
	margin-top: 3rem;
}

.margin-top-35-px {
	margin-top: 35px;
}

.margin-top-40-px {
	margin-top: 40px;
}

.margin-left-1-rem {
	margin-left: 1rem;
}

.margin-left-3-rem {
	margin-left: 3rem;
}

.margin-right-0-25-rem {
	margin-right: 0.25rem;
}

.margin-right-0-5-rem {
	margin-right: 0.5rem;
}

.margin-right-1-rem {
	margin-right: 1rem;
}

.margin-left-right-auto {
	margin-left: auto;
	margin-right: auto;
}

.margin-left-right-0 {
	margin-left: 0;
	margin-right: 0;
}

.margin-left-right-0-25-rem {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.margin-left-right-0-5-rem {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.margin-left-right-1-rem {
	margin-left: 1rem;
	margin-right: 1rem;
}

.margin-0-25-rem {
	margin: 0.25rem;
}

.margin-0-5-rem {
	margin: 0.5rem;
}

.margin-1-rem {
	margin: 1rem;
}

.margin-bottom-neg-1-rem {
	margin-bottom: -1rem;
}

.margin-bottom-0 {
	margin-bottom: 0;
}

.margin-bottom-0-25-rem {
	margin-bottom: 0.25rem;
}

.margin-bottom-0-5-rem {
	margin-bottom: 0.5rem;
}

.margin-bottom-1-rem {
	margin-bottom: 1rem;
}

.margin-bottom-2-rem {
	margin-bottom: 1rem;
}

.margin-bottom-3-rem {
	margin-bottom: 3rem;
}

.line-height-20px {
	line-height: 20px;
}

.hint-4040 {
	width: 16px;
	height: 16px;
	border-radius: 10px;
	border: 2px solid red;
	position: absolute;
	background: rgba(255,255,255,.5);
}

.el-popover p {
	word-break: normal;
	text-align: left;
	font-size: 90%;
}

#trade-proposal-hint-1 {
	left: calc( 50% - 8px );
	top: -8px;
	z-index: 9999;
}
#trade-proposal-hint-2,
#trade-proposal-hint-4 {
	left: calc( 75% - 8px );
	bottom: -8px;
	z-index: 9999;
}
#trade-proposal-hint-3 {
	left: calc( 25% - 8px );
	z-index: 9999;
}
#trade-proposal-hint-5 {
	right: calc( 1% - 8px );
	top: -8px;
	z-index: 9999;
}
#trade-proposal-hint-6 {
	left: 8px;
	top: 0;
	z-index: 10999;
}
#trade-proposal-hint-7 {
	right: 8px;
	top: 0;
	z-index: 10999;
}
#trade-proposal-hint-8 {
	right: 0;
	top: 0;
	z-index: 9999;
}
#trade-proposal-hint-9 {
	right: 10px;
	top: 0;
	z-index: 9999;
}
#trade-proposal-hint-10 {
	right: 92px;
	top: 0;
	z-index: 9999;
}
#trade-proposal-hint-11 {
	left: 10px;
	bottom: -8px;
	z-index: 9999;
}

#gm-notes-offers.scroll-col,
#gm-notes-comparison.scroll-col {
	height: 230px;
}

.avatar-label {
	display: block;
	margin-bottom: 0.5rem;
}

.player-img-box {
	border: 1px solid silver;
	background-color: #f7f7f7;
	/*
	background: radial-gradient(circle, hsla(0, 0%, 89%, 1) 0%, hsla(211, 42%, 15%, 1) 100%);
	background: -moz-radial-gradient(circle, hsla(0, 0%, 89%, 1) 0%, hsla(211, 42%, 15%, 1) 100%);
	background: -webkit-radial-gradient(circle, hsla(0, 0%, 89%, 1) 0%, hsla(211, 42%, 15%, 1) 100%);
	*/
}

.width-100-pct {
	width: 100%;
}
.width-100-px {
	width: 100px;
}
.width-120-px {
	width: 120px;
}
.width-160-px {
	width: 160px;
}
.width-20-rem {
	width: 20rem;
}

.word-break-normal {
	word-break: normal;
}

.font-color-black {
	color: black;
}
.font-color-red {
	color: red;
}
.font-color-slategray {
	color: slategray;
}

.trade-panel-header {
	font-weight: 500;
	color: #606266;
	font-size: 115%;
	margin: 0;
	margin-bottom: 0.5rem;
}

.trade-panel-column {
	height: calc(75vh - 219px);
	padding-left: 5px;
	padding-right: 6px;
}

.trade-review-column {
	height: calc(75vh - 60px);
	padding-left: 5px;
	padding-right: 6px;
}

table.stats-history-table {
	width: 100%;
	color: #606266;
	border-collapse:collapse;
}
table.stats-history-table thead {
	color: #909399;
	font-weight: 500;
}
table.stats-history-table thead tr th {
	text-align: left;
	font-weight: 500;
	font-size: 12px;
	border-bottom: 1px solid #ebeef5;
	padding-left: 10px;
	padding: 6px 0;
	padding-right: 10px;
}
table.stats-history-table tbody tr td {
	background-color: #fff;
	border-bottom: 1px solid #ebeef5;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 23px;
	min-width: 0;
	-moz-user-select: none;
	-ms-user-select: none;
	overflow: hidden;
	padding-left: 10px;
	padding: 6px 0;
	padding-right: 10px;
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	user-select: none;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-webkit-user-select: none;
	white-space: normal;
}
table.stats-history-table tr {
	background-color: #fff;
}

table.stats-history-table tbody tr.footer-tr {
	border-top: 2px solid #182738;
}
table.stats-history-table tbody tr.footer-tr td {
	border-top: none;
	border-bottom: none;
	color: #182738;
}



table.stats td {
	text-align: center;
}
.stats h2 {
	margin: 0;

}

span.color-chip-4040 {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid black;
}

table.padded-table th,
table.padded-table td {
	padding: 1rem;
}

table.line-items-table {
	border-collapse: collapse;
}

table.line-items-table thead th {
	border-bottom: 1px solid black;
}

table.line-items-table tfoot td {
	border-top: 1px solid black;
}

.width-20-pct {
	width: 20%;
}

.soften-4040 {
	color: #606266;
}

.min-height-10-px {
	min-height: 10px;
}
.min-height-105-px {
	min-height: 105px;
}
.min-height-350-px {
	min-height: 350px;
}
.min-height-600-px {
	min-height: 600px;
}
.min-height-700-px {
	min-height: 700px;
}
.min-height-50vh {
	min-height: 50vh;
}

.button-cloud-4040 button {
	margin: 0.5rem;
}

.el-button--mini.button-tiny-4040,
.el-button--mini.is-round.button-tiny-4040 {
	padding: 5px 10px;
	font-size: 10px;
}

.numeric-input-4040 {
	width: 4rem;
}

div.modal-loader {
	z-index: 999;
	background-color: white;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	position: absolute !important;
}


[v-cloak] {
	display: none;
}

.hide-this {
	display: none;
}

div.defending-champs {
	border-top: 2px solid #182738;
	border-bottom: 2px solid #182738;
	background: repeating-conic-gradient(from 7.437764606265877deg at center 300px, rgba(210, 163, 90, 0.5) 0deg 15deg, rgba(232, 184, 126, 0) 15deg 30deg);
	background-color: #e8b87e;
}

div.defending-champs div.left-content {
	display: flex;
	align-items: right;
	justify-content: right;
}
div.defending-champs div.right-content {
	display: flex;
	align-items: left;
	justify-content: left;
}


/*
	element-ui mods
*/

/* makes the nav menu lower profile by removing 20px of height */
.el-menu--horizontal.small-4040 > .el-submenu .el-submenu__title {
	height: 40px;
	line-height: 40px;
}
.el-menu--horizontal.small-4040 > .el-menu-item {
	height: 40px;
	line-height: 40px;
}

.el-avatar > img {
	display: block;
	height: 100%;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
}

.box-card.el-card {
	margin-bottom: 0.5rem;
}
.box-card.el-card .el-card__header {
	padding: 10px;
}
.box-card.el-card .el-card__body {
	padding: 10px;
}

div.el-card[type=danger] {
	background: rgb(253, 226, 226);
}
div.el-card[type=danger] > .el-card__header {
	background: rgb(245, 108, 108);
	color: white;
	font-weight: bold;
}

i.blank {
	width: 12px;
	height: 12px;
	display: inline-block;
}



.white-text {
	color: white;
}

.white-bg {
	background-color: white;
}

.cursor-pointer {
	cursor: pointer;
}


/* header */
#header-bar .top-bar {
	height: 5rem;
}

#header-bar .top-bar,
#header-bar .top-bar ul {
	background: none;
}

#header-bar div.top-bar-left > ul > li > a,
#header-bar div.top-bar-right > ul > li > a {
	color: white;
}

#header-bar .site-name {
	font-family: Helvetica Neue, sans-serif;
	font-weight: bold;
	font-size: 125%;
	color: white;
	padding: 0.5rem;
}

#header-bar li.mega-menu a i.bx.bxs-down-arrow {
	margin-top: 0.6rem;
	font-size: 75%;
}

#header-logo {
	width: 100%;
	z-index: 1;
	position: absolute;
	top: 0.5rem;
	height: 1px;
	overflow-y: visible;
	display: block;
}
/* END header */



/*
	special headers
*/
span.team-header-name {
	font-size: 1.5rem;
	padding: 0.75rem;
	cursor: pointer;
}
span.team-header-name b {
	text-transform: uppercase;
}
span.team-info-bar {
	padding-left: 0.75rem;
	font-size: 85%;
	display: inline-block;
}
span.team-link-bar {
	padding: 0.75rem;
	padding-bottom: 0;
}
span.team-link-bar a,
span.team-link-bar span.nav-sub-menu-4040-wrapper {
	margin-bottom: 0;
	margin-right: 0.75rem;
	display: inline-block;
	font-size: 90%;
}
span.team-link-bar a.active-link {
	border-bottom: 3px red solid;
}

div.text-right span.nav-sub-menu-4040-wrapper:last-child {
	margin-right: 0;
}

table.glossary td {
	vertical-align: top;
}
table.glossary tr td:first-child {
	font-weight: bold;
	font-style: italic;
}


/*
	up-down graph
*/
div.up-down-graph > div {
	font-size: 125%;
}
div.record-w {
	font-weight: bold;
	color: green;
	padding: 0;
	padding-bottom: 1rem;
}
div.record-l {
	font-weight: bold;
	color: red;
	padding: 0;
	padding-top: 1rem;
}


/*
	mega-menu
	from https://get.foundation/building-blocks/blocks/topbar-mega-menu-dropdown.html
*/
.mega-menu .dropdown-pane {
	width: 100%;
	max-width: 85rem;
	margin: 0 auto !important;
	left: 0% !important;
	right: 0% !important;
}

.mega-menu .menu {
	background: none;
}

.mega-menu-BLOCK > a::after {
	display: block;
	width: 0;
	height: 0;
	border: inset 6px;
	content: '';
	border-bottom-width: 0;
	border-top-style: solid;
	border-color: white transparent transparent;
	margin-left: 10px;
	margin-top: 11%;
}
/*
	END mega-menu
*/


.jump-nav {
	background-color: #182738;
}

.jump-nav.el-popper {
	border: 1px solid #182738;
}

.jump-nav.el-popper[x-placement^=bottom] .popper__arrow::after {
	border-bottom-color: #182738;
}


/*
	page content
*/
.page-content .callout {
	border-radius: 1rem;
}

span.team-link-bar a.margin-right-0,
.margin-right-0 {
	margin-right: 0;
}

/*
	drop down menu
*/
span.nav-sub-menu-4040-wrapper {
	position: relative;
}
span.nav-sub-menu-4040-wrapper a {
	margin-right: 0;
}
span.nav-sub-menu-4040-wrapper div.nav-sub-menu-4040 {
	background-color: white;
	border: 1px solid black;
	display: none;
	left: 0;
	padding: 0.5rem;
	position: absolute;
	text-align: left;
	top: 1rem;
	white-space: nowrap;
	z-index: 10;
}
.text-right span.nav-sub-menu-4040-wrapper div.nav-sub-menu-4040 {
	left: unset;
	right: 0;
}
span.nav-sub-menu-4040-wrapper div.nav-sub-menu-4040 a {
	display: block;
}
span.nav-sub-menu-4040-wrapper:hover div.nav-sub-menu-4040 {
	display: block;
}

.post-season-starters .game-tile {
	width: 9%;
	text-align: center;
	padding: 0.25rem;
	border: 0.25px solid silver;
	border-radius: 3px;
	font-size: 85%;
}
.post-season-starters .game-tile .game-header {
	margin-bottom: 0.25rem;
	font-weight: 500;
}
.post-season-starters .game-tile .game-opp {
	font-size: 75%;
	margin-bottom: 0.25rem;
}
.post-season-starters .game-tile .game-pitcher {

}

/*
	select style menu
*/
span.select-menu-4040-wrapper {
	position: relative;
}
span.select-menu-4040-wrapper div.select-menu-4040 {
	display: none;
	white-space: nowrap;
	padding: 0.5rem;
	border: 1px solid black;
}
span.select-menu-4040-wrapper div.select-menu-4040 a {
	display: block;
}
span.select-menu-4040-wrapper:hover div.select-menu-4040 {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background-color: white;
	z-index: 10;
}

.el-select:not(.width-100-pct) .el-input {
	width: 110px;
}

.input-with-select .el-input-group__prepend {
	background-color: #fff;
}

.border-right-2-transparent {
	border-right: 2px solid rgba(255,255,255,0.25);
}

.opacity-0-35 {
	opacity: 0.25;
}
.opacity-0-5 {
	opacity: 0.50;
}

#mobile-menu-4040 {
	background-color: #545c64;
	color: #ffffff;
}

#desktopUserMenu,
#desktopMenu {
	margin-top: 5rem;
	overflow-x: hidden;
}

#desktopUserMenu h1,
#desktopUserMenu h2,
#desktopUserMenu h3,
#desktopUserMenu h4,
#desktopUserMenu h5,
#desktopUserMenu h6,
#desktopMenu h1,
#desktopMenu h2,
#desktopMenu h3,
#desktopMenu h4,
#desktopMenu h5,
#desktopMenu h6 {
	font-weight: normal;
}

.jump-nav .el-menu,
#mobileUserMenu .el-menu,
#mobileMenu .el-menu,
#desktopUserMenu .el-menu,
#desktopMenu .el-menu {
	border-right: none;
	border-left: none;
	background-color: transparent;
}

#desktopUserMenu .el-drawer__body,
#desktopMenu .el-drawer__body {
	overflow-x: hidden;
}

.jump-nav .el-menu-item,
#mobileUserMenu .el-menu-item,
#mobileMenu .el-menu-item,
#desktopUserMenu .el-menu-item,
#desktopMenu .el-menu-item {
	color: white;
}

.jump-nav .el-menu-item a,
.jump-nav .el-menu-item a:visited,
.jump-nav .el-menu-item a:active,
.jump-nav .el-menu-item a:hover,
#mobileUserMenu .el-menu-item a,
#mobileMenu .el-menu-item a,
#desktopUserMenu .el-menu-item a,
#desktopMenu .el-menu-item a,
#mobileUserMenu .el-menu-item a:visited,
#mobileMenu .el-menu-item a:visited,
#desktopUserMenu .el-menu-item a:visited,
#desktopMenu .el-menu-item a:visited,
#mobileUserMenu .el-menu-item a:active,
#mobileMenu .el-menu-item a:active,
#desktopUserMenu .el-menu-item a:active,
#desktopMenu .el-menu-item a:active {
	color: white;
	text-decoration: none;
}

.jump-nav .el-submenu__title:hover,
.jump-nav .el-menu-item:hover,
#mobileUserMenu .el-submenu__title:hover,
#mobileMenu .el-submenu__title:hover,
#mobileUserMenu .el-menu-item:hover,
#mobileMenu .el-menu-item:hover,
#desktopUserMenu .el-menu-item:hover,
#desktopMenu .el-menu-item:hover {
	background-color: transparent; /* rgba(255,255,255,0.125); */
}

.jump-nav .el-link.is-underline:hover:after,
#mobileUserMenu .el-link.is-underline:hover:after,
#mobileMenu .el-link.is-underline:hover:after,
#desktopUserMenu .el-link.is-underline:hover:after,
#desktopMenu .el-link.is-underline:hover:after {
	border-bottom: none;
}

.jump-nav .el-link:hover span.el-link--inner,
#mobileUserMenu .el-link:hover span.el-link--inner,
#mobileMenu .el-link:hover span.el-link--inner,
#desktopUserMenu .el-link:hover span.el-link--inner,
#desktopMenu .el-link:hover span.el-link--inner {
	padding-left: 1rem;
	border-left: 3px solid white;
}

.jump-nav .el-menu-item:focus,
#mobileUserMenu .el-menu-item:focus,
#mobileMenu .el-menu-item:focus,
#desktopUserMenu .el-menu-item:focus,
#desktopMenu .el-menu-item:focus {
	background-color: transparent;
}



.jump-nav .el-menu-item,
.mega-menu-4040 .el-menu-item,
.mega-menu-4040 .el-submenu__title {
	height: 40px;
	line-height: 40px;
}

.group-title-4040 {
	font-weight: bold;
	color: white;
}

.col-2-menu-fix {
	padding-left: 0 !important;
	padding-right: 30px !important;
}

.team-menu-4040.el-menu-item {
	height: auto;
}

.jump-nav .el-menu-item,
.team-menu-4040.el-menu-item,
.team-menu-4040.el-menu-item a,
.team-menu-4040.el-menu-item span {
	line-height: normal;
}

.jump-nav .el-menu-item span,
.team-menu-4040.el-menu-item span {
	display: block;
}

.border-thin-silver {
	border: 1px solid silver;
}

.border-bottom-thin-silver {
	border-bottom: 1px solid silver;
}

.border-top-thin-silver {
	border-top: 1px solid silver;
}

.border-right-thin-silver {
	border-right: 1px solid silver;
}

.pct-20-4040 {
	width: 20%;
	float: left;
}

.font-75-pct {
	font-size: 75%;
}

.font-85-pct {
	font-size: 85%;
}

.font-90-pct {
	font-size: 90%;
}

.font-115-pct {
	font-size: 115%;
}

.font-weight-400 {
	font-weight: 400;
}

.mobile-game-results {
	font-size: 85%;
}

.mobile-game-results .el-col {
	padding: 3px;
}

.mobile-game-results .el-button {
	padding: 12px 6px;
	font-size: 12px;
}

.mobile-game-results .el-button+.el-button {
	margin-left: 0;
}

.gm-notes-drawer {
	background-color: rgb(245, 245, 245);
	border: #182738 solid 1px;
	border-top: #182738 solid 5px;
	z-index: 10000;
	box-shadow: 0px -1px 1px rgba(3, 7, 18, 0.02),
	0px -5px 4px rgba(3, 7, 18, 0.03),
	0px -11px 9px rgba(3, 7, 18, 0.05),
	0px -19px 15px rgba(3, 7, 18, 0.06),
	0px -30px 24px rgba(3, 7, 18, 0.08);

	position: absolute;
	height: 31.11vh;
	left: calc( 50% + 10px );
	right: 10px;
	top: 92.89vh;

	transition: transform 0.5s ease-out;
}

.gm-notes-drawer.show-gm-notes-drawer {
	transform: translateY(-63.75vh);
}

.gm-trade-drawer {
	background-color: rgb(245, 245, 245);
	border: #182738 solid 1px;
	border-top: #182738 solid 5px;
	z-index: 10000;
	box-shadow: 0px -1px 1px rgba(3, 7, 18, 0.02),
	0px -5px 4px rgba(3, 7, 18, 0.03),
	0px -11px 9px rgba(3, 7, 18, 0.05),
	0px -19px 15px rgba(3, 7, 18, 0.06),
	0px -30px 24px rgba(3, 7, 18, 0.08);

	position: absolute;
	height: 31.11vh;
	left: 10px;
	right: 10px;
	top: 92.89vh;

	transition: transform 0.5s ease-out;
}

.gm-trade-drawer.show-gm-trade-drawer {
	transform: translateY(-63.75vh);
}

.winner-block {
	color: white;
	background-color: black;
	font-weight: bold;
	border-radius: 3px;
	padding-left: 2px;
	padding-right: 2px;
}

.button-block {
	color: white;
	background-color: rgba(0,0,0,0.75);
	font-weight: bold;
	border-radius: 5px;
	padding-left: 3px;
	padding-right: 3px;
}

#chat-action-bar {
	height: 40px;
}

/*
.chat-window-4040 {
	height: 65vh;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0.75rem;
}
*/

#chat-contacts-4040 {
	height: 639px;
	overflow-y: scroll;
	border-left: 1px solid silver;
	border-right: 1px solid silver;
}

.chat-author-them {
	margin-left: 0;
	margin-right: 3rem;
}

.chat-4040-body {
	font-size: 85%;
}

.chat-mangled-alert {
	font-size: 75%;
	color: red;
}

.chat-4040 {
	padding: 8px 16px;
	background-color: #ecf8ff;
	border-radius: 4px;
	border-right: 5px solid #409EFF;
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}

.chat-4040.chat-author-them {
	padding: 8px 16px;
	background-color: rgb(240, 249, 235);
	border-radius: 4px;
	border-left: 5px solid #67C23A;
	margin: 20px 0;
	border-right: none;
}

.chat-message-input-4040 textarea.el-textarea__inner {
	background-color: rgba(0,0,0,0);
	border: none;
	color: white;
}

.chat-bg-4040 {
	background-color: #409EFF;
}

.chat-modal-4040-outline {
	border: 1px solid silver;
}

.mobile-chat-button {
	background-color: rgba( 0,0,0,0.0625 );
	padding-bottom: 10px;
	border-radius: 1rem;
	margin-top: 10px;
}

.height-30-px {
	height: 30px;
}

.height-40-px {
	height: 40px;
}

.height-60-px {
	height: 60px;
}

.height-100-px {
	height: 100px;
}

.height-auto {
	height: auto;
}

.el-collapse-item-title-auto-height .el-collapse-item__header {
	height: auto;
}

.el-collapse-item-title-auto-height .el-collapse-item__header p {
	margin: 0.25rem;
	margin-top: 0.5rem;
	margin-left: 0.5rem;
	line-height: 2;
}

.mobile-trade-ui .el-collapse-item__content {
	min-height: calc(100vh - 340px);
	max-height: calc(100vh - 340px);
}

#desktop-chat-wrapper-4040 {
	height: 75vh;
}

#mobile-chat-wrapper-4040 {
	height: 87vh;
}

#desktop-chat-wrapper-4040 .chat-contacts-4040 {
	height: calc(75vh - 61px);
}

#desktop-chat-wrapper-4040 .chat-contacts-4040 .chat-contacts-list-4040 {
	height: calc(75vh - 122px);
	overflow-y: scroll;
	overflow-x: hidden;
}

#desktop-chat-wrapper-4040 .chat-window-4040 {
	height: calc(75vh - 60px);
}

#desktop-chat-wrapper-4040 .chat-window-4040 .chat-messages-4040 {
	height: calc(75vh - 272px);
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0.75rem;
}

#mobile-chat-wrapper-4040 .chat-messages-4040 {
	height: calc(100vh - 260px);
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0.75rem;
	background-color: white;
}

#desktop-chat-wrapper-4040 .chat-window-4040 .chat-new-message-4040 {
	height: 170px;
	padding: 0.75rem;
	background-color: #409EFF;
}

#mobile-chat-wrapper-4040 .chat-new-message-4040 {
	height: 170px;
	padding: 0.75rem;
	background-color: #409EFF;
}

#desktop-chat-wrapper-4040 .chat-window-4040 .chat-new-message-4040 textarea {
	min-height: 42px;
}

#desktop-footer-bar .el-divider--horizontal,
#mobile-footer-bar .el-divider--horizontal {
	margin: 0;
}
#mobile-footer-bar {
	font-size: 75%;
}

.no-padding-dialog-body .el-dialog__body {
	padding: 0;
}

.el-dialog.is-fullscreen .el-dialog__header {
	height: 30px;
	padding: 0;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

.el-dialog__body {
	word-break: normal;
}

.el-table .cell {
	word-break: normal;
	overflow-wrap: break-word;
}


.action-column-4040 {
	width: 0;
	text-align: center;
	display: none;
}
.action-column-4040 label,
.action-column-4040 .el-select.el-select--mini {
	margin-top: 30px;
}
.check-box-wrapper .el-checkbox__inner,
.action-column-4040 .el-checkbox__inner,
.action-column-4040-mobile .el-checkbox__inner {
	width: 28px;
	height: 28px;
}
.check-box-wrapper .el-checkbox__inner::after,
.action-column-4040 .el-checkbox__inner::after,
.action-column-4040-mobile .el-checkbox__inner::after {
	height: 14px;
	left: 10px;
	top: 3px;
	width: 5px;
}
.action-column-4040 .el-input.el-input--mini.el-input--suffix {
	width: 75px;
}
.avatar-column-4040 {
	width: 120px;
	text-align: center;
}
.lineup-slot-column-4040,
.lineup-pos-column-4040 {
	width: 100px;
}
.rotation-pos-column-4040 {
	width: 140px;
	text-align: right;
	float: right;
}
.margin-top-10px {
	margin-top: 10px;
}
.position-column-4040 {
	width: 50px;
	text-align: right;
	padding-top: 2rem;
}
.position-column-4040 h3 {
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 0.25rem;
}
.position-column-4040 p {
	font-size: 80%;
	margin: 0;
}
.profile-column-4040 {
	width: calc(100% - 130px);
}
.player-row.show-actions .profile-column-4040 {
	/* we need to allow an extra 40 px for the action checkbox */
	width: calc(100% - 170px);
}
.player-row.show-rosters .profile-column-4040 {
	/* we need to allow an extra 80 px for the roster menu column */
	width: calc(100% - 210px);
}
.player-row.show-lineup .profile-column-4040 {
	/* we need to allow an extra 200 px for the lineup columns */
	width: calc(100% - 320px);
	padding-right: 1rem !important;
}
.player-row.show-rotation .profile-column-4040 {
	/* we need to allow an extra 140 px for the rotation markers */
	width: calc(100% - 260px);
	padding-right: 1rem !important;
}
.profile-column-4040 h3 {
	margin-top: 0; /* 0.75rem */
	font-weight: 500;
}
.section-header-4040 {
	font-size: 50%;
	color: silver;
}
.stats-header-4040 {
	color: silver;
}
.stat-22 {
	width: 22px;
}
.stat-28 {
	width: 28px;
}
.stat-40 {
	width: 40px;
}
.stat-50 {
	width: 50px;
}
.stat-120 {
	width: 120px;
}
.stat-320 {
	width: 320px;
}

.player-row {
	border: 1px solid silver;
	padding: 1.5rem;
	padding-left: 0.75rem;
	background-color: rgba(0,0,0,0.025);
	border-radius: 0.5rem;
	margin-bottom: 0.5rem;
}
.player-row.show-actions .action-column-4040,
.el-table.show-actions .action-column-4040 {
	width: 40px;
	display: block;
}
.player-row.show-rosters .action-column-4040,
.el-table.show-rosters .action-column-4040 {
	width: 80px;
	display: block;
}
.potential-rating,
.player-row h3 small {
	color: silver;
}
.player-row .trade-controls {
	background-color: white;
	padding: 0.5rem !important;
	margin-top: 0.75rem;
	border-radius: 5px;
}
.player-row .trade-controls .always-show-ctrl {
	width: 28px;
	height: 28px;
	font-size: 190%;
}
.player-row .trade-controls .subsidy-box .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
	padding-top: 0;
	padding-bottom: 0;
}
.player-row .trade-controls .subsidy-box .el-descriptions-item__cell.el-descriptions-item__content {
	padding: 0;
}


.action-panel-mobile {
	border: 1px solid #182738;
	border-radius: 3px;
	margin-bottom: 0.5rem;
	background-color: rgba(0,0,0,0.05);
	padding: 0.5rem;
	border-radius: 10px;
}

.action-panel-mobile .potential-rating {
	color: #182738;
}

.mobile-overview {
	font-size: 50%;
	margin-top: 0;
	margin-bottom: 1rem;
}

.font-size-115-pct > .el-link {
	font-size: 115%;
}

#contractDialog .el-select .el-input {
	width: 100%;
}

#contractDialog .el-radio.is-bordered+.el-radio.is-bordered {
	margin: 0;
}

.el-tabs__item .tab-label-badge {
	line-height: 1.10rem;
}

.el-descriptions__header {
	margin-bottom: 0.35rem;
}

.box-card.el-card.margin-bottom-1-rem {
	margin-bottom: 1rem;
}

#team-trades-section .box-card.el-card .el-card__header {
	background-color: hsl(210.52, 0%, 41.18%);
	color: rgb(244, 240, 233);
}

div.team-header-block {
	padding: 0.5rem;
	border-radius: 5px;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.proposal-collapse .el-collapse-item__content {
	padding: 0.5rem;
	padding-bottom: 0.5rem;
}

.trade-details-dialog .el-dialog .el-dialog__header {
	border-bottom: 1px solid silver;
}

.trade-details-dialog .el-dialog.is-fullscreen .el-dialog__header {
	height: 50px;
	padding: 0;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	color: whitesmoke;
	background-color: #182738;
}

.trade-proposal-wrapper-4040 {
	height: 75vh;
}

.trade-proposal-wrapper-4040 .proposal-info-4040 {
	height: calc(75vh - 60px);
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0.75rem;
	padding-top: 0;
}

.trade-proposal-wrapper-4040 .proposal-actions-4040 {
	height: 60px;
	padding: 0;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	background-color: #f7f7f7;
	border-top: 1px silver solid;
}

.msg-box-width {
	width: 400px;
}

.el-notification__content {
	text-align: left;
}

.pair-divider {
	display: block;
	clear: both;
}

.el-dialog__wrapper.ws-modal {
	z-index: 99998 !important;
}
.el-dialog__wrapper.ws-modal h1 {
	color: #e8b87e;
	font-size: 400%;
	text-transform: uppercase;
	margin-top: 0;
}
.el-dialog__wrapper.ws-modal .el-dialog {
	background: none;
	box-shadow: none;
}
.el-dialog__wrapper.ws-modal .el-dialog__header {
	display: none;
}

body.currently-celebrating div.v-modal {
	background: none;
}

.trade-partner-tile {
	padding: 0.5rem;
	border-radius: 0.5rem;
	border: 1px solid silver;
	margin-bottom: 1rem;
	margin-left: 0.25rem;
	margin-right: 0.25rem;
	color: white;
	cursor: pointer;
}

.trade-partner-tile.conflicted,
.trade-partner-tile.exclude {
	background-color: rgb(237, 237, 237);
	color: black;
	opacity: 0.5;
	cursor: not-allowed;
}

.trade-partner-tile h2.team-abbr {
	padding: 0;
	background-color: black;
	width: 70px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0.25rem;
	border: 5px solid white;
	border-radius: 4px;
}

.trade-partner-tile p.team-info {
	padding: 0;
	margin-top: 0;
	margin-bottom: 0.25rem;
	padding-bottom: 0;
	font-size: 90%;
}

.trade-partner-tile dev.details-grid {
	font-size: 85%;
	margin-top: 0.5rem;
}


.trade-proposal-wrapper-4040 .filter-well {
	border: 1px solid silver;
	padding: 0.25rem;
	margin: 0;
	margin-bottom: 0.5rem;
}
.trade-proposal-wrapper-4040 .filter-well .placeholder-box .bx,
.trade-proposal-wrapper-4040 .filter-well .placeholder-box .placeholder {
	font-size: 125%;
	color: silver;
}
.trade-proposal-wrapper-4040 .filter-well p.label-size {
	color: silver;
	margin: 0;
	font-size: 65%;
}
.trade-proposal-wrapper-4040 .filter-well h3,
.trade-proposal-wrapper-4040 .filter-well p {
	margin: 0;
}

.trade-proposal-wrapper-4040 .filter-well .el-radio {
	margin-right: 0.5rem;
}
.trade-proposal-wrapper-4040 .filter-well .el-radio__label {
	padding-left: 0.25rem;
}
.trade-proposal-wrapper-4040 .filter-well .el-slider {
	width: calc(100% - 20px);
	margin-left: auto;
	margin-right: auto;
}
.trade-proposal-wrapper-4040 .filter-well .el-slider__marks-text {
	font-size: 85%;
	margin-top: 10px;
}
.trade-proposal-wrapper-4040 .filter-well .el-checkbox .el-checkbox__label {
	font-size: 85%;
	font-weight: normal;
	opacity: 0.80;
	padding-left: 0.25rem;
}
.trade-proposal-wrapper-4040 .filter-well .el-select .el-select__tags {
	max-width: 100%;
}
.trade-proposal-wrapper-4040 .filter-well .el-select .el-input.el-input--suffix {
	max-width: 100%;
	width: 100%;
}



/* special trade partner selection break points */
.show-1650-and-down {
	display: none;
}
@media only screen and (max-width: 1650px) {

	.hidden-1650-and-down {
		display: none;
	}
	.show-1650-and-down {
		display: unset;
	}
}
@media only screen and (max-width: 1300px) {

	.hidden-1300-and-down {
		display: none;
	}
}
.show-1270-and-down {
	display: none;
}
@media only screen and (max-width: 1270px) {

	.hidden-1270-and-down {
		display: none;
	}

	.show-1270-and-down {
		display: unset;
	}

}
@media only screen and (max-width: 1750px) {

	/*
		used to force a stat columns to wrap on a narrower screen
	*/
	.trade-proposal-wrapper-4040 .proposal-info-4040 .hitter-stats-4040,
	.trade-proposal-wrapper-4040 .proposal-info-4040 .pitcher-stats-4040 {
		flex-wrap: wrap;
	}
	.trade-proposal-wrapper-4040 .proposal-info-4040 .hitter-stats-4040 .text-center {
		flex-basis: 12%;
		text-align: left;
	}
	.trade-proposal-wrapper-4040 .proposal-info-4040 .pitcher-stats-4040 .text-center {
		flex-basis: 10%;
		text-align: left;
	}

}


/* some special large-screen classes */
@media only screen and (min-width: 769px) {

	.desktop-padding-1rem {
		padding: 1rem;
	}

}


/* on smaller screens there are some changes */
@media only screen and (max-width: 768px) {

	.trade-proposal-wrapper-4040 {
		height: 87vh;
	}

	.trade-proposal-wrapper-4040 .proposal-info-4040 {
		height: calc(100vh - 130px);
		overflow-y: scroll;
		overflow-x: hidden;
		padding: 1.25rem;
		padding-top: 0;
		background-color: white;
	}

	.trade-panel-column {
		height: calc(75vh - 157px);
		padding-left: 5px;
		padding-right: 6px;
	}

	.gm-notes-drawer {
		position: absolute;
		height: 34.11330049vh;
		left: 5px;
		right: 5px;
		top: 89.89vh;
	}

	.gm-notes-drawer.show-gm-notes-drawer {
		transform: translateY(-50.89vh);
	}

	#gm-notes-offers.scroll-col,
	#gm-notes-comparison.scroll-col {
		height: 191px;
	}


	td.hide-from-mobile,
	th.hide-from-mobile {
		display: none;
	}

	.lineup-slot-column-4040,
	.lineup-pos-column-4040 {
		width: 40px;
	}

	.text-ginormous {
		font-size: 200%;
	}

	.el-main.page-bar-4040 {
		padding: 0;
	}

	.logo-box img {
		width: 70px;
	}

	.mobile-margin-bottom-0-25-rem {
		margin-bottom: 0.25rem;
	}

	.mobile-margin-bottom-0-5-rem {
		margin-bottom: 0.5rem;
	}

	.mobile-margin-bottom-1-5-rem {
		margin-bottom: 1.5rem;
	}

	.menu-logo-box img {
		width: 50px;
	}

	.top-bar .main-title.site-title {
		padding-top: 1.25rem;
		font-size: 12px
	}

	.profile-column-4040 {
		width: 100%;
	}

	.player-row {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		padding-bottom: 0.75rem;
		padding-top: 0.75rem;
	}

	.player-row h3 {
		margin-top: 0;
		margin-bottom: 0;
	}

	.player-row.show-actions .profile-column-4040 {
		/* we need to allow an extra 40 px for the action checkbox */
		width: 100%;
	}
	.player-row.show-rosters .profile-column-4040 {
		/* we need to allow an extra 80 px for the roster menu column */
		width: 100%
	}
	.player-row.show-lineup .profile-column-4040 {
		/* we need to allow an extra 90 px for the lineup columns */
		width: 100%;
		padding-right: 5px !important;
	}
	.player-row.show-rotation .profile-column-4040 {
		width: 100%;
		padding-right: 5px !important;
	}

	.potential-rating,
	.font-size-14-px {
		font-size: 14px;
	}

	.data-box-wrapper {
		border: 1px solid rgba(0, 0, 0, .12);
		background-color: rgba(0, 0, 0, .06);
	}

	.profile-section {
		border-top: 1px solid rgba(0, 0, 0, .12);
		border-bottom: 1px solid rgba(0, 0, 0, .12);
		background-color: rgba(255, 255, 255, .9);
		padding: 0.25rem;
	}

	.msg-box-width {
		width: 90%;
	}

	#trade-partner-accordion .el-collapse-item.is-active .el-collapse-item__content {
		padding-bottom: 0;
	}

}

/* <player-tag> - see player-utils.js */
.player-tag-4040 {
	display: inline-block;
}

.player-tag-label-4040 {
	margin-left: 0.35rem;
}

.el-table__cell .el-tag {
	margin-right: 0.25rem;
}

/*
	=========================================================================
	APPEND TO: pages/css/4040.css
	=========================================================================
	Draft plan tab -- replaces the per-page <style> block that lived in
	old/pages/draft-plan.asp ( .list-item, .item-content, .divider-content,
	.label-content, .ghost, .flip-list ).

	The Element UI card and button styling carries most of what the old
	rules did by hand, so this is only what el-card does not cover:
	the drag affordances, the dark divider bar, and the stat strip.
	=========================================================================
*/

.draft-plan-item {
	position: relative;
	width: 100%;
	margin-bottom: 0.5rem;
	cursor: grab;
}
.draft-plan-item:active {
	cursor: grabbing;
}

.draft-plan-card {
	border-left: 3px solid #dcdfe6;
}
.draft-plan-card:hover {
	border-left-color: #409eff;
}

.draft-plan-divider {
	min-height: 3rem;
	line-height: 3rem;
	padding: 0 0.9rem;
	border-radius: 4px;
	background-color: #182738;
	color: white;
	font-weight: 500;
}
.draft-plan-divider .draft-plan-divider-input {
	max-width: 50%;
	display: inline-block;
	vertical-align: middle;
}
.draft-plan-divider .draft-plan-divider-button {
	color: white;
	font-size: 115%;
	vertical-align: middle;
}
.draft-plan-divider .draft-plan-divider-button:hover {
	color: #a0cfff;
}

/* the compact stat strip that replaced the per-row <table> */
.draft-plan-stat {
	display: inline-block;
	margin-right: 0.75rem;
	white-space: nowrap;
	font-size: 85%;
	line-height: 1.6;
}
.draft-plan-stat-label {
	color: silver;
	margin-right: 0.2rem;
}

/* sortablejs drop target, named by dragOptions.ghostClass */
.draft-plan-ghost .draft-plan-card,
.draft-plan-ghost .draft-plan-divider {
	opacity: 0.4;
	background-color: #ecf5ff;
}

.flip-list-move {
	transition: transform 0.4s;
}


/*
	=========================================================================
	APPEND TO: pages/css/4040.css
	=========================================================================
	Draft plan tab -- replaces the per-page <style> block that lived in
	old/pages/draft-plan.asp ( .list-item, .item-content, .divider-content,
	.label-content, .ghost, .flip-list ).

	The Element UI card and button styling carries most of what the old
	rules did by hand, so this is only what el-card does not cover:
	the drag affordances, the dark divider bar, and the stat strip.
	=========================================================================
*/

.draft-plan-item {
	position: relative;
	width: 100%;
	margin-bottom: 0.5rem;
	cursor: grab;
}
.draft-plan-item:active {
	cursor: grabbing;
}

.draft-plan-card {
	border-left: 3px solid #dcdfe6;
}
.draft-plan-card:hover {
	border-left-color: #409eff;
}

.draft-plan-divider {
	min-height: 3rem;
	line-height: 3rem;
	padding: 0 0.9rem;
	border-radius: 4px;
	background-color: #182738;
	color: white;
	font-weight: 500;
}
.draft-plan-divider .draft-plan-divider-input {
	max-width: 50%;
	display: inline-block;
	vertical-align: middle;
}
.draft-plan-divider .draft-plan-divider-button {
	color: white;
	font-size: 115%;
	vertical-align: middle;
}
.draft-plan-divider .draft-plan-divider-button:hover {
	color: #a0cfff;
}

/* the compact stat strip that replaced the per-row <table> */
.draft-plan-stat {
	display: inline-block;
	margin-right: 0.75rem;
	white-space: nowrap;
	font-size: 85%;
	line-height: 1.6;
}
.draft-plan-stat-label {
	color: silver;
	margin-right: 0.2rem;
}

/* sortablejs drop target, named by dragOptions.ghostClass */
.draft-plan-ghost .draft-plan-card,
.draft-plan-ghost .draft-plan-divider {
	opacity: 0.4;
	background-color: #ecf5ff;
}

.flip-list-move {
	transition: transform 0.4s;
}


/*
	=========================================================================
	Scouting report -- column headers and filter popovers

	element renders each header cell as:

		div.cell
			"Label"                (bare text node, or our header slot)
			span.caret-wrapper     (when sortable)

	.cell ships with white-space: normal plus word-break: break-all, which
	is what lets the sort arrows drop onto their own line behind a long
	label. The rules below hold the label and arrows on one line, then
	centre our filter trigger on a second line beneath them.

	Scoped to .scouting-table-4040 -- 4040.css is shared, so unscoped
	.el-table rules would reach every table on the site.
	=========================================================================
*/

/*
	Header cell layout.

	element appends its .caret-wrapper AFTER whatever the header slot
	renders, so source order in .cell is: our label, our filter, then the
	sort arrows -- three stacked lines. Flex with explicit order puts them
	back where they belong without touching element's markup: label and
	arrows share line one, the filter takes line two on its own.
*/
.scouting-table-4040 th.el-table__cell > .cell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	white-space: nowrap;
	word-break: keep-all;
}

.scouting-table-4040 th.el-table__cell > .cell .column-label-4040 {
	order: 1;
	font-weight: 600;
	line-height: 1.3;
}
.scouting-table-4040 th.el-table__cell > .cell .caret-wrapper {
	order: 2;
}
.scouting-table-4040 th.el-table__cell > .cell .column-filter-4040 {
	order: 3;
	flex: 0 0 100%;
	text-align: center;
	margin-top: 0.1rem;
	line-height: 1;
	font-weight: 400;
}

.scouting-table-4040 .column-filter-trigger-4040 {
	display: inline-block;
	cursor: pointer;
	line-height: 1;
}
.scouting-table-4040 .column-filter-trigger-4040 .bx {
	font-size: 15px;
	color: #909399;
	vertical-align: middle;
}
.scouting-table-4040 .column-filter-trigger-4040:hover .bx {
	color: #409eff;
}
/* a column that is actively filtering says so */
.scouting-table-4040 .column-filter-trigger-4040 .bx.is-filtered {
	color: #409eff;
}

/*
	the popover is teleported to the body, so it cannot be scoped by the
	table class -- popper-class keeps these rules to our own popovers.
*/
.column-filter-popover-4040 {
	padding: 0.6rem;
}
.column-filter-popover-4040 .column-filter-group-4040 {
	display: block;
	max-height: 260px;
	overflow-y: auto;
}
.column-filter-popover-4040 .column-filter-group-4040 .el-checkbox {
	display: block;
	margin-left: 0;
	margin-bottom: 0.3rem;
	font-weight: 400;
}
.column-filter-popover-4040 .column-filter-any-4040 {
	padding: 0.15rem 0;
	margin-bottom: 0.35rem;
	border-bottom: 1px solid #ebeef5;
	cursor: pointer;
	color: #606266;
}
.column-filter-popover-4040 .column-filter-any-4040:hover {
	color: #409eff;
}
.column-filter-popover-4040 .column-filter-any-4040.is-active {
	color: #409eff;
	font-weight: 600;
}
/* keep the "and above" / "and under" label from crowding the number */
.column-filter-popover-4040 .el-input-group__append {
	padding: 0 0.6rem;
	white-space: nowrap;
}


/*
	=========================================================================
	Results text size slider
	=========================================================================
	el-slider is block level, so it needs an inline-block shell with a fixed
	width to sit beside the Clear Filters button.
*/

.text-size-control-4040 {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: 0.75rem;
	vertical-align: middle;
}
.text-size-control-4040 .bx-font-size {
	font-size: 18px;
	color: #606266;
	vertical-align: middle;
}
.text-size-control-4040 .text-size-slider-4040 {
	width: 110px;
}
/* the default slider runway leaves far too much vertical padding inline */
.text-size-control-4040 .el-slider__runway {
	margin: 10px 0;
}

/*
	=========================================================================
	APPEND TO: pages/css/4040.css
	=========================================================================
	Player search -- only what the scouting report's block does not already
	cover. The search tables carry BOTH scouting-table-4040 and
	search-table-4040: the former is doing the shared work ( header label /
	sort / filter layout, popover styling ), the latter is the hook for what
	is specific here.

	Worth renaming scouting-table-4040 to something neutral like
	filter-table-4040 once both pages are settled, and updating both pages
	plus the existing block -- it is carrying two pages now, not one.
	=========================================================================
*/

/* the rating popover stacks an Actual row above a Potential row */
.column-filter-popover-4040 .column-filter-row-4040 {
	margin-bottom: 0.5rem;
}
.column-filter-popover-4040 .column-filter-row-4040:last-child {
	margin-bottom: 0;
}
.column-filter-popover-4040 .column-filter-legend-4040 {
	display: block;
	font-size: 85%;
	line-height: 1.4;
	margin-bottom: 0.1rem;
}

/* the Misc column packs several tags into a narrow cell */
.search-table-4040 .el-tag {
	margin-right: 0.15rem;
	margin-bottom: 0.15rem;
}

/* the favourite heart sits beside the name, not as a tag */
.search-table-4040 .bxs-heart {
	margin-left: 0.25rem;
	vertical-align: middle;
}

/* Contract runs to two lines when an extension is in place */
.search-table-4040 .el-table__cell .cell > div {
	line-height: 1.35;
}


/* ==========================================================================
   Converted league pages
   --------------------------------------------------------------------------
   Everything below backs the pages ported off the old ASP site. The first
   block defines classes those pages were already referencing but that were
   never in this file; the rest replace inline style attributes that had no
   equivalent here.
   ========================================================================== */

/*
	.soften-it is used by league-career-batting.html and by every converted
	page that prints a count or a hint beside a heading, but it was not
	defined anywhere -- so all of it has been rendering at full weight. Same
	value as .soften-4040, which is what it was evidently meant to be.
*/
.soften-it {
	color: #606266;
}

.margin-bottom-0-75-rem {
	margin-bottom: 0.75rem;
}

/*
	Jump-to-round navigation on league-draft-results. The gap below the
	header comes from here rather than a computed scroll offset, because
	el-main carries overflow: auto -- the page scrolls inside that element,
	and scrollIntoView honours scroll-margin-top.
*/
.scroll-margin-top-1-rem {
	scroll-margin-top: 1rem;
}

/*
	el-card body padding. el-card takes a :body-style prop for this, but that
	is an inline style by another name, so the two paddings the converted
	pages use are classes instead. Both need the .el-card qualifier to beat
	Element's own .el-card__body rule.
*/
.el-card.card-body-padding-0-75-rem .el-card__body {
	padding: 0.75rem;
}

.el-card.card-body-padding-40-px .el-card__body {
	padding: 40px;
}

/*
	The ratings strip inside a draft-results row. Pitchers and hitters are
	rated on different things and a draft order mixes them, so each pick
	carries its own small header strip rather than the page choosing one
	column set for the table.
*/
.ratings-inline-4040 {
	width: auto;
	border-collapse: collapse;
	font-size: 0.75rem;
}

.ratings-inline-4040 th {
	padding: 0 0.4rem;
	text-align: center;
	font-weight: 600;
}

.ratings-inline-4040 td {
	padding: 0 0.4rem;
	text-align: center;
	white-space: nowrap;
}

/*
	Run totals in a playoff game line. These sit beside el-link elements,
	which carry their own font-size and vertical-align -- 14px against the
	12px a mini table gives plain cell text -- so without this the numbers
	render a size down and half a line off from the team they belong to.
*/
.game-runs-4040 {
	font-size: 14px;
	vertical-align: middle;
	font-weight: 400;
}

.game-runs-4040.is-winner {
	font-weight: 700;
}

/*
	The brick red the old pages used for a negative cash balance. Not the
	same as .font-color-red, which is pure red and reads louder than this
	ever did.
*/
.font-color-brick {
	color: #cc4b37;
}

/*
	el-link renders at 14px of its own, while a size="mini" table gives plain
	cell text 12px -- so a table whose cells mix links with prose comes out
	looking like two different sizes glued together. This lifts the whole
	table to the link's size instead, header included, so a linked player
	name and the sentence around it read as one line.
*/
.el-table.table-link-size .cell {
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Team settings: uniform designer
   Carried over from the <style> block that used to sit inside edit_team.asp.
   -------------------------------------------------------------------------- */

.uniform-preview-4040 {
	position: relative;
	background: hsla( 219, 37%, 70%, 1 );
	background: radial-gradient( circle, hsla( 219, 37%, 70%, 1 ) 31%, hsla( 219, 16%, 28%, 1 ) 86% );
	padding: 1rem 0;
}

/*
	the model, the cap, the jersey and the letter are stacked on top of one
	another, so everything after the first is absolutely positioned and the
	block needs its own height or it collapses to nothing.
*/
.uniform-preview-4040 #img-block {
	position: relative;
	width: 240px;
	height: 360px;
	margin-left: auto;
	margin-right: auto;
}

.uniform-preview-4040 #img-block img,
.uniform-preview-4040 #img-block svg,
.uniform-preview-4040 #img-block #single-letter-box {
	position: absolute;
	top: 0;
	left: 0;
}

.uniform-preview-4040 #single-letter-box {
	width: 240px;
	height: 360px;
}

/*
	a colour swatch. The old rule marked the selected one with a white border,
	which worked against that page's dark panel and would be invisible on a
	card, so the selection also carries an outline.
*/
.color-picker-4040 {
	width: 1.75rem;
	height: 1.75rem;
	display: inline-block;
	box-sizing: border-box;
	margin: 0.25rem;
	cursor: pointer;
	vertical-align: middle;
	border: 1px solid #dcdfe6;
}

.color-picker-4040.selected {
	border: 4px solid #ffffff;
	outline: 2px solid #409eff;
}

/*
	Lettering style picker: the cap letter drawn in each of the three styles,
	side by side. The letters are dark on transparent, so the tile carries a
	light background of its own rather than relying on the card behind it.
*/
.lettering-style-4040 {
	display: inline-block;
	width: 5.5rem;
	margin-right: 0.75rem;
	padding: 0.5rem;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	background-color: #f5f7fa;
	vertical-align: top;
}

/*
	the glyph inside a tile. The svg is injected rather than sourced so its
	viewBox can be recut to the letter's own bounding box -- the artwork
	carries a lot of empty space around the glyph, and cropping it is what
	lets the letter fill the tile. See trimLetterTiles in team-settings.js;
	the fill is set there too, so these stay black whatever colour the team
	picks.
*/
.lettering-style-4040 .letter-preview-4040 {
	display: block;
	width: 100%;
	height: 3.5rem;
	margin-bottom: 0.25rem;
}

.lettering-style-4040 .letter-preview-4040 svg {
	display: block;
	width: 100%;
	height: 100%;
}

.lettering-style-4040.selected {
	border-color: #409eff;
	box-shadow: 0 0 0 1px #409eff;
}



/*
	pitcher usage card ( player-profile.html )
	ported from the inline <style> in the legacy player/default.asp, scoped to .pitcher-usage-card;
	the only change is .usage-chart width: 500px -> 100% so it fits the 9-span column
*/

.pitcher-usage-card .player-overuse-box {
	background-color: white;
	border: 3px solid red;
	padding: 1rem;
	font-family: Helvetica Neue, sans-serif;
}

.pitcher-usage-card .usage-chart {
	position: relative;
	width: 100%;
}

/* ── horizontal current-usage bar: bottom half of track, left → currentUsage ── */
.pitcher-usage-card .usage-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 25%;
	background: #000;
	z-index: 2;
}

/* ── label rows ── */
.pitcher-usage-card .label-row {
	position: relative;
	height: 20px;
}

/*
	Each label: text left, arrow right.
	Positioned so its RIGHT edge (where the arrow sits) aligns with
	the marker position via transform: translateX(-100%).
*/
.pitcher-usage-card .label {
	position: absolute;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
	transform: translateX(-100%);
	line-height: 20px;
}

.pitcher-usage-card .label-arrow {
	font-size: 10px;
}

.pitcher-usage-card .label-text {
	font-size: 12px;
	font-family: Helvetica Neue, sans-serif;
}

/* ── bar ── */
.pitcher-usage-card .bar-track {
	position: relative;
	width: 100%;
	height: 28px;
	background: #111;
	display: flex;
}

.pitcher-usage-card .bar-segment {
	height: 100%;
	transition: width 0.4s ease;
}

.pitcher-usage-card .bar-segment.green  { background: #4cbb17; }
.pitcher-usage-card .bar-segment.orange { background: #f5a623; }
.pitcher-usage-card .bar-segment.red    { background: #d0021b; }

.pitcher-usage-card .usage-chart .alert-row {
	background-color: white;
	border: 2px solid orange;
	color: orange;
	padding: 0.5rem;
	font-family: Helvetica Neue, sans-serif;
	font-size: 12px;
}
.pitcher-usage-card .usage-chart .alert-row.alert-over {
	border: 2px solid red;
	color: red;
}






/* GM Notes drawer (desktop): pin to the bottom of the partner's roster column.
   The base rules position it with vh offsets against the dialog, which only lines up
   at one window height because the column itself is sized with calc(75vh - 219px). */
@media only screen and (min-width: 769px) {
	.trade-panel-wrapper {
		position: relative;
		overflow: hidden;
	}

	.trade-panel-wrapper .gm-notes-drawer {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		max-height: 100%;
		/* extra offset clears the upward box-shadow (0 -30px 24px reaches ~54px above the top edge) */
		transform: translateY(calc(100% + 60px));
	}

	.trade-panel-wrapper .gm-notes-drawer.show-gm-notes-drawer {
		transform: translateY(0);
	}

	/* let the drawer body fill the drawer's height, and the scrollable columns fill the body,
	   so taller screens get taller lists instead of empty space */
	.trade-panel-wrapper .gm-notes-drawer {
		display: flex;
		flex-direction: column;
	}

	.trade-panel-wrapper .gm-notes-body {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
	}

	.trade-panel-wrapper .gm-notes-body::before,
	.trade-panel-wrapper .gm-notes-body::after {
		display: none;
	}

	.trade-panel-wrapper .gm-notes-body > .el-col {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.trade-panel-wrapper .gm-notes-scroll {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* Review and Submit step: the trade summary and trade feedback panel are stacked siblings.
	   The wrapper has a fixed height; the summary row takes whatever the feedback panel doesn't,
	   so opening the feedback shrinks the summary (which scrolls) instead of covering it. */
	.trade-review-wrapper {
		display: flex;
		flex-direction: column;
		/* fill .proposal-info-4040 exactly: it is calc(75vh - 60px) tall with no top/bottom padding */
		height: calc(75vh - 60px);
	}

	/* trade summary row */
	.trade-review-wrapper > .el-row {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
	}

	.trade-review-wrapper > .el-row::before,
	.trade-review-wrapper > .el-row::after {
		display: none;
	}

	.trade-review-wrapper > .el-row > .el-col {
		height: 100%;
	}

	.trade-review-wrapper .trade-review-column {
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
	}

	/* trade feedback panel: in normal flow under the summary, collapsed until shown */
	.trade-review-wrapper .gm-trade-drawer {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		flex: 0 0 auto;
		box-sizing: border-box;
		height: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-width: 0;
		overflow: hidden;
		transform: none;
		transition: height 0.5s ease-out, padding 0.5s ease-out, border-width 0.5s ease-out;
	}

	.trade-review-wrapper .gm-trade-drawer.show-gm-trade-drawer {
		height: 31.11vh;
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-width: 5px 1px 1px 1px;
		overflow-y: auto;
		transform: none;
	}
}


/*
	=========================================================================
	Player profile -- mobile layout ( player-profile.html )
	=========================================================================
	Mobile here means Element's xs + sm ( under 992px ). Every rule is inside
	a max-width query and scoped to .player-profile-4040 ( on the page's
	el-main ), so md / lg / xl render exactly as before.

	The pp-* classes in the template are hooks only -- they carry no rules
	outside these queries.

	Element's sm/md col classes are min-width based, so :sm="24" on a col would
	also reach desktop; that is why the column overrides live here instead
	of as el-col props.
	=========================================================================
*/

/*
	Collapsible sections ( phone and tablet only ):
	Season, Career, Ratings, Contract, Transaction History, Injury History
	Each section is: hidden checkbox + h3 holding a <label> for it + .pp-collapse-body.
	The checkbox and arrow are hidden at every width, and the body is only ever
	hidden inside the media query below, so desktop renders and behaves as before.
	Season ships with "checked" ( expanded ); everything else starts collapsed.
*/
.player-profile-4040 .pp-collapse-toggle,
.player-profile-4040 .pp-collapse-icon,
.player-profile-4040 .pp-actions-button {
	display: none;
}

/* ---------- xs + sm ( under 992px ) ---------- */
@media only screen and (max-width: 991px) {

	/* collapsible sections */
	.player-profile-4040 .pp-collapse-title {
		margin-top: 0;
		margin-bottom: 0;
	}
	.player-profile-4040 .pp-collapse-title label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.6rem 0;
		border-bottom: 1px solid #ebeef5;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
	.player-profile-4040 .pp-collapse-icon {
		display: inline-block;
		color: #909399;
		font-size: 14px;
		transition: transform 0.2s ease-out;
	}
	.player-profile-4040 .pp-collapse-toggle:checked + .pp-collapse-title .pp-collapse-icon {
		transform: rotate(90deg);
	}
	.player-profile-4040 .pp-collapse-body {
		padding-top: 0.75rem;
		padding-bottom: 0.5rem;
	}
	.player-profile-4040 .pp-collapse-toggle:not(:checked) + .pp-collapse-title + .pp-collapse-body {
		display: none;
	}

	/*
		owner's Player Actions card: a full-width button ( styled like a plain
		el-button ) that opens the card beneath it; collapsed by default
	*/
	.player-profile-4040 .pp-actions-button {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		box-sizing: border-box;
		width: 100%;
		margin-top: 1rem;
		padding: 12px 20px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		color: #606266;
		background-color: #fff;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.1s, border-color 0.1s, background-color 0.1s;
	}
	.player-profile-4040 .pp-actions-button:active,
	.player-profile-4040 .pp-collapse-toggle:checked + .pp-actions-button {
		color: #409EFF;
		border-color: #c6e2ff;
		background-color: #ecf5ff;
	}
	.player-profile-4040 .pp-actions-button .pp-collapse-icon {
		color: inherit;
	}
	.player-profile-4040 .pp-collapse-toggle:checked + .pp-actions-button .pp-collapse-icon {
		transform: rotate(180deg);
	}
	.player-profile-4040 .pp-utility-col .el-card.pp-actions-card {
		margin-top: 0.5rem;
	}
	.player-profile-4040 .pp-collapse-toggle:not(:checked) + .pp-actions-button + .pp-actions-card {
		display: none;
	}

	/* header and the owner / free agent / lineup cards each get the full width */
	.player-profile-4040 .el-col.pp-header-col,
	.player-profile-4040 .el-col.pp-utility-col {
		width: 100%;
	}
	.player-profile-4040 .pp-utility-col .el-card {
		margin-top: 1rem;
	}

	/* injury / health / prospect / usage tips: two across */
	.player-profile-4040 .el-col.pp-tip-col {
		width: 50%;
		padding-right: 1rem;
		box-sizing: border-box;
	}
	.player-profile-4040 .pp-tip-col .page-tip {
		width: auto;
	}

	/* season, career and ratings strips wrap into a grid */
	.player-profile-4040 .el-row.pp-stat-strip {
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 0.5rem;
	}
	.player-profile-4040 .el-row.pp-stat-strip > div {
		flex: 0 0 12.5%;
		box-sizing: border-box;
		padding: 0 2px;
		text-align: center;
	}

	/* history tables scroll sideways, Season column stays put */
	.player-profile-4040 .pp-table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.player-profile-4040 .pp-table-scroll table.stats-history-table {
		width: auto;
		min-width: 100%;
	}
	.player-profile-4040 .pp-table-scroll table.stats-history-table thead tr th,
	.player-profile-4040 .pp-table-scroll table.stats-history-table tbody tr td {
		white-space: nowrap;
	}
	.player-profile-4040 .pp-table-scroll table.stats-history-table thead tr th:first-child,
	.player-profile-4040 .pp-table-scroll table.stats-history-table tbody tr td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: #fff;
		padding-left: 4px;
		box-shadow: 1px 0 0 #ebeef5;
	}

	.page-tip {
		margin: 0;
	}

}

/* ---------- xs only ( under 768px ) ---------- */
@media only screen and (max-width: 767px) {

	.player-profile-4040.el-main {
		padding: 12px;
	}

	/* header: avatar on top, details below */
	.player-profile-4040 .el-row.pp-header-row {
		flex-direction: column;
		align-items: center;
	}
	.player-profile-4040 .pp-header-row .el-avatar {
		width: 100px !important;		/* el-avatar :size writes an inline style */
		height: 100px !important;
		line-height: 100px !important;
	}
	.player-profile-4040 .pp-header-info {
		width: 100%;
		margin-left: 0;
		margin-top: 1rem;
	}
	.player-profile-4040 .pp-header-info h2 {
		text-align: center;
	}

	/* owner switches stack, so their labels have room */
	.player-profile-4040 .el-col.pp-switch-col {
		width: 100%;
	}

	.player-profile-4040 .el-col.pp-tip-col {
		width: 100%;
		padding-right: 0;
	}

	.player-profile-4040 .el-row.pp-stat-strip > div {
		flex-basis: 25%;
	}

	/* contract: the three blocks stack */
	.player-profile-4040 .el-row.pp-contract-row {
		flex-direction: column;
	}
	.player-profile-4040 .el-row.pp-contract-row > div {
		text-align: left;
		margin-bottom: 0.75rem;
	}

	/* transaction and injury history stack */
	.player-profile-4040 .el-col.pp-history-col {
		width: 100%;
	}

}


/*
	=========================================================================
	Trade dialogs on phones -- keep the footer buttons on screen
	( team-trades.html: new trade modal and trade review modal )
	=========================================================================
	The max-width: 768px rules above size the full-screen trade dialogs in vh.
	On iOS Safari and Android Chrome, 100vh is the height with the browser
	toolbars HIDDEN, so while the address bar / toolbar are showing the dialog
	is taller than the visible area and Cancel / Review sit just below the fold.

	dvh is the height actually visible right now. The same arithmetic in dvh:
		header  71px  ( 50px + 20px padding-top + 1px border )
		body    100dvh - 130px
		footer  ~44px ( 0.75rem margin + 32px small button )
		total   100dvh - 15px  -> always on screen

	Only applies when the dialog is full screen on a phone. Browsers without
	dvh support ignore this block and keep the vh rules above.
	=========================================================================
*/
@supports (height: 100dvh) {
	@media only screen and (max-width: 768px) {

		.trade-details-dialog .el-dialog.is-fullscreen .trade-proposal-wrapper-4040 {
			height: calc(100dvh - 71px);
		}

		.trade-details-dialog .el-dialog.is-fullscreen .trade-proposal-wrapper-4040 .proposal-info-4040 {
			height: calc(100dvh - 130px);
		}

		/* the open team panel in the accordion shrinks by the same amount */
		.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .el-collapse-item__content {
			min-height: calc(100dvh - 340px);
			max-height: calc(100dvh - 340px);
		}

	}
}

/*
	Trade dialogs on phones -- roster list and GM Notes fill their panel
	( trade-picker-proposedBy.html / trade-picker-proposedTo.html )
	-------------------------------------------------------------------------
	The roster list ( .trade-panel-column ) and the GM Notes lists were sized
	in their own vh / px heights, independent of the accordion panel they sit
	in. When the two disagreed, the panel clipped the bottom of the list ( the
	Cash row ) and the bottom of the GM Notes drawer.

	Instead, the open accordion panel is a flex column: the search row keeps its
	natural height and the roster list takes the rest, at any screen height.
	The GM Notes drawer is pinned to the bottom of the partner's list area,
	the same way the min-width: 769px rules do it on desktop, and its tab lists
	fill the drawer.
*/
@media only screen and (max-width: 768px) {

	/* open team panel: search row + list */
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .el-collapse-item__content {
		display: flex;
		flex-direction: column;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .el-collapse-item__content > .el-row {
		flex: 0 0 auto;
	}

	/* your roster ( list is a direct child ) */
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .el-collapse-item__content > .trade-panel-column {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
	}

	/* partner roster ( list + GM Notes drawer inside .trade-panel-wrapper ) */
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .el-collapse-item__content > .trade-panel-wrapper {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .trade-panel-wrapper > .trade-panel-column {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
	}

	/* GM Notes drawer: slides up from the bottom of the partner list */
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .trade-panel-wrapper .gm-notes-drawer {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		height: 34.11vh;
		max-height: calc(100% - 2rem - 6px);		/* padding-1rem top + bottom, 5px + 1px borders */
		display: flex;
		flex-direction: column;
		/* extra offset clears the upward box-shadow */
		transform: translateY(calc(100% + 60px));
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .trade-panel-wrapper .gm-notes-drawer.show-gm-notes-drawer {
		transform: translateY(0);
	}

	/* drawer body -> column -> tabs -> active pane -> list, each filling the space left */
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-drawer > .el-row {
		flex: 0 0 auto;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-drawer > .gm-notes-body {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body::before,
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body::after {
		display: none;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body > .el-col {
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow-y: auto;		/* "Not Available to Trade" message */
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body .el-tabs {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body .el-tabs__header {
		flex: 0 0 auto;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body .el-tabs__content {
		flex: 1 1 auto;
		min-height: 0;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body .el-tab-pane {
		height: 100%;
	}
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body #gm-notes-offers.scroll-col,
	.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .gm-notes-body #gm-notes-comparison.scroll-col {
		height: 100%;
		box-sizing: border-box;
	}

}

@supports (height: 100dvh) {
	@media only screen and (max-width: 768px) {
		.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui .trade-panel-wrapper .gm-notes-drawer {
			height: 34.11dvh;
		}
	}
}

/*
	Trade dialogs on phones -- open team panel fills the space above the buttons
	-------------------------------------------------------------------------
	The panel height above ( calc(100dvh - 340px) ) is a fixed guess at how much
	room the header, Display Settings, both team headers and the footer take.
	Any difference shows up as blank space above Cancel / Review ( or, if a team
	name wraps to two lines, as the bottom of the list being cut off ).

	Here the create-proposal content becomes a chain of flex columns, from
	.proposal-info-4040 down to the open panel, so the open panel takes exactly
	the height that is left, right down to the buttons. With no team open, the
	accordion keeps its natural height and the "Enable Trade Hints?" box shows
	beneath it as before; with a team open, that box ( already out of view ) is
	hidden.

	Browsers without :has() support keep the fixed calc() height.
*/
@supports selector(:has(*)) {
	@media only screen and (max-width: 768px) {

		.trade-details-dialog .el-dialog.is-fullscreen .proposal-info-4040.no-scroll:has(#trade-partner-accordion) {
			display: flex;
			flex-direction: column;
			padding-bottom: 0;		/* nothing scrolls here, so the 1.25rem bottom padding was just a gap above the buttons */
		}
		.trade-details-dialog .el-dialog.is-fullscreen .proposal-info-4040.no-scroll:has(#trade-partner-accordion)::before,
		.trade-details-dialog .el-dialog.is-fullscreen .proposal-info-4040.no-scroll:has(#trade-partner-accordion)::after,
		.trade-details-dialog .el-dialog.is-fullscreen #trade-partner-accordion::before,
		.trade-details-dialog .el-dialog.is-fullscreen #trade-partner-accordion::after {
			display: none;
		}

		/* create-proposal column: Display Settings keeps its height, the accordion row takes the rest */
		.trade-details-dialog .el-dialog.is-fullscreen .proposal-info-4040.no-scroll:has(#trade-partner-accordion) > .el-col {
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
		}
		.trade-details-dialog .el-dialog.is-fullscreen .proposal-info-4040.no-scroll:has(#trade-partner-accordion) > .el-col > * {
			flex-shrink: 0;
		}
		.trade-details-dialog .el-dialog.is-fullscreen .proposal-info-4040.no-scroll:has(#trade-partner-accordion) > .el-col > #trade-partner-accordion {
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
		}

		/* accordion row: the accordion column fills it while a team is open ( the hints box drops out of view below ) */
		.trade-details-dialog .el-dialog.is-fullscreen #trade-partner-accordion > .el-col {
			flex-shrink: 0;
		}
		.trade-details-dialog .el-dialog.is-fullscreen #trade-partner-accordion > .el-col:has(.mobile-trade-ui .el-collapse-item.is-active) {
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
		}
		/* the hints box sits below the open panel, out of view; take it out of the layout so the panel can fill */
		.trade-details-dialog .el-dialog.is-fullscreen #trade-partner-accordion > .el-col:has(.mobile-trade-ui .el-collapse-item.is-active) ~ .el-col {
			display: none;
		}
		.trade-details-dialog .el-dialog.is-fullscreen #trade-partner-accordion > .el-col:has(.mobile-trade-ui .el-collapse-item.is-active) > .mobile-trade-ui {
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
		}

		/* accordion: closed team keeps its header height, open team takes the rest */
		.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui > .el-collapse-item {
			flex-shrink: 0;
		}
		.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui > .el-collapse-item.is-active {
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
		}
		.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui > .el-collapse-item.is-active > .el-collapse-item__wrap {
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
		}
		.trade-details-dialog .el-dialog.is-fullscreen .mobile-trade-ui > .el-collapse-item.is-active > .el-collapse-item__wrap > .el-collapse-item__content {
			flex: 1 1 auto;
			min-height: 0;
			max-height: none;
		}

	}
}

/*
	Review and Submit step on phones ( team-trades.html: .trade-review-mobile )
	-------------------------------------------------------------------------
	Same content as the desktop side-by-side summary, stacked: GM feedback
	( once submitted ), your side, their side, then comments. It sits in
	.proposal-info-4040, which scrolls on this step on mobile.
*/
@media only screen and (max-width: 768px) {

	.trade-review-mobile {
		padding-top: 0.5rem;
		padding-bottom: 1rem;
	}

	.trade-review-mobile .team-header-block {
		font-weight: 500;
	}

	.trade-review-mobile .trade-panel-header {
		margin-top: 0.75rem;
	}

	/* el-tag is nowrap by default: let contract / subsidy lines wrap inside the card */
	.trade-review-mobile .el-tag {
		white-space: normal;
		height: auto;
		line-height: 1.6;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.trade-review-mobile .el-tag.padding-10-px {
		padding: 10px;
	}

	/* GM feedback: same look as the desktop drawer, but in the page flow */
	.trade-review-mobile .trade-feedback-mobile {
		background-color: rgb(245, 245, 245);
		border: #182738 solid 1px;
		border-top: #182738 solid 5px;
		padding: 1rem;
		margin-bottom: 1rem;
	}
	.trade-review-mobile .trade-feedback-mobile h1 {
		margin: 0.25rem 0;
	}
	.trade-review-mobile .trade-feedback-mobile p {
		margin: 0.5rem 0;
	}

}