/* definition des blocs*/
.dt-block
{
margin:             10px;
border:             1px solid var(--block-bg-color);
border-radius:      4px;
}

.dt-block-title
{
font-weight:        600;
font-size:          14px;
color:              var(--block-title-color);
background-color:   var(--block-bg-color);
text-align:         center;
padding:            0 5px;
}

.dt-block-subtitle
{
font-weight:        400;
font-size:          14px;
text-align:         center;
color:              var(--block-title-color);
background-color:   var(--block-bg-color);
}

.dt-block-text
{
font-size:          11px;
padding:            0 10px;
margin-top:         10px;
text-align:         center;
color:              var(--block-color);
}

/* tableau */
.dt-table
{
display:            table;
}

.dt-table-row,
.dt-table > div,
div[style*="display: table"] > div
{
display:            table-row;
height:             20px;
}

.dt-table-cell,
.dt-table > div > div,
div[style*="display: table"] > div > div
{
display:            table-cell;
vertical-align:     middle;
}

.dt-table-title
{
font-weight:        600;
font-size:          12px;
color:              var(--block-title-color);
background-color:   var(--block-bg-color);
text-align:         center;
}

.dt-table-subtitle
{
font-weight:        400;
font-size:          12px;
color:              var(--block-title-color);
background-color:   var(--block-bg-color);
text-align:         center;
}

.dt-table-text
{
font-size:          12px;
color:              var(--text-color-gray-5);
background-color:   white;
}

.dt-table-link
{
color:              var(--button-bg-color);
text-decoration:    none;
/*font-weight:        bolder;*/
}

.dt-table-link:hover
{
text-decoration:    underline;
color:              var(--button-hover-bg-color);
}

/**/
.dt-label
{
text-align:     right;
/*font-weight:    600;*/
font-size:      1em;
color:          var(--text-color-gray-6);
}

.dt-data
{
/*color:          rgb(86,160,211);*/
color:          var(--text-color-gray-5);
font-size:      11px;
/*font-weight:    normal;*/
/*font-weight:    400;*/
}

.dt-font-medium
{
font-size:      13px;
}

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

.font-normal
{
font-weight:    normal;    
}

.dt-font-small
{
font-size:      9px;
}

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

.dt-font-underline
{
text-decoration:     underline;
}

.dt-ok
{
background-color:   var(--status-ok-color);
border:             1px solid var(--status-ok-border-color);;
color:              white;
}

.dt-ko
{
background-color:   var(--status-ko-color);
border:             1px solid var(--status-ko-border-color);
color:              white;
}

.dt-pending
{
background-color:   var(--status-pending-color);
border:             1px solid var(--status-pending-border-color);
color:              white;
}

.dt-status
{
display:            inline-block;
border-radius:      .5em;
padding:            0 .5em;    
}

.network-status
{
/*display:            inline-block;    */
font-size:          12px;
}

.table-border
{
border: 1px solid rgb(109, 110, 112);
}

.icon-small-2-button
{
height:     11px;
width:      11px;
cursor:     pointer;
}

.icon-16-button
{
height:     16px;
width:      16px;
cursor:     pointer;
}

.icon-20-button
{
height:     20px;
width:      20px;
cursor:     pointer;
}

.icon-medium-button
{
height:     20px;
width:      20px;
cursor:     pointer;
}

.icon-20-round-border 
{
/*border:         solid 1px;*/
border-radius:  11px;
margin:         5px;
width:          20px;
height:         20px;
}

icon-20-round-border.icon-color-button-bg
{
border-color:   var(--button-bg-color);
}

.border-color-pink
{
border-color:   var(--text-color-pink);
}


.dt-icon-16,
.dt-container-16
{
height:                 16px;
width:                  16px;
}

.dt-icon-24,
.dt-container-24
{
height:                 24px;
width:                  24px;
}

.dt-accordion
{

transition:         opacity .5s, height .5s;
-webkit-transition: opacity .5s, height .5s;
-moz-transition:    opacity .5s, height .5s;
-o-transition:      opacity .5s, height .5s;      
}

.icon-color-text-color-6
{

filter: invert(12%) sepia(7%) saturate(1036%) hue-rotate(164deg) brightness(98%) contrast(90%);
}

.icon-color-white
{

filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.icon-color-text-color-1
{
filter: invert(20%) sepia(99%) saturate(2224%) hue-rotate(180deg) brightness(99%) contrast(101%);
}

.icon-color-text-color-5
{
filter: invert(66%) sepia(17%) saturate(6414%) hue-rotate(159deg) brightness(90%) contrast(87%);
}

.icon-color-pink
{
filter: invert(52%) sepia(54%) saturate(6653%) hue-rotate(305deg) brightness(99%) contrast(94%);    
}

.icon-color-alert
{
filter: invert(65%) sepia(58%) saturate(5405%) hue-rotate(324deg) brightness(112%) contrast(95%);   
}

.icon-color-pink-nohover
{
filter: invert(52%) sepia(54%) saturate(6653%) hue-rotate(305deg) brightness(99%) contrast(94%);    
}

.icon-color-gray5
{
filter: invert(32%) sepia(0%) saturate(425%) hue-rotate(277deg) brightness(91%) contrast(81%); 
}

.icon-color-gray6-invert
{
filter:invert(99%) sepia(1%) saturate(1558%) hue-rotate(186deg) brightness(104%) contrast(60%);
}

.icon-color-account-menu-border
{
filter: invert(91%) sepia(6%) saturate(214%) hue-rotate(165deg) brightness(89%) contrast(95%);
}

.dt-container-16.icon-color-button-bg-hover > div:first-child
{
filter:    invert(29%) sepia(93%) saturate(824%) hue-rotate(163deg) brightness(97%) contrast(103%);    
}

.dt-container-16.icon-color-valid  div:first-child,
.icon-color-done
{
filter:     invert(61%) sepia(40%) saturate(4363%) hue-rotate(80deg) brightness(114%) contrast(127%)
}

.dt-container-16.icon-color-cancel  div:first-child
{
filter:     invert(14%) sepia(79%) saturate(7145%) hue-rotate(2deg) brightness(94%) contrast(120%);
}

.dt-container-16.icon-color-button-bg  div:first-child,
.dt-container-16.icon-color-button-bg-invert  div:first-child,
.icon-20-round-border.icon-color-button-bg > div:first-child,
.dt-button-reverse > div:first-child,
.dt-icon-16.icon-color-button-bg,
.dt-button-reverse-2 .icon-color-button-bg
{
filter:    invert(60%) sepia(80%) saturate(1548%) hue-rotate(160deg) brightness(88%) contrast(92%);   
}

.dt-container-16.icon-color-button-bg-invert:hover  div:first-child
{

filter:    initial;
}

.icon-color-text-color-1.dt-icon-close:hover,
.icon-color-text-color-5.dt-icon-close:hover,
.dt-button:hover > .icon-medium-button,
.dt-button > .icon-medium-button,
.dt-container-16.icon-color-button-bg-hover:hover > .icon-medium-button,
.dt-container-16.icon-color-button-bg-hover:hover > .icon-16-button,
.dt-container-16.icon-color-button-bg:hover > .icon-medium-button,
.dt-container-16.icon-color-button-bg:hover  .icon-16-button,
.dt-container-16.icon-color-valid:hover  .icon-16-button,
.dt-container-16.icon-color-cancel:hover  .icon-16-button,
.dt-container-16.icon-color-button-bg-invert:hover  .dt-icon-delete.icon-16-button,
.dt-container-16.icon-color-button-bg-invert:hover  .dt-icon-transfer.icon-16-button,
.icon-20-round-border.icon-color-button-bg:hover > .icon-16-button,
.dt-button-reverse:hover > div:first-child
{
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}



.icon-color-text-color-1.dt-icon-close + div,
.icon-color-text-color-5.dt-icon-close + div
{
background-color: transparent;
}

.icon-color-text-color-1.dt-icon-close:hover + div
{
background-color: var(--text-color-1);
}

.icon-color-text-color-5.dt-icon-close:hover + div
{
background-color: var(--text-color-blue-4);
}

.icon-color-pink:hover,
.border-color-pink:hover > .icon-color-pink,
.dt-container-pink:hover > .icon-color-pink
{
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.border-color-pink
{
border-color: var(--text-color-pink)
}

.dt-container-pink:hover,
.border-color-pink:hover
{

background-color: var(--text-color-pink)  !important  
}


.dt-container-16.icon-color-button-bg-hover:hover,
.dt-container-16.icon-color-button-bg:hover,
.icon-20-round-border.icon-color-button-bg:hover,
.dt-container-16.icon-color-button-bg-invert:hover
{

background-color: var(--button-hover-bg-color)  !important  
}

.dt-container-16.icon-color-valid:hover
{
background-color:   green     !important 
}

.dt-container-16.icon-color-cancel:hover
{
background-color:   red       !important 
}

.box-shadow.icon-color-button-bg
{
box-shadow: 0px 0px 3px 0px var(--button-bg-color);  
-moz-box-shadow: 0px 0px 3px 0px var(--button-bg-color);
-webkit-box-shadow: 0px 0px 3px 0px var(--button-bg-color);
}

.hv-center
{

position:           relative;
top:                50%;
left:               50%;
transform:          translate(-50%, -50%);
-webkit-transition: translate(-50%, -50%);
-moz-transition:    translate(-50%, -50%);
-o-transition:      translate(-50%, -50%);
}

#div_file_view,
.dt-pict-link
{
display:            inline-block;
border:             1px outset black;
margin:             1px 3px;
padding:            2px;
border-radius:      4px;
background-color:   var(--prop-sheet-selected-bg-color);
color:              var(--text-color-gray-5);
font-size:          13px;
}

.v-center
{

position:           relative;
top:                50%;
transform:          translate(0%, -50%);
-webkit-transition: translate(0%, -50%);
-moz-transition:    translate(0%, -50%);
-o-transition:      translate(0%, -50%);
}

.h-center
{

position:           relative;
left:               50%;
transform:          translate(-50%, -0%);
-webkit-transition: translate(-50%, -0%);
-moz-transition:    translate(-50%, -0%);
-o-transition:      translate(-50%, -0%);
}

#reportCaribcomX_table_report > .dt-table-row
{
border-spacing:     1px 0px; 
width:              100%;
font-size:          .78em;
text-align:         left;
color:              var(--text-color-gray-5); 
border-collapse:    collapse;   
}

#reportCaribcomX_table_report > .dt-table-row
{
height:             30px;
}

#reportCaribcomX_table_report > .dt-table-row
{
border-bottom: 1px solid #c8ced3;
}

#reportCaribcomX_table_report > .dt-table-row:first-child
{
color:              var(--text-color-gray-6);
font-weight:        bold;
background-color: white;
text-align:         center;
}

/* largeur des colonnes */
#reportCaribcomX_table_report > .dt-table-row:first-child > .dt-table-cell:nth-child(0n+1)
{
width:              200px
}

#reportCaribcomX_table_report > .dt-table-row:first-child > .dt-table-cell:nth-child(0n+3),
#reportCaribcomX_table_report > .dt-table-row:first-child > .dt-table-cell:nth-child(0n+4),
#reportCaribcomX_table_report > .dt-table-row:first-child > .dt-table-cell:nth-child(0n+5),
#reportCaribcomX_table_report > .dt-table-row:first-child > .dt-table-cell:nth-child(0n+6)
{
width:              150px
}

/*lignes paires */
#reportCaribcomX_table_report > .dt-table-row:nth-child(2n)
{

/*background-color: white;*/
background-color:   rgb(250, 250, 250)
}

/*ligne impaires */
#reportCaribcomX_table_report > .dt-table-row:not(:first-child):nth-child(2n+1)
{
background-color:   rgba(0, 0, 0, 0.05)
/*background-color: #009fe315*//*rgba(105,105,105,.050);*/    
}

#reportCaribcomX_table_report > .dt-table-row:not(:first-child) > .dt-table-cell:nth-child(0n+3),
#reportCaribcomX_table_report > .dt-table-row:not(:first-child) > .dt-table-cell:nth-child(0n+4),
#reportCaribcomX_table_report > .dt-table-row:not(:first-child) > .dt-table-cell:nth-child(0n+5),
#reportCaribcomX_table_report > .dt-table-row:not(:first-child) > .dt-table-cell:nth-child(0n+6)
{
text-align:     right;
}

/*Toutes les colonnes alignees en haut */
#reportCaribcomX_table_report > .dt-table-row:not(:first-child) > .dt-table-cell
{
/*vertical-align: top;*/
padding-left:5px;
padding-right:5px
}

.disabled-color
{
color: rgba(0,0,0,.35);
}


textarea, 
input[type="text"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="search"],
input[type="number"],
input[type="email"],
select
{
border:             1px solid var(--input-color);
color:              var(--text-color-gray-5);
border-radius:      4px;
padding:            4px 10px;
}

textarea:hover, 
input[type="text"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
select:hover
{

border-color:       var(--button-bg-color);
color:              var(--button-hover-bg-color);
}

textarea:focus, 
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus
{
box-shadow:         0 0 0 .2rem rgba(32, 168, 216,.30);
border-color:       var(--button-bg-color);
color:              var(--button-hover-bg-color);
outline:            0;
}

div.dt-dialog input[type="text"], 
div.dt-dialog input[type="password"],
div.dt-dialog textarea
{
width:calc(100% - ((10px + 1px) * 2))    
}

div.dt-dialog select
{
width:100%    
}

/***********/
div.main-footer
{
height:             var(--main-height-footer); 
width:              100%; 
display:            flex; 
background-color:   var(--footer-color);
}

div.main-footer > div
{
font-size:          10px; 
color:              white; 
text-align:         center; 
position:           relative; 
margin:             auto;
font-weight:        400
}

div.main-footer > div > label
{
font-weight:        600; 
font-size:          12px;
}

div.main-footer > div > a
{
color:             rgba(255,255,255,0.7);
}

div.main-footer > div > a:hover
{
color:              black;
}

div.main-header
{
height:             var(--main-height-header); 
width:              100%; 
position:           relative; 
background-color:   var(--header-color);  
border-bottom:      1px solid var(--account-button-color)
}

html
{
height:         100%    
}

body
{
margin-top:     0px; 
margin-bottom:  0px; 
margin-left:    0px; 
margin-right:   0px;
padding:        0;
font-family:    arial;
color:          var(--text-color-gray-6);
height:         100%
}

.main-header-logo
{
padding:            10px 10px 10px 20px; 
display:            inline-block;
z-index:            1;
position:           absolute;
background-color:   white;
/*border-radius:      0 0 20px 0;*/
/*box-shadow:         1px 1px 2px 1px rgba(0,0,0,0.4);*/
}

.main-header-logo > img
{
height: calc(var(--main-height-header) + var(--main-height-title) - 20px - 4px);
}

.main-header-menu
{
display:            inline-block;
right:              80px; 
top:                50%;
transform:          translate(0, -50%);
-webkit-transform:  translate(0, -50%);
-moz-transform:     translate(0, -50%);
-ms-transform:      translate(0, -50%);
-o-transform:       translate(0, -50%);
position:           absolute;
z-index:            1;
}

.main-header-menu ul
{
list-style-type:    none; 
display:            inline-block;  
}

.main-header-menu > ul > li 
{
display:inline-block;
position:relative;  
}


.main-header-menu ul a ~ ul
{
display:            none;
position:           absolute;
top:                1.5em;
padding:            0;
background-color:white;
border:             1px solid var(--text-color-2);
left:               0;
}

.main-header-menu ul a
{
padding:            5px;
display:            inline-block;
}

.main-header-menu ul a ~ ul:target
{
display:inline-block;    
}

.main-header-menu > a
{
padding:            4px 10px; 
/*border-right:       1px solid var(--input-color);*/ 
/*font-weight:        500;*/
font-size:          16px;
color:              var(--input-color);
}

.main-header-user-button
{
position:           absolute;
right:              10px;
top:                calc( (var(--main-height-header) + var(--main-height-title) - 55px) / 2);
border-radius:      30px; 
height:             55px;
width:              55px; 
background-color:   white;
text-align:         center;
justify-content:    center;
align-items:        center; 
display:            flex;
}

.main-header-user-button > div
{
/*border:             1px solid pink;*/ 
border-radius:      23px; 
height:             45px; 
width:              45px; 
/*position:           absolute; */
background-color:   var(--account-button-color);
color:              white;
cursor:             pointer;
font-size:          12px
}

.main-header-user-button > div > div:first-child
{
margin:             0 auto;
}

.main-header-user-button > div > div
{
position:           relative;
top:                5px;
}

div.main-title
{
height:             var(--main-height-title); 
width:              100%;
display:            flex;
background-color:   var(--header-color);  
border-bottom:      1px solid #c8ced3;
font-size:          14px;
color:              var(--text-color-gray-5);
}

div.main-title div
{
margin:             auto 0;
}

#main-div-history
{
width:              100%;
padding-left:       280px;
font-size:          1em;
color:              var(--text-color-gray-6);
font-weight:        600
}

.main-container
{
min-height:         calc( 100% - var(--main-height-header) - var(--main-height-title) - var(--main-height-footer) - 60px - 1px - 1px); 
width:              100%/*calc( 100% - 60px); */
position:           relative; 
display:            flex; 
padding:            30px 0px;
background-color:   rgba(190,190,190,0.7);
background-image:   linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
background-size:    cover;
background-repeat:  no-repeat
}

#main_div_user_menu
{
position:           absolute;
display:            none;
font-size:          14px;
border:             1px solid var(--account-button-color); 
border-radius:      3px;
top:                calc( (var(--main-height-header) + var(--main-height-title) - 55px) / 2 + 55px + 8px);
right:              15px;
background-color:   var(--account-button-color);
color:              white;
z-index:            3
}


#main_div_user_menu > div:first-child
{
position:           absolute; 
right:              20px; 
top:                -11px;
height:             11px;
width:              11px;
background:transparent url('/image/account_arrow.png') center/contain no-repeat
}

#main_div_user_menu > p
{
margin:             5px 0 5px 0;
text-align:         center;
text-transform:     uppercase;
}

nav a:hover
{
text-decoration:underline
}

nav > ul > li > ul  a /*,
nav > ul > li > ul > li */
{
text-decoration:    none !important;
font-weight:        500 !important; 
color:              var(--text-color-2) !important; 
}

nav > ul > li > a
{
color:              var(--button-bg-color);
font-weight:        600;
}

.nav-selected
{
color:              white;
background-color:   var(--button-bg-color);
}

nav a,
#main_div_user_menu > a 
{
padding:            7px 5px 7px 5px;
display:            block;
text-decoration:    none;
font-size:          14px;
}

nav li ul li,
#main_div_user_menu > a
{
background-color:   white;
color:              var(--account-menu-color);
border-top:         1px solid var(--account-menu-border-color);
} 

#main_div_user_menu > a
{
padding:            7px 20px 7px 5px;
}

#main_div_user_menu > a > div.icon-16-button
{
display:            inline-block; 
margin-right:       5px
}

#main_div_user_menu > a:hover,
nav li ul li:hover
{
background-color:   #f0f3f5;
color:              var(--account-menu-color);
text-decoration:    none;
}

#main_div_datetime
{
padding-right:      80px; 
margin:             auto 0;
text-align:         right;
width:              280px;
font-size:          .852em;
}

div.login-footer
{
border-top:         1px solid #ccc; 
margin:             100px 10px 0px 10px;
font-size:          10px;
text-align:         center; 
position:           absolute; 
bottom:             15px;
width:              calc(100% - 20px)
}

.dt-title
{
font-size:          1.275em;
color:              var(--text-color-gray-5);
}

.locked
{
color:              rgb(220, 57, 18) !important;
}

.disabled
{
color:              rgba(0,0,0,.35) !important;
}

.valid
{
color:              rgb(16, 150, 24) !important;
}