/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

.label {
  text-decoration: none;
  text-decoration-style: none;
  color: white;
  background-color: #ABA56F
  border-radius: 2px;
}

.label-primary {
  background-color: #ABA56F;
  border-radius: 2px;
  margin: 2px;
  padding: 2px
}

.label-danger {
  background-color: #A94F5F;
  border-radius: 2px;
  margin: 2px;
  padding: 2px
}

.label-default {
  background-color: #4B92AB;
  border-radius: 2px;
  margin: 2px;
  padding: 2px
}

.profile-thumbnail {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  width: 15%; /* Set the image width relative to the container */
  height: auto; /* Keep the aspect ratio */
  object-fit: cover; /* Ensures proper cropping */
  margin-right: 0px; /* Space between the image and text */
}

.profile-header {
    margin-left: 15px;
    flex-grow: 1;
    text-align: left;
    text-align: start;
}

div.post-tabs {
    margin-top: 16px;
}
ul.posts {
    list-style-type: none;
    padding: 0px;
    margin: 16px 0px 0px 0px;
}

div.post-body {
    margin-left: 48px;
}

div.post-tabs ul.posts {
    margin: 0px;
    border-top: none;
}
ul.posts li.post {
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
}
ul.posts li.post:hover {
    background-color: #f0f0f0;
}
div.post-date {
    float: right;
}
div.post-author {
    font-weight: bold;
    position: relative;
    margin-left: 48px; 
}
div.post-thumbnail {
    position: absolute;
}
div.post-content {
    margin-left: 48px;
    min-height: 48px;
}
div.post-footer {
    text-align: right;
}
ul.comments {
    list-style-type: none;
    padding: 0px;
    margin: 16px 0px 0px 0px;
}
ul.comments li.comment {
    margin-left: 32px;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
}
ul.comments li.comment:nth-child(1) {
    border-top: 1px solid #e0e0e0;
}
ul.comments li.comment:hover {
    background-color: #f0f0f0;
}
div.comment-date {
    float: right;
}
div.comment-author {
    font-weight: bold;
}
div.comment-thumbnail {
    position: absolute;
}
div.comment-content {
    margin-left: 48px;
    min-height: 48px;
}
div.comment-form {
    margin: 16px 0px 16px 32px;
}
div.pagination {
    text-align: right;
    padding: 0px;
    margin: auto;
}
div.pagination a {
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}
div.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
div.pagination a:hover:not(.active) {
  background-color: #ddd;
}
div.pagination a {
  border-radius: 5px;
}

div.pagination a.active {
  border-radius: 5px;
}
div.flask-pagedown-preview {
    border-radius: 2px;
    background-color: #FFFFFF;
    margin: 10px 0px 10px 0px;
    color: black;
    text-shadow: none;
}
div.flask-pagedown-preview h1 {
    font-size: 140%;
}
div.flask-pagedown-preview h2 {
    font-size: 130%;
}
div.flask-pagedown-preview h3 {
    font-size: 120%;
}
.post-body h1 {
    font-size: 140%;
    position: relative;
    margin-left: auto; 
}
.post-body h2 {
    font-size: 130%;
    position: relative;
    margin-left: auto;
}
.post-body h3 {
    font-size: 120%;
    position: relative;
    margin-left: auto;
}
.table.followers tr {
    border-bottom: 1px solid #e0e0e0;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}

/*
 * Base structure
 */

html,
body {
  height: 100%;
  background: #1C0056;
  background: linear-gradient(135deg, #1CB5E0 0%, #000851 100%);
  /*https://cssgradient.io/swatches/*/
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-size: 14px;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
}

.cover-container {
  max-width: 60em;
}

.navbar.h1 {
  margin: 0px 0px 0px;
}

/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
  border-radius: 10px;
}

.masthead-brand {
  margin-bottom: 0;
  font-size: 30px
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
  border-radius: 10px;
  text-align: left;
  padding-left: 20px;
}

.navbar-collapse {
  padding-left: 26.5px;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  color: rgba(255, 255, 255);
  border-bottom-color: rgba(255, 255, 255);
  border-radius: 10px;
}

/* Space between nav links */
.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}


@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}


/*
 * Cover
 */
.cover {
  padding: 0;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}


/*
 * Footer
 */
.mastfoot {
  color: rgba(255, 255, 255, .5);
}

.navbar {
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  /*max-width: 90vw;*/
  text-align: left;
}

/*
 * Blurred bg container
 */

.container {
  padding: 10px 15px; 
  text-shadow: 0;
  box-shadow: 0;
  border-radius: 15px;
  /*background: rgba(255,255,255,0.2);*/
  /*backdrop-filter: saturate(180%) blur(10px);*/
}

.cover-container {
  padding: 14px 0 14px 0;
}

.box-container {
  padding: 10px 15px; 
  margin-bottom: 15px;
  text-shadow: 0;
  box-shadow: 0;
  border-radius: 5px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: saturate(180%) blur(10px);
}

.box-container-profile {
  padding: 10px 15px; 
  margin-bottom: 15px;
  text-shadow: 0;
  box-shadow: 0;
  border-radius: 5px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: saturate(180%) blur(10px);
  position: relative;
  overflow: hidden;
  display: flex; /* Ensures child elements are aligned properly */
  align-items: center; /* Vertically aligns image and text */
}

/*
 * Collapsible answer sections
 */

button.collapsible {
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  color: white;
  cursor: pointer;
  padding: 10px 15px;
  width: 100%;
  /*max-width: 90vw;*/
  border: none;
  text-align: left;
  font-size: 15px;
  border-radius: 5px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: saturate(180%) blur(10px);
  word-wrap: break-word;
}

button.active, .collapsible:hover {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: saturate(180%) blur(10px);
}

button.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.content {
  /*max-width: 90vw;*/
  width: 100%;
  padding: 0 15px;
  margin: 0 0 15px 0px;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: saturate(180%) blur(10px);
}

.content p {
  max-width: 90vw;
  margin: 5px 0;
}

.form-group {
  margin-bottom: 10px;
}

.btn-default {
  margin-top: 10px;
}

.toast {
  text-shadow: none;
}