.style100
{
  margin: 0;
  padding: 0;
  /*width:100%;*/
}
    
.styleul1{
  margin: 0;
  padding: 0;
  list-style: none;
  height: 25px;
}

.clearing
{
    display:block;
    clear:both;
}
.crumbs
{
    height:65px;
    display: flex;
    transform: rotatex(-180deg);
}
.crumbs li{
	TEXT-ALIGN: center;
	LIST-STYLE-TYPE: none; 
	DISPLAY: inline-table; 
	LIST-STYLE-IMAGE: none
}
.crumbs li a {
	display: inline-block;
	float: left;
	background: #999999;
	text-align: center;
	/*text-indent:25px;*/
	padding:20px 0px 0px 0px;
    height: 30px;
    width: 110px;
	position: relative;
	margin: 0 10px 0 0; 
	font-size: 13px;
	text-decoration: none;
	color: #fff;
	box-shadow:0px 1px 3px black;
	
}                               
.crumbs li a:after {
	content: "";  
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid #999999;
	position: absolute; 
	right: -25px; 
	top: 0;
	z-index:10;
}

.crumbs li a:before 
{
    content:"";
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid #e4e2e2;
	text-indent:25px;
	position: absolute; left: 0px; top: 0;
	z-index:0;
}

.crumbs li a.finishstep
{
    background:#484848;/*68dff0*/
    height:30px;
    width:40px;
    padding-left:15px;
    /*pointer-events:none;*/
    /*cursor:none;*/
}
.crumbs li a.finishstep:hover
{
    background:#999999;
}

.crumbs  li a.startstep
{
    background:#484848;/*68dff0*/
    height:30px;
    width:30px;
    left:0px;
    /*pointer-events:none;*/
    /*cursor:none;*/
}

.crumbs li a.startstep:hover
{
background:#999999;
}
.crumbs li a.startstep:hover:after
{
 content: "";  
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid #999999;
	position: absolute; 
	right: -25px; 
	top: 0;
	z-index:10;

}

.crumbs li a.startstep:after 
{
    content: "";  
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid #484848;
	position: absolute; 
	right: -25px; 
	top: 0;
	z-index:10;
}


/*border-bottom: 20px solid #C0C0C0;*/

.crumbs li:first-child a:before {
	display: none; 
}
.crumbs li finishstep a:after {
	display: none; 
}



.crumbs li:last-child a:after {
	display: none;
}

.crumbs li:last-child a:hover {
	 background:#999999;
}

/*#crumbs ul li:first-child a:hover {
	 background:#999999;
}*/

/*#crumbs ul li a:last-child {
	padding:0 0 10px 0;
}*/

.crumbs  li a:hover 
{
	background: #3498db;
	/*border-bottom: 20px solid #C0C0C0;*/
}
.crumbs li a:hover:after 
{
	border-left-color: #3498db;
}

.crumbs li a.collapse
{
    background:#484848;/*68dff0*/
    height:30px;
    width:10px;   
}
.crumbs li a.collapse:hover
{
    background:#999999;/*68dff0*/ 
}
.crumbs li a.collapse:after
{
    display:none;   
}
.crumbs li a.collapse:before
{
    
}

.crumbs  li a.now
{
    background:#3498db;/*68dff0*/
    border-bottom: 20px solid #dbf2ff;
    
}

.crumbs li a.now:after 
{
    content: "";  
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid #3498db;
	position: absolute; 
	right: -25px; 
	top: 0;
	z-index:10;
}

.crumbs  li a.approve
{
    background:#1AC6AC;/*68dff0*/
    
}

.crumbs li a.approve:after 
{
    content: "";  
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid #1AC6AC;
	position: absolute; 
	right: -25px; 
	top: 0;
	z-index:10;
}

.crumbs  li a.notapprove
{
    background:#FB5559;/*68dff0*/
    
}

.crumbs li a.notapprove:after 
{
    content: "";  
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid #FB5559;
	position: absolute; 
	right: -25px; 
	top: 0;
	z-index:10;
}


.linktopage
{
    background-image:url("../../Cmn_Images/ActivityFlow/linktopage.png");
   /*border-bottom: 20px solid Green;
    border: 2px solid white;*/
    height:20px;
    width:20px;
    margin-left:90px;
    margin-top:5px;
    /*-moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;*/
    position:absolute;
    display:block;
    z-index:900;
    background-repeat:round;
}
.linktopage2
{
    background-image:url("../../Cmn_Images/ActivityFlow/linktopage.png");
    height:16px;
    width:16px;
    margin-left:80px;
    margin-top:4px;
    position:absolute;
    display:block;
    z-index:900;
    background-repeat:round;
}

.linktopage3
{
    background-image:url("../../Cmn_Images/ActivityFlow/add2.png");
    height:14px;
    width:14px;
    margin-left:83px;
    margin-top:4px;
    position:absolute;
    display:block;
    z-index:900;
    background-repeat:round;
}

.linktopage:hover
{
    /*border: 2px solid black;*/
}

/*#crumbs ul li a.now:after 
{
    content: "";  
	border-top: 35px solid transparent;
	border-bottom: 35px solid transparent;
	border-left: 35px solid #3498db;
	position: absolute; 
	right: -35px; 
	z-index:10;
}*/


.finishstep li a:hover
{
    background:#333;
}
.TextRotate{
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
}

#minorStep li{
	TEXT-ALIGN: center;
	LIST-STYLE-TYPE: none; 
	DISPLAY: inline-table; 
	LIST-STYLE-IMAGE: none;
	list-style: none;
}

#minorStep li a
{
    width:90px;
	display: inline-block;
	float: left;
	background: #999999;
	text-align: center;
	/*text-indent:8px;*/
	padding-top:12px;
	padding-right:5px;
	padding-left:5px;
    height: 25px;
	position: relative;
	margin: 0 10px 0 0;
	font-size: 13px;
	text-decoration: none;
	color: #fff;
	box-shadow:0px 1px 3px black;
} 

#minorStep li a.now
{
    background:#73BAEE;/*68dff0*/
}
#minorStep li a.approve
{
    background:#1CD5B9;/*68dff0*/
}

#minorStep li a.notapprove
{
    background:#FC6569;/*68dff0*/
}


#minorStep li a:hover{
	background: #fa5ba5;
} 

#minorStep li a.now2
{
    background:gray;/*68dff0*/
}




/*next previous*/
.btn_test1 li a
{
  float:left;
  position:relative;  
  list-style:none;
   text-decoration:none;
   height: 30px;
   width: 30px;
   float:right;
   /*background-image:("../../Cmn_Images/ActivityFlow/previous.png");*/
   /*padding:10px 5px 5px 5px;
   font-weight:bold;
   white-space:nowrap;*/
}

/*sidebar menu*/
 .sidenav 
 {
    width: 0px;
    z-index: 0;
    top: 0;
    left: 0;
    background-color: #e4e2e2;
    overflow-x: hidden;
    transition: 0.5s;
   
    /*padding-top: 60px;*/
}

.sidenav a {
    text-decoration: none;
    color:Black;
    padding:10px;
}

.sidenav a:hover,.offcanvas a:focus{
    color: #427DAD;
}


#main {
    transition: margin-left .5s;
    padding: 10px;
}

/*@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}*/
    
   
.button
{
    background-color:#4CAF50;
    border:none;
    color:White;
    /*padding: 15px 32px;*/
    text-align:center;
    display:inline-block;
    font-size:8px;
    margin:4px 2px;
    cursor:pointer;
    }
    
    
.buttonApp
{
    background-color:#4CAF50;
    color:White;
    text-align:center;
    /*display:inline-block;*/
/*border-radius: 8px;*/
    font-size:12px;
    cursor:pointer;
    width:70px;
    }
    
    
    /*to do list&step*/
.accordian {
  background-color: #EAEAEA;
  /*box-shadow: 0 5px 15px 1px rgba(0,0,0,.6), 0 0 200px 1px rgba(255,255,255,.5);*/
  color: white;
  /*margin: 50px auto 0 auto;*/
  width: 225px;
}

/*heading styles*/
.accordian h3 {
  /*fallback for browsers not supporting gradients*/
  background: #427DAD;
  /*background: linear-gradient(#003040, #002535);*/
  cursor: pointer;
  font-size: 12px;
  line-height: 34px;
  padding: 0 10px;
}

/*heading hover effect*/

/*#accordian h3:hover  
{text-shadow: 0 0 1px rgba(255,255,255,.7); }*/

/*iconfont styles*/


.accordian h3 span {
  font-size: 16px;
  /*margin-right: 10px;*/
}

/*noti*/
.accordian em {
		font-size: 10px;
		background-image:url("../../Cmn_Images/ActivityFlow/noti.png");
		padding: 3px 5px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;	
		font-style: normal;
		color: #fff;
		margin-top: 10px;
		margin-right: 5px;
		line-height: 10px;
		height: 10px;
		float:right;
}

/*list items*/
.accordian li { list-style-type: none;
                 }

/*links*/


.accordian ul ul li a {
  color: black;
  display: block;
  font-size: 11px;
  line-height: 27px;
  text-decoration: none;
  transition: all 0.15s;
  padding-left:15px;
}

.accordian ul ul li a:hover {
  background-color: #89B6D3;
  /*border-left: 5px solid #999999;*/
}

/*Hiding the non-active list items by default*/


.accordian ul ul { display: none; }

.accordian li.active ul { display: block; }


/* start css tua */

/*add css tabs employee center by tua 2018-06-28*/
.cards
{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.tabs {
   font-family: sans-serif;
    font-size: 11px;
    line-height: 1.5em;
    text-transform:uppercase;
    padding: 0;
}
.tabs .tab-input {
    display: none;
}
.tabs .tab-label {
    cursor: pointer;
    float: left;
    padding: 0.5em;
    text-align: center;
    color: #000;
    border-bottom:solid;
    border-bottom-color:#5CB3FF;
}
.tabs-full .tab-label {
    display: table-cell;
    float: none;
    width: 1%;
}
.tabs .tab-label:hover {
    color: #000;
    border-bottom:solid;
    border-bottom-color:#5CB3FF;
    animation-name: anim-float;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}
.tabs .tab-input:checked + .tab-label {
    background-color: #5CB3FF;
    color: #000;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.tabs .tabs-wrap {
    clear: both;
}
.tabs .tab {
    display: none;
    padding: 1em;
}
.tabs .tab > *:last-child {
    margin-bottom: 0;
}
@keyframes anim-pulse {
25%  { transform: scale(1.1); }
75%  { transform: scale(0.9); }
}
@keyframes anim-float {
25%  { transform: translateY(0);   }
50%  { transform: translateY(-5px); }
75%  { transform: translateY(0);   }
}
@keyframes anim-sink {
25%  { transform: translateY(0);   }
50%  { transform: translateY(5px); }
75%  { transform: translateY(0);   }
}
/*end add */


/*praew*/ 

.bttype
{
    border-style:solid;
    border-radius:10px;
    
    border-color:#b3b3b3;
    
    }        
    .bttype:hover
{
    border-style:solid;
    border-radius:10px;
   
    /*border-color:#b3b3b3;*/
    border-color:#5a91bf;
    background-color: #c8daea;
    }  
    .teamwork
{
    border-style:solid;
    border-radius:10px;
    
    border-color:#b3b3b3;
    
    }  
          
.headTeamwork{
/*-moz-box-shadow:inset 0px 12px 0px 0px #42A5F5;
-webkit-box-shadow:inset 0px 12px 0px 0px #42A5F5;
box-shadow:inset 0px 12px 0px 0px #42A5F5;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #42A5F5), color-stop(1, #42A5F5));
background:-moz-linear-gradient(top, #42A5F5 5%, #42A5F5 100%);
background:-webkit-linear-gradient(top, #42A5F5 5%, #42A5F5 100%);
background:-o-linear-gradient(top, #42A5F5 5%, #42A5F5 100%);
background:-ms-linear-gradient(top, #42A5F5 5%, #42A5F5 100%);
background:linear-gradient(to bottom, #42A5F5 5%, #42A5F5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#42A5F5', endColorstr='#42A5F5',GradientType=0);*/
background-color:#0000cc;
-moz-top-border-radius:0px;
-webkit-top-border-radius:0px;
border-radius:5px;
cursor:pointer;
color:#fff;
font-family:Arial;
font-size:15px;
padding:0px 0px;
text-decoration:none;
text-shadow:0px 0px 0px #00008B;
width:268px;
}

.headTW{

background-color:#0000cc;
-moz-top-border-radius:5px;
-webkit-top-border-radius:5px;
border-radius:5px;
cursor:pointer;
color:#fff;
font-family:Arial;
font-size:15px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #00008B;
width:5px;
}

.BTtooltip{

background-color:#DEB887;
-moz-top-border-radius:5px;
-webkit-top-border-radius:5px;
border-radius:5px;
cursor:pointer;
color:#fff;
font-family:Arial;
font-size:15px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #00008B;
width:7px;
height:7px;

}

/*tooltip Box*/
.con-tooltip {
  position: relative;
 /* background: #b1dae6;
  background:#9dd7fb;*/
  border-radius: 9px;
  opacity : 1.0;
  padding: 0 20px;
  margin: 10px;
  position:relative;
  z-index: 1;
  display: inline-block;
 
  transition: all 0.3s ease-in-out;
  cursor: default;
  /*border-radius: 50%;*/
  
}
.con-tooltip:hover {
  position: relative;
 /* background: #b1dae6;
  background:#ceebfd;*/
 
  border-radius: 9px;
  opacity : 1.0;
  padding: 0 20px;
  margin: 10px;
  position:relative;
  z-index: 1;
  display: inline-block;
  
  transition: all 0.3s ease-in-out;
  cursor: default;
  /*border-radius: 50%;*/
}

/*tooltip */

.imgperson 
{
    /* 
     border-style:solid;opacity:0.6;border-color:#8f8f8f;
     border-width:10px;
     border-radius:10px;border-radius: 50%;
    */
    border-style:solid;
    border-color:#065d93;
    border-radius: 50%;
    border-width:6px;
    width:70px;
    height:70px;

    
}

.imgperson:hover
{
    border-radius: 50%;
    opacity: 1.0;
    border-style:solid;
    border-color:#065d93;
    border-width:6px;
    width:70px;
    height:70px;
}

.tooltip {
  visibility: hidden;
  z-index: 1000;
  opacity: .40;
  
  height:70px;
  width: 150px;
  padding: 0px 20px;

  background: #5F9EA0;
 
  /*color: #E086D3;*/
  color: #FFFAF0;
  position: absolute;
  top:-140%;
  left: -45%;
  
  border-radius: 9px;
  font: 16px;

  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  
 /* box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);*/
 box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
  
  
}


/* tooltip  after*/
.tooltip:after {
  content: " ";
  width: 0;
  height: 0;
  position:relative;
  z-index:1000;
  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #5F9EA0 transparent transparent transparent;

  position: absolute;
  left: -30%;
}
.con-tooltip:hover .tooltip{
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
  transition: .3s linear;
  /* 02082018 BD_Praew Bug No.2a-07-B031 (ความเร็วตอนชี้รายละเอียดของงาน) 
animation: odsoky 1s ease-in-out infinite  alternate; */
  z-index:1000;

}
@keyframes odsoky {
  0%{
    transform: translateY(6px);
  }

  100%{
    transform: translateY(1px);
  }
}
/*hover ToolTip*/
.bottom:hover {transform: translateY(6px);}
/*bottom*/
.bottom .tooltip { top:95%; left:-80%; }
.bottom .tooltip::after{
  top:-17%;
  left:40%;
  transform: rotate(180deg);
}


.tooltip2 {
  visibility: hidden;
  z-index: 1000;
  opacity: .40;
  
  height:70px;
  width: 160px;
  padding: 0px 20px;

  background: #5F9EA0;
 
  /*color: #E086D3;*/
  color: #FFFAF0;
  position: absolute;
  top:-140%;
  left: -45%;
  
  border-radius: 9px;
  font: 16px;

  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  
 /* box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);*/
 box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
  
  
}
.tooltip2:after {
  content: " ";
  width: 0;
  height: 0;
  position:relative;
  z-index:1000;
  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #5F9EA0 transparent transparent transparent;

  position: absolute;
  left: -30%;
}
.con-tooltip:hover .tooltip2{
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
  transition: .3s linear;
   /* 02082018 BD_Praew Bug No.2a-07-B031 (ความเร็วตอนชี้รายละเอียดของงาน) 
animation: odsoky 1s ease-in-out infinite  alternate; */
  z-index:1000;

}
@keyframes odsoky {
  0%{
    transform: translateY(6px);
  }

  100%{
    transform: translateY(1px);
  }
}
/*hover ToolTip*/
.bottom:hover {transform: translateY(6px);}
/*bottom*/
.bottom .tooltip2 { top:0%; left:120%; }
.bottom .tooltip2::after{
  top:20%;
  left:-10%;
  transform: rotate(90deg);
}


.menubar1{
    background-image:url("../../Cmn_Images/ActivityFlow/Menumyself.png");
    width:50px; 
    height:180px;
    display:block;
    }
 .menubar1:hover,.menubar1:active,.menubar1:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/Menumyself1.png");
    width:50px;             
    }
    .menubar2{
    background-image:url("../../Cmn_Images/ActivityFlow/Menucalendar.png");
    width:50px; 
    height:190px;
    display:block;
    }
.menubar2:hover,.menubar2:active,.menubar2:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/Menucalendar1.png");
    width:50px;     
    display:block;               
    }
    .menubar3{
    background-image:url("../../Cmn_Images/ActivityFlow/Menuteamwok.png");
    width:50px; 
    height:200px;
    display:block;
    }
.menubar3:hover,.menubar3:active,.menubar3:focus
{
    background-image:url("../../Cmn_Images/ActivityFlow/Menuteamwork1.png");
    width:50px;   
    display:block;                 
    }
    
    .calendartitle
{
  background-color:#0080ff;
  /*background-image:url(../../Cmn_Images/Calendar/title_bg.gif);*/
  border: 1px solid black;
  border-bottom-width: 0px;
  color:White;
    border-style:solid;
    border-radius:7px;
     border-color:#0080ff;
  
}
.teamworkmonth
{
  border-collapse:collapse;
  border:solid 1px black;
  border-color:#0080ff;
}
.Teamworkdayheader
{
  background-color:#99ccff;
 /* background-image:url(../../Cmn_Images/Calendar/header_bg.gif);*/
  color:#504C39;
  font-family:Microsoft Sans Serif;
  font-size:11px;
  text-align:center;
  border-top:solid 1px #FFFFFF;
  border-left:solid 1px #FFFFFF;
  border-bottom:solid 1px #ACA899;
  border-right:solid 1px #C6C1AC;
  padding: 4px;
  /*color:White;*/
    border-style:solid;
    border-radius:7px;
}
.teamworkothermonthday
{
  background-color:#F5F3E5;
    
}

.teamworkday
{
  width:95px;
  height:80px;
  text-align:right;
  vertical-align:top;
  font-family:Microsoft Sans Serif;
  font-size:11px;
  color:Black;
  background-color:#FFFFFF;
  border:solid 1px #C6C1AC;
   border-style:solid;
  border-radius:10px;
}
.teamworkday2
{
  background-color:#ffecb3;
  width:95px;
  height:80px;
  text-align:right;
  vertical-align:top;
  color:White;
  
  color:Black;
  font-family:Microsoft Sans Serif;
  font-size:11px;
 
  border:solid 1px #C6C1AC;
  border-style:solid;
  border-radius:10px;
}
.gvRow
{
  border-style:solid;
  border-radius:10px;
  border-color:White;
    
    }
.tableEditteamwork
{
    border-style:solid;
    border-radius:7px;
    border-color:#b3b3b3;
    /*background-color: #e6e6e6;*/
    
    }     
.tableEditteamwork:hover
{
    border-style:solid;
    border-radius:7px;
    border-color:#5a91bf;
    background-color: #e6f9ff;
    } 

$primary-color: red;

.container {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.radio-tile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  }

  .input-container {
    position: relative;
    height:  7rem;
    width:  7rem;
    margin: 0.5rem;
   /* border:5px solid #42a5f5;*/
}
    .radio-button {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      cursor: pointer;

    }

   .radio-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border: 2px solid $primary-color;
      border-radius: 5px;
      padding: 1rem;
      transition: transform 300ms ease;
      box-sizing: border-box;
    }
    .icon svg {
      fill: $primary-color;
      width: 3rem;
      height: 3rem;

    }
    .radio-tile-label {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: $primary-color;
    }
    
   

    .radio-button:hover + .radio-tile {
      /*background-color: #42a5f5;*/
      background-color: #fff;
      transform: scale(1.1, 1.1);
      
    }
      
      .icon svg {
        fill: #42a5f5;
        background-color: $primary-color;
      }
      .radio-tile-label {
        color: #42a5f5;
        background-color: $primary-color;
      }
  



.LabelStyleEmployeeCenter
{
    text-align: center;
      font-size: 50px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
}


.headerNotification 
{
        -moz-box-shadow:inset 0px 12px 0px 0px #42A5F5;
-webkit-box-shadow:inset 0px 12px 0px 0px #42A5F5;
box-shadow:inset 0px 12px 0px 0px #42A5F5;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #42A5F5), color-stop(1, #42A5F5));
background:-moz-linear-gradient(top, #42A5F5 5%, #42A5F5 100%);
background:-webkit-linear-gradient(top, #42A5F5 5%, #42A5F5 100%);
background:-o-linear-gradient(top, #42A5F5 5%, #42A5F5 100%);
background:-ms-linear-gradient(top, #42A5F5 5%, #42A5F5 100%);
background:linear-gradient(to bottom, #42A5F5 5%, #42A5F5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#42A5F5', endColorstr='#42A5F5',GradientType=0);
background-color:#42A5F5;
-moz-top-border-radius:5px;
-webkit-top-border-radius:5px;
border-radius:5px;
cursor:pointer;
color:#fff;
font-family:Arial;
font-size:15px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #42A5F5;
width:268px;
}

.NotifiCationSelectedTreeNode 
{ 
  font-family: Microsoft Sans Serif; 
font-size: 14px; 
text-decoration:underline; 
color:#000; 
cursor: pointer; 
  padding:5px;
  background-color:#BBDEFB;
  width:268px;
  margin-left:-89px;
  text-indent:90px;
}

.NotifiCationSelectedTreeItem
{ 
  font-family: Microsoft Sans Serif; 
font-size: 14px; 
text-decoration:underline; 
color:#000; 
cursor: pointer; 
  padding:5px;
  background-color:#E3F2FD;
  width:268px;
  margin-left:-118px;
  text-indent:118px;
}

.TreeViewNotifiCation 
{ 
  background-color: #000;
  padding-left: 1px; 
  border: #57566F 1px solid; 
  cursor: default; 
}
.TreeNodeNotifiCation 
{ 
  font-family: Microsoft Sans Serif; 
  font-size: 14px; 
  padding:5px;
  color:#000;
  background-color:#64B5F6;
  width:267px;
  margin-left:-30px;
  text-indent:30px;
}
.TreeNodeNotifiCation:hover
{ 
    -moz-box-shadow:inset 0px 12px 0px 0px #64B5F6;
-webkit-box-shadow:inset 0px 12px 0px 0px #64B5F6;
box-shadow:inset 0px 12px 0px 0px #64B5F6;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #64B5F6), color-stop(1, #42A5F5));
background:-moz-linear-gradient(top, #64B5F6 5%, #42A5F5 100%);
background:-webkit-linear-gradient(top, #64B5F6 5%, #42A5F5 100%);
background:-o-linear-gradient(top, #64B5F6 5%, #42A5F5 100%);
background:-ms-linear-gradient(top, #64B5F6 5%, #42A5F5 100%);
background:linear-gradient(to bottom, #64B5F6 5%, #42A5F5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#64B5F6', endColorstr='#42A5F5',GradientType=0);
  text-decoration:underline; 
}
.TreeNodeNotifiCationSubItem 
{ 
  font-family: Microsoft Sans Serif; 
  font-size: 14px; 
  padding:5px;
  color:#000;
  background-color:#90CAF9;
  width:268px;
  margin-left:-60px;
  text-indent:60px;
}
.TreeNodeNotifiCationSubItem:hover
{ 
    -moz-box-shadow:inset 0px 12px 0px 0px #90CAF9;
-webkit-box-shadow:inset 0px 12px 0px 0px #90CAF9;
box-shadow:inset 0px 12px 0px 0px #90CAF9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #90CAF9), color-stop(1, #64B5F6));
background:-moz-linear-gradient(top, #90CAF9 5%, #64B5F6 100%);
background:-webkit-linear-gradient(top, #90CAF9 5%, #64B5F6 100%);
background:-o-linear-gradient(top, #90CAF9 5%, #64B5F6 100%);
background:-ms-linear-gradient(top, #90CAF9 5%, #64B5F6 100%);
background:linear-gradient(to bottom, #90CAF9 5%, #64B5F6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90CAF9', endColorstr='#64B5F6',GradientType=0);
  text-decoration:underline; 
}
.TreeNodeNotifiCationSubItem2 
{ 
  font-family: Microsoft Sans Serif; 
  font-size: 14px; 
  padding:5px;
  color:#000;
  background-color:#BBDEFB;
  width:268px;
  margin-left:-88px;
  text-indent:90px;
}
.TreeNodeNotifiCationSubItem2:hover
{ 
    -moz-box-shadow:inset 0px 12px 0px 0px #BBDEFB;
-webkit-box-shadow:inset 0px 12px 0px 0px #BBDEFB;
box-shadow:inset 0px 12px 0px 0px #BBDEFB;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #BBDEFB), color-stop(1, #90CAF9));
background:-moz-linear-gradient(top, #BBDEFB 5%, #90CAF9 100%);
background:-webkit-linear-gradient(top, #BBDEFB 5%, #90CAF9 100%);
background:-o-linear-gradient(top, #BBDEFB 5%, #90CAF9 100%);
background:-ms-linear-gradient(top, #BBDEFB 5%, #90CAF9 100%);
background:linear-gradient(to bottom, #BBDEFB 5%, #90CAF9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#BBDEFB', endColorstr='#90CAF9',GradientType=0);
  text-decoration:underline; 
   margin-left:-88px;
  text-indent:90px;
}
.TreeNodeNotifiCationItem
{ 
  font-family: Microsoft Sans Serif; 
  font-size: 14px; 
  padding:5px;
  color:#000;
  background-color:#E3F2FD;
  width:268px;
  margin-left:-118px;
  text-indent:118px;
}
.TreeNodeNotifiCationItem:hover
{ 
    -moz-box-shadow:inset 0px 12px 0px 0px #E3F2FD;
-webkit-box-shadow:inset 0px 12px 0px 0px #E3F2FD;
box-shadow:inset 0px 12px 0px 0px #E3F2FD;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #E3F2FD), color-stop(1, #BBDEFB));
background:-moz-linear-gradient(top, #E3F2FD 5%, #BBDEFB 100%);
background:-webkit-linear-gradient(top, #E3F2FD 5%, #BBDEFB 100%);
background:-o-linear-gradient(top, #E3F2FD 5%, #BBDEFB 100%);
background:-ms-linear-gradient(top, #E3F2FD 5%, #BBDEFB 100%);
background:linear-gradient(to bottom, #E3F2FD 5%, #BBDEFB 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3F2FD', endColorstr='#BBDEFB',GradientType=0);
  text-decoration:underline; 
   margin-left:-118px;
  text-indent:118px;
}

.input_masterForm
{
    padding :5px 1px 3px 1px;
    border: 1px solid #fff;
    background-color: #dee3ff;
    box-shadow: 0px 0px 2px #d9d9d9;
    margin-top: 0px;
    margin-bottom: 0px;
    
}

.item_gridstyle
{
    padding-right:5px;
    font-size:20px;
    font-family:EucrosiaUPC;
}
.style_middle
{
    line-height: 25px;
}
.blockCreateReport { 
            width: 150px; 
            text-align: center;
            padding:3px 0;
            float:left;
        }
        .imgCreateReport{
            float:left;
        }

.style_Enablebutton
{
border-radius: 3px;
background-color:Transparent;
font-size: 0.8em;
border: 2px solid #808080;
font-variant: small-caps;
color:#808080;
cursor:pointer;
padding:2px 1px 2px 1px;
}

.LabelField
{
    padding :1px 3px 1px 3px;
    border-radius: 3px;
    border: 1px solid #d3d3d3;
    background-color:#d3d3d3;
    box-shadow: 0px 0px 2px #d9d9d9;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left:2px;
    display:inline-block;
}

.LabelField:hover
{
    border: 1px solid #157efb;
}

.ContextItem
        {
            background-color:#fff;
            color:Black;
            font-size:14px;
            padding :2px 1px 3px 1px;
            border-bottom: 1px solid #00bfff;
            border-left: 1px solid #00bfff;
            border-right: 1px solid #00bfff;
            
            }
        .ContextItem:hover
        {
            background-color:#0066FF;
            color:White;
            font-weight:bold;
            
        }

.TreeNodeEmpty
{
    color:Gray;
    font-size:12px;
}


.style_label
{
    padding :1px 1px 3px 1px;
    border-radius: 3px;
    border: 1px solid #808080;
    background-color:transparent;
    box-shadow: 0px 0px 2px #d9d9d9;
    margin-top: 1px;
    margin-bottom: 1px;
}

.style_buttonrpt

{
border-radius: 3px;
background-color:Transparent;
font-size: 0.8em;
border: 2px solid #808080;
font-variant: small-caps;
color:#000;
cursor:pointer;
padding:2px 1px 2px 1px;
}

.style_buttonrpt:hover

{
box-shadow: inset 0 2 1px #000;
border-color: #157efb;
}

.buttonPopUp {
display: inline-block;
height: 35px;
width: 120px;
line-height: 35px;
/*padding-right: 30px;*/
padding-left: 45px;
position: relative;
background-color:rgb(41,127,184);
color:rgb(255,255,255);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
box-shadow:0px 2px 2px rgba(0,0,0,0.2);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}

.buttonNewStyle
{
    color:#fff;
    display: inline-block;
    line-height: 27px;
    height: 27px;
    font-size: 0.8em;
    width: 110px;
    text-decoration: none;
    position: relative;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border-style: none;
    border-color: inherit;
    border-width: 0px;
    background-color:Transparent;
	background-image:url('../../Cmn_Images/Saas/11.png');
	background-size:cover;
	background-position:center;
	text-align:center;	
	margin:0;
}
.buttonNewStyle span {
    position: absolute;
    left: 0;
    width: 25px;
    border-style: none;
    border-color: inherit;
    border-width: 0px;
    background-color:Transparent;
	background-image:url('../../Cmn_Images/Saas/11.png');
	background-position:center;
	text-align:center;	
	margin:0;
	
}

.buttonNewStyle:hover 
{
    background-color:Transparent;
	background-image:url("../../Cmn_Images/Saas/12.png");
	background-position:center;
	height:27px;
	width:110px;
	text-align:center;	
	border:0px; 
	margin:0;
	cursor:pointer;
}

.buttonPopUp span {
position: absolute;
left: 0;
width: 35px;
background-color:rgba(0,0,0,0.5);
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid rgba(0,0,0,0.15);
}
.buttonPopUp:hover span, .button.active span {
/*background-color:rgb(0,102,26);*/
background:black;
border-right: 1px solid rgba(0,0,0,0.3);
}

.buttonPopUp:active {
margin-top: 2px;
margin-bottom: 13px;
-moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true);
}
.buttonPopUp.purple {
background: #0099CC;
}
/*.buttonNewStyle.tran {
background: ;
}*/


.buttonPopUp.turquoise {
background: #1abc9c;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
/*.modal-content {*/
/*background: #EFEBEF; */
/*margin: 15% auto;*/ /* 15% from the top and centered */
/*padding-bottom: 10px;*/
/*padding-left: 20px;*/
/*padding-right: 20px;*/
/*border-radius: 20px;*/
/*border: 10px solid rgb(127, 0, 0, 0.1);*/
/*border: 10px solid rgba(255, 0, 0, .5);*/
/*-webkit-background-clip: padding-box;*/ /* for Safari */
/*background-clip: padding-box;*/ /* for IE9+, Firefox 4+, Opera, Chrome */
/*border: 6px solid rgba(127, 0, 0, 0.1);*/
/*width: 400px;*/ /* Could be more or less, depending on screen size */
/*}*/

.modalNew {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modalNew-content {
background: #EFEBEF; 
margin: 1% auto; /* 15% from the top and centered */
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 20px;
border: 10px solid rgb(127, 0, 0, 0.1);
border: 10px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border: 6px solid rgba(127, 0, 0, 0.1);
width: 400px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.PopUpBG

{
background: #EFEBEF;
-moz-border-radius: 20px 0px;
-webkit-border-radius: 20px 0px;
border-radius: 30px 0px;
border: 10px solid rgb(127, 0, 0, 0.1);
border: 10px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border: 6px solid rgba(127, 0, 0, 0.1);
}

.Grid2 
{ 
  border: 1px solid #57566F; 
  border-bottom: 2px solid #57566F; 
  background-color: #F7F4F7;
  cursor: pointer;
  Font-Names:Microsoft Sans Serif;
  Font-Size:small;
}

.GridFooter2
{
  cursor: default; 
  padding: 5px;
  height: 20px;
  vertical-align: bottom;
}

.GridHeader2
{
  /*  background-image: url(../../Cmn_Images/GridLines/grid_headerBg.gif); */
  /*background-image: url(../../Cmn_Images/ActivityFlow/grid_headerBg.gif);*/
  background-color: #336699;
  border: 1px none #57566F;
  height: 10px;
  /*padding-left: 3px;
  cursor: default; 
  color: #336699;  
  font-family: Microsoft Sans Serif; 
  font-size: small;
  font-weight: bold;
  vertical-align: middle;*/
}
.MyDataCell
{
  FONT-SIZE:small;
  padding-top:3px;
  padding-bottom:3px;
  CURSOR: default;
  FONT-FAMILY: Microsoft Sans Serif;
  color: Black;
  border-left-width:0.1px;
  border-left-style:solid;
  border-left-color:#E6DDE6;
  border-bottom-width:0.1px;
  border-bottom-style:solid;
  border-bottom-color:#E6DDE6;
}
.FirstCell
{
    FONT-SIZE:small;
  padding-top:3px;
  padding-bottom:3px;
  CURSOR: default;
  FONT-FAMILY: Microsoft Sans Serif;
  color: Black;
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:#E6DDE6;
}

.IndentCell2 
{
  /*BORDER-RIGHT: 0px;
  BACKGROUND: #EFEBEF;
  HEIGHT: auto;*/
  padding-top:3px;
  padding-bottom:3px;
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:#E6DDE6;

  cursor:pointer;
}
.PagerText2
{
color: gray; 
font-family: Microsoft Sans Serif; 
font-size: small;
}
.Row2 
{ 
  background-color: #F7F4F7; 
  cursor: default;
  Font-Size:small;
  font-family: Microsoft Sans Serif;
}
.HeadingCell2 
{ 
  /*background-image: url(../../Cmn_Images/GridLines/blue_bg.gif);   */
   BACKGROUND: url(../../Cmn_Images/ActivityFlow/Grid/header_bg.gif);
  
  /*background-color: #F0F0F0; 
  color :Black;
  padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 2px; 
  border-bottom: 0.3px solid #B9B9B9;
  border-right: 0.3px solid #B9B9B9;
  border-top: 0.3px solid #B9B9B9;*/
}
.HeadingCellText2
{
  font-family: Microsoft Sans Serif; 
  font-size: small; 
  font-weight: bold; 
  text-align: center;
  padding-top: 3px;
  padding-bottom: 5px;
}
.HeadingCellHover2
{ 
  /*background-image: url(../../Cmn_Images/GridLines/header_hoverBg.gif);*/
  /*background-color: #F6F6F7; */
  background-color: #F0F0F0; 
  color :Black;
  padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 2px; 
  border-bottom: 0.3px solid #B9B9B9;
  border-right: 0.3px solid #B9B9B9;
  border-top: 0.3px solid #B9B9B9;
}

.HeadingCellActive2
{ 
  /*background-image: url(../../Cmn_Images/GridLines/header_activeBg.gif); */  
  background-color: #F0F0F0; 
  color :Black;
  padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 2px; 
  border-bottom: 0.3px solid #B9B9B9;
  border-right: 0.3px solid #B9B9B9;
  border-top: 0.3px solid #B9B9B9;
}


.SelectedRow2 
{ 
   background-color:#FFF1D5;
   font-weight:bold;
   
}

.SelectedRowClass2 
{
  BORDER-RIGHT: #040484 1px solid;
  BORDER-TOP: #040484 1px solid;
  BORDER-LEFT: #040484 1px solid;
  BORDER-BOTTOM: #040484 1px solid;   
  BACKGROUND-COLOR: #90a8d0
}

.SelectedRowClass2 TD.MyDataCell 
{
  BORDER-RIGHT: #90a8d0 1px solid
}

.HeadingRow2 
{ 
  /*BACKGROUND: url(../../Cmn_Images/ActivityFlow/Grid/blue_bg.gif);*/
  BACKGROUND: url(../../Cmn_Images/ActivityFlow/Grid/header_rowBg.gif);
  text-align:center;
  /*padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 2px; */
  /*background-color:Black; 
  color :Black;*/

  /*border-bottom: 0.3px solid #B9B9B9;
  border-right: 0.3px solid #B9B9B9;
  border-top: 0.3px solid #B9B9B9;*/
}
.HeadingRow2 td.FirstHeadingCell
{ 
    
  background-color:Black; 
  color :Black;
  padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 2px; 
  border-bottom: 0.3px solid #B9B9B9;
  border-right: 0.3px solid #B9B9B9;
  border-top: 0.3px solid #B9B9B9;
}

.btApprove 
{
border:0.1px solid #EFEBEF;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;

background-image:url(../../Cmn_Images/ActivityFlow/approve.png);

}


.btNotApprove 
{
border:0.1px solid #EFEBEF;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;

background-image:url(../../Cmn_Images/ActivityFlow/notapprove.png);

}


.btInfo {
-moz-box-shadow:inset 0px 12px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 12px 0px 0px #ffffff;
box-shadow:inset 0px 12px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;
}
.btInfo:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
background-color:#f6f6f6;
}
.btInfo:active {
position:relative;
top:1px;
}



.btStyle {
-moz-box-shadow:inset 0px 12px 0px 0px #ffffff;

-webkit-box-shadow:inset 0px 12px 0px 0px #ffffff;
box-shadow:inset 0px 12px 0px 0px #ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;
    text-align: center;
}
.btStyle:hover 
{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
background-color:#f6f6f6;
}
.btStyle:active {
position:relative;
top:1px;
}

.btRequestReport 
{
border:0.1px solid #EFEBEF;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;

background-image:url(../../Cmn_Images/ActivityFlow/request-report.png);

}
.btRequestReport:hover {
background-image: url(../../Cmn_Images/ActivityFlow/request-report.png);
}
.btRequestReport:active {
position:relative;
top:1px;
}

.TreeView2
{ 
  
  padding-top: 4px; 
  padding-left: 1px; 
  border: #57566F 1px solid; 
  cursor: default; 
  moz-box-shadow:inset 0px 12px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 12px 0px 0px #ffffff;
box-shadow:inset 0px 12px 0px 0px #ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;
    text-align: center;
}

.btApproveNotActive 
{
border:0.1px solid #EFEBEF;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;

background-image:url(../../Cmn_Images/ActivityFlow/approve2.png);

}
.btApproveNotActive:hover {
background-image: url(../../Cmn_Images/ActivityFlow/approve2.png);
}
.btApproveNotActive:active {
position:relative;
top:1px;
}

.btNotApproveNotActive 
{
border:0.1px solid #EFEBEF;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;

background-image:url(../../Cmn_Images/ActivityFlow/notapprove2.png);

}
.btNotApprove:hover {
background-image: url(../../Cmn_Images/ActivityFlow/notapprove2.png);
}
.btNotApprove:active {
position:relative;
top:1px;
}


.btResponse
{
border:0.1px solid #EFEBEF;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;

background-image:url(../../Cmn_Images/ActivityFlow/ackhowledge.png);

}
.btResponse:hover {
background-image: url(../../Cmn_Images/ActivityFlow/ackhowledge.png);
}
.btResponse:active {
position:relative;
top:1px;
}

.btNotResponse
{
border:0.1px solid #EFEBEF;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;

background-image:url(../../Cmn_Images/ActivityFlow/unackhowledge.png);

}
.btNotResponse:hover {
background-image: url(../../Cmn_Images/ActivityFlow/unackhowledge.png);
}
.btNotResponse:active {
position:relative;
top:1px;
}


/*end css tua*/

/*Mol*/
.style_label
{
    padding :1px 1px 3px 1px;
    border-radius: 3px;
    border: 1px solid #808080;
    background-color:transparent;
    box-shadow: 0px 0px 2px #d9d9d9;
    margin-top: 1px;
    margin-bottom: 1px;
}
.style_labelNormal
{
    padding :1px 1px 7px 1px;
    background-color:transparent;
}

.Root_TreeNode 
{ 
font-family: Microsoft Sans Serif; 
font-size: 14px; 
font-weight:bold;
color:#800000; 
padding-top:1px;
padding-bottom:0px;
padding-left: 2px; 
padding-right: 2px; 
cursor: pointer; 
}


.Major_TreeNode 
{ 
font-family: Microsoft Sans Serif; 
font-size: 14px; 
font-weight:bold;
color:black; 
padding-top:1px;
padding-bottom:0px;
padding-left: 2px; 
padding-right: 2px; 
cursor: pointer; 
}

.Hover_TreeNode 
{ 
font-family: Microsoft Sans Serif; 
font-size: 14px; 
text-decoration:underline; 
padding-top:2px;
padding-bottom:1px;
padding-left: 3px; 
padding-right: 3px; 
cursor:pointer; 
}
.Selected_TreeNode 
{ 
font-family: Microsoft Sans Serif; 
font-size: 14px; 
font-weight:bold;
text-decoration:underline; 
color:#006699; 
padding-top:1px;
padding-bottom:0px;
padding-left: 2px; 
padding-right: 2px; 
cursor: pointer; 
}
.Canceled_TreeNode
{ 
font-family: Microsoft Sans Serif; 
font-size: 14px; 
color:#990000; 
padding-top:1px;
padding-bottom:0px;
padding-left: 2px; 
padding-right: 2px; 
cursor: pointer; 
}
.SeCanceled_TreeNode
{ 
font-family: Microsoft Sans Serif; 
font-size: 14px; 
color:#990000; 
font-weight:bold;
text-decoration:underline; 
padding-top:1px;
padding-bottom:0px;
padding-left: 2px; 
padding-right: 2px; 
cursor: pointer; 
}

.bt_grid_ac
{
border-radius: 3px;
font-size: 0.8em;
background-color:Transparent;
border: 2px solid #CCCCCC;
font-variant: small-caps;
color:black;
cursor:pointer;
padding:1px 2px 1px 2px;
height:25px;
width:55px;
margin:1px;
}

.bt_grid_ac:hover
{
border-color:black;
color:black;
}


.bt_gridAppr
{
border-radius: 3px;
font-size: 0.8em;
background-color:Transparent;
border: 2px solid #CCCCCC;
font-variant: small-caps;
color:#009933;
cursor:pointer;
padding:1px 2px 1px 2px;
height:25px;
width:55px;
margin:1px;
}

.bt_gridAppr:hover
{
border-color: #009933;
color:#009933;
}

.bt_gridDel
{
font-size: 0.8em;
border-radius: 3px;
background-color:Transparent;
border: 2px solid #CCCCCC;
font-variant: small-caps;
color:Red;
cursor:pointer;
padding:1px 2px 1px 2px;
height:25px;
width:55px;
margin:1px;
}

.bt_gridDel:hover
{
border-color: Red;
color:Red;
}

.bt_gridCan
{
font-size: 0.8em;
border-radius: 3px;
background-color:Transparent;
border: 2px solid #CCCCCC;
font-variant: small-caps;
color:#EBA700;
cursor:pointer;
padding:1px 2px 1px 2px;
height:25px;
width:55px;
margin:1px;
}

.bt_gridCan:hover
{
border-color: #EBA700;
color:#EBA700;
}

.bt_gridHold
{
font-size: 0.8em;
border-radius: 3px;
background-color:Transparent;
border: 2px solid #CCCCCC;
font-variant: small-caps;
color:#FF7735;
cursor:pointer;
padding:1px 2px 1px 2px;
height:25px;
width:55px;
margin:1px;
}

.bt_gridHold:hover
{
border-color: #FF7735;
color:#FF7735;
}

.bt_gridSub
{
font-size: 0.8em;
border-radius: 3px;
background-color:Transparent;
border: 2px solid #CCCCCC;
font-variant: small-caps;
color:#3DBFF1;
cursor:pointer;
padding:1px 2px 1px 2px;
height:25px;
width:55px;
margin:1px;
}

.bt_gridSub:hover
{
border-color: #3DBFF1;
color:#3DBFF1;
}

.bt_gridFin
{
font-size: 0.8em;
border-radius: 3px;
background-color:Transparent;
border: 2px solid #CCCCCC;
font-variant: small-caps;
color:#0080FF;
cursor:pointer;
padding:1px 2px 1px 2px;
height:25px;
width:55px;
margin:1px;
}

.bt_gridFin:hover
{
border-color: #0080FF;
color:#0080FF;
}

.bt_gridRej
{
font-size: 0.8em;
border-radius: 3px;
background-color:Transparent;
border: 2px solid #CCCCCC;
font-variant: small-caps;
color:#FF7575;
cursor:pointer;
padding:1px 2px 1px 2px;
height:25px;
width:55px;
margin:1px;
}

.bt_gridRej:hover
{
border-color: #FF7575;
color:#FF7575;
}


/*end Mol*/

/*MonthPicker Mos*/
.icon {
    vertical-align: bottom;
    margin-top: 2px;
    margin-bottom: 3px;
    cursor: pointer;
}

.icon:active {
    opacity: .5;
}

.ui-button-text {
    padding: .4em .6em;
    line-height: 0.8;
}

.month-year-input {
  width: 60px;
  margin-right: 2px;
}

.month-picker
{
    display:inline-block;
    position:absolute;
    z-index:9999
}
.month-picker table
{
    border-collapse:separate;
    border-spacing:2px 2px
}
.month-picker td
{
    padding:0
}
.month-picker .ui-button-text
{
    padding:.4em 0
}
.month-picker-header
{
    margin:3px 3px 0
}
.month-picker-year-table
{
    width:100%;
    -ms-user-select:none;
    -moz-user-select:-moz-none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    user-select:none
}
.month-picker-year-table a
{
    border:1px solid transparent
}
.month-picker-year-table .ui-button
{
    font-size:1.1em;
    width:1.5em;
    height:1.5em;
    cursor:default;
    margin:0
}
.month-picker-year-table .month-picker-title
{
    text-align:center
}
.month-picker-year-table .month-picker-title .ui-button
{
    font-size:1em;padding:.1em 0;width:100%;font-weight:700
}
.month-picker-year-table .ui-button-text
{
    padding:0
}
.month-picker-month-table td
{
    height:35px;
    text-align:center
}
.month-picker-month-table .ui-button
{
    width:4.2em;
    margin:.2em
}
.month-picker-open-button
{
    height:20px;
    width:20px;
    vertical-align:bottom
}
.month-picker-invalid-message
{
    display:none;
    background-color:#ff0
}
.month-picker-disabled
{
    background-color:#e1e1e1
}


/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px;
}

.ui-widget {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1.1em;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #d3d3d3;
	background: #e6e6e6 url("../images/icon.gif") 50% 50% repeat-x;
	font-weight: normal;
	color: #555555;
}

.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	width:20px;
	overflow: visible; /* removes extra width in IE */
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{border: 1px solid #cccccc; background: #f6f6f6 url(../../Cmn_Images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;font-weight: bold; color: #1c94c4; }
      
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(../../Cmn_Images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(../../Cmn_Images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(../../Cmn_Images/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(../../Cmn_Images/ui-icons_ef8c08_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(../../Cmn_Images/ui-icons_ef8c08_256x240.png); }
.ui-state-active .ui-icon {background-image: url(../../Cmn_Images/ui-icons_ef8c08_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(../../Cmn_Images/ui-icons_228ef1_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(../../Cmn_Images/ui-icons_ffd27a_256x240.png); }

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;  }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(../../Cmn_Images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(../../Cmn_Images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active {text-decoration: none;}

.ui-button-icon-only {/*width: 2.2em;*/}
.ui-state-default .ui-icon 
{
    background-image: url(../../Cmn_Images/ui-icons_ef8c08_256x240.png);
	/*background-image: url("../images/icon.gif")*/
}
/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
	position: absolute;
	top: 50%;
	margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
	left: 50%;
	margin-left: -8px;
}
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon,
.ui-widget-content .ui-icon {
	/*background-image: url("../images/icon.gif") */
}

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
    width: 16px; height: 16px; 
    background-image: url(../../Cmn_Images/ui-icons_222222_256x240.png); 
    }

/* button text element */
.ui-button .ui-button-text {
	display: block;
	line-height: normal;
}
.ui-button-text-only .ui-button-text {
	padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
	padding: .4em;
	text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
	padding-left: 2.1em;
	padding-right: 2.1em;
}

.ui-icon-circle-triangle-w {background-position:-80px -192px;}
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(../../Cmn_Images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(../../Cmn_Images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(../../Cmn_Images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
.ui-widget :active { outline: none; }

/*MonthPicker Mos*/


#leftBtn, #rightBtn {
    background-color: black;
    width: 50px; height: 20px;
    color: white;
    text-align: center;
    margin-right: 10px; margin-bottom: 20px;
    float: left;
    cursor: pointer;
    z-index:100;
}

#centerArea {
    width: 200px; height: 150px;
    position: relative;
    left: 200px;
    clear: both;
    /*border: 6pt solid gray;*/
/*  overflow: hidden; */
}

.scrollbar_major 
{
    -ms-transform:rotateX(180deg);
    -webkit-transform:rotateX(180deg);
    overflow-x:auto;
    overflow-y:hidden;
    transform:rotateX(180deg);
    scrollbar-base-color: lightgray; 
    scrollbar-track-color: #EAEAEA; 
    scrollbar-arrow-color: black; 
    scrollbar-shadow-color:#eaeaea;

}

/*::-webkit-scrollbar {   
    width: 12px;            
}
                        
::-webkit-scrollbar-thumb:hover {               
    background-color:rgba(255,0,0,1);            
}
            
::-webkit-scrollbar-thumb {             
    -webkit-transition:.5s;            
    background-color:rgba(255,0,0,0.2);
}*/
.menuItem    
{
    width:150px; height:100px; position:relative; top: 16%;
}

.style_button
{
    border-radius: 3px;
    background-color:Transparent;
    font-size: 0.7em;
    border: 1px solid #808080;
    font-variant: small-caps;
    color:#006699;
    cursor:pointer;
    padding:2px 1px 2px 1px;
}
.style_button:hover
{
    box-shadow: inset 0 2 1px #000;
    border-color: #00bfff;
}

.style_button_expand
{
    border-radius: 3px;
    background-color:Transparent;
    font-size: 0.7em;
    color:black;
    cursor:pointer;
    padding:2px 1px 2px 1px;
}


#barslide {
    background-color: white;
    border: 2px solid black;
    width: 30px; 
    height: 60px;
    z-index:400;
}


.style_topic
{
 font-family:Microsoft Sans Serif;
 text-align:center;
 font-size:small;
 font-variant:small-caps;
 font-weight:bold;
 padding-top:8px;
 color:White;
 background-color: #427DAD;
 height:22px;
 text-align :center;
 cursor:pointer;
 box-shadow:0px 0px 10px #000000;
 -moz-box-shadow:0px 0px 10px #000000;
 -webkit-box-shadow:0px 0px 10px #000000;
 
}
.style_tooltip
{
    width:130px;
    background-color:Black;
    color:#fff;
    text-align:center;
    font-size:12px;
    border-radius:6px; 
    padding:2px 0px; 
    z-index:999;
}
.bt_pdf
{
    text-align:center;
    border-style:solid;
    border-color:#CCCCCC;
    border-width:2px;
    background-color: transparent;
    vertical-align: bottom;
    padding:5px 5px 5px 5px;
    cursor:pointer;
}
.bt_pdf:hover
{
    box-shadow:1px 1px 20px #C0C0C0;
}
.bt_pdf_select
{
    text-align:center;
    border-style:solid;
    border-color:#CC0000;
    border-width:2px;
    background-color: transparent;
    vertical-align: bottom;
    padding:5px 5px 5px 5px;
    cursor:pointer;
    box-shadow:1px 1px 20px #C0C0C0;
}
.bt_pdf_select:hover
{
    box-shadow:1px 1px 20px #C0C0C0;
}
.TreeNodeEmpty
{
    color:Gray;
    font-size:12px;
}

/*! amazeui-swiper v0.0.5 | by Amaze UI Team | (c) 2016 AllMobilize, Inc. | Licensed under MIT | 2016-07-06T16:16:11+0800 */
/*! Amaze UI Plugin ~ swiper */
.swiper-container{
    position:relative;
    overflow:hidden;
    z-index:1;
    text-align:center;
    vertical-align: middle;
    width:150px;
}
.swiper-slide,.swiper-wrapper{
    vertical-align:middle;
    text-align:center;
}
.swiper-wrapper{
    z-index:1;
    display:-webkit-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-transition-property:-webkit-transform;
    transition-property:transform;
    transition-property:transform,-webkit-transform;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    vertical-align: middle;
    text-align:center;
    width:100px;
    
}
.swiper-container-android .swiper-slide,.swiper-wrapper{
    -webkit-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
.swiper-slide
{
    -webkit-flex-shrink:0;
    -ms-flex:0 0 auto;
    -ms-flex-negative:0;
    flex-shrink:0;
    text-align:center;
    width:100px;
}
.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide
{
    height:auto
}
.swiper-container-autoheight .swiper-wrapper
{
    -webkit-box-align:start;
    -ms-flex-align:start;
    -webkit-align-items:flex-start;
    -ms-grid-row-align:flex-start;
    align-items:flex-start;
    -webkit-transition-property:height,-webkit-transform;
    transition-property:transform,height;
    transition-property:transform,height,-webkit-transform
}
.swiper-container .swiper-notification
{
    position:relative;
    pointer-events:none;
    opacity:0;
    z-index:-1000
}
.swiper-button-next,.swiper-button-prev
{
    position:absolute;
    top:30%;
    width:15px;
    height:25px;
    z-index:10;cursor:pointer;
    -webkit-background-size:15px 25px;
    background-size:15px 25px;
    background-position:center;
    background-repeat:no-repeat;
}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled
{
    opacity:.3;
    cursor:auto;
    pointer-events:none
}
.swiper-button-prev,.swiper-container-rtl .swiper-button-next
{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    right:auto
}
.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black
{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white
{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next,.swiper-container-rtl .swiper-button-prev
{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    right:0px;left:auto
}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black
{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white
{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-pagination{
    position:relative;
    text-align:center;
    -webkit-transition:300ms;
    transition:300ms;
    -webkit-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    z-index:10
}
.swiper-pagination.swiper-pagination-hidden
{
    opacity:0
}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction
{
    bottom:20px;
    left:0;
    width:100%
}
.swiper-pagination-bullet
{
    width:6px;
    height:6px;
    display:inline-block;
    border-radius:100%;
    background:#000;
    opacity:.2
}
button.swiper-pagination-bullet
{
    border:none;
    margin:0;
    padding:0;
    -webkit-box-shadow:none;
    box-shadow:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -webkit-appearance:none;
    appearance:none
}
.swiper-pagination-clickable .swiper-pagination-bullet
{
    cursor:pointer
}
.swiper-pagination-white .swiper-pagination-bullet,.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar
{
    background:#000
}
/*.swiper-container-3d{-webkit-perspective:1200px;-o-perspective:1200px;perspective:1200px}
.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left
,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d
.swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d 
.swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right
,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}
.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right
{
    background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));
    background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
    background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top
    {
        background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));
        background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
        background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom
        {
            background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));
            background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
            background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,
            .swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip
            {
                overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;
                -webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}
                .swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}
                .swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{to{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-pagination-bullet-active{background:#0e90d2}*/
                /*02082018 BD_Praew Bug No.2a-07-B030 (ย้าย scollbar มาฝั่งซ้าย) */
.scollbarTW
{
    overflow-y:auto;
    transform:rotateY(180deg);
    scrollbar-base-color:rgba(235, 235, 235, 1);
    scrollbar-track-color:rgba(235, 235, 235, 1);
    scrollbar-arrow-color:cornflowerblue;
    scrollbar-shadow-color:rgba(235, 235, 235, 1);
 
    }
   /*02082018 BD_Praew Bug No.2a-07-B030 (ย้าย scollbar มาฝั่งซ้าย) */ 
   
   
   /*start css calendar dom*/
   .menuscopeM1{
    background-image:url("../../Cmn_Images/ActivityFlow/findEmp.png");
    display:block;
    }
 .menuscopeM1:hover,.menuscopeM1:active,.menuscopeM1:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/findEmpH.png");         
    }
    
    .menuscopeM2{
    background-image:url("../../Cmn_Images/ActivityFlow/Gen.png");
    display:block;
    }
 .menuscopeM2:hover,.menuscopeM2:active,.menuscopeM2:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/GenH.png");           
    }
   .btOTM
{
     /*border: 5px solid #C3C3C3;*/
     border: 5px solid #39699C;
     border-radius: 10px 10px 10px 10px;
     /*background:#C3C3C3; */
     background:#39699C;   
     color:White;
     font-weight:bold;
     width:100px;
     height:35px;
     font-size:large;
     /*20190315 BD_Mos*/
    cursor:pointer;
     box-shadow:1px 4px 10px gray;
}
.btOTM:hover
{
     /*border: 5px solid #ff7f27;*/
     border-radius: 10px 10px 10px 10px;
     /*background:#ff7f27; */ 
     color:black;
     font-weight:bold;
     width:100px;
     height:35px;
     font-size:large;
    cursor:pointer;
     box-shadow:1px 4px 10px gray;
}
   .scrollable{
   overflow: auto;
   width: 300px; /* adjust this width depending to amount of text to display */
   height: 200px; /* adjust height depending on number of options to display */
 
 }
 .scrollable select{
   border: none;
 }
 .customDrop1, customDropHeader
 {
    padding-left:0px !important;
     z-index:999999999;
    /* position:absolute;*/
    /*position:relative;*/
     /*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);*/
     }
 .listItemPL
 {
     cursor:pointer;
     padding:5px;
        border:1px solid #94c0d2;
     list-style:none;
     border-bottom-style:none;
     /*background-color:#daecf4;*/
     background-color:#ffffff;
     
     }
     .listItemPL:hover
     {
   background-color: #9ED9F9;
     }
   .setbgcalendar
{
     background-image:url(../../Cmn_Images/ActivityFlow/bgCalendar.png);
     background-position-x:center;
}
.setheadstyle
{
    padding:15px 0px 15px 0px;
}
.setfontdate
{
    font-size:11pt;
}
.setPosLabel
{
    position:relative;
    top:17%;
    
}
.testcolor
{
width:150px;
height:80px;
background-color:white;
border-color:white white transparent white;
border-radius:50%/80px 80px 0px 0px;
}
.MyCalendarHead
{
    width:695px;
    height:100px;
    background-image:url(../../Cmn_Images/ActivityFlow/bgCalendar.png);
    text-align:center;
    position:relative;
    top:20px;
}
.Mycalendartitle
{
  /*background-color:#0080ff;*/
  /*background-image:url(../../Cmn_Images/ActivityFlow/bgCalendar.png);*/
  color:white;
  /*border: 1px solid black;
  border-bottom-width: 0px;
  font-size:x-large;
  font-weight:bold;
  border-style:solid;
  border-radius:7px;
  border-color:#0080ff;
  height:30px;*/
}
.teamworkmonth
{
  border-collapse:collapse;
  border:solid 1px black;
  border-color:#0080ff;
}
.calendarheader
{
  background-color:#F7F7F7;
 /* background-image:url(../../Cmn_Images/Calendar/header_bg.gif);*/
  color:#504C39;
  font-family:Microsoft Sans Serif;
  font-size:11px;
  text-align:center;
  border-top:solid 1px #FFFFFF;
  border-left:solid 1px #FFFFFF;
  border-bottom:solid 1px #ACA899;
  border-right:solid 1px #C6C1AC;
  padding: 4px;
  /*color:White;*/
    border-style:solid;
    border-radius:7px;
}
.teamworkothermonthday
{
  background-color:#F5F3E5;
    
}

.calendarDay
{
  width:95px;
  height:80px;
  text-align:right;
  vertical-align:top;
  font-family:Microsoft Sans Serif;
  font-size:11px;
  color:Black;
  background-color:#FFFFFF;
  border:solid 1px #C6C1AC;
   border-style:solid;
  border-radius:13px;
}
.teamworkday2
{
  background-color:#ffecb3;
  width:95px;
  height:80px;
  text-align:right;
  vertical-align:top;
  color:White;
  
  color:Black;
  font-family:Microsoft Sans Serif;
  font-size:11px;
 
  border:solid 1px #C6C1AC;
  border-style:solid;
  border-radius:10px;
}
.gvRow
{
  border-style:solid;
  border-radius:10px;
  border-color:White;
    
    }
.tableEditteamwork
{
    border-style:solid;
    border-radius:7px;
    border-color:#b3b3b3;
    /*background-color: #e6e6e6;*/
    
    }     
.tableEditteamwork:hover
{
    border-style:solid;
    border-radius:7px;
    border-color:#5a91bf;
    background-color: #e6f9ff;
    }
 /*up calendar*/
.tb_headname
{
     border-radius:3px;
     border:1px solid #808080;
}
.divDateSM
{
   border-radius: 0px 0px 10px 10px; 
   width:280px;
   /*height:65px;*/ 
   height:45px;
   background-color:#FF7F26;
   text-align:center;
   box-shadow:1px 4px 10px gray;
}
.divDateS
{
   border-radius: 0px 0px 10px 10px; 
   width:360px;
   /*height:75px;*/
   height:45px;
   background-color:#FF7F26;
   text-align:center;
   box-shadow:1px 4px 10px gray;
}
.iconpdf
{
   visibility:hidden;
   border-radius:36%;
   background-color:#FF7F26;
   
    
}
.iconupload
{
    border-radius:36%;
    background-color:#E2E2E2;
    border: 5px solid #E2E2E2;
}
.iconApprW
{
    border-radius:50%;
   width:35px;
   height:35px; 
   border: 5px solid #C6C6C6; 
}
/*20190305 BD_Mos*/
.iconApprW:hover
{
    border-radius:50%;
   width:35px;
   height:35px; 
   border: 5px solid #ff7f27; 
}
.iconAppr
{
   border-radius:50%;
   width:35px;
   height:35px; 
   border: 5px solid #FF7F27;
}
.iconMS
{
   border-radius:50%;
   width:35px;
   height:35px; 
   background-color:#FFFFFF;
   border: 5px solid #99D9EA;
}
.imgDraftS
{
   margin-left:65%;
   width:30px;
   height:30px; 
}
.btMenuS
{
     /*border: 5px solid #C3C3C3;*/
     border: 5px solid #ff7f27;
     border-radius: 10px 10px 10px 10px;
     /*background:#C3C3C3; */
     background:#ff7f27;   
     color:White;
     font-weight:bold;
     width:100px;
     height:35px;
     font-size:large;
     /*20190315 BD_Mos*/
    cursor:pointer;
     box-shadow:1px 4px 10px gray;
}
/*20190305 mos*/
.btMenuS:hover
{
     /*border: 5px solid #ff7f27;*/
     border-radius: 10px 10px 10px 10px;
     /*background:#ff7f27; */ 
     color:black;
     font-weight:bold;
     width:100px;
     height:35px;
     font-size:large;
     /*20190315 BD_Mos*/
    cursor:pointer;
     box-shadow:1px 4px 10px gray;
}
.btCancelS
{
     border: 5px solid #FF7F26;
     border-radius: 10px 10px 10px 10px;
     background:#FF7F26;  
     color:White;
     font-weight:bold;
     /*20190315 BD_Mos*/
    cursor:pointer;
    box-shadow:1px 4px 10px gray;
}
.btDraftS
{
     border: 5px solid #93D151;
     border-radius: 10px 10px 10px 10px;
     background:#93D151;  
     color:White;
     font-weight:bold;
     /*20190315 BD_Mos*/
    cursor:pointer;
    box-shadow:1px 4px 10px gray;
}
.DivSumLevS
{
   /*width:90%;*/
  /* height:30px; */   
   /*20190531,SD_Mos,Bug no.3a1-7-01B818 กรณีที่อยู่ระหว่างสถานะ รออนุมัติยกเลิกใบลา ก็ยังแสดงตกเหมือนเดิม ในหน้า request*/
   /*20191129comment by aon*/
  /* height:50px; */ 
   
   /*background-color:#FFFFFF;*/
   border-radius: 10px 10px 10px 10px;
   text-align:center;
     /*20191129comment by aon*/
  /* position:relative;*/
   /*left:15%;*/
   
}
.divShowDetailS
{
 /*-webkit-box-shadow: 0px 0px 0px 5px #0099E6, inset 0px 10px 27px -8px #141414, inset 0px -10px 27px -8px #141414, 5px 5px 15px 5px rgba(0,0,0,0); 
 box-shadow: 0px 0px 0px 5px #0099E6, inset 0px 10px 27px -8px #141414, inset 0px -10px 27px -8px #141414, 5px 5px 15px 5px rgba(0,0,0,0);*/
/*width:75%;*/
width:90%;
/*20190315 BD_Mos*/
height:440px;
overflow-x:auto;
border: 1px solid #000000;
margin-left:10%;
background-color:#FFFFFF;
border-radius: 10px 10px 10px 10px;
}
.dvApprListMs
{
    width:100%;
    height:440px;
    background-color:#F6F6F6;
    border-radius: 10px 10px 10px 10px;
    justify-content:center;
    display:flex;
    
}
.bottomborder 
{
    color:Black;
    border: 1px solid #F7F7F7;
    padding-bottom:15px;
    margin-bottom:15px;
    border-radius: 10px 10px 10px 10px;
}
.bottomborder2 
{
    color:Black;
    border: 1px solid #EFEBEF;
    padding-bottom:15px;
    margin-bottom:15px;
    border-radius: 10px 10px 10px 10px;
}
/*20230508 by HPD_Frongz : mod*/
.bottomborder3 
{
    color:Black;
    border: 1px solid #898989;
    padding-bottom:15px;
    margin-bottom:15px;
    border-radius: 10px 10px 10px 10px;
}
/*20230508 by HPD_Frongz : mod*/
@use postcss-cssnext;
/* helpers/accessibility.css */
.invisible {
  left: -999px;
  overflow: hidden;
  position: absolute;
  top: -999px;
}
/* helpers/align.css */
.align {
  justify-content: center;
  align-items: center;
  display: flex;
}
/* layout/base.css */


body {
  background-color: var(--body-background-color);
  margin: 0;
  min-height: 100%;
}
/* modules/anchor.css */
a {
  outline: 0;
}
/* modules/icon.css */
:root {
  --icon-fill-color: #97adc6;
}
.icons {
  display: none;
}
.iconbar {
  display: inline-block;
  fill: var(--icon-fill-color);
  font-size: 1rem;
  height: 1em;
  vertical-align: middle;
  width: 1em;
}


/*css dom employee center*/
.Icon-tooltipLev {
position: relative;
/* background: #b1dae6;
*/
border-radius: 9px;
opacity : 1.0;
padding: 0 20px;
margin: 10px;
position:relative;
z-index: 1;
display: inline-block;
transition: all 0.3s ease-in-out;
cursor: default;
/*border-radius: 50%;*/
}
.Icon-tooltipLev:hover {
position: relative;
border-radius: 9px;
opacity : 1.0;
padding: 0 20px;
margin: 10px;
position:relative;
z-index: 1;
display: inline-block;
transition: all 0.3s ease-in-out;
cursor: default;
/*border-radius: 50%;*/
}
/*tooltip */
.tooltipDetailLev {
visibility: hidden;
z-index: 1000;
opacity: .40;
height:150px;
width: 240px;
padding: 0px 20px;
background: #5F9EA0;
/*color: #E086D3;*/
color: #FFFAF0;
position: absolute;
top:-140%;
left: -45%;
border-radius: 9px;
font: 16px;
transform: translateY(9px);
transition: all 0.3s ease-in-out;
/* box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);*/
box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}
/* tooltip after*/
.tooltipDetailLev:after {
content: " ";
width: 0;
height: 0;
position:relative;
z-index:1000;
border-style: solid;
border-width: 12px 12.5px 0 12.5px;
border-color: #5F9EA0 transparent transparent transparent;
position: absolute;
left: -30%;
}
.Icon-tooltipLev:hover .tooltipDetailLev{
visibility: visible;
transform: translateY(-10px);
opacity: 1;
transition: .3s linear;
z-index:1000;
}
.bottomLev .tooltipDetailLev { top:190%; left:-150%; }
.bottomLev .tooltipDetailLev::after
{  
top:-5%;
left:39%;
transform: rotate(180deg);
}
/**/
.DivStatusS{
/*margin-left:30px;
margin-top:-50px;*/   
border-left-width:5px;
border-left-style:solid;
border-left-color:Black; 

}
.LevDetails{
border-bottom: 4px outset #0C4BA4;
border-radius: 5px 5px 5px 5px;
background: #1C6EA4;
width:100px;
height:25px;
color: #FFFFFF;
font-weight:bold
}
/*OTDetail*/
.OTDetails{
border-bottom: 4px outset #004080;
border-radius: 5px 5px 5px 5px;
background: #006A80;
width:100px;
height:25px;
color: #FFFFFF;
font-weight:bold
}

/*divlist*/
.live .example-choice{
    display: flex;
    align-items: center;
    flex-grow: 1;
    }

.example-choice.selected{
    border-color: #000033;
    border-left-color: #000033;
    box-shadow: inset 0 2px 2px -2px rgba(0,0,0,.2);
    transition: height .5s;
    cursor: text;
    }

    .live .example-choice:hover{
    position: relative;
    z-index: 1;
    display: block;
    margin: .2em 0;
    width: 100%;
    border: 2px solid #1b76c4;
    border-left: 5px solid #1b76c4;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .2s ease-out,border .2s ease-out;}
    
    
.live .example-choice{
    position: relative;
    z-index: 1;
    display: block;
    margin: .2em 0;
    width: 100%;
    border: 2px solid #000033;
    border-left: 5px solid #000033;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .2s ease-out,border .2s ease-out;}


.example-choice-list.large{
    float: left;
    padding: 0 2em 0 0;
    width: 60%;
    text-align: right;}


.live .example-choice:before {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    z-index: 1;
    opacity: 0;
    transition: all .2s ease-out;
    transform: translateY(-50%);
    border-left: 10px solid #1b76c4;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    }
.pnlLev2{
border: 2px solid #18B995;
border-radius: 10px 10px 10px 10px;
margin-left:25px;  
background-color:#FFFFFF;
width:260px;
}
.pnlLev1{
border: 2px solid #18B995;
border-radius: 10px 10px 10px 10px;
margin-left:25px;   
background-color:#FFFFFF;
width:260px;
}
.pnlInOuts {
border: 1px solid #000000;
border-radius: 0px 0px 0px 0px;
margin-left:25px;
background-color:#FFFFFF;
}
.pnlOTs {
border: 1px solid #000000;
border-radius: 0px 0px 0px 0px;
margin-left:25px;
background-color:#FFFFFF;
}
/*#DivOTP*/
.DivOTPs {
/*border: 1px solid #000000;*/
border-radius: 0px 0px 0px 0px;
height:100%; 
width:95%;
margin-top:-3px;
background-color:White;
}
/*20190305 BD_Mos*/
/*#DivLevReq*/
.DivLevReqs {
/*border: 1px solid #000000;*/
/*border-radius: 0px 0px 0px 0px;
width:95%;*/
border-radius: 18px 18px 18px 18px;
width:85%;
background-color:#FFFFFF;
height:360px;
margin-top:-1px;
left:-10px;
position:relative;
margin:auto;
}
.DivOTPMs
{
     background-color:#F6F6F6;
    border-radius: 5px 5px 5px 5px;
    display:flex;
    justify-content:center;
    width:85%;
      /*20191129comment by aon*/
   /* height:300px; 
    margin-top:-0.8%*/
}
.DivInOutHeads
{
     width:100%;
     background-color:#00CCFF;
}
.DivInOutMs
{
    background-color:#F6F6F6;
    border-radius: 5px 5px 5px 5px;
    display:flex;
    justify-content:center;
    width:85%;
    position:relative;
    top:-4px;
}
/*20190305 BD_Mos*/
.ddl_lev
{
    border-radius :3px;
    border :1px solid #808080;
    box-shadow:0px 0px 2px #d9d9d9;
    
    }
.DivLevReqMs
{
    background-color:#F6F6F6;
    border-radius: 5px 5px 5px 5px;
    display:flex;
    justify-content:center;
    width:550px;
    height:540px;
    /*width:440px;
    height:380px;*/
    margin-top:-0.8%
}

/*end css calendar dom*/

/*20190118 Golf css*/
  
/*-----20190121,BD_Golf-----*/ 

    .divbigHeader {
 border: 3px solid #3baff7;
 border-radius: 15px 15px 0px 0px;
 width:240px;
 height:45px;
 background:#3baff7;
 /*margin-left:40px;*/
 /*margin-top:2px;*/
 color:#FFFFFF;
 
 }
 
 
 .divbigHeader:hover,.divbigHeader:active,.divbigHeader:focus{
    border: 3px solid #3baff7;
    border-radius: 15px 15px 0px 0px;
    width:240px;
    height:45px;  
    background:#3baff7;  
    color:#000000;
    /*margin-left:40px;    */
    
    }
    
    .divbigBord {
 border: 3px solid #3baff7;
 border-radius: 21px 21px 21px 21px;
 width:98.5%;
 /*width:1448px;*/
 /*height:800px;*/
 margin-left:20px;
 background:white;  
}

    .divbigHeaderSummary {
 border: 3px solid #ff8533;
 border-radius: 15px 15px 0px 0px;
 /*width:180px;*/
 height:45px;
 width:240px;
 background:#ff8533;
 margin-left:70px;
 color:#FFFFFF;
 
 }
 
 
 .divbigHeaderSummary:hover,.divbigHeaderSummary:active,.divbigHeaderSummary:focus{
    border: 3px solid #ff8533;
    border-radius: 15px 15px 0px 0px;
   /* width:180px;*/
    height:45px; 
    background:#ff8533;  
    color:#000000;
    margin-left:70px;    
    width:240px;
    }
    
    .divbigBordSummary {
 border: 3px solid #ff8533;
 border-radius: 21px 21px 21px 21px;
 width:98.5%;
 /*height:800px;*/
 margin-left:20px;
 background:white;  
}

/*09052019 start Golf(Myself ค่าลดหย่อน) css*/

     .divGrey {
 border: 5px solid #dbd7d7;
 border-radius: 20px 20px 20px 20px;
 background: #dbd7d7;
 /*width:93.8%;*/
 /*width:1000px;*/
 /*height:700px;*/
 /*margin-left:45px;*/
 }
 
      .divNumchild {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 15px 15px;
 background: #f8f8ff;
 /*width:90%;*/
 /*height:700px;*/
/* margin-left:65px;*/
 }

    .divTaxHeader {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 0px 0px;
/* width:60%;*/
 height:30%;
 background:#00b3b3;
 margin-top: -4.4%;
 margin-left: -2.5%;
 
 }
    .divTaxContent {
 border: 3px solid #00b3b3;
 border-radius: 21px 21px 21px 21px;
 width:98%;
 /*width:415px;*/
/* height:600px;*/
 background: #f4f0f0;
 margin-left: 1px;
}

    .divTaxHeader1 {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 0px 0px;
 width:100%;
 height:30%;
 background:#00b3b3;
  margin-top: -3%;
 margin-left: -2%;
 }
    .divTaxContent1 {
 border: 3px solid #00b3b3;
 border-radius: 21px 21px 21px 21px;
 width:98%;
 /*width:415px;*/
 /*height:250px;*/
 background: #f4f0f0;
}

   .divTaxHeader2 {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 0px 0px;
 width:100%;
 height:30%;
 background:#00b3b3;
  margin-top: -3.5%;
 margin-left: -3%;
 }
    .divTaxContent2 {
 border: 3px solid #00b3b3;
 border-radius: 21px 21px 21px 21px;
 width:98%;
 /*width:415px;*/
 /*height:120px;*/
 background: #f4f0f0;
}

   .divTaxHeader3 {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 0px 0px;
 width:100%;
 height:30%;
 background:#00b3b3;
  margin-top: -2.76%;
 margin-left: -2.39%;
 }
    .divTaxContent3 {
 border: 3px solid #00b3b3;
 border-radius: 21px 21px 21px 21px;
 width:98%;
 /*width:415px;*/
 /*height:120px;*/
 background: #f4f0f0;
}

 .ViewTax{
    border: 3px solid #94d352;
    border-radius: 20px 20px 20px 20px;
    width:180px;
    height:40px;
    background:#94d352;
    color:Black;
    margin-top :-7px;
    }
 .ViewTax:hover,.ViewTax:active,.ViewTax:focus{
    border: 3px solid #94d352;
    border-radius: 20px 20px 20px 20px;
    width:180px;
    height:40px;  
    background:#94d352;  
    color:White;
    margin-top :-7px;      
    }
    
     .borderSumFull {
 border: 3px solid #00b3b3;
 border-radius: 23px 23px 23px 23px;
 /*height: 300px;*/
 width:97%;
 /*width:415px;*/
 background: #f4f0f0;
 }

    .borderSumH1 {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 15px 15px;
 height: auto;
 width:100%;
 margin-left:-1.71%;
 margin-top:-1.5%;
 background:#00b3b3;
 }
    .borderSumH2 {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 15px 15px;
 height: auto;
 width:100%;
 margin-left:-1.5%;
 margin-top:-1.5%;
 /*margin-top:-10.5%;
 margin-left:50%;*/
 background:#20B2AA;
 }

    .Orenge {
 border: 3px solid #ff8533;
 border-radius: 30px;
 background:#ff8533;
 /*height:37px;*/
 }
 
     .Orenge2 {
 border: 3px solid #ff8533;
 border-radius: 30px;
 background:#ff8533;
 /*height:35px;*/
 }
 
     .divTaxBalanceHeader {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 0px 0px;
 width:20%;
 height:40%;
 background:#00b3b3;
 margin-left:-70%;
 }
    .divTaxBalance {
 border: 3px solid #00b3b3;
 border-radius: 21px 21px 21px 21px;
 /*width:100%;*/
 /*width:1300px;*/
 /*height:350px;*/
 /*margin-left:4.5%;*/
 background: #f4f0f0;
}

/*09052019 end Golf(Myself ค่าลดหย่อน) css*/

.divTaxSummaryHeader {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 0px 0px;
 width:50%;
 height:auto;
 background:#00b3b3;
 margin-left:45px;
 }

 .divTaxSummaryHeader1 {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 0px 0px;
 width:50%;
 height:auto;
 background:#00b3b3;
 margin-left:45px;
 }
    .divTaxSummary {
 border: 3px solid #00b3b3;
 border-radius: 21px 21px 21px 21px;
 width:95%;
 /*height:350px; 20B2AA*/
 margin-left:15px;
 background: #F7F3F7;
}

    .divTaxGive {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 15px 15px;
 height: auto;
 width:70%;
 margin-top:-1%;
 margin-left:19%;
 background:#20B2AA;
 }

 
    .divChangeInfoHeader {
 border: 3px solid #00b3b3;
 border-radius: 15px 15px 0px 0px;
 width:160px;
 /*height:30px;*/
 background:#00b3b3;
 margin-left:160px;
 }
    .divChangeInfo {
 border: 3px solid #00b3b3;
 border-radius: 21px 21px 21px 21px;
 width:1020px;
 /*height:350px;*/
 margin-left:110px;
 background: #f4f0f0;
}

/*-----20190121,End BD_Golf-----*/ 

    .menubartest1{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_myself.png");
    width:45px; 
    height:180px;
    display:block;
    }
.menubartest1:hover,.menubartest1:active,.menubartest1:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_myself2.png");
    width:45px;             
    }
    .menubartest2{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_Calendar.png");
    width:45px; 
    height:180px;
    display:block;
    }
.menubartest2:hover,.menubartest2:active,.menubartest2:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_Calendar2.png");
    width:45px;     
    display:block;               
    }
    .menubartest3{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_Teamwork.png");
    width:45px; 
    height:180px;
    display:block;
    }
.menubartest3:hover,.menubartest3:active,.menubartest3:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_Teamwork2.png");
    width:45px;     
    display:block;               
    }
     .menubarsub1{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_personal.png");
    width:38px; 
    height:150px;
    display:block;
    }
.menubarsub1:hover,.menubarsub1:active,.menubarsub1:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_personal2.png");
    width:38px;     
    display:block;               
    }
       .menubarsub2{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_tax.png");
    width:38px; 
    height:150px;
    display:block;
    }
.menubarsub2:hover,.menubarsub2:active,.menubarsub2:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_tax2.png");
    width:38px;     
    display:block;               
    }
       .menubarsub3{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_benefit.png");
    width:38px; 
    height:150px;
    display:block;
    }
.menubarsub3:hover,.menubarsub3:active,.menubarsub3:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_benefit2.png");
    width:38px;     
    display:block;               
    }
       .menubarsub4{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_document.png");
    width:38px; 
    height:150px;
    display:block;
    }
.menubarsub4:hover,.menubarsub4:active,.menubarsub4:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_document2.png");
    width:38px;     
    display:block;               
    }
    
       .menubarsub5{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_money1.png");
    width:38px; 
    height:150px;
    display:block;
    }
.menubarsub5:hover,.menubarsub5:active,.menubarsub5:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/icon_money2.png");
    width:38px;     
    display:block;               
    }    
    .Status{
    background-image:url("../../Cmn_Images/ActivityFlow/Status.png");
    }
    
.Pic
{
    border: 5px solid #BEBEBE;
    border-radius: 50%;
    
    }

/*20190118 end golf css*/

/*04032019 start Praew(Myself ข้อมูลส่วนตัว) css*/

  .MStabbarinfoSelect
    {
    border-style:solid;
    height:45px;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    width:100%;
    border-color:#3baff7;
    background-color:#3baff7;
    color:White;
     /*font-size:x-large;*/
    font-size:15pt;
    }
 .MStabbarinfoSelect:hover
 {
    border-style:solid;
    height:45px;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    width:100%;
    border-color:#3baff7;
    background-color:#3baff7;
    color:Black;
    /*font-size:x-large;*/
    font-size:15pt;
    }
    .MStabbarinfo
    {
    border-style:solid;
    height:45px;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    width:100%;
    border-color:#b3b3b3;
    background-color:#b3b3b3;
    color:White;
    /*font-size:x-large;*/
    font-size:15pt;
    }
 .MStabbarinfo:hover
 {
    border-style:solid;
    height:45px;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    width:100%;
    border-color:#3baff7;
    background-color:#3baff7;
    color:Black;
    /*font-size:x-large;*/
    font-size:15pt;
    }
  
  .MStabSuminfo{
    border-color:#ff8533;
    background-color:#ff8533;
    border-style:solid;
    height:45px;
    width:100%;
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px;
    color:White;
    /*font-size:x-large;*/
    font-size:15pt;
    }
  .MStabSuminfo:hover,.MStabSuminfo:active,.MStabSuminfo:focus{
    border-color:#ff8533;
    background-color:#ff8533;
    border-style:solid;
    height:45px;
    width:100%;
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px;
    color:Black;
    /*font-size:x-large;*/
    font-size:15pt;
    }
    /*20190305*/
    .menubarSelect1{
    background-image:url("../../Cmn_Images/ActivityFlow/Menumyself1.png");
    width:50px; 
    height:180px;
    display:block;
    }
    .menubarSelect2{
    background-image:url("../../Cmn_Images/ActivityFlow/Menucalendar1.png");
    width:50px; 
    height:190px;
    display:block;
    }
    .menubarSelect3{
    background-image:url("../../Cmn_Images/ActivityFlow/Menuteamwork1.png");
    width:50px; 
    height:200px;
    display:block;
    }

    .menuSelectsub1{
    background-image:url("../../Cmn_Images/ActivityFlow/personal_1.png");
    width:38px; 
    height:150px;
    display:block;
    }
    .menuSelectsub2{
    background-image:url("../../Cmn_Images/ActivityFlow/allowance_1.png");
    width:38px; 
    height:150px;
    display:block;
    }


/*04032019 end Praew(Myself ข้อมูลส่วนตัว) css*/

.hovergridlist
{
background-color: #F6F6F6;
 border-color:#C0C0C0;
}
.hovergridlist:hover
{
   background-color:#FFF8DC; 
    border-color:#FF7F26;
    /*20190315 BD_Mos*/
    cursor:pointer;
}

.dialogLeaveDetail
{
     width: 100%;
     background-color: #F6F6F6;
}

.dialogLeaveDetail:hover
{
   background-color:#FFF8DC; 
    cursor:pointer;
}


.txt_inputs 
{
    padding :1px 1px 3px 1px;
    border-radius: 3px;
    border: 1px solid #808080;
    background-image: none;
    box-shadow: 0px 0px 2px #d9d9d9;
    margin-top: 0px;
    margin-bottom: 0px;
}

.txt_inputs:focus
{
	box-shadow: inset 0 2 1px #000;
    border-color: #00bfff;
}
.txt_inputs:focus::-webkit-input-placeholder 
{
  transition: text-indent 0.5s 0.5s ease; 
  text-indent: -100%;
  opacity: 1;
}

.classdropdown
{
	border-radius:3px;
	border:1px solid #9d9999;
	height:25px;
	padding:3px;
	cursor:pointer;
}

.btDraftS:hover
{
    color:black;
}
.btCancelS:hover
{
    color:black;
}

.contentLock {
  position: relative;
  width: 100%;
}
.middleLock {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.contentLock:hover .table {
  opacity: 0.3;
}
.contentLock:hover .middleLock {
  opacity: 1;
}

/*08052019 start Golf(Myself ค่าลดหย่อน) css*/

 .divWhite {
 border: 5px solid #F7F3F7;
 border-radius: 20px 20px 20px 20px;
 background: #F7F3F7;
 /*width:85%;*/
 /*height:700px;*/
 margin-left:0.5px;
 }
 
 /*08052019 end Golf(Myself ค่าลดหย่อน) css*/

    .MSbottomborder 
{
    color:#F4F0F0;
    border: 1px solid #F4F0F0;
    padding-bottom:15px;
    margin-bottom:15px;
    border-radius: 10px 10px 10px 10px;
}
    .MSbottomborder1 
{
    color:#dbd7d7;
    border: 1px solid #dbd7d7;
    padding-bottom:15px;
    margin-bottom:15px;
    border-radius: 10px 10px 10px 10px;
}

.MSscollbar
{
    scrollbar-base-color:rgba(235, 235, 235, 1);
    scrollbar-track-color:rgba(235, 235, 235, 1);
    scrollbar-arrow-color:cornflowerblue;
    scrollbar-shadow-color:rgba(235, 235, 235, 1);
 
    }
    
    
    .Icon-tooltip
{

    position: relative;

}
.Icon-tooltip:hover .tooltipDetail

{

    visibility: visible;

}
    

    
     .MSsubmenu1{
    background-image:linear-gradient(#31a5ff,#64bbff);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    }
     .MSsubmenu1:hover .tooltipsubmenu1{
  
    visibility: visible; 
   
    }
         .MSsubmenu1:hover {
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    visibility: visible; 
     }
    .tooltipsubmenu1
    {
    visibility: hidden;
    position: absolute;
    top: 0%;
    left:-150px;
    display:block;
    opacity:0.9;
    }
    
             .MSsubmenuSelect1 {
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
     }
  .MSsubmenuSelect1:hover .tooltipsubmenu1{
  
    visibility: visible; 
   
    }
        
    
     .MSsubmenu2{
    background-image:linear-gradient(#31a5ff,#64bbff);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    }
    .MSsubmenu2:hover .tooltipsubmenu2{

    visibility: visible;    
     
    }
         .MSsubmenu2:hover {
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    visibility: visible;   
   
    }
    .tooltipsubmenu2
    {
    visibility: hidden;
    position: absolute;
    top: 0%;
    left:-200px;
    display:block;
    opacity:0.9;
    }
    
     .MSsubmenuSelect2{
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    }
    .MSsubmenuSelect2:hover .tooltipsubmenu2{

    visibility: visible;    
     
    }
    
     .MSsubmenu3{
    background-image:linear-gradient(#31a5ff,#64bbff);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    }
    .MSsubmenu3:hover .tooltipsubmenu3{

    visibility: visible;   
    
    }
         .MSsubmenu3:hover {
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    visibility: visible;
   
    }
    .tooltipsubmenu3
    {
    visibility: hidden;
    position: absolute;
    top: 0%;
    left:-280px;
    display:block;
    opacity:0.9;
    }
    
    .MSsubmenuSelect3{
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    }
    .MSsubmenuSelect3:hover .tooltipsubmenu3{

    visibility: visible;   
    
    }
    
     .MSsubmenu4{
    background-image:linear-gradient(#31a5ff,#64bbff);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    }
    .MSsubmenu4:hover .tooltipsubmenu4{

    visibility: visible;   
 
    }
    .MSsubmenu4:hover 
    {
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    visibility: visible;    
  
    }
    .tooltipsubmenu4
    {
    visibility: hidden;
    position: absolute;
    top: 0%;
    left:-150px;
    display:block;
    opacity:0.9;
    }
    
     .MSsubmenuSelect4{
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    }
    .MSsubmenuSelect4:hover .tooltipsubmenu4{

    visibility: visible;   
 
    }
    
     .MSsubmenu5{
    background-image:linear-gradient(#31a5ff,#64bbff);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    
    }
    .MSsubmenu5:hover .tooltipsubmenu5{
    visibility: visible; 
    }
     .MSsubmenu5:hover {
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    visibility: visible;  
    
    }
    .tooltipsubmenu5
    {
    visibility: hidden;
    position: absolute;
    top: 0%;
    left:-150px;
    display:block;
    opacity:0.9;
   
    }
    
         .MSsubmenuSelect5{
    background-image:linear-gradient(#035989,#035989);
    width:60px; 
    height:65px;
    position: relative;
    cursor:pointer;
    
    }
    .MSsubmenuSelect5:hover .tooltipsubmenu5{
    visibility: visible; 
    }

    /*******Document******/
    .DocList
    {
    border-style: solid; 
    border-color: #ffd2a6; 
    width: 95%; 
    /*height: 35px; */
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px; 
    background-color: #ffd2a6;  
    cursor:pointer;    
    }
        .DocListFocus
    {
    border-style: solid; 
    border-color: #ff9126; 
    width: 100%; 
   /* height: 35px; */
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px; 
    background-color: #ff9126;   
    color:White; 
    cursor:pointer;  
    }
    
/* Report Center myReport -Start*/
.menubar01{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_filter.png");
    width:50px; 
    height:200px;
    display:block;
    }
 .menubar01:hover,.menubar01:active,.menubar01:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/filter1.png");
    width:50px;             
    }
    .menubar02{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_Template.png");
    width:50px; 
    height:200px;
    display:block;
    }
.menubar02:hover,.menubar02:active,.menubar02:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/template1.png");
    width:50px;     
    display:block;               
    }
    
     .menubarSelect01{
    background-image:url("../../Cmn_Images/ActivityFlow/filter1.png");
    width:50px; 
    height:200px;
    display:block;
    }
    .menubarSelect02{
    background-image:url("../../Cmn_Images/ActivityFlow/template1.png");
    width:50px; 
    height:200px;
    display:block;
    }
    
 .menubar03{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_req.png");
    width:232px; 
    height:43px;
    display:block;
    }
.menubar03:hover,.menubar03:active,.menubar03:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_req1.png");
    width:232px;  
    height:39px;   
    display:block;               
    }
    
.menubar011{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_filter.png");
    width:71px; 
    height:67px;
    display:block;
    }
 .menubar011:hover,.menubar011:active,.menubar011:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_filter_onclick.png");
    width:71px;             
    }
    .menubar022{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_Template.png");
    width:71px; 
    height:67px;
    display:block;
    }
.menubar022:hover,.menubar022:active,.menubar022:focus{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_Template_onclick.png");
    width:71px;   
    display:block;               
    }
         .menubarSelect011{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_filter_onclick.png");
    width:71px; 
    height:67px;
    display:block;
    }
    .menubarSelect022{
    background-image:url("../../Cmn_Images/ActivityFlow/myReport_Template_onclick.png");
    width:71px; 
    height:67px;
    display:block;
    }
    .treestyle
    {
        background-color:White;
        border:1px solid white;
        border-radius:5px;
        margin-top:5px;
        width:260px;
        margin-left:5px;
        padding-top:5px;
        cursor:pointer;
        margin-right:auto;
    }
    .treestyle:hover,.treestyle:active,.treestyle:focus
    {
         border:2px solid gainsboro;
    }
    
.Divfirst0

{

display:block;

position:fixed;

background-color:rgba(0,0,0,0.3);

width:100%;

height:100%;

border-radius:5px;

z-index:0px;

top: 0px;

left:0px;

}

　

.Divfirst

{
position:fixed;

background-color:rgba(255,251,247,1);

width:50%;

height:50%;

border-radius:15px;

z-index:0px;

top:50%;

left:50%;

}

.gridHeadrpt
{
   position:relative;
   top:expression(this.offsetParent.scrollTop);
   z-index:10;
    
}




    .btInfo01 {
-moz-box-shadow:inset 0px 12px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 12px 0px 0px #ffffff;
box-shadow:inset 0px 12px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:Arial;
font-size:12px;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 0px 0px #ffffff;
}
.btInfo01:hover,.btInfo01:focus {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
background-color:#f6f6f6;
color:#0099CC; 
}
.btInfo01:active {
position:relative;
top:1px;
}
    
    
 .listItemPLrpt
 {
     cursor:pointer;
     padding:5px;

     list-style:none;
    
     border-top:1px solid #94c0d2;
   
     }

/* Report Center myReport -End*/


/*20220310 by HPD_Frongz : เพิ่ม Class - Start*/
.fl-table {
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    white-space: nowrap;
    background-color: white;
    table-layout :fixed;
}
.fl-table td, .fl-table th {
    text-align: center;
    /*20220318* - Start*/
    /*padding: 20px 50px 20px 20px;*/
    /*20220318* - End*/
    width:100px;
}
.fl-table td {
    border: none;
    font-size: 12px;
    /*20220318 start*/
    padding: 10px 20px 10px 20px;
    /*20220318 end*/
}
.fl-table th {
    color: Black;
    background: #CDCDCD;
    /*20220318 start*/
    padding: 15px 20px 15px 20px;
    /*20220318 end*/
}
.fl-table th:nth-child(odd) {
    color: Black;
    background: #CDCDCD;
}

.fl-table tr:nth-child(even) {

    background: #E5E4E2;
 }
 
 .imgAttn
 {
     height:45px;
 }
 .imgAttn:hover
 {
 }
 .imgSearchAttn
 {
     padding:3px;
     border:1px solid gray;
     width:20px;
     height:18px;
     right:5px;
     border-radius:0px 5px 5px 0px;
     position:relative;
     top:9.5px;
 }
 .txt_inputAttn
 {
     padding :1px 1px 3px 1px;
     border-radius: 3px 0px 0px 3px;
     border: 1px solid #808080;
     background-image: none;
     box-shadow: 0px 0px 2px #d9d9d9;
     margin-top: 0px;
     margin-bottom: 0px;
 }
 .txt_inputAttn:focus
 {
 	box-shadow: inset 0 2 1px #000;
     border-color: #00bfff;
 }
 .txt_inputAttn:focus::-webkit-input-placeholder 
 {
   transition: text-indent 0.5s 0.5s ease; 
   text-indent: -100%;
   opacity: 1;
 }
/*20220310 by HPD_Frongz : เพิ่ม Class - End*/

/*20220701 - Start*/
#ctl00_ContentPlaceHolder1_AttendanceList_gv_daylist thead{
    position : sticky;
    top : 0;
}
.fl-table thead
{
    position : sticky;
    top : 0;
    z-index : 2;
}
.fl-table thead th:nth-child(2)
{
    left : 0;
    position:sticky;
}
.fl-table tbody td:nth-child(2)
{
    left : 0;
    position:sticky;
    z-index:1;
}

/*20220701 - End*/

/*20231030*/
 .fl-table tr:nth-child(odd) td:nth-child(2){
    background: white;
 }
  .fl-table tr:nth-child(even) td:nth-child(2){
    background: #E5E4E2;
 }