/* === Relation between toolbar/navbar types and pages === */
.page > .navbar,
.view > .navbar,
.views > .navbar,
.page > .toolbar,
.view > .toolbar,
.views > .toolbar {
  position: absolute;
}
.subnavbar ~ .page-content {
  padding-top: 44px;
}
.navbar-through .page-content,
.navbar-fixed .page-content {
  padding-top: 44px;
}
.navbar-through .with-subnavbar .page-content,
.navbar-fixed .with-subnavbar .page-content,
.navbar-through .page-content.with-subnavbar,
.navbar-fixed .page-content.with-subnavbar,
.navbar-through .subnavbar ~ .page-content,
.navbar-fixed .subnavbar ~ .page-content {
  padding-top: 88px;
}
.navbar-through .page .subnavbar,
.navbar-fixed .page .subnavbar,
.navbar-through.page .subnavbar,
.navbar-fixed.page .subnavbar {
  top: 44px;
}
.toolbar-through .page-content,
.toolbar-fixed .page-content,
.tabbar-through .page-content,
.tabbar-fixed .page-content {
  padding-bottom: 44px;
}
.navbar.navbar-hiding {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.navbar.navbar-hiding ~ .page-content .list-group-title,
.navbar.navbar-hiding ~ .pages .list-group-title,
.navbar.navbar-hiding ~ .page .list-group-title {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.navbar.navbar-hiding ~ .page-content .subnavbar,
.navbar.navbar-hiding ~ .pages .subnavbar,
.navbar.navbar-hiding ~ .page .subnavbar {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.navbar.navbar-hidden {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.navbar.navbar-hidden ~ .page-content .list-group-title,
.navbar.navbar-hidden ~ .pages .list-group-title,
.navbar.navbar-hidden ~ .page .list-group-title {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  top: -44px;
}
.navbar.navbar-hidden ~ .page-content .subnavbar,
.navbar.navbar-hidden ~ .pages .subnavbar,
.navbar.navbar-hidden ~ .page .subnavbar {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.navbar.not-animated {
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
}
.page.no-navbar .page-content {
  padding-top: 0;
}
.page.no-navbar.with-subnavbar .page-content,
.with-subnavbar .page.no-navbar .page-content,
.page.no-navbar .page-content.with-subnavbar {
  padding-top: 44px;
}
.toolbar.toolbar-hiding,
.tabbar.toolbar-hiding,
.toolbar.tabbar-hiding,
.tabbar.tabbar-hiding {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.toolbar.toolbar-hidden,
.tabbar.toolbar-hidden,
.toolbar.tabbar-hidden,
.tabbar.tabbar-hidden {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.toolbar.not-animated,
.tabbar.not-animated {
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
}
.page.no-toolbar .page-content,
.page.no-tabbar .page-content {
  padding-bottom: 0;
}
.page {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #efeff4;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.page-on-left {
  -webkit-transform: translate3d(-20%, 0, 0);
  transform: translate3d(-20%, 0, 0);
}
.page-on-left .swipeback-page-opacity {
  opacity: 1;
}
.page-on-left:after {
  opacity: 1;
}
.page-on-center .swipeback-page-shadow {
  opacity: 1;
}
.page-on-center .swipeback-page-opacity {
  opacity: 0 !important;
}
.page-on-right {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.page-on-right .swipeback-page-shadow {
  opacity: 0 !important;
}
.page-content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  z-index: 1;
}
.page-transitioning,
.page-transitioning .swipeback-page-shadow,
.page-transitioning .swipeback-page-opacity {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.page-from-right-to-center:before,
.page-from-center-to-right:before {
  position: absolute;
  right: 100%;
  top: 0;
  width: 16px;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  z-index: -1;
  content: '';
  will-change: opacity;
  contain: strict;
}
html.android .page-from-right-to-center:before,
html.android .page-from-center-to-right:before {
  display: none;
  -webkit-animation: none;
  animation: none;
}
.page-from-right-to-center {
  z-index: 5001;
  -webkit-animation: pageFromRightToCenter 400ms forwards;
  animation: pageFromRightToCenter 400ms forwards;
}
.page-from-right-to-center:before {
  -webkit-animation: pageFromRightToCenterShadow 400ms forwards;
  animation: pageFromRightToCenterShadow 400ms forwards;
}
.page-from-center-to-right {
  z-index: 5001;
  -webkit-animation: pageFromCenterToRight 400ms forwards;
  animation: pageFromCenterToRight 400ms forwards;
}
.page-from-center-to-right:before {
  -webkit-animation: pageFromCenterToRightShadow 400ms forwards;
  animation: pageFromCenterToRightShadow 400ms forwards;
}
@keyframes pageFromRightToCenter {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes pageFromRightToCenterShadow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pageFromCenterToRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes pageFromCenterToRightShadow {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.page-from-center-to-left {
  -webkit-animation: pageFromCenterToLeft 400ms forwards;
  animation: pageFromCenterToLeft 400ms forwards;
}
.page-from-center-to-left:after {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  content: '';
  opacity: 0;
  z-index: 10000;
  will-change: opacity;
  contain: strict;
  -webkit-animation: pageFromCenterToLeftOpacity 400ms forwards;
  animation: pageFromCenterToLeftOpacity 400ms forwards;
}
.page-from-left-to-center {
  -webkit-animation: pageFromLeftToCenter 400ms forwards;
  animation: pageFromLeftToCenter 400ms forwards;
}
.page-from-left-to-center:after {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  content: '';
  opacity: 0;
  z-index: 10000;
  will-change: opacity;
  contain: strict;
  -webkit-animation: pageFromLeftToCenterOpacity 400ms forwards;
  animation: pageFromLeftToCenterOpacity 400ms forwards;
}
@keyframes pageFromCenterToLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-20%, 0, 0);
  }
}
@keyframes pageFromLeftToCenter {
  from {
    transform: translate3d(-20%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes pageFromCenterToLeftOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pageFromLeftToCenterOpacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}