/* <style type="text/css"> */
 /**
  * Use a font
  */
@font-face {
	font-family: 'SansationLight';
	src: url('./font/SansationLight/SansationLight.eot');
	src: local('SansationLight'), 
            url('./font/SansationLight/SansationLight.woff') format('woff'), 
            url('./font/SansationLight/SansationLight.ttf') format('truetype');
}
@font-face {
	font-family: 'OpenSansRegular';
	src: url('./font/OpenSansRegular.eot');
	src: local('OpenSansRegular'), 
            url('./font/OpenSansRegular.woff') format('woff'), 
            url('./font/OpenSansRegular.ttf') format('truetype');
}


BODY {
    font-family: 'OpenSansRegular' ,Arial, Helvetica, "Liberation Sans"  , FreeSans, sans-serif !important;
    padding : 0px;
    margin:0px;
    color:darkblue !important;
    background-color:#FCFDFD;
    --hover : rgba(108, 130, 208, 0.9);
    --border-size:6px;
    --accent-color:lightblue;
    --input-color:#4b4b91;
    --color-red:Crimson;
    --color-blue2: cornflowerblue;
}
input{
    font-family: 'OpenSansRegular';
    padding : 2px;
     margin:2px;
    border:1px solid var(--input-color);

    color:var(--input-color);
    
}
input:focus {
    border:1px solid orange;
    margin:1px;
    background-color:  lightyellow;
}
.notice {
    color:orangered;
    font-style: italic;
    background-color:transparent;
    font-size: 100%;
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
    opacity:85%;
    background-color: wheat;
}
 .valid {
     color:green;
     background-color:transparent;
     font-size: 100%;
     padding: 0px;
     margin: 0px;
     font-family: sans-serif;
     opacity:85%;
     background-color: lightgreen;
 }

a.mtitle span.notice {
    text-decoration: underline;
}
table.sortable, table.table_large, table.result  ,table.resultfooter {
    width:99%;
    border-spacing:  0px 2px;
   border-collapse:collapse; 
    
    border:1px solid #5D90CD;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding:3px;
    color: #242DD0;
      
}
table.sortable td, table.table_large td, table.result  td,table.resultfooter td {
        border: 1px solid lightblue;
}
table.sortable th,  table.table_large th,table.result th {

    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'OpenSansRegular';
    border-bottom:2px #5d90cd groove;
    border-top:0px;

    color:#0C106D;
    text-align: left;
    font-style: normal;

}
/* LarGe */
@media (min-width: 992px) {
    table.sortable , table.table_large, table.result {
        border-collapse: separate;
        border-spacing: 1px 3px;
    }
}
h2.title {
    border-radius: 0px;
    margin: 0px;
}
h2 {
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    color:white;
    background-color:#9fbcd6;
    /*! margin:1px; */
    font-style: italic; 

    font-size:1.1rem !important;
    margin-top: 5px;
    font-size: 1.20rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    margin-right:1rem;
    margin-left:1rem;
    border-radius: 10px;
    padding:1rem;
}
 @media only screen and (max-width: 1280px) {
     h2{
         margin:0px;
         margin-top:2px;
         padding: 0.2rem 0rem 0.3rem 1rem;
         border-radius: 0px;
     }
 }
div.info {
    background:#879ED4;
    color:#FFFFFF;
    text-align:center;
}
content h2.info,h2.info,h2.info2 {
    text-align:center;
    background:#879ED4;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top:0px;
}

h2.w100 {
	margin-right: 0px;
	margin-left: 0px;
	border-radius: 0px;
}
h3.info {
    background:#879ED4;
    color:#FFFFFF;
    text-align:center;
}


 h2.error {
     background:#FF0000;
     color:#FFFFFF;
     animation-name: error_h2;
     animation-duration: 4s;
     animation-iteration-count: infinite;
     padding : 1rem;
 }


td.tool a.mtitle {
    text-decoration:none;
    display:block;
    /*! color: #0000FF; */
    height: 100%;
    width: 100%;
    font-size:0.8rem;
    /*! color: orange; */
}
td.tool a.mtitle:hover {
    text-decoration:none;
    color: #00008B;
    background-color:#5D90CD;
    display:block;
    height: 100%;
    width: 100%;

}
#top {
    float:left;
    /* margin-bottom: 40px; */
    width: 100%;
}

/***
 * Style for module
 */
#module {
/*    position:absolute;*/
    top:0px;
    right:5px;
    text-align:right;
    padding:0px;
    margin: 0px;
    float:right;
}
#module table,#module table tr,#module table td {
    border-collapse: separate;
    border-width: 1px;
    background-color: whitesmoke;
    color: darkblue;
    border-spacing: 3px;
}
#module table td.toolselected a {
    background-color: darkgray;
    display:block;
}
#module .nav-pills #module.nav-link {
     color: navy !important;
 }
 #module .nav-pills a.nav-link {
     border:1px solid blue;
     margin:1px;
     border-radius: 0px;
     font-size: 75%;
     color:navy !important;

 }
 #module .nav-pills a.nav-link:hover {
         color:white !important;
        border:1px solid transparent;
 }
 #module .nav-item-active , #module .nav-item-active > a.nav-link{
     background-color: #5d90cd ;
     color:white !important;
     border: 0px solid black;
 }
 /* animate module : sliding */
 #module .nav-item-module {
     position:relative;
     background-color: white;
     color:navy;
 }
 #module .nav-item-module.nav-item-slide::before {
     content:'';
     top:0;
     left:0;
     bottom:0;
     right:0;
     position:absolute;
     background-color:#5d90cd;
     z-index:-1;
     transform:scaleX(0);
     transition:transform 300ms ease-in-out;
     mix-blend-mode: darken;
 }
 #module  .nav-item-module.nav-item-slide:hover::before,
 #module  .nav-item-module.nav-item-slide:focus::before {
     transform:scaleX(1);
 }
 #module .nav-item-slide {
     z-index:0;
     transition:color 300ms ease-in-out;
 }

 #module .nav-pills a.nav-link:hover {
         color:white !important;
        border:1px solid transparent;
 }
 #module .nav-item-active , #module .nav-item-active > a.nav-link{
     background-color: #5d90cd ;
     color:white !important;
     border: 0px solid black;
 }
 /* animate module : sliding */
 #module .nav-item-module {
     position:relative;
     background-color: white;
     color:navy;
 }
 #module .nav-item-module.nav-item-slide::before {
     content:'';
     top:0;
     left:0;
     bottom:0;
     right:0;
     position:absolute;
     background-color:#5d90cd;
     z-index:-1;
     transform:scaleX(0);
     transition:transform 300ms ease-in-out;
     mix-blend-mode: darken;
 }
 #module  .nav-item-module.nav-item-slide:hover::before,
 #module  .nav-item-module.nav-item-slide:focus::before {
     transform:scaleX(1);
 }
 #module .nav-item-slide {
     z-index:0;
     transition:color 300ms ease-in-out;
 }




 #module .nav-fill  #module .nav-item {
     background: white !important;
     color: blue !important;
 }

 #module .nav-link:hover {
     /*background-color:white;*/
     color:white;
 }
 #module  .nav-link:hover {
     background-color: transparent;
     color:white;
 }
/**
    menu left (not used)
 */
div.lmenu {
    float:left;
    clear:left;

}

div.recherche_form{
    width:700px;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'SansationLight';
    border-style:outset;
    border-width:1px;

}
div.content{
    padding-top:0.0030%;
    margin-top:0.0030%;
    margin-right: 0.15%;
    width:99.7%;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'OpenSansRegular';
    font-size:100%;
    font-size:1rem;

}
div.content {
        font-size:90%;
    }
/* SM */
@media (min-width: 576px) {
    
}
/* MD */
@media (min-width: 768px) {
div.content {
        font-size:100%;
    }
}
/* LG */
@media (min-width: 992px) {

}
/* XL */
@media (min-width: 1200px) {

}
/**========*/
@media only screen and (max-width:1280px) {
}
table.document {
    color:#0000FF;
    width:100%;
    border-spacing:  0px;
    border-collapse:collapse;

}
table.document th{
    font-weight:bold;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'SansationLight';
    border-bottom:2px solid #0000FF;
    border-top:0px;
    color:#202267;
    text-align: left;
    background-color:#EDF3FF;
    font-style: italic;
}

 @keyframes error_h2 {
     from {
	background-color:  hsl(358,60%,44%);
}
     to {
	background-color: hsl(361,100%,44%);
}
 }
 .error {
     width:auto;
     margin-left:2em;
     text-align: center;

     color:#FFFFFF;
     background-color:#FF0000;
     font-weight: bolder;
     animation-name: error_h2;
     animation-duration: 4s;
     animation-iteration-count: infinite;
 }
@media (min-width: 576px) {

}
/* MeDium */
@media (min-width: 768px) {
    .error {
        width:60%;
        margin-left:20%;
        text-align: center;

        color:#FFFFFF;
        background-color:#FF0000;
        font-weight: bolder;
    }
}
/* LarGe */
@media (min-width: 992px) {
}
/* eXtraLarge */
@media (min-width: 1200px) {

}
table.mtitle {
    border:0px;
    text-align:center;
    /*! border-spacing: 0; */
}
td.mshort {
    height:15px;
    width:60px;
    text-align:center;
    border:  1px solid transparent;
    color:#5D90CD ;
    background-color:#DDE6FF;
}
/* first Menu  */
td.mtitle {
    margin: 0px;
    padding: 0px;
    text-align:center;
    min-width:6rem;
    height:42px;
   
     background-color: #5681B7;
    /*! border-color: darkblue; */
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;

    border-collapse: collapse;
    background-color: #366497;
}
@media only screen and (max-width:1250px) {
    td.mtitle {
        min-width:0rem;
    }
}
@media only screen and (max-width:955px) {
    td.mtitle {
        border-radius:0px;
       -moz-border-radius: 0px;
       -webkit-border-radius: 0px;
    }
}
td.mtitle a.mtitle {
    color : white;
    display:block;
    font-size:1rem;
    font-family:OpenSansRegular;
    padding:0px;
    margin:0px;
    height:42px;
    padding:4px 0px 0px 0px;
    border-radius:6px;
    font-size:0.9rem;
}
@media only screen and (max-width:1280px) {
   td.mtitle a.mtitle {
         font-size:90%;
    }
}
span.mtitle {
    color:#888;
    background-color:#0000FF;
    border-style:groove
}
span.odd {
    background-color:#EDF3FF;
    display:block;
}
span.even {
    background-color:#DDE6FF;
    display:block;
}
/* highlight table row */
div.odd,tr.odd,li.odd {
    background-color: #DCE7F5;
    /*! opacity: 50%; */
}
tr.odd > td,tr.even > td {
    border: 1px solid lightblue;
}
.highlight {
    font-weight: bolder;
    font-size:105%;
    font-size:1.05rem;
}
tr.highlight {
    font-weight: bold;
}

/* highlight a small element (span)
 */
 .cell.highlight {
     color: darkred !important;
     background-color: lightgoldenrodyellow;
     color: antiquewhite !important;
     background-color: var(--color-blue2);
     padding: 2px 10px 2px 10px;
 }

td.odd{
    background-color:#DDE6FF;
}
td.even{
    border:0px;
}
td.cell{
    height:32px;
    padding: 1px;
    
}
td.selectedcell{
    
    font-weight: bold;
    /*color:#FFFFFF;*/
    min-width:6rem;
    text-align:center;
    background-color: #002ba3;
    /*! border-style: solid; */
    /*! border-width: 1px; */
    border-color:white;
    vertical-align:top;
    border-collapse: collapse;
}
@media only screen and (max-width:1250px) {
    td.selectedcell{
       min-width: 0px;
    }
}
.menu2 td.mtitle ,.menu2 td.selectedcell{
    /*! border-radius: 0px; */
    border-radius: 4px;
}

@media only screen and (max-width:955px) {
    td.selectedcell {
        border-radius:0px;
       -moz-border-radius: 0px;
       -webkit-border-radius: 0px;
    }
}
a.mtitle {
    text-decoration:none;
    display:inline;
    color: #0000FF;
    cursor: pointer;
    background-color: transparent;
}
a.mtitle:hover {
    text-decoration:none;
    display:inline;
    cursor: pointer; 
    /*color: #00008B;*/
    /*background-color:#EFEBEB;*/

    color: darkblue;
    /*! padding: 100px; */
}
td.selectedcell a.mtitle,div.content td.selectedcell a.mtitle {
    text-decoration:none;
    display:block;
    color:white;
    /*! height: 100%; */
    /*! width: 100%; */
    font-size: 0.9rem;
    font-weight: normal;
}
a.dossier {
    text-decoration:none;
    display:block;
    color: #202267;

}
tr.odd:hover td
{
    text-decoration:none;
    background-color: #6C82D0;
    color:#FFFFFF;
}
tr.even:hover td
{
    text-decoration:none;
    background-color: #6C82D0;
    color:#FFFFFF;
}

a.cell {
    text-decoration:none;
    display:block;
    color:#0000FF;
    background-color:#FFFFFF;
}

a.cell:hover {
    color:#FFFFFF;
    background-color:#5D90CD;
    text-decoration:none;
    display:block;
}

a.detail
{
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'openSansRegular';
    text-decoration: underline;
    display: block;
    font-weight: normal;
    background-color: transparent;
}

a.detail:hover
{
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'openSansRegular';
    color: #FFFFFF;
    background-color:#5D90CD;
    text-decoration: none;
    display: block;
}

div.content a {
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'openSansRegular';
    text-decoration: none;
    display: inline-block;
    padding: 0px 10px 0px 0px;
    text-decoration: underline;
/*! background: rgb(247, 192, 156) none repeat scroll 0% 0%; */

}


div.content a:hover {
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'OpenSansRegular';
    color: #FFFFFF;
    background-color:#336699;
    text-decoration: none;
    display: inline-block;

    /*! border-top-color: white; */
    /*! border-top-style: solid; */
}

div.content td.mtitle a.mtitle {
    text-decoration:none;
    display:block;
    color:darkblue;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'OpenSansRegular';
    background-color: lightsteelblue;

    /*! width: 230px; */
}
div.content a.mtitle {
    text-decoration:none;
    display:inline;
    color:#0000FF;
       cursor: pointer;
    /*! background-color: white; */
    background-color: transparent;
}

div.content a.mtitle:hover {
    text-decoration:none;
    display:inline;
    background-color:transparent;
    color:lightskyblue;
    cursor: pointer;
}


.document {
    color: #202267;
    border-collapse:collapse;
}
div.content a.document, a.document{
    text-decoration:underline;
    display:block;
}
a.document:hover {
    text-decoration:none;
    display:block;


}
.input_text_ro {
    border:1px solid  #0000FF;
    background:#EDEDED;
    color:#0000FF;
    margin:1px;
}
.input_text {
    border:1px solid var(--input-color);
    margin:1px;
    border-radius: 5px;
}
@media (min-width: 576px) {

}
/* MeDium */
@media (min-width: 768px) {
    border-radius: 5px;
    padding: 2px;
}
/* LarGe */
@media (min-width: 992px) {
}
/* eXtraLarge */
@media (min-width: 1200px) {

}
.input_text:focus {
   border:1px solid orange;
    margin:1px;
    background-color:  lightyellow;
}
h1.legend, legend {
    font-weight: bold;
    font-style: italic;
    font-size: 120%;
    font-size: 1.2rem;
    border: navy;
    border-width: 1px;
    border-style: solid;
    padding: 1rem;
    margin: 0.5rem 0rem 0.5rem 2rem;


    width: 20rem;
    border-radius: 5px;
}
fieldset fieldset legend {
    color:#888;
}
select {
    border: 1px solid #0000FF;
    margin:2px;
    background-color:#FFFFFF;
    border-radius: 3px;
    padding: 3px;
}

.infobulle {
        position:absolute;
        border:1px solid #000000;
        background-color:#FCFFCC;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        color:#000000;
        top:0px;
left:0px;
        visibility:hidden;
        width:80%;
        z-index:20;
    }
/* SM */
@media (min-width: 576px) {

    .infobulle {
        position:absolute;
        border:1px solid #000000;
        background-color:#FCFFCC;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        color:#000000;
        top:0px;
left:0px;
        visibility:hidden;
        width:400px;
        width:25rem;
        z-index:20;
    }
}
/* MD */
@media (min-width: 768px) {

}
/* LG */
@media (min-width: 992px) {

}
/* XL */
@media (min-width: 1200px) {

}
/**========*/


span.action {
    height:48px;
    height:3rem;

}
th.num , td.num,table.result th.num  {
    text-align:right;
}
tr.priority1 {
    background-color: #FF7F50;
}
span.action a.action {
    border:2px outset ;
    padding-left: 3px;
    padding-right:3px;
    text-decoration:none;

    display:inline;
    color:#000000;
    background-color:#EDF3FF;
}

span.action a.action:hover {
    text-decoration:none;
    display:inline;
    background-color:#DDE6FF;
    color:#000000;
}
/*---------------------------------------------------------------------------
Style for autocomplete
 ---------------------------------------------------------------------------*/
div.autocomplete {
    background-color:#FFFFFF;
    border:1px solid #888;
    margin:0px;
    padding:1px;
    text-align:left;
    position:relative;
    top:-3px;
    width:377px;
}
div.autocomplete em {
    color:#0000FF;
    font-weight:bold;
}
div.autocomplete ul {
    list-style-type:none;
    background-color:#FFFFFF;
    border:1px solid #888;
     width: 375px;
    margin:0px;
    padding:0px;
}
div.autocomplete ul li.selected { 
    background-color: #DDE6FF;
}

div.autocomplete ul li {
    list-style-type:none;
    display:block;
    margin:0px;
    padding:0px;
    cursor:pointer;
}
span.informal{ 
    color:#000000;
}

ul.select_table  {
    /*padding:5px;*/
    overflow:hidden;
}
ul.select_table a{
    width:100%;
    display:block;
    background-color:inherit;
    color: #000000;
    text-decoration:none;
}
ul.select_table a:hover{
    background-color:#FFFFFF;
    color:#000000;
    /*text-decoration:underline;*/
}
ul.select_table li {
    display:table-row;
    list-style-type: none;
}
ul.select_table li span {
    display:table-cell;
    width:400px;
    width:25rem;
    margin: 0px;
    padding:  0px;
}

div.pc_calendar{

    float:left;

}
div.pc_calendar table {
    text-align:center;

}
div.pc_calendar tr{
}
div.content div.pc_calendar tr{
    height: 36px;
}
@media only screen and (min-width: 640px) {
    div.pc_calendar tr{
    height:10%;
    }
}
@media only screen and (max-width: 640px) {
    div.pc_calendar tr{
    height:40px;
    }
}
div.pc_calendar td{
    width:14%;
    border:1px solid  #879ED4 ;
}

div.pc_calendar td.weekend {
    background-color:#e4e7ed;

}
div.pc_calendar td.workday{
    background-color:inherit;
}
div.pc_calendar span.day{
    font-weight: bold;
    display:block;
}
div.pc_calendar span.event{
    font-weight: bolder;

}
span.todo  {
    text-align: left;
    background-color:#FCFFCC;

}
input[disabled], textarea[disabled], option[disabled], optgroup[disabled], select[disabled] {
    -moz-user-focus:ignore;
    -moz-user-input:disabled;
    background-color:#EDF3FF;
    color:#00008B;
    cursor:inherit;
}

a#anchorbutton, .button, a.button,div.content a.button {
    color:#FFFFFF;
    text-decoration:none;
    font-family: arial,verdana,sans-serif,helvetica;
    background-image: url("../image/bg-submit2.gif");
    background-repeat: repeat-x;
    background-position: left;
    border-color:  #0000FF;
    border-width:1px;
    padding:5px;
    margin:3px;
    cursor:pointer;
    margin:1px 2px 1px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-style:  ridge ; 
    border-color: grey ;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    color: #746B6B;
    font-family: SansationLight;
    font-size: 0.80rem;

    padding: 9px;
    color: navy;
    font-size: 0.85rem;
}
a#anchorbutton:hover, .button:hover,a.button:hover,div.content a.button:hover  {
    cursor:pointer;
    /*! background-color:gold; */
    border-style:  ridge;
    /*! color: #FF0000; */
    margin:1px 2px 1px 2px;
    border-color:orange;
}
a#smallanchorbutton, .smallbutton, a.smallbutton,div.content a.smallbutton {
    color:darkblue;
    font-weight: normal;
    text-decoration:none;
    font-family: arial,verdana,sans-serif,helvetica;
    font-size:85%;
    font-size:0.85rem;
    font-family: SansationLight;
    border-style:  ridge ; 
    border-color: grey ;
    border-width:1px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 5px;
    padding-left:  5px;
    margin-top:3px;
    cursor:pointer;
    margin:1px 2px 1px 2px;
    /*! border-radius: 1px; */
    /*! -moz-border-radius: 2px; */
    -webkit-border-radius: 5px;
    font-family: SansationLight;
    background: lightgray;
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    display:inline-block;  
    color:navy;
}
a#smallanchorbutton:hover, .smallbutton:hover,a.smallbutton:hover,div.content a.smallbutton:hover  {
    cursor:pointer;
    background-color:#FFFFFF;
    color:orangered;
    margin:1px 2px 1px 2px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: #f6f6f6;
background: -moz-linear-gradient(top, #f6f6f6 0%, #e1e1e1 50%, #f1f1f1 51%, #ffffff 100%);
background: -webkit-linear-gradient(top, #f6f6f6 0%,#e1e1e1 50%,#f1f1f1 51%,#ffffff 100%);
background: linear-gradient(to bottom, #f6f6f6 0%,#e1e1e1 50%,#f1f1f1 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    font-family: SansationLight;
     /*border-style:  inset ;*/
    /*! border-color:  darkblue; */
    text-decoration:none;
    border-color: orange;
}
a#smallanchorbutton, .smallbutton, a.smallbutton,div.content a.smallbutton .button {
    font-family: SansationLight;
}
td.tool {
    border: 1px grey solid ;
    background-color: #FFFFFF;
    border-bottom-width: 2px;
    text-align:center;
    border-radius:2px;
    -moz-border-radius: 2px;
   -webkit-border-radius: 2px;

}
 @media only screen and (max-width:1280px) {
    a#smallanchorbutton:hover, .smallbutton:hover,a.smallbutton:hover,div.content a.smallbutton:hover,a#smallanchorbutton, .smallbutton, a.smallbutton,div.content a.smallbutton   {
        font-size:80%;
    }
}
td.toolselected  {
    border: 1px grey solid;
    color: #FFFFFF;
    border-bottom-width: 2px;
    text-align:center;
    border-radius:2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    background-color:#FF0000;
}
td.toolselected a.mtitle {
    color: #FFFFFF;
    border-bottom-width: 2px;
    text-align:center;
    border-radius:2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    background-color:#FF0000;
}
div.topmenu {
	font-size:100%;
	font-size:1rem;
       
}
.topmenu table {
    border-collapse:collapse;
    border-spacing:1px;
    width:100%;
}

@media only screen and (max-width:320px) {
  div.topmenu {
    margin-top: 44px;      
}
}
@media only screen and (max-width:800px) {
    div.topmenu{ 
    /*    margin-top: 44px; */
    }  
}
#dossier h2{
    color:#00008B;
    display:inline;
    margin:0px;
    padding:0px;
    font-variant:small-caps;
}
/* </style> */
#add_todo_list , div.add_todo_list {
    border:1px solid #0000FF;
    background-color:#DDE6FF;
    padding:0.07%;
    position:absolute;
    text-align:left;
    z-index:1;
    width:480px;
    width:30rem;
    height:auto;
}
div.welcome {

}
div.gest_name {
    float:left;
    margin-left:150px;
    margin-top:15px;
}
h2.gest_name {
    border-right:  2px solid  #403a8d;
    border-bottom:2px solid  #403a8d;
    border-top:1px solid  #b4bbc2;
    border-left: 1px solid  #b4bbc2;
    padding: 5px;
    width: 80%;
    font-size:140%;
    margin-left: 10%;
}
body.op_detail_frame,div.op_detail_frame  {
    background-color:#e4e7ed;
    height:100%; 
width:100%;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;


}
/*******************************************************************************
 * Inner_box on a smaller screen
 *******************************************************************************/

div.inner_box  {
    background-color: #DCE1EF;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'OpenSansRegular';
    /*! font-family: 'SansationLight'; */
    /*! padding:2px; */
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
    border-radius: 0px;
    border:1px solid #00008B;
    -moz-box-shadow: 10px 10px 5px #888;
    box-shadow: 15px 15px 15px #888;
    font-size:90%;
    font-size:0.9rem;
    width: 100%;
    left:0px ;
}
 div.inner_box2 {
     background-color: #DCE1EF;
     font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
     font-family: 'OpenSansRegular';
     /*! font-family: 'SansationLight'; */
     /*! padding:2px; */
     margin:0px;
     overflow:hidden;
     z-index:3;
     position:absolute;
     border-radius: 0px;
     border:1px solid #00008B;
     -moz-box-shadow: 10px 10px 5px #888;
     box-shadow: 15px 15px 15px #888;
     font-size:90%;
     font-size:0.9rem;
     width: 50%;
     left:22% ;
 }
/* SM */
@media (max-width: 576px) {
    div.inner_box,div.inner_box2   {
      width: 100%;
      left:0px !important ;
        border-radius: 0px;
    }
}
/* MD */
@media (min-width: 768px) {
    div.inner_box{
        width: 100%;
        left:0px ;
        border-radius: 0px;
    }
    div.inner_box2   {
        width: 75%;
        left:5% ;
        border-radius: 0px;
    }
}
/* LG */
@media (min-width: 992px) {
    div.inner_box {
        left:0px;
        border-radius: 7px;
    }
    div.inner_box2   {
        width: 75%;
        left:5% ;
        border-radius: 7px;
    }
}
/* XL */
@media (min-width: 1200px) {
    div.inner_box  {
        width: 90%;
        left:5%;
        /*! margin-bottom: 2%; */
        padding-bottom: 10px;
        border-radius: 10px;
        border-radius: 7px;
        }
    div.inner_box2{
        width: 50%;
        left: 20%;
        padding-bottom: 10px;
        border-radius: 7px;
    }
}
/***********************************************************************************/
div.op_detail_title {
    background-color:#888;
    /*	width:500;*/


}

div#div_cat{
    position:absolute;
    border:1px solid #000000;
    top:15%;
left:100px;
    visibility:hidden;
    z-index:2;
    width:50em;
    background-color:#EDF3FF;

}

div.divinfo
{  
    color:#FF0000;
    text-align:right;
    display:block;
    width:480px;
    width:30rem;
    height:13px;
    font-weight:bold;
}
/**
 * Search form for all HISTO*
 */
 div#search_form {
         width:100%;
         margin-left:0%;
         left:0px;
} 

div#search_form
{
    position:absolute;
    border:1px solid #000000;
    z-index:2;
    display:none;
    background-color:#e4e7ed;
}
@media only screen and (max-width: 995px) {
   
}
/* SM */
@media (min-width: 576px) {

}
/* MD */
@media (min-width: 768px) {
   div#search_form {
       
         width:90%;
         margin-left:5%;
         left:0px;
        box-shadow: 10px 10px 5px #888;
        padding-bottom: 10px;
         -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
      }  
}
/* LG */
@media (min-width: 992px) {
   div#search_form {
         top:15%;
      }  
}
/* XL */
@media (min-width: 1200px) {

}



table.sortable td, table.table_large td, table.result td
{
    padding-left:5px;
    padding-right:5px;
    border: 1px solid lightblue;
}
table.info_op
{
    width:100%;
}
table.info_op tr
{
    background:#FFFFFF;
}
h2#jrn_name
{
    color:#0000FF;
    margin-right:30%;
    float: right;
}
tr.footer{
    font-style: italic;
    font-weight: bold;

}
span.remain {
    font-weight: bold;
    color:#000000;
}
/**==============================*/
/* Ledger name */
/**==============================*/
div#jrn_name_div
   {
       display:none;

   }

/* SM */
@media (min-width: 576px) {


}
/* MD */
@media (min-width: 768px) {

}
/* LG */
@media (min-width: 992px) {
    div#jrn_name_div
   {
        display:block;
   }
}
/* XL */
@media (min-width: 1300px) {
    div#jrn_name_div
   {
       float: right;
       margin-right:2%;
       display:block;
   }
}
/**========*/    

#direct
{
    display:inline;
    float:left;
}
#calc
{
    display:inline;
    float:left;
}
div#wait_box
{
    background-color:#DDE6FF;
   text-align: center;
    width: 300px;
    padding:0px;
    margin:0px;
    overflow:hidden;
    z-index:10;
    position:absolute;
    left:30%;
    top:30%;
    border:1px solid #00008B;
    width: 260px;
    opacity: 0.8;
    border-radius: 20px;
    min-width:281px;
}
#wait_box h2
{
    margin-top:2px;
    /* color:#000000; */
    text-align:center;
    /* width: 50%; */
}
#navi_tb {
width: 95%;
margin-left: 2%;
border-spacing: 0em 0.50em;
border-collapse: separate;
}
div#div_jrnsearch_op{

    border:1px solid #000000;
    width:800px;
    width:50rem;
    background-color:#EDF3FF;
    z-index: 5;

}
ul {
    padding-left: 110px;
}
a.line,div.content a.line
{
    text-decoration:underline;
    display:inline !important;
    /* color: #0000FF; */
    cursor:pointer;
}
a.line:hover,div_content a.line
{
    text-decoration:underline;
    display:inline !important;
    color: #FFFFFF !important;
    background-color:#336699 !important;
    cursor:pointer;
}

table.table_large tr.odd ,table.table_large tr.even {

    height:32px;
}
#calc1
{
    position:fixed;
    display:block;
    top:30px;
    left:150px;
    width:300px;
    border:1px solid #000000;
    background-color:#aec3e8;
    padding: 20px 20px;
}
span.invoice
{
    font-style: italic;
    display:block;
    margin: 20px;
    font-weight: bold;
}
a.nav,div.content a.nav {
    display:inline;
    text-decoration:none;
    cursor:pointer;
}
a.nav:hover,div.content a.nav:hover{
    display:inline;
    text-decoration:none;
    background-color:#00008B;
    color:#FFFFFF;
    cursor:pointer;
}
/**
 * For button image
 */

div.content a.nav img,a.nav img {
    cursor:pointer;
    background: transparent;
    
}
div.content a.nav:hover img,a.nav:hover img {
    cursor:pointer;
    background: transparent;
}
#dossier {
    display:none;
 /*   float:left; */
    width:100%;
    top:0px;
    text-align: center;
    font-variant:small-caps;
    font-weight: bolder;
    position : absolute;
    z-index:-1;
    }
@media only screen and (min-width: 955px) {
#dossier {
    display:inline;
    float:left;
    width:100%;
    top:0px;
    text-align: center;
    font-variant:small-caps;
    font-weight: bolder;
    height:5rem;
    font-size: 125%;
    }
    
}
div.foldercontent {
    font-size:95%;
    font-size:0.95rem;
    width: 95%;
    margin-left: 2.5%;
    margin-top:30px;
}
@media only screen and (min-width: 1200px) {
#dossier {
    display:inline;
    float:left;
    width:100%;
    top:0px;
    text-align: left;
    font-variant:small-caps;
    font-weight: bolder;
    text-align:center;
    }
}

@media only screen and (max-width: 1199px) {
#dossier {
    display:flex;
    }
    
}
div.foldercontent {
    font-size:95%;
    font-size:0.95rem;
    width: 95%;
    margin-left: 2.5%;
    margin-top:5rem;
}

h1.title {
    color: #0000FF;
    font-style: italic;
    text-align:center;
    text-transform: uppercase;
}
h2.title {
 
    color:white;
    text-align:center;
  
    
    padding-top: 9px;
    margin-top: 0px;
    padding-bottom: 2px;
    background-color: #023575;
    font-size: 1.1rem;
    height: 40px;
    vertical-align: middle;
    border-bottom: white;
    border-bottom-style: groove;
    border-bottom-width: 2px;
    font-style: normal;
    font-stretch: normal;
    font-variant-caps: all-small-caps;
    font-family: OpenSansRegular;
    margin-bottom: 1px;
}

 .box h2.title {
     font-size: 1rem;
     font-variant-caps: normal;
 }

h3.title {
    color: #0000FF;
    margin-left: 30px;
}
h4.title {
    color: #0000FF;
    margin-left: 45px;
    text-decoration: underline;
}
h5.title {
    color: #0000FF;
    margin-left: 45px;
    text-decoration: none;
    font-style: italic;
}
div.myfieldset
{
    margin-top: 5px;
    margin-left:5px;
    margin-right: 5px;
    border:2px groove #EDF3FF ;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;

}
#info_div {
    display:none;
    background-color: #FCFFCC;
    color:#000000;
    z-index: 15;
    top:0px;
    left:45%;
    position:fixed;
    padding:5px 45px 5px 45px;
    border-color: orange;
    border-width: 1px;
    border-style: groove;
}
div.menu2 a.mtitle{
    font-size:100%;
    font-size:1rem;
    font-weight: normal;
    /*color: darkblue;*/
    padding:5px 0px;
    margin:0px;
    /*! border-radius: 5px; */
    }
div.menu2 a.mtitle:hover,div.menu a.mtitle:hover,td.mtitle a.mtitle:hover {
    /* color:#5681B7;
    background-color: #EFEBEB; 
    */
    color: darkblue; 
    background-color: lightsteelblue;
    /* padding:18px 0px 18px 0px; */
    
}
div.menu2 a.mtitle:hover {
    /*! border-radius: 0px 0px; */
    /*! padding: 5px; */
}
div.menu2 table {
    border-collapse: separate;
    /*! border-spacing:1px; */
}
div.menu3 {
	font-size:80%;
	font-size:0.80rem;
    
}
#go_submit_id {
    
}
.decale {
    margin-left:30px;
}
#folder {
    border: 1px solid var(--input-color);
    border-collapse: separate;
    border-radius: 10px;
    border-spacing: 0px;
    box-shadow: 10px 10px 5px #888888;
    padding: 5px;
    width: 100%;
}
#folder tr {
        height: 30px;
}    
/*#folder tr.odd,#folder tr.even {
    font-size : 1.2em;
}*/
textarea.itextarea{
    border:1px solid #0000FF ;
    width:90%;
    margin-left:5%;
    height:120px;
}

textarea.itextarea:focus {
    border:1px solid orange;
    background-color:  lightyellow;
}
div#notice {
    position:absolute;
    right:5%;
    top:200px;
    background-color:#FCFFCC;
    border: 1px solid #000000;
}
div.name  {
    display:none;
    }   
div#modele_op_div{
    display: none;
    background-color:#e4e7ed;
    padding:0px;
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
    left: 10%;
    border:1px solid #00008B;
    width: 80%;
}
 div#preference_div {
     background-color:#e4e7ed;
     font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
     font-family: 'SansationLight';
     padding:0px;
     margin:0px;
     overflow:hidden;
     z-index:3;
     position:absolute;
     border:1px solid #00008B;
     top:32px;
     top:2rem;
     left:1%;
     width:98%;
 }

@media (min-width:1200px)  {
    div.name  {
        display:block !important;
        position:absolute;
        top:0px;
        left:0px;
    }   
    div#modele_op_div{
    display: none;
    background-color:#e4e7ed;
    padding:0px;
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
    left: 4%;
    border:1px solid #00008B;
    min-width: 75%;
    box-shadow: 10px 10px 5px #888888;
}
div#preference_div {
    background-color:#e4e7ed;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'openSansRegular';
    padding:0px;
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
    border:1px solid #00008B;
    top:32px;
    top:2rem;
    left:20%;
    width:50%;
}
}
@media only screen and (max-width:1280px) {
    div#preference_div {
        left:5%;
        width:90%;
    }
}
@media only screen and (max-width: 955px) {
    div.name  {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    }   
    div#modele_op_div{
    display: none;
    background-color:#e4e7ed;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'SansationLight';
    padding:0px;
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
    left: 10%;
    border:1px solid #00008B;
    width: 85%;
     box-shadow: 10px 10px 5px #888888;
}
div#preference_div {
    background-color:#e4e7ed;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'SansationLight';
    padding:0px;
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
    border:1px solid #00008B;
    top:32px;
    top:2rem;
    left:1%;
    width:98%;
}
}

div#box_search_card {
      
}

@media only screen and (max-width:804px)
{
    div#box_search_card {
     display:none;
    }
}
div.bxbutton
{
    float:right;
    height:10px;
    display:block;
    margin-top:3px;
    margin-right:0.48%;
}
div.inner_box tr.odd {
    background: #E0EBFF;
}
#modele_op_tab tr.odd {
    background:  #EDF3FF;
}
div#bookmark_div {
    background-color:#e4e7ed;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'SansationLight';
    padding:2px;
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
   border:1px solid #00008B;
   top:32px;
   top:2rem;
   left:30%;
   width:40%;
}
#error_div{
    position:absolute;
    border:1px solid #000000;
    background-color:#DDE6FF;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
    color:#FF0000;
    top:14%;
left:2%;
    visibility:hidden;
    z-index:20;
}
/* SM */
@media (min-width: 576px) {
#error_div{
    position:absolute;
    border:1px solid #000000;
    background-color:#DDE6FF;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
    color:#FF0000;
    top:40%;
left:25%;
    visibility:hidden;
    width:640px;
    width:40rem;
    z-index:20;
}

}
/* MD */
@media (min-width: 768px) {

}
/* LG */
@media (min-width: 992px) {
#error_div{
    position:absolute;
    border:1px solid #000000;
    background-color:#DDE6FF;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
    color:#FF0000;
    top:40%;
left:25%;
    visibility:hidden;
    width:640px;
    width:40rem;
    z-index:20;
}
}
/* XL */
@media (min-width: 1200px) {

}
/**========*/

#error_div h2 {
    background: var(--color-red);
}
div#error_content_div {
   color:#FF0000;
   font-weight: bold;
   text-align: center;
}
td.workday ol {
	margin:0px;
	padding:0px;
	list-style-type:none;
	text-align:left;
}
input.inum {
    text-align:right;
    border:1px solid var(--input-color);
    margin:2px;
    border-radius: 5px;
}
div.box  {
    background-color:#e4e7ed;
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-family: 'openSansRegular';
    overflow:hidden;
    border:1px solid #00008B;
    font-size:90%;
    font-size:0.90rem;
    border-radius:5px;
    width:97%;
}
/* SM */
@media (min-width: 576px) {


}
/* MD */
@media (min-width: 768px) {

}
/* LG */
@media (min-width: 992px) {
    div.box  {
        width: 46%;

        height:40%;
    }

}
/* XL */
@media (min-width: 1200px) {
    div.box  {
        width: 35rem;
        max-height: 30%;
        height: 45vh;

    }
}
/**========*/
div.box table{
    border-spacing:0px;
    font-size: 96%;
    width: 80%;
}
div.odd, div.box tr.odd {
    background-color: #dce7f5;
    border: 1px solid whitesmoke;
    padding:2px;

}
div.even ,div.box tr.even {
    background-color: white;
    border: 1px solid whitesmoke;
    padding:2px;
}
#jrn_name_div h2{
    font-size:240%;
    font-size: 2.4rem;
}
#search_account {
    width: 70%;
}
fieldset {
    border-width: 1px;
    margin-left: 0.5rem;
}
#tva_select table {
    border-spacing: 0px;
}
#mod_predf_op {
    width: 80%;
    overflow: auto;
}
div.box .result {
    border-radius:0px;
    width:100%;
    padding: 0px;
}
/****************************************************************************
 * Tabs  
 ****************************************************************************/
ul.tabs {
    padding-top: 15px;
    display:block;
    padding-left: 2px;
    list-style: none;
    
    margin: 0px 3px 0px 3px;
}
ul.tabs  a  {
    display:inline;
}
li.tabs_selected {
    display:inline;
   background: #C2E3FC; /* Old browsers */
    background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* IE10+ */
    background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
    color:whitesmoke;
    margin-left: 2px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border:1px #879ed4 solid;
    font-weight: bold;
     float:left;
    padding:5px;
    
}
li.tabs {
    display:inline;
    background-color: inherit;
    color:inherit;
margin-left: 0px;
    padding: 5px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border:1px #879ed4 solid;
    float:left;
    background:  #36649724;
;
    
    margin: 2px 3px 3px 3px;

}
.inner_box li.tabs:hover ,li.tabs:hover {
    display:inline;
    background-color: lightblue;
    color:wheat;
margin-left: 2px;
    padding: 5px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border:1px #879ed4 solid;
    white-space: nowrap;

}
@media only screen and (min-width: 1280px) {
   li.tabs {
    display:inline;
    background:  #36649724;
;
      

    padding: 15px 7px 10px 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border:1px #879ed4 solid;

    }
    .inner_box li.tabs:hover ,li.tabs:hover {
        display:inline;
        background-color: lightblue;
        color:wheat;
margin-left: 2px;
        padding: 15px 7px 10px 10px;
        border-top-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border:1px #879ed4 solid;
       }
       li.tabs_selected {
            padding: 12px 15px 15px 15px;
       }
    li.tabs-width11 {
        min-width: 7rem;
    }
}

.inner_box li.tabs {
    background-color: whitesmoke;
}

ul.tabs a {
    text-decoration: none;
    color:inherit;
    display:inline;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    cursor :pointer;    
}
ul.tabs a:hover {
    text-decoration: none;
    color:white;
    display:inline;
     background-color: lightblue;
}

/*
 * ????
 */
.previous_year
{
    text-align:right;
    color:black;
}
/*****************************************************************************
 * autocomplete style
 *****************************************************************************/

div.autocomplete_fixed {
    background-color:#FFFFFF;
    border:1px solid #888;
    margin:0px;
    padding:0px;
    text-align:left;
}
div.autocomplete_fixed em {
    color:#0000FF;
    font-weight:bold;
}
div.autocomplete_fixed ul {
        list-style-type:none;
        background-color:#FFFFFF;
        border:1px solid blue;
        width:300px;
        margin:0px;
        padding:0px;
        }
div.tag {
            
}
@media only screen and (max-width: 1280px) {
    div.autocomplete_fixed ul {
        list-style-type:none;
        background-color:#FFFFFF;
        border:1px solid blue;
        width:300px;
        margin:0px;
        padding:0px;
        }
       div.tag {
            
        }

}
@media only screen and (min-width: 1281px) {
    div.autocomplete_fixed ul {
        list-style-type:none;
        background-color:#FFFFFF;
        border:1px solid blue;
        width:500px;
        margin:0px;
        padding:0px;
        }
        div.tag {
            width: 50%;
        }
       

}
div.autocomplete_fixed ul li.selected { 
    background-color: #DDE6FF;
    border-bottom: 1px solid black;
}

div.autocomplete_fixed ul li {
    list-style-type:none;
    display:block;
    margin:0px;
    padding:0px;
    cursor:pointer;
}
#popup {
    font-size:0.9rem;
}
hr {
    width:95%;
    margin-left:2.5%;
    background:#5d90cd;
    height:5px;
        
}
/******************************************************************************
 * Hightlight row in a table 
 ******************************************************************************/
li.highlight,tr.highlight{
    font-weight: bolder;
    font-size:90%;
    background-color: #8A8787;
    color:whitesmoke !important;
    border-width:  2px;
    border-style: solid;
    /*! border-color: blue; */
}
li.highlight a,tr.highlight a{
   color:whitesmoke !important;
    
}
*|*:link {
    color: inherit;
}

/*****************************************************************************
 * Table of one column to present menu 
 * as in CFGLED, FORECAST, REPORT
 *****************************************************************************/
table.vert_mtitle {
  text-align:center;
    /* border:5px solid #99B1DF; */
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    width:80%;
    margin-left: 10%;
    border-collapse: separate;
    border-spacing: 10px;
   
    
}
table.vert_mtitle td.first {
    background-color: #DCE1EF;
}
table.vert_mtitle td {
    border : 1px solid #99B1DF;
     background-color:#EDEDED;
     border-radius:20px 20px 0px 0px;
     font-family: SansationLight;
}
table.vert_mtitle td a{
    padding : 20px;
    font-weight: bold;
    text-decoration: none;
    color: darkblue;
}
table.vert_mtitle td:hover {
    border : 1px solid #99B1DF;
    background-color: #336699;
    color:white;
}
table.vert_mtitle td:hover a{
   color:white;
  
}

/*******************************************************************************
 *  Tiny button example : -X for remove action, remove link...
 *******************************************************************************/
div.content a.tinybutton,a.tinybutton{
    color: blue;
    font-weight: bold;
    text-decoration: none;
    font-family: arial,verdana,sans-serif,helvetica;
   /* background-image: url("font/bg-submit2.gif");
    background-repeat: repeat-x;
    background-position: left; */
    font-size: 70%;
    font-size: 0.7rem;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    margin-top: 3px;
    cursor: pointer;
    margin: 1px 2px 1px 2px;
    border-width: 1px;
    border-style: solid;
    border-color: blue;
    border-radius: 2px; 
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    display : inline;
}
input[type="button"].tinybutton {
     color: blue;
    font-weight: bold;
    text-decoration: none;
    font-family: arial,verdana,sans-serif,helvetica;
    font-size: 70%;
    font-size: 0.7rem;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    margin-top: 3px;
    cursor: pointer;
    margin: 1px 2px 1px 2px;
    border-width: 1px;
    border-style: solid;
    border-color: blue;
    border-radius: 2px; 
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    display : inline;
}
/*******************************************************************************
 Image Search
*******************************************************************************/
.image_search {
    cursor:pointer;
    width:16px;
    height:16px;
    vertical-align: top;
    border-style: ridge;
    border:1px;    
background: #cedce7;
background: -moz-linear-gradient(top, #cedce7 29%, #596a72 100%);
background: -webkit-linear-gradient(top, #cedce7 29%,#596a72 100%);
background: linear-gradient(to bottom, #cedce7 29%,#596a72 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );
  padding : 3px;
  
}
.image_search:hover {
    cursor:pointer;
    width:16px;
    height:16px;
    vertical-align: top;
    background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
  padding : 3px;
  
    background: darkgray;
}
/****************************************************************************
 * Aligned button
 ****************************************************************************/
ul.aligned-block {
    padding:5px;
    display : block;
}
ul.aligned-block li {
    display:table-cell;
    padding : 10px;
    list-style: none;
}
/******************************************************************************
 * Total in confirmation VEN / ACH
 ******************************************************************************/
#total_div_id {
    float: left;
    /*margin-right: 150px;
    margin-top: 50px;*/
    background: snow;
    padding: 2rem;
    border:1px solid navy;
    margin-right:1rem;
}
/***************************************************************************
 * column in the dashboard
 ***************************************************************************/

td.cut {
    max-width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.box {
    border-left: #9999ff solid 1px;
}

/****************************************************************************
* Smoke appearance of modal box
 ****************************************************************************/
.smoke-base {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(0,0,0,.3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#90000000);
}

.smoke-base.smoke-visible {
  opacity: 1;
  visibility: visible;
}

.smokebg {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}
 .smoke-base .dialog {
     position: absolute;
     top: 10%;
     width: auto;
     left: 2px;
     margin-left: 2px;
     margin-right: 2px;
     overflow: auto;
 }

@media (min-width: 576px) {

}
/* MeDium */
@media (min-width: 768px) {
    .smoke-base .dialog {
        position: absolute;
        top: 25%;
        width: 40%;
        left: 50% !important;
        margin-left: -20%;
         border-radius:7px;
    } 

}
/* LarGe */
@media (min-width: 992px) {
}
/* eXtraLarge */
@media (min-width: 1200px) {

}
.dialog-prompt {
  margin-top: 15px;
  text-align: center;
}

.dialog-buttons {
  margin: 20px 0px 5px 0px
}

.smoke {
  text-align: center;
    background-color: #DCE1EF;
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
    left:10%;
 /*   border:1px solid #00008B;*/
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
width: 85%;
}
.dialog-buttons button:hover{
  color:beige;
  font-weight: bold;
}

.dialog-title {
    background: transparent;
    padding: 5px;
    color: black;
    font-weight:700;
    font-size:110%;
    border: 1px solid blue;
    border-bottom: groove 2px white;
    color:#665757;
}
.dialog-buttons button {
    color:darkblue;
    font-weight: normal;
    text-decoration:none;
    font-family: arial,verdana,sans-serif,helvetica;
     /*! background-image: url("font/bg-submit2.gif"); */ 
    /*! background-repeat: repeat-x; */
    /*! background-position: left; */
    font-size:85%;
    font-size:0.85rem;
    font-family: SansationLight;
    border-style:  ridge ; 
    border-color: grey ;
    border-width:1px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 5px;
    padding-left:  5px;
    margin-top:3px;
    cursor:pointer;
    margin:1px 2px 1px 2px;
    font-family: SansationLight;
  background: lightgray;
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
  min-width:5rem !important;
  border-radius:5px;
}
.dialog-buttons button:hover {
	color:navy;
	background-color:darkgrey;
}
.dialog-prompt input {
  margin: 0;
  border: 0;
  font-family: sans-serif;
  outline: none;
  font-family: Menlo, 'Andale Mono', monospace;
  border: 1px solid #aaa;
  width: 75%;
  display: inline-block;
  background-color: white;
  font-size: 100%;
  font-size: 1rem;
  padding: 8px;
}

.smoke-base .dialog-inner {
  padding: 15px;

  color:#1a0777;
}

button.cancel {
  background-color: rgba(0,0,0,.40);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444);
}

.queue{
	display:none;
}
/*
 * Menu selected when configuring the profile
 */

td.selectedmenu {
 background-color: beige;   
 font-weight: bolder;
}
/*
 * Hide element for small screen 
 */
.visible_gt800 {
    
}
.v-large { display: none;}

/*
 * Comment in  follow-up
 */
.field_follow_up
{
    margin-top:1px;
    border:1px solid blue;
    min-height: 5rem;
}

@media only screen and (max-width:850px) {
    .visible_gt800 {
        display:none;
    }
    div#bookmark_div {
    padding:2px;
    margin:0px;
    overflow:hidden;
    z-index:3;
    position:absolute;
   border:1px solid #00008B;
   top:32px;
   top:2rem;
   left:5%;
   width:90%;
}


}

/** 
 * go_up
*/
#go_up {
    background-color: grey;
    border:0px;
    box-shadow: none;
    color:blue;
    margin-right: 20px;
    border-radius:10px;
    padding:2px;
}
#go_up a ,#go_up a:visited{
    background-image: none;
    text-decoration: none;
    color:blue;
    font-size:1.7em;
    padding: 0px;
    margin: 0px;
    background-color: inherit;
}
#go_up a:hover {
    font-size:2.8em;
    font-size:2.8rem;
}
/*
 * Summary of operation , contains miscelleneous informations
 * before confirming sale , purchase
 */
#summary_op1,#summary_op2 
{
    float:left;
    padding-left: 150px;
}
/*
 * Name of the tiers in GESTION 
 */
#gestion_title {
    float:right;
    margin-right: 5%;
    font-size:150%;
    font-variant: small-caps;
    padding: 13px 20px 13px 20px;
    margin-top:20px;
    background-color:#141d77;
    color:#FE8300;
}
/*
 * Style for the Inplace Edit element
 */
span.inplace_edit
{
    text-decoration: underline;
    cursor: pointer;
}
span.inplace_edit_input
{
    text-decoration: none;
    font-size: 110%;
    cursor: none;
}
/*
 * Icon to pop out on the dashboard
 */
#span_cal_div,#span_todo_listg_div,#span_last_operation_box_div,#span_last_operation_management_div {
    float:right;
    margin-right:5px;
    padding-top:0px;
    margin-top:0px;
}
/*
 *
 */
div.content a.arrow {
    background-color:white;
    color:black;
}
/*
 * Span or input-text to contain name of a card
 */
.label_item {
     display:none;
}
/* SM */
@media (min-width: 576px) {


}
/* MD */
@media (min-width: 768px) {
    .label_item {
        display:inline;
        width:300px;
    }
}
/* LG */
@media (min-width: 992px) {
    .label_item {
    }
    .v-large { display: inline;}

}
/* XL */
@media (min-width: 1200px) {
    .label_item {
     width:405px;
    }

}
/**========*/
/*
 * Select box : list of actions
 */
.select_box {
    border:0.5px  solid darkblue;
    background:white;
    width:455px;
    max-width:250px;
    position:absolute;
    z-index:3;
    padding:3px;
    margin:0px;
    margin-top:2px;
    display:none;
}
div.select_box ul {
    list-style:none;
    padding:2px;
    margin:1px;
    width:100%;
}
div.select_box ul li {
  padding-top:2px;
  padding-bottom:2px;
    margin:2px;
}
div.select_box a {
  text-decoration:none;
  color : darkblue;
  display:block;
}
div.select_box a:hover,div.select_box ul li:hover {
  background-color : lightgoldenrodyellow;
  color:brown;
}
/**
 * Menu second level
 */
div.menu2 td.mtitle, div.menu2 td.mtitle a{
   
    border-style: solid;
    border-width: 0.1px;
    border-color:white;
    height:40px;
    border-radius: 4px 4px 4px 4px;
    /*! padding: 5px; */
    font-size: 0.9rem;
}
div.menu2 td.mtitle a{
    border-width:0px;
    padding:5px;
}
/**
 * For the icon (font-famillo fontello)
 */
.icon {
    font-family: "fontello";
    font-weight:normal;
    cursor: pointer;
}
.icon:hover {
    font-family: "fontello";
    background-color: transparent;
}
*.icon {
    text-decoration: none;
}
/**
 * Icon in the title of Box
 */
div.bxbutton .icon
{
    /*! color:white; */
    text-decoration:none;
    margin-left: 6px;
    margin-right:6px;
    /*! padding-top:10px; */
    font-size:100%;
    font-size:1rem;
    cursor: pointer;
    border:0px;
    height: 18px;
    color: #99f4e8d6;
    font-size: 100%;
}
div.bxbutton .icon:hover
{
/*    background-color: white */;
    color: yellow !important;
}
/**
 * progressBar
 */
div.progressbar {
    width:100%;
    height:50px;
    position:fixed;
    top:5px;
    background-color: white;
    color:blue;
    z-index:800;
    border-color: #596a72;
    border-width: 1px;
    border-style: solid;
}
/* SM */
@media (min-width: 576px) {
    div.progressbar {
    }

}
/* MD */
@media (min-width: 768px) {
    div.progressbar {
        width: 70%;
        left: 15%;
    }


}
/* LG */
@media (min-width: 992px) {
    div.progressbar {
    }


}
/* XL */
@media (min-width: 1200px) {
    div.progressbar {
    }


}
/**========*/
#progressValue {
    display:block;
    width: 0px;
    height: 100%;
    margin:0px;
    padding: 0px;
    background-color:darkblue;
    color:antiquewhite;
    font-weight: bolder;
    font-size: 1.5rem;
    text-align: center;
    background-image: linear-gradient(to right,white, navy);
}
.nowrap td {
    white-space: nowrap;
}
/**
 * Warning
 */
span.warning {
    color:white;
    font-style: normal;
    font-weight: bold;
    background-color: #eddadd;
    padding:10px;
    margin:2px;
     animation-name: error_h2;
     animation-duration: 4s;
     animation-iteration-count: infinite;
     display: block;
}
/**********************************************************************************************************************/
 /* LI as list
 * Tabs like row
 ****************************************************************************/
 #tab_id {
     margin-top:1rem;
     margin-bottom: 30px;
     position:static;
 }
 ul.tab_row {
     padding-top: 25px;
     display:block;
     width:100%;
     padding-left:0%;
     padding-right:0%;
     list-style: none;
     margin-left:0px;
 }
 ul.tab_row  a  {
     display:block;
     width:100%;
 }
 li.tab_row_selected {
     display:block;
     width:96%;
     background: #C2E3FC; /* Old browsers */
     background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* IE10+ */
     background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
     color:whitesmoke;
     /*! margin-left: 2px; */
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border:1px #879ed4 solid;
     font-weight: bold;
     padding:5px;
      margin-top:13px;


     padding-left: 2%;
     padding-right: 2%;
 }
 li.tab_row {
     display:block;
     width:auto;
     background-color: inherit;
     color:inherit;/*! margin-left: 0px; */
     padding: 5px; 
     border-top-left-radius: 10px;
     border-top-right-radius: 10px; 
     border:1px #879ed4 solid;
     background: whitesmoke;
     margin-top:13px;

 }
 li.tab_row:hover {
     display:block;
     background-color: lightblue;
     color:wheat;
margin-left: 2px;
     padding: 5px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border:1px #879ed4 solid;
     white-space: nowrap;

 }
 @media only screen and (min-width: 1280px) {
     li.tab_row {
         display:block;
         background-color: inherit;
         padding: 20px 15px 15px 20px;
         margin: 20px 15px 15px 15px;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px; 
         border:1px #879ed4 solid;

     }
     li.tab_row:hover {
         display:block;
         background-color: lightblue;
         color:wheat;
margin-left: 2px;
          padding: 20px 15px 15px 20px;
         margin: 20px 15px 15px 15px;
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
         border:1px #879ed4 solid;
     }
     li.tab_row_selected {
         padding: 20px 15px 15px 20px;
         margin:20px 15px 15px 15px;
     }
 }
 ul.tab_row a {
     text-decoration: none;
     color:inherit;
     display:block;
     white-space: nowrap;
     width: 100%;
     height: 100%;
     cursor :pointer;
     text-align: center;
     
     
     
 }
 ul.tab_row a:hover {
     text-decoration: none;
     color:white;
     display:block;
     background-color: lightblue;
     /*! text-align: center; */
 }
 div.tab_row {
     background-color: aliceblue;
     border-color: #879ed4;
     border-width: 1px;
     border-style: solid;
 }
span.tab_row {
    font-style: italic;
    font-size:90%;
}
span.title_tab_row {
    font-size:105%;
    font-weight: bold;
    background-color: darkblue;
    color:white;
    padding : 3px;
}
span.tab_row {
    font-style: italic;
    font-size:90%;
}
span.title_tab_row {
    font-size:105%;
    font-weight: bold;
    background-color: darkblue;
    color:white;
    padding : 3px;
}
/* Selected row in a table */
.background-selected {
     background-color: #000066 !important;
     color : white !important;
     
}
p.info {
    font-size:90%;
    font-family: sans-serif;
    font-style: italic;
}

/* Cell with tag */
span.tagcell {
    border-radius:3px;
    padding:3px;
margin:1px;
    display: inline-block;
}    

#action_add_action2_list {
    height:15rem;
    overflow: auto;
}
/*********************************************************************************************************************
 * Color for tag
 ********************************************************************************************************************/
.tagcell-color1 {
    /* Nothing no color */
}
.tagcell-color2 {
        background-color: #002ba3 !important;
    color : white !important; 
 
}
.tagcell-color3 {
    background-color: #336699 !important;
    color: white !important;
}
.tagcell-color4 {
    background-color: #5d90cd !important;
    color: white !important;
}
.tagcell-color5 {
     background-color: #C2E3FC !important;
    color: #002ba3 !important;
}
.tagcell-color6 {
    background-color: #006318 !important;
    color : white !important; 
}
.tagcell-color7 {
    background-color: #008000 !important;
    color : white !important; 
    
}
.tagcell-color8 {
    background-color: #00D000 !important;
    color : white !important; 
}
.tagcell-color9 {
        background-color: #87D087 !important;
    color: white !important;
}
.tagcell-color10 {
        background-color: #C8EEC8 !important;
    color: #006318 !important;
    
}
.tagcell-color11 {
       background-color: red  !important;
    color: #edeff4 !important;
}
.tagcell-color12 {
     background-color: #9D0244 !important;
    color:#edeff4 !important;
}
.tagcell-color13 {
     background-color: #C14064 !important;
    color: #edeff4 !important;
}
.tagcell-color14 {
     background-color: #F07396  !important;
    color: #edeff4 !important;
}
.tagcell-color15 {
   background-color: #F2AABE  !important;
    color: red !important;
}

.tagcell-color16 {
        background-color:  #77420A  !important;
    color: #edeff4 !important;
}
.tagcell-color17 {
       background-color: #B06F2A !important;
    color: #edeff4 !important;
}
.tagcell-color18 {
    background-color: orange !important;
    color: #edeff4 !important;
}
.tagcell-color19 {
    background-color:  #F2CFAA !important;
    color: red !important;
}
.tagcell-color20 {
    background-color:  yellow !important;
    color: orangered !important;
}
.tagcell-color21 {
    background-color:  #151514 !important;
    color: orangered !important;
}
.tagcell-color22 {
	background-color: #0f0f0e !important;
	color: #ffef00 !important;
}
.tagcell-color23 {
	background-color: #64644a !important;
	color: #ffbf00 !important;
}
.tagcell-color24 {
	color: orangered !important;
}
.tagcell-color25 {
	color: #ff0606 !important;
	font-style: oblique;
}
.tagcell-color26 {
	background-color: #fff !important;
	color: #03038a;
}
.tagcell-color27 {
	color: #08030b !important;
	background-image: linear-gradient(to right, rgb(227, 175, 175), rgb(136, 13, 13));
}
.tagcell-color28 {
	color: white !important;
	background-image: linear-gradient(darkblue,lightblue) !important;
}
.tagcell-color29 {
	background-color: yellow !important;
	color: white !important;
	background-image: linear-gradient(to right,black,yellow,red) !important;
}
.tagcell-color30 {
	background-color: yellow !important;
	color: white !important;
	background-image: linear-gradient(to right,darkblue,white,red) !important;
}
.tagcell-color31 {
	color: #e1d5d0 !important;
	background-image: linear-gradient(to bottom right, #9abbe3a8,#6f6fac, #002ba3) !important;
}
.tagcell-color32 {
	background-color: #ff00e3 !important;
	font-family: SansationLight !important;
}
.tagcell-color33 {
	color: white !important;
	background-color: #8d3dcc !important;
}
.tagcell-color34 {
	background-image: linear-gradient(to right,blue,white) !important;
}
.tagcell-color35 {
	color: white !important;
	background-image: linear-gradient(to right,#a61660,#e697d2) !important;
}
.tagcell-color36 {
	background-image: linear-gradient(to right,#008000,#c8eec8) !important;
	color: aquamarine !important;
}
/***************************************
 * Button for linked card in follow up
 * **************************************/
#linked_card_bt {
	font-size: 110%;
	padding: 0.25em 1em 0.25em 1em;
	font-family: bold;
}
/**
 * set a element full size
 */
.fullsize {
    width:100% !important;
    height: 100% !important;
    overflow:auto !important;
    top:0px !important;
    position:fixed !important;
    left:0px !important;
}

 /*********************************************
 * If a input is incorrect
  */
 .input-error {
     border:1px solid red !important;
     color:darkred !important;
     background-color: rgba(255, 182, 193, 0.65);
 }

 /*************************************************************************************
  * ICARD
  *************************************************************************************/
 .icard {
     display:inline;
     width: 3rem;

 }
 /* SM */
 @media (min-width: 576px) {
     .icard {
         display:inline;
        width:5rem;
     }
    
 }
 /* MD */
 @media (min-width: 768px) {
 }
 /* LG */
 @media (min-width: 992px) {
     
 }
 /* XL */
 @media (min-width: 1200px) {
     .icard {
             width:10rem;
     }
 }
 /**========*/
 #sold_item {
     width: 100%;
 }
 
 /***
  * w-20 width is 20 rem
  **** **/
 .w-20 {
     /* width: 20rem !important;*/
     width: 100% !important;
 }
 /* SM */
 @media (min-width: 576px) {
    .w-20 {
        /* width: 20rem !important;*/
        width: 100% !important;
    }
}
 /* MD */
 @media (min-width: 768px) {
       .w-20 {
        /* width: 20rem !important;*/
        width: 100% !important;
    }

 }
 /* LG */
 @media (min-width: 992px) {
    .w-20 {
        /* width: 20rem !important;*/
        width: 40% !important;
    }
 }
 /* XL */
 @media (min-width: 1200px) {

 }
 /**========*/
.smallicon {
    padding: 2px;
    margin: 0px 1px 0px 1px;
}

.h3, h3 {
	font-size: 1.4rem;
}
.content .h3, .content h3 {
	font-size: 1.4rem;
}
/***
 * Main Menu navigation
 */
.nav-fill .nav-item 
{
    margin: 1px;
    background: navy;
    color: white;
    border-radius: 4px;
}
.nav-fill .nav-item:hover {
   background-color:#6393c1;
    color:navy;
    text-decoration: none;
}
.nav-fill .nav-item:visited{
    color:white;
}
.nav-pills .nav-link.active {
    background-color: #506cb8 !important;
     border-radius: 0px;
} 
.nav-pills .nav-link {
    color:white ;
   
}
 /****************************************/
 /* MENU LEVEL 0 */
 /****************************************/
.nav-level0 {

}

 /* SM */
 @media (min-width: 576px) {

 }

 /* MD */
 @media (min-width: 768px) {
     .nav-level0 > li >a  {
          padding:1.1rem;
     }
 
 }

 /* LG */
 @media (min-width: 992px) {

 }

 /* XL */
 @media (min-width: 1200px) {

 }
/****************************************/
 /* MENU LEVEL2 */
/****************************************/

.nav-level2 {
   background-color: hsl(240, 39%, 41.2%);
}
.nav-level2>li {
    border-right: 1px #9fbcd6 ridge;
    border-bottom: 1px #9fbcd6 ridge;
}
.nav-level2>li:hover{
    background-color:#6393c1;
    color:navy;
    text-decoration: none;
}

 /* MD */
 @media (min-width: 768px) {
     .nav-level2 .nav-item  {
         padding : 0;
     }
 }

/****************************************/
 /*  MENU    LEVEL 3                    */
 /***************************************/
.nav-level3 {
      background-color:#336699;


}
.nav-level3>li {
    border-right: 1px #9fbcd6 ridge;
    border-bottom: 1px #9fbcd6 ridge;
}
.nav-level3>li:hover{
    background-color:#6393c1;
    color:navy;
    text-decoration: none;
}
.nav-level3 .active {
    border-radius:0px !important;
}
.nav-level2 .active {
    border-radius:0px !important;
}

 /****************************************/
 /* Module for smartphone menu           */
 /***************************************/
#mobile_module .nav-pills a.nav-link {
    background-color:transparent !important;
    color:navy !important;
    border:1px solid blue;
    margin:0px;
    border-radius: 0px;
   }
#mobile_module .nav-pills a.nav-link:hover {
    background-color: navy !important;
    color:white !important;
    border-radius: 0px;
}
#mobile_module h1 {
    text-align: center;
    font-weight: 700;
}
#action_now_div {
    width:100%;

}
/* SM */
@media (min-width: 576px) {
    #action_now_div {

    }

}
/* MD */
@media (min-width: 768px) {
    #action_now_div {
    
    }
}
/* LG */
@media (min-width: 992px) {
    #action_now_div {
        max-width: 50%;
        left:25%;
    }
}
/* XL */
@media (min-width: 1200px) {
    #action_now_div {

    }
}
/**========* Highlight the sorted column ****/
 /**========*/
 .sorttable_sorted_reverse {
     color: #5e5a55 !important;
     font-style: italic !important;
 }

 /**========*/
 .sorttable_sorted  {
     color: #5e5a55 !important;
     font-style: italic !important;

 }

 /**
  * Waiting box and animation in CSS
  */
 #wait_box {
     height:110px;
 }
 #wait_box p {
     margin-top:10px;
     letter-spacing: 4px;
     font-weight: bold;
 }
 .loading_msg {
     margin-top:20px;
     border: 1px solid navy;
     width: 1.5rem;
     height: 1.5rem;
     display: inline-block;
     animation: turn-color 6s linear 0s infinite forwards;
     position: relative;
     left: 0px;
     top: 10px;
     background: rgb(176, 173, 230);
     box-shadow: #a7a7b3 1px 1px 40px;
    /* border-radius: 5px;*/
 }
 .loading_msg:nth-child(2) {
    background:blue;
     animation: turn-color2 6s linear 0s infinite forwards;
 }
 .loading_msg:nth-child(3) {
     background:red;
     animation: turn-color3 6s linear 0s infinite forwards;
 }
 .loading_msg:nth-child(4) {
     background:navy;
     animation: turn-color2 6s linear 0s infinite forwards;
 }

 @keyframes turn-color{
     0% { transform : rotate(0deg);opacity:0.1;transform:scale( 0.3);background-color:red;margin-left:0px;}
     50% { transform : rotate(90deg);opacity:0.9; background-color:orangered;margin-left:2px; }
     100% { transform : rotate(180deg);opacity:0.1;transform:scale( 1.2);margin-left:30px;border-radius: 13px;}
 }
 @keyframes turn-color2{
     0% { transform : rotate(0deg);opacity:0.1;transform:scale( 0.3);background-color:navy;margin-left:0px;}
     50% { transform : rotate(90deg);opacity:0.9; background-color:lightblue;margin-left:2px; }
     100% { transform : rotate(180deg);opacity:0.1;transform:scale( 0.9);margin-left:30px;border-radius: 13px;}
 }
 @keyframes turn-color3{
     0% { transform : rotate(0deg);opacity:0.1;transform:scale( 0.3);background-color:darkgreen;margin-left:0px;}
     50% { transform : rotate(90deg);opacity:0.9; background-color:lightgreen;margin-left:2px; }
     100% { transform : rotate(180deg);opacity:0.1;transform:scale( 0.9);margin-left:30px;border-radius: 13px;}
 }


 /**
  * style in TEXTAREA wysiwyg must be encapsuled in div with the class nicEdit-main
  *
  */
 div.nicEdit-main {

     font-family: 'OpenSansRegular';
 }
 div.nicEdit-main blockquote {
     margin-left:2rem !important;
 }

 *  div.nicEdit-main hr {
     background-color: #756f6f !important;
     width:90%  !important;
     margin-left:5% !important;
     margin-right:5% !important;
     background-size:1px !important;
     height:2px;
 }

 * div.nicEdit-main h2 {
     margin: 0px;
     padding: 0px;
     margin-left:2rem;
     font-size: 1.6em;
     font-style: normal;
     margin-bottom: .5rem;
     font-size: 2rem !important;
     background-color: transparent;
     color: navy;
     text-decoration: underline;
 }

 * div.nicEdit-main h1 {
     margin: 0px;
     padding: 0px;
     margin-left:1rem;
     font-style: normal;
     margin-bottom: .5rem;
     font-size: 2.5rem !important;
     background-color: transparent;
     color: navy;
     text-decoration: underline double;
 }

 * div.nicEdit-main h3 {
     margin: 0px;
     padding: 0px;
     font-style: normal;
     margin-bottom: .5rem;
     font-size: 1.5rem !important;
     background-color: transparent;
     color: navy;
     text-decoration: underline dashed;
     margin-left:3rem;
 }
 * div.nicEdit-main h4 {
     margin: 0px;
     padding: 0px;
     font-style: normal;
     margin-bottom: .5rem;
     font-size: 1.1rem !important;
     background-color: transparent;
     color: navy;
     text-decoration: underline wavy;
     margin-left:4rem;
 }
/**
 * result of password strength
 */
 #info_passid {
     position:absolute;
     background-color: rgba(246, 180, 157, 0.58);
     color:red;

 }
 /** followup : detail : list of concerned actions **/
 div.concerned_action {
         height: 11rem;
         overflow: auto;
     background-color: white;
     border:navy 1px solid;
     width: 100%;
     scroll-padding-right: 20px;
 }
 div.FullDetailActionChildren {
     z-index: 12;
     position: absolute;
     height: auto;
 }
 /**
  * Help item in EXTENSION
  */
 #help {
     background-color: yellow !important;;
     padding: 0.5rem;
     color:navy !important;
     text-decoration: underline;
 }

 .hoverclass-drag {
    background-color: white;
 }


 /**********************************************************************************************************************
  * User's widget list
  *
  *********************************************************************************************************************/
 #widget_box_id {
     #widget_box_id {
         width: 100%;
         margin-left: 0px;
         margin-right: 0px;
     }
 }

 #contain_widget  li {
     padding : 0.75rem;
     margin:2px;
     border:navy solid 1px;
 }

 #widget_add  li {
     padding : 0.75rem;
     margin:2px;
     border:navy solid 1px;
 }


 @media  (min-width: 576px) {


 }
 /* MeDium */
 @media (min-width: 768px) {
     #widget_box_id {
         width: 100%;
         margin-left: 0px;
         margin-right: 0px;
     }
 }

 /* LarGe */
 @media (min-width: 992px) {
     #widget_box_id {
         width: 70%;
         margin-left: 15%;

     }
 }
 /* eXtraLarge */
 @media (min-width: 1200px) {

 }
span.widget-name {
    font-size:105%;
    font-family: bold;
    font-stretch: extra-expanded;
    margin-right: 2rem;
    margin-top: -5px;
    width: 5rem;
    display: inline-block;

}

 #dashboard_div_id {
     margin-top:2vh;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     row-gap: 20px;
     column-gap: 20px;
 }

 /*
  * WIDGET
  */
 #widget_box_select_id {
     max-width: 70rem;
 }
 #widget_box_id {
     max-width: 70rem;

 }
 .widget_param {
     font-size: 105%;
     font-weight: bold;
     font-style: inherit;
     border-width: 1px;
     display: inline-block;
     border-color: navy;
     padding: 5px;
     border-style: groove;
     margin: 2px;
 }
/**
 * show the number in the widget
 */
 .box_ident {
     border-radius: 10px;
     background: beige;
     color: navy;
     font-size: 3.4rem;
     padding: 20px;
     margin-left: 10px;
     margin-top: 10px;
     position:absolute;
 }

 /**
 widget full size
  */
div.widget-full_size {
 z-index: 1;
 position: fixed;
 top: 5px;
 width: 96%;
 height: 96%;
 overflow: auto;
 max-height: 100%;
 margin: 2px;
}


 @keyframes fill_up_loading {

     30% {transform:rotateY(90deg);}
     60% {transform:rotateY(-90deg);}
 }

 div.row.odd.hover:hover,div.row.even.hover:hover   {      background-color: var(--hover) !important;    }

h2.h-section {
    background-color: #e4e9ee;
    color: navy;
    border: 1px steelblue solid;
    font-style: normal;
    font-family: OpenSansRegular;
}
 .super {
     font-family: SansationLight;
     vertical-align: super;
     font-size: 80%;
     font-variant-caps: normal;
 }
/***
 * Animate menu
 *
 */

.nav-item {
    position:relative;

}

.nav-item.nav-item-underline::before {
     content:'';
    left:0;
    bottom:0;
    right:0;
    position:absolute;
    height:var(--border-size);
    background-color:lightblue;
    transform:scaleX(0);
    transition:transform 150ms ease-in-out;
}

.nav-item.nav-item-underline:hover::before,
.nav-item.nav-item-underline:focus::before
{
    transform:scaleX(1);
}

 .nav-item.li-active.nav-item-underline::before {
    transform: scale(1);
     background-color: #d03100;
 }

 /**
  * For level 2 and 3 no animation but border difference if active
  */

 .nav-level2 .nav-link.active::after, .nav-level3 .nav-link.active::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background-color:darkorange;
     height: var(--border-size);
 }

 .nav-level3 .nav-link.active::after {
     background-color:yellow;
 }
/***
 * Animate menu
 *
 */

.nav-item {
    position:relative;

}

.nav-item.nav-item-underline::before {
     content:'';
    left:0;
    bottom:0;
    right:0;
    position:absolute;
    height:var(--border-size);
    background-color:lightblue;
    transform:scaleX(0);
    transition:transform 300ms ease-in-out;
}

.nav-item.nav-item-underline:hover::before,
.nav-item.nav-item-underline:focus::before
{
    transform:scaleX(1);
}

 .nav-item.li-active.nav-item-underline::before {
    transform: scale(1);
     background-color: var(--color-red);
 }

 /**
  * For level 2 and 3 no animation but border difference if active
  */

 .nav-level2 .nav-link.active::after, .nav-level3 .nav-link.active::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background-color:darkorange;

 }

 .nav-level3 .nav-link.active::after {
     background-color:yellow;
 }
 
 .text-70 {
     font-size:70% !important;
     vertical-align: super;
 }

 #info_admin {
     font-size:140%;
     text-align: center;
     background-color: red;
     display:block;
     position:fixed;
     top:15rem;
     left:15%;
     width: 70%;
     padding:2.5em;
     border-radius:0.5em;
     scale:1.1;
     color: ghostwhite;
     opacity: 0.9;

 }