/*
 * Navigation
 */
#main-navigation { display: flex; flex-direction: column; width: 80px; color: #bdbdbd; background: #222; }
#main-navigation .link-item { display: flex; max-height: 100px; flex: 1; color: #bdbdbd; transition: all .15s ease; }
#main-navigation .link-item.current { background-color: rgba(255, 255, 255, .1); color: white; }
#main-navigation .link-detail { max-height: 100px; display: flex; flex: 1; text-align: center; color: inherit; align-items: center; flex-direction: column; justify-content: center; }
#main-navigation .link-detail i { font-size: 1.8em; }
#main-navigation .link-detail .main-title { display: none; }
#main-navigation.show-titles .link-detail .main-title { display: block; margin-top: 5px; word-break: break-word; hyphens: auto; font-size: 10px; }
#main-subnavigation, #main-navigation .link-item.active, #main-navigation .link-detail.active { background: #dcdcdc; color: #333; }
#main-navigation .link-detail:after {/*content:"";*/ width:40%; height:1px;background:#62adde;display:block;margin:2vh auto 5px auto;}
#main-navigation .link-item:last-child .link-detail:after{display:none;}
#main-navigation img {max-width:50px;}
#main-subnavigation img {max-width:50px;}
#main-subnavigation { max-width: 0px; width: 300px; overflow: auto; transition: all .5s ease; }
#main-subnavigation .panel { display: none; width: 300px; padding: 30px; }
#main-subnavigation .panel.open { display: block; }
#main-subnavigation.open { max-width: 300px }
#main-subnavigation .panel .links { display: flex; flex-direction: column; }
#main-navigation .link-item svg path { fill: #bdbdbd; transition: fill .15s ease; }
#main-navigation .link-item:hover { color: #ffffff; }
#main-navigation .link-item:hover svg path { fill: #ffffff }
#main-navigation .link-item.active:hover { color: #333; }
#main-navigation .link-item.active svg path { fill: #333; }
#main-navigation .software-version {font-size:0.6em;padding:2px 5px; text-align:center; background:#171717; }

.content-wrapper.zen-re-1120 #main-navigation { width: 150px }
.content-wrapper.zen-re-1120 #main-navigation .link-detail .main-title { display: inline-block; }

/*
 * Layout
 */
.top-bar { display: flex; width: 100%; height: 60px; padding: 0 20px; background: var(--main-color); align-items: center; color: #fff; }
.top-bar .logo { margin-top: 5px; }
.top-bar .logo img { max-width: 95px; margin-left: 8px; }
.top-bar .search {  position: relative; margin-left: auto; margin-right: 30px; width: 100%; max-width: 250px; }
.top-bar .search input { border: none; background-color: rgba(0,0,0,.2); height: 35px; line-height: 35px; color: #fff; font-size: .97em; border-radius: 3px; width: 100%; padding: 0 15px; padding-right: 30px; outline: none; font-family: 'Open Sans', sans-serif; }
.top-bar .search i { position: absolute; top: 8px; right: 10px; font-size: 1.14em; color: rgba(255, 255, 255, 0.85); }
.top-bar .search input:focus + i { color: #fff }
.top-bar .search form { position: relative }
.top-bar .search input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.75); }
.top-bar .search input:-moz-placeholder { color: rgba(255, 255, 255, 0.75); }
.top-bar .search input::-moz-placeholder { color: rgba(255, 255, 255, 0.75); }
.top-bar .search input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.75); }
.top-bar .search input::-ms-input-placeholder { color: rgba(255, 255, 255, 0.75); }
.top-bar .search input::placeholder  { color: rgba(255, 255, 255, 0.75); }

.top-bar .user { display: flex; align-items: center; }
.top-bar .user svg { width: 40px; height: 40px; }
.top-bar .user svg path { fill: rgb(245, 248, 252); }
.top-bar .user .name { font-size: 1em; }
.top-bar .user .photo { width: 40px; height: 40px; border-radius: 20px; margin-left: 10px; background: rgba(255,255,255,.15); }
.content-wrapper { display: flex; min-height: calc(100vh - 60px); }
.content-wrapper > .content { display: flex; flex-wrap: wrap; flex: 1; height: calc(100vh - 60px); flex-direction: column; }
.content-wrapper > .content .header { width: 100%; padding: 30px; padding-bottom: 0; background: #f9f9f9; border-bottom: 1px solid rgba(0, 80, 178, 0.09); padding-top: 15px; }
.content-wrapper > .content .scrollable { height: 100%; padding: 0 30px; overflow-y: scroll; position: relative; flex: 1; }
.content-wrapper > .content .scrollable::before,
.content-wrapper > .content .scrollable::after { content: ''; display: block; height: 30px; width: 100%; }
.content-wrapper > .content .block-wrapper { display: flex; flex-flow: row wrap; margin-bottom: 30px; }


.content-wrapper > .content .block-wrapper .block { width: 100%; flex: 1; }
.content-wrapper > .content .block-wrapper .block.full { flex: none; margin-bottom: 75px; }
.content-wrapper > .content .block-wrapper .block.full:last-of-type { margin-bottom: 0; }


.action-nav { margin-bottom: 30px; }
.action-nav::after { content: ' '; display: block; clear: both; }
.action-nav > * { display: inline-block; }
.action-nav .float-right > *:last-child { margin-right: 0; }

.left-navigation { display: flex; background: #dcdcdc; height: calc(100vh - 60px); }


.panel .links { display: flex; flex-direction: column; }
.panel .panel-title { font-size: 1.3em; line-height: 1.2em; text-align: center; margin-bottom: 25px; font-weight: 600; }

.panel .panel-subtitle { font-size: 1.1em; text-align: center; line-height: 2.5em; font-weight: 600; }
.panel .panel-subtitle ~ .panel-subtitle { margin-top: 20px; }

.panel .links a { font-size: 1em; font-weight: 400; padding-top: 7px; padding-bottom: 10px; text-align: center; border-top: 1px solid rgba(0, 80, 178, 0.2); }
.panel .links a:last-of-type { border-bottom: 1px solid rgba(0, 80, 178, 0.2); }
.panel .links a:hover { color: #2a6bbd; }