h2 {
    font-size: 22px;
}

.navbar-pf .navbar-primary > li > a {
    margin-top: 0;
}

/******************* Blue layout, "a la mattermost" ***********************/
body {
    font-family: "Trebuchet MS", "Open Sans", Helvetica, Arial, sans-serif;
    background-color: #f9fafe !important;
}

.navbar-pf-vertical {
    background-color: #f9fafd;
    border-top: 2px solid #1f4e79;
    border-bottom: 1px solid #1f4e79;
}

.navbar-header-left {
    background-color: #f9fafd;
    width: 200px;
}

.nav-pf-vertical-with-sub-menus {
    top: 66px;
}

.navbar-pf-vertical .navbar-toggle {
    margin: 13px 6px;
}

.navbar-pf-vertical .navbar-logo {
    float: left;
    width: 50px;
    margin: 10px 10px 10px 5px;
}

.navbar-header .navbar-form.navbar-right {
    padding-left: 10px;
}

.nav-pf-vertical {
    background-color: #1f4e79;
}

.navbar-pf-vertical .navbar-brand, .navbar-pf-vertical .nav .nav-item-iconic .caret {
    color: #1f4e79 !important;
}

.nav-pf-vertical .list-group-item > a .fa, .nav-pf-vertical .list-group-item > a .glyphicon, .nav-pf-vertical .list-group-item .list-group-item-value {
    color: white;
}

.navbar-pf-vertical .list-group-item .fa, .navbar-pf-vertical .nav .nav-item-iconic .fa {
    color: #1f4e79 !important;
}

.navbar-pf-vertical .list-group-item:hover .fa, .navbar-pf-vertical .nav .nav-item-iconic:hover .fa {
    color: #2f81b7 !important;
}

.navbar-pf-vertical .navbar-toggle .icon-bar {
    background-color: #1f4e79;
}

.nav-pf-vertical .list-group-item {
    border-width: 0;
}

.nav-pf-vertical .list-group-item:hover > a {
    background-color: #136197;
    color: #fff;
}

.nav-pf-vertical .list-group-item.active > a, .nav-pf-vertical .list-group-item.active .fa, .nav-pf-vertical .list-group-item.active .list-group-item-value, .nav-pf-vertical .list-group-item.active > a .glyphicon {
    color: #1f4e79 !important;
    background-color: white;
}

.navbar-brand h2 {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.nav-pf-vertical .list-group-item > a {
    padding-left: 15px;
}

.nav-pf-vertical .list-group-item.active > a::before { /* remove the left blue line marker */
    width: 0;
}

.dropdown-menu .glyphicon {
    color: #555;
    font-size: 110%;
    margin-right: 8px;
}

.dropdown-menu li.active .glyphicon {
    color: white;
}

.badge-sla-total {
    background-color: #4ca5dc;
}

a {
    color: #1f4e79;
}

a:hover {
    color: #2f81b7;
}

.btn-primary {
    background-color: #1f4e79;
    background-image: none;
    filter: none;
    box-shadow: none;
}

.btn-primary:hover {
    background-color: #2f81b7;
    background-image: none;
    filter: none;
}

.btn-default {
    background-color: #f1f1f1;
    background-image: none;
    filter: none;
    box-shadow: none;
}

.btn-default:hover {
    background-color: #f9f9f9;
}

.table.table-with-hover tbody tr:hover {
    background-color: #F4F4F4;
}

.highlight-block {
    padding: 10px;
    background-color: white;
}

.multiline-row-with-space > div {
    padding-bottom: 15px;
}

/******************* Accordeons *******************/
.panel-group .panel-heading {
    background-image: none;
    background-color: #f5f5f5 !important;
}

.list-view-pf .list-group-item.list-view-pf-expand-active:first-child, .list-view-pf .list-group-item.list-view-pf-expand-active {
    border-color: #DDD;
}

.list-group-item-container {
    border-top-color: #DDD;
}

.list-view-pf.list-view-pf-highlight-header .list-group-item.list-view-pf-expand-active .list-group-item-header {
    background-color: #1f4e79;
    color: white;
}

/******************* Tables ***********************/
.table {
    background-color: white;
}

.table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > th {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.table > thead {
    background-color: white;
    background-image: none;
    filter: none;
}

.table > thead > tr > th, .table > thead > tr > td {
    border-bottom: 1px solid #d1d1d1;
    vertical-align: bottom;
}

.table > tbody > tr > td {
    border-top: none;
}

.table > tbody > tr:hover {
    background-color: #FAFAFA;
}

/********************  Same height *********************/
.row.same-height {
    display: flex;
}

.row.same-height .panel {
    height: 100%;
    margin-bottom: 0px;
}

/******************* Softer panels ***********************/
.panel-default {
    box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.panel-default {
    border: 0px solid #EEE;
}

.panel-default, .panel-default .panel-heading, .panel-default .panel-body {
    background-color: #f9fafd;
}

.panel-default .panel-heading {
    padding: 10px 15px 0 15px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: 0px;
}

.panel .panel-heading h3 {
    font-size: 15px;
}

.panel-body .dl-horizontal-section {
    background-color: white;
    border-radius: 5px;
}

.panel-group .panel-default .panel-heading {
    padding: 10px 15px;
}

/******************* Wizard ***********************/
.step {
    padding: 5px 15px 15px 15px;
    background-color: #f9fafd;
    box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    margin-bottom: 10px;
}

.step > h4 {
    margin: 0 0 5px 0;
}

.step.collapsed {
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
}

.step.collapsed > div {
    display: none !important;
}

.step.collapsed > h4 > .caret {
    float: right;
    position: relative;
    left: -20px;
    top: 8px;
}

.step.collapsed > h4 > .step-collapsed-resume {
    font-weight: normal;
    color: #666;
}

.step.open > h4 > .caret, .step.open > h4 > .step-collapsed-resume {
    display: none;
}

/******************* Left pane for portefeuille ***********************/
.nav-pane-contrat {
    text-align: center;
    color: white;
    padding-top: 30px;
}

.nav-pane-contrat .iconeAdherent {
    display: inline-block;
    color: #2f81b7;
    background-color: #FCFCFC;
    font-size: 30px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    padding-top: 6px;
}

.nav-pane-contrat .numeroContrat {
    font-weight: bold;
    font-size: 18px;
    margin: 20px 0 0px 0;
}

.nav-pane-contrat .titleContrat {
    font-weight: bold;
    font-size: 14px;
    margin: 20px 0 0 0;
}

.nav-pane-contrat .etatContrat {
    margin-top: 20px;
    font-size: 18px;
}

.nav-pane-contrat .etatContrat .etatContratTitle {
    display: block;
    font-size: 12px;
    line-height: 12px;
}

/**************************   Portefeuille Salarie ******************************/
.scrollable-table-pane {
    padding: 5px;
    height: 250px;
    overflow-y: scroll;
}

#table-salaries tbody tr:hover {
    cursor: pointer;
    background-color: #F4F4F4;
}

#table-salaries tbody tr.highlight {
    background-color: #edf9fc;
}

#detailSalariePane {
    margin-top: 20px;
    border: 1px solid #EEE;
    padding: 10px;
}

/**************************   Control Panel ******************************/
#controlPanelPage .chart-container {
    background-color: #f8f8f8;
    border: 1px solid rgb(222, 222, 222);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

#controlPanelPage .control-panel-filter-container {
    margin-bottom: 10px;
}

#controlPanelPage .control-panel-filter-container .btn.active {
    background-color: #1f4e79;
    color: white;
}

#controlPanelPage .control-panel-value {
    font-weight: bold;
    font-size: 30px;
    color: #666666;
}

#controlPanelPage .control-panel-add-chart {
    padding: 20px 10px;
    text-align: center;
}

#controlPanelPage .control-panel-add-chart a {
    color: #666;
    font-size: 20px;
    text-decoration: none;
}

#controlPanelPage .control-panel-add-chart a:hover {
    color: #333;
}

#controlPanelPage .control-panel-add-chart .glyphicon {
    border: 2px solid #666;
    border-radius: 25px;
    padding: 10px;
}

/******************    Taskcenter **************************/
.taskcenter-pieces ul {
    list-style: none;
    padding-left: 0;
}

.taskcenter-pieces > ul > li {
    margin-top: 8px;
}

.demo-disabled {
    pointer-events: none;
}

.alert.alert-danger.alert-incident {
    text-align: center;
    padding: 2px 10px;
    background-color: #FFCCCC;
    border: 1px solid #DE9C97;
}