html {
  overflow-x: hidden;
  overflow-y: scroll;
}

@media (max-width: 200px) {
  html {
    overflow-x: auto;
  }
}
a:link, visited, hover, active, a[data-bs-toggle=collapse] {
  color: #333333;
  text-decoration: none;
}

:root {
  --sc-membership-button: #0088e4;
  --sc-membership-box-shadow: rgba(13,110,253,.25);
  --slider-checked-focused: #2196F3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sc-membership-button: #2e81b8;
    --sc-membership-box-shadow: rgba(221, 224, 252, 0.25);
    --slider-checked-focused: #4391D0;
  }
}
.store-link-android {
  width: 172px;
  height: 60px;
}

.naviBtn {
  padding-top: 10px;
  text-align: center;
  font-size: 40px;
  color: var(--nav-button-color);
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cccccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 0px;
  bottom: -5px;
  background-color: #60676d;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--slider-checked-focused);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--slider-checked-focused);
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
  background-color: #0f72c6;
}

.slider.round {
  border-radius: 10px;
}

.slider.round:before {
  border-radius: 50%;
}

/*------------------------------------
    To deal with pop-ups (modals)
    .popover's z-index is 1060 by default.
-------------------------------------*/
.top-container, .top {
  z-index: 1061;
}

.modal-backdrop {
  z-index: 1062;
  opacity: 0.7 !important;
}

.modal {
  z-index: 1063;
}

.modalBtnDiv {
  padding-left: 5px;
  padding-right: 5px;
}

.modalBtn {
  padding: 0.12em;
  border: none;
  background: none;
  outline: none;
  color: #555555;
  font-size: 28px;
}

.modalBtn:focus, active {
  -moz-outline-style: none;
  outline-style: none;
  outline: none;
  outline: 0;
}

.wordwrap {
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap; /* Opera <7 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* IE */
  color: var(--text-normal);
}

/*********************
    Common
*********************/
.sc-contents-main {
  max-width: 750px;
  margin: 0 auto;
  background: #ffffff;
}

.sc-contents-wrap {
  margin: 0 auto;
  max-width: 750px;
}

.sc-section {
  padding: 10px 0 10px 0;
  margin: 0px;
}

.sc-section-divider {
  background-color: var(--background-dark);
  height: 15px;
}

.playall {
  color: var(--light-contrast-color);
  font-size: 0.7em;
  font-weight: 600;
  margin: 9px 0 9px 5px;
  padding: 4px;
  border-radius: 3px;
}

.popover {
  max-width: 80vw 600px;
  width: auto;
}

/*********************
    Layout
*********************/
.layoutTopItem {
  padding: 7px 7px 7px 0px;
  height: 100%;
  display: none;
}

.layoutTopButton, .layoutTopBackButton {
  width: 46px;
  height: 46px;
  padding: 5px;
}

.layoutTopButton {
  border-radius: 4px;
}

.showMore {
  color: var(--text-lighter);
  font-weight: 500;
  letter-spacing: 0.5px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: var(--background-dark);
}

/*********************
    RecordFile
**********************/
/* audio player */
.mejs-container .mejs-controls {
  background: rgb(66, 139, 202);
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: #1b6795;
}

.mejs__controls .mejs__button button {
  background-image: url("/public/assets/mejs-controls-dark-CMah7naM.svg") !important;
}

.mejs__container {
  border-radius: 25px;
  background: #eeeeee;
}

.mejs__button.mejs__volume-button.mejs__mute {
  display: none;
}

.mejs__horizontal-volume-slider {
  display: none !important;
}

.mejs__controls:not([style*="display: none"]) {
  background: none;
}

.mejs__time {
  color: #666666;
}

/* record page */
.inputEdit {
  border: 0 none;
  outline-width: 0;
  background-color: var(--background-light);
  color: var(--text-normal);
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 10px;
}

.switch input {
  display: none;
}

.record-item:hover, .playall:hover {
  --record-item-hover-bg-color: #eff7ff;
  background-color: var(--record-item-hover-bg-color);
  text-decoration: underline;
  opacity: 1;
  text-decoration-color: #999999;
  -webkit-text-decoration-color: #999999;
}

@media (prefers-color-scheme: dark) {
  .record-item:hover, .playall:hover {
    --record-item-hover-bg-color: #5b5b5b;
  }
}
.audio-player {
  text-align: center;
}

.audio-player > div {
  margin: auto;
}

.recordItemDiv {
  padding: 0 15px 0 0;
  word-break: break-all;
}

.recordItemTitle {
  font-size: 1em;
  font-weight: 400;
  --record-item-title-color: #333333;
  color: var(--record-item-title-color);
}

@media (prefers-color-scheme: dark) {
  .recordItemTitle {
    --record-item-title-color: #eeeeee;
  }
}
.recordItemInfo {
  font-size: 0.77em;
  font-weight: 400;
  color: #999999;
}

.recordItemLeft {
  float: left;
  margin: 0px;
}

.recordItemIcon {
  font-size: 11px;
}

.recordItemBadge {
  float: right;
  margin: 0 0 0 5px;
}

.recordTagBadge {
  background-color: #eeeeee;
  color: #999999;
}

@media (prefers-color-scheme: dark) {
  .recordTagBadge {
    background-color: #444444;
    color: var(--text-lightest);
  }
}
.recordStatusNotOK {
  text-align: center;
  padding: 20px;
  line-height: 1.8;
  color: var(--text-lighter);
}

#recordPost h6 {
  font-weight: 600;
}

/*********************
    User page
**********************/
.biography {
  margin: 0 20px 0 20px;
  font-size: 0.8rem;
  color: var(--text-lighter);
  overflow-wrap: break-word;
  text-align: center;
}

#biotext {
  color: var(--text-normal);
  background-color: var(--background-light);
}

.sc_user_graph_list {
  font-size: 12;
  padding: 3px 5px 3px 5px;
  overflow-wrap: break-word;
}

.sc_user_graph_list_title {
  font-weight: 500;
  font-style: italic;
  overflow-wrap: break-word;
}

.follow-text p {
  font-size: 0.8rem;
  margin-bottom: 0;
}

@media (min-width: 375.01px) and (max-width: 413px) {
  .follow-text p {
    font-size: 0.7rem;
  }
}
@media (max-width: 375px) {
  .follow-text p {
    font-size: 0.6rem;
  }
}
@media (prefers-color-scheme: dark) {
  .border-bottom {
    border-bottom-color: #555 !important;
  }
}
#logout {
  margin-top: 10px;
  display: inline-block;
  color: var(--text-normal);
  border-color: #bebebe;
}

#checkBuildInfo {
  margin-top: 10px;
  display: block;
  color: var(--text-normal);
  border-color: #bebebe;
}

@media (prefers-color-scheme: dark) {
  #logout, #checkBuildInfo {
    border-color: #585858;
  }
}
/*********************
    RECORDS
*********************/
.sc_activity_list {
  font-size: 14;
  padding: 7px 5px 7px 5px;
}

.sc_activity_list_profile_img {
  margin: 0px;
  width: 25px;
}

.sc_activity_list_text_bold {
  font-weight: 500;
}

.sc_activity_list_time {
  font-size: 10;
  color: var(--text-lighter);
}

.chart-container {
  position: relative;
  max-height: 60vh;
  min-height: 30vh;
}

/*********************
    Follow button
*********************/
#followBtn {
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  border-color: #2196F3;
  background-color: #2196F3;
  width: 100%;
  height: 100%;
}

#followBtn.followBtn-following {
  color: #2196F3;
  background-color: #D9EEFF;
}

@media (prefers-color-scheme: dark) {
  #followBtn {
    border-color: #4391D0;
    background-color: #4391D0;
  }
  #followBtn.followBtn-following {
    background-color: #d9eeff;
    color: #4391D0;
  }
}
#followBtn:focus {
  outline: 0;
}

/*********************
    Comment
*********************/
.comment {
  color: var(--text-normal);
}

span.text-muted {
  color: #6c757d !important;
}

@media (prefers-color-scheme: dark) {
  span.text-muted, #commentCharactersLeft {
    color: var(--text-lighter) !important;
  }
}
.comment-wrapper ul.comment-list {
  padding-inline-start: 0px;
  padding-left: 0px;
  -webkit-padding-start: 0;
}

.comment-wrapper .comment-list .comment-table img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.comment-wrapper .comment-list .comment-table {
  margin-bottom: 20px;
  text-align: left;
}

.comment-wrapper .comment-body span.comment {
  white-space: pre-line;
  word-break: break-word;
}

.comment-wrapper textarea {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  max-height: 96px;
  width: 100%;
  resize: none;
  overflow-x: hidden;
}

.comment-wrapper h6 {
  display: inline-flex;
  margin-bottom: 0rem;
}

.comment-wrapper textarea:focus {
  outline: none !important;
}

.comment-wrapper .textarea {
  flex: 1 1 auto;
  margin-left: 15px;
}

.comment-wrapper .postComment {
  flex: 0 0 auto;
}

.comment-wrapper .badComment {
  opacity: 0.3 !important;
}

.comment-wrapper .badComment:hover {
  opacity: 1 !important;
}

.comment-wrapper .deletedComment {
  color: grey;
  font-style: italic;
}

.postComment .btn {
  color: white;
  background: #11D4D4;
}

@media (prefers-color-scheme: dark) {
  .postComment .btn {
    background: #39ACAC;
  }
}
.postComment .btn:disabled {
  background: #A3DCDC;
}

/*********************
    Submodules
*********************/
.shareModalItem {
  height: 30px;
  margin: 0px;
}

.shareOrEmbedLinks {
  border-radius: 10%;
}

.shareOrEmbedLinks.active .subHead {
  color: black;
}

.shareOrEmbedTabs {
  overflow: hidden;
  background-color: inherit;
  margin: 0.5rem 1rem;
}

/* Style the buttons that are used to open the tab content */
.shareOrEmbedTabs span {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 5px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.shareOrEmbedTabs span:hover {
  background-color: #eeeeee;
}

/* Create an active/current tablink class */
.shareOrEmbedTabs span.active {
  background-color: #ccc;
}

/* Style the tab content */
.shareOrEmbedTabContent {
  padding: 1rem;
  border-top: none;
}

.collapseIcon {
  font-size: 1.2em;
  margin-right: 0.4em;
}

.collapseListItem {
  height: 15px;
  padding: 12px;
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  .collapseListItem {
    color: #d0d0d0;
  }
}
.likesContent {
  float: left;
  margin: 0px;
  color: var(--text-normal);
}

.sc_membership_your_plan {
  font-weight: 350;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--light-contrast-color);
}

.sc_membership_button {
  color: var(--sc-membership-button);
  border-color: var(--sc-membership-button);
  background: #FFFFFF;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 3px;
}

.sc_membership_button:hover {
  color: #FFFFFF;
  background: var(--sc-membership-button);
}

.sc_membership_button:active {
  color: #FFFFFF !important;
  background: var(--sc-membership-button) !important;
  box-shadow: 0 0 0 0.25rem var(--sc-membership-box-shadow);
}

.sc_membership_button_rev {
  color: #FFFFFF;
  border-color: var(--sc-membership-button);
  background: var(--sc-membership-button);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 3px;
}

.sc_membership_button_rev:hover {
  color: #000000;
  background: var(--sc-membership-button);
}

.sc_membership_button_rev:active {
  background: var(--sc-membership-button);
  box-shadow: 0 0 0 0.25rem var(--sc-membership-box-shadow);
}

.sc_membership_message {
  color: var(--sc-membership-button);
  background: #FFFFFF;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  display: none;
}

/********************************************
    Workaround for bootstrap migrating to v5
*********************************************/
.old-btn-link {
  font-weight: 400;
  color: #0d6efd;
}

.fluid-container {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.follow-container {
  display: flex;
  flex-direction: column;
  padding: 0 10px 20px 10px;
  height: 65px;
}

.follow-container.row > * {
  width: unset;
}

.fluid-container.row > * {
  width: unset;
}

.audioplayer.table > * > * > * {
  padding: 0;
  background-color: #212529; /* TODO: name this color as it is used in several places */
} /* TODO: remove 'table' and replace it with row or div */
button.clickable {
  text-decoration: none !important;
}

@media (prefers-color-scheme: dark) {
  .showMore.clickable.btn {
    border-color: var(--background-light);
    background-color: var(--text-lightest);
    color: #CCC;
    opacity: 1;
  }
  .showMore.clickable.btn:hover {
    background-color: rgb(185, 185, 185);
    color: var(--text-normal);
  }
}
.container-fluid {
  background-color: var(--background-light);
}

.container-fluid.top {
  background-color: var(--header-color);
  padding: 0px;
  margin: 0px;
  height: 60px;
  position: fixed;
  border-bottom: 1px solid var(--background-dark);
}

div#cookie-policy {
  background-color: #a2a2c4;
  display: none;
  height: auto;
}

.bottom#bottom-soundcorset {
  --bottom-bg-color: #a2a2c4;
  background-color: var(--bottom-bg-color);
}

@media (prefers-color-scheme: dark) {
  .bottom#bottom-soundcorset {
    --bottom-bg-color: gray;
  }
}
.userInformation {
  color: var(--text-normal);
}

#commentText {
  background-color: var(--background-light);
  color: var(--text-normal);
}