/*
 * Navigation
 */
#main-navigation { display: flex; flex-direction: column; width: 80px; color: #bdbdbd; background: #222; }
#main-navigation .link-item { display: flex; flex: 1; max-height: 90px; color: #bdbdbd; font-family: 'Oswald', sans-serif; transition: all .15s ease; }
#main-navigation .link-detail { display: flex; flex: 1; text-align: center; color: inherit; align-items: center; flex-direction: column; justify-content: center; padding: 0 10px; text-decoration: none; }
#main-navigation .link-detail .main-title { display: none }
#main-navigation .link-detail .fas { font-family: 'Font Awesome 5 Pro' !important; }
#main-subnavigation, #main-navigation .link-item.active, #main-navigation .link-detail.active { background: #efefef; color: #333 !important; }
#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-navigation .link-detail i {
    font-size: 1.6em;
    margin-bottom: 5px;
}

#main-subnavigation img {max-width:50px;}
#main-subnavigation { max-width: 0px; width: 275px; overflow-x: hidden; transition: all .5s ease; }

#main-subnavigation .panel { display: none; width: 275px; padding: 30px; }
#main-subnavigation .panel.open { display: block; }
#main-subnavigation.open { max-width: 275px }

#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 !important; }
#main-navigation .link-item.active svg path { fill: #333 !important; }

#main-navigation .software-version { display: none; font-size:0.6em;padding:2px 5px; text-align:center; background:#171717; }

.content-wrapper.zen-re-1120 #main-navigation { width: 90px }
.content-wrapper.zen-re-1120 #main-navigation .link-detail .main-title { display: inline-block; font-size: .8em; line-height: 1.1em; }

#main-navigation[data-currentnav=home] .link-item:not([data-panel]),
#main-navigation[data-currentnav=quotation] .link-item[data-panel=quotation],
#main-navigation[data-currentnav=requisition] .link-item.requisition,
#main-navigation[data-currentnav=employee] .link-item[data-panel=employee],
#main-navigation[data-currentnav=billing] .link-item[data-panel=billing],
#main-navigation[data-currentnav=organization] .link-item[data-panel=organization],
#main-navigation[data-currentnav=inventory] .link-item[data-panel=inventory],
#main-navigation[data-currentnav=order] .link-item[data-panel=order],
#main-navigation[data-currentnav=application] .link-item[data-panel=admin] { color: #fff; }

#main-navigation[data-currentnav=home] .link-item:not([data-panel]) svg path,
#main-navigation[data-currentnav=quotation] .link-item[data-panel=quotation] svg path,
#main-navigation[data-currentnav=requisition] .link-item.requisition svg path,
#main-navigation[data-currentnav=billing] .link-item[data-panel=billing] svg path,
#main-navigation[data-currentnav=organization] .link-item[data-panel=organization] svg path,
#main-navigation[data-currentnav=inventory] .link-item[data-panel=inventory] svg path,
#main-navigation[data-currentnav=order] .link-item[data-panel=order] svg path,
#main-navigation[data-currentnav=application] .link-item[data-panel=admin] svg path { fill: #fff; }

/*
 * 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; display: flex; align-items: center; }
.top-bar .logo span {
    margin-left: 15px;
    font-family: 'Oswald', sans-serif;
    color: #fff;
    margin-bottom: 2px;
    font-size: 1.2em;
}
.top-bar .logo img { max-width: 134px; max-height: 40px; margin-left: 8px; border-right: 1px solid rgba(255, 255, 255, 0.5); padding-right: 18px; }
.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-family: 'Oswald', sans-serif; font-size: 1.2em; }
.top-bar .user .photo { width: 40px; height: 40px; border-radius: 20px; margin-left: 10px; background: rgba(255,255,255,.15); }
.top-bar .help { display: none; }
.top-bar .notifications { margin-left: 15px; position: relative; /* Temporarily hid the notifications -> */ display: none; }
.top-bar .notifications:hover { cursor: pointer; }
.top-bar .notifications span.count { content: "0"; position: absolute; top: -7px; right: -15px; width: 25px; height: 25px; border-radius: 100%; background-color: #C41300; display: flex; align-items: center; justify-content: center; font-size: 1em; font-weight: bold; }
.top-bar .notifications i.fa-bell { font-size: 2em; color: #fff; }
.top-bar .notifications .actions-button ul.dropdown { left: initial; right: 0; }
.top-bar .notifications .actions-button ul.dropdown li.separator.unseen { background-color: #f9f9f9; font-weight: bold; }
.top-bar .notifications .actions-button ul.dropdown li.separator.small span.clearAll { color: #777; padding: 5px 15px; text-align: right; }
.top-bar .notifications .actions-button ul.dropdown li.separator.small span.clearAll:hover { color: var(--main-color); }
.page-wrapper { height: 100%; }
.content-wrapper { display: flex; height: calc(100% - 60px); }
.content-wrapper .content { display: flex; flex-wrap: wrap; flex: 1; height: 100%; flex-direction: column; }
.content-wrapper .content .header { display: flex; width: 100%; padding: 30px; padding-bottom: 0; background: #f9f9f9; border-bottom: 1px solid var(--main-color-10percent); padding-top: 15px; }
.content-wrapper .content .scrollable { height: 100%; padding: 0 30px; overflow-y: scroll; position: relative; flex: 1; overflow-x: hidden; }
.content-wrapper .content .scrollable::before,
.content-wrapper .content .scrollable::after { content: ''; display: block; height: 30px; width: 100%; }
.content-wrapper .content .block-wrapper { display: block; flex-flow: row wrap; margin-bottom: 30px; }
.content.zen-re-720 .block-wrapper { display: flex }
/*.content-wrapper .content .block-wrapper:last-of-type { margin-bottom: 0; }*/

.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; }

.content-wrapper .content.zen-re-720 .block-wrapper .block { padding: 0 10px; }
.content-wrapper .content.zen-re-720 .block-wrapper .block-left {  width: 50%; padding-left: 0; }
.content-wrapper .content.zen-re-720 .block-wrapper .block-right {  width: 50%; padding-right: 0; }
.content-wrapper .content.zen-re-720 .block-wrapper .block-full { flex: none; padding: 0 }
.content-wrapper .content.zen-re-720 .block-wrapper .block-full.margin-top { margin-top: 50px; }

.action-nav { margin-bottom: 30px; }
.action-nav > * { display: inline-block; }

.left-navigation { display: flex; background: #dcdcdc; height: 100%; }


.panel .links { display: flex; flex-direction: column; }
.panel .panel-title { font-size: 1.7em; line-height: 1.2em; font-family: 'Oswald', sans-serif; margin-bottom: 25px; font-weight: 400; text-transform: uppercase; }

.panel .panel-subtitle { font-size: 1.3em; font-family: 'Oswald', sans-serif; line-height: 1.3em; font-weight: 400; text-transform: uppercase; margin-bottom: 5px; }
.panel .panel-subtitle ~ .panel-subtitle { margin-top: 25px; }

.panel .links a { font-family: 'Oswald', sans-serif; font-size: 1.4em; font-weight: 300; padding-bottom: 3px; }
.panel .links a:hover { color: var(--hover-color); }

/*
 * Responsive
 */

.zen-re-960 .content-wrapper .content .block-wrapper .field-wrapper.half { width: 50% }

/*
 * Others
 */
.attentionColor { background-color: rgba(254, 194, 2, 0.08) !important; }
.warningColor { background-color: rgba(255, 191, 0, 0.20) !important; }
.alertColor { background-color: rgba(248, 87, 87, 0.08) !important; color: #C41300 !important; }

/*
 * Font awesome fix
 */
.button.fas, .button.far, .button.fa, .button.fad { font-family: 'Font Awesome 5 Pro'; }

/*
 * Form help
 */
.help-text { font-size: 0.75em; color: #555; margin-bottom: 0; }