article { margin-bottom: 4em; } 

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #0f6674;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #0f6674;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.dropstart .btn::before { display: none; }

#login-form {
  padding: 1rem;
  background: rgba(0, 0, 0, .7);
  border: 1px solid transparent;
  border-radius: .5rem;
  box-shadow: 0 0 3rem #000;
}

h2, .h2 { font-weight: 400; }
h3, .h3, h4, .h4 { font-weight: 300; }

.w-75 { width: 75% !important; }

body.bg-smoke {
  background: linear-gradient(to bottom, rgb(19, 68, 111), rgb(9, 32, 63));
  color: #FFF;
  /*background-image: url('../img/bg-smoke.jpg');
  background-size: cover;
  background-position: center;*/
}

.cloud {
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  text-transform: uppercase;
  font-size: .8rem !important;
  font-weight: normal !important;
  color: #777;
}
.cloud::before {
  content: '';
  display: inline-block;
  width: calc(75% - 3px);
  height: 1px;
  background: #CCC;
  margin-bottom: 4px;
  margin-right: 3px;
}

video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

a.navbar-brand i {
  background: #0f6674;
  border-radius: 100%;
  padding: .5rem .6rem;
  color: #FFF;
  border-color: #0f6674 !important;
}

a.navbar-brand:hover {
  background: none;
}
a.navbar-brand h1 {
  font-size: inherit;
  display: inline;
  font-weight: 300;
}

/* ACCESSIBILITY FIXES */
.text-info { color: #0f6674 !important; }
.btn-success, .badge-success {
  background: #218739;
  border-color: #218739;
}
.btn-primary, .badge-primary {
  background: #128091;
  border-color: #128091;
}
.text-success { color: #218739 !important; }
.btn-outline-info { 
  border-color: #128091 !important;
  color: #128091;
}
.btn-info, .btn-outline-info.active, li.active a.page-link {
  background: #128091 !important;
  border-color: #128091 !important;
}
a.page-link, .std-link { color: #128091; }
.std-link { text-decoration: none; }
.std-link:hover { color: #0d6472; text-decoration: underline; text-underline-offset: .25em; }
a.page-link.active { background: #128091; border-color: #128091; }
.form-check-input:checked { background-color: #128091; border-color: #128091; }
.btn-outline-info.active { color: #FFF; }
.bg-info { background: #128091 !important; }
.btn-info:hover { background: #0d6472 !important; border-color: #0d6472 !important; }
.btn-outline-info:hover { background: #128091 !important; border-color: #128091 !important; color: #FFF; }

.form-floating>label { background: transparent; }
table caption { 
  caption-side: top;
  text-align: center;
  padding-top: 0;
}

#marche {
  position: absolute;
  z-index: 2;
  width: 100%;
}

#marche a {
  display: block;
  color: #000;
  font-size: .9rem;
  padding: .2rem;
  background: #f2f2f2;
  border: 1px solid #CCC;
  border-top: none;
  position: relative;
}

.card-header {
  padding: .5rem;
  font-size: inherit;
  font-weight: inherit;
  color: #000;
  text-decoration: none;
}
.card-header:hover { text-decoration: none; color: #000; }

.cigar-brand {
  font-size: .8rem;
  color: #000;
}

.cigar-vitola {
  color: #924426;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-header .toggle { display: none; }

.card-header[role="button"] .toggle { 
  display: inline-block;
  position: absolute;
  right: .5rem;
  top: 1.1rem;
}

.cigar a[aria-expanded="false"] .toggle i:first-child { display: block; }
.cigar a[aria-expanded="false"] .toggle i:last-child { display: none; }
.cigar a[aria-expanded="true"] .toggle i:first-child { display: none; }
.cigar a[aria-expanded="true"] .toggle i:last-child { display: block; }

table.equal-width th, table.equal-width td { width: 1%; }
.flag { width: 20px; }

#content .accordion-button, .accordion-button:not(.collapsed) { background: #f2f2f2; }
#content .accordion-button:focus { box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); }
#content .accordion-button.expandable { cursor: default; }
#content .accordion-button.expandable::after { display: none; }

#content [aria-expanded="false"]:not(.dropdown-toggle) i:last-child { display: none; }
#content [aria-expanded="true"]:not(.dropdown-toggle) i:first-child { display: none; }

.navbar-nav { width: 100%; }
.menu-link {
  color: rgba(0, 0, 0, .7);
  text-decoration: none;
  font-size: 1.2rem;
  display: block;
}

#mainMenu .navbar-brand { font-size: 1.5rem; }
.navbar-nav.primary .nav-item { text-align: center; }
.navbar-nav .menu-link { padding: 1rem 0; }
#mainMenu .active { position: relative; }
#mainMenu .active a { color: #0f6674; }
#mainMenu .active::after { display:block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #0f6674; content: '';}
.nav-item:hover { background: #f2f2f2; }
.nav-item:hover a { color: #0f6674; }
.offcanvas-body .nav-link:hover, #choosePhoto:hover, #choosePic:hover { background: rgba(255, 255, 255, .1) }

#mainMenu.sticky-top { box-shadow: 0px 4px 6px 0px rgba(0,0,0,.1);}
#mainMenu.fixed-bottom { box-shadow: 0px 0px 4px 4px rgba(0,0,0,.1);}

@media (min-width: 576px) {
  #content .accordion-body .options { visibility: hidden; }
  #content .accordion-body:hover .options { visibility: visible; }
}

.avg { width: 50px !important; text-align: center; text-decoration: none; }
.locked .bg-white { background: #e2e3e5 !important; } 
a.avg:hover, a.avg:hover .bg-white { background: #f2f2f2 !important; }
.fs-7 { font-size: .5rem !important; }
.top-05 { margin-top: -7px; }


.cigar tfoot td { background: none; }


a.link {
  color: #0f6674;
  text-decoration: none;
}
a.link:hover {
  background: #f2f2f2;
}
a[data-bs-toggle] { text-decoration: none; }
a.l-info { color: #0f6674 !important; text-decoration: underline; text-decoration-color: #0f6674 !important; transition: all .15s ease-in-out; }
a.l-info:hover { color: #0d6472 !important; text-decoration: none; transition: all .15s ease-in-out; }

.table-smokes td, .table-smokes th { width: 1%; }
#smokeModal #inputGroup.expanded .bi-pencil { visibility: hidden; }
#smokeModal #inputGroup { border-color: transparent !important; }
#smokeModal #inputGroup:not(.expanded) { border-color: #DDD !important; padding: .25rem;}
#smokeModal #inputGroup:not(.expanded):hover { border-color: #EEE !important; }
#smokeModal #inputGroup:not(.expanded):hover .bi-pencil { visibility: visible; color: #FFF !important; }
.w-min { width: 1%; }
.highlight .bg-warning-subtle { background: inherit !important; }
.rate {
  border: 1px solid #d1e7dd !important;
  padding: 0.25rem !important;
  font-weight: 500!important;
  color: #0a3622 !important;
  background: #d1e7dd !important;
  border-radius: 100% !important;
}
.rate.p-2 { padding: 0.5rem !important }
.rate:hover {
  background: #afd5c4 !important;
  border: 1px solid #afd5c4 !important;
}

#banner {
  width: 100%;
  height: 20vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #EEE;
}
#banner:hover { background-color: #DDD; }
#picture {
  width: 12vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  transition: all .15s ease-in-out;
}
#picture:hover {
  box-shadow: 0 0 5px #000;
  transition: all .15s ease-in-out;
}
#picture > i { visibility: hidden; color: #FFF; }
#picture:not(.pic) { background-color: #CCC; }
#picture:not(.pic) > i { visibility: visible; }

.follower {
  display: inline-block;
  margin-left: -.5em;
  width: 3vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.follower:first-child { margin-left: 0; }
.follower span { display:block; font-size: 1vw; padding-top: .6vw; text-align: center; }
.follower.follower-pic span { display: none; }

.smoke-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.quote, .btn-comment { color: #0f6674; text-decoration: none; }
.quote:hover, .btn-comment:hover { background: #EEE; border-radius: 10px; }
.quote i:nth-child(2) { display: none; }
.quote.quoted i:nth-child(1) { display: none; }
.quote.quoted i:nth-child(2) { display: inline; }

.comment + button { visibility: hidden; }
.comment:not(:placeholder-shown) + button { visibility: visible; }

.line { border-bottom: 1px solid #CCC; padding-bottom: .25em }
.notification { border-bottom: 1px solid #CCC; }
.notification:last-child { border: none; }

.post {
  box-shadow: 0 0 5px #CCC;
}

#sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  height: 50vh;
  box-shadow: 0 0 5px #CCC;
  border-radius: var(--bs-border-radius-lg) !important;
  overflow: scroll;
}

#suggested-list .follower-wrapper { display: flex; }

.user {
  box-shadow: 0 0 5px #CCC;
}

#menu-notification-list {
  position: absolute;
  background: #FFF;
  list-style-type: none;
  padding: 5px 0;
  width: 30rem;
  top: 65px;
  right: 0;
  margin: 10px;
  border-radius: 5px;
  display: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  height: calc(100vh - 100px);
  overflow: scroll; 
}

#menu-notification-list.show { display: block; }

#menu-notification-list li {
  text-align: left;
}

.dot { font-size: .5rem; color: rgb(220, 53, 69); }

@media (max-width: 992px) { 
  #banner { height: 25vh; }
  #picture {
    position: absolute;
    top: 15vh;
    left: 50%;
    width: 20vh;
    transform: translateX(-50%)!important;
  }
  #userDetails {
    width: 70%;
    padding-left: 0 !important;
    padding-top: 2em !important;
  }
  #actions {
    width: 30%;
    margin-top: 1em;
  }
  #actions .sort, #actions .recap { width: 100%; }
  .follower { width: 2em; }
}

@media (max-width: 768px) { 
  #sidebar {
    height: 15em;
    z-index: 100;
    background: #FFF;
    top: 60px;
    padding-top: 1em;
    border-radius: 0 !important;
    font-size: .8rem;
    transition: top 1s ease-in-out;
  }
  #sidebar.static { top: -200px; transition: top 1s ease-in-out; }
  #board { margin-top: 1em; }
  #suggested-list { 
    position: relative;
    display: flex;
    height: 10em; 
  }
  #suggested-list { overflow-x: scroll; }
  #suggested-list .follower { width: 3em; }
  #suggested-list .follower-wrapper { display: inline-block; text-align: center; border: 1px solid #CCC; border-radius: var(--bs-border-radius-lg) !important; margin-right: 1em; }
  #suggested-list .follower { width: 5em; }
  #menu-notification-list { width: 100%; margin: 0; box-shadow: none; height: calc(100vh - 62px); top: 60px; border-top: 1px solid #CCC; border-radius: 0; }

  #board { margin: 0 !important; padding: 0 !important; }
  .post { 
    border: none !important; 
    box-shadow: none !important; 
    border-radius: 0 !important;
    border-bottom: 20px solid #DDD !important;
    padding-bottom: 10px;
  }

  #userDetails, #actions { width: 100%; }
}