/* ====================== General =========================================== */

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--bg-layer-0);
  font-family: 'Lato', sans-serif;
}
* {
  box-sizing: border-box;
}
:root {
  --bg-layer-0: rgb(10,9,9);                  /* body, table header, thumb in list */
  --bg-layer-1: rgb(20,18,18);                /* logo band, badge bg, movie table even row, modal window */
  --bg-layer-2: rgb(30,27,27);                /* header, menu, list options, movie table odd row, members background and selector, changelog, add movie readonly input */
  --bg-layer-3: rgb(39,35,35);                /* highlights */
  --bg-layer-4: rgb(47,42,42);                /* borders, hovers, scrollbar */
  --bg-modal: rgba(10,9,9,0.9);               /* lightly transparent modal background */

  --input-layer-0: rgb(95,85,85);             /* view changer border, badge no rating, radio not selected  */
  --input-layer-1: rgb(119,107,107);          /* radio hover */
  --input-layer-2: rgb(185,176,176);          /* chat/search box/review/login */

  --text-black: rgb(10,9,9);                  /* input/textarea */
  --text-dark-gray: rgb(150,148,148);         /* darker text, for disabled elements for example */
  --text-light-gray: rgb(185,183,183);        /* standard text, subtitles, comments */
  --text-white: rgb(220,218,218);             /* hover, emphasize, titles, button labels */

  --pmdb-green: rgb(90,129,65);               /* logos, titles, headings */
  --pmdb-purple: rgb(49,33,102);              /* buttons */

  --radius-window: 1vh;                       /* modal windows */
  --radius-section: 0.7vh;                    /* sections in windows */
  --radius-normal: 0.5vh;                     /* logos, inputs, posters */
  --radius-small: 0.3vh;                      /* small inputs, buttons */
}

#login {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#login_band {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 100vw;
  height: 35vh;
  background-color: var(--bg-layer-1);
  color: var(--text-light-gray);
  border: 1px solid var(--bg-layer-4);
}
#login_pmdb_logo {
  font-size: 5vh;
  border-radius: var(--radius-window);
  padding: 0 1vw;
  margin-bottom: 2vh;
  user-select: none;
}
#login_wrong {
  color: red;
  margin-top: 2vh;
}
#login_input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login_text_input {
  font-family: 'Lato', sans-serif;
  font-size: 1.4vh;
  display: inline-block;
  border-radius: var(--radius-small);
  border: 0;
  height: 2.7vh;
  width: 7vw;
  padding: 0.2vh 0.5vw;
  background-color: var(--input-layer-2);
  color: var(--text-black);
  margin: 1vh 0 0 0;
}
#submitLogin {
  margin-top: 1.5vh;
}
@media screen and (hover: none) and (pointer: coarse) {

  body {
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
  }
  html {
    height: -webkit-fill-available;
  }
  #login_band {
    margin-top: 40%;
    background-color: var(--bg-layer-0);
    border: 0;
  }
  #login_pmdb_logo {
    font-size: 4rem;
    padding: 1vw 3vw;
    margin-bottom: 5vw;
  }
  #login_wrong {
    margin-top: 5vw;
  }
  .login_text_input {
    font-size: 1.2rem;
    width: 60%;
    height: 10vw;
    padding: 1vw 3vw;
    margin: 3vw 0 0 0;
  }
  #submitLogin {
    font-size: 1.2rem;
    padding: 2vw 3vw;
    margin-top: 8vw;
  }
}

/* ====================== Mobile Version ==================================== */

#mobile_version {
  display: none;
}
#mobile_header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 15vw;
  gap: 4vw;
  padding-left: 2vw;
  background-color: var(--bg-layer-2);
}
#mobile_search {
  display: inline-block;
  height: 9vw;
  width: 68vw;
  padding: 1vw 2vw;
  font-family: 'Lato', sans-serif;
  font-size: 1.1rem;
  border: 0;
  border-radius: var(--radius-normal);
  background-color: var(--input-layer-2);
  color: var(--text-black);
}
#mobile_pmdb_logo {
  font-size: 1.75rem;
  padding: 0.5vw 1.5vw;
  height: 9vw;
  border-radius: var(--radius-normal);
}

#mobile_list_container {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 82vh;
  width: 100vw;
  margin-top: 6vw;
}
#mobile_list_scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 2vw 0 0;
  scroll-padding-top: 25%;
}
#mobile_list_title {
  margin-bottom: 6vw;
}
#mobile_list_flex {
  display: flex;
  flex-direction: column;
  gap: 3vw;
}
.mobile_list_movie_container {
  display: flex;
  padding: 0;
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-normal);
}
.mobile_list_movie_poster {
  height: 100%;
  max-width: 18vw;
  border-radius: var(--radius-normal);
}
.mobile_list_movie_desc {
  text-align: left;
  padding: 3vw 3vw;
  margin: 0;
}
.mobile_list_movie_title {
  color: var(--text-white);
  font-size: 1rem;
  font-weight: bold;
}
.mobile_list_movie_year {
  color: var(--text-light-gray);
  font-size: 0.9rem;
  font-weight: normal;
  margin-left: 2vw;
}
.mobile_list_movie_comm {
  margin-top: 5vw;
}
.mobile_list_label {
  font-size: 0.9rem;
  color: var(--text-dark-gray);
  margin-right: 1vw;
}
.mobile_list_value {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text-white);
  margin-right: 7vw;
}
.mobile_list_stars {
  font-size: 0.9rem;
  color: var(--text-dark-gray);
  margin-top: 3vw;
}
.mobile_list_stars starlabel {
  margin-right: 4.5vw;
}

#mobile_details {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  padding-bottom: 15vw;
  width: 100%;
  height: 100%;
  overflow: hidden;
	background-color: var(--bg-layer-1);
}
#mobile_details_container {
  border-bottom: 1px solid var(--bg-layer-4);
  position: relative;
  padding: 3vw;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
#mobile_details_title {
  color: var(--text-white);
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
}
#mobile_details_subtitle {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-light-gray);
  margin: 3vw 0 6vw 0;
}
.mobile_details_tag {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-light-gray);
  border-radius: var(--radius-normal);
  height: 6vw;
  padding: 0.7vw 1vw;
  margin-right: 2vw;
  white-space: nowrap;
}
.mobile_details_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3vw;
  margin: 4vw 0;
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-section);
  color: var(--pmdb-green);
  font-size: 1.2rem;
  font-weight: bold;
}
#mobile_details_header {
  display: flex;
  gap: 6vw;
}
#mobile_details_poster {
  object-fit: cover;
  max-width: 54vw;
  width: 54vw;
  border-radius: var(--radius-section);
}
#mobile_details_table {
  font-size: 0.9rem;
}
.mobile_details_label {
  font-weight: bold;
  color: var(--pmdb-green);
  padding: 1vw 0 1vw 0;
  white-space: nowrap;
  text-align: left;
}
.mobile_details_value {
  color: var(--text-white);
  font-weight: normal;
  padding: 0 0 2vw 0;
  white-space: normal;
}

#mobile_details_users {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  padding: 2vw;
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-section);
}
.mobile_details_users_rating {
  border-collapse: collapse;
  padding: 1vw;
  font-size: 1.3rem;
  user-select: none;
  display: flex;
  align-items: center;
}
#mobile_websites_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  gap: 5vw;
}
.mobile_website {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4vw 3vw;
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-section);
}
.mobile_website_value {
  display: flex;
  align-items: center;
  color: var(--text-white);
  font-weight: normal;
}
#mobile_website_imdb_link {
  background-color: #F5C518;
  font-size: 1.5rem;
  border-radius: var(--radius-small);
  padding: 1vw 2.8vw;
}
#mobile_website_pmdb_logo {
  font-size: 1.5rem;
  border-radius: var(--radius-small);
  padding: 1vw 2vw;
  user-select: none;
}
#mobile_website_roto_link img {
  height: 7vw;
}

.mobile_review_container {
  font-size: 0.9rem;
  border-radius: var(--radius-section);
  background-color: var(--bg-layer-2);
  margin-bottom: 6vw;
  padding: 3vw;
}
.mobile_review_header {
  display: flex;
  align-items: center;
  color: var(--text-light-gray);
  margin-bottom: 3vw;
}
.mobile_review_data {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
}
.mobile_review_name {
  color: var(--text-white);
  padding: 0;
}
.mobile_review_date {
  font-size: 0.8rem;
  padding: 0;
}
.mobile_review_text {
  color: var(--text-light-gray);
}

#mobile_search_clickstop {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 20vw;
  width: 100%;
  height: 100%;
  overflow: hidden;
	background-color: transparent;
}
#mobile_close_container {
  position: absolute;
  bottom: 3vw;
  left: 30%;
  width: 40%;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  background-color: var(--pmdb-purple);
  border-radius: var(--radius-section);
}
#mobile_watchlist_button {
  padding: 1.5vw 3vw;
  font-size: 1.0rem;
  font-weight: normal;
  border-radius: var(--radius-section);
}
.mobile_close {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 2vw;
}
.mobile_user_pic {
  height: 8vw;
  width: 8vw;
  border-radius: 50%;
  background-color: var(--text-light-gray);
  margin-right: 3vw;
}
h4 {
  color: var(--pmdb-green);
  font-size: 1.2rem;
  text-align: center;
  margin: 0
}

/* ====================== Desktop Version =================================== */

#desktop_version {
  display: none;
}

#header {
  position: absolute;
  top: 0;
  background-color: var(--bg-layer-2);
  width: 100%;
  height: 5vh;
  font-size: 1.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
}
.header_item {
  color: var(--text-light-gray);
}
#header_menu {
  color: var(--text-light-gray);
  position: absolute;
  top: 1.4vh;
  left: 1.5vw;
  display: inline-block;
}
#header_menu span:hover {
  color: var(--text-white);
}
#header_menu_content {
  display: none;
  position: absolute;
  z-index: 1;
}
#header_menu:hover #header_menu_content {
  display: block;
}
#header_menu_list {
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-normal);
  padding: 1vh 0.5vw;
  list-style-type: none;
}
#header_menu_list li {
  display: flex;
  align-items: center;
  gap: 0.7vw;
  font-size: 1.4vh;
  white-space: nowrap;
  margin-bottom: 1vh;
  padding: 0.6vh 0.7vw;
  border-radius: var(--radius-small);
}
#header_menu_list li:hover {
  color: var(--text-white);
  background-color: var(--bg-layer-4);
}
#header_menu_icon {
  color: var(--text-white);
  margin-right: 1vh;
  border-radius: var(--radius-small);
  padding: 0.3vh 0.3vw;
  font-size: 1.7vh;
  background-color: var(--bg-layer-4);
}
#header_pmdb_logo {
  font-size: 2.6vh;
  border-radius: var(--radius-normal);
  padding: 0 0.5vw;
}
#search {
  font-family: 'Lato', sans-serif;
  font-size: 1.4vh;
  display: inline-block;
  border-radius: var(--radius-normal);
  border: 0;
  height: 3vh;
  width: 20vw;
  padding: 0 0.6vw;
  background-color: var(--input-layer-2);
  color: var(--text-black);
}
#header_movie_amount {
  color: var(--text-white);
  font-weight: bold;
}
#header_profile {
  color: var(--text-light-gray);
  position: absolute;
  top: 1.4vh;
  right: 1.5vw;
  display: flex;
}
#header_profile:hover {
  color: var(--text-white);
}
.profile_pic {
  height: 2.4vh;
  width: 2.4vh;
  border-radius: 50%;
  background-color: var(--text-light-gray);
  margin-right: 0.4vw;
}
.profile_name {
  margin: auto 0.3vw;
}

/* ====================== Chat Mode ========================================= */

#community_chat {
  display: none;
  margin: 0 auto;
  margin-top: 8vh;
  width: 50vw;
}
#messages_padding_container {
  margin: 2vh auto;
  padding: 1vw 1.5vw;
  border-radius: var(--radius-section);
  background-color: var(--bg-layer-1);
}
#messages_container {
  width: 47vw;
  height: 65vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
#message_editor {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1vw;
  background-color: var(--bg-layer-1);
  border-radius: var(--radius-section);
  border: 1px solid var(--bg-layer-3);
}
#message_text {
  font-family: 'Lato', sans-serif;
  font-size: 1.4vh;
  border: 0;
  border-radius: var(--radius-section);
  resize: none;
  padding: 1vh;
  background-color: var(--input-layer-2);
  color: var(--text-black);
  width: 50vw;
  height: 10vh;
}
#message_buttons {
  display: flex;
  flex-direction: column;
  padding: 1vh;
  gap: 1vh;
}

/* ====================== Movie List ======================================== */

#list_container {
  display: none;
  margin: 10vh auto 0;
  width: 75vw;
}

#list_options {
  display: flex;
  flex-direction: column;
  width: 12.5vw;
  margin: 4vh 2vw 0 0;
  gap: 2vh;
  user-select: none;
}
.list_option {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-normal);
  background-color: var(--bg-layer-2);
  border: 1px solid var(--bg-layer-4);
  font-size: 1.4vh;
  padding: 1.5vh;
}
.list_option_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-white);
  font-weight: bold;
}
.list_option_title span {
  color: var(--pmdb-green);
}
#list_view_changer {
  display: flex;
  gap: 0;
  height: 2.6vh;
  border-radius: 0.4vh;
  border: 2px solid var(--input-layer-0);
}
#list_view_changer:hover {
  border: 2px solid var(--input-layer-1);
  background-color: var(--bg-layer-3);
}
#list_table_view {
  padding: 0.15vh 0.4vh 0.5vh 0.4vh;
  border-right: 1px solid var(--input-layer-0);
}
#list_gallery_view {
  padding: 0.2vh 0.4vh 0.5vh 0.4vh;
  border-left: 1px solid var(--input-layer-0);
}
.list_option_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1vh;
  margin-top: 1vh;
  padding: 1vh 0 0 0;
  color: var(--text-dark-gray);
  border-top: 1px solid var(--bg-layer-4);
}
.list_option_content p {
  color: var(--pmdb-green);
  margin: 0 0 0.5vh 0;
}
.list_option_group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4vw;
}
.list_option_group button {
  width: 2.5vw;
}
.list_option_select {
  font-size: 1.3vh;
  border-radius: var(--radius-small);
  background-color: var(--bg-layer-4);
  color: var(--text-light-gray);
  padding: 0.4vh 0.2vw;
  margin: 0;
  border: 1px solid var(--bg-layer-4);
  width: 10.8vw;
  cursor: pointer;
}
.list_option_checkmark {
  color: var(--pmdb-green);
  font-weight: bold;
  width: 1vw;"
}
#list_scroll {
  height: 88vh;
  width: 65vw;
  flex: 1;
  overflow-y: auto;
  padding: 0 1vw 0 0;
  /* Add padding to top, to prevent anchor jumps shifting the content behind the header */
  scroll-padding-top: 3.5vh;
}
#movie_no_result {
  padding: 2vh;
  margin-top: 4vh;
  font-size: 1.5vh;
  text-align: center;
  border-radius: var(--radius-small);
  background-color: var(--bg-layer-2);
  color: var(--text-white);
}

/* ====================== Table Mode ======================================== */

#movie_table {
  color: var(--text-white);
  font-size: 1.5vh;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0 0.7vh;
}
#movie_table th {
  background-color: var(--bg-layer-0);
  font-size: 1.8vh;
  font-weight: bold;
  white-space: nowrap;
  padding: 0.5vh 0.5vw;
  color: var(--pmdb-green);
  position: sticky;
  top: 0;
  text-align: center;
  scroll-margin-top: 5vh;
  z-index: 1;
}
#movie_table tr:nth-child(even) { background-color: var(--bg-layer-2); }
#movie_table tr:nth-child(odd) { background-color: var(--bg-layer-1); }
#movie_table tr:hover { background-color: var(--bg-layer-4); }
.movie_table_indicator {
  margin-left: 0.5vw;
  padding-bottom: 0.2vh;
  font-size: 1.6vh;
}
.movie_table_thumb {
  border-radius: var(--radius-small);
  height: 7vh;
  width: 2.5vw;
  object-fit: cover;
  margin: 0;
  padding: 0;
}
.movie_table_thumb_cell {
  background-color: var(--bg-layer-0);
  padding: 0 0.3vw 0 0;
  text-align: right;
}
.movie_table_title {
  padding: 0.5vh 0.5vw;
  border-radius: 0.3vh 0 0 0.3vh;
  text-align: left;
}
.movie_table_actors, .movie_table_director {
  padding: 0.5vh 0.5vw;
  white-space: nowrap;
  text-align: left;
}
.movie_table_reviews {
  padding: 0.5vh 0.5vw;
  border-radius: 0 0.3vh 0.3vh 0;
}

/* ====================== Gallery Mode ====================================== */

#movie_gallery {
  display: none;
}
#movie_gallery_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 4vh 2vw;
}
.movie_gallery_poster_container {
  position: relative;
  width: 8vw;
  height: 28vh;
  padding: 0;
}
.movie_gallery_poster {
  width: 8vw;
  height: 21vh;
  object-fit: cover;
  border-radius: 0.5vh 0.5vh 0 0;
  padding: 0;
  margin: 0;
}
.movie_gallery_poster_desc {
  text-align: center;
  margin: 0;
  border-radius: 0 0 0.5vh 0.5vh;
  width: 8vw;
  height: 7vh;
  background-color: var(--bg-layer-1);
  padding: 2vh 0.5vw 0.5vh 0.5vw;
}
.movie_gallery_poster_title {
  color: var(--text-white);
  font-size: 1.2vh;
  font-weight: bold;
}
.movie_gallery_poster_year {
  color: var(--text-light-gray);
  font-size: 1.2vh;
  font-weight: normal;
  margin-left: 0.7vh;
}
.movie_gallery_poster_comment {
  font-size: 1.2vh;
  color: var(--text-light-gray);
  line-height: 1.8vh;
  margin-top: 1.5vh;
  text-align: center;
}
.movie_gallery_poster_comment span {
  color: var(--text-white);
  margin-left: 0.3vw;
}
.pmdb_badge {
  width: 2.6vh;
  height: 2.6vh;
  border-radius: 50%;
  color: var(--text-white);
  background-color: var(--bg-layer-1);
  font-size: 1.1vh;
  padding: 0 0.1vh 0.1vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 3px 1px black;
}
.pmdb_badge_gallery {
  position: absolute;
  bottom: 5.7vh;
  left: 1vh;
}
.pmdb_badge_5 {
  border: 3px solid #009900;
}
.pmdb_badge_4 {
  border: 3px solid #82ac15;
}
.pmdb_badge_3 {
  border: 3px solid #b7b51e;
}
.pmdb_badge_2 {
  border: 3px solid #f0bd27;
}
.pmdb_badge_1 {
  border: 3px solid #b60a1c;
}
.pmdb_badge_0 {
  border: 3px solid var(--input-layer-0);
}

/* ====================== Updates Mode ====================================== */

#latest_updates {
  display: none;
  padding: 10vh 2vw 5vh 2vw;
  height: 100vh;
  flex-direction: row;
}
#latest_updates_movies {
  display: flex;
  flex-wrap: wrap;
  gap: 3vh 2.5vw;
  margin-bottom: 6vh;
  justify-content: center;
  width: 44vw;
  height: 100%;
  padding: 3vh 3vw;
  border-radius: var(--radius-window);
  background-color: var(--bg-layer-1);
}
#latest_updates_reviews {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6vh;
  justify-content: center;
  width: 52vw;
  height: 100%;
  padding: 3vh 2vw;
  border-radius: var(--radius-window);
  background-color: var(--bg-layer-1);
}
#latest_updates_separator {
  width: 4vw;
}

/* ====================== New Movies ======================================== */

.new_movies_container {
  position: relative;
}
.new_movies_gallery_poster {
  position: relative;
  width: 10vw;
  height: 30vh;
  object-fit: cover;
  border-radius: 0.8vh;
  padding: 0;
  margin: 0;
}
.new_movies_gallery_badge {
  position: absolute;
  bottom: 2.5vh;
  left: 0.7vw;
}

/* ====================== New Reviews ======================================= */

.user_review_main {
  gap: 2vh 0;
  height: 75vh;
  margin: 3vh 0 0 0;
  overflow-y: auto;
}
.user_review_container_new {
  display: flex;
  margin: 0 0 2vh 0;
}
.user_review_poster {
  height: 12vh;
  width: 4.2vw;
  object-fit: cover;
  border-radius: 0.5vh;
  margin-right: 0.8vw;
}
.user_review_box {
  border-radius: var(--radius-section);
  background-color: var(--bg-layer-2);
  margin: 0 0.7vw 2vh 0;
  height: 12vh;
  width: 100%;
}
.user_review_more {
  font-weight: bold;
  text-decoration: underline;
  margin-left: 0.6vw;
}
.user_review_box:hover .user_review_more {
  color: white;
}

/* ====================== Details Modal ===================================== */

#modal_details {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  padding-top: 2vh;
  width: 100%;
  height: 100%;
  overflow: auto;
	background-color: var(--bg-modal);
}
#modal_details_content {
  position: relative;
  margin: auto;
  padding: 3vh;
  width: 62vw;
  height: 96vh;
  background-color: var(--bg-layer-1);
  border: 1px solid var(--bg-layer-4);
  border-radius: var(--radius-window);
}

#modal_details_title {
  color: var(--text-white);
  font-size: 4vh;
  font-weight: bold;
  margin: 0 0 0.2vh 0;
}
#modal_details_subtitle {
  display: flex;
  align-items: center;
  font-size: 1.4vh;
  color: var(--text-light-gray);
  margin: 1vh 0 2vh 0;
}
.modal_details_tag {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-light-gray);
  border-radius: var(--radius-small);
  height: 2.5vh;
  padding: 0.2vh 0.3vw;
  margin-right: 0.6vw;
}
#modal_details_container {
  display: flex;
  padding-top: 1vh;
  height: 32vh;
}
#modal_details_poster_container {
  width: 13vw;
  margin-right: 2.5vw;
  padding: 0;
}
#modal_details_poster {
  max-height: 31vh;
  border-radius: var(--radius-section);
  width: 100%;
}
#modal_details_table_container {
  width: 100%;
}
#modal_details_table {
  font-size: 1.5vh;
  margin-right: 2.5vw;
}
.modal_details_label {
  font-weight: bold;
  color: var(--pmdb-green);
  padding: 0.4vh 0.5vw 0.4vh 0.2vw;
  white-space: nowrap;
  text-align: right;
}
.modal_details_value {
  color: var(--text-white);
  font-weight: normal;
  padding: 0.4vh;
  white-space: normal;
}

#community_title {
  display: flex;
  align-items: center;
  padding: 1vh;
  margin: 2vh 0;
  height: 5vh;
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-section);
}
#community_title_text {
  color: var(--pmdb-green);
  font-size: 2vh;
  font-weight: bold;
}
#community_title_buttons {
  display: flex;
  gap: 0.7vw;
  border-radius: var(--radius-small);
  padding: 0.7vh 0.5vw;
  margin-left: 2.5vw;
}
#community_share_label {
  display: flex;
  align-items: center;
}
#community_share_label img {
  height: 1.0vh;
}
#community_link_copied {
  padding: 0.4vh 0.3vw;
  margin-left: 0.5vw;
  font-size: 1.2vh;
  color: var(--text-light-gray);
}
#communtiy_content {
  display: flex;
  gap: 2vh;
  height: 39vh;
}

#community_websites_container {
  position: absolute;
  top: 15vh;
  right: 3vh;
  padding: 2vh;
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-section);
  display: grid;
  grid-template-columns: auto auto;
  gap: 2vh;
}
.community_websites_grid {
  text-align: right;
  align-self: center;
}
#ratings_imdb_link {
  background-color: #F5C518;
  font-size: 2vh;
  border-radius: var(--radius-small);
  padding: 0.1vh 0.55vw;
}
#ratings_pmdb_logo {
  font-size: 2vh;
  border-radius: var(--radius-small);
  padding: 0.1vh 0.4vw;
  user-select: none
}
#ratings_roto_link img {
  height: 2.2vh;
}
#ratings_roto, #ratings_imdb {
  color: var(--text-white);
  font-size: 1.4vh;
  align-self: center;
}
#ratings_pmdb {
  align-self: center;
  user-select: none
}

#community_users_container {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
  padding: 1vh;
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-section);
}
.community_users_rating {
  border-collapse: collapse;
  padding: 0.4vh 0.5vw 0.6vh 0.2vw;
  font-size: 1.8vh;
  user-select: none;
  display: flex;
  align-items: center;
}
.community_users_rating_high {
  background-color: var(--bg-layer-3);
  border-radius: var(--radius-normal);
}
.star_yellow {
  color: #F5C518;
  margin-bottom: 0.4vh;
}
.star_gray {
  color: #aaa8a8;
  margin-bottom: 0.4vh;
}
.star_not_rated {
  color: #444242;
  margin-bottom: 0.4vh;
}

#community_review_container {
  width: 100%;
  overflow-y: auto;
}
.user_review_container {
  border-radius: var(--radius-section);
  background-color: var(--bg-layer-2);
  margin: 0 0.7vw 2vh 0;
}
.user_review_header {
  display: flex;
  align-items: center;
  padding: 1vh 1vh 0.5vh 1vh;
  color: var(--text-light-gray);
}
.user_review_data {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
}
.user_review_pic {
  height: 2.4vh;
  width: 2.4vh;
  border-radius: 50%;
  background-color: var(--text-light-gray);
  margin-right: 0.4vw;
}
.user_review_name {
  color: var(--text-white);
  font-size: 1.4vh;
  padding: 0;
}
.user_review_date {
  font-size: 1.2vh;
  padding: 0;
}
.user_review_text {
  padding: 1vh;
  font-size: 1.4vh;
  color: var(--text-light-gray);
}

#community_edit_container {
  display: none;
  width: 100%;
}
#community_user_textarea {
  font-family: 'Lato', sans-serif;
  font-size: 1.4vh;
  border: 0;
  border-radius: var(--radius-section);
  resize: none;
  padding: 1vh;
  background-color: var(--input-layer-2);
  color: var(--text-black);
  width: 100%;
  height: 36vh;
}
#community_user_textarea_buttons {
  display:flex;
  flex-direction: column;
  padding: 0.5vh;
  gap: 1vh;
  width: 5vw;
}

/* ====================== User Rating Modal ================================= */

#modal_rating {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
	background-color: var(--bg-modal);
}
#modal_rating_content {
  margin: 30vh auto;
  padding: 3vh;
  width: 20vw;
  height: 25vh;
  background-color: var(--bg-layer-1);
  border: 1px solid var(--bg-layer-4);
  border-radius: var(--radius-window);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ====================== Stars ============================================= */

#align_stars {
  height: 6vh;
  width: 12vw;
  margin-bottom: 2vh;
  display: flex;
  justify-content: center;
}
.user_stars {
  float: left;
  padding-left: 0.2vw;
}
.user_stars:not(:checked) > input {
  position: absolute;
  top: -9999px;
}
.user_stars:not(:checked) > label {
  float: right;
  width: 2vw;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 2vw;
  color: #aaa8a8;
}
.user_stars:not(:checked) > label:before {
  content: '★ ';
}
.user_stars > input:checked ~ label {
  color: #F5C518;
}
.user_stars:not(:checked) > label:hover,
.user_stars:not(:checked) > label:hover ~ label {
  color: #deb217;
}
.user_stars > input:checked + label:hover,
.user_stars > input:checked + label:hover ~ label,
.user_stars > input:checked ~ label:hover,
.user_stars > input:checked ~ label:hover ~ label,
.user_stars > label:hover ~ input:checked ~ label {
  color: #c59b08;
}

/* ====================== Buttons =========================================== */

.pmdb_button {
  border: 0;
  padding: 0.5vh 0.4vw;
  font-family: 'Lato', sans-serif;
  font-size: 1.1vh;
  font-weight: bold;
  border-radius: var(--radius-small);
  cursor: pointer;
  color: var(--text-white);
}
.pmdb_button:disabled {
  background-color: #555353;
  color: var(--text-dark-gray);
  cursor: not-allowed;
}
.pmdb_button_green {
  background-color: #316621;
}
.pmdb_button_green:hover:enabled {
  background-color: #417631;
}
.pmdb_button_red {
  background-color: #662121;
}
.pmdb_button_red:hover:enabled {
  background-color: #763131;
}
.pmdb_button_purple {
  background-color: var(--pmdb-purple);
}
.pmdb_button_purple:hover:enabled {
  background-color: #413176;
}

#rating_buttons {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
#applyFilter {
  width: 2.6vw;
  margin: 0 0 0 1vw;
}
#getIMDbData {
  padding: 0.7vh 0.5vw;
}
#submitMovie, #updateMovie {
  padding: 0.7vh 0.5vw;
  float: right;
  margin-right: 0.5vw;
}
#loadmore {
  width: 50vw;
  padding: 2vw 0;
  margin: 5vw 25% 3vw 25%;
  font-size: 1rem;
  border-radius: var(--radius-section);
}

/* ====================== Menu Items Modal ================================== */

#modal_menuitems {
  display: none;
  position: fixed;
  z-index: 2;
  padding-top: 4vh;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
	background-color: var(--bg-modal);
}
#modal_menuitems_content {
  position: relative;
  margin: auto;
  padding: 4vh;
  width: 50vw;
  height: 90vh;
  background-color: var(--bg-layer-1);
  border: 1px solid var(--bg-layer-4);
  border-radius: var(--radius-window);
}
.modal_selector {
  display: flex;
  flex-direction: column;
  font-size: 1.6vh;
  width: 9vw;
  padding-top: 3vh;
}
.modal_content {
  width: 100%;
  height: 74vh;
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-section);
  padding: 2.5vh;
  color: var(--text-light-gray);
  font-size: 1.4vh;
  overflow-y: auto;
}
.modal_content b {
  color: var(--pmdb-green);
}
.modal_selector_entry, .modal_selector_entry_select {
  color: var(--text-light-gray);
  padding: 0.8vh 0.8vw;
  border-radius: 0.5vh 0 0 0.5vh;
  text-align: right;
  margin-bottom: 0.8vh;
}
.modal_selector_entry:hover {
  color: var(--text-white);
  background-color: var(--bg-layer-2);
}
.modal_selector_entry_select {
  background-color: var(--bg-layer-2);
  font-weight: bold;
  color: var(--pmdb-green);
}
.modal_head_label {
  color: var(--text-light-gray);
  margin-right: 0.5vw;
}
.modal_head_value {
  color: var(--text-white);
  margin-right: 0.5vw;
}

#members_page {
  display: none;
  margin: 0;
  padding: 0;
}
#members_container {
  display:flex;
  height: 100%;
}
#members_text li {
  margin-bottom: 0.5vh;
  padding-left: 0.3vw;
}
.members_pic {
  height:10vh;
  float:left;
  margin: 0 1vw 1vh 0;
  border-radius: var(--radius-normal);
}
.members_count {
  color: var(--pmdb-green);
  text-decoration: none;
}
.members_count:hover {
  text-decoration: underline;
}
#updates_page {
  display: none;
  margin: 0;
  padding: 0;
}
#updates_container {
  overflow-y: auto;
  padding-right: 1vh;
  height: 74vh;
}
.updates_text {
}
.update_content {
  background-color: var(--bg-layer-2);
  border-radius: var(--radius-section);
  padding: 2vh;
  color: var(--text-light-gray);
  font-size: 1.4vh;
  margin-bottom: 3vh;
}
.update_content ul {
  line-height: 1.9vh;
}

/* ====================== Add Movie ========================================= */

#add_movie_page {
  position: relative;
}
#add_table {
  text-align: left;
  margin: 4vh 0 0 2vw;
  border-collapse: separate;
  border-spacing: 0.9vh;
}
#add_table th:first-child {
  color: var(--pmdb-green);
  font-weight: bold;
  white-space: nowrap;
  padding-right: 0.5vh;
  text-align: right;
  font-size: 1.5vh;
}
#add_table td:first-child {
  text-align: right;
}
#add_table td {
  color: var(--text-white);
  font-size: 1.4vh;
  white-space: nowrap;
  padding-right: 0.5vh;
}
#add_table input {
  width: 38vw;
  background-color: var(--bg-layer-2);
  border: 0;
  border-radius: var(--radius-small);
  color: var(--text-light-gray);
  font-family: 'Lato', sans-serif;
  font-size: 1.2vh;
  text-align: left;
  height: 2.4vh;
  padding: 0.5vh;
  white-space: normal;
}
#add_result {
  text-align: center;
}

/* ====================== Miscellaneous ===================================== */

h1 {
  color: var(--text-white);
  margin: 0 0 3vh 0;
}
h2 {
  color: var(--pmdb-green);
  text-align: center;
  margin: 0 0 0 0;
  width: 100%;
}
h3 {
  color: var(--pmdb-green);
  font-size: 2vh;
}
hr {
  margin: 0.7vh 0 2vh 0;
  border:0;
  border-bottom: 1px solid var(--pmdb-green);
}
mark {
  opacity: 0.7;
  border-radius: var(--radius-small);
  padding: 0.05vh;
}
a {
  color: var(--pmdb-green);
}

.pmdb_logo {
  background-color: var(--pmdb-green);
  color: var(--text-black);
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  text-decoration: none;
}

.close {
  color: var(--text-white);
  position: absolute;
  top: 1vh;
  right: 1vw;
  font-size: 3vh;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: var(--text-light-gray);
  text-decoration: none;
  cursor: pointer;
}
.cursor {
  cursor: pointer;
  user-select: none;
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -6vh;
  width: auto;
  padding: 1vh;
  color: var(--text-white);
  font-weight: bold;
  font-size: 1.8vh;
  transition: 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
}
.next {
  right: -1.6vw;
  border-radius: 0 0.3vh 0.3vh 0;
}
.prev {
  left: -1.6vw;
  border-radius: 0.3vh 0 0 0.3vh;
}
.prev:hover,
.next:hover {
  background-color: var(--bg-layer-1);
}

::-webkit-scrollbar {
  width: 1.5vh;
}
@media screen and (hover: none) and (pointer: coarse) {
  ::-webkit-scrollbar {
      -webkit-appearance: none;
      display: none;
  }
}
::-webkit-scrollbar-track {
  background-color: rgb(30,27,27);
  border-radius: var(--radius-small);
}
::-webkit-scrollbar-thumb {
  background-color: rgb(80,72,72);
  border-radius: var(--radius-small);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(100,90,90);
}