@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Roboto+Condensed:wght@300;400;700&family=Rubik+Mono+One&display=swap');

html {
    font-size: 62.5%;
    font-family: 'Roboto Condensed', sans-serif;
    /* background: black; */
}

/* font sizes */
h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.6rem;
}

.flexTables table {
    font-size: 1.3rem;
}

table,
p {
    font-size: 1.2rem;
}

.flexTables table tr th {
    font-size: 1.6rem;
}

.flexTablesFooter p {
    font-size: 1rem;
}

/* .flexTables table tr td, */
.middleSection table tr th,
.middleSection table tr td {
    font-size: 1.4rem;
}

.draft {
    font-size: 1.3rem;
    line-height: 0.9;
}

.page {
    /* border: 1px solid red; */
    width: 1000px;
    margin: 0 auto;
    padding: 40px 40px 10px;
    height: 1358px;
    background: white;
}

/* .red, */
.forecasts table tr td:nth-child(8):empty,
.forecasts table tr td:nth-child(9):empty,
.forecasts table tr td:nth-child(10):empty {
    background: red;
}

/* header {
    font-size: 1.1rem;
    color: #000;
    text-align: center;
    width: 100%;
}

.page-number {
    color: #fff;
    background-color: #000;
    border-radius: 3px;
    border: 1px solid #000;
    padding: 1px 4px;
    margin: 0 5px;
    font-weight: bold;
} */

.hero {
    position: relative;
    height: 500px;
       max-height: 800px;
}

.hero img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    position: absolute;
        bottom: 0;

}

.heroPreview {
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: -30px;
    width: 600px;
    /* border: 1px solid red; */
}

.heroHeader {
    display: flex;
    align-items: center;
    margin-top: 15px;
    /* margin-right: 50px; */
    padding-right: 15px;
}

.heroHeader div {
    width: 100px;
    height: 100px;
    margin-right: 15px;
}

.heroHeader img {
    position: relative;
    width: 100%;
    height: 100%;
}

.heroHeader h1 {
    text-transform: uppercase;
    margin: 0;
    font-size: 4.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}

.heroStandings {
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.heroStandings p {
    margin: 0;
    font-size: 1.4rem;
}

/* HERO PARAGRAPH */
.heroParagraph {
    margin: 30px 0 0 90px;
}

/* PARAGRAPH WIDTH */
.heroParagraph p {
    width: 80%;
    margin: 0;
    font-size: 1.35rem;
}

.chi,
.det,
.car,
.mtl,
.pit,
.col,
.was,
.nas,
.cbj,
.vgk {
    left: 0;
}

.phi,
.tb,
.van {
    left: -15px;
}

.dal,
.njd {
    left: -50px;
}

.cbj .heroHeader div {
    margin-right: 10px;
}

.cbj .heroHeader h1 {
    text-align: center;
    width: 300px;
    margin-right: 92px;
    line-height: 1;
}

.nyi .heroParagraph {
    margin: 40px 0 0 80px;
}

.ott .heroParagraph {
    margin: 30px 0 0 70px;
}

.was .heroParagraph,
.vgk .heroParagraph {
    margin: 30px 0 0 80px;
}

.nas .heroParagraph {
    margin: 30px 0 0 40px;
}

.cbj .heroParagraph {
    margin: 5px 0 0 50px;
}

.wpg .heroParagraph {
    margin: 30px 0 0 80px;
}

.was .heroParagraph p {
    width: 100%;
}

.bos .heroParagraph p,
.dal .heroParagraph p,
.fla .heroParagraph p,
.la .heroParagraph p,
.njd .heroParagraph p,
.ott .heroParagraph p,
.tb .heroParagraph p,
.cbj .heroParagraph p,
.min .heroParagraph p,
.vgk .heroParagraph p,
.sea .heroParagraph p {
    width: 80%;
}

.ana .heroParagraph p,
.buf .heroParagraph p,
.chi .heroParagraph p,
.det .heroParagraph p,
.edm .heroParagraph p,
.car .heroParagraph p,
.mtl .heroParagraph p,
.nyr .heroParagraph p,
.phi .heroParagraph p,
.pit .heroParagraph p,
.col .heroParagraph p,
.stl .heroParagraph p,
.tor .heroParagraph p,
.nas .heroParagraph p,
.wpg .heroParagraph p,
.ari .heroParagraph p {
    width: 90%;
}

.cgy .heroParagraph p,
.nyi .heroParagraph p,
.sj .heroParagraph p,
.van .heroParagraph p {
    width: 100%;
}

/* .depthTables table:first-child tr:nth-child(6) td:first-child {
    font-size: 1.35rem;
} */

.heroParagraph div {
    display: flex;
}

.heroParagraph h2 {
    width: inherit;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: normal;
    border-right: 60px solid black;
}

.heroParagraph h2::before {
    content: none;
}

.heroPlayer {
    position: absolute;
    bottom: 20px;
    right: 10px;
}

.heroPlayer h2 {
    width: inherit;
    font-size: 1.4rem;
}

h2 {
    margin: 0 0 5px 0;
    padding: 1px 5px;
    text-transform: uppercase;
    width: 22%;
    background: black;
    color: white;
    letter-spacing: 2px;
}

h2::before {
    content: "|";
    color: #ff7928;
    font-size: 2.2rem;
    vertical-align: middle;
    padding-bottom: 5px;
}

h3 {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgb(85, 85, 85);
    margin: 0;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.left-align,
.forecasts table tr .left-align {
    text-align: left;
}

.right-align,
.forecasts table tr .right-align {
    text-align: right;
}

th, td {
    border-bottom: 1px solid black;
    text-align: right;
}

th {
    font-weight: normal;
    color: rgb(85, 85, 85);
}

.footnotes span {
    font-weight: bold;
}

p {
    margin: 5px 0 10px;
}

.flexHeaders,
.flexTables {
    display: flex;
}

.flexHeaders h2 {
    width: 100%;
}

.flexHeaders h2:first-child,
.flexTables table:first-child {
    width: 130%;
}

.flexTables table tr td,
.flexTables table tr th,
.forecasts table tr th,
.forecasts table tr td {
    text-align: center;
}

.flexTables table tr th {
    border: none;
    font-weight: 700;
    color: black;
    text-transform: uppercase;
}

.flexTables table:first-child tr:last-child td:last-child {
    color: #E1E1E1;
}

.flexTablesContainer,
.depthTables {
    background: #E1E1E1;
    box-shadow: rgba(0, 0, 0, 0.25) 10px 10px 10px;
    padding: 4px 12px 12px;
}

.flexTablesFooter {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
}

.verticalLine {
    height: 122px;
    border-left: 1px solid black;
    margin: 5px 10px 0;
}

.page p .orange,
.forecasts table tr .orange,
.orange {
    color: #ff7928;
}

.middleSection {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
}

.forecasts {
    width: 54%;
    /* width: 62%; */
}

.depthChart {
    width: 44%;
    /* width: 36%; */
}

.forecasts h2,
.depthChart h2 {
    width: calc(100% - 10px);
}

.forecasts table {
    border-left: 1px solid black;
}

.forecasts h3,
.depthTables table tr th h3 {
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.forecasts > h3 {
    margin-top: 10px;
}

.forecastsHeaders {
    display: flex;
}

.forecastsHeaders h3:first-child {
    width: 33%;
}

.forecastsHeaders h3:nth-child(2) {
    width: 28%;
    text-align: center;
}

.forecastsHeaders h3:nth-child(3) {
    width: 30%;
    text-align: center;
}

.forecastTopRow th {
    background: black;
    color: white;
}

.forecasts table tr th,
.forecasts table tr td {
    border-right: 1px solid black;
    padding: 1px 4.5px;
}

.forecasts table tr th:not(:last-child){
    border-right: 1px solid white;
}

.forecasts table tr th:first-child,
.forecasts table tr td:first-child {
    max-width: 35px;
    padding: 1px;
}

.forecasts table tr th:nth-child(3),
.forecasts table tr td:nth-child(3),
.forecasts table tr th:nth-child(4),
.forecasts table tr td:nth-child(4),
.forecasts table tr th:nth-child(5),
.forecasts table tr td:nth-child(5),
.forecasts table tr th:nth-child(6),
.forecasts table tr td:nth-child(6),
.forecasts table tr th:nth-child(8),
.forecasts table tr th:nth-child(9) {
    border-right: none;
}

.forecasts table tr th:nth-child(1),
.forecasts table tr td:nth-child(1) {
    min-width: 9%;
}

.forecasts table tr th:nth-child(2),
.forecasts table tr td:nth-child(2) {
    width: 30%;
}

.forecasts table tr th:nth-child(8),
.forecasts table tr td:nth-child(8),
.forecasts table tr th:nth-child(9),
.forecasts table tr td:nth-child(9),
.forecasts table tr th:nth-child(10),
.forecasts table tr td:nth-child(10) {
    min-width: 52px;
}

.forecasts table tr td:nth-child(3),
.forecasts table tr td:nth-child(4),
.forecasts table tr td:nth-child(5),
.forecasts table tr td:nth-child(6),
.forecasts table tr td:nth-child(7),
.forecasts table tr td:nth-child(11) {
    background: #E1E1E1;
}

.forecasts table tr th:nth-child(3),
.forecasts table tr td:nth-child(3),
.forecasts table tr th:nth-child(4),
.forecasts table tr td:nth-child(4),
.forecasts table tr th:nth-child(5),
.forecasts table tr td:nth-child(5),
.forecasts table tr th:nth-child(6),
.forecasts table tr td:nth-child(6),
.forecasts table tr th:nth-child(7),
.forecasts table tr td:nth-child(7) {
    font-weight: 700;
}

.footnotes {
    margin: 15px 0 0 0;
}

.footnotes p {
    font-size: 1.1rem;
    margin: 0 0 2px 0;
}

.footnotes p:last-child {
    margin: 0;
}

.footnotes img {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 0.5px;
    margin-bottom: 0.5px;
}

.depthTables {
    height: 455px;
    padding: 5px 10px;
}

.depthTables table:first-child {
    margin-bottom: 5px;
}

/* .depthTables table:last-child tr:last-child td{
    border-bottom: none;
} */

.depthTables table tr th {
    border-bottom: none;
}

.depthTables table:first-child th h3 {
    margin-bottom: 5px;
}

.depthTables table:last-child th {
    margin-bottom: 0;
}

.depthTables table tr th,
.depthTables table tr td {
    width: 27%;
}

.depthTables table tr th:first-child, 
.depthTables table tr td:first-child {
    text-align: left;
}

.depthTables table tr th:nth-child(2),
.depthTables table tr td:nth-child(2) {
    text-align: center;
}

.depthTables table tr th:last-child,
.depthTables table tr td:last-child {
    text-align: right;
}

.depthTables table tr th .departures {
    font-size: 1.4rem;
    margin-left: 50px;
}

.depthTables table:last-child tr th .departures,
.depthTables table:last-child tr td .unsigned,
.depthTables table:last-child tr td:last-child {
    color: rgb(85, 85, 85);
}

.depthTables table:last-child tr .unsigned h3 {
    text-align: center;
    font-size: 1.4rem;
    margin-left: 50px;
}

div.depthCell {
    display: flex;
    align-items: center;
}

span.captain {
    color: white;
    font-size: 1.3rem;
    font-family: 'Rubik Mono One', sans-serif;
    margin-right: 5px;
}

span span.captain {
    background: #ff7928;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.depthC div.depthCell {
    justify-content: center;
}

.depthRW div.depthCell {
    justify-content: flex-end;
}

div.depthCell span.drafted {
    margin-left: 2px;
}

span.drafted {
    font-weight: bold;
    color: white;
    color: #ff7928;
    font-size: 1.1rem;
    margin-left: -1px;
}

.forecasts table tr td.orange:last-child {
    height: 17px;
    min-width: 40px;
}

.flexicons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.forecasts table tr td.orange div.mustDraft,
.forecasts table tr td.orange div.contractYear {
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.forecasts table tr td.orange div:nth-child(2),
.forecasts table tr td.orange div:nth-child(3) {
    margin-left: 2px;
}

.forecasts table tr td.orange div.contractYear span {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}

.forecasts table tr td.orange div div {
    background: #ff7928;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
}

.forecasts table tr td.orange span {
    font-family: 'Rubik Mono One', sans-serif;
    color: white;
}