body, html {
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 600px;
    padding: 0;
    margin: 0;
}

body {
    background: url("/image/index-background.png"); /*no-repeat; background-size: cover;*/
}

.hidden {
    display: none;
}

.tryText {
    visibility: hidden;
    z-index: 1;
    width: auto;
    word-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}

.pixbuf img {
    width: 100%;
    height: 100%;
}

.sysicon {
	width: 32px;
	height: 32px;
}

.sysicon .bg {
	position: relative;
	width: 20px;
	height: 20px;
	top: 4px;
	left: 4px;
	border-radius: 20px;
	border: 2px solid gainsboro;
	z-index: 1;
}

.sysicon:hover .bg,
.sysicon:hover .sub {
    background-color: rgba(150, 150, 150, 0.3);
}

.sysicon.login .sub {
	position: relative;
	width: 6px;
	height: 12px;
	top: -22px;
	left: 13px;
	background-color: #3f3f3f;
	z-index: 2;
}

.sysicon.login .sub .inner {
	width: 2px;
	height: 100%;
	margin: auto;
	background-color: gainsboro;
}

.sysicon.logout .sub {
	position: relative;
	width: 12px;
	height: 6px;
	top: -10px;
	left: 16px;
	background-color: #3f3f3f;
	z-index: 2;
}

.sysicon.logout .inner {
	position: relative;
	width: 100%;
	height: 2px;
	top: 2px;
	background-color: gainsboro;
}

.sysicon.reg .bg {
	display: flex;
	flex-direction: row;
}

.sysicon.reg .line {
	position: relative;
	width: 2px;
	height: 10px;
	left: 8px;
	top: 5px;
	background-color: gainsboro;
}

.sysicon.reg .arc {
	position: relative;
	width: 6px;
	height: 6px;
	border-radius: 6px 0 0 0;
	border-top: 2px solid gainsboro;
	top: 5px;
	left: 7px;
}

.progress-bar {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.progress-bar>div {
    /* evt line */
    display: block;
    width: calc(100% - 32px);
    height: 100%;
    margin: auto;
    padding: 0;
    cursor: pointer;
}

.progress-bar .bg {
    position: relative;
    width: 100%;
    height: 3px;
    background-color: darkgrey;
    padding: 0;
    top: calc(50% - 2px);
}

.progress-bar .cached {
    width: 0px;
    height: 100%;
    background-color: deeppink;
    padding: 0;
    margin: 0;
}

.progress-bar .passed {
    width: 0px;
    height: 100%;
    background-color: dodgerblue;
    padding: 0;
    margin: 0;
}

.progress-bar .ball {
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 14px;
    border: 1px solid #adada9;
    background: -moz-linear-gradient(top, #f1f1f1, #e8e8e7);
    background: -webkit-linear-gradient(top, #f1f1f1, #e8e8e7);
    background: -ms-linear-gradient(top, #f1f1f1, #e8e8e7);
    background: -o-linear-gradient(top, #f1f1f1, #e8e8e7);
    top: -6px;
}

.icon-label {
    display: flex;
    cursor: pointer;
}

.icon-label.horizontal {
    width: auto;
    flex-direction: row;
}

.icon-label.vertical {
    flex-direction: column;
    height: auto;
}

.icon-label.vertical .label {
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.icon-label.horizontal .label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    width: auto;
    height: 100%;
    justify-content: center;
}

.icon-label.horizontal .pixbuf {
    height: 100%;
}

.icon-label.vertical .pixbuf {
    width: 100%;
}

/* topbar begin */

.topbar {
    display: flex;
    position: fixed;
    flex-flow: row;
    width: 100%;
    min-width: 1000px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 99999990;
}

.topbar-font {
    font-size: 16px;
    font-weight: bold;
    color: gainsboro;
    line-height: 30px;
    cursor: default;
}

.topbar-font:hover {
    color: beige;
}

.act-panel {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 100%;
}

.act-panel:hover .topbar-font {
    color: beige;
}

.topbar-mid {
    display: flex;
    flex-grow: 3;
    height: 100%;
}

.topbar-left, .topbar-right {
    display: flex;
    width: auto;
    height: 100%;
}

.topbar-right {
    flex-direction: row-reverse;
}

.topbar-widget {
    width: auto;
    height: 32px;
}

.topbar-widget img {
    width: 30px;
    height: 30px;
    margin: 1px;
}

.topbar-hot {
    width: 8px;
    height: 100%;
}

.topbar-logo {
    width: 40px;
    height: 100%;
}

.topbar-active {
    width: 40px;
    height: 100%;
}

.topbar-app {
    max-width: 220px;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    word-break: normal;
    white-space: nowrap;
}

.topbar-system {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 100%;
}

.topbar-sys-icon, .topbar-fetch-down {
    display: flex;
    width: 32px;
    height: 100%;
}

.topbar-sys-icon img {
    width: 22px;
    height: 22px;
    margin: 5px;
}

.topbar-voice-icon img {
    width: 16px;
    height: 16px;
    margin: 8px;
}

.topbar-user-info {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 100%;
    cursor: default;
}

.topbar-user-info .user-name {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;
    justify-content: center;
}

.topbar-fetch-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid gainsboro;
    margin: 12px 4px;
}

.topbar-system:hover, .topbar-system:hover .topbar-fetch-down {
    border-bottom: 1px solid royalblue;
}

.topbar-system:hover .topbar-fetch-down {
    border-top: 6px solid beige;
}

.media-plg {
    display: block;
    width: 280px;
    height: auto;
    padding: 5px 10px;
    margin: auto;
}

.media-item {
    margin: 5px auto;
}

.media-ctrls {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 32px;
    margin: 10px auto;
}

.media-button {
    display: flex;
    flex-direction: row;
    width: 32px;
    height: 32px;
    border-radius: 32px;
    border: 1px solid gainsboro;
    margin: auto;
    cursor: pointer;
}

.media-button:hover {
    background-color: rgba(200, 200, 200, 0.3);
}

.media-button .mb-left, .media-button .mb-right {
    width: 8px;
    height: 8px;
    margin: 10px 0;
}

.media-button-prev .mb-left {
    margin: 10px 0px 10px 7px;
}

.media-button-prev .mb-left>div,
.media-button-prev .mb-right>div {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid dodgerblue;
}

.media-button-next .mb-left>div,
.media-button-next .mb-right>div {
    width: 0;
    height: 0;
    border-left: 8px solid dodgerblue;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.media-button-next .mb-left {
    margin: 10px 0px 10px 9px;
}

.media-button-pause .mb-left>div {
    width: 1px;
    height: 12px;
    border-left: 4px solid dodgerblue;
}

.media-button-pause .mb-right>div {
    width: 1px;
    height: 12px;
    border-right: 4px solid dodgerblue;
}

.media-button-pause .mb-left {
    margin: 10px 0px 10px 10px;
}

.media-button-pause.pause .mb-left>div {
    width: 0;
    height: 0;
    border: none;
    border-left: 8px solid dodgerblue;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.media-button-pause.pause .mb-left {
    margin: 10px 0px 10px 12px;
}

.media-button-pause.pause .mb-right>div {
    width: 2px;
    height:12px;
    border:none;
    background-color: dodgerblue;
}

.media-button-pause.pause .mb-right {
    margin: 10px 0px;
}

.media-button-stop .mb-left, .media-button-stop .mb-right {
    width: 4px;
    height: 8px;
    background-color: dodgerblue;
    margin: 12px 0px;
}

.media-button-stop .mb-left {
    margin: 12px 0px 12px 12px;
}

.media-plg .pgbar {
    width: 100%;
    height: 32px;
    display: flex;
    flex-direction: row;
    margin: 5px auto;
}

.media-plg .pgbar .timer {
    width: 32px;
    height: 32px;
    margin: auto 5px;
}

.media-plg .pgbar .label {
    width: auto;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: beige;
}

.media-plg .progress-bar {
    flex-grow: 1;
    height: 32px;
}

.media-plg .album {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 64px;
    overflow: hidden;
}

.media-plg .album .artimg {
    width: 64px;
    height: 64px;
    border-radius: 64px;
    margin: auto 10px;
    overflow: hidden;
}

.media-plg .album .artinfo {
    flex-grow: 1;
    width: calc(100% - 64px);
    height: 64px;
}

.media-plg .artinfo {
    display: block;
    width: 100%;
    height: 100%;
}

.media-plg .album .music-title {
    width: 100%;
    height: 32px;
    font-size: 16px;
    line-height: 32px;
    font-weight: bold;
    overflow: hidden;
    color: beige;
}

.media-plg .album .art-item {
    width: 100%;
    height: 20px;
    color: beige;
    font-size: 14px;
    line-height: 20px;
}

.sys-ctrl {
    display: block;
    width: 280px;
    height: auto;
    padding: 5px 10px;
    cursor: pointer;
}

.sys-ctrl:hover {
    background-color: rgba(110, 110, 110, 0.2);
}

.sys-ctrl.sys-audio, .sys-ctrl.sys-bright {
    display: flex;
    flex-direction: row;
    margin: 10px auto;
}

.sys-ctrl.sys-audio .pixbuf {
    width: 18px;
    height: 18px;
    margin: auto 2px;
}

.sys-ctrl.sys-bright .pixbuf {
    width: 22px;
    height: 22px;
}

.sys-ctrl.sys-audio .progress-bar,
.sys-ctrl.sys-bright .progress-bar {
    height:22px;
}

.sys-ctrl-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 310px;
    height: auto;
    left: calc(100% - 320px);
    top: 34px;
}

.sys-ctrl-menu.hidden {
    left: -1000px;
}

.sys-ctrl-menu .arrow-up {
    width: 100%;
    height: 10px;
    overflow: hidden;
}

.sys-ctrl-menu .arrow-up div {
    width: 0px;
    height: 0px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 10px solid #3f3f3f;
    position: relative;
    left: 245px;
}

.sys-ctrl-menu .menu-content {
    width: 100%;
    background-color: #393f3f;
    border-radius: 3px;
    z-index: 99999999;
}

.sys-ctrl.menu-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

.menu-item .menu-head {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 32px;
    margin: 3px auto;
}

.menu-item .menu-head:hover {
    background-color: rgba(200, 200, 200, 0.3);
}

.menu-item .menu-title {
    display: flex;
    width: 260px;
    height: 100%;
}

.menu-title .pixbuf {
    width: 22px;
    height: 22px;
    margin: 5px;
}

.menu-title .title-content {
    color: beige;
    flex-grow: 1;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
}

.menu-item.dropdown {
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
}

.menu-item .fetch-arrow {
    display: flex;
    width: 10px;
    height: 32px;
}

.menu-item .fetch-arrow>div {
    width: 0;
    height: 0;
    border-left: 6px solid beige;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin: 10px auto;
}

.menu-item .fetch-arrow.dropdown>div {
    border: none;
    border-top: 6px solid beige;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin: 12px auto;
}

.sys-user-ctrl {
    display: flex;
    flex-direction: row;
    margin: auto;
    height: auto;
}

.sys-user-ctrl .sys-sub-menu {
    width: 60px;
    height: auto;
    color: beige;
    cursor: pointer;
    margin: 6px auto;
}

.sys-user-ctrl .icon-label {
    width: 32px;
}

.sys-user-ctrl .icon-label .pixbuf {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    border: 1px solid #333;
}

.menu-sep {
    width: 100%;
    height: 10px;
}

/* topbar end */

/* dock begin */
.dock {
    display: flex;
    position: fixed;
    justify-content: center;
    /* overflow: hidden; */
    z-index: 99999980;
    /* background-color: #333; */
}

.dock.horizontal {
    flex-direction: row;
    width: 100%;
    height: 60px;
}

.dock.vertical {
    flex-direction: column;
    width: 60px;
    height: 100%;
}

.dock.bottom {
    bottom: 10px;
}

.dock.top {
    top: 10px;
}

.dock.left {
    left: 10px;
}

.dock.right {
    right: 10px;
}

.dock ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

.dock>ul {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 60px;
    /* background-color: #333; */
}

.dock-item {
    width: 48px;
    height: 48px;
    margin: auto;
    cursor: pointer;
    padding: 0px 15px;
}


.dock-item .item {
    /*width: 100%;
    height: 100%; */
    width: 48px;
    height: 48px;
}

.dock-item .item .icon {
    width: 48px;
    height: 48px;
    z-index: 2;
}

.dock-item item .pixbuf {
    width: 48px;
    height: 48px;
}

.dock-item .item .label {
    display: none;
}

.dock-item .item:hover .label {
    display: block;
    width: auto;
    color: beige;
    font-size: 16px;
    height: 26px;
    padding: 0 8px;
    position: relative;
    top: -90px;
    background-color: #393f3f;
    border-radius: 3px;
    line-height: 26px;
    word-break: normal;
    white-space: nowrap;
    z-index: 3;
}

.dock-item .item .menu {
    display: none;
}

.dock-item .item .menu .not-run {
    display: none;
}

.dock-item .item .menu.popup {
    display: block;
    width: 220px;
    /* padding: 10px; */
    height: auto;
    position: relative;
    left: -86px;
    z-index: 3;
}

.dock-item .item .menu.popup ul {
    width: 100%;
    height: auto;
    background-color: #393f3f;
    border-radius: 5px;
    padding: 10px 0px;
}

.dock-item-menu-li {
    display: block;
    width: 180px;
    height: 28px;
    font-size: 16px;
    line-height: 28px;
    color: beige;
    margin: 10px auto;
    /* overflow: hidden; */
    list-style: none;
    padding: 0px 20px;
}

.dock-item-menu-li:hover {
    background-color: rgba(150, 150, 150, 0.2);
}

.dock-item .menu .arrow {
    width: 100%;
    height: 12px;
}

.dock-item .menu .arrow>div {
    display: block;
    position: relative;
    width: 0px;
    height: 0px;
    border-top: 10px solid #393f3f;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    left: 100px;
}

.dock-item .instance {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 8px;
    overflow: hidden;
}

.dock-item .instance>div {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    margin: 1px;
    background-color: darkblue;
}

/* dock end */

/* stage begin */
#main.stage {
    position: absolute;
    /* we set the the width height left and top in the js code */
    overflow: hidden;
    z-index: 1;
}

.app-search {
    width: calc(100% - 80px);
    height: 36px;
    margin: 25px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.app-search .arround {
    display: flex;
    flex-direction: row;
    width: 320px;
    height: 36px;
    border-radius: 3px;
    border: 1px solid gainsboro;
}

.app-search .pixbuf {
    width: 28px;
    height: 28px;
    margin: 4px 2px;
}

.app-search .line-edit {
    width: calc(100% - 44px);
    height: 32px;
    margin: 2px;
}

.app-search .line-edit input {
    border: none;
    background: transparent;
    color: beige;
}

.stage-page {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.app-icon:hover {
    border-radius: 3px;
    background-color: rgba(200, 200, 200, 0.3);
}

.app-icon .pixbuf {
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    margin: 2px auto;
}

.app-icon .pixbuf img {
    width: 100%;
    height: 100%;
}

.app-icon .label {
    width: 100%;
    height: 16px;
    font-size: 14px;
    color: beige;
    text-align: center;
}

.app-display {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.3);
}

.app-area {
    display: flex;
    flex-direction: row;
    /* flex-grow: 1; */
    height: calc(100% - 160px);
}

.app-area .stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.app-page-bar {
    width: 80px;
    height: calc(100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-page-bar .button-group {
    width: 100%;
    height: auto;
}

.app-page-bar-btn {
    width: 12px;
    height: 12px;
    border-radius: 16px;
    margin: 30px auto;
    border: 2px solid beige;
}

.app-page-bar-btn.show-me {
    background-color: beige;
    border: 1px solid beige;
}

.app-area .stack {
    width: auto;
    min-width: 100px;
    height: auto;
    margin: 5px auto;
}

.stack>div.not-current,
.stack>iframe.not-current {
    display: none;
}

.app-icons {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
}

.app-con {  
    margin: auto;
    overflow: hidden;
}

._app-disp-ah {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.active-stage {
    background-color: rgba(0, 0, 0, 0.3);
}

.shade-page {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    pointer-events: none;
    z-index: 99999999;
}

._window {
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 400px;
    color: #393f3f;
    font-size: 14px;
    position: absolute;
}

._window.hidden {
    display: none;
}

._window .border.top,
._window .border.bottom {
    display: flex;
    flex-direction: row;
    height: 10px;
    width: 100%;
}

._window .border.center {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* flex-grow: 1; */
    height: calc(100% - 20px);
}

._window .border.left,
._window .border.right {
    width: 10px;
}

.window {
    display: flex;
    flex-direction: column;
    /* flex-grow: 1; */
    width: calc(100% - 20px);
    height: calc(100%);
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #d2d2d1;
    background-color: #f4f4f3;
}

._window .border.left {
    cursor: w-resize;
}

._window .border.right {
    cursor: e-resize;
}

._window .border .corner {
    width: 10px;
    height: 10px;
}

._window .border .center {
    height: 10px;
    flex-grow: 1;
}

._window .border .lt {
    cursor: nw-resize;
}

._window .border .rt {
    cursor: ne-resize;
}

._window .border .lb {
    cursor: sw-resize;
}

._window .border .rb {
    cursor: se-resize;
}

._window .border .t {
    cursor: n-resize;
}

._window .border .b {
    cursor: s-resize;
}

.mmc {
    display: flex;
    flex-direction: row;
    width: 96px;
    height: 32px;
}

.mmc .mmc-ctrl {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 32px;
    justify-content: center;
    cursor: pointer;
}

.mmc .mmc-ctrl>div {
    margin: auto;
}

.mmc .mmc-ctrl.max>div {
    width: 6px;
    height: 4px;
    border-top: 2px solid grey;
    border-bottom: 2px solid grey;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.mmc .mmc-ctrl.min>div {
    width: 8px;
    height: 7px;
    border-bottom: 1px solid grey;
}

.mmc .mmc-ctrl.close>div {
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    color: grey;
}

.mmc .mmc-ctrl:hover>div {
    border-color: #333;
    color: #333;
}

.window .title {
    width: 100%;
    height: 32px;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #aaa;
    background-color: #f4f4f3;
    background: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
    background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
    background: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
    background: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
}

.window .title .upper,
.window .title .label {
    width: 100%;
    height: 32px;
}

.window .title .upper {
    position: relative;
    display: flex;
    flex-direction: row;
    top: -32px;
    z-index: 2;
}

.window .title .label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: bold;
    /*line-height: 32px; */
    text-align: center;
    justify-content: center;
    color: #333;
    z-index: 1;
}

.window .title .container {
    flex-grow: 1;
}

.window>.container {
    /* flex-grow: 1; */
    height: calc(100% - 33px);
}

.cant-select {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.switcher {
    display: flex;
    flex-direction: row;
    height: 26px;
    width: auto;
    margin: auto;
    min-width: 20px;
    justify-content: center;
    border-radius: 3px;
    border-top: 1px solid #b5b5b5;
    border-bottom: 1px solid #b5b5b5;
    border-right: 1px solid #b5b5b5;
}

.switcher .ss-btn {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;
    padding: 0px 10px;
    word-break: normal;
    word-wrap: normal;
    font-size: 14px;
    justify-content: center;
    border-left: 1px solid #b5b5b5;
    color: #333;
    background: -moz-linear-gradient(top, #e7e7e6, #d0d0cf);
    background: -webkit-linear-gradient(top, #e7e7e6, #d0d0cf);
    background: -ms-linear-gradient(top, #e7e7e6, #d0d0cf);
    background: -o-linear-gradient(top, #e7e7e6, #d0d0cf);
    cursor: pointer;
}

.switcher .ss-btn.used {
    font-weight: bold;
    background: none;
    background-color: #cfcfce;
}

.empty-window {
    width: 640px;
    height: 480px;
    left: 50px;
    top: 20px;
}

.file-item {
    width: 100px;
    height: 120px;
    margin: 20px;
}

.file-item .label {
    color: #333;
}

.file-item .pixbuf {
    width: 95px;
    height: 95px;
    overflow: hidden;
    margin: 5px;
}

.file-item .pixbuf img {
    height: 95px;
    width: auto;
    margin: auto;
    z-index: 1;
}

.file-item .layer {
    position: relative;
    width:  100px;
    height: 100px;
    top: -100px;
    z-index: 2;
}

.file-item.selected .layer {
    background-color: rgba(0, 0, 30, 0.5);
}

.file-item.selected span {
    color: beige;
    background-color: royalblue;
}

.line-edit {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 32px;
    justify-content: center;
}

.line-edit input {
    width: 100%;
    height: 24px;
    border: none;
    border-radius: 3px;
    border: 1px solid #d2d2d1;
}

.selector {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px;
    height: 32px;
}

.selector select {
    width: 100%;
    height: 24px;
    border: none;
    border-radius: 3px;
    border: 1px solid #d2d2d1;
}

.button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 28px;
    font-size: 16px;
    font-color: beige;
    background-color: royalblue;
    border-radius: 3px;
    white-space: nowrap;
    word-break: normal;
    padding: 0 8px;
    cursor: pointer;
    text-align: center;
}

.button span {
    display: block;
    width: auto;
}
/* stage end */

.notebook .bar-item {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 22px;
    margin: 0 2px;
    padding: 0px 2px;
    font-size: 14px;
    color: #383e40;
    border-radius: 5px 5px 0px 0px;
    background-color: #eaeaea;
    border: 1px solid #adada9;
}

.notebook .bar-item.rightnow {
    background-color: #f0f0f0;
}

.notebook .bar-item .bar-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    overflow: hidden;
    cursor:  pointer;
}

.notebook .bar-item .bar-close {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    width: 22px;
    cursor: pointer;
}

.notebook .bar-item .bar-close:hover {
    background-color: #f0f0f0;
}

.notebook .note-side {
    display: flex;
    border-bottom: 1px solid #adada9;
}

.notebook.horizontal .note-side {
    flex-direction: column;
    width: 180px;
    height: 100%;
    overflow: auto;
}

.notebook.vertical .note-side {
    flex-direction: row;
    width: auto;
    max-height: 180px;
    height: 22px;
    overflow: hidden;
}

.notebook {
    display: flex;
    width: 100%;
    height: 100%;
}

.notebook.horizontal {
    flex-direction: row;
}

.notebook.vertical {
    flex-direction: column;
}

.notebook.horizontal .stack {
    flex-grow: 2;
    height: 100%;
}

.notebook.vertical .stack {
    flex-grow: 2;
    width: 100%;
}

.zf-button {
    word-break: normal;
    white-space: nowrap;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: 616161;
    border-radius: 4px;
    border: 1px solid #9e9e9e;
    background-color: #e0e0e0;
}

/**
 * Resizable widget
 */
.zf-resizable {
    display: flex;
}

.zf-resizable.horizontal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 30px;
    cursor: ns-resize;
}

.zf-resizable.vertical {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 30px;
    height: 100%;
    cursor: ew-resize;
}

.zf-resizable.horizontal>div {
    width: 100%;
    height: 2px;
    background-color: #888;
}

.zf-resizable.vertical>div {
    width: 0px;
    height: 100%;
    border-right: 1px dashed #d2d2d1;
}

.resize-panel {
    display: flex;
    width: 100%;
    height: 100%;
}

.resize-panel.horizontal {
    flex-direction: column;
}

.resize-panel.vertical {
    flex-direction: row;
}

.resize-panel.horizontal>.panel-one {
    width: 100%;
    height: calc(50% - 20px);
}

.resize-panel.vertical>.panel-one {
    width: calc(50% - 20px);
    height: 100%;
}

.resize-panel.horizontal>.panel-two {
    flex-grow: 1;
    width: 100%;
}

.resize-panel.vertical>.panel-two {
    flex-grow: 1;
    height: 100%;
}

.on-off {
    display: flex;
    flex-direction: row;
    width: 60px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    color: #313f3f;
    border-radius: 3px;
    border: 1px solid #3498db;
    background-color: #3498db;
    cursor: default;
    user-select: none;
}

.on-off.not-open {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
}

.on-off .open, .on-off .close {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    text-align: center;
    padding: 0;
    height: 100%;
}

.on-off .open {
    background-color: none;
    color: beige;
}

.on-off .open, .on-off .close {
    cursor: default;
}

.on-off .close, .on-off.not-open .open {
    background-color: #ecf0f1;
}

.on-off.not-open .close {
    background: none;
}