:root{
    --currentWeek: 1;

    --subjectMute: #666;
    --subject1G1: #34a853;
    --subject1G2: #34a853;
    /* --subject1G2: #77d490; */
    --subject2G1: #ff9543;
    --subject2G2: #ff9543;
    /* --subject2G2: #e99d62; */
    --subject3G1: #9900ff;
    --subject3G2: #9900ff;
    /* --subject3G2: #ab7dca; */
    --subject4G1: #fbbc04;
    --subject4G2: #fbbc04;
    /* --subject4G2: #66531a; */

    --subject1: linear-gradient(to bottom, var(--subject1G1), var(--subject1G2));
    --subject2: linear-gradient(to bottom, var(--subject2G1), var(--subject2G2));
    --subject3: linear-gradient(to bottom, var(--subject3G1), var(--subject3G2));
    --subject4: linear-gradient(to bottom, var(--subject4G1), var(--subject4G2));

    --highlightColor: rgb(104, 255, 255);
}

html{
    padding: 0;
    margin: 0;
    background: #2e2e2e;
    font-family: sans-serif;
}

body{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
}

.index-container{
    padding: 0 2em;
    display: grid;
}

.index-sessions{
    margin-bottom: 2em;
}
.index-sessions h3{
    font-size: 1.5em;
    color: white;
    padding: 0 0 0.5em 0;
    margin: 1em 0 0 0;
}

.session--subjects{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    /* grid-template-columns: repeat(3, 1fr);
    padding-inline: 1em;
    column-gap: 1em; */
}

.session--subjects > *{
    font-size: 1.6em;
    font-weight: bold;
    border-radius: 0.25em;
    text-align: center;
    padding: 1em;
}

.session--subjects > .subject1{
    background: var(--subject1);
}

.session--subjects > .subject2{
    background: var(--subject2);
}

.session--subjects > .subject3{
    background: var(--subject3);
}

.session--subjects > .subject4{
    background: var(--subject4);
}

a {
    text-decoration: none;
    color: black;
}

a:hover{
    text-decoration: underline;
}

.returnMain{
    margin-top: 5px;
    padding: 10px;
    font-size: 20pt;
    font-weight: bold;
    text-align: center;
    background: white;
}

.main-container{
    display: grid;
    /* height: 100vh; */
    width: 90vw;
    margin: 0 auto;
    aspect-ratio: 16 /9;
    column-gap: 0.25em;
    row-gap: 0.25em;
    padding: 0.2em;
}
/* 
.week-highlight{
    grid-column: calc(var(--currentWeek) + 2);
    grid-row: 1 / -1;
    background-image: url(images/stripe-white.svg);
    background-position-x: 0px;
    background-position-y: 0px;
    background-size: 5000px 1500px;
    background-clip: cover;
    opacity: 0.8;
    z-index: 99;
}

.week-highlight:hover{
    opacity: 0.2;
}

.one-subject .week-highlight{
    background-image: url(images/stripe-white.svg);
    background-size: 5000px 1500px;
} */

.all-subject{
    grid-template-rows: auto repeat(15, 1fr);
    grid-template-columns: 5% 2% repeat(14, 1fr);
    color: transparent !important;
}

.one-subject{
    width: 95vw;
    height: 80vh;
    /* min-height: 100%; */
    grid-template-columns: 0px 2% repeat(14, 1fr);
    gap:.5em;
}

.two-section{
    grid-template-rows: auto repeat(2, 1fr);
}

.three-section{
    grid-template-rows: auto repeat(3, 1fr);
}

.four-section{
    grid-template-rows: auto repeat(4, 1fr);
}

.five-section{
    grid-template-rows: auto repeat(5, 1fr);
}

.week{
    background: gray;
    grid-row: 1/2;
    text-align: center;
    font-weight: bold;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.columnHide, .transparent{
    visibility: hidden;
}

[class*="week--date--"]
{
    font-size: x-small;
    grid-row: 2/3;
}

[class*="week--num"] > span{
    font-size: x-small;
    margin-left: 1em;
}

[class*="week--num"]{
    background: gray;
    color: white;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center; 
    grid-row: 1 / 2;
    flex-direction: column;
    padding: 0.5em;
}

.index-subject-header{
    text-align:center;
    color: white; 
    margin: 0;
    padding: 0.5em;
    margin-bottom: 0;
}

.single-subject-header{
    text-align:center;
    color: white; 
    margin: 0;
    padding: 0.5em;
    margin-bottom: 0.5em;
    /* width: 100vw;
    overflow: auto; */
    /* margin-bottom: 1em; */
}

.single-subject-header.subject1{ background: var(--subject1); }
.single-subject-header.subject2{ background: var(--subject2); }
.single-subject-header.subject3{ background: var(--subject3); }
.single-subject-header.subject4{ background: var(--subject4); }

.single-subject-header a.header-button{
    display: block;
    font-size: large;
}

@media(min-width: 120em) {
    .single-subject-header a.header-button{
        float: right;
    }
}

.week--num--1 { grid-column: 3 / 4; }
.week--num--2 { grid-column: 4; }
.week--num--3 { grid-column: 5; }
.week--num--4 { grid-column: 6; }
.week--num--5 { grid-column: 7; }
.week--num--6 { grid-column: 8; }
.week--num--7 { grid-column: 9; }
.week--num--8 { grid-column: 10; }
.week--num--9 { grid-column: 11; }
.week--num--10 { grid-column: 12; }
.week--num--11 { grid-column: 13; }
.week--num--12 { grid-column: 14; }
.week--num--13 { grid-column: 15; }
.week--num--14 { grid-column: 16; }

[grid-col-start="0"]{ grid-column-start: 2; }
[grid-col-start="1"]{ grid-column-start: 3; }
[grid-col-start="2"]{ grid-column-start: 4; }
[grid-col-start="3"]{ grid-column-start: 5; }
[grid-col-start="4"]{ grid-column-start: 6; }
[grid-col-start="5"]{ grid-column-start: 7; }
[grid-col-start="6"]{ grid-column-start: 8; }
[grid-col-start="7"]{ grid-column-start: 9; }
[grid-col-start="8"]{ grid-column-start: 10; }
[grid-col-start="9"]{ grid-column-start: 11; }
[grid-col-start="10"]{ grid-column-start: 12; }
[grid-col-start="11"]{ grid-column-start: 13; }
[grid-col-start="12"]{ grid-column-start: 14; }
[grid-col-start="13"]{ grid-column-start: 15; }
[grid-col-start="14"]{ grid-column-start: 16; }
[grid-col-start="15"]{ grid-column-start: 17; }
[grid-col-start="16"]{ grid-column-start: 18; }


[grid-col-end="0"]{ grid-column-end: 3; }
[grid-col-end="1"]{ grid-column-end: 4; }
[grid-col-end="2"]{ grid-column-end: 5; }
[grid-col-end="3"]{ grid-column-end: 6; }
[grid-col-end="4"]{ grid-column-end: 7; }
[grid-col-end="5"]{ grid-column-end: 8; }
[grid-col-end="6"]{ grid-column-end: 9; }
[grid-col-end="7"]{ grid-column-end: 10; }
[grid-col-end="8"]{ grid-column-end: 11; }
[grid-col-end="9"]{ grid-column-end: 12; }
[grid-col-end="10"]{ grid-column-end: 13; }
[grid-col-end="11"]{ grid-column-end: 14; }
[grid-col-end="12"]{ grid-column-end: 15; }
[grid-col-end="13"]{ grid-column-end: 16; }
[grid-col-end="14"]{ grid-column-end: 17; }

.hide{
    display: none !important;
}

.subject__1{grid-row: 2 / span 3; background: var(--subject1);}
.subject__2{grid-row: 5 / span 4; background: var(--subject2);}
.subject__3{grid-row: 9 / span 4; background: var(--subject3);}
.subject__4{grid-row: 13 / span 4; background: var(--subject4);}

.one-subject .subject__2{grid-row: 2 / span 4;}
.one-subject .subject__3{grid-row: 2 / span 4;}
.one-subject .subject__4{grid-row: 2 / span 4;}

[class*="subject1_"]{ background: var(--subject1); }
[class*="subject2_"]{ background: var(--subject2); }
[class*="subject3_"]{ background: var(--subject3); }
[class*="subject4_"]{ background: var(--subject4); }


[class*="subject__1_"]{background: var(--subject1);}
.subject__1_L {grid-row: 2;}
.subject__1_P {grid-row: 3;}
.subject__1_A {grid-row: 4;}

[class^="subject"]{
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    font-weight: bold; 
    padding: 0.5em; 
    /* color: white; */
}

[class*="subject"].gridColumn{
    display: grid;
    grid-template-rows: 20% 80%;
    padding: 0px;
    margin: 0px;
    row-gap: 0;
    column-gap: 0;
}

[class*="subject"].gridColumn > .main{
    /* padding-bottom: 0.5em; */
    /* border-bottom: 2px solid #2e2e2e; */
    grid-column: 1/-1 !important;
}

[class*="subject"].gridColumn > .sub{
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    column-gap: 0.25em;
    row-gap: 0.25em;
    padding: 0 0.25em;
}

[class*="subject"].gridColumn > .sub > div{
    padding: 0.5em;
    border-radius: 0.8em;
}

[class*="subject"].gridColumn > .sub.TwoCol{
    grid-template-columns: repeat(2,1fr);
}

[class*="subject"].gridColumn > .sub.fiveCol{
    grid-template-columns: repeat(5,1fr);
}

[class="subject1"]{
    background: var(--subject1);
}

.subjectMute{
    background: var(--subjectMute) !important;
}

.subject1{
    background: var(--subject1);
}

.subject2{
    background: var(--subject2);
}

.subject3{
    background: var(--subject3);
}

.subject4{
    background: var(--subject4);
}

.subject1.row1{
    grid-row: 2/3;
}

.subject1.row2{
    grid-row: 3/4;
}

.subject1.row3{
    grid-row: 4/5;
}

*.row1{
    grid-row:2/3;
}

*.row1.dualRow{
    grid-row: 2 / span 2;
}




*.row2{
    grid-row:3/4;
}

*.row2.dualRow{
    grid-row:4 / span 2;
}

*.row3{
    grid-row:4/5;
}

*.row4{
    grid-row:5/6;
}

*.row5{
    grid-row:6/7;
}

.col2{
    grid-column: span 2;
}

*.offsetRow{
    grid-row: auto !important;
}

/* .subject1_L1 {grid-column: 3 / span 1; grid-row: 2}
.subject1_L2 {grid-column: 4 / span 2; grid-row: 2}
.subject1_L3 {grid-column: 6 / span 1; grid-row: 2}
.subject1_L4 {grid-column: 7 / span 2; grid-row: 2}
.subject1_L5 {grid-column: 9 / span 2; grid-row: 2}
.subject1_L6 {grid-column: 11 / span 2; grid-row: 2}
.subject1_L7 {grid-column: 13 / span 2; grid-row: 2}
.subject1_L8 {grid-column: 15 / span 2; grid-row: 2} 

[class*="subject1_P"]{background: var(--subject1); grid-row: 3}
.subject1_P1 {grid-column: 3 / span 1; }
.subject1_P2 {grid-column: 4 / span 1; }
.subject1_P3 {grid-column: 5 / span 2; }
.subject1_P4 {grid-column: 7 / span 2; }
.subject1_P5 {grid-column: 9 / span 1; }
.subject1_P6 {grid-column: 10 / span 2; }
.subject1_P7 {grid-column: 12 / span 1; }
.subject1_P8 {grid-column: 13 / span 1; }
.subject1_P9 {grid-column: 14 / span 1; }
.subject1_P10 {grid-column: 15 / span 1; }
.subject1_P11 {grid-column: 16 / span 1; }*/

.subject1_A1 {grid-column: 5 / span 1; grid-row: 4}
.subject1_A2 {grid-column: 6 / span 3; grid-row: 4}
.subject1_A3 {grid-column: 9 / span 1; grid-row: 4}
.subject1_A4 {grid-column: 10 / span 4; grid-row: 4}
.subject1_A5 {grid-column: 14 / span 1; grid-row: 4}
.subject1_A6 {grid-column: 16 / span 1; grid-row: 4}

[class*="subject__2_"]{background: var(--subject2);}
.subject__2_L {grid-row: 5 / span 1;}
.subject__2_T {grid-row: 6 / span 1;}
.subject__2_P {grid-row: 7 / span 1;}
.subject__2_A {grid-row: 8 / span 1;}

.one-subject .subject__2_L{grid-row: 2;}
.one-subject .subject__2_T{grid-row: 3;}
.one-subject .subject__2_P{grid-row: 4;}
.one-subject .subject__2_A{grid-row: 5;}

[class*="subject2_L"]{grid-row: 5;}
.one-subject [class*="subject2_L"]{grid-row: 2;}
.subject2_L1 {grid-column: 3 / span 2;}
.subject2_L2 {grid-column: 5 / span 2;}
.subject2_L3 {grid-column: 7 / span 2;}
.subject2_L4 {grid-column: 9 / span 2;}
.subject2_L5 {grid-column: 11 / span 2;}
.subject2_L6 {grid-column: 13 / span 2;}
.subject2_L7 {grid-column: 15 / span 2;}

[class*="subject2_T"]{grid-row: 6;}
.one-subject [class*="subject2_T"]{grid-row: 3;}
.subject2_T1 {grid-column: 3 / span 2;}
.subject2_T2 {grid-column: 5 / span 2;}
.subject2_T3 {grid-column: 7 / span 2;}
.subject2_T4 {grid-column: 9 / span 2;}
.subject2_TMT {grid-column: 11 / span 1;}
.subject2_T5 {grid-column: 12 / span 1;}
.subject2_T6 {grid-column: 13 / span 2;}
.subject2_T7 {grid-column: 15 / span 2;}

[class*="subject2_P"]{grid-row: 7;}
.one-subject [class*="subject2_P"]{grid-row: 4;}
.subject2_P1 {grid-column: 3 / span 3;}
.subject2_P1S {grid-column: 6 / span 1;}
.subject2_P2 {grid-column: 7 / span 3;}
.subject2_P2S {grid-column: 10 / span 1;}
.subject2_PX {grid-column: 11 / span 1;}
.subject2_P3 {grid-column: 12 / span 3;}
.subject2_P3S {grid-column: 15 / span 1;}

[class*="subject2_A"]{grid-row: 8;}
.one-subject [class*="subject2_A"]{grid-row: 5;}
.subject2_A1 {grid-column: 4 / span 1;}
.subject2_A2 {grid-column: 5 / span 7;}
.subject2_A3 {grid-column: 12 / span 1;}
.subject2_A4 {grid-column: 15 / span 1;}

[class*="subject__3_"]{background: var(--subject3);}
.subject__3_L {grid-row: 9 / span 1;}
.subject__3_T {grid-row: 10 / span 1;}
.subject__3_P {grid-row: 11 / span 1;}
.subject__3_A {grid-row: 12 / span 1;}

.one-subject .subject__3_L{grid-row: 2;}
.one-subject .subject__3_T{grid-row: 3;}
.one-subject .subject__3_P{grid-row: 4;}
.one-subject .subject__3_A{grid-row: 5;}

[class*="subject3_L"]{grid-row: 9;}
.one-subject [class*="subject3_L"]{grid-row: 2;}
.subject3_L1 {grid-column: 3 / span 1;}
.subject3_L3 {grid-column: 5 / span 2;}
.subject3_L4 {grid-column: 7 / span 1;}
.subject3_L5 {grid-column: 8 / span 1;}
.subject3_L6 {grid-column: 9 / span 2;}
.subject3_L7 {grid-column: 11 / span 2;}
.subject3_L8 {grid-column: 13;}
.subject3_L9 {grid-column: 14;}
.subject3_L10 {grid-column: 15;}
.subject3_L11 {grid-column: 16;}

[class*="subject3_T"]{grid-row: 10;}
.one-subject [class*="subject3_T"]{grid-row: 3;}
.subject3_T1 {grid-column: 3 / span 1;}
.subject3_T3 {grid-column: 5 / span 2;}
.subject3_T4 {grid-column: 7 / span 1;}
.subject3_T5 {grid-column: 8 / span 1;}
.subject3_T6 {grid-column: 9 / span 1;}
.subject3_TMT {grid-column: 10 / span 1;}
.subject3_T7 {grid-column: 11 / span 2;}
.subject3_T8 {grid-column: 13;}
.subject3_T9 {grid-column: 14;}
.subject3_T10 {grid-column: 15;}
.subject3_T11 {grid-column: 16;}

[class*="subject3_P"]{grid-row: 11;}
.one-subject [class*="subject3_P"]{grid-row: 4;}
.subject3_P1 {grid-column: 3}
/* .subject3_P2 {grid-column: 2}*/
.subject3_P3 {grid-column: 5} 
.subject3_P4 {grid-column: 6 / span 2;}
.subject3_P5 {grid-column: 8 / span 5;}
.subject3_P6 {grid-column: 13 / span 2;}
.subject3_P7 {grid-column: 15 / span 2;}

[class^="subject3_A"]{text-transform: uppercase;}
[class*="subject3_A"]{grid-row: 12;}
.one-subject [class*="subject3_A"]{grid-row: 5;}
.subject3_A1 {grid-column: 5 / span 1;}
.subject3_A2 {grid-column: 6 / span 8;}
.subject3_A3 {grid-column: 14 / 15;}
.subject3_A4 {grid-column: 15;}
.subject3_A5 {grid-column: 16 / 17;}

.all-subject [class*="subject__4_"]{background: var(--subject4); color: transparent;}
[class*="subject__4_"]{background: var(--subject4); color: black;}
.subject__4_L {grid-row: 13 / span 2;}
.subject__4_P {grid-row: 15}
.subject__4_A {grid-row: 16}

.one-subject .subject__4_L{grid-row: 2 / span 1;}
.one-subject .subject__4_P{grid-row: 3 / span 1;}
.one-subject .subject__4_A{grid-row: 4 / span 1;}


.all-subject .subject__4, .all-subject [class*="subject4_"] {color: transparent;}
.subject__4, [class*="subject4_"] {color: black;}

[class*="subject4_L"] {grid-row: 13 / span 2;}
.one-subject [class*="subject4_L"] {grid-row: 2 / span 2;}
.subject4_L1 {grid-column: 3 / span 2; }
.subject4_L2 {grid-column: 5 / span 3; }
.subject4_L3 {grid-column: 8 / span 2; }
.subject4_LMT {grid-column: 10 / span 1; }
.subject4_L4 {grid-column: 11 / span 1; }
.subject4_L5 {grid-column: 12 / span 3; }
.subject4_L6 {grid-column: 15 / span 2; }

[class*="subject4_P"] {grid-row: 15}
.one-subject [class*="subject4_P"] {grid-row: 4}
.subject4_P1 {grid-column: 3 / span 4;}
.subject4_P2 {grid-column: 7 / span 3;}
.subject4_P3 {grid-column: 10 /span 2;}
.subject4_PSP {grid-column: 12 / span 2;}
.subject4_P4 {grid-column: span 1;}
.subject4_P5 {grid-column: 16/17;}

[class*="subject4_A"] {grid-row: 16}
.one-subject [class*="subject4_A"] {grid-row: 5}
.subject4_A1 {grid-column: 5}
.subject4_A2 {grid-column: 6 / 12;}
.subject4_A3 {grid-column: 12 / 13;}
.subject4_A4 {grid-column: 16;}

[class*="subject__"]{ display: grid; padding: 0.2em; text-align: center; font-weight: bold; align-content: center;}

.important{
    background: red !important;
    color: yellow !important;
}

.important2, .warning{
    background: yellow !important;
    color: red !important;
}

.all-subject .important, .all-subject .important2{
    color: transparent !important;
}

.all-subject .important:hover{
    color: yellow !important;
}

.all-subject .important2:hover{
    color: red !important;
}

h2{
    text-align: center;
    color: white;
}

.haveInner{
    flex-direction:column;
    background:rgba(0,0,0,0);
    padding:0
}

.haveInner .inner{
    display:grid;
    grid-template-rows:1fr 1fr;
    width:100%;
    height:100%;
    gap:.5em
}



.haveInner .inner > div{
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    align-items: center;
    justify-content: center;
}

.haveInner .inner > div.noBackground{
    background: none !important;
}

.inner > div.bleedTop{
    margin-top: -1em;
}
.inner > div.bleedBottom{
    margin-bottom: -1em;
}

.inner > div.bleedRight{
   margin-right: -1em;
}

.inner > div.bleedLeft{
    margin-left: -1em;
 }

.subject1.haveInner .inner > div{ background: var(--subject1); }
.subject2.haveInner .inner > div{  background: var(--subject2); }
.subject3.haveInner .inner > div{  background: var(--subject3); }
.subject4.haveInner .inner > div{  background: var(--subject4); }