@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,500&family=Prompt&display=swap');
/*Discord color theme
   --dark1: #202225;
   --dark2: #292b2f;
   --dark3: #2f3136;
   --dark4: #40444b;
*/

:root {
  --dark1: #2e3440;
  --dark2: #3b4252;
  --dark3: #434c5e;
  --dark4: #4c566a;
  --gray1: #eceff4;
  --gray2: #e5e9f0;
  --gray3: #d8dee9;
  --frost1: #8fbcbb;
  --frost2: #88c0d0;
  --frost3: #81a1c1;
  --aurora1: #bf616a;
  --aurora2: #d08770;
  --aurora3: #ebcb8b;
  --aurora4: #a3be8c;
  --aurora5: #b48ead;
  --accent1: #F94144;
  --accent2: #F3722C;
  --accent3: #f8961e;
  --accent4: #f9844a;
  --accent5: #f9c74f;
  --tag_size: 100%;
   --accent_co0: #0a369d;
   --accent_co1: #4472ca;
   --accent_co2: #5e7ce2;
   --accent_co3: #92b4f4;
   --accent_co4: #cfdee7;
}

html {
  background-color: var(--dark1);
  color: var(--gray3);
  font-family: "Open Sans";
}

.mm-default {
  background-color: var(--dark3);
  width: max(500px, max-content);
  height: min(500px, max-content);
  border-radius: 4px;
  filter: drop-shadow(0px 1px 1px black);
  padding: 10px;
  transition: filter 250ms ease-out;
  max-height: 100%;
    user-select: none;
}

.mm-default:hover {
  filter: drop-shadow(0px 2px 1px black);

}

/********POPUP ON OPEN**********/
.mm-intro-popup {
    width: 100%;
    z-index: 10;
    height: 100%;
    position: fixed;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    background-color: var(--dark2);
}

.mm-tutorial-holder {
    display: flex;
    flex-direction: row;
    gap: 2ch;
    align-content: center;
    align-items: center;
}

.mm-tut-box {
    display: flex;
    flex-direction: column;
}

.mm-tut-box > h3,
.mm-tut-box > p
{
margin: 4px;
}


/********DEFAULT CONTAINERS*******/

.mm-container {
  width: 120ch;
  height: 700px;
  align-items: center;
  margin: auto;
    margin-top: 2ch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--dark2);
}

.mm-accent {
  color: var(--gray3);
  background-color: var(--dark4);
  border-radius: 6px;
  padding: 3px;
  text-align: center;
  filter: drop-shadow(0px 1px 1px black);
}

.mm-settings {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
}

.mm-toggle {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 24px;
    cursor: pointer;
    color:
}

.mm-navigation {
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  padding: 10px;
  width: 70%;
    color: var(--accent_co3);
    text-shadow: 1px 1px 1px var(--dark1);
}

.mm-viewer {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px;
}

.mm-mini-nav {
  display: flex;
  width: 25ch;
  flex-direction: column;
  max-height: 100%;
}
/************************************************************/
/* BLOCK CHOOSING */

.mm-block-parent {
margin-top: 1ch;
display: flex;
padding: 5px 2px 5px 2px;
align-items: center;
background-color: var(--dark2);
justify-content: space-between;
}

.mm-arrow:hover {
color: var(--aurora1);
cursor: pointer;
}


/************************************************************/
/* DATE CHOOSING */

.mm-collapser {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  line-height: 300px;
  text-align: center;
  width: 2ch;
  background-color: var(--frost2);
  opacity: 1;
  z-index: 2;
  color: var(--dark2);
  cursor: pointer;
}

.mm-collapser:hover {
  opacity: 1;
}

.mm-collapsible-dates {
  overflow: hidden;
  width: 20px;
  height: 300px;
  position: absolute;
  left: 0ch;
  z-index: 3;
  transition: width 200ms ease-out;
}

ul {
  padding: 5px;
  margin-left: 5px;
}

.mm-dates-list {
  position: relative;
  left: 0px;
}

.mm-week-holder {
  margin: 10px;
  line-height: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.mm-date-chip {

}

.mm-button {
  display: inline-block;
  font-size: 14px;
    background-color: var(--dark3);
  width: max(500px, max-content);
  height: min(500px, max-content);
  border-radius: 4px;
  filter: drop-shadow(0px 1px 1px black);
  padding: 5px;
  transition: filter 250ms ease-out;
  max-height: 100%;
  transition: transform 250ms ease-out, filter 250ms ease-out;
}

.mm-button:hover {
  transform: translateY(-5%);
  filter: drop-shadow(0px 3px 3px #00000070);
  cursor: pointer;
}

.mm-button:active {
  background-color: var(--dark1);
  color: var(--frost2);
}

.mm-date-chip-selected {
  background-color: var(--dark2);
  color: var(--frost3);
}

/* LECTURE CHOOSING */

.mm-days-box {
  margin-top: 10px;
}

.mm-day {
  display: inline-block;
    padding: 0px 7px 0px 7px;
    border-radius: 4px;
}

.mm-day:hover {
  cursor: pointer;
  background-color: var(--dark2);
}

.mm-day:active {
    background-color: var(--dark1);
    color: var(--frost1);
}

.mm-lecture {
  text-align: center;
  margin: 3px;
  padding: 6px 3px 6px 3px;
}

.mm-lecture:hover {
  cursor: pointer;
    opacity: 0.7;
}

.mm-lecture:active {
    background-color: var(--dark1);
    color: var(--gray1);
}

.mm-dow-selected {
  color: var(--frost3);
        background-color: var(--dark2);
}
/* RESULTS TABLE */

.mm-results {
  max-height: 60ch;
  overflow: scroll;
  overflow-x: hidden;
}

.mm-results-table {
  width: 50ch;
  overflow: scroll;
}

tr:nth-child(even) {
  background-color: var(--dark4);
}

table {
    border-collapse: collapse;
}
td {
  padding: 10px 10px 7px 10px;
  border: 1px solid;
  border-color: var(--dark1);

  height: 4ch;
}

th {
  cursor: pointer;
}

.mm-highlighted {
    color: var(--frost3);
}

.mm-genre {
    padding: 0px 6px 0px 6px;
    border-radius: 4px;
    background-color: var(--dark1);
    width: max-content;
    font-size: 70%;
    opacity: 0.8;
    margin-right: 3px;
    transition: transform 250ms ease-out;
}

.mm-2 > .mm-video-tags > .mm-genre,
.mm-3 > .mm-video-tags > .mm-genre,
.mm-4 > .mm-video-tags > .mm-genre,
.mm-5 > .mm-video-tags > .mm-genre {
    color: var(--gray1);
}

.mm-2 > .mm-video-tags > .mm-video-tags-filler .mm-genre,
.mm-3 > .mm-video-tags > .mm-video-tags-filler .mm-genre,
.mm-4 > .mm-video-tags > .mm-video-tags-filler .mm-genre,
.mm-5 > .mm-video-tags > .mm-video-tags-filler .mm-genre {
    color: var(--gray1);
}

.mm-video-tags {
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.mm-selectable {
  cursor: pointer;
    font-size: 120%;
}
.mm-selectable:hover {
  /*color: var(--gray1);*/
  opacity: 0.8;
}

/*.mm-selectable:hover:after {
content: attr(data-score);
color: black;
}*/

.mm-included {
font-size: var(--tag_size);
color: #5cab61;

}

.mm-count {
font-size: var(--tag_size);
color: var(--dark4);
background-color: var(--accent_co3);
width: 1ch;
transition: all 250ms ease-out;
}

.mm-count:after {
opacity: 0;
font-family: "Calibri";
font-size: 80%;
content: "Freq. Match";
}
.mm-count:hover::after {opacity:1;}

.mm-count:hover {
width: 6rem;
width-max: 6rem;
}

.mm-best {
font-size: var(--tag_size);
color: var(--gray1);
background-color: var(--accent_co2);
width: 1ch;
transition: all 250ms ease-out;
}
.mm-best:after {
opacity: 0;
font-family: "Calibri";
font-size: 80%;
content: "Best Indv Match";
}
.mm-best:hover::after {opacity:1;}

.mm-best:hover {
width: 7.5rem;
width-max: 7.5rem;
}


.mm-avg {
font-size: var(--tag_size);
color: var(--gray1);
background-color: var(--accent_co1);
width: 1ch;
transition: all 250ms ease-out;
}

.mm-avg:after {
opacity: 0;
font-family: "Calibri";
font-size: 80%;
content: "High Avg Fit";

}
.mm-avg:hover::after {opacity:1;}

.mm-avg:hover {
width: 6rem;
width-max: 6rem;
}

.mm-title {
font-size: var(--tag_size);
color: var(--gray1);
background-color: var(--accent_co0);
width: 1ch;
transition: all 250ms ease-out;
}

.mm-title:after {
opacity: 0;
font-family: "Calibri";
font-size: 80%;
content: "Title Match";
}
.mm-title:hover::after {opacity:1;}

.mm-title:hover {
width: 6rem;
width-max: 6rem;
}

.mm-index {
font-size: var(--tag_size);
color: var(--dark4);
background-color: var(--accent_co4);
width: 1ch;
transition: all 250ms ease-out;
}
.mm-index:after {
opacity: 0;
font-family: "Calibri";
font-size: 80%;
content: "Index Match";
}
.mm-index:hover::after {opacity:1;}

.mm-index:hover {
width: 6rem;
width-max: 6rem;
}

.mm-glow {
box-shadow: inset 0px 0px 10px var(--accent_co2);
/*animation: 1000ms infinite alternate glow linear;*/
}

@keyframes glow {
0% {  box-shadow:

    inset 0px 0px 5px var(--frost3);}
100% {  box-shadow:

    inset 0px 0px 10px var(--frost3);}
}


.mm-fade {
opacity: 0.5;
}

/* VIDEO LIST */

.mm-day-lecture-list {
  width: 30ch;
}

.mm-lecture-card {
  margin: 5px;
  border-radius: 2px;
  padding: 0px 6px 0px 6px;
}

.mm-lecture-card:hover {
  cursor: pointer;
  color: var(--gray2);
}

.mm-lecture-card:before {
content: "-"
}

.mm-2 {
  color: var(--dark1);
    opacity: 1;
  background-color: var(--aurora3);
}

.mm-3 {
  color: var(--dark1);
    opacity: 1;

  background-color: var(--aurora5);
}

.mm-4 {
  color: var(--dark1);
      opacity: 1;

  background-color: var(--aurora4);
}

.mm-5 {
  background-color: var(--frost2);
      opacity: 1;

  color: var(--dark1);
}

.mm-suggest-lecture-heading {
    border-radius: 4px;
    margin-top: 7px;
    display: none;
    padding: 5px;
}

/********************* ICONS ****************/

.material-symbols-outlined {
/*display: flex;
align-items: center;
flex-basis: 0;*/
}


/* TABLE INFO */

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

tr {
  border-radius: 10px;
  padding: 4px;
}

tr:hover {
  background-color: var(--dark2);
}



tr:active {
  background-color: var(--dark1);
}

/*******************SAVE AND EXPORT************************/

.mm-bottom-row {

    position: absolute;
    right: 3ch;
    bottom: 2ch;
    justify-content: space-between;
}

.mm-bottom-button-holder {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.mm-has-icon {
display:flex;
align-items: center;
}

.mm-save-notification {
position: absolute;
top: 0px;
left: -50%;
z-index: 105;
animation: float_away 1000ms linear;
transform: translateY(-100%);
}

@keyframes float_away {
0% {opacity:1; transform: translateY(-100%);}
50% {opacity:1;}
100% {opacity:0; transform: translateY(-200%);}
}