/* 通用界面样式 */

/* ========================== body ================================ */
html {
    /* 如果指定10px，由于比较小，可能导致被浏览器的“最小字体大小”覆盖。所以现在
    用默认字体大小，所有的 rem 单位应相对默认字体大小，一般是16px。指定100%是为了
    覆盖 bootstrap 指定的 62.5%。
  */
    font-size: 100%;
    height: 100%;
}

body {
    margin: 0;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
    touch-action: manipulation;
}

/* ========================== 杂项 ================================= */
[hidden] {
    display: none !important;
}

/* ================ 交互 ============== */
:not(input) {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: normal;
}

/* ============================ 主体布局 =========================== */
.mbe-header {
    padding: 0;
}

.mbe-footer {
    padding: 4px;
}

.mbe-body {
    display: flex;
    flex: 1;
    min-height: 0px; /* 如果不给出，在某些chrome版本上会被里面的.mbe-docFrame撑开 */
}

.mbe-nav, .mbe-doc, .mbe-aside {
    /*height: 100%; 父元素设置box-align:stretch，子元素不要设置height*/
    overflow: auto;
}
/* 章节导航栏 --start-- */
.mbe-nav {
    display: flex;
    flex-direction: column;
}

.mbe-docFrame {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transform-origin: left top;
}

/* ========================== 布局容器 ============================= */

.mbe-widget {
    vertical-align: middle;
    flex: none;
}

.mbe-widget-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.mbe-widget-container.mbe-vertical {
    flex-direction: column;
    justify-content: space-around;
}

.mbe-widget-divider {
    flex: 1;
}
.mbe-widget-container.container-simple{
  height: 4rem;
}
.mbe-zoom-slider {
  display: flex;
  align-items: center;
}
.container-simple .mbe-zoom-slider{
  position: relative;
  height: 100%;
  align-items: flex-start;
}
.container-simple .mbe-zoom-slider input {
  margin-top: 18px;
  margin-right: 0;
  margin-left: 0;
}
.container-simple .mbe-zoom-slider output {
  position: absolute;
  bottom: 5px;
  left: 40%;
}
.container-simple > * {
  margin-right: 30px;
}
/* ========================== 按钮 ================================= */
button {
  color: inherit;
  outline: 0px none;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  line-height: 100%;
}

button:focus,
button::-moz-focus-inner {
  border: 0;
  outline: 0px none; /* TODO 仍然无法在 FF 上去掉 button 的聚焦框 */
}

.mbe-button:not(.mbe-disabled) {
  cursor: pointer;
}

button[disabled], .mbe-button.mbe-disabled {
  opacity: 0.3;
}

button.mbe-vertical, .mbe-button.mbe-vertical {
  display: inline-block;
  /*line-height: 1.3;*/
  text-align: center;
}

button.mbe-vertical > i, .mbe-button.mbe-vertical > i {
  font-size: 2.2rem;
  display: block;
  margin: 0 auto 0.2em;
}

button.mbe-horizontal > i, .mbe-button.mbe-horizontal > i {
  font-size: 1.25rem;
  margin-right: 0.25em;
  vertical-align: middle;
}

button > img, .mbe-button > img {
  width: 1em;
  height: 1em;
  /* 保持高宽比，并不超出 1emx1em. 注：IE 11- 尚不支持*/
  object-fit: contain;
}

button.mbe-vertical > img, .mbe-button.mbe-vertical > img {
  font-size: 2.2rem;
  display: block;
  margin: 0 auto 0.2em;
}

.container-simple button#prev_click_toolbar,
.container-simple button#next_click_toolbar {
 height: 100%;
}
.container-simple button#prev_click_toolbar i,
.container-simple button#next_click_toolbar i {
 margin: 0;
}
.container-simple button.mbe-minusProp,
.container-simple button.mbe-plusProp {
  height: 100%;
}
.container-simple button.mbe-minusProp i:before,
.container-simple button.mbe-plusProp i:before {
  font-size: 18px;
}

/* ========================== 结束：按钮 ================================= */

/* ========================== 进度条 ==================================== */
/*
https://css-tricks.com/html5-progress-element/
http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
*/
progress {
	/* Turns off styling - not usually needed, but good to know. */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	/* gets rid of default border in Firefox and Opera. */ 
	border: none;

	/* Needs to be in here for Safari polyfill so background images work as expected. */
	background-size: auto;
  background: #ffeeee !important;
  
  /* 前景色，IE10 */
  color: #39bafb;
	
	/* Dimensions */
	width: 10em;
	height: 0.8em;
  
  border: 1px white solid;
  box-shadow: 0 0 2px 0 white;
}

/* 背景色，Chrome */
progress::-webkit-progress-bar {
    background: #ffeeee;
}

/* 前景色，Firefox */
progress::-moz-progress-bar { 
    background: #39bafb;	
}

/* 前景色，Chrome */
progress::-webkit-progress-value {
    background: #39bafb;
}

/* ========================== 结束：进度条 ==================================== */

/* =============================== 按钮菜单（弹出式菜单） ================================= */

.mbe-button-menu {
  position: relative;
  display: inline-block;
}

.mbe-button-menu > :first-child {
  height: 100%;
}

.mbe-button-menu > :first-child > i {
  position: relative;
}

.mbe-popup {
  position: absolute;
  /* TODO 如果不设置或等于0，且 mbe-popup 位于 iframe 上方时，mbe-popup 会接收不到事件。*/
  z-index: 1;
}
.container-simple .mbe-popup {
  bottom: 4rem;
}
.mbe-menu.mbe-vertical > * {
  display: block;
  padding: 0.25rem 0.5rem;
}

.mbe-menu.mbe-horizontal {
  white-space: nowrap;
}

.mbe-menu.mbe-horizontal > * {
  display: inline-block;
}

/* =============================== 结束：按钮菜单（弹出式菜单） ================================= */

/* ==================================== 标签页（tab） ========================================= */
.mbe-tab.mbe-vertical {
  display: flex;
  flex-direction: row;
}

.mbe-tab.mbe-vertical.mbe-reverse {
  flex-direction: row-reverse;
}

/* chrome 中 flex 下的 block 元素设置 100% 的侧轴宽高无效，反而有异常的效果。不设置默认也是 100%
.mbe-tab.mbe-vertical > .mbe-tabHeader,
.mbe-tab.mbe-vertical > .mbe-tabContent {
  height: 100%;
}
*/
.mbe-tab.mbe-vertical > .mbe-tabHeader > * {
  display: block;
  width: 100%;
  padding: 0.1em 0;
}

/* ==================================== 结束：标签页（tab） ========================================= */

/* ==================================== dialog ==================================================== */

dialog {
  border: 1px solid #BBB;
  background-color: white;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
  padding: 0;
  display: flex;
  flex-direction: column;
}

dialog > header, dialog > footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: .875rem;
  cursor: default;
}

dialog > .mbe-body {
  flex: 1 1 auto;
}

/* ==================================== notification-list ============================================= */
.mbe-notification-list {
  flex: 1 1 auto;
  align-self: stretch;
  overflow: hidden;
}

/* =========================================== thumbnail =============================================== */
.mbe-PageThumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
}

.etb-page-thumbnail-wrapper {
  /* TODO 虽然理论上并没有东西溢出，但 FF 上如果没有此属性，则父元素的滚动条会过长。
  也许是页面缩略图的影响？*/
  overflow: hidden;
  transition: height .3s;
}

.etb-page-thumbnail-wrapper > .etb-page {
  font-size: 16px;
  box-shadow: none;
  background-color: transparent;
  pointer-events: none;
  margin: 0;
}

.etb-page-thumbnail-wrapper > .etb-page .mbe-filtered {
  /*outline: 6px #ddd solid;
  background-color: #f7f7f7;*/
  /* 适应多数控件的背景图设置 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.etb-page-thumbnail-wrapper > .etb-page .mbe-filtered img{
  width: 100%;
}

.etb-page-thumbnail-wrapper > .etb-page video {
  background-color: #444;
}