:root {
    --shadow-soft-color-2: rgba(0,0,0,0.15);
    --shadow-soft-color: rgba(0,0,0,0.30);
    --gray-soft-2: rgb(99 99 99 / 5%);
    --gray-soft: rgb(99 99 99 / 16%);
    --gray: rgb(99 99 99 / 50%);
    --gray-hard: rgb(99 99 99 / 70%);
    --footer-color: rgb(234, 234, 234);
    --gral-bg-color: white;
    --header-pages-color: white;
    --line-division-color-head: 1px solid var(--gray-soft);
    --line-division-color-tabs: 3px solid var(--gray-soft);
    --line-division-color-elements: 3px solid var(--gray);
    --line-division-color: 4px solid rgb(99 99 99 / 16%);
    --disabled-color: #e9ecef;

}

@font-face {
    font-family: 'ArialNarrow';
    src: url("../fonts/Arial Narrow/Arial Narrow regular/arial.ttf");
}

html, body { 
    position: relative;
    z-index: 13;
}

body {
	margin: 0;            
    padding: 0;
	background-color: var(--gral-bg-color);
	font-family: "ArialNarrow";
    overflow-x: hidden;
}

html, body {
    background-color: var(--gral-bg-color);
    overflow-x: hidden;
}

.container .containerFormsContent  {
    background-color: white;
}

select option {
    font-family: 'ArialNarrow';
}

.color-red {
    color: red;
}

.license {
    padding: 0 5px;
    font-size: 1.5rem;
    color: orange;
}

.license>span.tooltiptext {
    width: 350px;
    position: absolute;
    right: 0;
    bottom: 25px;
    font-size: var(--bs-tooltip-font-size);
}

.completScreen {
    height: 100vh;
    width: 100%;
    background-color: gray;
    position: fixed;
    z-index: 201;
    opacity: 0.7;
    display: none;
}

select option { text-align: left !important; }

#modal-view-image img {
    border-radius: 3%;
    -webkit-box-shadow: 8px 8px 22px -7px rgba(0,0,0,0.53);
    box-shadow: 8px 8px 22px -7px rgba(0,0,0,0.53);
}

/* Center the loader */


@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


a               { text-decoration: none;                            }
ul              { list-style:none; margin-left:0; padding-left:0;   }
table li        { list-style-type: none;                            }
table a         { color: #000000; text-decoration: none;          }
table a:hover   { color: #FFF; text-decoration: none;             }
table a:visited { text-decoration: none;                            }
table a:active  { text-decoration: none;                            }
tbody           { font-size: 21px;                                  }
th              { font-weight: bold; transform: scale(1);           }
.success        { color:  green;                                  }

h1, h2, h3, h4, h5, h6, p, a, 
input, button, form textarea { 
    font-family: "ArialNarrow"; 
}

h1 { color: black; }

header {
    left: 0;    
    right: 0;   
    height: 69px;
    position: absolute;
    min-width: 380px;
}

table#postitTab-fixed,
.cardContainer table {
    border: 0;  
    display: table;
    border-spacing: 0px;
    border-collapse: collapse;
}

table#postitTab {
    border: 0;  
    display: table;
    border-spacing: 0px;
}

.default-btn {
    width: 150px; 
    height: 40px;
    margin-top: 10px;    
    padding: 0.375rem 0.75rem;
}

.inputTitle {
    display: inline-block;
    height: 100%;
    width: 22%;
}

.inputContainer {
    display: inline-flex;
    width: 89.5%;
    overflow: hidden;
    border-left: 1px solid black;
    background-color: rgba(255, 231, 95, 0.849);
}

.inputContainer input           { border: none; }
.inputContainer .form-control   { margin: 0;    }

.inputTitleText {
    font-size: 35px;
    color: black;
}

.inputContent {
    display: flex;
    background-color: rgba(184, 184, 184, 0.658);
    padding-left: 10px;
    overflow: hidden;
    margin: 10px;
    color: black;
    border: .5px solid black;
    width: 100%;
    justify-content: end;
    align-items: center;
}

#boardContainerLeft {
    display: inline-flex;
    margin-left: 50px;
}

#principalContent-kpi { display: flex; }

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    font-size: 18px;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

td, th {
    display: table-cell;
    vertical-align: inherit;
    text-align: center;
    color: black;
    border-collapse: collapse;
    word-break: break-word;
}

.containerForms td, .containerForms th  { text-align: center; }
.containerForms table                   { margin: 0 auto;     }
.center                                 { margin: 0 auto;     }
.formButtonContainer                    { margin-top: 10px;   }

.formButton {
    width: 300px;
    height: 50px;
}

.tableauContainer {
    /*background: rgba(172, 169, 169, 0.267);*/
    /*border-top: 1px solid black;*/
    /*background: linear-gradient(90deg,  rgb(253 253 253 / 23%) 0%, 
                                        rgb(230, 230, 230) 28%, 
                                        rgb(230, 230, 230) 82%, 
                                        rgb(253 253 253 / 23%) 100%);
    border-bottom: 1px solid black;*/
    padding: 50px;
}

.nav-tabs {
    /*border-bottom: 1px solid #aaabab;*/
    width: 70%;
    margin: 0 auto;
}

.img-logo { cursor: pointer; }

.tableauContainer #tabChoiseTableaux,
.tableauContainer .nav-tabs {
    border-bottom: var(--line-division-color);
    margin-bottom: 20px;
}

.dataTables_length label  { display: flex;       }
.dataTables_length select { margin: 0 10px;      }
.dataTables_filter        { margin-bottom: 15px; }

.tableauContainerCards {
    padding: 0;
    margin-top: 100px;
}

#tabChoiseTableaux a         { border: var(--line-division-color-tabs) }
.photo-image-container       { text-align: center;        }
#postitTab td, #postitTab th { max-width: 110px;          }

.table.dataTable.no-footer {
    border-bottom: 1px solid var(--gray);
}

table.dataTable thead th, table.dataTable thead td {
    border-bottom: none;
}

#connexion {
    background-color: rgb(0,171,196);
    border: 1px solid black;
}

#connexion-button-container { margin: 0 auto;              }
.center                     { text-align: center;          }
.none                       { display: none;               }
.clearBoth                  { clear: both;                 }
.colorBlue                  { color: #1F418C;            }
.titleBlue                  { color:rgb(0,171,196);      }
.borderBlue                 { border: 1px solid #7b8fbb; }

.firstline {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 5px;
}

.pdfIcon {
    width: 50px;
    margin-right: 15px;
}

.pdfIcon:hover      { cursor: pointer;                        }
.hardWorkloadBg     { background-color: #f78080 !important; }
#taskmanagersInfos  { margin: 0 auto;                         }

#taskmanagersInfos th, 
#taskmanagersInfos td {
    padding: 5px 10px;
}

#taskmanagersInfos img {
    width: 42px;
    vertical-align: middle;
    padding-right: 8px;
}

#taskmanagersInfos span         { vertical-align: middle; }
#taskmanagersInfos span a       { color: #294a91;       }
#taskmanagersInfos span a:hover { color: #365498;       }

#tabUsersNOK #usersList {
    overflow: overlay;
    overflow-x: hidden;
    height: 127px !important;
}

#desc::first-line           { background-color: silver;           }
.dpn                        { display: none;                        }
.dpnTab                     { background-color: white; border: 0; }

.postit-icon-critical       { 
    width: 27px;
    margin-left: 10px;
    position: absolute;
    top: 5px;
    right: 7px;
}

input.switchEditMode:empty  { margin-left: -999px;                  }

input.switchEditMode:empty ~ label {
    position: relative;
    float: right;           
    right: 10%;
    line-height: 1.6em;     
    text-indent: 4em;
    margin: 0.2em 0;        
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.switchEditMode:empty ~ label:before,
input.switchEditMode:empty ~ label:after {
    position: absolute; 
    display: block;
    top: 0;             
    bottom: 0;
    left: 0;            
    content: ' ';
    width: 3.6em;       
    background-color: #edeff2;
    border-radius: 0.3em;
    box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
    -webkit-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

input.switchEditMode:empty ~ label:after {
    width: 1.4em;   
    top: 0.1em;
    bottom: 0.1em;  
    margin-left: 0.1em;
    background-color: #fff;
    border-radius: 0.15em;
    box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

input.switchEditMode:checked ~ label:before { background-color: #1F418C; }
input.switchEditMode:checked ~ label:after  { margin-left: 2em;            }

.shadow {
    box-shadow: 0px 4px 6px #333;
    -moz-box-shadow: 0px 4px 6px #333;
    -webkit-box-shadow: 0px 4px 6px #333;
}

.button-postit          { background: rgb(0, 171, 196);                                 }
.button-postit:hover    { opacity: 0.9;                                                   }
.imgButton img          { width: 50px; margin-left: 20px; margin-right: 20px;             }
.imgButton:hover        { cursor: pointer;                                                }
#alertImage             { position: absolute; margin-top: 8px; width: 51px; right: 160px; }
#alertImage:hover       { cursor: pointer;                                                }
.hoverImage             { cursor: pointer;                                                }

.primary-actions>a, .primary-actions>button, .primary-actions>.button, .primary-actions>.file-upload-button, .primary-actions>.multi-button {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.containerForm          { 
    position: relative; 
    top: 80px; 
    max-width: 700px;
}

.containerForm label    { font-size: 21px; }

.containerForm select   { 
    font-size: 35px; 
    color: #000; 
    padding: 10px; 
}

#postitTab .thUser,
#usersTable .thUser {
    width: 290px;
    font-weight: normal;
    font-size: 20px;
    height: fit-content;
    max-height: 200px;
    background-color: var(--gray-soft-2);
}

#postitTab .thUser:hover,
#usersTable .thUser:hover { 
    cursor: pointer;
    background-color: #DCDCDC;
}

#postitTab .thUser img,
#usersTable .thUser img { 
    display: block;
    margin: 0 auto; 
    object-position: center center;
    object-fit: cover;
    border-radius: 50%;
    border: solid 1px black;
    -webkit-box-shadow: 9px 8px 10px -5px rgba(0,0,0,0.67);
    box-shadow: 9px 8px 10px -5px rgba(0,0,0,0.67);
}

.container_user_image { 
    width: fit-content;
    background-color: none;
    margin: 0 auto;
    overflow: hidden;   
    padding: 10px; 
}

.thUser .containerthUserContent {
    min-height: 200px;
    height: 100%;
    display: inline-flex;
    align-content: center;
    text-align: center;
    /* background: crimson; */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.thUser p {
    padding: 10px 0;
}

.buttonCancelContainer {
    width: 100%;
    height: 50px;    
    display: flex;
    justify-content: flex-end;
    padding: 0 80px;
    position: absolute;
}

.cancelFormButton {
    z-index: 22;
    position: fixed;
    height: 50px;
    width: 50px;
    border: 0;
    color: white;
    -webkit-appearance: none;
    border-radius: 50%;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 1;
    box-shadow: 6px 8px 14px -4px #0000009a;
    border: 2px solid black;
}

.monday:hover, .tuesday:hover, 
.wednesday:hover, .thursday:hover, 
.friday:hover, .saturday:hover, 
.sunday:hover {
    cursor: pointer;
}

.containerForm input[type=text], 
.containerForm input[type=password], 
.containerForm input[type=email], 
.containerForm input[type=tel], 
.containerForm textarea, 
.containerForm input[type=number] {
    -webkit-appearance: none;
    text-shadow: none;
    line-height: 1.2;
    display: inline-block;
    border: 0;
    outline: 0;
    padding: 10px 16px;
    position: relative;
    border-radius: 5px;
    border: 1px solid #1F418C;
    color: white;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none !important;
    font-weight: normal !important;
    background: rgba(255,255,255,0.1);
    font-size: 16px;
    height: auto;
    padding: 15px;
    width: 100%;
    background-color: white;
    color: #000;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    margin-bottom: 30px;
}

.containerForm input[type=text], 
.containerForm input[type=password], 
.containerForm input[type=email], .containerForm input[type=tel] {
    white-space: nowrap;
}

.containerForm label { color:#1F418C; }

.containerForm select { 
    border-color: #1F418C; 
    border-radius: 3px; 
    color:#1F418C; 
}

.containerForm h1 { 
    border-radius: 3px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
}

.containerForm h3 { color: #1F418C; }

.containerForm input[type=date] { 
    border:1px solid #1F418C; 
    color:#1F418C; 
}

.radioTxt { 
    font-size: 35px; 
    color: #1F418C; 
}

.disabledButton { 
    opacity: 0.3; 
    cursor: initial !important; 
}

.disabledButton:hover           { opacity: 0.3 !important;  }
#addUserForm #admin .radioTxt   { font-size: 35px;          }
#addUserForm #avatar            { margin-left: 6%;          }

.containerForm input[type=submit] {
    font-weight: bold;
    font-size: 21px;
    height: auto;
    padding: 15px;
    width: 100%;
    background-color: #1F418C;
    color: #FFF;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    margin-bottom: 30px;
}

#addUserForm #admin input[type="radio"],
#formAddTheme input[type="radio"] {
  width: 50px; 
  height: 2em; 
}

#admin label                    { left: 0;                      }
#admin                          { position: relative; left: 6%; }
#addUserAdminLabel              { color: #1F418C;             }
#addTaskForm label              { position: relative;           }
#addTaskForm input[type="date"] { font-size: 35px;              }

/* HEADER */
#headerUser {
    font-size: 32px;
    display: inline-block;  
    text-align: center;
    width: 100%;
    left: 0;
    top: 16.5px;
}

#logoFaurecia {
	height: 40px;
	top: 14.5px;           
    left: 15px;
}

.header-logo {
    width: fit-content;
    height: auto;
    margin: 0 auto;
    z-index: 11;
    position: fixed;
    text-align: center;
    width: 100%;
    padding: 5px 0;    
    height: 40px;
    background: var(--header-pages-color);
    border-bottom: var(--line-division-color-head);
}

.header-logo h3 { margin-bottom: 0; }
.input-middle   { border-radius: 0; }

.input-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#parameterButton {
    position: relative;
    float: right;           
    top: 11px;
    border-radius: 3px;     
    margin-right: 10px;
}

.input-left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#parameterButton img    { 
    height: 44px; 
    background-color: inherit; 
}

#parameterButton :hover { 
    cursor: pointer; 
    opacity: 0.8; 
}

#logout { 
    position: relative; 
    top: 11px; 
    float: right; 
}

/* POST-IT PAGE */
#addUser { 
    visibility: hidden; 
    display: inline-block; 
    left: 21px; 
}

#modifTaskManager { 
    float: right; 
    right: 12px; 
}

#addCard, #updateCard, #cardlistbtn { 
    visibility: hidden; 
    float: right;
}

#addTaskManager,  #modifTaskManager, #chooseTaskManager, 
#addTheme, #containerSwitchEdit, #addSECTORSERVICE, 
#extractXLS { 
    visibility: hidden; 
}

#manageUsers { display: none; }

#containerPostit {
    margin-left: 30px;
	position: absolute;
    left: 0;
	right: 0;  color:#1F418C;
    position: relative;
    z-index: 10;
    min-height: 90vh;
}

#postitTab {
    width: 97%;    
    -webkit-box-shadow: 6px 8px 14px -4px var(--shadow-soft-color);
    box-shadow: 10px 10px 15px -10px var(--shadow-soft-color);
}

.inputState { padding: 9px; }

#postitTab-fixed, .containerForms table {
    -webkit-box-shadow: 6px 8px 14px -4px var(--shadow-soft-color);
    box-shadow: 6px 8px 14px -4px var(--shadow-soft-color);
}

.friday { border-right: 1px solid black; }

.checkboxInput {
    height: 30px;
    width: 30px;
}

.lastUser { border-bottom: 1px solid black; }

#postitTab, #postitTab-fixed { 
    overflow: hidden;
    border: 0.1px solid black;
}

.container {
    text-align: left;   
    overflow: hidden;
    display: table;     
    padding: 0 0 8em 0;
}

.container.containerForm { min-width: 80%; }
.input-group-text        { min-width: 140px; }
.tooltip                 { cursor: pointer; }

.container.containerForms {
    position: relative;
    padding: 30px 30px 30px 30px;
    padding-top: 0;
    margin-left: 54px;
    margin-bottom: 100px;
    min-width: calc(100% - 54px);
}

.container.containerForms .containerFormsContent{
    padding: 30px;
    color: black;
    background: var(--gral-bg-color);
}

.navsContainerForms {
    max-width: 700px;
    padding: 30px 30px 0 30px;
    min-width: 95%;
    margin-left: 80px;
}

.append-icon {
    min-width: 40px !important;
    max-width: 40px !important;
    height: 100%;
}

.titleContainerCheck {
    border-bottom: 1px solid rgb(179, 179, 179);
    padding-bottom: 20px;
}
.checkpointsContainerTitle {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.titleCheck {
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.btnContainerCheck {
    display : flex; 
    justify-content: right
}

.inputFormContainer {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

#checkCriticalContainer {
    margin-top: 10px;
    margin-left: 10px;
    padding: 5px;
}

#inputColorText { margin-right: 50px; }

input#inputColor {
    height: 35px;
    width: 35px;
}

.btnGreen       { background-color: #71BE4C;              }
.btnGreen:hover { background-color: #70be4ca1 !important; }

.checkTheme {
    width: 35px;
    margin-top: 0;
    height: 35px;
    border: 2px solid var(--gray);
}

.checkCartes, .checkAllCartes {
    width: 25px;
    margin-top: 0;
    height: 25px;
    border: 2px solid black;
}

#checkpointsContainer button, #reactionNokContainer button,
#addPictureNok button, .optionCheckContainer button,
#pictureCheckpointContainer button, #pictureNokContainer button {
    margin-left: 20px;
}

.optionCheckContainer { margin-bottom: 20px; }

#pictureCheckpointContainer button,
#pictureNokContainer button{
    margin-bottom: 20px;
}

.containerForms label { font-size: 16px; }

.inputState.form-control,
.containerForms select {
    appearance: auto;
}

#rotateTheme {
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

/* Cards */
#cards {
    width: 100%;        
    height: auto;
    width: 95%;         
    margin-top: 15px;
    margin-left: 2.5%;  
}

#cards h3, p        { margin: 0;           }
#cards h3           { margin-bottom: 15px; }
.cardContainer      { height: 100%;        }
.cardChildContainer { height: calc(50%);   }


/* ----- */
.fixed {
    position: fixed;    
    margin-left: 87.5%;
    top: 0px;           
    width: 10%;
}

.floatable {
    top:0px;
    z-index: 9400;      
    left:2%;
}

.floatable div {
    display: table-cell;
    vertical-align: middle;
    background-color: white;
    border-left: 1px solid black;
    border-right: 1px solid white;
    border-bottom: 1px solid black;
    color: black;       
    text-align:center;
    font-size: 18px;    
    font-weight: bold;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0;
}

.floatable div:hover { cursor: pointer;  }
.container thead th  { padding-left: 0%; }

.container #fixThead th, 
.container #fixThead-fixed th {
      max-width: 110px;
}

#containerPostit .nextWeek, 
#containerPostit .previousWeek { 
    background-color: var(--gray-soft);
    color: black;
}

#fixThead .previousWeek, #fixThead .nextWeek, 
#fixThead-fixed .previousWeek, 
#fixThead-fixed .nextWeek { 
    min-width: 10px; 
    max-width: 80px; 
}

.previousWeek:hover, .nextWeek:hover { 
    cursor: pointer; 
    background-color: #00008B; 
}

#floatablePreviousWeek, #floatableNextWeek{
    cursor: pointer;            
    color: white;
    background-color: #1F418C;  
    border:1px solid black; 
}

#floatablePreviousWeek  { border-right:1px solid #1F418C; }

#arrowRight { 
    position: fixed; 
    right : 0px;     
}

#containerTab { 
    position: relative; 
    margin-top: 25px; 
    width: 100%;
}

#containerTab ul {
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Safari+Chrome */
    box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Opera */
    width: 90%;         margin-left: 5%;
    padding-top: 10px;  border: solid 1px black;
}

/*.today { 
    color: #000; 
    background-color: rgb(75,87,94); 
}*/

#containerPostit .yearThead, #containerPostit #floatableYearThead {
    /*background-color: rgb(0, 171, 196);*/
    /*color: white;   */
    /*font-size: 32px;*/
}

#floatableYearThead { border-right-color: rgb(0, 171, 196); }

/* CHOICE TASK MANAGER */
.blank-space {
    height: 50px;
    display: flex;
    background: rgba(255, 255, 255, 0.959);
    position: fixed;
    z-index: 3;
    top: 0;
    padding-top: 90px;
    width: 100%;
}

.yearThead:hover  { cursor: pointer;        }
#taskManagerTitle { word-wrap: break-word; }

#themesContaine .block ,
.footer-center .block {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.footer-center {
    text-align: center;
    justify-content: center;
    margin: 0 5px;
    display: flex;
    flex-flow: wrap;
    flex: auto;
    border-left: var(--line-division-color);
    border-right: var(--line-division-color);
}

footer #themesContainer .color {
    width: 20px;
    height: 20px;
    background: #FF0000;
    margin: 3px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    color: white;
}

.biography{
    display: block;
    display: -webkit-box;
    height: 20px * 1.4 * 3;
    font-size: 20px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BLOCK */
.blockcpt {
    background: red;
    width: 32px;        
    height: 32px;
    top: -10px;         
    right: -7px;
    position: fixed;    
    border-radius: 15px;
}

.blockcpt .nb { 
    font-size: 17px; 
    line-height: 32px; 
}

/* ----- */
#blank {
    position: fixed;
    background-color: #111;
    opacity: 0.80;  
    top: 0;
    width: 100%;    
    height:100%;
    z-index: 9900;  
    display: none;
}

.btns { margin-top: 20px; }

#blankWithoutColor {
    position: fixed;
    opacity: 0.80;  
    top: 0;
    width: 100%;    
    height:100%;
    z-index: 9902;  
    display: none;
}

#extraction { visibility: hidden; }

#blankLocked {
    position: fixed;
    background-color: #111;
    opacity: 0.80;  
    top: 0;
    width: 100%;    
    height:100%;
    z-index: 9902;  
    display: none;
}

#themesContainer span:hover { cursor: pointer; }

.pheader {
    position: relative; 
    background-color: #1F418C;
    top: 0;             
    left: 0;
    width: 100%;        
    height: 51px;
    line-height: 51px;  
    font-size: 35px;
    text-align: center;
}

.pfooter {
    position: relative; 
    background-color: #1F418C;
    bottom: 0;          
    left: 0;
    width: 100%;        
    height: 80px;
}

#buttonContainer {
    margin-top: 20px;       
    margin-bottom: 20px;
    display: inline-block; 
    position: relative;
    width: 90%;             
    display: flex;
    justify-content: space-around;
}

#buttonContainer button {
    width: calc(30% - 16px);    
    height: 100%;
    display: inline-block;      
    position: relative;
    font-size: 35px;        
    border: 2px solid black;
    border-radius: 15px;
}

#buttonContainer .btnRed, .btnRed               { background-color: rgb(184, 39, 39);                      }
#buttonContainer .btnGray, .btnGray             { background-color: rgb(131, 131, 131);                    }
#buttonContainer .btnGray:hover, .btnGray:hover { background-color: rgba(131, 131, 131, 0.274) !important; }
#buttonContainer .btnRed:hover:not(.btndisabled), .btnRed:hover:not(.btndisabled)   { background-color: rgba(184, 39, 39, 0.329);              }
#buttonContainer .btnBlue, .btnBlue             { background-color: rgb(0,171,196);                        }
#buttonContainer button:hover                   { font-size: 37px;                                           }

.btnBlue[disabled], .btnBlue[disabled]:hover { 
    background-color: rgba(0,171,196, 0.4);
    color: white !important;
}

.btnRed[disabled], .btnRed[disabled]:hover { 
    background-color: rgba(184, 39, 39, 0.4);
    color: white !important;
}

#buttonContainerHead,
.buttonsContainer {
    margin-top: 20px;   
    display: inline-block;
    position: relative;     
}
.bouttonBackContainer {
    margin-left: 5%;
    margin-top: 1%;
    position: fixed;
    z-index: 11;
}

.button, #toogleCalendar.button {
    -webkit-appearance: none;
    font-size: 18px;        
    text-shadow: none;
    line-height: 1.2;       
    display: inline-block;
    border: 0;              
    outline: 0;
    padding: 10px 16px;     
    margin: 0 10px 0 0;
    position: relative;     
    color: white;         
    cursor: pointer;
    white-space: nowrap;    
    border: 3px solid transparent;
    text-align: center;     
    text-overflow: ellipsis;
    text-decoration: none !important;
    font-weight: normal !important;
    border-radius: 10px;
    border: var(--line-division-color-elements);
    min-width: 200px;
    height: fit-content;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    margin: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: #333 !important;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgb(0,171,196) !important;
    border: 1px solid black !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    z-index: 2;
    color: #68a1f7 !important;
    background: linear-gradient(to bottom, #f1f1f1 0%, #a5a5a5 100%) !important;
    border-color: #dee2e6 !important;
}

.dataTables_wrapper .dataTables_paginate .page-item:hover { cursor: pointer !important; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: white;
}
table.dataTable thead .sorting_asc  { background-image: none !important;          }
table thead th                      { background-color: rgba(0, 170, 196, 0.5); }

.button:hover:not(.btnRed:hover, .btndisabled:hover, .loading:hover):not([disabled], [disabled]:hover),
.btnBlue:hover:not(.btndisabled, .loading:hover):not([disabled], [disabled]:hover) {
    cursor: pointer;
    color: black !important;
    transition: .3s;
}

.btnBlue:not(.btndisabled):hover { 
    background-color: rgba(0, 170, 196, 0.438) !important; 
}

#modal-update-task .photo-audit-prev-container {
    margin: 10px 0;
}

#modal-update-task .photo-audit-prev-container,
.photoContainer {
    min-height: 200px;
    max-height: 200px;
    /*border: 2px solid black;*/
    width: 150px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.gralImagecont {
    min-height: 200px;
    height: fit-content;
}

.gralImagecont .photoContainerAdd {
    min-height: 200px;
}


.gralImagecont:not( .picture-container, .newInput ) {
    border: var(--line-division-color-elements);
    box-shadow: 11px 8px 19px -4px rgba(0,0,0,0.35);
    -webkit-box-shadow: 11px 8px 19px -4px rgba(0,0,0,0.35);
    -moz-box-shadow: 11px 8px 19px -4px rgba(0,0,0,0.35);
    border-radius: 10px;
    /*overflow: hidden;*/
}

.gralImagecont.picture-container,
.gralImagecont.newInput {
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
    margin: 0 auto;
    border: 2px dashed var(--gray);
    min-height: 200px;
    height: 200px;
}

.gralImagecont.newInput:hover,
.gralImagecont.picture-container:hover {
    border: 3px dashed var(--gray-hard);
    background-color: rgba(0, 170, 196, 0.473);
    cursor: pointer;
    transition: 0.3s;
    border-radius: 10px;
}

.photoContainer {
    margin-bottom: 10px;
}

#modal-check-photos-container .filenameTextContainer,
#modal-check-nok-photos-container .filenameTextContainer,
#modal-bac-a-sable-confirm .filenameTextContainer,
#updateCardFormContainer .filenameTextContainer {
    width: 150px;
    border-top: var(--line-division-color);
    text-align: center;
    background-color: white;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}


.pdfContainer {
    flex-direction: column;
    justify-content: end;
}

.checkWithImage {
    margin-bottom: 0px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0
}

#modal-check-photos-container .gralImagecont,
#modal-check-nok-photos-container .gralImagecont,
#pictureCheckpointContainer .gralImagecont,
#pictureNokReactionContainer .gralImagecont, 
#modal-bac-a-sable-confirm .gralImagecont { 
    margin-bottom: 20px; 
    position: relative;
}

.actionsChecksContainer {
    border-top: var(--line-division-color-tabs  );
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex;
    padding: 5px;
    justify-content: space-around;
    font-size: 20px;
    width: 150px;
    background-color: white;
    display: flex;
    align-items: center;
}

.actionsChecksContainer .fa-eye:hover { cursor: pointer;            }
/*.photoContainerAdd                  { border: 2px dashed black; }*/

.gralImagecont:not(.newInput, .picture-container):hover {
    cursor: pointer;
    border: 4px solid var(--gray-hard);
}

#modal-update-task .pbody-update-card {
    overflow-x: hidden;

}

.gralImagecont { background: #f1efef; }

.button:hover:not(.btndisabled),
#toogleCalendar.button:hover:not(.btndisabled) {
    color: black;
    transition: .3s;
}

#addTaskManagerForm tbody tr:hover,
#listTaskManager tbody tr:hover {
    background: rgb(0,171,196) !important;
    cursor: pointer;
}


#updateTaskForm { text-align: center; }
#checkpointsContainer input[type=text], #reactionNokContainer input[type=text] {
    min-height: 45px;
}

.checkpointsFormControl {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.updateForm {
    position: relative; 
    width: 90%;
    left: 5%;           
    right: 5%;
}

.updateForm input[type=radio], .updateForm .sectionDaysConfig input[type=checkbox],
#visibility-table-mode .inputFormContainer input[type=radio]   { 
    width: 25px; 
    height: 25px; 
}

.form-check-input:checked {
    background-color: rgb(0,171,196) !important; 
    border-color: rgb(0, 122, 141);
}

.updateForm .radioLabel,
#visibility-table-mode .radioLabel { 
    padding-top: 5px;  margin-left: 10px; 
}

.updateForm .form-check { margin-right: 20px;                   }

.thumbtack {
    position: relative; 
    border-radius: 50%;
    width: 7px;         
    height: 7px;
    border: 1px solid #000000;
    margin: 0 auto;     
    top: -7px;
}

#topContainer { 
    position: relative; 
    width: 100%; 
    height: auto; 
}

#topContainer #left {
    position: relative;
    display: inline-block;
    width: 50%;         
    height: 100%;
    left: 0;
}

#topContainer #right {
    position: relative; 
    display: inline-block;
    width: 50%;         
    height: 100%;
    float: right;       
    margin-bottom: 20px;
}

#topContainer #right label, 
#topContainer #left label { 
    display: block;
    text-align: center; 
}

#topContainer #right select { 
    position: relative; 
    display: block; 
    margin: 0 auto; 
}

#choiceThemesContainer span, #themes span {
    position: relative;     
    width: calc(50% - 16px);
    display: inline-block;  
    text-align: center;
    font-size: 31px;       
    padding: 4px;
    margin: 4px;            
    color: #FFFFFF;
}

#choiceThemesContainer span:hover { 
    cursor: pointer; 
    opacity: 0.65;
}

.themeActive                    { opacity: 0.65;                }
#listThemes a                   { font-size: 30px;              }

#listThemes input { 
    width: 30px; 
    height: 30px;    
}

#listThemes { 
    width: 60%; 
    margin-left: 40%; 
}

#listTaskManagerToTheme a       { font-size: 30px;              }

#listTaskManagerToTheme input { 
    width: 30px; 
    height: 30px;    
}

#addUserForm #listTaskManager { 
    width: 85%; 
    margin: auto;     
}

#addTaskManagerForm .search, 
#updateFormTaskManager .search {
    text-align: center;
}
#addTaskManagerForm .search input { width: 180px; }

#updateFormTaskManager .search input {
    width: 180px;
    height: 8px;
}

.mdp-custom .ui-widget-content a:hover, 
.mdp-custom .ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
    background-color: rgba(0, 170, 196, 0.966) !important;
}

#mdp-closedDays { margin: 15px auto 0 auto; }

/* POST-IT HOVER */
.label { 
    font-size: 27px; 
    display: block; 
    margin-bottom: 20px; 
}

.details { 
    font-size: 41px; 
    font-weight: bold; 
}

.lateDate {
    width: 80%;                 
    background-color: #FFF;
    border: 2px solid black;   
    margin: auto;
    border-radius: 10px;        
    margin-bottom: 15px;
}

#containerButtonInBigTask { 
    width:100%; 
    display: inline-block; 
}

/* ADD TASK */
#postitNb {
    font-size: 21px;    
    color: #000;
    padding: 10px;      
    width: 50px;
    text-align: center;
}

#buttonModif {
    float:right;        
    display: inline-block;
    width: 15%;         
    height: auto;
    margin: auto;       
    margin-right: 20px;
    padding-top: 2px;   
    padding-bottom: 2px;
}

#buttonModif img { width: 100%; }

#buttonArchiveTask {
    display: inline-block;  
    width: 15%;
    margin: auto;           
    height: auto;
    padding-top: 2px;      
    padding-bottom: 2px;
    float:left;             
    margin-left: 20px;
}

#buttonArchiveTask img { width: 100%; }

#buttonArchiveTaskInTaskManager {
    visibility: hidden; 
    position: fixed;
    width: 9%;          
    height: auto;
    margin-top: 200px;  
    margin-left: 93%;
    z-index: 9;
}

#buttonArchiveTaskInTaskManager img { 
    display: block; 
    width: 60%; 
}

#buttonShareTask {
    position: relative; 
    width: 15%;
    margin: auto;       
    height: auto;
    padding-top: 2px;   
    padding-bottom: 2px;
    float:left;         
    margin-left: 20px;
    margin-right: -15%;
}

#buttonGoToTab {
    position: relative; 
    width: 10%;
    margin: auto;       
    height: auto;
    padding-top: 2px;    
    padding-bottom: 2px;
    float:left;         
    margin-left: 20px;
    margin-right: -15%;
}

#buttonShareTask img { width: 100%; }
#buttonGoToTab img   { width: 100%; }

/* ADD USER */
form input { color: #000; }

.post-it {
    background: #FF00C6;    
    padding:15px;
    font-size:15px;         
    color: #000;
    width:200px;
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
}

/* FOOTER */
footer {
    position: fixed;    
    bottom: 0;
    width: 100%;        
    background-color: var(--footer-color);
    border-top: var(--line-division-color-tabs);
    padding-top: 5px;   
    padding-bottom: 5px;
    text-align: center;
    display: block;
    z-index: 100;
    padding: 0 10px;
}

.footer-content {
    display: flex;
    width: 100%;
}

footer #themesContainer div {
    width: auto; 
    text-align: center; 
    font-size: 13px; 
    padding-right: 5px; 
    color: black;
}

footer #themesContainer div:hover { cursor: pointer; }

/* PARAMETERS USERS */
#tabUsersOK { 
    width: 60%; 
    margin: auto; 
}

#tabUsersNOK { 
    width: 60%; 
    margin: auto; 
}

#tabUsersOK div:not(#droppableUserOK) {
    color: black;               
    width: 100%;
    border: 1px solid black;    
    text-align: center;
    display: inline-block;        
    position: relative;
    height: 33px;                 
    font-size: 20px;
    line-height: 33px;
}

#tabUsersOK i, #tabUsersNOK #usersList i { position: absolute; }

#tabUsersOK i.arrow {
    font-size: 25px;
    right: 33px;
}

#tabUsersOK i.trash {
    font-size: 18px;
    right: 5px;
    top: 9px;
}

#tabUsersNOK #usersList i {
    font-size: 21px;
    right: 20px;
    top: 6px;
}

#tabUsersOK i:hover, #tabUsersNOK #usersList i:hover { cursor: pointer; }
#tabUsersOK i.up {
    top: -6px;
}
#tabUsersOK i.down { bottom: -3px; }

#droppableUserOK, #droppableUserNOK {
    color: white;               
    width: 100%;
    border: 1px solid black;    
    text-align: center;
    display: inline-block;      
    position: relative;
    height: auto;               
    background-color: #1F418C;
    font-size: 30px;
}

#tabUsersNOK div:not(#droppableUserNOK) {
    color: black;               
    width: 100%;
    border: 1px solid black;    
    text-align: center;
    display: inline-block;        
    position: relative;
    height: 33px;                 
    font-size: 20px;
    line-height: 33px;            
    background-color: white;
}

#searchUsersNOKContainer {
    color: #1f418c;
    margin-bottom: 8px;
}

#searchUsersNOK {
    width: 150px;
    height: 8px;
    margin-bottom: 0px;
}

#returnTabUsers {
    width: 40%;    
    display: block;
    margin: auto;  
    margin-bottom: 50px;
}

.optionCheckContainer  { display: flex; }
.finalButtonsContainer { display: flex; }

#titleParameter {
    position: relative; 
    top: 150px;
    color: #1F418C;     
    text-align: center;
}

.containerHalf {
    position: relative; 
    height: auto;
    width: 100%;        
    display: inline-block;
}

.containerHalf .left { 
    width: 50%; 
    float: left; 
    margin-top: 33px; 
}

.containerHalf .right { 
    width: 50%; 
    float: right; 
    margin-top: 33px; 
}

.mix .left, .mix .right { 
    width: 50%; 
}

.containerHalf #buttonContainer { 
    margin-top: 0; 
    margin-bottom: 0; 
}

.mobile             { display: none; }

#footerText         { 
    font-size: 18px; 
    padding: 0 10px; 
    width: fit-content;
    text-wrap: nowrap;
}

.footer-left {
    padding: 12px 0;
}

#timeAlertContainer { text-align: center; }

#addTaskManagerForm #hourContainer, #addTaskManagerForm #minutesContainer {
    text-align: center;
    display: block;
}

#addTaskManagerForm input[type="number"] { width: 20%; }

#shareTaskContainer { 
    width: auto; 
    text-align: center; 
}

#topContainer #right #shareTaskContainer label {
    display: inline-block;
    font-size: 25px;
}

#shareTask { 
    width: 15px; 
    height: 15px; 
}

#nameCurrentUser                    { font-size: 40px;    }
#unlockTaskManager                  { text-align: center; }
.actionInDesc td a                  { color: #1F418C;   }
.actionInDesc td                    { border:0px;         }
.actionInDesc .tdValueActionInDesc  { width:100%;         }

.actionInDesc .valueInActionInDesc { 
    font-size: 31px; 
    margin:0; 
}

#tableToActionInDesc tbody                       { font-size: 31px; }
#tableToActionInDesc td                          { width: 100%;     }
#tableToActionInDesc td, #tableToActionInDesc th { border: none;    }
#usersTask                                       { max-width: 100%; }

/*TASK LIST*/
#containerListTask { 
    width: 90%; 
    margin:auto; 
    margin-top: 50px; 
}

.tasklist {
    color: black;               
    width: 15%;
    background: grey;           
    display: inline-block;
    margin: 10px calc(10%/12);  
    padding-top: 10px;
    text-align: center;         
    font-size: 25px;
    overflow: hidden;           
    vertical-align: bottom;
}

.tasklist:hover { cursor: pointer;                       }
#headerList     { margin-top: 100px;                     }
.taskBiggest li { list-style-type: none;                 }
#titleList      { text-align: center; margin-top: -50px; }


/* ----- CARDS ----- */
.cardCaseContainer { 
    display: inline-block; 
    position: relative; 
    width: 100%; 
}

.card-verticalcenter { 
    display: inline-block; 
    line-height: initial; 
}

.blockCard { padding: 5px 0px; }

#card-themes { 
    height: 90px;  
    opacity: 0.5;   
    line-height: 90px; 
}

#card-themes-critical { 
    left: 10px; 
    top: 10px; 
}

/*#card-themes-critical img { width: 25px; }*/

#card-themes span {
    position: relative; 
    vertical-align: middle;
    font-size: 31px;    
    color: #FFFFFF;
    top: 23px;
}

#card-taskmanagername {
    margin-left: -8px;
    font-weight: bold;
    padding: 50px;
}

.modal-title { margin: 0 auto; }

#card-checkpoints { 
    width: calc(100% - 2px); 
    margin-top: -1px; 
}

#card-checkpoints-title { 
    text-align: left; 
    font-weight: bold; 
    margin: 5px 10px; 
}

#modal-update-task #modal-card-checkpoints-list,
#modal-update-task #modal-card-checkpoints-nok-list { 
    text-align: left; 
    margin-left: 10px; 
}

#card-nok { width: calc(100% - 2px); }

#card-nok-title { 
    text-align: left; 
    font-weight: bold; 
    margin: 5px 10px; 
}

#card-nok-list { 
    text-align: left; 
    margin-left: 10px; 
}

#modal-complete-comment .complete-commentary {
    /*display: none;*/
    margin-bottom: 15px;
}

#modal-complete-comment .complete-commentary textarea {
    margin: 10px 0px;
}

#modal-update-task #modal-card-nok-non-read-ctn { 
    float: left;
}

.containerCardPopup div { 
    width: 50%; 
    float: left; 
}

.containerCardPopup .pictures img { margin: 0 50%; }

/* TABLE */

.title-table-tr                   { height: 40px;                 }
.title-table-tr .title-text       { 
    background-color : var(--gray-soft-2); 
}
.title-table-tr .title-text:hover { cursor: auto;                 }

.container #fixThead .previousWeek, 
.container #fixThead .nextWeek,
.container #fixThead-fixed .previousWeek, 
.container #fixThead-fixed .nextWeek {
    width: 5%;
}

#containerPostit #nextWeek,
#containerPostit #previousWeek {
    cursor: pointer;
}

#fixThead, #fixThead-fixed {
    position: unset;
    z-index: 2;
}

.checkPointsContainer {
    margin: 10px 0;
    padding: 15px;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--gray);
}

.checkPoints {
    border-bottom: var(--line-division-color);
    height: fit-content;
    padding: 15px 0;
    min-height: 200px;
}

.checkPointsTop {
    border-top: 3px solid lightgrey;
}

.checksRight {
    border-right: 3px solid lightgrey;
}

.checkTitle {
    padding: 10px 2px;
    background-color: #e9ecef;
}

.containerCheckContent  { display: flex;     }
.checks                 { min-height: 100px; }

.checkPhotosContainer {
    padding: 10px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    flex-direction: row;
    font-size: 1rem;
    gap: 20px;
}

.containerCenterPhotos {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.sectorServiceContainer {
    display: inline-flex;
    justify-content: center;
}

#containerChoiceTaskManager-fixed { z-index: 200;              }
#fixThead-fixed tr                { background-color: white; }

.addChecks {
    background-color: rgb(0,171,196);
    color: white;
    border: 2px solid black;
    border-radius: 10px;
    width: 50px;
    margin: 0 auto;
}

.error        { color: red;  }
.errorDisplay { display: none; }

#modal-update-card .listCheckcontent,
#addTaskForm .listCheckcontent {
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid black;
    -webkit-box-shadow: 11px 8px 19px -4px rgba(0, 0, 0, 0.124);
}

.checkText  {
    border: 2px solid gray;
    border-radius: 10px;
    padding: 0px 20px
}

.tableChecks          { margin-bottom: 0;                             }
.tableChecks tbody tr { background: #e1e1e1;                        }
.tableChecks thead    { background-color: rgba(0, 170, 196, 0.507); }

.checkListWithTable {
    padding: 30px;
    padding-top: 0;
}

.inputFit .input-group           { height: fit-content;                           }
.tableChecks th, .tableChecks td { border: none;                                  }
.tableChecks td                  { border-bottom: 1px solid rgb(158, 158, 158); }
.config_card_mode                {  padding: 15px 0 15px 0;                       }

.fa-trash-alt, .fa-pencil-alt { cursor: pointer;     }
.prinInformationContainer     { border-radius: 20px; }

#modal-update-card .input-group-text.input-left { min-width: 190px; }

.photo-icon {
    font-size: 40px;
    opacity: 0.3;
}

table * { border: none; }

table th, table td {
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
    border-bottom: none;
    border-left: 1px solid var(--gray);
}

#postitTab td {
    background-color: white;
}

table th:last-child, table td:last-child { border-right: 1px solid var(--gray);      }
input[type=search]                       { border: 2px solid var(--gray-hard) !important; }
.orderNumber, .ordre                     { display: none;                        }
.actionRow                               { width: 15% !important;                }

.sort-button {
    right: 5px;
    font-size: 27px;
    color: rgba(255, 255, 255, 0.5);
}

.sort-button:hover { cursor: pointer; }

.sort-button.up {
    /*margin-left: 10px;*/
    top: 12px;
}

.cards-column-cont {
    display: flex; justify-content: center;
}

.cards-column-title-cont {
    margin-right: auto; margin-left: auto;
}

.cards-sort-container {
    width: fit-content; margin-left: auto; margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
}
  
.titleTr {
    display: inline-block;
    max-width: 90px;
}
  
.sort-button.down   { bottom:  12px;               }
.sort-button.active { color: rgb(255, 255, 255); }

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
}
  
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }

#kpiContainerRight .tooltip .tooltiptext {
    margin-left: 100%;
    margin-top: 100%;
}
  
.tooltip:hover .tooltiptext { visibility: visible;  }
#return .tooltiptext        { font-size: 14px;      }

footer .footer-content .footer-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  color: black  ;
}

footer .logo img {
  max-width: 220px;
  max-height: 30px;
}

navbar-bottom-group span.tooltiptext { font-size: 14px; }

#loadGralContainer .loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border-top: 16px solid rgb(0,171,196);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loadGralContainer {
    width: 100%;
    height: 100vh;
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, 
                                       rgb(230, 230, 230) 28%, 
                                       rgb(230, 230, 230) 82%, 
                                       rgb(255, 255, 255) 100%);
    position: fixed;
    top: 0;
}

#loadGralContainer .loaderImg {
        z-index: 1900;
        margin-left: 100px;
        margin: 0 auto;
        height: auto;
        margin-top: 45vh;
        height: auto;
}

#loadGralContainer .imgLoaderContainer {
    width: auto;
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
}

#loadGralContainer .imgLoaderContainer img {
    margin-right: 30px;
    margin-top: 25px;
}

#loadCustom {
    width: 100%;
    height: 30vh;
    display: flex;
    align-items: center;
    /*background: linear-gradient(90deg, rgb(255, 255, 255) 0%, 
                                       rgb(230, 230, 230) 28%, 
                                       rgb(230, 230, 230) 82%, 
                                       rgb(255, 255, 255) 100%);*/
}

#loadCustom .loader {
    position: sticky;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border-top: 16px solid rgb(0,171,196);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loadCustom .loaderImg {
        z-index: 1900;
        margin-left: 100px;
        margin: 0 auto;
        height: auto;
}

#loadCustom .imgLoaderContainer {
    width: auto;
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
}

#loadCustom .imgLoaderContainer img {
    margin-right: 30px;
    margin-top: 25px;
}

.importContainer {
    height: fit-content;
    margin: 0 auto;
    border-radius: 15px;
    padding: 50px 0;
}

.elementImportContainer {
    background-color: var(--gray-soft-2);
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sectionCardUsersToSelect {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    max-height: 400px;
    overflow: auto;
    border: none;
}

.individualUser .select_contain{
    justify-content: center;
}

.individualUser .name_contain { 
    max-height: 60px;
    overflow: hidden;
}

.individualUser {
    height: fit-content;
    width: fit-content;
    padding: 20px;
    margin: 0 10px;
    border-radius: 10px;
    max-width: 200px;
    box-sizing: initial;
    min-height: 200px;
    min-width: 200px;
    border: 1px solid rgba(129, 129, 129, 0.611);
    overflow: hidden;
    margin-bottom: 20px;
}

.individualUser:hover {
    background-color: rgb(94, 94, 94);
    opacity: 0.6;
    cursor: pointer;
    transition: 0.3s;
}

.individualUser .select_contain { word-break: break-all; }


.select_contain { display: flex; }
footer          { z-index: 101;  }

.container_user_img {
    height: 100px;
    width: 100px;
    background-size: auto;
    border-radius: 50%;
    border: 2px solid black;
    background-repeat: no-repeat;
    box-shadow: 10px 7px 14px -10px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 7px 14px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 7px 14px -10px rgba(0,0,0,0.75);
    margin: 0 auto;
    background-repeat: no-repeat; 
}

.form-control.colorThemeInput {
    padding: 1px !important;
    border:  none;
} 

#menu-username:hover {
    background-color: rgb(193, 193, 193);
    cursor: pointer;
    border-radius: 5px;
}

.sectionModeConfig  {
    border: 1px solid rgba(60, 60, 60, 0.63);
    padding: 20px;
    margin-bottom: 10px;
}

.sectionControlTypeToSelect {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: left;
}

.selectFrequencyGralContainer {
    background-color: rgba(152, 152, 152, 0.266);
    height: fit-content;
    display: flex;
    border-radius: 20px;
}

.selectFrequencyGralContainer .frequencyLeft,
.selectFrequencyGralContainer .frequencyRight {
    height: auto;
    padding: 20px;
    margin: 20px 0 ;
}

.selectFrequencyGralContainer .frequencyRight            { border-left: 1px solid rgb(110, 110, 110); }

.selectFrequencyGralContainer .form-check {
    text-align: initial;
    margin-bottom: 20px;
}

.selectFrequencyGralContainer .freqRightTitle { text-align: left; margin-bottom: 20px;}

.monthDaysChecksContainer .form-check-month {
    width: fit-content;
    height: fit-content;
    text-align: initial;
    margin-bottom: 20px;
    margin-right: 20px;
    display: block;
    text-align: center;
}

.checkmonth {
    width: 25px;
    height: 25px;
    display: block;
}

.monthDaysChecksContainer .labelmonth {
    margin-left: 0;
    padding-top: 0;
}

.calendarDays {
    display: flex;
    flex-wrap: wrap;
}

.notAvailable {
    background: linear-gradient(-45deg, #cac9c938 5%, #fff 5%, #fff 45%, #cac9c938 45%, #cac9c938 55%, #fff 55%, #fff 95%, #cac9c938 95%);
    background-size: 50px 50px;
    background-position-y: bottom;
}

.notAvailable .draggable{
    opacity: 0.7;
}

#postitTab .today {
    background-color : #DCDCDC;
}

.options-mail-text {
    width: max-content;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.25rem;
    /*margin-bottom: 7px;*/
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.btndisabled {
    background-color: rgba(239, 239, 239, 0.3);
    color: rgb(65, 65, 65);
}

.planningAdhesionContainer,
.planningConformityContainer,
.planningNokContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
}

#boardContainerLeft.weeklyBoard #postitTab li {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
}

#postitTab .yearThead,
#postitTab-fixed .yearThead {
    width: 15%;
}

#postitTab .thUser,
#usersTable .thUser {
    width: 15%;
}

#fixThead-fixed .day0,
#fixThead-fixed .day1,
#fixThead-fixed .day2,
#fixThead-fixed .day3,
#fixThead-fixed .day4 {
    width: 15%;
}

#postitTab .monday,
#postitTab .tuesday,
#postitTab .wednesday,
#postitTab .thursday,
#postitTab .friday {
    width: 15%;
}

.loading:hover{ 
    cursor: progress !important;
}

.btnBlue.loading, .btnBlue.loading:hover {
    background-color: rgba(0,171,196, 0.3) !important;
    color: white !important;
}

.nav-tabs {
    border-bottom: var(--line-division-color);
}

/* RESPONSIVE */
@media screen and (max-width: 1920px) {    
}

@media screen and (max-width: 1840px) {
    
    #modal-update-card .input-group-text { min-width: 150px; }

}
@media screen and (max-width: 1500px) {
    
    .inputTitleText { font-size: 30px; }

}

@media screen and (max-width: 1280px) {
    
    .inputTitleText { font-size: 15px; }
}

@media screen and (max-width: 1180px) {
    
    /* HEADER */
    #logoFaurecia { 
        height: 20px; 
        top: 22.5px; 
    }

    #headerUser { 
        font-size: 21px; 
        top: 22px; 
    }

    input[type=date] { 
        display: inherit; 
        margin: 0 auto;  
    }

    .containerFormPopup { 
        width: 90%; 
        margin-left: 5%; 
        text-align: center; 
    }

    #buttonContainer, #buttonContainerHead { margin-left: 0; }
    #topContainer                          { height: auto;   }
    
    #topContainer #left, #topContainer #right {
        position: relative; 
        width: 100%;
        display: block;     
        left: 0;
    }

    #topContainer #right { 
        margin-top: 25px; 
        top: 0; 
    }

    #left label { 
        display: block; 
        text-align: center; 
    }

    #listThemes { text-align: left; }
    .mobile     { display: none; }

    .individualUser {
        min-height: 100px;
        min-width: 100px;
        max-height: 100px;
        max-width: 100px;
    }

    .individualUser img {
        width: 50px !important;
        height: 50px !important;
    }
    .individualUser p {
        font-size: 10px;
    }
/* }

@media screen and (max-width: 980px) { */
    
    .mobile                 { display: inline; }
    .desktop                { display: none;   }
    .mix .left, .mix .right { width: 100%;     }

    .tasklist { 
        width: 25%; 
        margin:10px calc(25%/6); 
    }

    #cards #leftContainer { 
        width: 100%; 
        float: none; 
    }

    #cards #rightContainer { 
        width: 100%; 
        float: none; 
    }
/* }

@media screen and (max-width: 900px) { */

    .radioTxt    { font-size: 21px; }
    
    #postitTab{ 
        width: 97%; 
        margin-top: 0px; 
    }

    .floatable                          { left:2.5%;          }
    .fixed                              { position: relative; }
    #tabUsersOK div, #tabUsersNOK div   { font-size: 18px;    }
    .mobile                             { display: inline;    }
    .desktop                            { display: none;      }
    #buttonArchiveTaskInTaskManager     { visibility: hidden; }
}

@media screen and (max-width: 680px) {

    #deleteUser { font-size: 21px; }

    #deleteUser { 
        position: relative; 
        display: block; 
    }

    #adminCtn   { display: block;   }
    .mobile     { display: inline;  }
    .desktop    { display: none;    }
}

@media screen and (max-width: 650px) {
    .mobile                 { display: inline; }
    .desktop                { display: none;   }
    #alertImage             { right: 121px;    }
    #logout                 { font-size: 11px; }
    header                  { min-width: 0;    }
    #headerUser             { font-size: 12px; }
    #themesContainer span   { width: 100%;     }

    footer #themesContainer, .tabDay, #headerUser { 
        display: none; 
    }

    #postitTab { 
        width: 100%;
        margin-left: 0;
    }

    .container thead .today { padding: 0; }

    .yearThead, #floatableYearThead, 
    #postitTab .thUser, #usersTable .thUser, tbody, thead, .floatable div {
        font-size: 10px;
    }

    #cards table tbody  { font-size: 18px;      }
    .floatable          { left: 0; width: 100%; }


    /* Add User */
    #addUserForm label, #admin {
        left: 0;        
        text-align: center;
        width: 100%;    
        display: inline-block;
    }

    #addUserForm #avatar { 
        margin-left: 0; 
        margin: 0 auto; 
        display: block; 
    }

    .containerForm h1, #addUserForm label, 
    #addUserForm input[type="text"], #addUserForm input[type="password"], 
    #addUserForm input[type="email"], #addUserForm input[type="tel"], 
    #addUserForm #admin .radioTxt {
        font-size: 21px;
    }

    #addUserForm input[type=submit], 
    #addTaskForm input[type=submit], 
    #themesContainer span, #usersTask, 
    #addTaskForm input[type="text"], 
    #addTaskForm textarea, 
    #addTaskForm input[type="date"], 
    #addTaskForm select {
        font-size: 21px;
    }

    #addTaskForm select { 
        display: block; 
        margin: 0 auto; 
    }

    .containerForm .button { 
        width: 100%;
        padding-left: 0; 
    }

    #topContainer #right select { margin-bottom: 21px; }

    #addTaskForm label {
        text-align: center;
        display: inline-block;  
        width: 100%;
    }

    #topContainer, #usersTask { 
        width: 100%; 
        left: 0%; 
    }

    #tabUsers div   { font-size: 22px; }
    #theadOrder     { font-size: 5px;  }
    #tabUsers img   { display: none;   }

    .imgButton img { 
        width: 40px; 
        margin-left: 2px; 
        margin-right: 2px; 
    }

    #listThemes a { font-size: 15px; } 
    
    #listThemes input { 
        width: 15px; 
        height: 15px; 
    }
    
    #listUsers-add-taskmanager a, 
    #listAdmin-add-taskmanager a, 
    #redactors-add-taskmanager a { 
        font-size: 15px; 
    }
    
    #listUsers-add-taskmanager input, 
    #listAdmin-add-taskmanager input,
    #redactors-add-taskmanager input {
         width: 15px; height: 15px; 
    }

    #listTaskManagerToTheme a { font-size: 15px; }
    
    #listTaskManagerToTheme input { 
        width: 15px; 
        height: 15px;
    }

    #listTaskManager a { font-size: 15px; }
    
    #listTaskManager input { 
        width: 15px; 
        height: 15px; 
    }

    #listAdmin a, #redactors a { font-size: 15px; }
    #listAdmin input, #redactors input { 
        width: 15px; 
        height: 15px; 
    }

    #archiveTaskManager { font-size: 18px; }
    #footerText { 
        font-size: 15px; 
        padding: 7px; 
    }

    #hourContainer, #minutesContainer               { display: block; }
    #hourContainer                                  { margin-bottom: 15px; }
    #topContainer #right #shareTaskContainer label  { font-size: 15px; }
    
    #deleteUser { 
        word-wrap: normal; 
        width: 25%; 
    }

    #addTaskManagerForm #name   { width: 70%;      }
    #nameCurrentUser            { font-size: 30px; }
    #titleList                  { font-size: 20px; }
    
    .tasklist { 
        width: 42%; 
        margin:7px calc(16%/4); 
    }
}

@media screen and (max-width: 750px) {
    
    footer                           { width: 100% !important; }
    footer .footer-center .block div { display: none;          }
    footer #footerText               { font-size: 10px;        }
}

@media screen and (max-width: 1200px) {
    
    footer .logo img {
        max-width: 120px;
        max-height: 10px;
    }
}