@charset "UTF-8";
@font-face {
  font-family: "Brandon-Med";
  src: url(./fonts/brandon_med.woff);
}
@font-face {
  font-family: "Acherus-Reg";
  src: url(./fonts/acherusgrotesque-regular-webfont.woff);
}
@font-face {
  font-family: "Gotham-Book";
  src: url(./fonts/HomepageBaukasten-Book.woff);
}
@font-face {
  font-family: "Painting-With-Chocolate";
  src: url(./fonts/Painting_With_Chocolate.woff);
}
:root {
  --background: rgba(f2, f1, ee .85);
  --fontFamily: "Gotham-Book";
  --topPadding: 6em;
  --h1FontSize: 1.5rem;
  --titleFontSize: 1.2rem;
  --normalFontSize: 15px;
  --timeFontSize: 17px;
  --leftMenuFontSize: .9rem;
  --feedCardWidth: 60rem;
  --leftMenuWidth: 300px;
  --topMessageOffset: 50px;
  --leftMenuIconWidth: 30px;
  --gridColsFavorite: 3;
  --gridColsProfileProgress: 3;
  --darkestColor: black;
  --searchWidth: 37em;
  --logoLeftPadding: 100px;
  --circleImageHeight: 120px;
  --thumbImageWidth: 200px;
  --dbStatsBubbleCount: 3;
  --homeStatsColCount: 2;
  --feedFilterHeight: 450px;
  --spinnerSize: 1.5rem;
  --profileStatsBubbleCount: 2;
  --menuScroll: hidden;
}

* {
  box-sizing: border-box;
}

.bold {
  font-weight: bold;
  color: #55595c;
}

.loader {
  border: 16px solid #ced4da;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  margin: auto;
  width: 120px;
  height: 120px; /* Safari */
  animation: spin 2s linear infinite;
  position: fixed;
  top: 35%;
  left: 50%;
  z-index: 999;
}

/* Safari */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--background);
  font-family: var(--fontFamily);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: rgb(250, 250, 250);
  letter-spacing: 2px;
  font-size: var(--normalFontSize);
}

/* Html tags */
td,
th,
tr {
  font-family: var(--fontFamily);
  font-size: var(--normalFontSize);
}

a {
  color: #9d0b0e;
  text-decoration: none;
}

a:hover {
  color: #a3a0a0;
  text-decoration: none;
}

h1 {
  font-size: var(--h1FontSize);
  letter-spacing: 4px;
  padding-top: 20px;
  padding-bottom: 20px;
}

h2,
h3,
h4 {
  padding-bottom: 15px;
  padding-top: 15px;
  line-height: 1.4;
  text-transform: none;
  font-size: var(--titleFontSize);
}

h5,
h6 {
  text-transform: none;
  font-size: var(--normalFontSize);
  padding-top: 0.5em;
}

h4.lesson-small-title {
  color: #9d0b0e;
  padding-bottom: 0px;
  font-size: var(--titleFontSize);
}

hr {
  background-color: #55595c;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* end html tags */
/* helpers */
.spinner-border {
  width: var(--spinnerSize);
  height: var(--spinnerSize);
}

.heavy {
  font-weight: bold;
}

.red {
  color: #9d0b0e;
}

.blue {
  color: #004094;
}

.dark-link {
  color: #343434;
  font-size: 1.1em;
  font-weight: bold;
}

.dark-link:hover {
  color: #9d0b0e;
}

.gray-link {
  color: #919aa1;
}

.gray-link:hover {
  color: #a3a0a0;
}

.bigger-link {
  font-size: 0.9em !important;
  font-weight: bold !important;
}

.page-help .page-help-text {
  background: #f8f9fa;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  margin-top: 10px;
}
.page-help svg:hover {
  fill: #4c4646;
}
.page-help li {
  font-weight: bold;
  font-size: larger;
  color: #55595c;
}
.page-help li p {
  font-weight: normal;
  font-size: smaller;
  color: #55595c;
}

.visible {
  display: visible;
}

.hidden {
  display: none;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.full-width {
  width: 100%;
}

.test-bg {
  background-color: #007bff;
  font-weight: bold;
  color: darkslategrey;
  font-family: var(--fontFamily);
}

.test-bg2 {
  background-color: #f0ad4e;
  font-weight: bold;
  color: darkslategrey;
  font-family: var(--fontFamily);
}

.float-right {
  float: right;
  padding-right: 10px;
}

.float-left {
  float: left;
  padding-right: 10px;
}

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

.narrow-text {
  width: 38rem;
}

.static-page-text {
  width: 52rem;
}

.bg-white {
  background: white;
}

.page-banner {
  display: grid;
  grid-template-columns: minmax(min-content, auto) 200px;
}

.page-title {
  color: var(--darkestColor);
  font-family: var(--fontFamily);
  font-weight: bold;
  font-size: var(--h1FontSize);
  padding-top: 20px;
  margin-left: 30px;
}

.page-title-flush-left {
  color: var(--darkestColor);
  font-family: var(--fontFamily);
  font-weight: bold;
  font-size: calc(var(--normalFontSize) + 0.5rem);
}

.page-title-black {
  color: var(--darkestColor);
  font-family: var(--fontFamily);
  font-weight: bold;
  font-size: var(--h1FontSize);
  padding-top: 20px;
}

.lesson-thumb {
  width: var(--thumbImageWidth);
  padding: 0;
  margin: 0;
}
.lesson-thumb a:hover {
  color: #a3a0a0;
}
.lesson-thumb img {
  width: var(--thumbImageWidth);
}
.lesson-thumb a img {
  width: var(--thumbImageWidth);
}
.lesson-thumb a img:hover {
  opacity: 0.5;
}
.lesson-thumb .lsn-name {
  font-weight: bold;
  color: var(--darkestColor);
}

.generic-image {
  width: var(--thumbImageWidth);
  max-height: calc(var(--thumbImageWidth) * 0.55);
  opacity: 60%;
  padding: 6px;
  border: 1px solid #adb5bd;
}

.generic-image:hover {
  border: 1px solid #1a1a1a;
}

.generic-search-image {
  width: 100px;
  opacity: 60%;
}

.video-js {
  width: 200px;
}

.normal-text {
  font-size: var(--normalFontSize);
  font-weight: normal;
}

.text-red-toast {
  color: #9d0b0e;
  padding: 15px;
  background-color: #ced4da;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  border-radius: 5px;
  max-width: 500px;
}
.text-red-toast div {
  font-weight: bold;
  font-size: larger;
}

.pagination {
  font-size: larger;
  background-color: white;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

/* end helpers */
/* table config */
/* Sortable tables */
table.sortable thead {
  background-color: #ced4da;
  color: #004094;
  font-weight: bold;
  cursor: default;
}

table.sortable th:hover {
  background-color: #919aa1;
  color: #004094;
  font-weight: bold;
  cursor: pointer;
}

.table {
  margin-left: auto;
  margin-right: auto;
}

.table td {
  padding: 10px;
  overflow: auto;
}

.table-active th {
  letter-spacing: 2px;
}

.tenx-table tr td {
  font-size: var(--normalFontSize);
}

.tenx-table a:not(.btn) {
  /*color: goldenrod;*/
  color: #9d0b0e;
}

.tenx-table a:hover {
  color: #a3a0a0;
}

.tenx-table-large {
  table-layout: auto;
  word-wrap: break-word;
}

.tenx-table-large tr td th {
  font-size: smaller;
}

.tenx-table-large a:not(.btn) {
  color: #9d0b0e;
}

.tenx-table-large a:hover {
  color: #a3a0a0;
}

.tenx-table-large-btn {
  table-layout: fixed;
  word-wrap: break-word;
}

.tenx-table-large-btn tr td {
  font-size: smaller;
}

.roadmap-table {
  word-wrap: break-word;
  border: 1px solid #adb5bd;
  width: 100%;
}

/* end table config */
/* Button config */
.btn {
  border-radius: 4px;
  padding: 10px;
}

.btn-primary {
  letter-spacing: 2px;
  text-transform: none;
  background-color: #004094;
}

.btn-danger {
  letter-spacing: 2px;
  background-color: #9d0b0e;
  text-transform: none;
  border: 1px solid #9d0b0e;
}

.btn-secondary {
  letter-spacing: 2px;
  background-color: #cccccc;
  text-transform: none;
  color: black !important;
}

.btn-warning {
  letter-spacing: 2px;
  text-transform: none;
}

.btn-success {
  text-transform: none;
  letter-spacing: 2px;
}

.txg-btn-success {
  letter-spacing: 2px;
  text-transform: none;
  background-color: #013f09;
  color: white;
  margin-bottom: 14px;
}

.txg-btn-success:hover {
  letter-spacing: 2px;
  text-transform: none;
  background-color: #013f09;
  color: #12d800;
}

.txg-button {
  border: 1px solid;
  padding: 7px;
  letter-spacing: 2px;
  font-size: smaller;
  border-radius: 3px;
}

.video-button {
  color: white;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: #343434;
  border-radius: 3px;
  text-transform: none;
}

#tenx-video-lesson .vjs-control-bar, #tenx-video-progress .vjs-control-bar {
  font-size: 1.6em;
}

.primary {
  background-color: #343434;
  border: 1px solid #343434;
  color: white;
}

.danger {
  background-color: #9d0b0e;
  border: 1px solid #9d0b0e;
  color: white;
}

.secondary {
  background-color: #a3a0a0;
  border: 1px solid #a3a0a0;
  color: black;
}

.expand-button {
  font-size: var(--normalFontSize);
  padding: 5px 5px 8px 8px;
}

.admin-flag::before {
  content: "";
  background: #f46d27;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
}

.staff-flag::after {
  content: "";
  background: #49f427;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
}

.dot-callout::before {
  content: "";
  background: blueviolet;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
}

.btn-outline-primary {
  border: 1px solid var(--darkestColor);
  font-family: var(--fontFamily);
  letter-spacing: 2px;
}

.btn-outline-danger {
  border: 1px solid #9d0b0e;
  color: #9d0b0e;
  text-transform: none;
  letter-spacing: 2px;
}

.dropdown-toggle.sub-menu :hover {
  border: solid 1px var(--darkestColor);
}

.dropdown-menu {
  padding: 10px;
  z-index: 5;
}
.dropdown-menu .dropdown-item {
  font-size: var(--leftMenuFontSize);
  color: #343a40;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #004094;
  color: white;
}

.top-buttons a {
  margin: 3px;
}

/* end Button config */
.contents {
  float: right;
  min-height: 100vh;
  padding-top: var(--topPadding);
  padding-right: 20px;
  overflow: auto;
  background: rgb(250, 250, 250);
  margin-top: 26px;
  margin-left: 0px;
}

.contents-frame {
  min-height: 100vh;
  padding-right: 20px;
  overflow: auto;
  background: rgb(250, 250, 250);
  margin-top: 26px;
  margin-left: 20px;
}

.contents-white {
  float: right;
  width: 82%;
  min-height: 100vh;
  margin: 0;
  padding-top: 5em;
  padding-right: 20px;
  overflow: auto;
  background: white;
}

.txg-left-menu-container {
  background-color: #343434;
  color: white;
  padding-top: 1.2em;
  overflow-y: var(--menuScroll);
  overflow-x: hidden;
  position: fixed;
  left: 0%;
  min-height: 100vh;
  width: var(--leftMenuWidth);
  z-index: 5;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.txg-left-menu {
  font-size: var(--leftMenuFontSize);
  width: var(--leftMenuWidth);
  background: #343434;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.txg-left-menu .btn-lg {
  padding: 11px;
  text-transform: none;
  letter-spacing: 2px;
}

.txg-left-menu a {
  font-size: var(--leftMenuFontSize);
  color: #ededed;
}

.txg-left-menu a:hover {
  color: #a3a0a0;
}

.txg-left-menu > a > svg {
  fill: #a3a0a0;
  width: var(--leftMenuIconWidth);
}

.left-menu-header > button > svg:hover {
  fill: #9d0b0e;
}

.txg-left-menu:hover {
  background-color: var(--darkestColor);
}

.txg-left-menu .dropdown button {
  color: #ededed !important;
}

.contract {
  padding-left: 1.6em;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  margin-bottom: 2em;
  width: 90px;
}

.expand {
  padding-left: 2.5em;
  width: var(--leftMenuWidth);
}

.left-menu-header-expand {
  width: 100%;
  display: flex;
  padding-right: 10px;
  align-items: center;
  justify-content: space-between;
  width: var(--leftMenuWidth);
}

.left-menu-header-contract {
  width: 100%;
  display: flex;
  padding-right: 10px;
  align-items: center;
  justify-content: center;
  width: var(--leftMenuWidth);
}

.left-menu-user {
  padding-top: 20px;
}

.left-menu-user-icon {
  font-size: var(--leftMenuFontSize);
  background: #343434;
  margin-top: 20px;
  margin-bottom: 0px;
  padding-left: 1.6em;
  padding-top: 10px;
  padding-bottom: 10px;
}

.left-menu-user-icon > a > svg {
  fill: #a3a0a0;
}

.left-menu-user-icon:hover {
  background-color: var(--darkestColor);
}

.left-menu-user button {
  margin-top: 10px;
}

.msg-button {
  border: 1px solid;
  border-color: #ededed;
  font-size: var(--leftMenuFontSize);
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.msg-button a {
  color: #ededed;
}

.msg-button:hover {
  color: #a3a0a0;
  background: var(--darkestColor);
  border-color: var(--darkestColor);
}

.left-menu-items {
  width: var(--leftMenuWidth);
  height: 900px;
}
.left-menu-items .btn {
  margin-bottom: 0px;
}
.left-menu-items button {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}

.btn-menu-collapse {
  color: #343434;
  background: #a3a0a0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
}

#btnCollapse svg:hover {
  fill: var(--darkestColor);
}

.btn-menu-expand {
  color: #343434;
  background: #a3a0a0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transform: rotate(180deg);
}

.txg-top-menu-container {
  min-height: 80px;
  filter: drop-shadow(0px 0px 4px #919aa1);
  position: fixed;
  width: 100%;
  z-index: 4;
  display: grid;
  grid-template-columns: var(--leftMenuWidth) 1.5fr 10px 2.5fr;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  top: 0;
  right: 0%;
  background-color: white;
}
.txg-top-menu-container .top-menu-info {
  margin-left: 20px;
  display: flex;
  align-items: flex-start;
}
.txg-top-menu-container .coach-db-header {
  width: 800px;
  grid-column-start: 1;
  grid-column-end: 5;
}

.top-menu-icon {
  color: gray;
  fill: gray;
  min-height: 2.4rem;
}

.top-menu-button {
  margin-left: 10px;
}
.top-menu-button a {
  padding: 12px;
  border-radius: 5px;
}

.top-menu-dropdown {
  position: relative;
}

.dropright .dropdown-toggle::after {
  border: 0;
}

.top-menu-dropdown button {
  color: #adb5bd;
  padding: 0px;
  margin-right: 10px;
  margin-left: 10px;
}

.top-menu-dropdown button > svg {
  color: gray;
  fill: gray;
}

.top-menu-dropdown button > svg:hover {
  fill: #9d0b0e;
}

.txg-container {
  padding-top: 20px;
  padding-left: 50px;
  width: 100%;
}

.top-menu-search input {
  background: rgb(250, 250, 250);
  border: 1px solid #ced4da;
  border-radius: 5px;
  width: var(--searchWidth);
  min-height: 2em;
}

.top-menu-ddl {
  margin-right: 20px;
}
.top-menu-ddl .btn-secondary {
  padding: 4px 10px 4px 8px;
  border-radius: 5px;
  background-color: #eceeef !important;
  border: 1px solid #ced4da;
  font-size: var(--normalFontSize);
  color: #55595c;
}

.navbar-brand {
  padding-left: 93px;
  padding-right: 100px;
}

.txg-logo {
  padding-left: var(--logoLeftPadding);
}

.text-highlight {
  color: #55595c;
  font-weight: 600;
  font-size: var(--normalFontSize);
}

.text-highlight-center {
  color: #55595c;
  font-weight: 600;
  font-size: var(--normalFontSize);
  text-align: center;
}

.text-highlight-red {
  color: #9d0b0e;
  font-weight: 600;
  font-size: var(--normalFontSize);
}

.card-title {
  font-size: var(--titleFontSize);
  font-weight: bold;
  color: var(--darkestColor);
}
.card-title a {
  color: var(--darkestColor);
}
.card-title a:hover {
  color: #a3a0a0;
}

.huger {
  font-size: 20px;
  line-height: 1.5;
}

.huger-bold {
  font-size: 20px;
  font-weight: bold;
}

.bigger {
  font-size: 17px;
  font-weight: bold;
}

.lesson-link-user {
  color: #343434;
  font-size: var(--normalFontSize);
  font-weight: bold;
  font-family: var(--fontFamily);
}

.lesson-link-user:hover {
  color: #a3a0a0;
}

.lesson-name {
  font-size: var(--normalFontSize);
  font-weight: bold;
  font-family: var(--fontFamily);
}

/* Roadmap (mini courses) Config */
.roadmap-div {
  width: 100%;
}

.bold-value {
  font-weight: 600;
}

.results-table {
  border: 1px solid #ced4da;
}
.results-table thead {
  background-color: #ced4da;
}
.results-table thead th {
  padding: 5px;
  color: #343434;
  font-size: larger;
  font-weight: 600;
  text-transform: none;
}
.results-table tbody td {
  padding: 5px;
  color: #343434;
  font-weight: 600;
}

.roadmap-status-nst {
  color: #343434;
}

.roadmap-status-inp {
  color: #9d0b0e;
}

.roadmap-status-cmp {
  color: #a7a4a4;
}

h4.ikey-group {
  margin-bottom: 0;
  color: #343434;
}
h4.ikey-group hr {
  background-color: #adb5bd;
}

.qn-select-header {
  background-color: white;
  border-radius: 0.5em;
  padding: 15px;
  border: 1px solid #ced4da;
}
.qn-select-header .btn {
  font-size: var(--normalFontSize);
}

.mc-select-header {
  background-color: white;
  border-radius: 0.5em;
  padding: 15px;
  border: 1px solid #ced4da;
}
.mc-select-header .btn {
  font-size: var(--normalFontSize);
}

.roadmap-lesson {
  background-color: #f8f9fa;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 0.5em;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  overflow: hidden;
}
.roadmap-lesson .roadmap-lesson-summary {
  display: grid;
  grid-template-columns: 1fr 60px;
}
.roadmap-lesson .btn {
  min-height: 30px;
  font-size: var(--normalFontSize);
}

.completed-items-container {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
}

/* end roadmap (mini courses) config */
.form-control {
  background-color: white;
  font-size: var(--normalFontSize);
  border: 1px solid #ced4da;
  border-radius: 6px;
}

.search-bar {
  letter-spacing: 5px;
}

.nav-link {
  letter-spacing: 5px;
}

.circle {
  border-radius: 50%;
  max-height: var(--circleImageHeight);
  max-width: var(--circleImageHeight);
  margin-left: 5px;
  margin-right: 5px;
}

.circle-thumb {
  border-radius: 50%;
  height: 75px;
  width: 75px;
  margin: auto;
  display: block;
}

.circle-thumb-search {
  border-radius: 50%;
  height: 75px;
  width: 75px;
  margin: auto;
}

.circle-thumb-left-menu {
  border-radius: 50%;
  max-height: var(--circleImageHeight);
  max-width: var(--circleImageHeight);
}

.circle-thumb-small {
  border-radius: 50%;
  max-height: 34px;
  max-width: 34px;
  margin-left: 15px;
  margin-right: 15px;
}

.circle-thumb-button {
  border-radius: 50%;
  height: 34px;
  width: 34px;
  margin-right: 15px;
}

.circle-thumb-tiny {
  border-radius: 50%;
  height: 28px;
  margin-left: 15px;
  margin-right: 15px;
}

#alertDangerDiv, #alertSuccessDiv {
  position: fixed;
  text-align: center;
  width: 20%;
  top: 15px;
  left: 315px;
  z-index: 999;
}

#alertDivVideo {
  text-align: center;
  background-color: #4bbf73;
  color: white;
  width: 100%;
  z-index: 999;
}

/* Social Feed */
.feed-top-container {
  display: grid;
  grid-template-columns: 240px 2fr;
}
.feed-top-container .filter-title {
  font-size: calc(var(--titleFontSize) - 0.3rem);
  background-color: #ced4da;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 100%;
  color: var(--darkestColor);
  font-weight: 700;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.feed-top-container .feed-filter {
  padding-left: 10px;
  font-weight: bold;
  background: #eceeef;
  color: #004094;
  padding: 7px;
  width: 100%;
}
.feed-top-container .feed-left-col {
  max-height: var(--feedFilterHeight);
  background: white;
  border-radius: 10px;
  padding: 0;
  position: relative;
  top: 0;
  width: 220px;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid #ced4da;
  box-shadow: 4px 4px 4px #adb5bd;
}
.feed-top-container .feed-left-col .menu-item {
  font-size: var(--leftMenuFontSize);
  color: white;
  width: 100%;
  padding: 8px;
  padding-left: 15px;
  margin: 0;
}
.feed-top-container .feed-left-col .menu-item .btn-lg {
  text-transform: none;
  padding: 6px;
  letter-spacing: 2px;
  font-size: var(--normalFontSize);
  color: #343434;
}
.feed-top-container .feed-left-col .menu-item .btn-lg:hover {
  color: white;
}
.feed-top-container .feed-left-col .menu-item:hover {
  background: #004094;
  color: white;
}
.feed-top-container .feed-left-col .menu-buttons hr {
  background-color: #ced4da;
}
.feed-top-container .feed-left-col .menu-buttons {
  width: 100%;
  margin-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.feed-top-container .feed-left-col .menu-buttons button {
  font-size: calc(var(--normalFontSize) - 0.15rem);
  margin-bottom: 5px;
}

.post-pin {
  float: right;
  padding-right: 20px;
  padding-top: 30px;
}
.post-pin svg {
  fill: #919aa1;
}
.post-pin svg:hover {
  fill: #919aa1;
}

.feed-post-container {
  margin-top: 18px;
  overflow: auto;
  background: rgba(110, 110, 109, 0.0901960784);
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ced4da;
  box-shadow: 4px 4px 4px #ced4da;
}

.feed-item {
  background: #eceeef;
  border-radius: 5px;
  border: 1px solid #ced4da;
  padding: 7px;
  margin-bottom: 5px;
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
}
.feed-item .detail-link {
  font-size: var(--normalFontSize);
  font-weight: bold;
  color: #343a40;
}
.feed-item .detail-link:hover {
  color: #9d0b0e;
}
.feed-item .profile-link {
  font-size: var(--normalFontSize);
  color: #343a40;
  font-weight: 400;
}
.feed-item .profile-link:hover {
  color: #9d0b0e;
}
.feed-item .icon-box {
  padding-top: 8px;
  color: #9d0b0e;
}

.post-title {
  font-size: var(--titleFontSize);
  font-weight: bold;
  color: var(--darkestColor);
  padding-top: 25px;
}
.post-title a {
  color: var(--darkestColor);
}
.post-title a:hover {
  color: #a3a0a0;
}

.post-detail-header {
  background: #f7f7f9;
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid #ced4da;
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  min-height: 100px;
  padding: 20px 10px 10px 0px;
}

.post-detail-body {
  background: #f7f7f9;
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid #ced4da;
  display: grid;
  grid-template-columns: 180px 1fr;
  padding: 20px 10px 10px 0px;
}
.post-detail-body .post-detail-footer {
  grid-column-start: 1;
  grid-column-end: 3;
  padding: 5px 25px 5px 25px;
}
.post-detail-body .post-detail-footer .post-hr {
  background-color: #ced4da;
  margin-top: 5px;
  margin-bottom: 10px;
  grid-row: 1/2;
}
.post-detail-body .post-detail-footer .pd-footer-controls {
  grid-row: 2/3;
  display: grid;
  grid-template-columns: 155px 2fr 1fr;
}
.post-detail-body .post-detail-footer .pd-footer-controls div {
  justify-self: center;
}
.post-detail-body .post-detail-footer .pd-footer-controls .inline {
  justify-self: right;
}
.post-detail-body .pd-video {
  width: 50%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.post-detail-body .pd-post-image {
  width: 50%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.pd-poster-info {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.post-header {
  background: white;
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid #ced4da;
  display: grid;
  grid-template-columns: 400px 1fr 100px;
  min-height: 100px;
}

.post-body {
  display: grid;
  grid-template-columns: 350px 1fr;
}

.post-footer {
  background-color: rgba(221, 221, 219, 0.8901960784);
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #ced4da;
}

.double-wide {
  grid-column-start: 1;
  grid-column-end: 3;
}

.center-thumb {
  margin: auto;
  width: 320px;
  border: 1px solid #adb5bd;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.post-image-thumb {
  width: 300px;
}

.profile-badge-feed {
  color: #9d0b0e;
}
.profile-badge-feed svg {
  width: 16px;
  margin-top: 10px;
  margin-bottom: 2px;
}

/* end social feed */
.userlesson-display {
  border-radius: 5px;
  background-color: #f8f9fa;
  font-family: var(--fontFamily);
  display: grid;
  grid-template-columns: minmax(150px, 225px) 1fr 180px;
  padding: 8px;
  padding-right: 25px;
  vertical-align: top;
  margin-bottom: 14px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.userlesson-display .controls-right {
  justify-self: flex-end;
}

.userlesson-display-owner {
  border-radius: 5px;
  background-color: #f8f9fa;
  font-family: var(--fontFamily);
  display: grid;
  grid-template-columns: minmax(150px, 225px) 1fr 180px;
  padding: 8px;
  padding-right: 25px;
  vertical-align: top;
  margin-bottom: 14px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  border-left: 7px solid #038a46;
}
.userlesson-display-owner .controls-right {
  justify-self: flex-end;
}

.browse-lesson-display {
  border-radius: 5px;
  background-color: #f8f9fa;
  font-family: var(--fontFamily);
  padding: 8px;
  padding-right: 25px;
  vertical-align: top;
  margin-bottom: 14px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.browse-lesson-display-premium {
  border-radius: 5px;
  background-color: #f8f9fa;
  font-family: var(--fontFamily);
  padding: 8px;
  padding-right: 25px;
  vertical-align: top;
  margin-bottom: 14px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  border-left: 7px solid #2780f4;
}

.course-display {
  border-radius: 5px;
  background-color: #f8f9fa;
  font-family: var(--fontFamily);
  display: grid;
  grid-template-columns: minmax(150px, 225px) 0.5fr 1fr;
  padding: 8px;
  padding-right: 25px;
  vertical-align: top;
  margin-bottom: 14px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  border-left: 7px solid #2780f4;
}
.course-display .course-thumb {
  width: var(--thumbImageWidth);
  padding: 0;
  margin: 0;
}
.course-display .course-thumb a:hover {
  color: #a3a0a0;
}
.course-display .course-thumb img {
  width: var(--thumbImageWidth);
}
.course-display .course-thumb a img {
  width: var(--thumbImageWidth);
}
.course-display .course-thumb a img:hover {
  opacity: 0.5;
}

.course-display-coaching {
  border-radius: 5px;
  background-color: #f8f9fa;
  font-family: var(--fontFamily);
  display: grid;
  grid-template-columns: minmax(150px, 225px) 0.5fr 1fr;
  padding: 8px;
  padding-right: 25px;
  vertical-align: top;
  margin-bottom: 14px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  border-left: 7px solid #038a46;
}
.course-display-coaching .course-thumb {
  width: var(--thumbImageWidth);
  padding: 0;
  margin: 0;
}
.course-display-coaching .course-thumb a:hover {
  color: #a3a0a0;
}
.course-display-coaching .course-thumb img {
  width: var(--thumbImageWidth);
}
.course-display-coaching .course-thumb a img {
  width: var(--thumbImageWidth);
}
.course-display-coaching .course-thumb a img:hover {
  opacity: 0.5;
}

.course-module-description {
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  border-radius: 5px;
  background-color: #f8f9fa;
  font-family: var(--fontFamily);
  padding: 8px;
}

.locked {
  background-color: rgba(0, 0, 0, 0.2);
}

.locked-no-events {
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.locked-course-message {
  color: #9d0b0e;
  font-size: large;
  font-weight: bold;
}

.workbook-heading {
  line-height: 1.4;
  text-transform: none;
  font-size: var(--titleFontSize);
}

.course-single-column {
  display: grid;
  grid-template-columns: 100%;
  padding: 0;
  margin: 0;
}
.course-single-column svg {
  fill: #55595c;
}

.course-double-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  margin: 0;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
.course-double-column svg {
  fill: #55595c;
}

.course-triple-column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0;
  margin: 0;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
.course-triple-column svg {
  fill: #55595c;
}

.course-quad-column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 0;
  margin: 0;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.course-quad-column svg {
  fill: #55595c;
}

.course-resource {
  display: grid;
  grid-template-columns: calc(var(--thumbImageWidth) + 20px) 1fr;
  padding: 0;
  margin: 0;
}
.course-resource a:hover {
  color: #a3a0a0;
}
.course-resource img {
  width: var(--thumbImageWidth);
  margin-bottom: 20px;
}
.course-resource a img {
  width: var(--thumbImageWidth);
  margin-bottom: 20px;
}
.course-resource a img:hover {
  opacity: 0.5;
}

.qn-display {
  border-radius: 5px;
  background-color: #f8f9fa;
  font-family: var(--fontFamily);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  padding: 12px;
  vertical-align: top;
  margin-bottom: 14px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.qn-display hr {
  margin-right: 10px;
  margin-bottom: 15px;
  background-color: #ced4da;
}
.qn-display .qn-item {
  display: grid;
  grid-template-columns: 190px 2fr 1fr;
  margin-bottom: 7px;
  margin-right: 5px;
  grid-column-gap: 10px;
}
.qn-display .btn {
  font-size: xx-small;
  border-radius: 4px;
  padding: 9px 7px 7px 7px;
  font-weight: 600;
}

/* configure INPUT Controls */
.select-css {
  display: inline-block;
  width: auto;
  font-size: var(--normalFontSize);
  font-family: var(--fontFamily);
  font-weight: 500;
  color: #4c4646;
  line-height: 1.3;
  padding: 0.6em 1.4em 0.5em 0.8em;
  max-width: 100%;
  box-sizing: border-box;
  margin: 10px;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
  border-radius: 0.5em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
}

.select-css::-ms-expand {
  display: none;
}

.select-css:hover {
  border-color: #888;
}

.select-css:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

.select-css option {
  font-weight: normal;
}

.slidecontainer {
  width: 100%;
  /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  /* Full-width */
  height: 25px;
  /* Specified height */
  background: #d3d3d3;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  /*background: rgb(31, 29, 29);*/
  background: #343a40;
  /* Green background */
  border-radius: 50%;
  cursor: pointer;
  /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #343a40;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

input[type=checkbox],
input[type=radio] {
  order: 1;
  z-index: 2;
  cursor: pointer;
  transform: scale(1.5);
}

/* end INPUT controls*/
.div-like {
  cursor: pointer;
}

.div-comment {
  cursor: pointer;
}

.comment-prompt {
  font-size: var(--normalFontSize);
  width: 100%;
  font-weight: bold;
  background: #dddddd;
  padding-top: 14px;
  padding-bottom: 2px;
  padding-left: 17px;
  padding-right: 17px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ced4da;
  box-shadow: 4px 4px 4px #ced4da;
}

.post-source-display {
  color: #9d0b0e;
  font-size: small;
}

.post-img {
  cursor: pointer;
}

.post-text {
  display: flex;
  justify-content: start;
  font-family: var(--fontFamily);
  background: #eceeef;
  padding: 5px;
  padding-left: 10px;
  padding-right: 25px;
}

.comment-display {
  font-family: var(--fontFamily);
  background: #ebebeb;
  border-radius: 5px;
  padding: 5px;
  padding-right: 25px;
  vertical-align: top;
  margin-top: 5px;
  margin-bottom: 10px;
}

.comment-text-format {
  font-size: var(--normalFontSize);
  font-family: var(--fontFamily);
  word-wrap: break-word;
  white-space: pre-wrap;
}

.comment-text {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column-gap: 25px;
  align-content: start;
  font-family: var(--fontFamily);
  background: #ebebeb;
  padding: 5px;
  padding-left: 10px;
  padding-right: 25px;
  vertical-align: top;
  margin-bottom: 10px;
}

.comment-link {
  grid-column: span 2;
}

.zoom {
  transition: transform 0.2s;
}

.zoom:hover {
  transform: scale(1.3);
}

.modal-image {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 10;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  min-height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* The Close Button */
.closeModal {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.closeModal:hover,
.closeModal:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.comment-input {
  font-family: var(--fontFamily);
  padding: 5px;
  padding-left: 10px;
  padding-right: 25px;
  margin-bottom: 10px;
}

.comment-footer {
  font-family: var(--fontFamily);
  padding: 5px;
  font-size: smaller;
  padding-left: 10px;
  padding-top: 0px;
  vertical-align: top;
  margin-bottom: 0px;
}

.full-post-comment-footer {
  font-family: var(--fontFamily);
  border-radius: 5px;
  background: #ebebeb;
  padding: 15px;
  font-size: smaller;
  margin-bottom: 10px;
}

/* only for static text */
.inline-img {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

.big-letter {
  font-size: 3em;
  font-weight: bold;
  margin-right: 2px;
}

/* for top menu notify bubble over dashboard */
div.notify {
  fill: white;
  color: white;
  text-decoration: none;
  padding-top: 8px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notify > a > svg {
  fill: gray;
}

.notify > a > svg:hover {
  fill: #9d0b0e;
}

.message-toolbar > span > svg:hover {
  fill: white;
}

.notify .bubble {
  position: absolute;
  top: -15px;
  right: -4px;
  padding: 5px 9px;
  border-radius: 50%;
  background: #9d0b0e;
  color: white;
  font-size: 0.8em;
}

.forum-bubble {
  position: relative;
  top: -4px;
  right: 4px;
  border-radius: 50%;
  text-align: center;
  background-color: #9d0b0e;
  color: white;
  font-size: 0.9em;
  padding: 6px;
}

.tab-bubble {
  position: relative;
  top: 2px;
  right: 15px;
  border-radius: 50%;
  background-color: #9d0b0e;
  color: white;
  font-size: 0.6em;
  text-align: center;
  width: 20px;
  height: 20px;
  padding: 6px;
}

.forum-new-items {
  border-left: 5px solid #9d0b0e;
}

/* end notify */
svg:hover {
  fill: #9d0b0e;
}

.help-icon {
  margin-top: 20px;
  margin-bottom: 25px;
}

.help-icon > a > svg {
  fill: #adb5bd;
}

.help-icon > a > svg:hover {
  fill: #9d0b0e;
}

/* Message component */
.clickable-div {
  cursor: pointer;
}

.display-linebreak {
  white-space: pre-line;
}

.message-user-icon {
  margin-left: 15px;
  margin-right: 15px;
  color: #343a40;
}

.message-thread-highlight {
  border-radius: 5px;
  background-color: #ced4da;
  color: var(--darkestColor);
}

.message-thread-selected {
  border-radius: 5px;
  background-color: #ced4da;
  border-left: #9d0b0e;
  border-left-style: solid;
  border-width: 5px;
}

.thread-div {
  padding-top: 10px;
  margin-bottom: 5px;
}

.thread-div a {
  color: rgb(143, 143, 143);
}

.message-thread-unread {
  font-weight: bold;
  color: var(--darkestColor);
}

.message-thread-unread div div a::after {
  content: "";
  background: #9d0b0e;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: -10px;
  margin-right: 7px;
  margin-bottom: 15px;
  border-radius: 50%;
}

.message-thread-read {
  font-weight: normal;
}

.message-display {
  border-radius: 5px;
  background-color: #ced4da;
  color: #343a40;
  border: 1px solid #adb5bd;
  font-family: var(--fontFamily);
  padding: 20px;
  vertical-align: top;
  margin-bottom: 4px;
}

.message-toolbar {
  background-color: #343a40;
  color: white;
  font-family: var(--fontFamily);
  font-size: larger;
  padding-top: 13px;
  padding-bottom: 18px;
  padding-left: 5px;
  margin-bottom: 16px;
  border-radius: 5px;
  vertical-align: middle;
}

.message-recipient {
  background-color: #9d0b0e;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 8px;
  margin-right: 4px;
  border-radius: 20px;
}

.message-recipient:hover {
  background-color: #adb5bd;
  cursor: pointer;
}

.remove-x {
  display: inline-block;
  border-radius: 50%;
  background-color: #343a40;
  padding-left: 5px;
  padding-right: 5px;
}

.message-list-header {
  background-color: #343a40;
  font-family: var(--fontFamily);
  border-radius: 5px;
  color: white;
  padding-top: 16px;
  padding-left: 15px;
  padding-bottom: 7px;
  vertical-align: middle;
  margin-bottom: 4px;
}

/* end message component */
.video-container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.video-info {
  padding: 30px;
}

.video-desc {
  font-size: var(--normalFontSize);
}

.video-create {
  color: #9d0b0e;
}

/* Curation Tool */
.curation-key {
  background-color: #55595c;
  color: white;
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 8px;
  margin-right: 4px;
  border-radius: 20px;
}

.curation-key-selected {
  background-color: #9d0b0e;
  color: white;
}

.curation-key-genre {
  background-color: #f46d27;
  filter: grayscale(40%);
  color: white;
}

.curation-key-type {
  background-color: #ba27f4;
  filter: grayscale(40%);
  color: white;
}

.curation-key-instrument {
  background-color: #2780f4;
  filter: grayscale(40%);
  color: white;
}

.curation-key:hover {
  background-color: #adb5bd;
  cursor: pointer;
}

.curation-form {
  background-color: #ddd;
  width: 90%;
  padding: 50px;
  border-radius: 10px;
}

/* end curation tool*/
.follow-link {
  color: #9d0b0e;
  font-size: smaller;
}

/* Search Results */
.results-count {
  color: #919aa1;
}

.sr-container {
  background: white;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #ced4da;
  border-radius: 10px;
  padding: 18px;
  margin-top: 16px;
}
.sr-container hr {
  background: #eceeef;
  margin-top: 20px;
  margin-bottom: 20px;
}

.player-result-row {
  padding-top: 10px;
  margin-bottom: 8px;
}
.player-result-row hr {
  background: #eceeef;
  margin-top: 14px;
}
.player-result-row .name-holder {
  font-size: var(--normalFontSize);
  font-weight: 600;
  color: var(--darkestColor);
}

.search-results {
  display: grid;
  grid-template-columns: 230px 5fr;
  min-height: 800px;
}
.search-results .btn-outline-primary {
  border: 1px solid var(--darkestColor);
}
.search-results .btn-more {
  display: block;
  border: 1px solid #eceeef;
  border-radius: 6px;
  color: #343434;
  background: rgb(250, 250, 250);
  display: flex;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 600;
  width: 100%;
  letter-spacing: 3px;
}

.sr-left-col {
  background: white;
  border-radius: 10px;
  padding: 0;
  position: relative;
  top: 0;
  max-height: 250px;
  max-width: 220px;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 16px;
  border: 1px solid #ced4da;
  box-shadow: 4px 4px 4px #ced4da;
}
.sr-left-col .menu-item {
  font-size: var(--leftMenuFontSize);
  color: #343434;
  background: white;
  width: 100%;
  padding: 8px;
  padding-left: 20px;
  margin: 0;
}
.sr-left-col .menu-item .btn-lg {
  text-transform: none;
  padding: 6px;
  letter-spacing: 2px;
  font-size: var(--normalFontSize);
}
.sr-left-col .menu-item .btn-lg:hover {
  color: white;
}
.sr-left-col .menu-item a > svg {
  fill: #a3a0a0;
  width: var(--leftMenuIconWidth);
}
.sr-left-col .menu-item a > svg:hover {
  fill: #9d0b0e;
}
.sr-left-col .menu-item:hover {
  background: #F3d5d5;
  color: white;
}

.sr-bubble {
  background: white;
  border-radius: 10px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #ced4da;
  margin-top: 18px;
  padding: 20px;
  font-size: var(--normalFontSize);
  font-weight: 700;
  color: var(--darkestColor);
}

.search-title {
  font-size: var(--titleFontSize);
  color: var(--darkestColor);
  font-weight: 700;
  padding-left: 15px;
  padding-top: 15px;
}

.lesson-list-item {
  display: grid;
  grid-template-columns: 130px 3fr 60px;
  grid-column-gap: 20px;
}
.lesson-list-item .video-thumb {
  padding-left: 20px;
}

.search-text {
  padding-left: 5px;
  max-width: 400px;
  font-size: var(--normalFontSize);
}

/* end Search Results */
/* Dashboard */
.dashboard-container {
  display: grid;
  grid-template-rows: min-content;
  padding-right: 50px;
  grid-row-gap: 15px;
  margin-left: 2em;
  margin-right: 2em;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(var(--dbStatsBubbleCount), minmax(300px, 430px));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.stats-bubble {
  display: grid;
  grid-template-columns: 80px 1fr;
  background: white;
  border-radius: 10px;
  padding: 20px;
  align-items: center;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.stats-bubble hr {
  background-color: rgb(250, 250, 250);
}

.stats-bubble svg {
  background: #9d0b0e;
  fill: white;
  border-radius: 50%;
  padding: 9px;
}

.bubble-title {
  font-size: var(--titleFontSize);
  color: var(--darkestColor);
  font-weight: 600;
}

.bubble-value {
  font-size: var(--titleFontSize);
  color: var(--darkestColor);
  font-weight: 600;
}

.bubble-link a {
  font-size: 1em;
}

.bubble-msg {
  font-size: 0.8em;
  color: var(--darkestColor);
}

.bubble-container {
  margin-bottom: 20px;
  margin-top: 20px;
}
.bubble-container .header {
  padding-left: 8px;
  font-size: var(--titleFontSize);
  font-weight: 800;
  color: var(--darkestColor);
  display: grid;
  grid-template-columns: 10em auto;
  align-items: center;
}
.bubble-container .header a {
  font-size: 0.45em;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.bubble-container .bubble {
  background: white;
  border-radius: 10px;
  display: grid;
  align-items: center;
  justify-items: center;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  padding-left: 0;
  padding-right: 0;
  margin-top: 10px;
  margin-bottom: 2em;
}
.bubble-container .bubble svg {
  fill: #ced4da;
}
.bubble-container .favorite-feature {
  display: grid;
  grid-template-columns: repeat(var(--gridColsWhatsNew), 1fr);
  padding: 30px;
  grid-gap: 1em;
}
.bubble-container .favorite-feature .lsn-name {
  font-weight: bold;
  color: var(--darkestColor);
}
.bubble-container .favorite-feature .lsn-name:hover {
  color: #a3a0a0;
}
.bubble-container .favorite-feature .lesson-thumb {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  justify-items: start;
  width: 200px;
}
.bubble-container .favorite-feature .lesson-thumb img {
  max-width: var(--thumbImageWidth);
  min-height: 142px;
  margin-bottom: 6px;
}
.bubble-container .favorite-feature .lesson-thumb img:hover {
  opacity: 0.5;
}
.bubble-container .favorite-feature .lesson-thumb .rm-time {
  display: grid;
  grid-template-columns: 1fr 0.2fr;
}
.bubble-container .active-streak {
  background-color: rgba(5, 146, 5, 0.15);
  border-left: 4px solid green;
  border-right: 1px solid green;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}
.bubble-container .solid-border {
  border: 1px solid #bbb;
}
.bubble-container .target-lesson-container {
  display: grid;
  grid-template-columns: repeat(var(--gridColsFavorite), auto);
  padding: 20px;
}
.bubble-container .target-lesson-container .target-lesson {
  display: grid;
  grid-template-columns: auto 60px;
  width: 260px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 7px;
}
.bubble-container .target-lesson-container .target-lesson img {
  max-width: var(--thumbImageWidth);
}
.bubble-container .target-lesson-container .target-lesson img:hover {
  opacity: 0.5;
}
.bubble-container .target-lesson-container .target-lesson .target-lesson-name {
  grid-column: 1/3;
  margin-right: 5px;
  align-self: center;
}
.bubble-container .target-lesson-container .target-lesson .lsn-name {
  font-size: smaller;
  font-weight: bold;
  color: var(--darkestColor);
}
.bubble-container .target-lesson-container .target-lesson .lsn-name:hover {
  color: #9d0b0e;
}
.bubble-container .target-lesson-container .target-lesson #dropdownMenuButton {
  width: 20px;
}
.bubble-container .target-lesson-container .target-lesson .target-menu {
  max-height: 60px;
  width: 40px;
}
.bubble-container .social-feature {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px;
  grid-column-gap: 3em;
  grid-row-gap: 7px;
}

.bubble.group-bubble {
  padding: 20px;
}

.pes-label {
  color: var(--darkestColor);
  font-weight: 600;
}

.pes-value {
  font-weight: 600;
  font-size: larger;
}

/* end Dashboard*/
/* Lesson Detail */
.btn-see-all {
  background: white;
  border-radius: 10px;
}

.lesson-streak {
  color: white;
  background-color: darkgreen;
  border-radius: 3px;
  padding-left: 8px;
  margin-right: 100px;
  font-weight: bold;
}

.lesson-streak::before {
  content: "";
  background: lightgreen;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
}

.lesson-container {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 10px;
}

.lesson-title {
  background: white;
}

.progress-videos {
  background-color: rgb(250, 250, 250);
  padding: 30px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

.skill-level-summary {
  background-color: rgb(250, 250, 250);
  padding: 30px;
  border-radius: 10px;
  align-self: end;
}

.lesson-resource-container {
  width: 100%;
}

.lesson-resources {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
}

.lesson-video-container {
  width: 100%;
}

.lesson-videos {
  background-color: rgb(250, 250, 250);
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(var(--gridColsFavorite), 1fr);
  grid-row-gap: 2em;
}

.lesson-video-button {
  grid-column: 1/span var(--gridColsFavorite);
}

.section-title {
  display: inline-block;
  font-size: var(--titleFontSize);
  font-weight: bold;
  color: var(--darkestColor);
}
.section-title span {
  font-weight: bold;
}
.section-title svg {
  margin-bottom: 10px;
}
.section-title a {
  font-weight: normal;
  font-size: var(--normalFontSize);
  margin-left: 20px;
}
.section-title .help-icon {
  font-size: 0.6em;
}

.player-videos {
  background-color: rgb(250, 250, 250);
  border-radius: 10px;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(var(--gridColsFavorite), 1fr);
  grid-gap: 1em;
  color: var(--darkestColor);
}
.player-videos img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.player-video-button {
  grid-column: 1/span var(--gridColsFavorite);
}

/* New Lesson Detail with inplace video */
.ld-control-container {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 180px 2fr 1fr 0.5fr;
  grid-column-gap: 10px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  align-items: center;
  justify-items: center;
}
.ld-control-container .timer-buttons button {
  border: none;
  background-color: white;
}

.ld-timers {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  margin-top: 0;
  margin-right: 10px;
  align-items: center;
  justify-items: center;
}
.ld-timers div {
  color: #343434;
  font-size: 1.05em;
  font-weight: 600;
}
.ld-timers span {
  color: #9d0b0e;
  font-size: 1em;
  font-weight: 600;
}

.ld-minor-controls {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  border-radius: 10px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  background-color: white;
  margin-top: 10px;
  background-color: #f1f1f1;
}
.ld-minor-controls .minor-control {
  min-width: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.ld-controls {
  background-color: white;
  border-radius: 10px;
  padding-top: 15px;
  padding-bottom: 10px;
  display: grid;
  grid-template-columns: 35% 65%;
  grid-column-gap: 20px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.ld-header-bubble {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  padding: 10px 20px 10px 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.ld-header-bubble a {
  width: 120px;
  justify-self: end;
  padding-top: 11px;
  border-radius: 5px;
  margin-bottom: 4px;
  max-height: 37px;
}

.ld-title-black {
  color: var(--darkestColor);
  font-family: var(--fontFamily);
  font-weight: bold;
  font-size: var(--h1FontSize);
}

.ld-description hr {
  background-color: #eceeef;
}
.ld-description {
  width: 100%;
  justify-self: start;
}

.ld-top-header-right {
  min-width: 100%;
  display: grid;
  grid-column: span 3;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: right;
  background-color: rgb(250, 250, 250);
  color: black;
  font-weight: 500;
  font-size: 0.8rem;
  margin-bottom: 20px;
}
.ld-top-header-right .ld-stats {
  min-width: 100%;
  justify-self: start;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 30px;
  background-color: #f1f1f1;
  border-radius: 10px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.ld-top-header-right .ld-stats .stat {
  display: grid;
  grid-template-columns: 1.1fr 2fr;
}
.ld-top-header-right .ld-stats .stat-title {
  font-weight: 700;
  color: var(--darkestColor);
}
.ld-top-header-right select {
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 6px;
  padding: 4px;
  padding-right: 18px;
  padding-left: 10px;
}

.player-container {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 30% 70%;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.player-list {
  margin-right: 10px;
  padding-bottom: 10px;
}
.player-list a {
  margin-top: 0;
}

.button-grid {
  display: grid;
  grid-template-columns: 70px 1fr;
}

.play-message {
  font-size: large;
  font-weight: bold;
  margin-left: 40px;
}

.ld-generic {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 100%;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.ld-audio {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.ld-resources {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 100%;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.ld-resources img {
  max-width: 800px;
}
.ld-resources p {
  font-size: larger;
}

.ld-actions {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 30% 30% 30%;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.ld-actions a, .ld-actions button {
  margin-bottom: 5px;
  margin-right: 7px;
}

.video-loops {
  padding: 10px;
  border: 1px solid black;
  background-color: rgb(250, 250, 250);
  display: inline-block;
  border-radius: 5px;
  margin-right: 30px;
  margin-bottom: 7px;
  visibility: hidden;
}
.video-loops button:nth-of-type(3n) {
  margin-right: 15px;
}
.video-loops input[type=text]:nth-of-type(2n) {
  margin-right: 12px;
}

.ld-popup-prompt {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translate(-25%);
  min-width: 30%;
  font-weight: bold;
  font-size: 2.5em;
  display: none;
  z-index: 5;
  margin: auto;
  background-color: #343434;
  opacity: 60%;
  color: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 8px 8px 8px #55595c;
  border: 5px solid green;
}

.iframe-popup {
  position: fixed;
  width: 80%;
  height: 75%;
  visibility: hidden;
  z-index: 100;
  background-color: #ced4da;
  left: calc(var(--leftMenuWidth) + 10px);
  top: 110px;
  border: 2px solid #004094;
  border-radius: 5px;
  box-shadow: 14px 14px 14px #343a40;
}

.iframe-modal {
  z-index: 99999;
  opacity: 0;
  transition: opacity 400ms ease-in;
  visibility: hidden;
}

.iframe-modal-close {
  background: #7c7c7c;
  color: white;
  line-height: 40px;
  position: absolute;
  position: fixed;
  z-index: 99999;
  text-align: center;
  top: 65px;
  right: 50px;
  width: 36px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 20px;
  box-shadow: 1px 1px 3px #000;
  font-size: xx-large;
  visibility: hidden;
}

.iframe-modal-close:hover {
  background: #9d0b0e;
  color: white;
}

/* end new Lesson Detail*/
/* end lesson detail*/
/* Practice page */
.practice-container {
  background: rgb(250, 250, 250);
  margin-right: 20px;
  padding-right: 10px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 35px;
}
.practice-container .generic-bubble {
  margin-bottom: 15px;
}

.top-bubble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

.lbl-practice-tools {
  font-family: var(--fontFamily);
  color: var(--darkestColor);
  font-size: var(--normalFontSize);
  font-weight: bold;
  justify-self: center;
}
.lbl-practice-tools button {
  border: none;
  background: white;
}
.lbl-practice-tools button svg {
  padding-top: 7px;
  padding-bottom: 7px;
}

.time-display {
  font-family: var(--fontFamily);
  color: #9d0b0e;
  font-size: var(--timeFontSize);
  font-weight: bold;
  text-align: center;
}
.time-display p {
  font-size: var(--normalFontSize);
  color: var(--darkestColor);
}

.log-time-cell {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 1fr;
  background-color: rgb(250, 250, 250);
  padding: 6px;
  border-radius: 3px;
  font-size: smaller;
}

.generic-bubble {
  background: white;
  border-radius: 10px;
  padding: 30px;
}

.practice-tools-container {
  display: grid;
  grid-template-columns: 1fr;
}
.practice-tools-container .generic-bubble {
  padding: 15px;
  margin-bottom: 15px;
}
.practice-tools-container .top-bubble {
  display: grid;
  grid-template-columns: 30% 1fr 1fr 30px;
}

.practice-log-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: min-content 1fr;
}

.practice-log-entry {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}
.practice-log-entry .notes-display {
  grid-column-start: 1;
  grid-column-end: 4;
}
.practice-log-entry .notes-display hr {
  background-color: rgb(250, 250, 250);
}
.practice-log-entry .notes-display .header {
  color: #9d0b0e;
}

.metronome-input,
textarea {
  font-family: var(--fontFamily);
  font-size: var(--normalFontSize);
  background-color: rgb(250, 250, 250);
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ced4da;
  margin-bottom: 10px;
}

.metronome-container {
  display: grid;
  grid-template-columns: 350px 1fr 1fr;
  grid-gap: 1em;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.metronome-resolution {
  display: flex;
  padding-right: 50px;
  margin-left: 20px;
  margin-right: 35px;
}
.metronome-resolution .lbl-practice-tools {
  padding-top: 7px;
  padding-right: 7px;
}
.metronome-resolution select {
  background-color: #e1e1e1;
}

.metronome-control-buttons {
  grid-column-start: 1;
  grid-column-end: 4;
  display: grid;
  grid-template-columns: 362px 1fr;
  padding-left: 0;
  margin-left: 0;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 15px;
  padding-right: 35px;
}

.btn-wide {
  grid-column: 2;
}

.metronome-countdown {
  min-width: 90px;
  border-radius: 4px;
  font-size: calc(var(--normalFontSize) - 0.15rem);
}

.metronome-slider {
  grid-column-start: 2;
  grid-column-end: 4;
  padding-right: 40px;
}

.btn-end {
  border-radius: 4px;
}

.practice-tab {
  font-weight: 500;
  font-size: larger;
  color: #55595c;
  background-color: #e4e4e4;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-top: 10px;
  margin-right: 2px;
  letter-spacing: 2px;
  border-bottom: 1px solid rgb(207, 207, 207);
  padding: 4px;
}

.practice-tab:hover {
  background-color: #dfdfdf;
  color: #004094;
  font-weight: 900;
}

.practice-tab.active {
  color: #004094;
  background-color: #d4d4d4;
  font-weight: 900;
  border-bottom: 2px solid #004094;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tab-count {
  font-weight: 200;
  font-size: small;
}

.other-times {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20px 20px;
  grid-auto-flow: column;
}

.btn-round {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  color: white;
  font-weight: 900;
}

.btn-round:hover {
  color: var(--darkestColor);
  background: #a3a0a0;
}

.btn-round-selected {
  border-radius: 0;
  border: 4px solid var(--darkestColor);
}

.note-section {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 1em;
  align-content: start;
}
.note-section .note-box {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 0.4em;
  align-content: start;
}
.note-section .note-box label {
  font-family: var(--fontFamily);
  color: var(--darkestColor);
  font-size: var(--normalFontSize);
  font-weight: 900;
}

.confidence-choice {
  margin-bottom: 30px;
  justify-self: center;
}

.btn-black {
  background: #343a40;
}

.btn-gray {
  background: #a3a0a0;
}

.btn-yellow {
  background: orange;
}

.btn-orange {
  background: orangered;
}

.btn-red {
  background: #9d0b0e;
}

/* end practice */
/* Lesson Resources */
.lesson-resources-container {
  display: grid;
  grid-template-columns: 75%;
  grid-gap: 1em;
  justify-content: center;
}
.lesson-resources-container .upload-resource {
  display: grid;
  grid-template-columns: 1fr 40%;
  grid-gap: 1em;
  justify-content: center;
  align-content: center;
}
.lesson-resources-container .upload-resource button {
  border-radius: 10px;
  font-size: var(--normalFontSize);
}
.lesson-resources-container .bubble-title {
  font-weight: bold;
  font-size: var(--titleFontSize);
  padding-top: 7px;
}
.lesson-resources-container .audio-file-display {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
  align-content: end;
}
.lesson-resources-container .audio-file-display .player {
  display: inline;
  justify-self: center;
}
.lesson-resources-container .audio-file-display button {
  height: 40px;
  align-self: end;
}

.chord-charts-display {
  display: grid;
  grid-template-columns: repeat(var(--gridColsFavorite), 1fr);
}

.other-file-display {
  display: grid;
  grid-template-rows: 1fr;
}

.btn-outline {
  font-family: var(--fontFamily);
  text-transform: uppercase;
  border: 1px solid #55595c;
  background: white;
  font-size: 0.8em;
  letter-spacing: 3px;
  padding: 0;
}

/* end lesson resources */
/* HOME Page */
.home-container {
  margin-left: 2em;
  margin-right: 2em;
}

.homepage-salute {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background-color: white;
  border-radius: 10px;
  align-items: center;
  justify-items: start;
  border: 1px solid #adb5bd;
  border-radius: 10px;
  padding: 30px;
  z-index: 999;
  width: 800px;
  max-width: 90%;
  transition: 400ms ease-in-out;
}
.homepage-salute .btn {
  margin-top: 10px;
}

.salute-message {
  font-size: 1.25rem;
  font-weight: bold;
}

.homepage-salute.active {
  transform: translate(-50%, -50%) scale(1);
}

#overlay {
  position: fixed;
  opacity: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

.page-salute {
  background: white;
  border-radius: 10px;
  align-items: center;
  justify-items: start;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  padding: 30px;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: 2em;
  margin-right: 2em;
}

.login-salute {
  background: white;
  border-radius: 10px;
  align-items: center;
  justify-items: start;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  padding: 30px;
  margin-top: 2em;
  margin-bottom: 2em;
}

.login-button {
  border-radius: 5px;
  padding-left: 40px;
  padding-right: 40px;
}

.home-stats-row {
  display: grid;
  grid-template-columns: repeat(var(--homeStatsColCount), 1fr);
  grid-gap: 1em;
  margin-top: 2em;
}

.xp-bubble {
  background: white;
  border-radius: 10px;
  padding: 10px;
}

.xp-leaderboard {
  display: grid;
  grid-template-rows: min-content;
  grid-gap: 1em;
  margin-top: 2em;
}

.xp-leaderboard-item {
  display: grid;
  grid-template-columns: min-content 1fr max-content;
  grid-auto-rows: min-content;
  grid-gap: 1em;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.xp-leaderboard-item .xp-score {
  font-weight: 900;
  color: var(--darkestColor);
  padding-top: 6px;
  padding-right: 20px;
}
.xp-leaderboard-item .xp-score:hover {
  color: #a3a0a0;
}
.xp-leaderboard-item .xp-leader {
  color: var(--darkestColor);
  padding-top: 6px;
}
.xp-leaderboard-item .xp-leader a {
  font-weight: 900;
}
.xp-leaderboard-item .xp-leader:hover {
  opacity: 0.5;
}

.xp-profile-img {
  border-radius: 10px;
  width: 32px;
  height: 32px;
}

.whats-new {
  margin-top: 2em;
}

/* end Home page */
/* User PROFILE */
.profile-title {
  color: var(--darkestColor);
  font-size: 1.5em;
  font-weight: bold;
  text-align: left;
  margin-top: 1.2em;
}
.profile-title span {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 2px;
  margin-left: 100px;
  text-transform: uppercase;
  color: #9d0b0e;
}

.profile-container {
  display: grid;
  grid-template-columns: 30% 70%;
  text-align: center;
  min-height: 100vh;
}

.left-col {
  background: white;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 30px;
  margin-left: 24px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  border-radius: 10px;
}
.left-col .profile-controls {
  text-align: center;
  margin-top: 10px;
}
.left-col .bio-text-wfh {
  margin-top: 20px;
  color: var(--darkestColor);
  text-align: justify;
  font-size: var(--normalFontSize);
}

.summary-item {
  text-align: left;
  padding-left: 20px;
}
.summary-item .header {
  color: #4c4646;
}
.summary-item .item {
  color: var(--darkestColor);
  font-weight: 900;
  font-size: 1.1em;
}

.main-body {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 2em;
  text-align: center;
  margin-left: 2em;
  margin-right: 2em;
}
.main-body .user-summary {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 1.5em;
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.main-body .stats-row {
  display: grid;
  grid-template-columns: repeat(var(--profileStatsBubbleCount), minmax(300px, 430px));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.main-body .stats-bubble {
  display: grid;
  grid-template-columns: 80px 1fr;
  background: white;
  border-radius: 10px;
  padding: 20px;
  align-items: center;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.main-body .stats-bubble svg {
  background: #9d0b0e;
  fill: white;
  border-radius: 50%;
  padding: 9px;
}
.main-body .progress-summary {
  width: 100%;
}
.main-body .progress-summary .progress-bubble {
  display: grid;
  grid-template-columns: repeat(var(--gridColsProfileProgress), 1fr);
  grid-gap: 1.5em;
  background: white;
  border-radius: 10px;
  padding: 30px;
  margin-top: 1em;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.main-body .progress-summary .thumb {
  width: var(--thumbImageWidth);
}
.main-body .progress-summary .thumb img {
  width: var(--thumbImageWidth);
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
.main-body .progress-summary .thumb img:hover {
  opacity: 50%;
}
.main-body .progress-summary .lsn-name {
  font-size: 0.8em;
}
.main-body .goal-summary-profile {
  display: grid;
  grid-template-columns: repeat(var(--dbStatsBubbleCount), 300px);
  grid-row-gap: 20px;
  grid-gap: 1em;
}
.main-body .goal-summary-profile .goal-bubble {
  background: white;
  border-radius: 10px;
  font-size: var(--normalFontSize);
  font-weight: 900;
  color: var(--darkestColor);
  padding: 20px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.goal-summary {
  display: grid;
  grid-template-columns: repeat(var(--dbStatsBubbleCount), minmax(300px, 430px));
  grid-row-gap: 20px;
  grid-template-rows: min-content;
  grid-gap: 1em;
}
.goal-summary .goal-bubble {
  background: white;
  border-radius: 10px;
  font-size: var(--normalFontSize);
  font-weight: 900;
  color: var(--darkestColor);
  padding: 20px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.full-name {
  text-align: center;
  margin-top: 20px;
  font-size: var(--titleFontSize);
  font-weight: 900;
  color: var(--darkestColor);
}

.instrument {
  text-align: center;
  font-size: var(--normalFontSize);
  font-weight: 900;
  color: var(--darkestColor);
}

.follow-button {
  text-align: center;
}

.profile-badge {
  color: #9d0b0e;
}
.profile-badge svg {
  width: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* end User PROFILE */
/* USER Profile Activity */
.outer-bubble-3 {
  background: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.container-bubble-3 {
  background: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 30% 30% 30%;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.container-bubble-2 {
  background: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 300px 300px;
}

.container-bubble-1 {
  background: white;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 100%;
}

.container-bubble {
  display: grid;
  grid-template-rows: 1fr;
  background: white;
  border-radius: 10px;
  padding-left: 70px;
}

.activity-body {
  padding: 20px;
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 2em;
  text-align: center;
  margin-left: 2em;
  margin-right: 2em;
}
.activity-body .progress-bubble {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.5em;
  background: white;
  border-radius: 10px;
  padding: 30px;
  margin-top: 1em;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}
.activity-body .tab-content {
  width: 100%;
}
.activity-body .thumb {
  width: 300px;
}
.activity-body .thumb img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  width: 200px;
}
.activity-body .thumb img:hover {
  opacity: 50%;
}
.activity-body .lsn-name {
  font-size: var(--normalFontSize);
}
.activity-body .post-container {
  padding-top: 20px;
  padding-bottom: 20px;
}
.activity-body .post-listing {
  text-align: start;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
}

/* end user activity */
/* Path list */
/* end path list*/
/* Path DETAIL */
/* end Path DETAIL */
/* Favorites list */
.favorites-container .favorites-list {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 1.5em;
}
.favorites-container .favorites-list .favorite {
  background: white;
  border-radius: 10px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.favorites-container .favorites-list .favorite .dropdown {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: end;
  padding-right: 0;
  padding-bottom: 25px;
}
.favorites-container .favorites-list .favorite .video-thumb img {
  width: 100%;
}
.favorites-container .favorites-list .favorite .lesson-desc {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* end Favorites list  */
/* Milestone detail */
/* end milestone detail*/
/* QN Complete */
.lesson-cell {
  padding-bottom: 5px;
  display: grid;
  grid-template-columns: 50px 150px 1fr 200px;
  grid-template-rows: min-content min-content;
  margin-bottom: 30px;
}

/* end QN Complete */
/* Release Notes / What's New / Change Log */
.rn-container h3 {
  text-transform: none;
  color: var(--darkestColor);
}
.rn-container p {
  color: #9d0b0e;
}
.rn-container ul {
  margin-bottom: 30px;
}

/* End Release notes */
/* Journal */
.entry-title {
  font-size: 1.2em;
  font-weight: bold;
  color: #9d0b0e;
}

.entry-date {
  font-size: 1em;
  font-weight: bold;
}

.entry-body {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  margin-bottom: 25px;
}

/* end Journal */
/* CHARTING */
.dashboard-chart-row {
  display: grid;
  grid-template-columns: repeat(var(--dbStatsBubbleCount), minmax(300px, 430px));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.dashboard-chart-bubble {
  background: white;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
}

.dashboard-chart-bubble-2 {
  background: white;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  grid-column: 1/3;
}

.chart-bubble-big {
  background: white;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  margin-bottom: 25px;
}

/* end CHARTING */
/* SEQUENCE DISPLAY */
.sequence-container {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-column-gap: 3em;
  background: white;
  border-radius: 10px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  padding: 20px;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: 2em;
  margin-right: 2em;
}
.sequence-container h4 {
  padding-top: 0;
  margin-top: 0;
}

.sequence-col-left {
  border-right: 1px solid #adb5bd;
  padding-right: 10px;
}

.sequence-col-rt {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  grid-column-gap: 1.5em;
}

.sequence-image {
  width: calc(var(--thumbImageWidth) + 75px);
}

.sequence-image:hover {
  opacity: 50%;
}

.check-complete svg {
  margin-left: 25px;
  fill: rgb(0, 163, 114);
}

/* END SEQUENCE DISPLAY */
/* Coaching */
.coaching-body {
  padding-top: 75px;
  padding-left: 20px;
  padding-right: 20px;
}

.coaching-contents {
  display: grid;
  grid-template-columns: 30% 70%;
}

.coaching-calendar {
  min-height: 700px;
}

.client-list {
  background-color: white;
  border-radius: 5px;
  padding: 15px 30px 15px 30px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.client-dashboard-contents {
  display: grid;
  grid-template-columns: 100%;
  grid-column-gap: 20px;
}
.client-dashboard-contents .client-dashboard-item {
  background-color: white;
  border-radius: 5px;
  padding: 15px 30px 15px 30px;
  margin-bottom: 20px;
  margin-right: 20px;
  border: 1px solid #ced4da;
  box-shadow: 4px 4px 4px #ced4da;
}
.client-dashboard-contents .client-dashboard-item .item-header {
  background-color: rgb(243, 243, 243);
  border-radius: 5px;
  padding: 15px 30px 15px 30px;
  margin-bottom: 20px;
  margin-right: 20px;
  border: 1px solid #ced4da;
}
.client-dashboard-contents .client-dashboard-item .btn-secondary {
  padding: 5px 15px 5px 15px;
  font-size: 0.7em;
}
.client-dashboard-contents .db-video {
  width: 80%;
  padding-left: 15%;
  margin-bottom: 20px;
}

.client-detail-contents {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 20px;
}
.client-detail-contents .client-detail-item {
  background-color: white;
  border-radius: 5px;
  padding: 15px 30px 15px 30px;
  margin-bottom: 20px;
  margin-right: 20px;
  border: 1px solid #ced4da;
  box-shadow: 4px 4px 4px #ced4da;
}
.client-detail-contents .client-detail-item .item-header {
  background-color: rgb(243, 243, 243);
  border-radius: 5px;
  padding: 15px 30px 15px 30px;
  margin-bottom: 20px;
  margin-right: 20px;
  border: 1px solid #ced4da;
}
.client-detail-contents .client-detail-item .btn-secondary {
  padding: 5px 15px 5px 15px;
  font-size: 0.6em;
}

.db-video {
  width: 80%;
  padding-left: 15%;
  margin-bottom: 20px;
}

/* end Coaching*/
/* Lesson Library */
.ll-bubble-container {
  margin-bottom: 20px;
}
.ll-bubble-container .ll-header {
  margin-top: 10px;
  padding-left: 8px;
  font-size: var(--titleFontSize);
  font-weight: 800;
  color: var(--darkestColor);
  display: grid;
  grid-template-columns: 10em auto;
  align-items: center;
}
.ll-bubble-container .ll-bubble {
  background: white;
  border-radius: 10px;
  display: grid;
  align-items: center;
  justify-items: center;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  padding-left: 20px;
  padding-right: 0;
  margin-top: 10px;
  margin-bottom: 2em;
}
.ll-bubble-container .ll-bubble svg {
  fill: #ced4da;
}
.ll-bubble-container .ll-bubble .select-css {
  margin: 0;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.ll-item {
  display: grid;
  grid-template-columns: 1fr 60px;
}

/* end lesson library */
/* QN Complete */
.score-summary {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  margin-bottom: 16px;
}

/* END QN Complete */
/* NEW Roadmap */
.roadmap-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 15px;
  justify-items: start;
}

.btn-sm {
  border-radius: 4px;
  padding: 10px;
}

.roadmap-item {
  background-color: white;
  padding: 13px;
  border-radius: 4px;
  box-shadow: 4px 4px 4px #ced4da;
  width: 100%;
  border: 1px solid #adb5bd;
  margin-bottom: 10px;
}
.roadmap-item .header {
  font-size: larger;
  font-weight: bold;
  color: black;
}
.roadmap-item a {
  font-size: larger;
  font-weight: bold;
}
.roadmap-item a.small-link {
  font-size: x-small;
  font-weight: normal;
}

.ignore-item {
  background-color: white;
  padding: 13px;
  border-radius: 4px;
  box-shadow: 4px 4px 4px #ced4da;
  width: 100%;
  border: 1px solid #adb5bd;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 180px 1fr;
}
.ignore-item .btn {
  margin-top: 15px;
}
.ignore-item .ignore-value {
  font-weight: bold;
  color: #9d0b0e;
}

.top-key {
  border-left: 9px solid rgba(0, 128, 0, 0.5);
}

.behind-key {
  border-left: 9px solid rgba(218, 165, 32, 0.6);
}

.ahead-key {
  border-left: 9px solid rgba(0, 0, 255, 0.6);
}

.matrix-key {
  border-left: 9px solid rgba(0, 0, 0, 0.3);
}

.has-lessons {
  border-left: 9px solid rgba(0, 0, 255, 0.6);
}

.song-lesson {
  border-left: 6px solid #9d0b0e;
}

.theory-lesson {
  border-left: 6px solid goldenrod;
}

.premium-lesson {
  border-left: 6px solid #2780f4;
}

/* end NEW Roadmap */
/* Status flags */
.learning-flag::before {
  content: "L";
  color: white;
  background: rgb(81, 81, 175);
  width: 14px;
  height: 14px;
  padding: 2px;
  vertical-align: middle;
  text-align: center;
}

.automating-flag::before {
  content: "A";
  background: rgb(98, 217, 238);
  color: white;
  width: 14px;
  height: 14px;
  padding: 2px;
  vertical-align: middle;
  text-align: center;
}

.integrating-flag::before {
  content: " I ";
  background: rgb(255, 196, 0);
  color: black;
  width: 14px;
  height: 14px;
  padding: 2px;
  padding-left: 4px;
  padding-right: 2px;
  vertical-align: middle;
  text-align: center;
}

.maintaining-flag::before {
  content: "M";
  background: green;
  color: white;
  width: 14px;
  height: 14px;
  padding: 2px;
  vertical-align: middle;
  text-align: center;
}

.inprogress-flag::before {
  content: " I ";
  background: rgb(204, 0, 255);
  color: white;
  width: 14px;
  height: 14px;
  padding: 2px;
  padding-left: 6px;
  padding-right: 0px;
  vertical-align: middle;
  margin-right: 7px;
  vertical-align: middle;
  text-align: center;
}

.complete-flag::before {
  content: "✓";
  background: green;
  color: white;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  padding-left: 2px;
  margin-right: 7px;
  vertical-align: middle;
  text-align: center;
}

/* end Status Flags */
/* Matrix Gantt Chart Display */
/*
https: //www.freecodecamp.org/news/create-gantt-chart-using-css-grid/
*/
.matrix-chart {
  display: grid;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

.group-row {
  grid-column: 1/-1;
  background-color: #9d0b0e;
  padding: 5px 5px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
  border-top: 1px solid rgba(0, 0, 0, 0.7);
  border-bottom: 2px solid rgba(0, 0, 0, 0.7);
}

.matrix-chart-row {
  display: grid;
  grid-template-columns: 1fr;
  background-color: #DCDCDC;
}

.chart-header {
  color: #fff;
  background-color: #4c4646;
  grid-template-columns: 1fr;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  padding: 10px;
}

.chart-period {
  color: #fff;
  background-color: #4c4646;
  border-bottom: 1px solid #000;
  grid-template-columns: repeat(10, 1fr);
}

.chart-period > span {
  text-align: center;
  font-size: 13px;
  align-self: center;
  font-weight: bold;
  padding: 10px 0;
}

.chart-lines {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: transparent;
  grid-template-columns: repeat(10, 1fr);
}

.chart-lines > span {
  display: block;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.chart-row-bars {
  list-style: none;
  display: grid;
  padding: 5px 0;
  margin: 0;
  grid-template-columns: repeat(10, 1fr);
  border-bottom: 1px solid #000;
  -content: center;
}

.chart-bar {
  font-weight: 450;
  text-align: center;
  font-size: 1.1em;
  min-height: 15px;
  background-color: #4c4646;
  padding: 3px;
  color: #fff;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border-radius: 15px;
}

.chart-bar-complete {
  font-weight: 450;
  text-align: center;
  font-size: 1.1em;
  min-height: 15px;
  background-color: green;
  padding: 3px;
  color: #fff;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border-radius: 15px;
}

.skill-indicator {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.skill-level-highlight {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid #9d0b0e;
  justify-self: center;
}

.skill-score {
  font-size: 1.4em;
  font-weight: bold;
  color: #343a40;
  z-index: 10;
}

/* table gantt testing */
/* end Matrix Gantt chart Display */
/* PES Info */
.pes-info {
  font-size: 1.1em;
  font-weight: 600;
  color: rgb(81, 81, 175);
  padding-bottom: 5px;
}

.pes-info-title {
  font-size: 1.2em;
  font-weight: 600;
  color: rgb(81, 81, 175);
  padding-bottom: 5px;
}

/* End PES INFO */
/* Leaderboard */
.legend-display {
  font-size: 1.3em;
  color: #343434;
  font-weight: bold;
  margin-top: 4px;
}

/* END Leaderboard */
/* Ads */
.menu-ad {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}

.top-ad {
  margin-left: 24px;
  margin-bottom: 15px;
}

/* end ads */
/* Tenx Admin */
.admin-login-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
}

.free-user-link {
  color: #2780f4;
}

.admin-toolbar .btn {
  margin-top: 5px;
}

/* end tenx admin */
/* Coach Profile */
.coach-image {
  float: left;
  max-width: 200px;
  margin-right: 15px;
  margin-bottom: 10px;
}

.amount-bold {
  font-weight: bold;
  color: forestgreen;
}

/*  END Coach Profile */
/* Coach Listing */
.coach-listing-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/*  end Coach Listing */
/* Matching QN */
.question-text {
  font-family: Acherus-Reg;
  font-size: 20px;
  font-weight: bold;
  color: #9d0b0e;
}

.question-explanation {
  font-family: Acherus-Reg;
  font-size: 16px;
  font-weight: bold;
  color: #55595c;
}

/* End matching QN*/
/* My Documents */
.learning-guides {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.learning-guide {
  width: 600px;
  background-color: white;
  padding: 13px;
  border-radius: 4px;
  box-shadow: 4px 4px 4px #ced4da;
  border: 1px solid #adb5bd;
  margin-bottom: 10px;
}
.learning-guide .title {
  font-weight: bold;
  font-size: larger;
}
.learning-guide .btn {
  margin-top: 10px;
}

/* end my Documents*/
/* MEDIA Queries */
@media (min-width: 320px) {
  :root {
    --h1FontSize: .7rem;
    --titleFontSize: 0.4rem;
    --normalFontSize: 0.3rem;
    --timeFontSize: 0.4rem;
    --leftMenuFontSize: 0.25rem;
    --leftMenuWidth: 150px;
    --topMessageOffset: 10px;
    --gridColsFavorite: 1;
    --searchWidth: 12em;
    --leftMenuIconWidth: 12px;
    --gridColsProfileProgress: 1;
    --searchWidth: 12em;
    --logoLeftPadding: 70px;
    --circleImageHeight: 40px;
    --leftMenuIconWidth: 12px;
    --thumbImageWidth: 80px;
    --topPadding: 12em;
    --homeStatsColCount: 1;
    --dbStatsBubbleCount: 1;
    --feedFilterHeight: 300px;
    --spinnerSize: .7rem;
    --profileStatsBubbleCount: 1;
  }
  .txg-logo img {
    max-height: 30px;
  }
}
@media (min-width: 500px) {
  :root {
    --h1FontSize: .8rem;
    --titleFontSize: 0.5rem;
    --normalFontSize: 0.4rem;
    --timeFontSize: 0.3rem;
    --leftMenuFontSize: 0.4rem;
    --leftMenuWidth: 190px;
    --topMessageOffset: 10px;
    --gridColsFavorite: 1;
    --gridColsWhatsNew: 1;
    --gridColsProfileProgress: 1;
    --searchWidth: 12em;
    --logoLeftPadding: 70px;
    --circleImageHeight: 50px;
    --thumbImageWidth: 100px;
    --leftMenuIconWidth: 12px;
    --topPadding: 12em;
    --homeStatsColCount: 1;
    --dbStatsBubbleCount: 1;
    --feedFilterHeight: 365px;
    --spinnerSize: .9rem;
    --profileStatsBubbleCount: 1;
  }
  .txg-logo img {
    max-height: 40px;
  }
}
@media (min-width: 768px) {
  :root {
    --h1FontSize: .9rem;
    --titleFontSize: 0.7rem;
    --normalFontSize: 0.5rem;
    --timeFontSize: 0.5rem;
    --leftMenuFontSize: 0.6rem;
    --leftMenuWidth: 200px;
    --topMessageOffset: 10px;
    --feedCardWidth: 40rem;
    --gridColsFavorite: 2;
    --gridColsWhatsNew: 2;
    --gridColsProfileProgress: 1;
    --searchWidth: 10em;
    --logoLeftPadding: 75px;
    --circleImageHeight: 60px;
    --leftMenuIconWidth: 15px;
    --thumbImageWidth: 130px;
    --dbStatsBubbleCount: 1;
    --topPadding: 10em;
    --homeStatsColCount: 1;
    --feedFilterHeight: 390px;
    --spinnerSize: 1.3rem;
    --profileStatsBubbleCount: 1;
  }
  .txg-logo img {
    max-height: 50px;
  }
}
@media (min-width: 1024px) {
  :root {
    --h1FontSize: 1.0rem;
    --titleFontSize: 0.8rem;
    --normalFontSize: 0.6rem;
    --leftMenuFontSize: 0.7rem;
    --timeFontSize: 0.6rem;
    --leftMenuWidth: 200px;
    --topMessageOffset: 10px;
    --feedCardWidth: 40rem;
    --gridColsFavorite: 3;
    --gridColsWhatsNew: 3;
    --gridColsProfileProgress: 2;
    --searchWidth: 18em;
    --logoLeftPadding: 70px;
    --circleImageHeight: 70px;
    --leftMenuIconWidth: 20px;
    --thumbImageWidth: 150px;
    --dbStatsBubbleCount: 2;
    --topPadding: 8.2em;
    --homeStatsColCount: 1;
    --feedFilterHeight: 415px;
    --spinnerSize: 2.0rem;
    --profileStatsBubbleCount: 1;
  }
  .txg-logo img {
    max-height: 60px;
  }
}
@media (min-width: 1200px) {
  :root {
    --h1FontSize: 1.0rem;
    --titleFontSize: 1.1rem;
    --normalFontSize: 0.7rem;
    --timeFontSize: 0.8rem;
    --leftMenuFontSize: 0.7rem;
    --leftMenuWidth: 200px;
    --topMessageOffset: -10px;
    --feedCardWidth: 45rem;
    --gridColsFavorite: 4;
    --gridColsWhatsNew: 4;
    --gridColsProfileProgress: 2;
    --searchWidth: 20em;
    --logoLeftPadding: 60px;
    --circleImageHeight: 80px;
    --leftMenuIconWidth: 25px;
    --thumbImageWidth: 170px;
    --dbStatsBubbleCount: 3;
    --topPadding: 6.5em;
    --homeStatsColCount: 2;
    --feedFilterHeight: 445px;
    --spinnerSize: 2.0rem;
    --profileStatsBubbleCount: 2;
  }
  .txg-logo img {
    max-height: 70px;
  }
}
@media (min-width: 1500px) {
  :root {
    --h1FontSize: 1.1rem;
    --titleFontSize: 1.2rem;
    --normalFontSize: .8rem;
    --timeFontSize: 1.0rem;
    --leftMenuFontSize: 0.8rem;
    --leftMenuWidth: 275px;
    --topMessageOffset: -150px;
    --feedCardWidth: 56.2rem;
    --gridColsFavorite: 4;
    --gridColsWhatsNew: 5;
    --gridColsProfileProgress: 3;
    --searchWidth: 23em;
    --logoLeftPadding: 80px;
    --circleImageHeight: 100px;
    --leftMenuIconWidth: 30px;
    --thumbImageWidth: 200px;
    --dbStatsBubbleCount: 3;
    --topPadding: 6.5em;
    --homeStatsColCount: 2;
    --feedFilterHeight: 470px;
    --spinnerSize: 2.0rem;
    --profileStatsBubbleCount: 2;
  }
  .txg-logo img {
    max-height: 90px;
  }
}
@media (max-height: 465px) {
  :root {
    --menuScroll: scroll;
  }
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 1200px) {
  .modal-content {
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */