/** hcm2018-base.css
 *  HCM Website 1.5 - Base (0469)
 *  Copyright by HCM CustomerManagement GmbH
 *  support@hcm-infosys.com
 */

/*  TABLE OF CONTENTS
	=================
	1.	BASIC STRUCTURE
	2.	HELPER-CLASSES & OVERWRITE EZSite-defaults
	3.	HEADER, SIDEBAR, FOOTER
	4.	FORMS & INPUT ELEMENTS
	5.	LOGIN PAGE
	6.	START PAGE (User Layout)
	7.	DASHBOARD (Manager Layout)
	8.	EDIT-DOCUMENT
	9.	HCM FEATURES
	10. MISCELLANEOUS
*/ 
 
/**
 * 1.) BASIC STRUCTURE
 **/
html {
	overflow-y: scroll;
}

body {	
	/* FADE-IN FX /*/
	opacity: 0;
	transition: opacity 1s;
	background-color: #e7e7e7;
	/* changed during init function in hcm2018-base.js */
}

.page>.container-fluid, .page>.container {
	margin-top: 50px;
	margin-bottom: 32px;
}

/* negative offset */
.col-xs-offset--2 {
	margin-left: -16.66666667%;
}

@media ( min-width : 768px) {
	.col-sm-offset--2 {
		margin-left: -16.66666667%;
	}
}

@media ( min-width : 992px) {
	.col-md-offset--2 {
		margin-left: -16.66666667%;
	}
}

@media ( min-width : 1200px) {
	.col-lg-offset--2 {
		margin-left: -16.66666667%;
	}
}

#ToolTip {
	/* tooltip fix */
	opacity: 1;
}

/**
 * 2.) HELPER-CLASSES & OVERWRITE EZSite-defaults
 **/
.cursor-pointer {
	cursor: pointer;
}

.cursor-default {
	cursor: default;
}

.display-none {
	display: none!important;
}

.fa-rotate--90 {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.fa-rotate--180 {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.fa-empty:before, .fa-dummy:before {
	content: "\00a0";
}

.text-3x, .huge {
    font-size: 3em;
}

.text-bold {
	font-weight: bold;
}

.text-bold .mandatory label, .text-bold label {
	font-weight: bold !important;
}

ul {
	padding: 0;
}

.buttons-group ul {
	display: inline-block;
	margin: 0;
}

.buttons-group li {
	display: inline-block;
	margin-right: 4px;
	margin-bottom: 2px;
}

.document-main-buttons, .document-secondary-buttons, .document-workflow-buttons {
	display: inline-block;
	margin-top: 20px;
	margin-bottom: 20px;
}

.buttons-group ul li:first-child, .document-main-buttons ul li:first-child,	.document-workflow-buttons ul li:first-child {
	margin-left: 0;
}

.buttons-group ul li:last-child, .document-main-buttons ul li:last-child, .document-workflow-buttons ul li:last-child {
	margin-right: 0;
}

.document-secondary-buttons, .document-workflow-buttons {
	float: right;
}

.fields-area>.panel>.panel-body>.table>tbody>tr:first-child>td,	.fields-area>.hcm-tabs>.panel>.panel-body>.table>tbody>tr:first-child>td {
	border-top: 0;
}

.fields-area>.rich-text {
	margin-bottom: 1em;
}

/* center .ui-loder */
.ui-loader-background {
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ui-loader-background .ui-loader {
	top: 50%!important;
	left: 50%!important;
	transform: perspective(1px) translateY(-50%) translateX(-50%)!important;
}

/* button-area document-top-buttons */
.button-area.document-top-buttons .btn {
	min-height: 32px;
}

/* tables */
.table .text-list {
	list-style: none;
}

.table-striped th a {
	color: inherit;
}

.table>thead>tr.panel>th, .table>tbody>tr.panel>th, .table>tfoot>tr.panel>th, .table>thead>tr.panel>td, .table>tbody>tr.panel>td, .table>tfoot>tr.panel>td {
	border: inherit;
}

/* accordions */
.panel .panel-heading[data-toggle="collapse"]>.fa.fa-fw.fa-chevron-right {
	margin-right: 4px;
	-webkit-transition-property: transform; /* Safari */
	-webkit-transition-duration: .4s; /* Safari */
	-webkittransition-timing-function: ease; /* Safari */
	transition-property: transform;
	transition-duration: .4s;
	transition-timing-function: ease;
}

/* LIGHTBOX panel */
.lightbox-panel {
	min-width: 400px;
}
.lightbox-panel .buttons-group {
	margin-top: 8px;
}
.lightbox-panel h1 {
	margin: -4px 0 0;
    font-size: 1em;
    font-weight: bold;
}
.lightbox-panel .vui-selector .vui-selector-menu {
	width: 190px;
}
.lightbox-panel .vui-selector .vui-selecting {
	overflow-y: scroll;
}
.lightbox-panel .table>tbody>tr>td {
	border: 0;
}
.lightbox-background {
	background: rgba(17, 44, 104, .4);	
}

/**
 * 3.) HEADER, SIDEBAR, FOOTER
 **/
.navbar, .navbar li a {
	-webkit-transition-property: color background; /* Safari */
	-webkit-transition-duration: .4s; /* Safari */
	-webkittransition-timing-function: ease; /* Safari */
	transition-property: color background;
	transition-duration: .4s;
	transition-timing-function: ease;
}

.navbar-brand {
	font-size: 24px;
	line-height: 22px;
}

.navbar-brand>img {
	display: none;
}

.navbar-brand>img:first-child {
	display: inline-block;
	/*vertical-align: top; */
	margin-top: -15px;
	max-height: 50px;
	width: auto;
}
/* initial CUSTOMER SETTINGS, changable in 'hcm2018-custom.css' */
.navbar-brand>img:first-child {
	margin-top: -9px;
	max-height: 38px;
	margin-right: 9px;
}

.navbar-brand>.navbar-brand-text {
	position: relative;
	font-size: 22px;
	top: -3px;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover
	{
	background-color: #eee;
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover
	{
	background-color: #1b1b1b;
}

#main-nav .btn-group {
	padding-left: 15px;
	padding-right: 15px;
}

#main-nav .navbar-right .dropdown-menu {	
	right: 15px;
}

#main-nav .navbar-right .language-selector .dropdown-menu {	
	min-width: 65px;
}

#main-nav .second-row {
	position: absolute;
	top: 52px;
	right: 0;
	left: 0;
	/*background-color: #00607B;*/
	background-color: #EC7404;
	font-size: 1.2em;
}

#main-nav .second-row .navbar-nav {
	clear: both;
	text-align: left;
}

#main-nav .second-row li a {
	background-color: rgba(0, 0, 0, 0);
	background-color: transparent;
	color: #fafafa;
	border-right: 1px solid #fafafa;
	margin: 10px 1px 10px 0;
}

#main-nav .second-row li a:hover {
	text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 25px #000;
}

#main-nav .second-row li:first-child a {
	margin-left: -15px;
}

#main-nav .second-row li:last-child a {
	border-right: 0;
	margin: 10px 0;
}

#main-nav .second-row li a span.fa {
	margin-right: .5em;
}

@media ( min-width : 768px) {
	#main-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1000;
		display: block;
		padding: 0;
		margin: 0;
		border-radius: 0;
		border-left: 0;
	}
	#main-sidebar .sidebar-container {
		position: absolute;
		top: 50px;
		bottom: 92px;
		padding: 15px 0;
		width: 100%;
		/* scrollable contents if viewport is shorter than content. */
		unicode-bidi: bidi-override;
		direction: rtl;
		overflow: auto;
		overflow-x: hidden !important;
	}
	#main-sidebar ul.sidebar-toggle {
		position: absolute;
		bottom: 32px;
	}
	#main-sidebar ul.sidebar-toggle li {
		margin: 0;
		border-radius: 0;
		border-width: 1px 0 0 0;
	}
}

#main-sidebar ul {
	text-align: left;
}

#main-sidebar ul.sidebar-toggle .fa, #main-sidebar ul li .header + .icon .fa {
	/*-webkit-transition-property: transform; /* Safari */
	/*-webkit-transition-duration: .4s; /* Safari */
	/*-webkittransition-timing-function: ease; /* Safari */
	/*transition-property: transform;*/
	/*transition-duration: .4s;*/
	/*transition-timing-function: ease;*/
}

#main-sidebar, #main-col {
	-webkit-transition-property: margin padding; /* Safari */
	-webkit-transition-duration: .4s; /* Safari */
	-webkittransition-timing-function: ease; /* Safari */
	transition-property: margin padding;
	transition-duration: .4s;
	transition-timing-function: ease;
	background-color: #fff;
}

#main-sidebar .icon {
	font-size: 14px;
}

#main-sidebar .nav>li>a>.header, #main-sidebar .nav>li>a>h3 {
	margin: 0;
	padding: 0;
	border-radius: 0;
	border-width: 0 0 1px;
	background: none;
	height: auto;
	min-height: auto;
	height: auto;
	word-break: break-all;
}

#main-sidebar .nav>li.divider {
	height: 1px;
	min-height: 1px;
	margin: 9px 0;
	overflow: hidden;
	border-radius: 0;
	border-bottom: 0;
}

#main-sidebar .tooltip {
	position: fixed;
}

@media ( min-width : 768px) {
	#main-sidebar.col-sm-offset--3 {
		margin-left: calc(-25% + 50px);
	}
}

@media ( min-width : 992px) {
	#main-sidebar.col-md-offset--2 {
		margin-left: calc(-16.66666667% + 50px);
	}
	#main-col.col-md-offset-0 {
		padding-left: 65px; /* 50px + 15px */
	}
}

#main-sidebar .nav, #main-sidebar .nav>li {
	width: 100%;
}

#main-sidebar .nav>li>a {
	padding-right: 50px;;
}

#main-sidebar .nav>li>a#sidebar-toggle {
	padding-right: 8px;
}
/* TODO: vertical align, http://jsfiddle.net/0tc6ycvo/1/ */
#main-sidebar .nav>li>a .icon {
	display: block;
	float: right;
	width: 50px;
	text-align: center;
	position: absolute;
	top: 16px;
	right: 0;
}

.footer .navbar {
	min-height: inherit;
	padding: inherit;
}

.footer .btn-link, .footer a {
	margin-top: 0;
	margin-bottom: 0;
	text-decoration: none;
}

.sys-footer {
	display: none;
}

/**
 * 4. FORMS & INPUT ELEMENTS
 */
.fields-group table td, .fields-group table th {
	vertical-align: top;
}

.fields-group>table:first-child {
	margin-bottom: 0;
}

.form-inline .checkbox, .form-inline .radio {
	vertical-align: middle;
	margin-right: 4px;
}

input[type="checkbox"] {
	display: inline-block;
	margin-top: 1px;
	vertical-align: inherit;
}

textarea.form-control {
	resize: vertical;
	/*will prevent resizing horizontally*/
	width: 100% !important;
	max-width: 100% !important;
}

.textarea-large-readonly {
	height: auto;
	min-height: 120px;
	max-height: 300px;
	padding: 4px 6px;
}

.checkboxgroup table.form-control {
	display: table;
	border-width: 0;
    box-shadow: none;
}

.checkboxgroup table.form-control td {
	padding-left: .5em;
}

.radiogroup .entry-inline {
	padding-right: 1em;
}

.view-header>.btn-toolbar {
	margin-bottom: 5px;
	margin-left: 0;
}

.view-header>.btn-toolbar>.btn, .view-header>.btn-toolbar>.btn-group,
	.view-header>.btn-toolbar>.input-group {
	margin-left: 0;
	margin-right: 5px;
}

.view-header>.btn-toolbar .pagination {
	margin: 0;
	margin-left: 5px;
}

.popup-menu .view-sorter, .vui-screen-form.view-filter {
	padding: 8px;
}

.popup-menu .view-sorter .button-area .buttons-group, .popup-menu .view-filter .button-area .buttons-group {
	margin-top: 8px;
	text-align: right;
}
/* filter (V15)*/
.handler-filter-screen .view-filter {
	display: inline-block;
	margin-bottom: 0;
	position: absolute;
    margin-top: 35px;
}

.handler-filter-screen .filter > span[class^="filter-"] {
	display: inline-block;
	vertical-align: bottom;
}

.handler-filter-screen .filter > span[class^="filter-"]:nth-child(n+2), .handler-filter-screen .filter .action-add {
	margin-left: -1px;
}

.handler-filter-screen .view-filter table tbody tr .cell-full .input-group {
	margin-top: -1px;
}

.handler-filter-screen .view-filter .action-deleteFilter {
	margin-right: -1px;
}

.handler-filter-screen .view-filter .fields-group > table {
	margin-bottom: 1em;
}

.handler-filter-screen .view-filter .document-top-buttons {
	display: none;
}

/* filter (V14)*/
.popup-menu .view-filter .filter-field label.filter-label + select.form-control {
	display: inline-block;
	width: auto;
}

.popup-menu .view-filter .fields-group .cell-full .input-group {
	margin-top: -1px;	
}

.popup-menu .view-filter .fields-group .cell-full .input-group:first-child {
	margin-top: 8px;	
}

.popup-menu .view-filter .filter>.filter-field, .popup-menu .view-filter .filter>.filter-operator,	.popup-menu .view-filter .filter>.filter-value {
	display: inline-block;
	vertical-align: bottom;
}

.popup-menu .list-sort>.sorting-item {
	display: inline-block;
	vertical-align: middle;
}

.popup-menu .list-sort>.sorting-order {
	padding: 8px 0;
	vertical-align: middle;
	text-align: right;
}

.popup-menu .list-sort>.sorting-order>.checkbox {
	margin: 4px;
}

.vui-file-upload .files td {
	vertical-align: initial;
}

.vui-file-upload .files .actions [rel~="popup-menu"] {
	display: block !important;
}

.vui-file-upload .files .actions [rel~="popup-menu"] ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vui-file-upload .files .actions .handler-actions {
	display: none;
}

.ui-datepicker .ui-state-default {
	color: #0f4078;
}

.ui-datepicker .ui-state-hover {
	border: 0;
}

/* error handling, messages */
.form-inline td.has-feedback .form-control-feedback {
	right: 32px;
	top: 8px;
}

.form-inline td.has-feedback select + .form-control-feedback {
	display: inline-block;
    position: relative;
    top: 0;
    right: 0;
}

.vui-context-message.alert {
	width: 320px!important;	
}
.vui-context-message.alert label {
	font-weight: normal;
	margin-bottom: 0;
}
.checkboxgroup.has-error table.form-control {
	border-width: 1px;	
}
.vui-context-message.vui-context-info.alert.alert-info {
	width: 268px!important;
	box-shadow: none;
}
.vui-combobox.vui-combobox-auto {
	width: 1% !important;
}

/**
 * 5. LOGIN PAGE
 **/
.root>.login-page .carousel-login .fill {
	height: 100vh;
}

.root>.login-page .carousel-login .carousel-indicators, .root>.login-page .carousel-login .carousel-control	{
	display: none;
}

.root>.login-page .login-page-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.root>.login-page .login-page-wrapper .login-page-inner.container, .login-page-wrapper .login-page-inner.container .row {
	height: 100%;
}

.root>.login-page .login-page-inner [class*=col-md-] {
	position: relative;
	top: 50%;
	transform: perspective(1px) translateY(-50%);
	text-align: center;
}

.root>.login-page .well, .root>.login-page .well a {
	color: #fff;
}

/* login panel */
.panel-login {
	display: inline-block;
	width: 66.66666666%;
	max-width: 320px;
}

.panel-login .action-login, .panel-login .action-passwordLost {
	float: right;
}

.panel-login .input-group {
	margin-bottom: 15px;
}

.panel-login li input+label {
	display: inline-block;
	font-weight: normal;
}

/**
 * 6. START PAGE (User Layout)
 **/
.root>.start-page {
	background-color: #DADADA;
}

.root>.start-page .panel {
	min-height: 320px;
}

.root>.start-page .main-content>.row>div[class^="col-"] .panel {
	margin-top: 30px;
}

.root>.start-page .panel-body .table {
	margin-bottom: 0;
	max-height:100%;
}

.root>.start-page .main-content>.row>div[class*="col-md-"]>.panel>.panel-heading {
	font-size: 1.56em;
	border-color: rgba(0, 0, 0, 0);
	padding-bottom: 0;
	color: #595959;
}

/**
 * 7. DASHBOARD (Manager Layout)
 **/
.root>.dashboard #main-col {
	background-color: #bfbfbf;
}

.root>.dashboard .page-header {
	background-color: #fff;
	margin: 0 -15px;
	padding: 10px 30px;
}

.root>.dashboard .panel {
	overflow: hidden;
}

.root>.dashboard .main-content .panel-heading {
	font-size: 1.56em;
	border-color: rgba(0, 0, 0, 0);
	padding-bottom: 0;
	color: #595959;
}

.root>.dashboard .panel-heading p {
	display: inline-block;
}

.root>.dashboard .main-content>.row div[class^="col-"]>.panel {
	margin-top: 15px;
	margin-bottom: 15px;
}

.root>.dashboard .main-content>.row div[class^="col-"]>.panel .panel-body>div {
	max-height: 100%;
	overflow: auto;
}

.root>.dashboard .main-content>.row div[class^="col-"]>.panel:nth-child(n + 2) {
	margin-top: 30px;
}

/**
 * EDIT-DOCUMENT
 */
.root>.edit-document .section>h2 {
	font-size: 1.3333333em;
}

.root>.edit-document .rich-text ul {
	padding-left: 40px;
}

.root>.edit-document .section-highlighted .section-highlighted>h2 {
	color: #333;
}

.root>.edit-document .section label, .lightbox-content label {		
	margin-top: 4px;
}

.root>.edit-document .section .panel-body > table > tbody > tr > td > span.readonly-field {
	display: inline-block;
}

.root>.edit-document .section .panel-body > table > tbody > tr > td > .readonly-field {
	margin-top: 5px;
	display: inline-block;
}

.root>.edit-document .section .radiogroup label, .root>.edit-document .section .checkboxgroup label,
	.root>.edit-document .section .creation-date strong {
	font-weight: normal;
}

.root>.edit-document .section .form-inline .form-control, .root>.edit-document .section .form-inline .input-group {
	width: 100%;
}

.root>.edit-document .section .form-inline .input-group .input-group-btn {
	width: 1%;
}

.root>.edit-document .section .form-inline select.form-control {
	width: auto;
	font-size: 1em;
}

.root>.edit-document .section .form-inline .form-control.very-short-field {
	width: 42px;
	padding: 0 6px;
}

.root>.edit-document .section .form-inline .form-control.short-field {
	width: 72px;
	padding: 0 6px;
}

.root>.edit-document .datetime-field .date-field.input-group {
	float: left;
	width: 168px;
	margin-right: 4px;
}

.root>.edit-document .datetime-field-readonly .date-field.input-group {
	width: initial;
}

.root>.edit-document .date-field.input-group .input-group-btn {
	left: -1px;
}

.root>.edit-document .datetime-field .time-field.input-group {
	float: left;
	width: inherit;
}

.root>.edit-document .datetime-field .time-field.input-group select.form-control {
	width: 44px;
    margin-left: -1px;
    padding: 0 0 0 4px;
}

.root>.edit-document .date-field {
	max-width: 210px;
}

.root>.edit-document .section .panel-body > table > tbody > tr > td > .datetime-field-readonly {
	margin-top: 0;
}

.root>.edit-document .table .cell-right {
	padding-right: 32px;
}

.root>.edit-document .vui-info-handler.fa {
	cursor: pointer;
    margin-left: 4px;
}

.root>.edit-document .creation-date strong {
	top: 4px;
    position: relative;
}

.btn-more + div {
	display: inline-block;	
}

/**
 * 9. HCM FEATURES
 **/
/* news panel */
.panel-news h4 {
	font-weight: bold;
}
.panel-news .title p {
	color: #000;
}
.panel-news p.date, .panel-news p.actor, .panel-news p.path {
	display: none;
}
.panel-news .button-area {
	text-align: right;
}
.panel-news .item-view p.description {
	display: none;
}
.panel-news img.img-left {
	float: left;
	margin-right: 1em;
}
.panel-news img.img-right {
	float: right;
	margin-left: 1em;	
}
.panel-news .view-header .btn-toolbar .btn-group-sorter, .panel-news .view-header .btn-toolbar .btn-refresh, .panel-news .view-header .btn-toolbar .popup-menu-handler.handler-sorter {
	display: none;
}
.panel-news .view-header>.btn-toolbar {
	margin-bottom: 0;
}
.panel-news .table > tbody > tr:first-child > td {
	border-top: 0;
}
.panel-news .table > tbody > tr > td {
	padding-left: 0;
	padding-right: 0;
}
 
/* HCM tabs 2.0 */
.hcm-nav-tabs, .nav-tabs {
	margin-bottom: 15px;
}
.hcm-nav-tabs>li {
	float: none;
	display: inline-block;
	margin-top: 8px;
}
.hcm-nav-tabs>li.active {
	border-bottom-color: transparent;
}
.hcm-nav-tabs>li>a {
	width: 180px;
	text-align: center;
	background: #eee;
	border: 0;
}
.hcm-nav-tabs>li>a:hover {
	border-bottom-color: transparent;
}

/* xtended search */
.root>.xtendedsearch .fields-group {
	margin-bottom: 5px;
}

.root>.xtendedsearch td {
	padding: 5px;
}

.root>.xtendedsearch .vui-section-expanded {
	border: none !important;
}

.root>.xtendedsearch .checkboxgroup td {
	padding: 0px;
}

.root>.xtendedsearch label {
	margin-top: 10px !important;
}

.root>.xtendedsearch input[type="checkbox"] {
	vertical-align: middle;
	margin-right: 5px;
}

.root>.xtendedsearch .treeNodeCollapsed {
	padding-right: 15px !important;
}

.root>.xtendedsearch .treeNodeExpanded {
	padding-right: 15px !important;
}

.root>.xtendedsearch .info1 p {
	display: none !important;
}

.root>.xtendedsearch select {
	width: 150px;
}

/**
 * 10. MISCELLANEOUS
 */
 .fill {
	width: 100%;
	height: 100%;
	min-height: 360px;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	background-repeat: no-repeat;
}
 
.panel p {
	margin: 0;	
}

.panel video {
	width: 100%;
	height: auto;
}

.modal {
  text-align: center;
  background-color: rgba(17, 44, 104, .4);
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.checkbox-div{
	display:inline !Important;
}
