@import "colors.css";

a {
    color: var(--inverse-background-color);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--inverse-font-color-highlighted);
    text-decoration: underline;
}

.icon,
.global_search-icon,
img.column-affix,
.btn img,
a img  {
    color: var(--main-icon-color-filter);
    filter: var(--main-icon-color-filter);
}

/* The color of the primary button on dialogs needs to be adjusted */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--inverse-background-color) !important;
}

.progress-bar {
    background-color: var(--inverse-background-color);
}

html[theme="default"] .progress-bar:last-child:before {
    background-color: var(--inverse-background-color-highlighted);
  }

/* The color of modal header and alert messages needs to be adjusted */
.modal-header,
html[theme="default"] .alert-info,
html[theme="default"] .btn-primary,
html[theme="default"] .btn-primary:focus,
html[theme="default"] .btn-primary:hover,
html[theme="default"] .btn-primary:active:hover {
    background-color: var(--inverse-background-color);
}

html[theme="default"] .alert-info img {
    filter: var(--inverse-icon-color-filter);
}

html[theme="default"] input[type="checkbox"]:checked:before,
html[theme="default"] .checkbox input[type="checkbox"]:checked:before,
html[theme="default"] .checkbox-inline input[type="checkbox"]:checked:before,
html[theme="default"] input[type="checkbox"]:indeterminate:before,
html[theme="default"] .checkbox input[type="checkbox"]:indeterminate:before,
html[theme="default"] .checkbox-inline input[type="checkbox"]:indeterminate:before {
    background-color: var(--inverse-background-color);
    border-color: var(--inverse-background-color);
}

/* Do not show "Tryton" in top nav bar */
#title {
	display: none;
}

/* Gobal search does not need a padding left as the "Tryton" in the top navbar is gone */
#global-search {
	padding-left: 0;
}

/* PSC cloud icons size is too big. We need to set a proper size */
#global-search img {
    width: 24px;
    height: 24px;
}

#menu {
    /* PSC wants to have a brown menu */
    background-color: var(--inverse-background-color);
    border-color: var(--inverse-background-color);
    /* We do not want to have a border radius */
    border-radius: 0;
    /* We do not want to have space between the main navigation and the menu */
    margin-top: 0;
    padding-left: 5px;
    padding-right: 7px;
}

#menu table {
    border-color: var(--inverse-background-color);
    color: white;
}

#menu .table-hover > tbody > tr:hover {
    background-color: var(--inverse-background-color);
}

#menu img,
#menu .icon {
    filter: var(--inverse-icon-color-filter);
}

/* We do not want a border radius for the top navigation tabs */
.nav-pills > li > a {
    border-radius: 0;
}

/* The avatar icon horizontal position needs to be fixed */
#user-preferences > a > img {
    margin: -9px 5px -5px 5px;
}

/* The horizontal position of the logout icon needs to be fixed */
#user-logout a {
    padding-top: 12px;
}

/* The horizontal position of the hamburger menu icon needs to be fixed */
.navbar-brand {
    padding-top: 13px;
}

.navbar-brand .icon,
#user-logout .icon,
#user-preferences img {
    filter: none;
}

/* The horizontal position of the global search needs to be fixed. */
.global-search-container {
    padding-top: 1px;
}

/* In Firefox the horizontal position of the close button of the top navigation tabs
needs to be fixed */
@-moz-document url-prefix() {
    html[theme="default"] .close {
        margin-left: 0;
        line-height: 0.31;
    }
}

.navbar-inverse {
    background-color: var(--inverse-background-color-darkend);
    /* TODO: Improve border color */
    border-color: #1a585b;
}

.navbar-inverse .close {
    color: var(--inverse-background-color-highlighted);
}

.navbar-inverse .active .close,
.navbar-inverse .active .close:hover,
.navbar-inverse .active .close:focus {
    color: #fff;
    background-color: var(--inverse-background-color);
}

/* The active navigation tab should have a border at the bottom */
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    border-width: 0 0 3px 0 !important;
	border-style: solid;
	border-radius: 0;
    border-color: var(--inverse-font-color-highlighted);
    background-color: var(--inverse-background-color);
}

/* To not break the UI inactive li need to have the same border */
.navbar-inverse .navbar-nav > li > a {
	border-width: 0 0 3px 0 !important;
	border-style: solid;
	border-radius: 0;
    border-color: transparent;
}

/* A navigation tab should change its color on hovering */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
	color: white;
	background-color: var(--inverse-background-color-hover);
	border-width: 0 0 3px 0 !important;
	border-style: solid;
	border-radius: 0;
    border-color: var(--inverse-font-color-highlighted);
}

.navbar-inverse .navbar-nav > li > a {
    color: white;
}

.navbar-inverse .navbar-brand {
	color: white;
}

/* The record counter navbar badges position needs to be improved */
.navbar-inverse .navbar-text {
    margin-top: 13px;
}

/* The tab panel should not have a margin. We want to save space */
#tabs {
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

#tablist {
    display: block;
}

#tablist button {
    margin-left: 5px;
}

.panel {
    margin-bottom: 0px;
}

.panel-default > .panel-heading {
    color: var(--main-font-color);
    background-color: var(--inverse-background-color-highlighted);
    border-color: #ddd;
}

.panel-default > .panel-heading .badge {
    color: var(--inverse-background-color);
    background-color: #fff;
}

/* The panel heading should not have a border radius */
.panel-heading {
	border-radius: 0;
}

/* Reduce size of panel heading */
.toolbar.panel-heading {
    padding: 3px 3px 2px 5px;
    background-color: var(--inverse-background-color);
}

/* As we fixed some useless paddings we need to fix the margin-right here */
.toolbar.panel-heading .navbar-right {
    margin-right: -5px;
}

html[theme="default"] .toolbar.panel-heading .btn-default:focus,
html[theme="default"] .toolbar.panel-heading .btn-default:hover,
html[theme="default"] .toolbar.panel-heading .btn-default:active:hover {
	background-color: var(--inverse-background-color);
    filter: alpha(opacity=70);
    opacity: 0.70;
}

[theme="default"] .toolbar.panel-heading .btn {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
    background-color: var(--inverse-background-color);
    color: white;
}

[theme="default"] .toolbar.panel-heading .btn img  {
    filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(110deg) brightness(10) contrast(100%);
}

/* The panel heading title should have no padding on the left */
.toolbar .container-fluid {
    padding-left: 0px;
}

.toolbar .navbar-inverse {
    background-color: var(--inverse-background-color);
    /* TODO: Improve border color */
    border-color: #1a585b;
}

#user-favorites .icon {
    filter: var(--main-icon-color-filter-darkend);
}

/* We reduce the padding of the panel body to save space */
.panel-body {
    padding-top: 5px;
    padding-left: 0;
    padding-right: 0;
}

/* Get rid of unneeded margin correction */
.row {
    margin-right: 0;
    margin-left: 0;
}

html[theme="default"] .panel-heading .btn-default:focus,
html[theme="default"] .panel-heading .btn-default:hover,
html[theme="default"] .panel-heading .btn-default:active:hover {
	background-color: var(--inverse-background-color-highlighted);
    filter: alpha(opacity=70);
    opacity: 0.70;
}

[theme="default"] .panel-heading .btn {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
    background-color: var(--inverse-background-color-highlighted);
    color: black;
}

[theme="default"] .panel-heading .btn img  {
    filter: var(--main-icon-color-filter);
}

.form label {
    margin-bottom: 2px;
}

.form-date {
    min-width: 8em;
}

.form-image_ img {
    color: var(--main-icon-color-filter);
    filter: var(--main-icon-color-filter);
}

.form-separator {
	background-color: var(--inverse-background-color-highlighted);
	padding: 2px 5px;
	margin-top: 10px;
}

.form-separator hr {
	display: none;
}

/* We want to remove the box shadow from every button in the binary widget */
html[theme="default"] .form-binary .btn {
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* We want to have two one2many fields next to each other aligned in the same pixel row */
.form .form-item {
	padding: 0px 2px 3px 0px;
}

.form .form-one2many-menu .form-one2many-string,
.form .form-many2many-menu .form-one2many-string,
.form .form-one2many-menu .form-many2many-string,
.form .form-many2many-menu .form-many2many-string {
    margin-top: 7px;
}

/* We remove unnecessary padding from the one2many content panel */
.form-one2many-content.panel-body {
    padding: 0;
}

/* We want to have the input button in front of the icon to be able to click it properly */
.icon-input input,
input[type="file"] {
    z-index: 3;
}

/* The position of the record counter badge of the one2many toolbar needs to be fixed */
[theme="default"] .form-one2many-toolbar span.btn {
    padding-top: 7px;
}

[theme="default"] .panel-heading  .btn.disabled,
[theme="default"] .panel-heading .btn[disabled],
[theme="default"] .panel-heading  .btn.disabled:hover,
[theme="default"] .panel-heading .btn[disabled]:hover,
[theme="default"] .panel-heading  .btn.disabled:active,
[theme="default"] .panel-heading .btn[disabled]:active,
[theme="default"] .panel-heading  .btn.disabled:focus,
[theme="default"] .panel-heading .btn[disabled]:focus {
  filter: alpha(opacity=20);
  opacity: 0.20;
}

/* Use a border to make the filter box better accessible visualy */
.filter-box .input-group-sm > .form-control,
.filter-box .input-group-sm > .input-group-addon,
.filter-box .input-group-sm > .input-group-btn > .btn {
	border-radius: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--inverse-border-color);
    -webkit-box-shadow: none;
    box-shadow: none;
    /* Fix position of icons in filter box */
    line-height: 1;
}

/* The next/previous buttons of the filter box row need a slightly different css */
.filter-box .btn-group .btn {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--inverse-border-color);
    padding: 5px 10px 6px 10px;
    line-height: 1;
}

/* We removed some unnecessary padding from other selectors but now we need some padding here */
.filter-box {
    padding-left: 5px;
}

.filter-box .input-group-sm > .input-group-btn:first-child > .btn:first-child {
	border-radius: 5px 0px 0px 5px;
}

.filter-box .input-group-sm > .input-group-btn:last-child > .btn:last-child {
	border-radius: 0px 5px 5px 0px;
}

/* Reduce padding around content to save space */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	padding-right: 5px;
	padding-left: 0px;
}

td.selection-state {
    padding: 2px !important;
}

th label {
    color: #595959;
    font-size: 13px;
}

html[theme="default"] select:focus,
html[theme="default"] select.form-control:focus {
    -webkit-box-shadow: inset 0 -2px 0 var(--inverse-font-color-highlighted);
    box-shadow: inset 0 -2px 0 var(--inverse-font-color-highlighted);
}

@media screen and (max-height: 750px) {
    /* The tab form navigation is to small in some cases */
    .tab-form .navbar-header > ul, .tab-board .navbar-header > ul {
	    min-width: 420px;
    }
}

#processing {
    top: 15px;
}

#processing .label-info {
	background-color: var(--inverse-background-color-highlighted);
    color: var(--main-font-color-darkened);
}

#processing .label {
	font-size: 90%;
}

.modal-header {
    background-color: var(--inverse-background-color);
}

.modal-body .panel-heading {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 5px 10px;
}

.modal-body .row .col-md-2 {
    padding: 0 10px;
}

.modal-body .panel-body {
    padding-left: 5px;
}

.modal-body .btn {
    white-space: normal;
}

/* We want to have ending symbol of monetary field aligned left to the number */
.input-group-addon.symbol.symbol-end {
    width: 100%;
    text-align: left;
}

/* Use a border to make the filter box better accessible visualy */
.modal-body .input-group-sm > .form-control,
.modal-body .input-group-sm > .input-group-addon,
.modal-body .input-group-sm > .input-group-btn > .btn {
	border-radius: 0px;
    border-style: none;
    border-width: 1px;
    border-color: var(--inverse-border-color);
    /* Fix position of icons in filter box */
    line-height: 1;
}

html[theme="default"] input[type="radio"]:checked::after,
html[theme="default"] .radio input[type="radio"]:checked::after,
html[theme="default"] .radio-inline input[type="radio"]:checked::after {
	border-color: var(--inverse-background-color);
}

html[theme="default"] input[type="radio"]::before, html[theme="default"] .radio input[type="radio"]::before, html[theme="default"] .radio-inline input[type="radio"]::before {
	background-color: var(--inverse-background-color);
}

.infobar {
    top: auto;
    bottom: 30px;
}

/* NAV-TABS */

.form .nav-tabs {
    margin-bottom: 3px;
}

.form-notebook {
    padding-left: -5px;
}

.form-notebook .nav-tabs {
	background-color: var(--inverse-background-color-highlighted);
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs a {
	font-weight: bold;
	border-width: 0 0 3px 0 !important;
	border-style: solid;
	border-radius: 0;
}

html[theme="default"] .nav-tabs > li > a:hover,
html[theme="default"] .nav-tabs > li > a:focus:hover {
    -webkit-box-shadow: inset 0 -4px 0 var(--inverse-font-color-highlighted);
    box-shadow: inset 0 -4px 0 var(--inverse-font-color-highlighted);
    color: black;
    border-radius: 0;
}

html[theme="default"] .nav-tabs > li.active > a,
html[theme="default"] .nav-tabs > li.active > a:focus {
    border: none;
    -webkit-box-shadow: inset 0 -4px 0 var(--inverse-font-color-highlighted);
    box-shadow: inset 0 -4px 0 var(--inverse-font-color-highlighted);
    color: var(--main-font-color);
    border-radius: 0;
}

html[theme="default"] .nav-tabs > li > a,
html[theme="default"] .nav-tabs > li > a:focus {
    -webkit-box-shadow: inset 0 -1px 0 var(--inverse-background-color-highlighted);
    box-shadow: inset 0 -1px 0 var(--inverse-background-color-highlighted);
    color: var(--main-font-color);
}

html[theme="default"] .nav-tabs > li.active > a:hover,
html[theme="default"] .nav-tabs > li.active > a:focus:hover {
    -webkit-box-shadow: inset 0 -4px 0 var(--inverse-font-color-highlighted);
    box-shadow: inset 0 -4px 0 var(--inverse-font-color-highlighted);
    color: var(--main-font-color);
}


/* TAB DOMAIN */

.tab-domain .nav-tabs > li > a {
    color: var(--main-font-color) !important;
    height: 100%;
}

/* FIELDS */

html[theme="default"] textarea:focus,
html[theme="default"] textarea.form-control:focus,
html[theme="default"] input.form-control:focus,
html[theme="default"] input[type=text]:focus,
html[theme="default"] input[type=password]:focus,
html[theme="default"] input[type=email]:focus,
html[theme="default"] input[type=number]:focus,
html[theme="default"] [type=text].form-control:focus,
html[theme="default"] [type=password].form-control:focus,
html[theme="default"] [type=email].form-control:focus,
html[theme="default"] [type=tel].form-control:focus,
html[theme="default"] [contenteditable].form-control:focus {
    -webkit-box-shadow: inset 0 -2px 0 var(--inverse-font-color-highlighted);
    box-shadow: inset 0 -2px 0 var(--inverse-font-color-highlighted);
}

.form .form-text > textarea, .form .form-richtext > textarea, .form .form-text .richtext, .form .form-richtext .richtext {
    height: 50ex;
}

/* TABLE */

.table {
    margin-bottom: 10px;
}

/* We want checkboxes in list views shown completely. Therefor we need to reduce the padding */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
	padding: 4px;
}

.table > thead > tr > td.selected,
.table > tbody > tr > td.selected,
.table > tfoot > tr > td.selected,
.table > thead > tr > th.selected,
.table > tbody > tr > th.selected,
.table > tfoot > tr > th.selected,
.table > thead > tr.selected > td,
.table > tbody > tr.selected > td,
.table > tfoot > tr.selected > td,
.table > thead > tr.selected > th,
.table > tbody > tr.selected > th,
.table > tfoot > tr.selected > th {
  background-color: var(--inverse-background-color-highlighted);
  padding: 4px;
}
.table-hover > tbody > tr > td.selected:hover,
.table-hover > tbody > tr > th.selected:hover,
.table-hover > tbody > tr.selected:hover > td,
.table-hover > tbody > tr:hover > .selected,
.table-hover > tbody > tr.selected:hover > th {
  background-color: var(--inverse-font-color-highlighted);
}

td img {
  filter: var(--main-icon-color-filter);
}

td .widget input[type="radio"],
td .widget input[type="checkbox"] {
    margin-top: 1px;
}

/* We remove doubled padding from table heading label */
th label {
    padding: 0 !important;
}

/* We want a better vertical alignment of labels for the checkboxes
of the optional fields tree menu */
th.tree-menu [role=menuitem] input[type=checkbox] {
    vertical-align: text-bottom;
}

/* We do not want a filter on the avatar image */
table .prefix img.column-affix {
    filter: none;
}

/* We do not want a filter on thumnails (binary widget in tree view) */
table .widget img.column-image {
    filter: none;
}

/* We want to reduce the size of the main menu on bigger screens */
@media (min-width: 1200px) {
    .row-offcanvas-right .sidebar-offcanvas {
        right: -18%;
    }
    .row-offcanvas-left .sidebar-offcanvas {
        left: -18%;
    }
    .row-offcanvas-right.active {
        right: 18%;
    }
    .row-offcanvas-left.active {
        left: 18%;
    }
    .sidebar-offcanvas {
        width: 18%;
    }
    .col-lg-9 {
        width: 82%;
    }
    .col-lg-3 {
        width: 18%;
    }
}

@media (min-width: 2500px) {
    .row-offcanvas-right .sidebar-offcanvas {
        right: -15%;
    }
    .row-offcanvas-left .sidebar-offcanvas {
        left: -15%;
    }
    .row-offcanvas-right.active {
        right: 15%;
    }
    .row-offcanvas-left.active {
        left: 15%;
    }
    .sidebar-offcanvas {
        width: 15%;
    }
    .col-lg-9 {
        width: 85%;
    }
    .col-lg-3 {
        width: 15%;
    }
}