/*
Ce fichier défini le style qui sera appliqué aux élément HTML de l'application.

NOTE:
La largeur de la grille et de la barre de navigation dans les ordonnées sont fixées dans WP.waplanner.setWidth();

NOTE:
- ne pas oublier l'importance des "Priority level of selector"
http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
http://www.w3.org/TR/CSS21/cascade.html#specificity

NOTE:
Pour les <TABLE> auxquels l'option scroll de datatable est ajoutée :
- pas de padding pour les <TH> et les <TD>
- pas de table-layout: fixed; pour le <TABLE>

Bleu hover: #8FC7E3

couleur onglets #FEFEFE;
*/

/*
----------------
Eléments Globaux
----------------
*/

html {
    margin: 0;
}

body  {
	font-family: Sans-Serif;
    background: #fafafa; /* couleur fond */
    margin: 0;
    min-height: 100vh;
}

@media print {
    .hideInPrint {
        display: none !important;
    }
    #nav_bar_container, #tab_list_bar_menu_container, #main_menu, #planning_grid_header_container {
        display: none;
    }
    body {
        background-color:white;
    }
    #mainscreen, #planning_grid_header_container, #list_screens {
        background-color:white;
    }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
    .grid_line {
        break-inside: avoid !important;
    }
    .planning_header {
        padding: 8px  !important;
        margin-top:-8px !important;
    }
}

@media screen {
    .today
    {
        background-color: #FCF2C8;
    }
    .hideInScreen {
        display: none !important;
    }
}

#login_screen {
    width: 100vw;
    height: 100vh;
    display: table;
    text-align: center;

    position: fixed;
    top: 0;
    left: 0;

    min-height: 150px;
    margin-left: auto;
    margin-right: auto;
    background: url(../img/teaping.jpg) no-repeat center center fixed;
    background-size: cover;
}

#launch_screen {
    width: 100vw;
    height: 100vh;
    display: table;
    text-align: center;

    background-color:rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
}

#launch_counter {
    position: fixed;
    top: 20px;
    left: 20px;
    font-family: monospace;
    font-size: 200%;
    color:#666;
}

#progress_container {
    width: 100%;
    position: fixed;
    top: 0;
}

.centered_child {
    display: table-cell;
    vertical-align: middle;
}

.wait {
    cursor: wait !important;
}

.even {
    background-color: #f0f0f0;
}


.odd {
    background-color: #f9f9f9;
}

.even .specialday {
    background-color: #E8E6DF;
}

.odd .specialday {
    background-color: #F0EEEA;
}

.specialday {
    background-color: #E8E6DF;
}

#planning_grid .even .secondaryinfocell {
    border-bottom-color: #f0f0f0;
    border-bottom-width: 0px;
    padding-top: 0;
    padding-bottom: 0;
}

#planning_grid .odd .secondaryinfocell {
    border-bottom-color: #f9f9f9;
    border-bottom-width: 0px;
    padding-top: 0;
    padding-bottom: 0;
}

#planning_grid .even .secondaryinfocell.specialday {
    border-bottom-color: #E8E6DF;
}

#planning_grid .odd .secondaryinfocell.specialday {
    border-bottom-color: #F0EEEA;
}


/*
---------
Waplanner
---------
*/

#waplanner  {
    margin-left: 10px;
    margin-right: 10px;
}

/*
-----------------
Boutons d'édition
-----------------
*/

.child_screen .crud_button  {
    float: left;
    margin-left: 50px;
}

/*
Menu dans la bannière
---------------------
*/

#manage_menu  {
    float:right;
    margin-right:0px;
}

#manage_sub_menu  {
    display: none;
    clear:both;
}

#manage_button_li {
    float:right;
}

#manage_sub_menu li  {
    float:left;
}

/*
-----------
grid_screen
-----------
*/

#grid_screen  {
    padding: 0 5px 5px 5px;
    margin-top: 0;
}

/*
----------
Calendrier
----------
*/

#today_button  {
	float: left;
    margin: 0 40px 0 0;
}

#selected_month {
    margin-right: 10px;
}

#selected_num_of_days {
    float: right;
}

#nav_bar_container  {
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
}

#nav_bar  {
    width: 100%;
    border: 1px solid LightGray;
}

#nav_bar td, #nav_bar th {
    border: 1px solid LightGray;
}

#navigation_buttons_container {
    height: 30px;
}

#nav_bar_recap_line  {
    height: 24px;
    font-weight: bold;
}

.minimized_cell {
   overflow:hidden;
   box-shadow: -12px 0 8px -8px #c0c0c0 inset;
}

.secondaryinfo.minimized_cell {
   display: none;
}

.nav_bar_calendar_cell {
    width: 50px;
}

#nav_bar_recap_line .nav_bar_grid_cell  {
    border-bottom: 2px solid #000;
}

.nav_bar_past_cell  {
    background-color: #f3f3f3;
}

.nav_bar_today_cell {
    background-color: #FCF2C8;
}

.nav_bar_future_cell  {
    background-color: #D9EDF7;
}

.nav_bar_transition_cell  {
    background: linear-gradient(to right, #f3f3f3, #D9EDF7); /* gradient from nav_bar_past_cell to nav_bar_future_cell */
}

#nav_bar_date_line  {
    background-color: white;
    font-size: 80%;
    height: 22px;
}

.highlighted_month {
    background-color: #8FC7E3;
    background: #8FC7E3;
}

#nav_bar_recap_line td:active  {
	background-color: yellow;
}

.nav_bar_calendar_cell:hover  {
    background-color: #8FC7E3;
}

#main_menu {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 5px;
}

.navbar-nav > li.active {
    background: #EEEEEE;
}

/*
---------------------
Grille des ressources
---------------------
*/

#planning_grid  {
    table-layout: fixed;
    border: 1px solid #888;
}

#planning_grid th    {
    background-color: white;
    background-clip: padding-box;
}

.pm_column {
    border-left: 1px dashed #bbb;
}

#planning_column_header  {
	border-top-color: #FEFEFE; /* couleur onglets */
	border-left-color: #FEFEFE; /* couleur onglets */
    padding-top: 3px;
    padding-bottom: 3px;
}

.planning_header  {
    padding: 4px;
    line-height: 15px;
}

#planning_grid_container  {
	clear:both;
}

#planning_grid .grid_cell {
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 0;
    vertical-align:bottom;
    border-top-width: 0;
    border-right-width: 0;
    position: relative;
    background-clip: padding-box;
}

#planning_grid {
    line-height: 0;
}

#planning_grid .cardTr .grid_cell, .planning_header {
    border-bottom-color: #888 !important;
}

.hover_droppable {
    background-color: #8FC7E3 !important;
    border-bottom-color: #8FC7E3 !important;
}

.card {
    display: inline-table;
}

.infoTr {
    height: 0;
}

#planning_grid .highlighted_lineHeader {
    background-color: yellow;
}

.cell_button {
    width: fit-content;
    bottom: 1px;
    position: absolute;
    width: 35px;
    height: 20px;
    padding: 0;
    opacity: 0.8;
    z-index: 2;
}

.cell_button.right {
    right: 1px;
}

.cell_button.left {
    left: 1px;
}

.grid_cell_spacer {
    z-index: -1;
    visibility: hidden;
    float: right;
}

/*
--------------
Ecran de liste
--------------
*/

/* nav-pills */
.nav-pills>li>a {
    padding-top: 7px;
    padding-bottom: 7px;
}

#list_screens  {
    margin-bottom: 0;
    border-top: 1px solid lightgray;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

/*
Elements de la grille
-------------------------------
*/

.grid_cell .job_step, .grid_cell .interval_card {
    width:100%; /*prend la largeur de la case */
    height:inherit; /* prend la hauteur de la case */
    display: inline-block;
    position: relative;
}

.infoInCardArea_iconContainer {
    z-index: 3;
    display: inline-block;
    width: fit-content;
    position: absolute;
    top: 2px;
    right: 4px;
}

.infoInCardArea_icon {
   text-shadow: 1px 1px 1px #444;
   font-size: 130%;
}

.infoInCardArea_text {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    margin-left: 3px;
    padding-right: 12px;
    font-size: 90%;
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoInCardArea_cardText {
    margin-top: 3px;
    margin-bottom: 3px;
    left: 3px;
    top: 3px;
    padding: 4px;
    line-height: 1.2em;
    box-shadow: 1px 1px 1px #666;
    white-space: pre-line;
    overflow: hidden;
    width: 100%;
}

.infoInCardArea_cardLabel {
    margin-top: 0;
    margin-bottom: 3px;
    left: 3px;
    top: 3px;
    box-shadow: 1px 1px 1px #666;
    white-space: pre-line;
    overflow: hidden;
    width: 100%;
    display: inline-block;
}

.interval_member {
    font-size: 90%;
    margin-bottom: 3px;
}

.secondaryinfoicon {
    font-size: 130%;
    line-height: 1.35em;
    padding: 2px;
}

.job_step th, .job_step td {
    border: 1px solid black;
    border-color: lightgray  !important;
}

.job_step {
    margin-bottom: 3px;
}

/*
Etape
-----
*/

.step_element  {
    border-color: gray;
    background-color: white;
    line-height: 1.2em;
}

.step_reference  {
    font-size:small;
}

.en_hours  {
    font-size: 70%
}

/*
-------------
Drag and Drop
-------------
*/

tbody tr.ui-draggable:hover  {
/*outline: 3px solid black;*/
    background-color: #8fc7e3 !important;
    color: darkgreen;
}

.ui-draggable  {
    cursor: move;
}

.ui-draggable.ui-draggable-disabled {
    cursor: pointer;
}


/*
---------
Datatable
---------
*/

/* NOTE:  cette section "overide" le style par défaut de datatable */

.dataTables_filter  {
	float: left;
}

.dataTables_scroll {
    margin-bottom: 3px;
}

.dataTables_length {
    margin-top: 2px;
}

.col-sm-1 .col-sm-2 .col-sm-3 .col-sm-4 .col-sm-5 .col-sm-6 .col-sm-7 .col-sm-12 {
    min-height: 0
}

/*
------
Ecrans
------
*/

/* un écran est le contenu d'un onglet sous la grille */
.screen  {
	padding-top: 5px;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #fafafa; /* couleur fond */
}

/*
-------
Edition
-------
*/

/* Permet de placer l'input de recherche de datatable */
.datatable_filter_integration  {
	float: left;
}

/* Le conteneur des boutons de crud */
.action_buttons  {
    height: 30px;
}

/* Conteneur de liste principale */
.main_list {
    clear: both;
}

/*
Liste principale
----------------
*/

.main_list table  {
    text-align: left;
}

.main_list table tr  {

    font-size: 90%;
}

.list table td, .child_list table td  {
    white-space: nowrap;
}

.child_list table  {
    font-size:80%;
}

/*
Formulaire d'édition
--------------------
*/

.edition_form_panel {
    display: table;
    font-size: 100%;
    z-index: 100;
}

.mandatory_field {
	font-weight: bold;
}

.edition_form_panel fieldset {
    border: 1px solid black;
    padding: 10px;
}

.interval_edition_form {
    max-width: 250px;
}

.btn-hidden {
    display: none;
}

/*
Titre du formulaire d'édition
-----------------------------
*/

/* NOTE: le titre reprend le nom de l'action qui a été cliquée */

.action_title, .child_action_title  {
	font-weight: bold;
	margin-right: 10px;
}

/*
Ligne sélectionnée
------------------
*/

.selectedRow, .child_selectedRow, .clickedRow {
    background-color: yellow !important; /*#8fc7e3*/
}

.child_list .selectedRow {
    background-color: yellow !important;
}

.child_list .selectedRow td {
    color: black !important;
}

/*
-------------------
Edition liste fille
-------------------
*/

.child_action_buttons  {
    height: 30px;
}

/*
Erreur
------
*/

.list_error_message, .form_error_message, .child_error_message {
	clear: both;
	color: white;
    background-color: red;
	margin-bottom: 10px;

	display: none;
}

.list_info_message {
    clear: both;
    color: gray;
    margin-bottom: 10px;

    display: none;
}

.faulty_text_field  {
    border-bottom: 4px solid red !important;
}

/*
Ressources et intervalles
-------------------------
*/

/*
Formulaires
*/

.edition_form_panel input
.edition_form_panel select
.edition_form_panel textarea {
    margin:0;
}

.form-control {
    min-width: 172px;
    font-weight: normal;
    display: inline-block;
}

.form-control.input-sm {
    min-width: 45px;
}

.modal-dialog {
    width: auto;
    display: table;
    max-width : 100%;
    max-height: 100%;
}

.grid_y_nav_grid_line {
    border-left: 5px solid #000;
    border-right: 5px solid #000;
}

.navListCell {
    padding: 5px;

}

.navListCell:hover {
    background-color: #e1effc;
}

.grid_y_navigation_button {
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 18px;
}

.mouse_down  {
    background-color: #cbe4fc !important;
}


/* z-index des elts jQuery-ui devant être au dessus des elts Bootstrap */
.ui-datepicker, .ui-autocomplete {
    z-index: 9999 !important;
}

/* adaptation des popover Bootstrap */
.popover {
    max-width: 600px;
}

/*
Draggable
----------
*/

/* Pour ne pas opacifier les lignes non draggables de la liste */
.ui-state-disabled.ui-draggable-disabled  {
    opacity : 1;
}


#list_screen_toggle_li {
    float: right;
}

#fullscreen {
    margin-right: 15px;
    margin-left: 15px;
}

/*
Modal
=====
*/

#mainscreen, #fullscreen {
    position: relative;
}

/*
Datepicker
==========
*/

.gridfirstdate .ui-state-default {
    background: #8FC7E3;
}

/*
Divers
======
*/

.secondaryinfoicon:hover {
    cursor: pointer;
}

.stepingrouphover:hover {
    background-color: yellow !important;
}

.left-align {
    text-align: left;
}

.modal-header {
  padding: 10px;
}

.modal-footer {
  padding: 10px;
}

.input-medium {
    width: 130px;
    min-width: 65px;
}

.input-small {
    width: 45px;
    max-width: 45px;
    min-width: 45px;
}

.btn-inverse {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #363636;
  *background-color: #222222;
  background-image: -moz-linear-gradient(top, #444444, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
  background-image: -webkit-linear-gradient(top, #444444, #222222);
  background-image: -o-linear-gradient(top, #444444, #222222);
  background-image: linear-gradient(to bottom, #444444, #222222);
  background-repeat: repeat-x;
  border-color: #222222 #222222 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
             box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn-inverse:active,
.btn-inverse.active {
  background-color: #080808 \9;
}

.btn-inverse.active {
  color: rgba(255, 255, 255, 0.75);
}

.tooltip-content {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    right: 100%;
    margin-right:-14px;
    margin-bottom:-14px;
    min-width: 200px;
    background-color: yellow;
    color: black;
    border-color:#aaa;
    border-width: 1px;
    border-style: solid;
    text-align: left;
    line-height: normal;
    padding: 12px;
    z-index: 0;
    opacity: 0;
    transition: opacity .6s;
    box-shadow: 2px 2px 1px silver;
    pointer-events: none;
}

.has-tooltip:hover .tooltip-content { /* Makes tooltip visible when hovered on */
    visibility: visible;
    opacity: 1;
}

.offline_banner {
    background : repeating-linear-gradient(-45deg, #fff, #fff 30px, #ed1228 30px, #ed1228 60px);
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    padding: 4px;
}

.offline_banner #offline_text {
    background-color: white;
    opacity: 0.85;
    font-size: 16px;
    color: red;
    text-align: center;
    width: fit-content;
    width: -moz-fit-content;
    padding-left: 5px;
    padding-right: 5px;
}

.offline_background {
    background-color: rgba(237, 18, 40, 0.10);
}

#button_online {
    position: relative;
    float:right;
}
.offline_navigation {
    background : #ff9999;
}

/* Allow vertical scroll when (Bootstrap 3.5) modal dialog is too tall */
.modal {
  overflow: auto !important;
}