/*   replaced AAA by A7CDF0   */

*{
  margin: 0;
  padding: 0;
}
body{
  background: #fff; 
  font-family: Arial, Verdana, sans-serif;  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;    
    
}
#leftbar{
  color: #666;   
  width: 16%;       
  height: 100%;    
  position: fixed; 
  top: 0;
  left: 0;   
  border: 0;
  background: #444F6B;
}

#content-wrapper{
  background: #fff;
  width: 84%;
  height: 100%;  
  margin: 0 0 0 16%;   
}
#content{
  background: url("../image/office/c1.jpg") no-repeat 0 0 / cover; 
  background-size: 1530px 788px;
  background-repeat: no-repeat;    
    
  color: #000000; 
  width: 84%;
  height: 100%; 
  margin: 0;
  position: fixed;
}
#page{
  color: #000000;  
  width: 84%;
  height: 100%;
  margin: 0; 
  position: fixed; 
}
div.h2{
  position: relative;    
  left: 5em;
  top: 1em;
  font-size: 150%;
  color:#D75464; 
}     
.report{        
  background-image: -moz-linear-gradient(right bottom, #FEFEFE 0%, #F2F4F6 100%);
  background-image: linear-gradient(to right bottom, #FEFEFE 0%, #F2F4F6 100%);
  background-color: #FEFEFE;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#fff, EndColorStr=#eee, GradientType=1)";  

  border: none; 
  width: 100%;
  height: 100%;
  margin: 0px;
  text-align: left;  
}

.reportRES{        
  background-color: #EAEAEE;
  border: none; 
  width: 100%;
  height: 100%;
  margin: 0px;
  text-align: left;  
}



h1{
  margin: 13px 0 13px 20px;    
}
p{
  margin: 0 0 0 20px;
}

/* to prevent Safari  to show rounded corners:  Stop Safari Mobile from giving input buttons rounded corners */

input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}


/* ################################################################### LEFT MENU */
div.menu{
  background: #444F6B;    
  color : #eee;    
  min-height: 4%;  
  margin: 0;  
  padding: 0.8em;  
  padding-left: 1.0em;
  padding-right: 1.0em;
  text-align: left;  
  cursor: pointer; 
  vertical-align: middle;
  border-bottom: 1px solid #343F55;
  font-weight: normal;  
  opacity: 1;    
}       

div.menuLogo{
  border-right: 1px solid #d0d5e4;    
  background-color: #fff;
  cursor : auto;    
  padding: 1.0em;
  text-align: left;      
  vertical-align: middle;      
  height: 5%;    
}

div.menu:hover{
/*    
  -moz-box-shadow: rgba(200, 200, 220, 0.9) 0px 0px 4px inset;
  -webkit-box-shadow: rgba(200, 200, 220, 0.9) 0px 0px 4px inset;
  box-shadow: rgba(200, 200, 220, 0.9) 0px 0px 4px inset;    
*/    
    
  -moz-box-shadow: rgba(40, 44, 64, 0.7) 2px 2px 30px inset;
  -webkit-box-shadow: rgba(40, 44, 64, 0.7) 2px 2px 30px inset;
  box-shadow: rgba(40, 44, 64, 0.7) 2px 2px 30px inset;    
}


div.menu img{
  
  height : 2em;
  width : 2em;  
  margin-right: 2em;
  float: left;
  vertical-align:middle;
}  
div.menuLogo img.logo{
  width: 92%;
  max-width: 16em;    
  max-height: 3.2em;
  float: left;
  vertical-align: middle;  
}  

img.logo {
    float:none;
}

div.menu img.clock{
  width: 1.5em;
  height: 1.5em;  
  max-width:  20%;
  max-height:  20%;
  margin: 2px;
  float: right;
  vertical-align: middle;    
}  

div.menu p{
  text-align: center; 
  margin: 4px auto;
  font-style:italic; 
}        
div.menu p.time{
  text-align: left; 
  margin: 0px;  
  font-style: normal;
}      

div.rmenu{
  display: block;  
  background: #F8F9FD;
  color: #666;
  font-weight: bold;   
  font-size: 132%;
  min-height: 2em;   
  margin: 0;  
  padding: 1em;
  padding-left: 2.0em;
  padding-right: 2.0em;
  text-align: left;  
  cursor: pointer; 
  vertical-align: middle;
  border: 1px solid lightgray;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}       
div.rmenu:hover{
  background: #c1c7da;
  border-color: #a1a1b9;
  color: #222; 
}
div.rmenu img{
  max-width:  16%;
  margin-top: 0em;
  margin-left: 1em;    
  float: right;
  vertical-align:top;
}

img.rightIcon{  
  max-width: 2.4em;  
} 

/* ################################################################### GANTT */
.bar1, .bar2, .bar3, .bar11, .bar22 {
    
  background-image: -moz-linear-gradient(bottom, #8899bb 0%, #a2adce 100%);
  background-image: linear-gradient(to bottom, #8899bb 0%, #a2adce 100%);
  background-color: #a2adce;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#aacdf4, EndColorStr=#88aadd, GradientType=1)";
  border: 1px solid #444F6B;
  position: fixed;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 1px 0 #a2adce inset;
}
.bar2, .bar22 {
    
  background-image: -moz-linear-gradient(bottom, #fe6457 0%, #fe7569 100%);
  background-image: linear-gradient(to bottom, #fe6457 0%, #fe7569 100%);
  background-color: #ce4533; 
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#fe6457, EndColorStr=#fe7569, GradientType=1)";
  border-color: #d83526;
  box-shadow: 0 1px 0 #f29c93 inset; 
}
.bar3{
  background-image: -moz-linear-gradient(bottom, #eeee88 0%, #ffffaa 100%);
  background-image: linear-gradient(to bottom, #eeee88 0%, #ffffaa 100%);
  background-color: #ce4533;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#eeee88, EndColorStr=#ffffaa, GradientType=1)";
  border-color: #bbbbbb;
  box-shadow: 0 1px 0 #ffffee inset; 
}
.bar4 { 
    border: 1px solid #444F6B;
    background-color: #F6F6F8; 
    cursor: auto;
    border-radius: 3px;
    position: fixed;
}
.bar5 { 
    border: 1px rgba(78, 78, 88, 0.5);
    cursor: auto;
    border-radius: 3px;
    position: fixed;
    background-color:rgba(78, 78, 88, 0.5);
}

.bar11, .bar22, .bar3 {
    cursor: auto;
}
.bar1:hover{
  background-image: -moz-linear-gradient(bottom, #a2adce 0%, #667799 100%);
  background-image: linear-gradient(to bottom, #a2adce 0%, #667799 100%);
  background-color: #aacdf4;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#88aadd, EndColorStr=#aacdf4, GradientType=1)";
}
.bar2:hover{
  background-image: -moz-linear-gradient(bottom, #fe7766 0%, #ce5544 100%);
  background-image: linear-gradient(to bottom, #fe7766 0%, #ce5544 100%);
  background-color: #fe5344;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ce4533, EndColorStr=#fe5344, GradientType=1)";
}
.bar1 span, .bar2 span{
  display: table-cell;
  font-weight: bold;   
  text-align: center; 
  vertical-align: middle;   
}
.bar1 span{
  color: #14396a;
}
.bar2 span{
  color: #fff;
}

.histogram{  
  background-image: -moz-linear-gradient(bottom, SEAGREEN 0%, MEDIUMSEAGREEN 100%);
  background-image: linear-gradient(to bottom, SEAGREEN 0%, MEDIUMSEAGREEN 100%);
  background-color: SEAGREEN;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#aacdf4, EndColorStr=#88aadd, GradientType=1)";  
  border: 0px;
  position: fixed;
  border-radius: 0px;
  box-shadow: 0 1px 0 #bee2f9 inset;
}



.line, .line1{
  background: #d3d3d3;
  border: none;  
  width: 1px;
  height: 1px;
  float: left;
  position: fixed;
  left: 0;
  top: 0;
}
.line1{
  background: #808080;
}
.text, .text1, .text2,  .text3, .text22, .text33, .menuText{
  background: transparent;  
  border: none;
  color: #000000;
  width: 200px;
  height: 20px;
  position: fixed;
  top: 0;
  left: 0;
  float: left;  
  text-align: left;
}
.text22{
  color: white;
  font-size: 132%;
  text-align: center;
}
.text33{
  color: darkred;
}

.text1{
  cursor: pointer;
}
.menuText{
  cursor: pointer;
  line-height : 200%;
  display: table-cell;
  vertical-align: middle;
}

.textRisk{
  background: transparent;  
  border: none;
  color: #666; 
  width: 100em;
  height: 1.5em;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 132%;       
  float: right;  
  text-align: right;
}



.text1:hover, .menuText:hover{
  background-color: #A7CDF0;
  background-color: #c1c7da;    
  color: #222; 
  /*height: 40px;*/
}
.available, .core, .holiday, .training, .sick, .notavailable {
  background: #C8CAD8;
  border: none;
  width: 1px;  
  height: 1px;
  position: fixed;
  top: 0;
  left: 0;  
  float: left; 
}
.core{
  background: #9396AA; 
}
.holiday{
  background: #FFEDC9;
}
.sick{
  background: #FFC299; /* #EE6464; */
}
.training{
  background: #4FBA72;
}
.notavailable{
  background: #FFFFFF;
}

.border {
    border: 1px grey;
    border-style:solid;
    border-width:1px;
}

.resMenu{
  border: 1px solid #888;
  width: 1px;  
  height: 100px;
  position: fixed;
  visibility: hidden;
  background: whitesmoke;
  display: table;
}
.calMenu{
  border: 1px solid #888;
  width: 1px;  
  height: 100px;
  position: fixed;
  visibility: hidden;
  background: whitesmoke;
}
button{
  position: fixed;
  cursor: pointer;
  font-size: 100%;
  background-color: #FAFAFA;
  border: 1px solid lightgray;
}

button:hover{
    background: #A7CDF0;
    background-color: #c1c7da;
    border-color : #888;
/*    color : white;    */
}

button.btnStatic{
  cursor: auto;  
}

button.btnStatic:hover{
  background-color: #FAFAFA;
  border: 1px solid #888;
  color : black; 
}


a.button{
  display: block;  
  text-align: center;
  margin: 0.5em;
  position: fixed;
  cursor: pointer;
  font-size: 100%;
  background-color: #D4D6DB;  
  background-color: #FAFAFA;
  border: none;
  border: 1px solid lightgray;
}

a.button:hover{
     background: #A7CDF0; 
     background-color: #c1c7da;
/*     border-color : #A7CDF0; */
/*     color : white;    */
}

button.no{
  position: fixed;
  cursor: initial;
  font-size: 100%;
  background-color: transparent;  
  border: 1px solid transparent;
  color: #000000;
}

button.no:hover{
    cursor: initial;
    background-color: transparent;  
    border: 1px solid transparent;
    color: #000000;
}

button.control{
  position: relative;
  cursor: pointer;
}

div.control{
  position: fixed;
  padding: 4px;
  font-size: 132%;
  text-align: right;
}


svg.arrow{
  width: 7px;  
  height: 7px;
  position: fixed;
}

p.top{ vertical-align: top; }
p.left{ text-align: left; }
br{ clear:both; }

img.res{
  max-width: 16%;
  float: right;
  vertical-align:top;
  box-shadow: 3px 3px 3px #7C7C7C; 
}  

img.task{
  max-height: 25%;  
  max-width:  50%;
  position: fixed;  
  box-shadow: 3px 3px 3px #7C7C7C; 
}  
img.employee{
  max-height: 25%;  
  max-width:  25%;
  position: fixed;  
  padding-right: 3em;
  width: auto;
}  



img.imghelp{
  max-width:  33%;
  margin-left: 1em;
  margin-bottom: 1em;
    
  float:right;
 /*box-shadow: 3px 3px 3px #7C7C7C; */
}
img.scenario{
  float: left;
  width: 6em;
  vertical-align:top;
  margin: 0.5em;  
}  

p.res{
    position:fixed;
    float: left;
    width: 82%;
    margin: 0;
    font-size: 100%;
}


div.today{
    position: fixed; 
    /* Fallback for web browsers that doesn't support RGBa */
   /* background: rgb(153,255,153) transparent;  */
    background: rgba(153,255,153,0.5); 
}
div.todayText{
    position: fixed; 
    color: lightgreen;
}
div.now{
  width : 100%;
  text-align: center;
}
div.overtimeText{
    position: fixed; 
    color: crimson;
}

div.task{
  float:left;  
}

div.clear {
    clear:left;
}

table.task{
  width:100%;
  border:0px;    
}
table.task td{
  padding: 4px;
  font-size: 132%;
  text-align: right;
}

table.skills{    
  font-size: 132%;
  width: 90%;
  text-align: center;
  background-color: white;
  border: 0;
}
table.skills td {
  padding: 0.2em;
  border: none;
}
table td.left{  
  text-align: left;
  padding: 0.2em;
  padding-left: 1em;
  vertical-align:top;  
  height : 1.6em;
}
table td.leftTask{  
  text-align: left;
  padding: 0.2em;
  padding-left: 1em;
  vertical-align: middle;  
  height : 1.6em;
}

table td.leftTask2{  
  text-align: left;
  padding: 0.1em;
  padding-left: 0.4em;
  vertical-align: middle;  
  height : 1.4em;
}
table td.rightTask2{  
  text-align: right;
}

table td.color1 {
    color:#52527a;
}

table td.color2 {
    color: #248f8f;
}


tr.title {
    background-color: #2E394F;
    background: #444F6B;
    color : white;
    border: 1px solid #2E394F;
}
tr.main {
    background-color: #dfe2ec;
    color : #2E394F;
    color:#D75464;
    color:#52527a;
}
table.skills td.hr {
    background-color: #dfe2ec;
    height: 1px;
    padding:0;
}
table.skills td.hr-transparent {
    background-color: transparent;
    height: 1px;
    padding:0;
}

/*
td.item {
   background-color: white;
   text-align: center;   
//   border: 1px solid darkgray;
//   background-color: #FAFAFA;    
}

td.item:hover {
   background-color: #c1c7da;    
}
*/
table td.priority{  
  text-align: center;
  padding: 4px;
  color: lightgray;
  vertical-align:top;
  border: 0;
}


hr{  
  background: transparent;
  color:transparent;
  height: 0px;
  border-bottom: 1px solid #EAEAEE;
}

div.calendar{
    position: fixed; 
    background: white;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;  
    cursor : pointer;
}
div.calendar:hover{
  background: #A7CDF0;
  /*border-color: #a1a1b9; */
  background-color: #c1c7da;    
  color: #888; 
}

div.weekDays, div.weekDaysToday {
    position: fixed; 
    background: white;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;  
}

div.weekDaysToday {
   /* background: rgb(153,255,153) transparent; */
    background: rgba(153,255,153,0.5); 
}

.riskLeftBox0, .riskLeftBox1, .riskLeftBox2, .riskLeftBox3, .riskLeftBox4, .riskLeftBox5, .riskBox0, .riskBox1, .riskBox2, .riskBox3, .riskBox4, .riskBox5, .riskRightBox0 {
    position: fixed; 
    background: white;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
}

.riskBox0, .riskBox1, .riskBox2, .riskBox3, .riskBox4, .riskBox5 {
    text-align: center;
    vertical-align: middle;  
}

.riskBox0 , .riskBox5 {  color : #000000;  /* standard color - dark */  }
.riskBox1 , .riskBox4 {  color : #006633;  /* color - green */     font-weight: bold;   }
.riskBox3  {             color : #EE4444;  /* color - red */         }
.riskBox2  {             color : #999999;  /* color - gray */        }

.riskLeftBox0, .riskLeftBox1, .riskLeftBox2, .riskLeftBox3, .riskLeftBox4, .riskLeftBox5 {
    text-align: left;
    vertical-align: middle;  
    padding-left: 4px;
}
.riskLeftBox0 , .riskLeftBox5 {  color : #000000;  /* standard color - dark */  }
.riskLeftBox1 , .riskLeftBox4 {  color : #006633;  /* color - green */      font-weight: bold;  }
.riskLeftBox3  {                 color : #EE4444;  /* color - red */         }
.riskLeftBox2  {                 color : #999999;  /* color - gray */        }

.riskRightBox0{
    text-align: right;
    vertical-align: middle;  
    padding-right: 8px;
    margin-right: 12px;
}


div.status1{    
    font-size: 100%;
    text-align: center;
    vertical-align: top;  
    color : #000000;  /* standard color - dark */  
    position: fixed; 
    background: transparent;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
}

input.status1{    
    font-size: 100%;    
    text-align: center;
    vertical-align: top;  
    color : #000000;  
    position: fixed; 
    background: white;
    border: 1px darkred;
    border-style:solid;    
}

textarea.status1{    
    font-size: 132%; 
    font-family: Arial, Verdana, sans-serif;
    text-align: left;
    vertical-align: top;  
    color : #000000;  
    position: fixed; 
    background: white;
    border: 1px darkred;
    border-style:solid;
    box-sizing: border-box;
    padding: 0.3em;
}


div.clickable{
    cursor: pointer;
    position: fixed; 
    background: transparent;
    border-width:0px;    
}
div.clickable:hover{
    background: #929dbe;
    opacity:0.50; 
}

tr.clickable{
    cursor: pointer;
    background: transparent;
}
tr.clickable:hover{
    background: #929dbe;
    opacity:0.50; 
}


div.draggable{
    cursor: pointer;
    position: fixed; 
    background: transparent;
    border-color: transparent;
    border-width: 1px;
}
div.draggable:hover{
    cursor: move;
}

div.roadmap{
    cursor: pointer;
}


div.meeting0{
    position: fixed; 
    background: #E0E4EB;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;  
}
div.meeting1{
    position: fixed; 
    background: lightgoldenrodyellow; 
    background:#ccebff;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;  
    cursor: pointer; 
}
div.meeting2{
    position: fixed; 
    background: linen;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;      
    cursor: pointer;
}
div.meeting3{
    position: fixed; 
    background:lightblue;  
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;      
    cursor: pointer;
}
div.meeting4{
    position: fixed; 
    background: bisque;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;       
    cursor: pointer;
}

div.meeting9{
    position: fixed; 
    background: white;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;  
}

div.meeting1:hover{
  background-color: #c1c7da;    
  color: #222; 
}

div.meeting2:hover{
  background-color: #c1c7da;    
  color: #222; 
}
div.meeting3:hover{
  background-color: #c1c7da;    
  color: #222; 
}
div.meeting4:hover{
  background-color: #c1c7da;    
  color: #222; 
}

div.meeting0:hover{
  background-color: #c1c7da;    
  color: #222; 
}

div.meeting9:hover{
  background-color: #c1c7da;    
  color: #222; 
}

table.risk{
  border: 1px solid gray;   
  table-layout: fixed;    
  border-collapse: collapse;
}

td.clickableRow{
  background-color: white;
  padding: 4px;
  border: 1px solid gray;   
  
}


td.riskTitle{
  background-color: lightgray;
  font-weight: bold;
  text-align: center;
  vertical-align:middle;
  padding: 4px;
}

svg.romb {
    left:40px; top:40px; 
    position: fixed;        
}

svg.line {
    left:100px; top:100px; width:100px; height:100px;
    background-color: transparent;
    position: fixed;  
    pointer-events: none; 
}

line {
    stroke : gray; 
    stroke-width : 1;     
    stroke-linecap : round;
    pointer-events: none; 
}


line#tomato {
    stroke : red;     
}
line#slategrey {
    stroke : slategrey;     
}

svg.circle {
    left:40px; top:40px; 
    position: absolute;   
    box-shadow: none;
    border-radius: 50%;
}

svg.circle1 {
    display:inline-block; 
    vertical-align: middle;
}

div.boss{
  background: #FFF;
  width: 100px;
  height:100px;
  color: #666;
  min-height: 50px;      
  margin: 0;  
  padding: 10px;  
  text-align: left;  
  cursor: pointer; 
  vertical-align: middle;
  border: 1px solid gray;
  position: fixed;
}       
div.boss:hover{
  background: #c1c7da;
  border-color: #a1a1b9;
  color: #222; 
}
div.boss img{
  max-height:  96%;
  height : 4em;
  margin: 4px;
  float: right;
  vertical-align:top;
  
}  

div.boss p{
  max-width:  60%;
  vertical-align:top;
}


div.people{
  background: #FFF;
  width: 100px;
  height:100px;
  color: #666;
  margin: 0;  
  padding: 8px;  
  text-align: left;  
  cursor: pointer; 
  border: 1px solid gray;
  position: fixed;
}       
div.people:hover{
  background: #c1c7da;
  border-color: #a1a1b9;
  color: #222; 
}
div.people img{
  max-height:  80%;
  margin: 2px;
  float: right;
  vertical-align:top;
} 

div.detail{
  position: fixed;
  vertical-align:top;  
  margin: 0;  
  padding: 8px;  
  text-align: left;
} 

div.detail img{
  max-height: 60%;
  max-width:  60%;
  margin: 2px;
  float: right;
  vertical-align:top;
} 

div.rightText {
  margin: 2px;
  text-align: right;
  vertical-align:top;
  position: fixed;
} 


div.dashboard {
  margin: 2px;
  text-align: right;
  vertical-align:top;
  position: fixed;
  font-size: 100%;
} 


div.text-rotation {
    transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    -moz-transform:rotate(-40deg);
    
    position: fixed; 
    background: transparent;
    border: 0px;
    border-style: none;
    
    text-align: left;
    
}


.raci0, .raci1, .raci2, .raci3, .raci4, .raci5, .raci6 {
    position: fixed; 
    background: white;
    border: 1px grey;
    border-style:solid;
    border-width:1px;
    text-align: center;
    vertical-align: middle;  
}

.raci1{ background: peachpuff; }
.raci2{ background: lightpink; }
.raci3{ background: /* palegreen */ #A8FFA8; }
.raci4{ background: /*paleturquoise  */ #BBFBFB ; }
.raci5{ background: /* plum  */  #EDB0ED ; }
.raci6{ background: slateblue; }


.raci0:hover{ background-color: #c1c7da;    color: #222;  cursor: pointer; }
.raci1:hover{ background-color: #c1c7da;    color: #222;  cursor: pointer; }
.raci2:hover{ background-color: #c1c7da;    color: #222;  cursor: pointer; }
.raci3:hover{ background-color: #c1c7da;    color: #222;  cursor: pointer; }
.raci4:hover{ background-color: #c1c7da;    color: #222;  cursor: pointer; }
.raci5:hover{ background-color: #c1c7da;    color: #222;  cursor: pointer; }
.raci6:hover{ background-color: #c1c7da;    color: #222;  cursor: pointer; }


div.mailList {
    position: fixed; 
    background: transparent;
    border-color: gray;
    border-width: 1px;
    border: 1px solid lightgray;
   
    
    overflow-y: scroll;
}
div.mailContent{    
    position: fixed; 
    background: transparent;
    left: 500px;
    top:100px;
    font-size:132%;
}
p.memo, p.memo0, p.memo1  {
    font-weight: normal;
    background: transparent;
    display: block;
    margin: 0em;
    padding: 0.4em;
    cursor:pointer;
    border-bottom: 1px solid lightgray; 
    font-size: 132%;
}

p.memo:hover, p.memo0:hover, p.memo1:hover  {
    /*
    background: #A7CDF0;
    opacity:0.5; 
    */
    background: #929dbe;
    opacity:0.50;
    
 /*   filter:alpha(opacity=5);  */
    color: black;
    /*font-weight: bold;*/
}

p.memo1  {
    font-weight: bold;
}
p.memo0{
    background: #A7CDF0;
    background: #929dbe;
    
    font-weight: normal;
}
span.memoDate{
    display: block;
    font-size: small;
    text-align: right;
}
span#dummy{
    visibility: hidden;
}

img.memoRes{
  max-height: 30%;
  float: right;
  vertical-align:top;
 /* box-shadow: 3px 3px 3px #7C7C7C; */
  margin: 0.5em;
}

img.mailRes{
  /*height: 50%;
  width: 50%; */
  max-height: 100px;  
  max-width: 150px;    
  vertical-align:top;
  float: right;  
  margin: 0.5em;     
 /* box-shadow: 3px 3px 3px #7C7C7C; */
}

div.decList {
    position: fixed; 
    background: transparent;
    border-color: gray;
    border-width: 1px;
    border: 1px solid lightgray;
    overflow-y: scroll;
}
div.decContent{    
    position: fixed; 
    background: transparent;
    left: 500px;
    top:100px;
    font-size:132%;
}

.missedOption{
    color:#BBB;    
}

.chosenOption{
    color:#000000;
}

img.assistant {
    position: absolute;
    top: 0px;
    left: 0px; 
    width:100%;
    height:100%;
}

.blink {
     position: absolute;
     top: 384px;
     left:812px;
     color: white;
     font-size: 220%;
     height: 2em;
     width: 2em;
     border : 0.1em solid  #FFC300; 
     border: none;
     background-color:  transparent;
    padding-left: 0em;
    padding-top: 0em;
     
     cursor: pointer;
     margin: 0em;
     line-height: 1.7; 
     animation: blink 2s steps(10, start) infinite;
     -webkit-animation: blink 2s steps(10, start) infinite;
    }
    @keyframes blink {
      to { visibility: hidden; }
    }
    @-webkit-keyframes blink {
      to { visibility: hidden; }
    }


.blinkPhone {
     position: absolute;
     top: 384px;
     left:812px;
     /* color: transparent; */
     border: 0; 
     cursor: pointer;
     animation: blink 2s steps(10, start) infinite;
     -webkit-animation: blink 2s steps(10, start) infinite;
    }
    
div.blink-click {
     position: absolute;
     top: 384px;
     left:812px;
     border : 0.12em transparent;     
     margin: 0;
     padding: 0;
     cursor: pointer;     
     width: 4em;
     height: 4em;
    }
    
.help {
     position: absolute;
     color: darkgray;
     font-size: 110%;
     border : 0.12em solid darkgray;
     border-radius: 48%;
     margin: 0;
     padding: 0;
     cursor: pointer;
     line-height: 1.6;     
     width: 1.5em;
     height: 1.5em;
    }
    
.pi, .mail, .pi2 {
     position: absolute;
     text-align: right;
     top: 10px;
     left:0px;
     padding-right: 4em;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
    
     color: #333;     
     margin: 0;
     font-size: 100%;
     font-family: Verdana, Arial, sans-serif;  
     cursor: pointer;
    }
.pi2{cursor: auto;}

.pi:hover,  .mail:hover, .help:hover{
    background-color: #c1c7da;
    }

.bt {
     position: absolute;
     text-align: center;
     top: 10px;
     left:10px;
     color: #000000;     
     margin: 0;
     padding: 0.12em;
     font-size: 100%;    
    font-family: Verdana, Arial, sans-serif;  
  
    }    
    
    
.mail {
    text-align: center;
    color: firebrick;
    }
 
 p.desc{
    float: left;
    width: 98%;
    margin: 0;
    font-size: 132%;
}   
    
.activeOption, .passiveOption {
     text-align: left;
     color: #000000;     
     margin: 0em;
     padding: 0.5em;
     cursor: pointer;
     font-size: 132%;
     border: 1px solid darkgray;
     background-color: #FFFFFF;
    }   
    
.activeOption:hover, .passiveOption:hover {
  background: #c1c7da;
  border-color: #a1a1b9;
  color: #222;     
    
}

span.errorAlert{
  display: block;
  font-size: 132%;  
  color: yellow;
  background-color: tomato;  
  background: tomato;  
}

table.dec{
    width:98%;
}
td.td1 {
    width:10%;
    text-align: center;
    vertical-align: top;
    font-size: 200%;
}
td.td2 {
    width:98%;
    vertical-align: top;
}
img.td1 {
    max-width:1.5em;    
    max-height:1.5em;
    float: center;
    vertical-align:top;
    /*box-shadow: 3px 3px 3px #7C7C7C; */
    margin: 0.1em;  
}
div.explain{
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-color: red;
    cursor: pointer;
}
div.explain:hover{
    background-color: #A7CDF0;
    opacity:0.5; 
/*    filter:alpha(opacity=5);  */
    border-color: #a1a1b9;
    color: #222; 
}

.explanation{
  border-color: transparent;  
  border-color: #222;  
  
  border-style: solid;
  border-width: thin;  
  background-color: #ffffcc;
  background-color: #FFF;
  
  position: fixed;
  width:40%;
  min-height: 20%;
  visibility: hidden;
  border-radius: 0.8em;
  border-radius: 0.0em;
  margin: 1em;
  padding: 1em;
  font-size: 132%;
}

p.demo{
  text-align: center; 
  margin: 0px;  
  font-style: italic;
  /*color: darkred;*/
  font-weight: bold;   
 /*  animation: blink-animation 5s steps(50, start) infinite;
  -webkit-animation: blink-animation 5s steps(50, start) infinite;
 */ 
} 

div.inactive{
    position: fixed;
    width: 10px;
    height: 110%;
    background-color: transparent;
    border: 0 transparent;
    cursor:not-allowed;
}

div.menudiv {
    font-size: 100%;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

input.code{
    display: block;
    position:fixed;
    resize: none;
}
input.checkbox {  
  font-size: large;  
  margin: 0.5em;
  padding: 0.5em;
  height: 0.5em;
  width: 0.5em;  
  text-align: center;
  -webkit-appearance:checkbox;
}
.rmi {  
  position: absolute;  
  font-size: 150%;  
  text-align: left; 
  top: 1em;
  width: 50%;  
  margin:0;    
}

.dialog{
  background:rgba(200,200,216,0.6);
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;  
}


.dialogbox{  
  position: absolute;
  display: block;
  top: 15%;
  left: 20%;
  width: 60%;
  height: 70%;    
  background-image: -moz-linear-gradient(right bottom, #FEFEFE 0%, #E2E4E6 100%);
  background-image: linear-gradient(to right bottom, #FEFEFE 0%, #E2E4E6 100%);
  border: 1px solid darkgray;
}



button.dialogBtn{
  position: fixed;
  cursor: pointer;
  font-size: 132%;    
  background-color: #FAFAFA;  
  background: lightgray;  
     
  border: 1px solid darkgray;
  position: absolute;  
  left: 70%;
  top: 20%;
  width: 20%;
  height: 2.5em;
  
  background-image: -moz-linear-gradient(right bottom, #E2E4E6 0%, #FEFEFE 100%);
  background-image: linear-gradient(to right bottom, #E2E4E6 0%, #FEFEFE 100%);
  
  
}

button.dialogBtn:hover{
    background: #A7CDF0;  
    background-color: #c1c7da;
    border-color : #888; 
    /*color : white;    */
}



input.inputDialog{
  position: fixed;
  cursor: pointer;
  font-size: 132%;   
  background-color: #FAFAFA;  
  border: 1px solid darkgray;
  position: absolute;  
  left: 44%;
  top: 20%;
  width: 20%;
  height: 2.5em;
  float: center;
  text-align: center;
}

.textDialog{
  background: transparent; 
  font-size: 132%; 
  border: none;
  color: #111;
  width: 20em;
  height: 6em;
  position: absolute;
  left: 8%;
  top: 20%;  
  float: left;  
  text-align: left;
  padding-top: 0.5em;
}

.textDialog#invalid{
    top: 30%; 
    left:45%; 
    color: red;
}


.dotline{
    position: relative;
    width: 100%;
    height: 0.16em;
    background: #D75464;
    background: #343F55;
    z-index: 99999;
    overflow: hidden;
}
.dot{
    position: absolute;
    height: 100%;
    width: 0.36em;
    background: white;
    animation: dotleft 2.5s cubic-bezier(.7,.5,.7,.5) infinite;
}

@keyframes dotleft {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

button.taskDel, button.taskPrio{
  position: relative;
  cursor: pointer;
  font-size: 85%;
  color: darkred;
  background-color: white;
  border: none;  
  float:left;
}

button.taskPrio{
  font-weight: bold; 
  color: #888;
  font-size: 85%;    
}

button.taskPrio:hover{
     background-color: #c1c7da;
     color : white;    
}

button.taskDel:hover{
     background: red;
     color : white;    
}

button.taskNav{
  position: absolute;
  cursor: pointer;
  color: darkgray;  
  background-color: transparent;
  border: 0.08em solid #aaa;
  text-align: center;
  /*vertical-align: top; */
  border-radius: 1.1em;
  width: 2.2em;
  height: 2.2em;
  left: 86%;
  top:0;
  margin:1em; 
  padding: 0.1em;
  font-weight: bold;   
 
}

span.taskNav{
  font-weight: bold;  
  font-size: 90%;    
  color: #888;  
  background-color: transparent;
  text-align: center;
  vertical-align: top;
}

button.taskNav:hover{     
    background-color: #c1c7da;
    /* color : white;    */
}
div.neutral{    
    position: fixed;
    top: 0px;
    left: 444px;
    background: transparent;
    width: 8px;
    height: 8px;
    border: 0px;
}

div.bottom{    
    position: absolute;
    bottom: 0px;
    width: 99%;
}
div.bottomBox{
    position: relative;
    margin: 0 auto;
}

span.menu{
  font-size: 90%;        
  background-color: #444F6B;    
  color: #eee;
  padding: 0.4em;  
  text-align: left;  
  cursor: pointer; 
  font-weight: normal;
  border: 1px solid #444F6B;     
    
}

span.menu:hover{

  -moz-box-shadow: rgba(40, 44, 64, 0.7) 2px 2px 10px inset;
  -webkit-box-shadow: rgba(40, 44, 64, 0.7) 2px 2px 10px inset;
  box-shadow: rgba(40, 44, 64, 0.7) 2px 2px 10px inset;          
    
}

button.progress{
    
  /* border: 1px solid darkgray; */
  border : none;    
  cursor : auto;    
  position:fixed;
  font-size: 100%;
  color : #4CAF50 !important;
  background-color: white;
  text-align: center !important;
  vertical-align: middle;
  padding: 0;
  margin: 0;    
  line-height: 2em;
  border-radius: 1em;
}

button.progressDone{
  border: none;
  cursor : auto;    
  position:fixed;
  font-size: 100%;
  color : #fff !important;
  background-color: #4CAF50;
/*  background-color: #D75464;
  background-color: #248f8f; */
  padding: 0;
  margin: 0;     
  opacity: 50%;    
  text-align: center !important;
  vertical-align: middle;
  line-height: 2em;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;        
}

div.progressChild{
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
    width: 100%;
}
span.version {
    color:#f8f8f8;
    font-size: 90%;
}
img.mail {
    position: absolute;
}
img.mail:hover {
    background-color: transparent;
}
div.mail:hover {
    background-color: transparent;
}
div.mail {
    background-color: transparent;
    color: whitesmoke;
    font-family: Verdana, Arial sans-serif;
    font-size: 100%;
    cursor : pointer;
    text-align: center;
}

div.whiteboard {
     position: absolute;
     text-align: center;
     top: 10px;
     left:0px;
     color: #000000;     
     margin: 0;
     padding: 0.12em;
     font-size: 132%;
    background-color: white;
    }

div.menuTime{
  background: #444F6B;    
  color : #fff;    
  min-height: 7%;  
  margin: 0;  
  padding: 0em;  
  text-align: center;  
  cursor: auto; 
  vertical-align: middle;
  border-bottom: 1px solid #343F55;
  font-weight: normal;  
  opacity: 1;   
  font-size: 90%;    
}  
div.white {
    background-color: white;
    position: fixed;
}

div.header1 {
    background-color: #444F6B;
    position: fixed;
}
div.header2 {
    background-color: #dfe2ec;
    position: fixed;
}

div.btnCenter {
    width:70%;
    display: inline-block;
    float:left;
    text-align: center;
    margin:0 auto;
    color:#222;    
    vertical-align: middle;
    height:auto;
}
div.down {
    font-family: Verdana, Arial, sans-serif; 
    width:2.5em;
    font-size: 80%;
    display: inline-block;
    float:right;    
    color:#a8afb0;
    vertical-align: middle;
    height: auto;
    border-left: 1px solid #d8dfee; 
}

img.raci{
  float: left;
  width: 2.5em;
  vertical-align:top;
  margin: 0.1em;  
}  

img.cal{
  float: right;
  width: 2.5em;
  vertical-align:top;
  margin: 0.5em;  
  margin-top: 0.3em;  
}

img.resSmall{
  float: right;
  width: 2em;
  vertical-align:top;
  margin-right: 0.6em; 
  margin-left: 0.6em; 
  margin-top: -0.3em;     
}  

img.resTask{
  float: left;
  width: 1.7em;
  vertical-align:top;
  margin-right: 0.5em; 
  margin-left: 0em; 
  margin-top: 0em;     
}  

div.raciImage {
    position: fixed; 
    padding: 0.2em;
}

/* ____________ Program Management ______________________ */


table.pg{    
  font-size: 132%;
  width: 90%;
  text-align: center;
  background-color: white;
  border: 0;
}
table.pg td {
  padding: 0.4em;
  border: none;
}

table td.pgL{  
  text-align: left;
  padding: 0.1em;
  padding-left: 1em;
  vertical-align: top;  
  height : 1.44em;       
}

table th.pgL{  
  text-align: left;
  padding: 0.1em;
  padding-left: 1em;
  vertical-align: top;  
  height : 1.44em;
  font-weight: normal;
}


table td.color1 {
    color:#52527a;
}

table td.color2 {
    color: #248f8f;
}
table td.color3 {
    color: #EBB650;
}

table td.color4 {
    color: #000000;
}

table td.color5 {
    color: red;
}

table.pg tr td{
    cursor: pointer;
    background: transparent;
    border-width:0px;    
}
 table.pg tr:hover td{
    background: #929dbe;
    opacity:0.50; 
    color: black; 
}

table.pg th.hr {
    background-color: #dfe2ec;
    height: 1px;
    padding:0;
}
table.pg th.hr-transparent {
    background-color: transparent;
    height: 1px;
    padding:0;
}

img.resPG{
  float: left;
  width: 1.4em;
  vertical-align:top;
  margin-right: 0.5em; 
  margin-left: 0em; 
  margin-top: 0em;     
} 

img.btnPG{
  width: 1.4em;
  vertical-align:top;
  margin-right: 0.5em; 
  margin-left: 0.5em; 
  margin-top: 0em;  
  margin-bottom: 0em;     
} 


table.description {
    font-size: 132%;
    width: 98%;
    text-align: center;
    background-color: white;
    border: 0;
    margin: 0.2em;
}

div.bx{
  background: transparent;  
  border: none;
  color: #000000;
  width: 100px;
  height: 20px;
  position: fixed;
  top: 0;
  left: 0;
  float: left;  
  text-align: left;
  font-size: 132%;    
}
td.bx{
    font-size: 132%;
    vertical-align: top;
}
td.bx1{
    font-size: 100%;
    vertical-align: top;
}

div.clr0, td.clr0 {
    color: #000000;
}
div.clr3, td.clr3 {
    color:#93D144;
}

div.clr2, td.clr2 {
    color: #248f8f;
}
div.clr1, td.clr1 {
    color: #EBB650;
}
div.clr4, td.clr4 {
    color: #D85366;
}

div.clr5, td.clr5 {
    color: #52527a;
}

div.cCompleted {
    background-color : #93D144;
    color : #000000;
    border: none;
    position: fixed;
}

div.cProgress {
    background-color : #248f8f;
    color : #000000;
    border: none;
    position: fixed;
}
div.cObjectives {
    background-color : #444F6B;
    text-align : left;
    color : white;   
    line-height: 2em;
    border: none;
    position: fixed;
    display: table-cell;
    
}


div.cCanNot {
    background-color : #D85366;
    color : #000000;
    border: none;
    position: fixed;
}

div.cPending {
    /*background-color : #EBB650;*/
    background-color : white;
    
    color : #EBB650;
    border: 2px solid #EBB650;
    position: fixed;
}

span.alretImage{
    height: 4em;
    width: 96%;
    float:right;
    margin:0.1em;
    text-align: right;
}
img.alretImage{
    height: 4em;
    float: right;
}

.numberCircle1, .numberCircle2, .numberCircle3 {
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    padding: 0.05em;
    margin: 0.1em;
    background-color : #93D144;
    border: none;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    font: 0.9em Arial, sans-serif;
} 

.numberCircle2{
    background-color :#EBB650;
}

.numberCircle3{
    background-color :  #D85366;
}