@charset "utf-8";

/* 基本レイアウト定義 */

/*============================================================
全ページ共通設定
============================================================*/
* {margin: 0px;padding: 0px; /*border: 0px;*/}
html{overflow-x: scroll; overflow-y: scroll; height:100%;}
body {
	font-size: 12px;
	line-height: 1.5em;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	height: 100%;
	text-align: center;
	background-attachment: fixed;
}


/*============================================================
ヘッダ
============================================================*/
#header {
	width: 100%;
	min-width: 768px;
	background-color: #FFF;
	height: 70px;
	margin: 0 auto;
	position: relative;
}

/* ロゴ */
#header div#identity {
	display: block;
	float: left;
	margin-top:10px;
	margin-left:10px;
	top: 10px;
	left: 10px;
}
/* ログイン */
#header div#utility {
	float: right; 
	margin-top: 10px;
	margin-right: 10px;
}
/* ヘルプ */
#header #utility div#helpbox {
	float: left;
	margin-top: 20px;
	margin-right: 10px;
}

/* ヘルプ */
#header #utility #helpbox a 
{
	color: #000;
	list-style: none;
	padding-left: 20px;
	padding-top: 5px;
	background: url(../images/pdf.bmp) no-repeat top left;
}

#header #utility a:hover {
	color: #09F;
}

/*
#utility li {
	background: transparent url(../images/icon_arrow.gif) no-repeat scroll 0 3px;
	float :left;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0 15px 0 0;
	padding-left: 20px;
	text-indent: -3px;
}
*/

/*============================================================
グローバルメニュー
============================================================*/
#gmenu {
	position: relative;
	display: block;
	height: 39px;
/*	font-size: 12px;*/
	font-weight: bold;
	background: transparent url(../images/bgOFF1.gif) repeat-x top left;
	border-top: 3px solid #b70019;
}
#gmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: auto;
}
#gmenu ul li {
	display: block;
	float: left;
	margin: 0;
}
#gmenu ul li a {
	display: block;
	float: left;
	color: #666;
	text-decoration: none;
	padding: 11px 20px 0 20px;
	height: 23px;
	background: transparent url(../images/bgDIVIDER1.gif) no-repeat top right;
}
#gmenu ul li a:hover,
#gmenu ul li a.current {
	color: #09F;
	background: #FFF url(../images/bgON1.gif) no-repeat top right;
}

#back {
	position: absolute;
	width: 100%;
	min-width: 768px;
	top: 10px;
	right: 20px;
	text-align: right;
}
#back a {
	display: block;
	width: 40px;
	float: right;
	color: #666;
	text-decoration: none;
	background: transparent url(../images/back_off.gif) no-repeat left center;
}
#back a:hover {
	color: #09F;
	background: transparent url(../images/back_on.gif) no-repeat left center;
}

#close {
	position: absolute;
	width: 100%;
	min-width: 768px;
	top: 10px;
	right: 20px;
	text-align: right;
}
#close a {
	display: block;
	width: 40px;
	float: right;
	color: #666;
	text-decoration: none;
}
#close a:hover {
	color: #09F;
}



/*===========================================================
メインブロック
===========================================================*/
#main {
	background-color: #FFF;
	margin: 0;
	text-align: left;
	min-height: 82%;
}

/*============================================================
コンテンツラッパー
============================================================*/
#wrapper {
	position: relative;
/*	background: url(../images/main_bk.gif) repeat-y;*/
	margin: 10px 10px 15px 10px;
	padding-left: 10px;
	padding-right: 10px;
/*	width: 1170px;*/
	top: 15px:
	left: 15px;
}


/*============================================================
機能タイトル
============================================================*/

#subtitle {
/*backgroud-color: pink;*/
	display: block;

	width: 100%;
	line-height: 25px;
	margin-top: 15px;
	margin-bottom: 20px;
	font-size: 16px;

}

#subtitle #contents_type {
	display: block;
/*	position: absolute;
	top: -5px;
	left: 370px;*/
	width: 180px;
	margin-top: 5px;
	padding: 3px 10px;
	text-align: center;
/*	border: #D9D9D9 1px solid;
	background: #FF9;*/
	border: #444 1px solid;
	background: #043c78;
	color: #FFF;
/*	font-size: 14px;*/
	font-size: 12px;
	line-height: 18px;
	vertical-align: middle;
}

#info_box {
	display: block;
	position: relative;
	margin-top: 30px;
	margin-bottom: 15px;
}

#info_comp {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 20px;
}

#info_order {
	width: 300px;
}
#info_order dt {
	clear: both;
	display: block;
	float: left;
	width: 100px;
	background-color: #fb5e64;
	margin-right: 2px;
	margin-bottom: 1px;
	padding: 5px;
	font-weight: bold;
	color: #FFF;
}
#info_order dd {
	display: block;
	float: left;
	width: 100px;
	background: #ffdfe3;
	padding: 5px;
}


.info_table{
	padding: 2px;
}
.info_table td.item{
	background-color: #fb5e64;
	font-weight: bold;
	color: #FFF;
	text-align:center;
}
.info_table td.value{
	background:#ffdfe3;
}

/* 報告書作成 hara BEGIN */
.info_rpt_table{
	padding: 2px;
}
.info_rpt_table td.item{
	background-color: #fb5e64;
	font-weight: bold;
	color: #FFF;
	text-align:center;
	width: 150px;
}
.info_rpt_table td.value{
	background:#ffdfe3;
	width: 450px;
}
.info_rpt_table input.rdOnly {
	background-color:#eeeeee;
	font-size:110%;
	height:15px;
}
/* 報告書作成 hara END */

.pausetitle_box {
	width: 100%;
	min-width: 768px;
	display: block;
	position: relative;
	border: #ffdfe3 solid 1px;
	padding: .2em .3em;
	margin-bottom: 5px;
}
.pausetitle {
	display: block;
	position: relative;
	border-left: #ffdfe3 solid 6px;
	padding: .3em .3em .3em .8em;
}


.spacer15 {
	clear: both;
	display: block;
	width: 100%;
	min-width: 768px;
	height: 15px;
}








/*===========================================================
アクションボタン
===========================================================*/

.abutton_box {
	clear: both;
	display: inline-block;
	display:inline;
	_display: inline;
	float: left;
/* 	width: 100%; */
	margin-bottom: 2px;
}

.abutton_box ul {
	list-style: none;
}

li.abutton {
	display: inline;
}

li.abutton a,
li.abutton span {
	display: inline-block;
	float: left;
	line-height: 24px;
	height: 24px;
	background: url(../images/abutton.gif) no-repeat;
	color: #000;
	background-color: #ffffff;
}

li.abutton a {
	text-decoration: none;
	padding-left: 15px;
}

li.abutton span {
	background-position: right top;
	padding-right: 15px;
}

li.abutton a:hover {
	background-position: left bottom;
}

li.abutton a:hover span {
	background-position: right bottom;
}

.abutton_box_next {
	display: inline-block;
	display:inline;
	_display: inline;

}

/*===========================================================
アクションボタン（非活性）
===========================================================*/

/*============================================================
ページャー
============================================================*/

.pager_box {

	display: block;

	float: left;
/*	width: 50%;*/

	width: 100%;

	min-width: 768px;
/*	text-align: right;*/
	vertical-align: middle;

}


.pager {
	margin: 2px 0 0 0;
/*	vertical-align: middle;
*/
}
.pager li {
      float: left;
      margin-right: 2px;
      border: 1px #3366FF solid;
      font-weight: bold;
	list-style-type: none;
}
.pager li.prev,
.pager li.next {
      border: none;
}
.pager li a {
      position: relative;
      display: block;
      padding: 2px 8px;
      color: #b70019;
/*      color: #3366FF;*/
}
.pager li a:link,
.pager li a:visited {
      text-decoration: none;
}
.pager li a:hover,
.pager li a:active {
/*      background-color: #EDF3FE;*/
	background: #3D80DF;
	color: #FFF;
      text-decoration: none;
}
.pager li em {
      display: block;
      padding: 3px 8px;
      color: #09F;
/*      background: #3366FF;*/
      color: #FFFFFF;
}


/*===========================================================
部品
===========================================================*/
/** アイコン：リンクを新規ウィンドウで開く **/
.newwin {
	background:url(../images/icon_newwin.gif) no-repeat right 0.4em;
	padding-right: 1.5em;
	padding-top: 0.5em;
}


.srchtable {
/*    width: 510px;*/
/*	width: 100%;*/
	min-width: 768px;
	padding: 5px;
	border: 1px #D9D9D9 solid;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 15px;
}
.srchtable td {
	padding: 5px 15px;
/*	font-size: 12px;*/
	line-height: 1.2em;
}
.srchtable td.srch_box {
	background-color: #CCC;
	padding-left: 15px;
	text-align: center;
}
.srchtable strong {
	font-weight: bold;
}

.srchtable input {
/*	line-height: 1.2em;*/
	margin: 0px;
/*	background-color: #FFFFCC;*/
/*	border: 1px solid #D9D9D9;*/
	padding: 2px;
/*	height: 1.2em;*/
	vertical-align: middle;
}

.srchtable select {
	margin: 0px;
/*	border: 1px solid #D9D9D9;*/
/*	height: 1.5em;*/
	vertical-align: middle;
}
.srchtable radio, checkbox {
	vertical-align: middle;
}


.list_box {

	width: 100%;
	display: block;
	float: left;

	position: relative;
}

.listtable {
/*	display: block;
	float: left;*/
	padding: 5px;
	border: 1px #D9D9D9 solid;
	border-collapse: collapse;
	border-spacing: 0;
/*	margin-bottom: 15px;*/
}
.listtable th,
.listtable td {
	padding: 4px;
	font-size: 11px;
}
.listtable th {
	border: #444 1px solid;
	background: #666;
	text-align: center;
	font-weight: bold;
	line-height: 120%;
	color: #FFF;
	white-space: nowrap;
}
.listtable th a {
	color: #FFF;
}
.listtable tr:hover td {
	background: #ffdab9;
	/* color: #FFF; */
}
.listtable td {
	/*font-size: 12px;*/
	line-height: 1.2em;
	border: #D9D9D9 solid;
	border-width: 0 1px 0 1px;
	word-break:break-all;
	overflow:hidden;
/*	border-style: none;
*/
}
.listtable td.checkbox,

.listtable td.button {

	text-align: center;

}

.listtable tr.even {
	background: #fff0f0;
}

.listtable tr.alert {
	background: #ffff7f;
}

.listtable img{
	border-style: none;

}

.listtable td a {

	color: #000;
}

.listtable td a:hover {

	color: #FFF;
}

table{
	padding: 5px;
}
td{
	padding: 5px;
}






hr {

	border-bottom: 1px solid #CCC;

	margin-top: 15px;

	margin-bottom: 15px;

}

/*============================================================
フッター
============================================================*/


#footer {

	clear: both;
	display: block;
	width: 100%;
	min-width: 768px;
	border-top: 1px solid #CCC;
	background-color:#FFF;
}

#footer .copyright {
	background-color: #b70019;
	color: #CCC;
	padding: 3px 0;
}


/*===========================================================
クリアフィックス
===========================================================*/
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
}


#top_contents div#boxleft {
	display: block;
	float: left;
	width: 40%;
	min-width: 350px;
}
#top_contents div#boxcenter {
	display: block;
	float: left;
	width: 30%;
	min-width: 209px;
}
#top_contents div#boxright {
	display: block;
	float: left;
	width: 25%;
	min-width: 209px;
}

.itembox {
	margin-bottom: 15px;
	word-break:break-all;
	overflow:hidden;
}
.itembox h2 {
/*	background-color: #043c78;*/
	background-color: #fb5e64;
	line-height: 30px;
	color: #FFF;
	font-size: 12px;
	padding-left: 15px;
	vertical-align: middle;
	margin-right: 10px;
}
.itembox img {
	margin: 0px;
}
.itembox span {
	font-weight: bold;
}
.itembox .topic_detail {
	BORDER-BOTTOM: #ccc 1px solid;
	TEXT-ALIGN: left;
	BORDER-LEFT: #ccc 1px solid;
	PADDING-BOTTOM: 10px;
	MARGIN: 0px;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 10px;
	BORDER-TOP: #ccc 1px solid;
	BORDER-RIGHT: #ccc 1px solid;
	PADDING-TOP: 0px;
}
.topic_detail P {
	PADDING-BOTTOM: 8px;
	LINE-HEIGHT: 1.5em;
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	MARGIN-BOTTOM: 0px;
	BACKGROUND: url(../images/main_bordre.gif) repeat-x 50% bottom;
	PADDING-TOP: 8px;
}
.topic_detail IMG {
	MARGIN: 0px 3px 0px 0px;
	VERTICAL-ALIGN: text-bottom;
}

.itembox .item {
	border: #CCC 1px solid;
	margin-right: 10px;
}
.itembox .item p {
	font-weight: bold;
/*	border: #CCC 1px solid;
	padding: 1px 5px;*/
	margin-left: 10px;
	margin-top: 10px;
}
.itembox .item a {
	color: #000;
}
.itembox .item a:hover {
	color: #09F;
}
.itembox .item ul {
	list-style: none;
	padding: 10px;
}
.itembox .item li {
	list-style: none;
	padding-left: 20px;
	padding-bottom: 5px;
	vertical-align: text-top;
/*	border-bottom: #CCC 1px dotted;*/
}
.itembox .item li#news {
	background: url(../images/Bookmark.png) no-repeat top left;
}
.itembox .item li#system {
	background: url(../images/Settings.png) no-repeat top left;
}
.itembox .item li#wschedule {
	background: url(../images/Calender.png) no-repeat top left;
}
.itembox .item li#change {
	background: url(../images/FileEdit.png) no-repeat top left;
}
.itembox .item li#confirm {
	background: url(../images/Tag.png) no-repeat top left;
}
.itembox .item li#master {
	background: url(../images/Database.png) no-repeat top left;
}
.itembox .item li#search {
	background: url(../images/Search.png) no-repeat top left;
}
.itembox .item li#check {
	background: url(../images/Done.png) no-repeat top left;
}
.itembox .item li#check {
	background: url(../images/Done.png) no-repeat top left;
}
.itembox .item li#workpdf {
	background: url(../images/pdf.bmp) no-repeat top left;
}

.itembox .item .itemsrch {
	display: block;
	padding-left: 30px;
	margin-bottom: 10px;
	background: url(../images/Search.png) no-repeat 10px 0px;
}

.itembox .item li#ojisan {
	background: url(../images/icon_talk.png) no-repeat top left;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

.info-message
{
    font-weight: bold;
    color:Blue;
}

/***************************************************************************/
.calendar {
	border: 1px #D9D9D9 solid;
}

.week {
	text-align:center;
}

.week_sun {
	color: #ff0000;
	text-align:center;
}

.week_sat {
	text-align:center;
	color: #0000ff;
}

.cal_schedule {
		text-align:center;
}

input {
	height: 14px;
}

input[type="image"] 
{
    height:20px;
}

input[type="file"] 
{
    height:20px;
}

input[type="radio"]
{
    vertical-align: middle;
}

select {
	height:22px;
}

input.rdOnly {
	background-color:#eeeeee;
	font-size:125%;
	height:20px;
}

.resche_req {
	color:#ff0000;
}

/**2016.08.04 かな入力（IEのみ適用される）K.Hayakawa Add**/
hiragana
{
	ime-mode: active;
	}

/**2016.08.04 かな入力（IEのみ適用される）K.Hayakawa Add End**/

/**↓↓↓ 20170718 Rikkeisoft DucNV add **/
.btnWWN218 {
    display: inline-block;
	line-height: 27px;
	height: 27px;
	background: url(../images/button_move_to_wwn218.gif) no-repeat;
	color: #000;
	background-color: #ffffff;
	padding-left: 5px;
	padding-right: 5px;
}

/**↑↑↑ 20170718 Rikkeisoft DucNV add **/

/**↓↓↓ 20170720 Rikkeisoft DucNV add for WWN218 **/
.spotPeriodInput {
    width: 200px;
}

.spotPeriodFileInput {
    width: 500px;
}

.spotPeriodGetFileBtn_box {
	float: right;
	padding-left: 15px;
}

.spotPeriodGetFileBtn {
    float: right;
    background-color: #ffdfe3 !important;
}
/**↓↓↓ 20170720 Rikkeisoft DucNV add **/
.inputTblRow {
    height: 30px;
}

.itemCell {
    width : 100px;
}
/**↑↑↑ 20170720 Rikkeisoft DucNV add **/

/**↑↑↑ 20170720 Rikkeisoft DucNV add for WWN218 **/

/** Bot用 **/
#bot-dialog{
	vertical-align: bottom;
}

/**.chat-box {
    width: 425px;
    height: auto;
    overflow: hidden; floatの解除
    margin-bottom: 20px;
    padding-top:-125px;
}*/

#contactArea {
    width: 425px;
    height: 800%;
    background:#E9F9FD;
    overflow: auto;
    font-family: "メイリオ",sans-serif;
    font-size: 14px; 
}

#messageArea {
    background-color: #7C6428;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    font-size:14px;
    font-family: "メイリオ",sans-serif;
}

div#inputArea {
    font-size:12px;
}
div#numberArea {
    font-size:8px;
}

.chat-box {
    width: 100%;
    height: auto;
    /*overflow: hidden;*/
    margin-bottom: 20px;
}
.chat-face {
    float: left;
    margin-right: -120px;
}
.chat-face img{
    border-radius: 30px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area {
    width: 100%;
    /*float: right;*/
}
.chat-hukidashi_host {
    display: block; 
    padding: 20px;
    margin-left: 100px;
    margin-top: 0px;
    position : relative;
    border-radius: 10px;
    background-color: #E6E6E6;
    border-color: #E67C89;
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    color: #555555;
}
.chat-hukidashi_host:after {
    content: "";
    position: absolute;
    top: 50%; left: -12px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border: solid transparent;
    border-width: 10px 10px 10px 0;
    border-color: #E67C89;
    border-right: 12px solid #E6E6E6;
    border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}
.chat-hukidashi_guest {
    display: block; 
    padding: 20px;
    margin-left: 120px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    position : relative;
    border-radius: 10px;
    background-color: #38BBDF;
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    font-weight: bold;
    color: #FFFFFF;
}
.chat-hukidashi_guest:after 
{
	border-left: 12px solid #38BBDF;    
    border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	content: '';
    margin-top: -10px;
    position: absolute;
    right: -12px;
    top: 50%; 
}

.word_link{
	color:Blue;
}
#word_link:hover{
	color:#ff0000;
}

 /*table*/
 #scrollable2{
  width:415px;/*スクロールバーの幅コミコミ*/
  border-collapse:collapse;
 }
 /*tbody*/
 #scrollable2>tbody{
  height:480px;
  float:left;/*この設定によりoverflowが有効となる*/
  overflow:auto;
 }
 /*tr*/
 #scrollable2 tr{
 }
 /*th,td*/
 #scrollable2 th, #scrollable2 td{
  width:425px;
  height:auto;
 }

 /*border*/
 #scrollable2{
  border:solid 2px #44B0CE;
 }
 #scrollable2>thead>tr>th{
  border:solid 2px #44B0CE;
 }
 /*#scrollable2>tbody>tr>td{
  border:solid 1px #4F8C92;
 }*/
 #scrollable2>tfoot>tr>td{
  border:solid 0.1px #44B0CE;
  width:425px;
  height:50px;
 }
 
 
/* MessageBox */
dl.search{
    position:relative;
    background-color:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -o-border-radius:6px;
    -ms-border-radius:6px;
    border-radius:6px;
}
dl.search dt{
    margin-right:40px;
    padding:8px 0 8px 8px;
}
dl.search dt input{
    width:350px;
    height:24px;
    line-height:24px;
    background:none;
    border:none;
}
dl.search dd{
    position:absolute;
    top:0;
    right:0;
}
dl.search dd button{
    display:block;
    padding:10px;
    background:none;
    border:none;
}
dl.search dd button span{
    display:block;
    width:20px;
    height:20px;
    background:url('../images/msg.png') no-repeat scroll 0 0;
}
/* MessageBox */

.ask_jf_direct{
  position: fixed;
  display: none;
  width: 200px;
  height: 20px;
  right: 10px;
  bottom: 50px;
  background-color: rgb(44,159,234);
  color: #ffffff;
  margin: auto;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  behavior: url('/PIE.htc');
  text-align: center;
  z-Index: 30;
}


.tagbox {
	width:400px;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.tagbox p {
    margin: 0; 
    padding: 0;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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 */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
}
#impFileModal .modal-content {
    width: 500px;
}
#moveFileModal .modal-content {
    width: 500px;
}
#fileViewModal .modal-content {
    width: 1000px;
}
/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

.import-file tr{
	height: 50px;
	margin-bottom: 10px;
}
.import-file td {
	padding: 0px;
}
.import-file input {
	height: 20px;
}

.error-message
{
    font-weight: bold;
    color:Red;
}

.modal-title {
	width:100%; height:43px;		/*幅と高さ*/
	/*padding:17px 0px 0px 100px;		/*パディング*/
	font-size:20px;			/*フォントサイズ*/
	/*background-color:#000033;		/*背景色*/
	/*color:#ffffff;			/*文字色*/
    border-bottom: medium solid #000033;
}

a.cp_btn {
	display: block;
	width: 160px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #EC407A;
	border: 2px solid #EC407A;
	border-radius: 3px;
	transition: .4s;
}
a.cp_btn:hover {
	background: #EC407A;
	color: #fff;
}

/* ↓↓↓ 20200714 Rikkeisoft ThachNN ADD ↓↓↓ */
.wwn-btn {
    display: inline-block;
    margin-bottom: 0;
    color: #fff;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 10px;
    text-decoration: none;
    line-height: 1.2;
}

.btn-danger {
    background-color: rgb(255, 80, 80);
    border-color: rgb(216, 36, 36);
}

.btn-danger:hover {
    background-color: rgb(248, 54, 54);
    border-color: rgb(250, 36, 36);
}

.btn-cancel {
    background-color: rgb(127, 127, 127);
    border-color: rgb(127, 127, 127);
}

.btn-cancel:hover {
    background-color: rgb(100, 100, 100);
    border-color: rgb(100, 100, 100);
}

.btn-submit {
    background-color: rgb(68, 114, 196);
    border-color: rgb(28, 88, 192);
}

.btn-submit:hover {
    background-color: rgb(28, 88, 192);
    border-color: rgb(20, 83, 194);
}

.btn-close {
    background-color: rgb(237, 125, 49);
    border-color: rgb(238, 114, 32);
}

.btn-close:hover {
    background-color: rgb(238, 114, 32);
    border-color: rgb(240, 108, 20);
}

.btn-yellow {
    background-color: rgb(255, 192, 0);
    border-color: rgb(233, 175, 1);
}

.btn-yellow:hover {
    background-color: rgb(233, 175, 1);
    border-color: rgb(236, 178, 3);
}

.btn-indigo-blue {
    background-color: rgb(91, 155, 213);
    border-color: rgb(69, 139, 204);
}

.btn-indigo-blue:hover {
    background-color: rgb(69, 139, 204);
    border-color: rgb(57, 134, 206);
}

.listtable td .wwn-btn,
.listtable td .wwn-btn:hover {
    color: #000;
    text-decoration: none;
}

.srch-checkbox {
    position: relative;
    top: -1px;
}

.modal-msg .modal-content,
.modal-confirm .modal-content {
    min-width: 200px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-msg .modal-content {
	text-align: left;
	width: auto;
}

.modal-msg .modal-content .modal-msg-button {
    text-align: center;
    padding-top: 25px;
}

.modal-confirm .modal-content {
    padding: 0px;
    width: auto;
}

.modal-confirm .modal-content .modal-header {
    padding: 5px;
    background: #696969 ;
    color: #fff;
    text-align: left;
    font-weight: bold;
}

.modal-confirm .modal-content .modal-body {
    padding: 20px;
}

.modal-confirm .modal-content .modal-body .modal-confirm-button {
    text-align: center;
    margin-top: 20px;
}

.modal-confirm .modal-content .modal-body .modal-confirm-button .wwn-btn {
    width: 100px;
}

.modal-confirm .info_rpt_table .value {
    word-break: break-all;
}

.bg-red, .listtable tr:hover .bg-red {
    text-align: center;
    background-color: rgb(255, 80, 80);
    color: #fff;
    font-weight: bold;
}

.bg-yellow, .listtable tr:hover .bg-yellow {
    text-align: center;
    background-color: rgb(255, 192, 0);
    color: #fff;
    font-weight: bold;
}

.bg-orange, .listtable tr:hover .bg-orange {
    text-align: center;
    background-color: rgb(237, 125, 49);
    color: #fff;
    font-weight: bold;
}

.bg-green, .listtable tr:hover .bg-green {
    text-align: center;
    background-color: rgb(112, 173, 71);
    color: #fff;
    font-weight: bold;
}

.bg-blue, .listtable tr:hover .bg-blue {
    text-align: center;
    background-color: rgb(68, 114, 196);
    color: #fff;
    font-weight: bold;
}

.bg-grey, .listtable tr:hover .bg-grey {
    text-align: center;
    background-color: rgb(127, 127, 127);
    color: #fff;
    font-weight: bold;
}

.color-red {
    color: red;
    font-weight: bold;
}

.srch-box {
	min-width: 1000px;
}

.srch-box tbody tr:first-child td {
    padding-top: 15px;
}

.srch-box tbody tr:last-child td {
    padding-bottom: 15px;
}

.srch-box .srch-box-btn {
    padding: 10px 30px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.grp-tbl-button {
    padding-top: 10px;
	padding-right: 0px;
	text-align: right;
}

.grp-tbl-button .wwn-btn {
    width: 100px;
}

.wwn140-grp-box {
    display: inline-flex;
    height: 60px;
    margin-bottom: 20px;
    min-width: 1220px;
}

.wwn140-grp-box .srchtable {
    height: 100%;
}

.wwn140-grp-box .srch-total-box {
    min-width: 200px;
    border: 1px #D9D9D9 solid;
    border-collapse: collapse;
    margin-left: 50px;
    padding: 3px;
}

.wwn141-grp-box {
    margin-bottom: 15px;
    width: 400px;
}

.wwn141-grp-box .grp-box-header {
    margin-bottom: 15px;
}

.wwn141-grp-box .grp-box-header .wwn-btn {
    padding: 4px 40px;
    margin-right: 20px;
}

.wwn141-grp-box .grp-box-content .srchtable {
    min-width: 400px;
}

.wwn141-grp-box .grp-box-content .srchtable tbody tr:nth-child(3) td {
    padding-top: 10px;
}

.wwn141-grp-box .grp-box-content .srchtable tbody tr:nth-child(3) td:nth-child(3),
.wwn141-grp-box .grp-box-content .srchtable tbody tr:nth-child(4) td:nth-child(2),
.wwn141-grp-box .grp-box-content .srchtable tbody tr:nth-child(5) td:nth-child(2),
.wwn141-grp-box .grp-box-content .srchtable tbody tr:nth-child(6) td:nth-child(2) {
    padding-left: 0px;
    word-break: break-all;
}

.wwn141-grp-box .grp-box-content .srchtable tbody tr:nth-child(4) td:nth-child(1),
.wwn141-grp-box .grp-box-content .srchtable tbody tr:nth-child(6) td:nth-child(1) {
    vertical-align: top;
}

.wwn152-info_rpt_table .value {
	word-break: break-all;
}
/* ↑↑↑ 20200714 Rikkeisoft ThachNN ADD ↑↑↑ */


/* ↓↓↓ 20200717 Rikkeisoft HuyNV ADD ↓↓↓ */
.upd_btn {
	background-color: #ed364d;
    color: #fff;
    font-weight: 600;
    border: 1px solid black;
    font-size: 12px;
    margin-top: 10px;
    width: 130px;
}

.chkAll {
    font-size: 12px;
    border: 1px solid black;
    background-color: #ccc;
    font-weight: 600;
    width: 130px;
}

.upd_btn:hover, 
.chkAll:hover {
	cursor: pointer;
}

.srchtable tr td .stsLbl {
	position: relative;
	top : 1px;
}

.srchtable tr td .stsChk {
	margin-left: 10px;
}
/* ↑↑↑ 20200717 Rikkeisoft HuyNV ADD ↑↑↑ */


/* ↓↓↓ 20200702 Rikkeisoft ThaiLTN ADD ↓↓↓ */
.itembox .iconNoti {
    font-size: 14px;
    color: red;
    float: left;
}
.itembox .sumNoti {
    color: red;
}
.itembox .item li.chgLink {
    background: url(../images/icon_refresh.png) no-repeat top left;
    background-size: 16px;
    padding-left: 25px;
}
.itembox .item li.appLink {
    background: url(../images/icon_wishlist.png) no-repeat top left;
    background-size: 16px;
    padding-left: 25px;
}
.itembox .item li.chgLink2 {
    background: url(../images/pencil1.png) no-repeat top left;
    background-size: 22px;
    padding-left: 30px;
}
.itembox .item li.chgLink3 {
    background: url(../images/pencil2.png) no-repeat top left;
    background-size: 22px;
    padding-left: 30px;
}
.tittle_209 {
    display: inline-block;
}
#subtitle2 {
    display: block;
    width: 100%;
    line-height: 25px;
    margin-top: 35px;
    margin-bottom: 20px;
    font-size: 16px;
}
.srchtable2 {
    min-width: 550px;
    padding: 5px;
    border: 1px #D9D9D9 solid;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 15px;
}
.srchtable2 td {
    padding: 5px 15px;
    line-height: 1.2em;
}
.srchtable2 input {
    margin: 0px;
    padding: 2px;
    vertical-align: middle;
}

#noinputpush {
    margin-left: 25px;
}
#nodaypush {
    margin-left: 77px;
}
#UploadFile 
{
	width: 130px;
	height: 30px;
	background: #ef384b;
	border: none;
	float: right;
	cursor: pointer;
	color: White;
	margin-right: 30px;
	margin-bottom: 15px;
	margin-top: 10px;
}
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  background-color: #cccccc;
  margin-left: 10px;
}
.srch_lblComment {
    padding: 0px;
}
#msg_err
{
	font-weight: bold;
    color:Red;
    margin-bottom: 20px;
}
#msg_comp
{
	font-weight: bold;
    margin-bottom: 20px;
    color:Blue;
}
#UploadDate {
    background: url(../images/calender2.png) no-repeat center right;
}
.deadlinedate {
    text-align: center;
    color: red;
}
.adjustment {
    text-align: center;
    color: red;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  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 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* */
.dropbtn {
	background-color: #ccc;
	font-size: 11px;
	cursor: pointer;
	padding: 4px;
	text-decoration: none;
	color: Black;
}

.dropdown {
    display: block;
    padding: 9px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 5px;
  left: 212px;
  text-align: left;
  margin-top: -8px;
  border: 1px solid;
  border-color: rgb(68, 114, 196);    
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {display: block;}

#title {
    text-align: -webkit-auto;
}
#info-title {
    text-align: left;
}
#tb_content {
    width: 100%;
    display: block;
    position: relative;
    margin-top: 5px;
}
#tb_content table {
    padding: 5px;
    border: 1px solid;
    border-collapse: collapse;
    border-spacing: 0;
}
#tb_content th, #tb_content td {
    padding: 4px;
    font-size: 11px;
}
#tb_content th {
    border: #444 1px solid;
    background: #f24153;
    text-align: center;
    font-weight: bold;
    line-height: 120%;
    color: #FFF;
    white-space: nowrap;
}
#tb_content td {
    line-height: 1.2em;
    border: 1px solid;
    overflow: hidden;
}
.showContent .ui-widget-content {
	border: none !important;
}
.showError .ui-widget-content {
	border: none !important;
}
.showError .ui-dialog-buttonset {
	float: none !important;
	text-align: center;
}
#dl3_title {
	text-align: left;
}
#dl3_content {
	text-align: left;
	margin-top: 10px;
}
.list_item:nth-child(n+2) {
  padding-top: 10px;
}
/* ↑↑↑ 20200702 Rikkeisoft ThaiLTN ADD ↑↑↑ */

.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #f9c8c8;
  background: -moz-linear-gradient(left, #f9c8c8 10%, rgba(249,200,200, 0) 42%);
  background: -webkit-linear-gradient(left, #f9c8c8 10%, rgba(249,200,200, 0) 42%);
  background: -o-linear-gradient(left, #f9c8c8 10%, rgba(249,200,200, 0) 42%);
  background: -ms-linear-gradient(left, #f9c8c8 10%, rgba(249,200,200, 0) 42%);
  background: linear-gradient(to right, #f9c8c8 10%, rgba(249,200,200, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #FFF;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #FFF;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.btn-gradient-simple {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  background-image: linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
  transition: .4s;
  width:155px;
  text-align:center;
}

.btn-gradient-simple:hover {
  background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}