:root {
  --color-dark: #111;
  --color-darkest: #000;
  --color-light: #eee;
  --color-lightest: #fff;
  --color-primary: #017c84;
  --color-primary-darker: #016971;
  --color-default: #778899;
  --color-info: #015084;
  --color-success: #01854a;
  --body-padding-xs: 60px;
  --body-padding-lg: 72px;
}

* {
  font-family: 'Open Sans', sans-serif;
}
*,
.badge {
  font-weight: lighter;
}

/*body,*/
/*a,
.item .line span {
  transition: all 0.5s ease-in;
}*/

body {
  padding-top: var(--body-padding-xs);
}
.night-mode,
.night-mode .dropdown-menu,
.night-mode .dropdown-menu>li>a:focus,
.night-mode .dropdown-menu>li>a:hover {
  background-color: var(--color-dark);
}
.night-mode .item .line span {
  background-color: var(--color-light);
}
.night-mode,
.night-mode a,
.night-mode .nav-pills>li>a,
.night-mode .dropdown-menu>li>a {
  color: var(--color-light);
}
.switch-user .card {
  transform: translateX(-100%) rotateY(-180deg);
}

.bg-primary,
.btn-primary {
  background-color: var(--color-primary);
}
.bg-success,
.progress-bar-success {
  background-color: var(--color-success);
}
a {
  color: var(--color-primary);
}
a:hover {
  color: var(--color-primary-darker);
  text-decoration: none;
}

.btn-primary {
  border-color: var(--color-primary-darker);
}

.username {
  font-weight: lighter;
}

h1 {
  margin-top: 0;
}

/* NAVIGATION */
.navbar {
  margin-bottom: 10px;
}
.navbar-nav {
  margin-bottom: 0;
  margin-top: 0;
}
.navbar-toggle {
  border: none;
  height: 34px;
}
.navbar-inverse,
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  background-color: var(--color-primary);
  border: none;
}
.navbar-inverse .navbar-collapse {
  border-color: var(--color-primary-darker);
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
  background-color: var(--color-primary-darker);
}
.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-brand {
  color: #fff;
}
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
  background-color: transparent;
}
.navbar-toggle .icon-bar {
  border-radius: 0;
  height: 4px;
  width: 26px;
  -webkit-transition: transform 0.3s ease-in;
  -moz-transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
}
.navbar-toggle .icon-bar.first {
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.navbar-toggle .icon-bar.last {
  margin-top: -4px;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}
.navbar-toggle .icon-bar.middle {
  display: none;
}
.navbar-toggle.collapsed .icon-bar {
  -webkit-transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -ms-transform: rotateZ(0);
  transform: rotateZ(0);
}
.navbar-toggle.collapsed .icon-bar + .icon-bar {
  margin-top: 5px;
}
.navbar-toggle.collapsed .icon-bar.middle {
  display: block;
}
.nav-pills>li>a {
  color: var(--color-darkest);
}
.nav>li>a:focus, .nav>li>a:hover,
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  background-color: transparent;
}

.navbar .username {
  font-family: 'Zen Kurenaido';
}

code,
pre {
  background: #222;
  border: 1px solid #444;
  color: ghostwhite;
  display: inline-block;
  margin: 10px;
  padding: 10px;
  word-break: break-word;
}
code.block,
pre.block {
  display: block;
}
pre,
pre.block {
  display: none;
}
pre .title {
  margin-top: 0;
}

.title {
  margin-top: 0;
}
.night-mode .badge {
  background-color: transparent;
}

.bg-danger,
.bg-info,
.bg-success,
.bg-warning {
  color: var(--color-dark);
}
.bg-inverse {
  background-color: #222;
  color: var(--color-lightest);
}

.item.status-watching {
  /*background-color: var(--color-info);*/
}
.item.status-completed {
  /*background-color: var(--color-success);*/
}
.item.status-plan-to-watch .progress .progress-bar {
  background-color: var(--color-default);
  width: 100% !important;
}
.item h2, .item h3, .item h4, .item h5 {
  margin: 0.5rem 0;
}
.item .title .badge span {
  text-align: right;
}
.item .teaser {
  padding-bottom: 1rem;
}
.item .teaser + .detail {
  /*margin-top: 2rem;*/
}
.item .status {
  margin-top: 1rem;
}

.item .progress-circle .circle {
  background-color: rgb(1 124 132 / 19%);
  border: 6px solid var(--color-primary);
  border-radius: 50%;
  min-height: 189px;
}
.item.status-completed .progress-circle .circle {
  border-color: var(--color-success);
}
.item.status-plan-to-watch .progress-circle .circle {
  border-color: var(--color-default);
}
.item .progress-circle .circle span {
  display: block;
}
.item .progress-circle .circle .episode-current {
  font-size: 8rem;
  line-height: 1;
  margin-top: 3.5rem;
}
.item .progress-circle .circle .episode-total {
  font-size: 2rem;
}

.item .progress {
  height: 24px;
}
.item .progress-bar {
  font-size: 1.25rem;
  line-height: 2;
}

.hide-overflow {
  overflow: hidden;
}
.item .animation-box .box > div {
  /*  border: 5px solid var(--color-dark);
  border-radius: 6px;
  border-style: none solid;*/
  height: 24px;
  line-height: 24px;
  position: relative;
}
.item .animation-box .box > div .frame {
  position: absolute;
  top: 0;
  width: 100%;
}

.item .detail-toggle a {
  color: #ddd;
  display: block;
}
.item .detail-toggle a.collapsed i {
  transform: rotateX(180deg);
}

.date-info {
  padding: 1.5rem;
}
.date-info * {
  margin: 0.5rem 0;
}

.user-info h2 {
  margin: 0;
}
.user-info h2 i {
  font-size: 1.5rem;
}

.night-mode .thumbnail {
  background-color: var(--color-dark);
  border-color: var(--color-darkest);
}
.night-mode .thumbnail .caption {
  color: white;
}

.scene {
  width: 100%;
  height: 364px;
  perspective: 600px;
}
.card {
  position: relative;
  width: 100%;
  height: 100%;
  /*cursor: pointer;*/
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}
.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}
.card .card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card .card__face--front {
}
.card .card__face--back {
  transform: rotateY(180deg);
}

@media (max-width: 424px) {

  h1, .h1 {
    font-size: 32px;
  }
  h2, .h2 {
    font-size: 28px;
  }

}

@media (max-width: 767px) {

  aside {
    margin-top: 2rem;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
    color: #fff;
  }
  #nav-secondary {
    background-color: var(--color-primary-darker);
  }
  #nav-secondary.navbar-nav.pull-right {
    float: none !important;
  }
  #nav-secondary.navbar-nav.pull-right > li {
    display: inline-block;
  }

  .item + .item {
    margin-top: 1rem;
  }
  .item .datetime {
    font-size: 1rem;
    padding-right: 0;
  }
  .item .h3, .item h3 {
    font-size: 1.5rem;
    margin-top: 0;
  }
  .item .progress {
    margin-bottom: 0;
  }

}

@media (min-width: 768px) {

  body {
    padding-top: var(--body-padding-lg);
  }

  .item {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  .item .title > a {
    display: inline-block;
    margin-top: 2rem;
  }
  .item .title .badge span {
    display: block;
    padding-top: 0.5rem;
    text-align: right;
  }
  .item .progress {
    height: 40px;
    margin-left: -6rem;
  }
  .item .progress-bar {
    font-size: 2rem;
  }

}

@media (min-width: 992px) {

  body {
    /*padding-top: 100px;*/
  }
  /*.dropdown-menu>li>a,*/
  .navbar,
  .navbar .navbar-nav,
  .navbar .navbar-brand {
    font-size: 2.2rem;
  }
  .navbar,
  .navbar .navbar-nav {
    /*min-height: 82px;*/
  }
  .navbar-nav>li>a {
    /*padding-bottom: 31px;*/
    /*padding-top: 31px;*/
  }

}

@media (min-width: 992px) and (max-width: 1100px) {



}