:root[data-theme='light'] {
  --background: rgb(230, 230, 230);
  --reg-text: rgb(50, 50, 50);
  --div-background: rgb(255, 255, 255);
  --border-colour: rgb(200, 200, 200);
  --navbar-background: rgb(50, 50, 50);
  --link-colour: rgb(70, 70, 70);
  --link-hover-colour: black;
  --bolder-border-colour: rgb(100, 100, 100);
  --current-day-outline: black;
  --progress-bar-colour: rgb(200, 200, 200);
  --HotC-colour: rgb(60, 0, 120);
  --MH-colour: rgb(100, 0, 0);
  --feature-request: rgb(170, 290, 150);
  --nav-link-colour: rgba(255, 255, 255, .55);
  --text-muted-colour: rgb(98,117,125);
  --input-focus-colour: white;
}
:root[data-theme='dark'] {
  --background: rgb(40, 40, 40);
  --reg-text: rgb(255, 255, 255);
  --div-background: rgb(70, 70, 70);
  --border-colour: rgb(120, 120, 120);
  --navbar-background: rgb(70, 70, 70);
  --link-colour: rgb(200, 200, 200);
  --link-hover-colour: white;
  --bolder-border-colour: rgb(100, 100, 100);
  --current-day-outline: black;
  --progress-bar-colour: rgb(200, 200, 200);
  --HotC-colour: rgb(120, 50, 240);
  --MH-colour: rgb(200, 50, 50);
  --feature-request: rgb(60, 120, 50);
  --nav-link-colour: white;
  --text-muted-colour: rgb(180, 180, 180);
  --input-focus-colour: rgb(120, 120, 120);
}


body {
  background: var(--background);
  color: var(--reg-text);
  margin-top: 4rem;
  font-family: 'Trebuchet MS';
}

html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background: rgb(180,180,180);
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
html::-webkit-scrollbar-thumb {
  background-color: rgb(80,80,80);
  border-radius: 4px;
}

p {
  margin-bottom: 0px !important;
}
/* Navigation at the top of the website */
.navbar {
  background-color: var(--navbar-background);
  box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.1);
}

.nav-link {
  color: var(--nav-link-colour) !important;
  padding: 4px 8px;
}
.nav-link:hover {
  color: rgba(255, 255, 255, .75) !important;
}

.text-muted {
  color: var(--text-muted-colour) !important;
}

.form-control {
  background-color: var(--div-background);
  color: var(--reg-text);
}
.form-control:focus {
  background-color: var(--input-focus-colour);
}
#feed-body{
  background-color: red !important;
}

/* The standard styling of divs that have content */
.content-section {
  background: var(--div-background);
  border: 1px solid var(--border-colour);
  padding: 10px 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  word-wrap: break-word;
  box-shadow: 5px 5px 8px rgba(0,0,0,0.05);
}
/* Apply an indent to style general content */
.article-content {
  text-indent: 25px;
}
/* Whenever there is a content-section somewhere inside another content-section */
.content-section .content-section{
  border: 2px solid var(--border-colour);
  box-shadow: none;
}

.side-bar-link {
  position: relative;
  display: block;
  padding: .5rem 1rem;
  background-color: var(--div-background);
  border: 1px solid var(--background);
  border-radius: ;
  box-sizing: border-box;
}

.custom-link {
  text-decoration: none;
  color: var(--link-colour);
}

.custom-link:hover {
  color: var(--link-hover-colour);
  cursor: pointer;
}
/* Styling various dropdown menus */
.dropdown-menu {
    min-width: 80%;
}

.admin-dropdown {
  background-color: var(--navbar-background);
}
/* Simply removing bullet points a list with this class */
.bare-list {
    list-style: none;
}
/* Styling the 'eye' icon for password fields */
.eye-parent {
    position: relative;
}

.eye-icon {
    position: absolute;
    top: 50%;
    right: 1.8%;
    cursor: pointer;
}

.btn-xs {
  padding: .5rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}
/* Styling various elements to appear hidden */
.todo-list, .hymn-fields, #show-more, #add-task-input, 
#cancel-task, #submit-task, #HotC-wrapper-div, #MH-wrapper-div {
  display: none;
}



/* Posts */
.article-title {
  color: var(--link-colour);
  text-decoration: none;
  font-weight: 500;
  font-size: 35px;
}

a.article-title:hover {
  color: var(--link-hover-colour);
  text-decoration: none;
}

.article-img {
  height: 55px;
  width: 55px;
  margin-right: 16px;
  border: 2px solid var(--border-colour);
}
/* Stuff like username and date/time */
.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-colour);
}

.comment-img {
    height: 40px;
    width: 40px;
}

.vote-button {
    float: right;
    font-size: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.voting-feedback-info {
    float: right;
    font-size: 12px;
}
/* Styling for images that users might put in posts */
.media-body img {
    width: 90%;
}
/* Make it flex to be able to centre feature request text, but not image */
.article-headers {
  display: flex;
}
/* Green 'Feature Request' text in a feature request post */
.feature-request-flag {
  font-size: 18px;
  color: rgb(40, 180, 40);
  margin-left: auto;
  margin-right: auto;
}




/* Personal account page */
.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

/* Chess program pages */
@font-face {
  font-family: 'Menlo Regular';
  src: url('fonts/Menlo-Regular.woff') format('woff');
}
.py-terminal {
  font-family: 'Menlo Regular';
  overflow-y: auto;
  height: 450px;
  border-radius: 4px;
}

#py-input {
  border-radius: 2px;
  padding: 3px;
  width: 25%;
}



/* Trips */
.trip-preview {
  background: var(--div-background);
  border: 2px solid var(--bolder-border-colour);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  word-wrap: break-word;
  text-align: center;
}

.trip-preview-img {
  width: 100%;
  margin-top: 5px;
}

.trip-preview-text {
  font-size: 14px;
  text-indent: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: left;
}

.trip-preview-title {
  color: var(--link-colour);
}

.trip-preview-title:hover {
  text-decoration: none;
  color: var(--link-hover-colour);
}

#map {
  width: 100%;
  height: 540px;
  border: 2px solid var(--bolder-border-colour);
  border-radius: 5px;
  margin-bottom: 20px;
}

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

.next-link {
  float: right;
}

.back-link {
  float: left;
}

.next-link, .back-link {
  font-size: 16px;
  margin-bottom: 5px;
  margin-top: 5px;
  color: var(--link-colour);
}

.next-link:hover, .back-link:hover {
  color: var(--link-hover-colour);
}

.day-image {
  width: 100%;
  border: 2px solid var(--bolder-border-colour);
  border-radius: 5px;
  margin-bottom: 10px;
}

.day-video {
  width: 100%;
  border: 2px solid var(--bolder-border-colour);
  border-radius: 5px;
}



/* Hymn Tracking pages */
.hymn-field {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--border-colour);
  background-color: var(--div-background);
  color: var(--reg-text);
}

/* Dropdown list items */
.select2-results__option:not(:hover),
.select2-search, .select2-search__field,
.select2-selection__rendered, .period-select,
.select2-selection {
  background-color: var(--div-background) !important;
  color: var(--reg-text) !important;
}
.select2-results__option--selected:not(:hover) {
  background-color: var(--border-colour) !important;
}
.select2-results__option:hover {
  background-color: var(--border-colour) !important;
}


.hymn-field:not(#submit) {
  padding: 1px 4px 2px 8px;
}
.hymn-field:focus {
  background-color: var(--input-focus-colour);
}

.hymn-submit-inst {
  display: none;
  float: right;
}

#invalid-selection {
  display: none;
  color: rgb(250, 100, 100);
}

.create-instance-field {
  padding: 1px 6px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--border-colour);
}

#hymnsing-fields {
  margin-bottom: 8px;
}

.select2-selection {
  border: 1px solid var(--border-colour) !important;
}

.hymn-number-M {
  color: var(--MH-colour);
}

.hymn-number-H {
  color: var(--HotC-colour);
}

.selected-day {
  border: 2px solid var(--current-day-outline) !important;
}

.occasion-text {
  font-weight: bold;
  display: block;
  margin: 8px;
  color: var(--link-colour);
  text-decoration: none;
}

.occasion-text:hover {
  color: var(--link-hover-colour);
}

.individual-progress-line {
  height: 100%;
  width: 1%;
}

.progress-bar-div {
  margin-bottom: 10px;
}

.progress-bar-div:hover {
  cursor: pointer;
}
.progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background-color: var(--progress-bar-colour);
}

.indiv-progress-bar {
  display: flex;
  align-items: center;
  height: 10px;
  background-color: var(--progress-bar-colour);
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

#HotC-line {
  background-color: var(--HotC-colour);
  height: 100%;
  border-radius: 5px;
}
#MH-line {
  background-color: var(--MH-colour);
  height: 100%;
  border-radius: 5px;
}

.full-title {
  display: inline;
}
.abbr-title {
  display: none;
}

@media (max-width: 768px) {
  .full-title {
    display: none;
  }
  .abbr-title {
    display: inline;
  }
  .hymn-field {
    margin-top: 1%;
    margin-bottom: 1%;
  }
  .flatpickr-calendar {
    display: block;
    margin: 0 auto;
  }
}

.added-hymns-box {
  overflow-y: auto;
  border-radius: 3px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 2px solid var(--border-colour);
}

.period-select {
  border-radius: 3px;
  color: var(--reg-text);
  background-color: var(--div-background);
}

.period-option {
  height: 100px;
}

.custom-button {
  padding: 0px 6px;
  margin-top: 3px;
  margin-bottom: 5px;
  border-radius: 4px;
  font-size: 90%;
  background-color: var(--div-background);
  color: var(--reg-text);
}

.unsung-hymn {
  color: rgb(180, 180, 0);
}

/* Individual Hymn page */
.days-view {
  overflow-x: auto;
  overflow-y: hidden; /* Prevent vertical scrolling */
  margin: 10px;
  border: 1px solid var(--bolder-border-colour);
  border-radius: 3px;
  white-space: nowrap;
  position: relative;
  display: grid;
}.days-view::-webkit-scrollbar { 
    display: none;
}

.weekdays-column {
  display: grid;
  text-align: center;
  font-weight: bold;
  grid-auto-rows: 1.1rem;
  position: sticky;
  left: 0;
  z-index: 2; /* Ensure it stays above other elements */
  background: var(--div-background); /* Prevent it from blending with content when scrolling */
}


.weekday {
  font-size: 1rem;
  display: grid;
  align-content: center;
  background-color: var(--div-background);
  border: 1px solid var(--border-colour);
}

#label-row {
  background: var(--div-background);
  display: grid;
}

.days-grid {
  display: grid;
  grid-auto-flow: column; /* Create columns dynamically */
  grid-auto-columns:  1.1rem; /* Set a consistent width for each column */
  grid-auto-rows: 1.1rem; /* Set a consistent width for each row */
  width: max-content;
}

.year-header-container {
  position: relative;
  background: var(--div-background);
  box-sizing: border-box;
  display: grid;
}
.year-header {
  padding-left: 5px;
  align-content: end;
}

.year-label {
  position: sticky;
  left: 0;
  background: var(--div-background);
  z-index: 3;
  text-align: center;
  font-weight: bold;
}
.day-cell {
  text-align: center;
  align-content: center;
  background-color: rgb(200, 200, 200);
  border-radius: 100%;
  margin: 8%;
}

.day-cell.darker-month {
  background-color: rgb(140, 140, 140);
}

.day-cell.today {
  border: 2.5px solid var(--current-day-outline);
}

.day-cell.has_hymnsing {
  background-color: rgb(100,160,250);
  cursor: pointer;
}

.hymn-info-dropdown {
  padding-top: 5px;
  padding-bottom: 5px;
}