/******************************************

TOC:
0/ Variables
1/ element layout and size customization
2/ Layout
3/ General style
4/ Header style
5/ Other style
5/ lib and frameworks customisation

******************************************/


/********************
 * 0/ Variables
 ********************/
:root {
    /* color we use in the app */
    /*
    * --carbon: 20, 20, 49;
    * --prune: 128, 0, 128;
    * --light_red: 234, 77, 77;
    * --orange: 231, 128, 73;
    * --yellow: 128, 128, 20;
    * --blue: 63, 154, 255;
    * --green: 146, 192, 55;
    * --red: 255, 49, 49;
    * */

    --red:    204,  50,   1 ;
    --brown:  153,  49,  50 ;
    --orange: 226, 110,  14 ;
    --yellow: 254, 204,   0 ;
    --green:  101, 152,  52 ;
    --dark_green: 8, 119, 8 ;
    --blue:     0,  51, 101 ;
    --indigo: 153,  50, 101 ;
    --light_red: 234, 77, 77;
    --hilight_green: 193, 223, 163;
    --hilight_green_light: 217, 235, 199;
    --hilight_orange: 255, 179, 128;
    --hilight_orange_light: 255, 205, 172;

}

/********************
 * 1/ Element layout and size customization
 ********************/

/********************
 * 2/ Layout
 ********************/
body, html {
    /* we use a *lot* of js lib that resize themselves with js,
     * Resizing with js is hard and most of them don't do it correctly when vertical scrollbar appears.
     * We prevent it to appear to avoid confusing these libs when the horizontal space decreases due to this scrollbar.
     * consequence: we need to be careful not to overflow ourselves.
     * */
    margin: 0;
    width: 100%;
    height: 100%;
}

.page {
    --navbar_border_bottom_width: 3px;
    --navbar_height:  calc(20px /* default line-height of bootstrap's .navbar-nav > li > a */
        + 2 * 15px /* padding-{top,bottom} of .navbar-nav > li > a */
        + var(--navbar_border_bottom_width));
    --footer_height: 0; /* to be overwritten by individual page */
    height: 100vh;
}

.full_height {
    height: 100%;
}

/* top navigation bar */
.navbar {
    width: 100%;
    display: flex;
    margin-bottom: 0;
    border-bottom-width: var(--navbar_border_bottom_width);
    height: var(--navbar_height);
}

.navbar > .logo_container {
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar .filter {
    margin-top: 10px;
    right: 10px;
    position: absolute;
    font-size: 20px;
    display: flex;
}

.navbar .filter .moment-picker {
    border: 1px dotted;
    border-radius: 16px;
    padding-left: 5px;
    padding-right: 5px;
}

.navbar label {
    margin-top: 2px;
    margin-right: 2px;
}

.float_right {
    float: right;
}

.logo_container > .logo {
    display: flex;
}

/* main content */
.content {
    --content_height: calc(100vh - var(--navbar_height));
    flex-grow: 1;
    height: var(--content_height);
}
/* we must set explicit height to grid to avoid buggy autoresize behaviour of ui-grid.
 * Pages that need other heights than 100% are expected to overload this */
.grid {
    height: calc(100% - 2px);/* apparently ui-grid doesn't do its calculation right... */
}

/* specific page layout */
/* all project page */
.all_projects {
    --legend_padding: 1rem;
    --legend_height: calc(2rem + 2 * var(--legend_padding));
    --footer_height: calc(var(--legend_height) + 2px);/* apparently ui-grid doesn't do its calculation right... */
}
.all_projects .grid {
    height: calc(100% - var(--legend_height) - 2px );
}
.all_projects .legend {
    padding: var(--legend_padding);
    font-size: 10px;
    height: var(--legend_height);
}

.all_projects .grid a {
    color: #33699C ;
}

.highlighted-row {
    background: rgb(var(--hilight_green_light));
}

.ui-grid-row:nth-child(even) .highlighted-row {
    background: rgb(var(--hilight_green));
}

.highlighted-row .ui-grid-cell {
    background-color: inherit !important;
}


.highlighted-warning-row {
    background: rgb(var(--hilight_orange_light));
}

.ui-grid-row:nth-child(even) .highlighted-warning-row {
    background: rgb(var(--hilight_orange));
}

.highlighted-warning-row .ui-grid-cell {
    background-color: inherit !important;
}

/********************
 * 3/ General Style
 ********************/
.all_projects {
    color: rgb(var(--indigo)) !important;
}
.navbar-default .navbar-nav>.active>a.all_projects {
    background-color: rgba(var(--indigo), 0.2) !important;
}

.event {
    color: rgb(var(--yellow)) !important;
}
.navbar-default .navbar-nav>.active>a.event {
    background-color: rgba(var(--yellow), 0.2) !important;
}

.unworked {
    color: rgb(var(--orange)) !important;
}
.navbar-default .navbar-nav>.active>a.unworked {
    background-color: rgba(var(--orange), 0.2) !important;
}

.label-alert-null, .label-alert {
    color: rgb(var(--orange)) !important;
}

.label-alert-unknown {
    color: rgb(var(--red));
}

.label-alert-OFF {
    color: #c831ff;
}

.label-alert-infos {
    color: #666;
}

.progress-incorrect {
    background: rgb(var(--light_red));
}

.progress-to-fill {
    background: #ffffa8;
}

.project-healthy {
    background: #ccebbc;
}

.project-not-healthy {
    background: rgb(var(--light_red));
}

.progress-date-to-update {
    background: #f4dbac;
}

.progress-no-date {
    background: rgb(var(--light_red));
}

.sum-not-match {
    color: rgb(var(--light_red));
}

.credit {
    color: rgb(var(--blue));
}

.debit {
    color: rgb(var(--green));
}

.missing-evaluation a{
    color: rgb(var(--red));
}

body, html {
    font-family: 'Open Sans',Helvetica,Arial,Verdana,sans-serif;
    color: #444;
    font-size: 12px;
}

/********************
 * 4/ Header Style
 ********************/
.navbar-nav>li>a {
    font-size: 14px;
}

.navbar {
    transition: background-color 1s ease-out;
    border-bottom-style: solid;
    border-bottom-color: #e7e7e7;
}

.navbar.all_projects {
    background-color: rgba(var(--indigo), 0.1);
    border-bottom-color: rgba(var(--indigo), 0.4);
}

.navbar.event {
    background-color: rgba(var(--yellow), 0.1);
    border-bottom-color: rgba(var(--yellow), 0.4);
}

.navbar.unworked {
    background-color: rgba(var(--orange), 0.1);
    border-bottom-color: rgba(var(--orange), 0.4);
}


.a_like {
    cursor: pointer;
    color: #337ab7;
}

.not-connected {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 50px;
}

select {
    height: 30px;
}

.table>thead>tr>th {
    vertical-align: middle;
}

input[type="text"] {
    border-radius: 3px;
    width: 200px;
    border: 1px solid #ccc;
    background: #fff;
    height: 33px;
    padding: 3px;
}

input[type="text"].ui-grid-filter-input {
    border-radius: 3px;
    padding: 3px;
}

.ui-grid-filter-container {
    padding: 2px 4px;
}

.input-group {
    margin-bottom: 5px;
}

.login .input-group-addon {
    width: 100px;
}

.login {
    height:80%;
    display:table;
    width: 100%;
    padding: 0;
}

.login #login {
    width: 170px;
}

.login * {
    font-size: 14px !important;
}

.grid {
    font-size: 12px;
}

.grid .glyphicon {
    font-size: 14px;
}

.grid-half-height {
/*   height: 50vh; */
    height: calc(50vh - 35px);
}

.ui-grid-selectable .ui-grid-disable-selection {
     -webkit-touch-callout: default;
     -webkit-user-select: text;
     -khtml-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
     cursor:auto;
 }


.row-fluid {
    height: 80%;
    display:table-cell;
    vertical-align: middle;
}

.centering {
    float: none;
    margin: 0 auto;
    width: 200px;
}

.label {
    color: #aaa !important;
}

label {
    font-weight: 400;
}

.time_separator {
    width: 100%;
    text-align: center;
}

.input-group-time-start {
    width: 200px;
    float: left;
    margin-right: 5px;
}

.alert {
    margin-top: 5px;
}

.btn-50 {
    width: 50%;
}
.btn-33 {
    width: 33.33%;
}

.btn-full {
    width: 100%;
}

.control_select {
    width: 100%;
    margin-bottom: 10px;
}

.control_slider {
    margin-bottom: 5px;
}
.controls {
    margin-bottom: 5px;
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}


.popover {
    width: 200px;
}

.panel {
    margin-bottom: 5px;
}

.panel-body {
    padding: 5px;
}

.ui-accordion-header {
    border: 1px solid #ccc;
    color: #ccc;
}

.ui-accordion .ui-accordion-content {
  padding: 10px;
}

/* Panel */
.panel-default>.panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
  padding: 5px 10px;
}

.panel-default>.panel-heading .panel-title {
  font-weight: bold;
}

/* jquery */

.ui-widget-header {
  border: 1px solid #aaa;
  background: #ccc;
}

input[type="month"] {
    float: left;
    border: 1px solid #4cae4c;
    padding: 3px;
    line-height: 24px;
}

.date-ctrl {
    margin-right: 5px;
    background: #e4eef5;
    padding: 5px;
    border-radius: 4px;
}

.align_left {
    right: 20px;
    position: absolute;
}

.ui-autocomplete {
    max-height: 400px;
    overflow: auto;
}

.ui-autocomplete .ui-state-focus {
    border: none;
    background: #ccc;
    font-weight: normal;
    color: #444;
}

.ui-datepicker-calendar {
    display: none;
}

.ui-datepicker-title {
    color: #444;
}

table {
    font-size: 12px;
}

table.tabular tr:hover {
    background-color: #efefef;
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #aac6e2;
}

table.tablesorter tbody td {
    padding: 2px;
}

table.tablesorter tbody tr.is_project td {
    color: #3c76ae;
}

table.tablesorter tbody tr.is_cp td {
    color: #2fb12d;
}
/*
#user_view {
    margin-top: 10px;
    margin-bottom: 5px;
}*/

.hide {
    display: none;
}

table.tablesorter tbody tr.archive_true td {
    background-color: #eee;
}

table.tablesorter tbody td.user {
    background-color: #efffd4;
}


.ui-grid-row:nth-child(odd) .total_month {
    background-color: #d5e2f0;
}

.ui-grid-row:nth-child(even) .total_month {
    background-color: #bbd1e5;
}

.ui-grid-row:nth-child(odd) .total {
    background-color: #f1d194;
}

.ui-grid-row:nth-child(even) .total {
    background-color: #e8b34f;
}


.ui-grid-row:nth-child(odd) .current-user {
    background-color: #f6f6f6;
}

.ui-grid-row:nth-child(even) .current-user {
    background-color: #e8e8e8;
}


.exceeded {
    background-color: #0e0202;
    color: white;
}
.full {
    background-color: rgb(var(--light_red));
    color: white;
}
.high {
    background-color: #f7bcbc;
}
.med {
    background-color: #f4dbac;
}
.low {
    background-color: #ccebbc;
}

.not-started {
    font-style: italic;
}

.full a,
.exceeded a {
    color: white;
}


.row {
    padding-left: 5px;
    display: inline-block;
}

/* Alerts */
.proj-alert {
    padding-top: 3px;
    padding-left: 3px;
}

.proj-watch {
  background: -webkit-repeating-linear-gradient(135deg, #f7bcbc, #f7bcbc 10px, #f08080 10px, #f08080 20px) !important;
  background: repeating-linear-gradient(135deg, #f7bcbc, #f7bcbc 10px, #f08080 10px, #f08080 20px) !important;
}

.alert-nometa-false,
.alert-nostart,
.alert-nometa,
.alert-baddate,
.alert-badbool,
.alert-badnum,
.alert-multi,
.alert-norexproject,
.alert-norexformation {
    background: url(../img/alert-nostart.png) no-repeat left center;
    height: 10px;
    width: 30px;
    margin: 0;
    margin-right: 1px;
    padding: 0;
    display: block;
    float: left;
}

.alert-nometa {
    background: url(../img/alert-nometa.png) no-repeat left center;
}

.alert-nometa-false {
    background: url(../img/alert-nometa.png) no-repeat left center;
}

.alert-baddate {
    background: url(../img/alert-baddate.png) no-repeat left center;
}

.alert-badbool {
    background: url(../img/alert-badbool.png) no-repeat left center;
}

.alert-badnum {
    background: url(../img/alert-badnum.png) no-repeat left center;
}

.alert-multi {
    background: url(../img/alert-multi.png) no-repeat left center;
}

.alert-norexproject {
    background: url(../img/alert-rex-project.png) no-repeat left center;
}

.alert-norexformation {
    background: url(../img/alert-rex-formation.png) no-repeat left center;
}

.alert-double-true {
    color: #ff0000;
}


/* Sub row style */
.expandableRow {
    background: #eee;
}

.expandableRow .panel-default,
.indic .panel-default {
    width: 200px;
    border-radius: 0;
    float: left;
    height: 150px;
    border-right: none;
}

.expandableRow .panel-default>.panel-heading,
.indic .panel-default>.panel-heading {
    background: none;
    font-size: 12px;
    font-weight: bold;
    border-bottom: none;
}

.expandableRow .panel-default>.panel-body,
.indic .panel-default>.panel-body {
    padding-left: 10px;
    color: #666;
}

.input-group .form-control {
    height: 34px;
}

.nav>li.logged {
    display: none;
}

.fa-spin:before {
    content:"" !important;
}

/* Spinning loader for FF */
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -ms-animation: spin .7s infinite linear;
    -webkit-animation: spinw .7s infinite linear;
    -moz-animation: spinm .7s infinite linear;
}

.data_row {
    border-bottom:1px solid #efefef;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

@-webkit-keyframes spinw {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes spinm {
    from { -moz-transform: rotate(0deg);}
    to { -moz-transform: rotate(360deg);}
}

.indic {
    border: 1px solid #eee;
}

.alert {
    color: #ff0000;
    margin-top: 23px;
}

.panel-alert {
    float: left;
    margin-right: 3px;
}

.menu-select {
    margin-top: 10px;
}

.legend_square {
    padding: 2px;
}

.project-title {
    color: #999;
}

.ui-grid-cell, ui-select-wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  overflow: visible;
}

.overflow-cell {
    overflow: visible;
}

form .panel-info>.panel-heading {
    padding: 0.3rem;
    font-size: 1.3rem;
}

.form-horizontal .form-group {
    margin-bottom: 5px;
}

form input[type="text"] {
    height: 24px;
}

form select {
    height: 24px;
}

form .help-block {
    margin-top: 0px;
    margin-bottom: 0px;
}


form .designation textarea {
    width: 100%;
}

form .designation input[type="text"] {
    width: 100%;
}

form .panel {
    border: none;
    box-shadow: none;
}

form .panel-info>.panel-heading {
    border: none;
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 2px;
    }
}

.required {
    color: #679cd7;
}

.time-progress {
    border: 1px solid #eee;
    height: 100px;
    position: relative;
}

.time-progress-day {
    position: absolute;
    width: 1px;
    background: red;
    bottom: 0px;
    padding-left: 1px;
    padding-right: 1px;
}

.expandableRow .time-progression {
    width: 500px;
}

.expandableRow #training-eval-scores {
    width: 100%;
    height: 100%;
}

.expandableRow .support-progression {
    width: 100%;
    height: 100%;
}

.choice {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;
}

.choice-1 {
  background-color: #fdbaba
}

.choice-2 {
  background-color: #fde1ba
}

.choice-3 {
  background-color: #fdfdba
}

.choice-4 {
  background-color: #dfeeba
}

.choice-5 {
  background-color: #bee7ba
}

.scores label {
   min-width: 470px;
   text-align: right;
   margin-bottom: 0px;
}

.grid-right-align {
   text-align: right;
}

.true-false-symbol {
    text-align: center;
    padding-top: 7px;
}

.overlay{
    position: absolute;
    z-index: 9999;
    left:0;
    top:0;
}

#the-preview {
  float: left ;
  /*width: 30%;*/
  height: calc(100vh - 70px);
  width: calc(70vh - 40px);
  background: rgba(60,60,117,0.1);
}

.timer {
    margin: 0.3rem;
}