/**
 * ERDF theme.
 *
 * @application erdfga-dev (#701), erdfgda-qa (#702), erdfgda-prod (#703)
 * @author Bruno Buiret <bruno.b@apps-panel.com>
 */

/* Fonts */
@font-face {
    font-family: 'RobotoRegular';
    src: url("/fonts/roboto-regular-webfont.eot");
    src: url("/fonts/roboto-regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("/fonts/roboto-regular-webfont.woff") format("woff"),
    url("/fonts/roboto-regular-webfont.ttf") format("truetype"),
    url("/fonts/roboto-regular-webfont.svg#robotoregular") format("svg");
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RobotoBold';
    src: url("/fonts/roboto-bold.eot");
    src: url("/fonts/roboto-bold.eot") format("embedded-opentype"),
    url("/fonts/roboto-bold.woff") format("woff"),
    url("/fonts/roboto-bold.ttf") format("truetype"),
    url("/fonts/roboto-bold.svg#RobotoBold") format("svg");
}

/* */
body {
    background-color: #fff;
    color: #363442;
    font-family: RobotoRegular, Helvetica, sans-serif;
}

h1 {
    margin-top: 0;
}

a {
    color: #444;
}

a:hover {
    color: #b0b0b0;
}

input[type=submit] {
    font-weight: bold;
    color: #ffffff;
    background-color: #a6a6a6;
}

/*
input[type=text] {
    margin-bottom: 2px;
    border: 1px solid gainsboro;
    background-color: white;
    color: #444444;
}

input[type=text]:focus {
    border: 1px solid grey;
}
*/

textarea {
    padding: 2px 6px;
    background-color: #ffffff;
    height: auto;
    font-family: RobotoRegular, Helvetica, sans-serif;
    font-size: 14px;
}

/* Container */
#container {
    overflow-x: auto;
}

/* Header */
#header {
    min-height: initial;
    border-bottom: 1px solid #e5e4e3;
}

#header figure a {
    display: block;
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: center;
}

#header figure a img {
    max-width: 100%;
    height: auto;
}

#header #userinfo {
    margin-bottom: 0;
}

#header #userinfo .welcome {
    color: #5b5b5b;
}

#header #userinfo .profile .links {
    padding: 5px 0;
    float: none;
    color: grey;
}

#header a {
    color: #5b5b5b;
}

#header #widget-header-sober {
    margin-top: initial;
}

@media (min-width: 992px) {
    .responsive-header {
        margin-top: 24px;
    }
}

@media (max-width: 992px) {
    .responsive-header {
        margin-bottom: 10px;
    }
}

#header #widget-header-sober .title {
    color: #5b5b5b;
}

#header #widget-header-sober .perc {
    font-size: 24px;
    color: #0069B3;
    font-weight: bold;
}

#header a.tipsy-header:not(.icon) {
    color: #d0d733 !important;
}

#header #general-options .users {
    display: none;
    background-image: url("/img/header-users-erdf.png");
}

#header #general-options .settings {
    display: none;
    background-image: url("/img/header-settings-erdf.png");
}

#header .alert.alert-erdf {
    margin-top: 9px;
    margin-bottom: 10px;
}

/* Sidebar */
#sidebar {
    display: block;
    padding: 0 !important;
    width: auto !important;
    background-color: #ffffff;
}

#sidebar h2 {
    position: relative;
    margin: 0;
    padding: 15px;
    height: 50px;
    background-color: #cce821;
    color: #ffffff;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

#sidebar h3 {
    margin: 0;
    padding: 15px;
    height: 50px;
    background-color: #0052a1;
    color: #ffffff;
    line-height: 20px;
    font-weight: normal;
    font-size: 18px !important;
}

#sidebar .blocks-separator {
    margin: 10px 0;
}

#sidebar ul.nav {
    margin: 0;
}

#sidebar ul.nav li {
    padding: 0;
    font-size: 14px;
    font-weight: normal;
}

#sidebar ul.nav li:not(:last-child) {
    border-bottom: 1px solid #d6e5f3;
}

#sidebar ul.nav li a {
    padding: 15px !important;
    height: 50px;
    color: #0052a1 !important;
}

#sidebar ul.nav li a:hover {
    background-color: #cce821;
    color: white !important;
}

#sidebar ul.nav li.has-menu a {
    padding: 15px !important;
    cursor: pointer;
}

#sidebar ul.nav li a span.plus {
    width: auto;
    height: auto;
}

#sidebar ul.nav li ul.submenu {
    display: block;
    padding-bottom: 0 !important;
}

#sidebar ul.nav a.submenuselected {
    margin-bottom: 0;
    border-bottom: 1px solid #d6e5f3;
    background-color: #cce821;
    color: #ffffff !important;
}

#sidebar ul.nav ul.submenu li {
    margin-bottom: 0 !important;
}

#sidebar ul.nav ul.submenu li a {
    padding: 15px 15px 15px 25px !important;
    font-size: 14px !important;
}

#sidebar ul.nav li.selected a {
    background-color: #cce821 !important;
    color: #ffffff !important;
}

#sidebar ul.nav ul.submenu li a:hover {
    background-color: #cce821;
}

#sidebar ul.nav .submenu > li.selected {
    background-color: #cce821 !important;
}

/* Sidebar animation */
#sidebar a#toggle-menu {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 10;
    width: 40px;
    height: 30px;
    color: white;
    font-size: 21px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    cursor: pointer;
}

#sidebar a#toggle-menu:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

#sidebar a#toggle-menu div.x,
#sidebar a#toggle-menu div.y,
#sidebar a#toggle-menu div.z {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 3px;
    width: 26px;
    background: #ffffff;
    border-radius: 2px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

#sidebar a#toggle-menu div.x {
    top: 6px;
}

#sidebar a#toggle-menu div.y {
    top: 14px;
}

#sidebar a#toggle-menu div.z {
    top: 22px;
}

#sidebar a#toggle-menu.open div.x,
#sidebar a#toggle-menu.open div.z {
    top: 14px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.rotate-30 {
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.rotate-150 {
    -ms-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

div.rotate-45 {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

div.rotate-135 {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

#sidebar-wrapper.closed {
    float: left;
    width: 50px;
    height: 50px;
}

#sidebar-wrapper.closed #toggle-menu {
    left: 5px;
    right: 5px;
}

#sidebar-wrapper.closed #sidebar-main {
    display: none;
}

#sidebar-wrapper.closed .open-only {
    display: none;
}

#playground-wrapper.full {
    width: calc(100% - 50px);
}

/* Contents */
#main {
    margin-top: 15px;
    font-family: Calibri, RobotoRegular, Helvetica, Arial, sans-serif;
}

#playground {
    display: block;
    padding: 0 !important;
    font-size: 14px;
}

#playground-wrapper.full #playground {
    padding-top: 15px;
}

#playground .widget {
    background: url("/img/pg-w-bg-light.png") no-repeat center center;
}

#playground .widget label {
    color: #121212;
}

#playground .widget span {
    color: #121212;
}

#playground h1, .modal h1 {
    color: #0052a1;
    line-height: 50px;
}

#playground h2 {
    color: #0052a1;
}

/* Footer */
#footer {

}

#footer .copyright {

}

/* Datepicker */
div.datepicker a {
    color: #444;
}

div.datepicker .datepickerNotInMonth a {
    color: #bbb;
}

div.datepicker th {
    color: #444;
}

tbody.datepickerDays td.datepickerSelected {
    background: #5FAFFF;
}

.datepickerBorderT, .datepickerBorderB,
.datepickerBorderL, .datepickerBorderR,
.datepickerBorderTL, .datepickerBorderTR,
.datepickerBorderBL, .datepickerBorder {
    background: 0;
    width: 0;
    height: 0;
}

.datepickerContainer {
    top: 0;
    left: 0;
}

/* Login page */
#login-container-blanche {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #005eb8;
}

#login_form {
    background: #005eb8;
}

#login_wrapper,
#login_wrapper a,
#login_footer-blanche .copyright {
    color: #ffffff;
}

#login_wrapper #logo {
    width: 332px;
    height: 262px;
    background-image: url("/img/erdf/logo-enedis.png");
}

#login_wrapper .loginbutton input {
    background: #0c94d2;
}

#login_wrapper .icon.awesome.for-input {
    color: #0052a1;
}

#login_wrapper a {
    color: #ffffff;
}

#login_wrapper .button.blue {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #0052a1;
}

#login_wrapper .button.blue:active,
#login_wrapper .button.blue:focus {
    color: #ffffff;
}

#login_wrapper input[type="text"],
#login_wrapper input[type="password"] {
    border: none;
    color: #5b5b5b;
}

#login_header-blanche {
    display: none;
}

#login_footer-blanche {
    position: static;
    height: auto;
}

#login_footer-blanche .cpylogin {
    bottom: 5px;
    z-index: 2;
}

#login_footer-blanche .copyright {
    background-color: inherit;
}

#login_footer-blanche .copyright::after {
    content: " - L'utilisation du navigateur Mozilla Firefox est nécessaire pour le bon fonctionnement de l'interface web.";
}

/* Helper classes */
.bg-grey-1 {
    background-color: #5b5b5b;
}

.bg-grey-2 {
    background-color: #e5e4e3;
}

.bg-grey-3 {
    background-color: #f2f2f2;
}

.thumb {
    width: auto;
    max-height: 100px;
}

.thumb.small {
    max-height: 50px;
}

.text-bold {
    font-weight: bold;
}

.text-italic {
    font-style: italic;
}

.scrollable-x {
    overflow-x: auto;
}

/* Custom classes */
.xs-vertical-spacer {
    height: 10px;
}

.md-vertical-spacer {
    height: 40px;
}

.btn-edit,
.btn-delete {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.btn-edit:hover,
.btn-delete:hover {
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

/* Bootstrap */
@media (min-width: 992px) {
    .text-right-md {
        text-align: right;
    }
}

.pagination {
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.pagination li {
    display: inline;
    padding: 0;
}

.pagination li a,
.pagination li a:visited {
    color: #0052a1;
}

.pagination li a:hover {
    text-decoration: none;
}

.pagination li.active a {
    background-color: #0052a1;
    border-color: #0052a1;
    color: #ffffff;
    cursor: pointer;
}

.pagination li span {
    color: #5b5b5b;
}

.pagination li span:focus,
.pagination li span:hover {
    background-color: initial;
}

.pagination li.disabled a {
    color: #5b5b5b;
}

.nav.nav-tabs li {
    padding: 0;
}

.tab-content .tab-pane {
    padding: 10px;
    border: 1px solid #ddd;
    border-top: none;
}

.tab-content .tab-pane h2 {
    margin-top: 0;
}

.input-group .form-control ~ .input-group-addon {
    border-left: none;
}

ul.dropdown-menu li {
    padding: 0;
}

ul.dropdown-menu li a {
    padding: 5px 20px;
}

.xs-left-gutter {
    padding-left: 1px;
}

.xs-right-gutter {
    padding-right: 1px;
}

.sm-left-gutter {
    padding-left: 5px;
}

.sm-right-gutter {
    padding-right: 5px;
}

.no-gutter {
    padding: 0;
}

.btn {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-transform: uppercase;
}

.btn-icon-only {
    padding: 2px;
}

.btn-red {
    border-color: #e03e52;
    background-color: #e03e52;
}

.btn-dark-blue {
    border-color: #0052a1;
    background-color: #0052a1;
}

.btn-orange {
    border-color: #f4a460;
    background-color: #f4a460;
}

.btn-grey {
    border-color: #c6c5c4;
    background-color: #c6c5c4;
}

.btn-light-green {
    border-color: #cce821;
    background-color: #cce821;
}

.btn-green {
    border-color: #48a23f;
    background-color: #48a23f;
}

.btn-red, .btn-red:hover, .btn-red:focus,
.btn-dark-blue, .btn-dark-blue:hover, .btn-dark-blue:focus,
.btn-orange, .btn-orange:hover, .btn-orange:focus,
.btn-grey, .btn-grey:hover, .btn-grey:focus,
.btn-light-green, .btn-light-green:hover, .btn-light-green:focus {
    color: #ffffff;
}

.input-text {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

form.form-horizontal .chosen-container .chosen-choices {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

form.form-horizontal .chosen-container .chosen-choices input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

form.form-horizontal .chosen-container .chosen-choices input::-moz-placeholder {
    color: #999;
    opacity: 1;
}

form.form-horizontal .chosen-container .chosen-choices input:-ms-input-placeholder {
    color: #999;
}

form.form-horizontal .chosen-container .chosen-choices input::-webkit-input-placeholder {
    color: #999;
}

form.form-horizontal .chosen-container .chosen-choices input::-ms-expand {
    background-color: transparent;
    border: 0;
}

form.form-horizontal .chosen-container .chosen-choices input[disabled],
form.form-horizontal .chosen-container .chosen-choices input[readonly] {
    background-color: #eee;
    opacity: 1;
}

form.form-horizontal .chosen-container .chosen-choices input[disabled] {
    cursor: not-allowed;
}

form.form-horizontal .chosen-container.chosen-with-drop .chosen-choices {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

    /* */
.alert-erdf {
    padding: 10px;
    border-color: #e5e4e3;
    background-color: #ffffff;
    color: #5b5b5b;
    font-size: 24px;
    text-align: center;
}

.alert-erdf strong {
    color: #005eb8;
    font-weight: bold;
    font-size: 26px;
}

.table-erdf th,
.table-erdf td {
    text-align: center;
    vertical-align: middle !important;
}

.table-erdf thead {
    background-color: #0052a1;
    color: #ffffff;
}

.table-erdf thead th[rowspan="2"] ~ th:not([rowspan="2"]),
.table-erdf thead td[rowspan="2"] ~ td:not([rowspan="2"]) {
    border-bottom-width: 1px;
}

.table-erdf thead th,
.table-erdf thead td {
    border-color: #296eb0 !important;
}

.table-erdf tbody th,
.table-erdf tbody td {
    border-color: #e5e4e3 !important;
    vertical-align: middle !important;
    color: #5B5B5B;
}

.table-dashboard th, 
.table-dashboard td {
    vertical-align: middle !important;
    text-align: center;
}

.table-dashboard thead th,
.table-dashboard thead td {
    height: 45px;
    border-color: #c1c0bf !important;
    background-color: #e5e4e3;
    color: #5b5b5b;
    font-size: 12pt;
    font-weight: bold;
}

.table-dashboard thead tr.smaller th,
.table-dashboard thead tr.smaller td {
    font-size: 9pt;
}

.table-dashboard tbody td {
    color: #5b5b5b;
    font-size: 10pt;
}

.table-dashboard tbody tr.selected td {
    font-weight: bold;
}

.table-dashboard tbody tr.action-needed td {
    color: #f4a460;
}

.table-dashboard tbody tr.action-needed.selected td {
    background-color:  #f4a460;
    color: #ffffff;
}

.table-dashboard tbody tr.being-accessed td {
    color: #e03e52;
}

.table-dashboard tbody tr.being-accessed.selected td {
    background-color:  #e03e52;
    color: #ffffff;
}

.table-dashboard tbody tr.currently td {
    color: #48a23f;
}

.table-dashboard tbody tr.currently.selected td {
    background-color: #48a23f;
    color: #ffffff;
}

.table-dashboard tbody tr.event-happened td {
    color: #00a3e0;
}

.table-dashboard tbody tr.waiting td {
    color: #48a23f;
}

.table-dashboard tbody tr.waiting.selected td {
    background-color:#48a23f;
    color: #ffffff;
}

.table-dashboard tbody tr.finished td {
    background-color: #f8f7f6;
    color: #aaaaaa;
}

.table-dashboard tbody tr.unselectable td {
    font-size: 12pt;
}

#dashboard-sort-menu {
    cursor: pointer;
}

#dashboard-sort-menu:hover {
    text-decoration: none;
}

#dashboard-sort-menu + .dropdown-menu {
    right: -7px;
}

#dashboard-interventions-list .button-emergency {
    margin-right: 5px;
    padding: 0 10px;
    height: 28px;
    border: 1px solid #ffffff;
    color: #ffffff;
    line-height: 28px;
    font-size: 14px;
    text-transform: none;
}

#dashboard-interventions-list .button-emergency.disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

#dashboard-interventions-list .table-dashboard td {
    padding: 0;
}

#dashboard-interventions-list .table-dashboard label {
    display: block;
    margin-bottom: 0;
    padding: 8px;
}

#dashboard-interventions-list .table-dashboard tr:not(.selected) label {
    font-weight: normal;
}

#dashboard-details-contents {
    border: 1px solid  #e5e4e3;
    border-top-width: 0;
}

#dashboard-details-contents:not(.has-details) {
    background: #f2f2f2;
}

#dashboard-details-contents .table-dashboard,
#dashboard-details-contents .table-dashboard tr th:first-of-type,
#dashboard-details-contents .table-dashboard tr td:first-of-type {
    border-left: none;
}

#dashboard-details-contents .table-dashboard,
#dashboard-details-contents .table-dashboard tr th:last-of-type,
#dashboard-details-contents .table-dashboard tr td:last-of-type {
    border-right: none;
}

#dashboard-delivery label {
    margin-bottom: 0;
    height: 40px;
    line-height: 40px;
    font-weight: normal;
    text-transform: uppercase;
}

#playground-wrapper.full #dashboard-delivery label {
    height: 80px;
    line-height: 80px;
}

#dashboard-delivery > .grid-stack-item:not(#dashboard-ring-numbers) {
    border-right: 1px solid #e5e4e3;
}

#dashboard-delivery > .grid-stack-item:not(#dashboard-ring-numbers):first-child {
    border-bottom: 1px solid #e5e4e3;
}

#dashboard-delivery > .grid-stack-item:not(#dashboard-ring-numbers):first-child .grid-stack-item-content {
    margin-top: -1px;
}

#playground-wrapper.full #dashboard-delivery > .grid-stack-item:not(#dashboard-ring-numbers):first-child {
    border-bottom: none;
}

#playground-wrapper.full #dashboard-delivery > .grid-stack-item:not(#dashboard-ring-numbers):first-child .grid-stack-item-content {
    margin-top: 0;
}

.modal h4.modal-title {
    color: #5b5b5b;
    font-size: 18px;
}

.modal .modal-footer div.text-danger {
    line-height: 34px;
}

.form-group textarea {
    resize: vertical;
}

#dialog-form .modal-body .form-group.has-error {
    margin-bottom: 0;
}

#dialog-import table th, td {
    text-align: center;
}

#dialog-import table td {
    color: #5b5b5b;
}

.dashboard-medias {
    margin: 10px 0;
}

.dashboard-medias .media-item {
    display: inline-block;
    width: auto;
    max-height: 50px;
    border: 1px solid #e5e4e3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    vertical-align: middle;
}

p.vertically-align {
    position: relative;
    margin-bottom: 0;
    height: 100%;
}

p.vertically-align > span {
    display: inline-block;
    width: 100%;
    position: absolute;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Timeline */
.timeline-wrapper {
    height: 150px;
}

.timeline {
    position: relative;
    top: 50%;
}

.timeline.five-points {
    width: 80%;
    left: 10%;
}

.timeline.five-points .timeline-point:nth-of-type(1) {
    left: -1px;
}

.timeline.five-points .timeline-point:nth-of-type(2) {
    left: 25%;
}

.timeline.five-points .timeline-point:nth-of-type(3) {
    left: 50%;
}

.timeline.five-points .timeline-point:nth-of-type(4) {
    left: 75%;
}

.timeline.five-points .timeline-point:nth-of-type(5) {
    left: calc(100% - 1px);
}

.timeline.two-points {
    width: 40%;
    left: 30%;
}

.timeline.two-points .timeline-point:first-of-type {
    left: -1px;
}

.timeline.two-points .timeline-point:last-of-type {
    left: calc(100% - 1px);
}

.timeline-bar {
    position: relative;
    background: #ccc;
    height: 5px;
    width: 100%;
}

.timeline-point {
    display: inline-block;
    position: absolute;
    top: -7.5px;
    z-index: 10;
    height: 20px;
    width: 20px;
    border-radius: 15px;
    background: #ccc;
    text-align: center;
}

.timeline-point .glyphicon {
    color: #ffffff;
    font-size: 9pt;
}

.timeline-point .timeline-upper {
    display: inline-block;
    margin: 0;
    width: 150px;
    height: 50px;
    position: relative;
    top: -75px;
    left: -65px;
    text-transform: uppercase;
}

.timeline-point .timeline-lower {
    width: 150px;
    position: relative;
    top: -35px;
    left: -65px;
    color: rgba(91, 91, 91, 0.6);
}

.timeline-point .timeline-lower.text-only {
    line-height: 34px;
    font-style: italic;
}

.timeline-point.state-finished {
    background: #48a23f;
}

.timeline-point.state-finished span.state {
    color: #48a23f;
}

.timeline-point.state-action-needed {
    background: #e8aa52;
}

.timeline-point.state-action-needed span.state {
    color: #e8aa52;
}

.timeline-point.state-waiting {
    background: #e03e52;
}

.timeline-point.state-waiting span.state {
    color: #e03e52;
}

/* Gridstack */
.grid-stack .grid-header {
    padding-left: 10px;
    height: 50px;
    background-color: #005eb8;
    color: #ffffff;
    cursor: move;
}

.grid-stack .grid-header h3 {
    float: left;
    margin: 0;
    color: #ffffff;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.grid-stack .grid-header h3 small {
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    text-transform: none;
}

.grid-stack .grid-header .grid-buttons {
}

.grid-stack .grid-header .grid-buttons a.grid-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-left: 1px solid #3881c8;
    text-align: center;
    color: #ffffff;
    line-height: 50px;
    font-size: 15px;
}

.grid-stack .grid-header .grid-buttons a.grid-button:last-child {
    background-color: #0052a1;
}

.grid-stack .grid-header .grid-buttons a.grid-button > img,
.grid-stack .grid-header .grid-buttons a.grid-button > span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.grid-stack .grid-header .grid-buttons a.grid-button:hover > img,
.grid-stack .grid-header .grid-buttons a.grid-button:hover > span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

.grid-stack .grid-filters {
    padding: 0 10px;
    height: 36px;
    border: 1px solid #ddd;
    background-color: #f2f2f2;
    font-size: 14px;
    line-height: 36px;
    text-align: right;
}

.grid-stack h4.grid-subheader {
    margin: 0;
    height: 35px;
    background-color: #e5e4e3;
    color: #5b5b5b;
    line-height: 35px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.22);
}

.grid-stack h4.grid-subheader.grid-divider {
    margin-top: 25px;
}


.grid-stack .grid-filters + .grid-contents {
    height: calc(100% - 86px);
}

.grid-stack .grid-sub {
    margin-top: 10px;
    margin-bottom: 10px;
}

.grid-stack .grid-sub-item h5 {
    margin: 0;
    height: 20px;
    background-color: #005eb8;
    color: #ffffff;
    line-height: 20px;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-stack .grid-sub-item .grid-stack-item-content > p,
.grid-stack .grid-sub-item .grid-stack-item-content > form {
    position: relative;
    height: calc(100% - 20px);
    background-color: #f2f2f2;
    color: #5b5b5b;
    font-size: 12pt;
    text-align: center;
}

.grid-stack .grid-sub-item .bg-green h5,
.grid-stack .grid-sub-item .bg-red h5 {
    border-bottom: 1px solid #ffffff;
}

.grid-stack .grid-sub-item .bg-green h5,
.grid-stack .grid-sub-item .bg-green p {
    background-color: #48a23f;
    color: #ffffff;
}

.grid-stack .grid-sub-item .bg-red h5,
.grid-stack .grid-sub-item .bg-red p {
    background-color: #e03e52;
    color: #ffffff;
}

.grid-stack .grid-sub-item#dashboard-ring-number-by-cex p,
.grid-stack .grid-sub-item#dashboard-ring-number-by-cex input {
    height: 100%;
}

.grid-stack .grid-sub-item#dashboard-ring-number-by-cex input {
    float: none;
    margin: 0;
    padding: 0 2px;
    outline: 0;
    width: 100%;
    border: none;
    background-color: transparent;
    color: #ffffff;
    font-size: 12pt;
    line-height: 100%;
    text-align: center;
}

.grid-stack.grid-sub > .grid-stack-item > .grid-stack-item-content {
    top: 5px;
    left: 5px;
}

.grid-stack.grid-no-gutter > .grid-stack-item > .grid-stack-item-content {
    left: 0;
    right: 0;
}

.grid-stack .grid-contents {
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;
}


/* Reset the original style */
table#tablestrings {

}

table#tablestrings thead th,
table#tablestrings thead td,
thead.consolethead th,
thead.consolethead td,
form[action^="/historique/load"] ~ div.inner table thead th,
form[action^="/historique/load"] ~ div.inner table thead td {
    padding: 8px;
    height: 45px;
    border: 1px solid #ddd;
    border-bottom: 2px solid #ddd;
    background-color: #e5e4e3;
    color: #5b5b5b !important;
    line-height: 1.42857;
    font-size: 12pt;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
}

table#tablestrings tbody tr:nth-of-type(2n+1),
form[action^="/historique/load"] ~ div.inner table tbody tr:nth-of-type(2n+1) {
    background-color: #f9f9f9;
}

table#tablestrings tbody td,
form[action^="/historique/load"] ~ table tbody td {
    border: 1px solid #ddd;
    vertical-align: top;
}

table#tablestrings tbody td input,
table#tablestrings tbody td textarea {
    padding: 3px;
    width: 100%;
    border: 1px solid #5b5b5b;
    color: #5b5b5b;
}

table#tablestrings tbody td input:focus,
table#tablestrings tbody td textarea:focus {
    border-color: #005eb8;
}

table#tablestrings tbody td textarea {
    resize: vertical;
}

table thead.consolethead th:last-child,
table thead.consolethead td:last-child {
    border-right: 1px solid #dcdcdc;
}

table tbody#log td {
    color: #5b5b5b;
}

#clear-log ~ div .one-sixth {
    width: auto;
}

#grep, #action {
    margin-left: 10px;
    padding: 5px;
    width: 250px;
    height: 34px;
    line-height: 34px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

table tbody td {
    color: #5b5b5b;
}

.button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.button:focus,
.button:active:focus,
.button.active:focus,
.button.focus,
.button:active.focus,
.button.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.button:hover,
.button:focus,
.button.focus {
    color: #333;
    text-decoration: none;
}

.button:active,
.button.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.button.disabled,
.button[disabled],
fieldset[disabled] .button {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

a.button.disabled,
fieldset[disabled] a.button {
    pointer-events: none;
}

.button.green {
    background: -webkit-linear-gradient(top, #5CB85C 0px, #419641 100%) repeat-x;
    background: linear-gradient(to bottom, #5CB85C 0px, #419641 100%) repeat-x;
    border-color: #4cae4c;
    color: #ffffff;
}

.button.green:focus,
.button.green.focus {
    background: #449d44;
    border-color: #255625;
    color: #fff;
}

.button.green:hover {
    background: #449d44;
    border-color: #398439;
    color: #fff;
}

.button.green.active,
.button.green:active {
    background: #449d44;
    border-color: #398439;
    color: #fff;
}

.button.green:active:hover,
.button.green.active:hover,
.button.green:active:focus,
.button.green.active:focus,
.button.green:active.focus,
.button.green.active.focus {
    background: #398439;
    border-color: #255625;
    color: #fff;
}

.button.green.disabled:hover,
.button.green[disabled]:hover,
fieldset[disabled] .button.green:hover,
.button.green.disabled:focus,
.button.green[disabled]:focus,
fieldset[disabled] .button.green:focus,
.button.green.disabled.focus,
.button.green[disabled].focus,
fieldset[disabled] .button.green.focus {
    background: #5cb85c;
    border-color: #4cae4c;
}

.button.red {
    background: -webkit-linear-gradient(top, #D9534F 0px, #C12E2A 100%) repeat-x;
    background: linear-gradient(to bottom, #D9534F 0px, #C12E2A 100%) repeat-x;
    border-color: #B92C28;
    color: #fff;
}

.button.red:focus,
.button.red.focus {
    background: #c9302c;
    border-color: #761c19;
    color: #fff;
}

.button.red:hover {
    background: #c9302c;
    border-color: #ac2925;
    color: #fff;
}

.button.red.active,
.button.red:active {
    background: #c9302c;
    border-color: #ac2925;
    color: #fff;
}

.button.red:active:hover,
.button.red.active:hover,
.button.red:active:focus,
.button.red.active:focus,
.button.red:active.focus,
.button.red.active.focus {
    background: #ac2925;
    border-color: #761c19;
    color: #fff;
}

.button.red.disabled:hover,
.button.red[disabled]:hover,
fieldset[disabled] .button.red:hover,
.button.red.disabled:focus,
.button.red[disabled]:focus,
fieldset[disabled] .button.red:focus,
.button.red.disabled.focus,
.button.red[disabled].focus,
fieldset[disabled] .button.red.focus {
    background: #d9534f;
    border-color: #d43f3a;
}

.button.green:active,
.button.green.active,
.button.red:active,
.button.red.active{
    background-image: none;
}

/* Exploitation zones */
ul.exploitation-zones {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.exploitation-zones li {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    padding: 0 30px 0 0;
    height: 25px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 2px solid #005eb8;
    color: #005eb8;;
    font-size: 15pt;
    line-height: 25px;
    text-transform: uppercase;
}

ul.exploitation-zones li:not(:last-child) {
    margin-right: 10px;
}

ul.exploitation-zones li > span {
    display: inline-block;
    padding-left: 10px;
    text-align: center;
}

ul.exploitation-zones li > a {
    position: absolute;
    right: 0px;
    display: inline-block;
    width: 25px;
    height: 25px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color: #005eb8;
    color: #ffffff;
    font-size: 12pt;
    text-align: center;
    cursor: pointer;
}

ul.exploitation-zones li > a > span.glyphicon {
    line-height: 20px;
}

ul.exploitation-zones li.already-owned {
    border-color: #e03e52;
    background-color: #e03e52;
    color: #ffffff;
}

ul.exploitation-zones li.already-owned > a {
    background-color: #ffffff;
    color: #e03e52;
}

ul.exploitation-zones.owned li {
    background-color: #005eb8;
    border-color: #ffffff;
    color: #ffffff;
}

ul.exploitation-zones.owned li > a {
    border: 2px solid #ffffff;
    background-color: #005eb8;
    color: #ffffff;
}

ul.exploitation-zones:not(.owned) li > a {
    right: -1px;
}

ul.exploitation-zones:not(.owned) li > a > span.glyphicon {
    right: -1px;
    line-height: 22px;
}

ul.exploitation-zones li.getting-transferred {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

ul.exploitation-zones li.getting-transferred > a {
    border: 1px solid #005eb8;
    background-color: #ffffff;
    color: #005eb8;
}

ul.exploitation-zones li.getting-transferred.already-owned > a {
    border-color: #e03e52;
    color: #e03e52;
}

/* Boolean display */
.boolean {
    display: inline-block;
    width: 15px;
    height: 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    vertical-align: middle;
}

.boolean.is-true {
    background-color: #cce821;
}

.boolean.is-false {
    background-color: #e5e4e3;
}

/* Data tables reset */
table.dataTable {
    margin-top: -1px !important;
    border-bottom: 1px solid #ddd;
}

table.dataTable, table.dataTable th, table.dataTable td {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
    padding-right: 8px;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
    position: static;
    display: inline-block;
    vertical-align: middle;
}

.dataTables_wrapper .dataTables_processing {
    display: none !important;
}

/* jQuery DateTimePicker */
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
    background: #e8aa52 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: #005eb8;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: #005eb8;
    color: #ffffff;
    -webkit-box-shadow: #0052a1 0 1px 3px 0 inset;
    -moz-box-shadow: #0052a1 0 1px 3px 0 inset;
    box-shadow: #0052a1 0 1px 3px 0 inset;
}