body {
}

A:link { color: blue; text-decoration:none}
A:visited {color: black; text-decoration: none}
A:hover {color: red; text-decoration: none}


#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}


.Watermark{
	color:lightgray;
}
.PopTable {
	border-collapse: separate; 
	border-spacing: 0px;
	border: 1px solid Black;
	background-color: white;
	text-align: Left;
}

.PopHead {
	background-color: white;
	padding: 8px 2px 2px 8px;
	margin: 0px;
}
.PopClose {
	background-color: white;
	padding: 0px 6px 0px 0px;
	margin: 0px;
	vertical-align: top;
	text-align: right;
	
}

.PopDisp {
	background-color: white;
	padding: 12px;
	margin: 0px;
}
.PopMsg {
	color: orange;
	background-color: white;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.PopBar {
	background-color: white;
	padding: 4px 4px 16px 4px;
	margin: 0px;
	text-align: center;
}
.PopBarSaveButton {
	background-color: white;
	border: 1px solid green;
	height: 30px;
	color: green;
}
.PopBarCancelButton {
	background-color: white;
	border: 1px solid green;
	height: 30px;
	color: green;
}
.PopBarDelButton {
	background-color: white;
	border: 1px solid gray;
	height: 30px;
}

.FocusButton, .FocusButtonBlack {
	background-color: crimson;
	color: white;
	border: 1px solid crimson;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-top: 1px;
	cursor: pointer;
	font-size: 14px;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}
	.FocusButton:hover {
		opacity: 0.6;
	}

.FocusButtonBlack {
	background-color: rgb(50, 50, 50);
	border: 1px solid rgb(50, 50, 50);
}
	.FocusButtonBlack:hover {
		opacity: 0.6;
	}

.Page{
	text-align: Left;
}
.PageTop{
	padding: 6px;
	margin: 0px;
	border-bottom-style: solid; 
	border-bottom-width: 1px; 
	border-bottom-color: #C0C0C0;
	font-size: x-large;
}
.PageMenu{
	background-color: white;
	padding: 6px;
	margin: 0px;
}
.PageDisp{
	background-color: white;
	padding: 12px;
	margin: 0px;
	


}.PageEdit{
	text-align: Left;
	border-collapse: separate; 
	border-spacing: 0px;
	border: 1px solid #;
}
.PageEditTop{
	padding: 6px;
	margin: 0px;
	border-bottom-style: solid; 
	border-bottom-width: 1px; 
	border-bottom-color: #C0C0C0;
	font-size: x-large;
}
.PageEditMSG {
	background-color: white;
	padding: 4px 4px 4px 4px;
	margin: 0px;
	text-align: center;
}
.PageEditBar {
	background-color: white;
	padding: 4px 4px 16px 4px;
	margin: 0px;
	text-align: center;
}



.stickydiv {
	width: 100%;
	position: fixed;
	background-color: rgba(255, 255, 255, 0.9);
	top: 0;
	height: 60px;
	-webkit-backdrop-filter: blur(15px); /*blur bg*/
	backdrop-filter: blur(15px); /*blur bg*/
	z-index: 2;
	border-bottom: 1px solid rgb(225, 225, 225);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}


.stickytb {
}





.HeadRowVDO {
height: 50px;
border-bottom: 1px solid black;
border-top: 1px solid black;
text-align: left;
padding-right: 15px;
}





.NoBorder {
	outline: none;
	width: 16px;
	vertical-align: middle;
}

.MainContent, .MainHeader {
	width: 90%;
	max-width: 1800px;
	border: none;
	margin: auto;
}

.MainHeader {
	width: 100%;
	max-width: 2200px;
	border: none;
	margin: auto;
}

.TbContent, .TbContentChoice, .TbContentNoPad { /* Table Header in Master Page */
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0px;
	max-width: 1800px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
	width: 100%;
}

	.TbContent td {
		padding-bottom: 5px;
		padding-top: 5px;
		font-size: 16px;
		color: rgb(30,30,30);
	}

.TbContentNoPad {
	width: 100%;
}

	.TbContentNoPad td {
		padding-bottom: 0px;
		padding-top: 0px;
		font-size: 16px;
		color: rgb(30,30,30);
	}

.TbContentChoice {
	width: 100%;
}

	.TbContentChoice tr {
		border-top: 1px solid rgb(180, 180, 180);
		border-bottom: 1px solid rgb(180, 180, 180);
	}

	.TbContentChoice td {
		padding-bottom: 20px;
		padding-top: 20px;
	}

.noClick {
	pointer-events: none;
	opacity: 0.3;
	display: inline-block;
}

.tbInput, .tbInputXL {
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 14px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.tbInputXL {
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.modal, .ClearModal {
	display: block; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10; /* Sit on top */
	left: 0;
	top: 0;
	width: 100vw; /* Full width */
	height: 100vh; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(220, 220, 220, 0.8); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(15px); /*blur bg*/
	backdrop-filter: blur(15px); /*blur bg*/
}

.ClearModal {
	z-index: 11; /* Sit on top */
	width: 100%;
	height: 100%;
	background-color: rgba(240, 240, 240, 0.4); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(0px); /*blur bg*/
	backdrop-filter: blur(0px); /*blur bg*/
}
.ModalinModalWidth {
	width: auto;
	height: auto;
	position: absolute;
	z-index: 11; /* Sit on top */
	background-color: rgba(255, 255, 255, 1); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(0px); /*blur bg*/
	backdrop-filter: blur(0px); /*blur bg*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 1px 1px 15px 5px rgb(100,100,100);
	padding: 10px;
	width: 95%;
	max-width: 960px;
}

.ModalinModal {
	width: auto;
	height: auto;
	position: absolute;
	z-index: 11; /* Sit on top */
	background-color: rgba(255, 255, 255, 1); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(0px); /*blur bg*/
	backdrop-filter: blur(0px); /*blur bg*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 1px 1px 15px 5px rgb(100,100,100);
	padding: 10px;
	width: 65%;
	max-width: 450px;
}

.modal-content, .modal-contentXL, .modal-contentS, .modal-contentL {
	background-color: #fefefe;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0px solid rgb(100, 100, 100);
	padding: 10px;
	box-shadow: 1px 1px 5px 2px rgb(200, 200, 200);
	width: 40%;
	max-width: 800px;
}

.modal-contentL {
	width: 55%;
	max-width: 1300px;
}

.modal-contentXL {
	width: 85%;
	max-width: 1500px;
}

.modal-contentS {
	width: 30%;
	max-width: 400px;
}

.ContainWithShadow {
	width: 100%;
	height: auto;
	text-align: center;
	background-color: rgb(255, 255, 255);
	margin: auto;
	padding: 3px;
	padding-bottom: 0px;
	box-shadow: 1px 1px 15px 5px rgb(220, 220, 220);
	margin-bottom: 10px;
}

.lbTopicColor, .lbTopic, .lbtxt {
	font-size: 20px;
	color: rgb(35,122,182);
	font-weight: bold;
}

.lbTopic {
	color: rgb(30,30,30);
}

.lbtxt {
	color: rgb(30,30,30);
	font-weight: normal;
}

.lbHeadColor, .lbHead {
	font-size: 30px;
	color: rgb(35,122,182);
	font-weight: bold;
}

.lbHead {
	color: rgb(30,30,30);
}

.lbSmall, .lbSmallB, .lbMSG {
	font-size: 16px;
	color: rgb(30,30,30);
}

.lbSmallB {
	font-weight: bold;
}

.lbMSG {
	color: rgb(235, 48, 56);
	font-size: 14px;
}

.lbCondition {
	font-size: 12px;
	color: rgb(50,50,50);
}


.flex-space {
	width: 100%;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: space-between;
	flex-wrap: nowrap;
}

.btHome, .btDelEdit {
	outline: none;
	width: 35px;
	vertical-align: middle;
}

.btDelEdit, .btsDel {
	width: 25px;
	margin-right: 10px;
}

.btsDel {
	width: 15px;
	margin-right: 7px;
}

.btSend {
	display: block;
	width: 32px;
	margin-left: auto;
	outline: none;
}

.btGeneralColor, .btGeneral, .btGeneralS, .btGeneralSFit, .btGeneralColorSFit, .btCancel, .btSmall, .btAdd, .btRemove {
	background-color: rgb(45,132,192);
	color: white;
	border: 1px solid rgb(45,132,192);
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 18px;
	cursor: pointer;
	width: 100%;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

.btAdd {
	background-color: crimson;
}

.btGeneral, .btGeneralS {
	background-color: rgb(0,0,0);
	border: 1px solid rgb(0,0,0);
}

.btGeneralSFit {
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: rgb(0,0,0);
	border: 1px solid rgb(0,0,0);
	width: auto;
	font-size: 14px;
}

.btGeneralColorSFit {
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: crimson;
	border: 1px solid crimson;
	width: auto;
	font-size: 14px;
}

.btGeneralS {
	font-size: 14px;
}

.btCancel, .btSmall, .btRemove  {
	background-color: rgba(0,0,0,0);
	border: 0px solid rgba(0,0,0,0);
	padding: 0px;
	color: rgb(110, 110, 110);
	font-size: 13px;
	width: auto;
}

	.btCancel:hover {
		color: rgb(150, 150, 150);
	}

.btRemove {
	color: crimson;
}
	.btRemove:hover {
		opacity: 0.6;
	}

.btSmall {
	color: rgb(35,122,182);
}

	.btSmall:hover {
		color: rgb(85,172,232);
	}

.btPDF, .btExcel {
	background-color: rgb(229,26,34);
	color: white;
	border: 1px solid rgb(229,26,34);
	font-size: 22px;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
}

.btExcel {
	background-color: rgb(34,120,73);
	border: 1px solid rgb(34,120,73);
}


.MenuFlex {
	margin: auto;
	width: 100%;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: flex-start;
	flex-wrap: nowrap;
	overflow-x: auto;
	-ms-overflow-style: none; /* Internet Explorer 10+ */
	scrollbar-width: none; /* Firefox */
	padding-top: 5px;
	padding-bottom: 5px;
}
	.MenuFlex::-webkit-scrollbar {
		display: none; /* Safari and Chrome */
	}

.prev, .next {
	position: absolute;
	cursor: pointer;
	width: auto;
	color: black;
	font-weight: bold;
	font-size: 23px;
	transition: 0.6s ease;
	/*border-radius: 0 15px 15px 0;*/
	user-select: none;
	top: 0%;
	margin: auto;
	background-color: rgba(248, 248, 248, 0.9);
	padding: 10px;
	padding-left: 0;
}

.next {
	right: 0;
	padding-left: 10px;
	padding-right: 0;
	/*border-radius: 15px 0 0 15px;*/
}

	.prev:hover, .next:hover {

	}

.MenuImage, .MenuImageNoShow {
	outline: none;
	width: 100px;
	margin: 40px;
	vertical-align: middle;
	margin-bottom: 0px;
}

.MenuImageNoClick {
	pointer-events: none;
	opacity: 0.2;
}

.MenuImageNoShow {
	pointer-events: none;
	opacity: 0;
}



.TbFitCell, .TbFitCellNoPad, .TbResponse { /* Table Header in Master Page */
	border-collapse: collapse;
	border-spacing: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 1800px;
	margin: auto;
	width: 100%;
	border: 0px solid red;
}

	.TbFitCell td {
		padding-bottom: 5px;
		padding-top: 5px;
		font-size: 16px;
		color: rgb(30,30,30);
		border-color: rgb(100, 100, 100);
	}

	.TbFitCellNoPad td {
		padding-bottom: 0px;
		padding-top: 0px;
		font-size: 16px;
		color: rgb(30,30,30);
		border: 0px solid blue;
	}

.pnPad {
	padding-bottom: 20px;
	padding-top: 5px;
}

.DialogBox, .DialogBoxXL {
	width: 100%;
	min-height: 38vh;
	max-height: 40vh;
	max-width: 1800px;
	margin: auto;
	overflow-y: auto;
	overflow-x: hidden;
	/*border: 1px solid rgb(100, 100, 100);
	 -ms-overflow-style: none; /* Internet Explorer 10+ */
	/* scrollbar-width: none; /* Firefox */
}

	.DialogBox::-webkit-scrollbar, .DialogBoxXL::-webkit-scrollbar {
		/*width: 6px;
		background: rgba(230, 230, 230, 1);
		padding-right: 25px;
		 display: none; /* Safari and Chrome */
	}
	.DialogBox::-webkit-scrollbar-thumb, .DialogBoxXL::-webkit-scrollbar-thumb {
		/*background: rgba(0,0,0, 0.5);
		-webkit-border-radius: 1ex;*/
	}

.DialogBoxXL {
	max-height: 50vh;
}

.CenterContent {
	width: 98%;
	margin: auto;
	max-width: 1800px;
}

.AutoWidthCell {
		width: 1%;
		white-space: nowrap;
		padding-right: 10px;
	}

.ChatBox {
	width: 100%;
	max-width: 1800px;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 35vh;
	border: 1px solid rgb(100, 100, 100);
}

.ChartUser, .ChartMe {
	max-width: 70%;
	padding: 8px;
	padding-left: 12px;
	padding-right: 12px;
	border: 0px solid rgb(100, 100, 100);
	background-color: rgb(45,132,192);
	color: white;
	display: inline-block;
	border-radius: 15px;
	margin-right: 5px;
	margin-top: 5px;
}

.ChartUser {
	background-color: rgb(230,230,230);
	color: rgb(30, 30, 30);
	margin-right: 0px;
	margin-left: 5px;
}

.tChartUser, .tChartMe {
	font-size: 12px;
	color: rgb(150, 150, 150);
	max-width: 70%;
	padding-top: 3px;
	border: 0px solid rgb(100, 100, 100);
	background-color: rgba(45,132,192, 0);
	margin-right: 10px;
	margin-bottom: 10px;
}

.tChartUser {
	margin-right: 0px;
	margin-left: 10px;
}

.LimitContent {	
	width: 200px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}

.Hide {
	display: none;
}

.ShowNHide {
	display: inline-block;
}

.HideNShow {
	display: none;
}

.btMenu, .btMenuFocus, .btLogin {
	/*color: rgb(255, 255, 255);*/
		background-color: rgba(45,132,192, 0);
		margin-right: 20px;
		margin-bottom: 10px;
		margin-top: 10px;
		font-size: 18px;
		cursor: pointer;
		outline: none;
		-webkit-appearance: none;
		-webkit-border-radius: 0;
		white-space: nowrap;
		border: none;
		padding: 0px;
		color: rgb(30, 30, 30);
	}

	.btMenu:hover {
		color: rgb(130, 130, 130);
	}

.btMenuFocus {
	pointer-events: none;
	color: crimson;
}

.btLogin {
	margin-right: 0px;
}

	.btLogin:hover {
		color: red;
	}

.HalfContent {
	width: 70%;
	max-width: 1200px;
	border: none;
}

.TwoColResponse {
	display: inline-block;
	width: 49%;
	vertical-align: top;
	margin: auto;
}

.ScrollMenu {
	overflow-y: hidden;
	overflow-x: auto;
	scrollbar-width: thin;


}

.ImBanner {
	display: block;
	width: 100%;
	height: auto;
	padding: -1px;
	margin: -1px;
}

.HomeMenu, .HomeMenuBlur {
	width: 100%;
	background-color: rgba(248, 248, 248, 0.9);
	border-bottom: 0px solid rgb(250, 250, 250);
	/*box-shadow: 1px 1px 15px 5px rgb(240, 240, 240);*/
	z-index: 2;
}

.HomeMenuBlur {
	top: 0px;
	position: fixed;
	-webkit-backdrop-filter: blur(8px); /*blur bg*/
	backdrop-filter: blur(8px); /*blur bg*/
}

.bgContent {
	padding-top: 20px;
	padding-bottom: 50px;
	width: 100%;
	background-color: rgb(255, 255, 255);
}

@media screen and (max-width: 850px) {

	.ScrollMenu {
		overflow-x: auto;
	}

	.HalfContent {
		width: 98%;
	}

	.btMenu, .btMenuFocus, .btLogin  {
		font-size: 15px;
		
	}

	.NoBorder {
		width: 14px;
	}

	.tbInput {
		font-size: 12px;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.modal-contentS {
		width: 65%;
	}

	.modal-content, .modal-contentL {
		width: 85%;
	}

	.modal-contentXL {
		width: 98%;
	}

	.TbContentChoice td {
		font-size: 12px;
	}

	.TbContent td, .TbFitCell td {
		font-size: 12px;
		padding-bottom: 3px;
		padding-top: 3px;
	}

	.TbContentNoPad td, .TbFitCellNoPad td {
		font-size: 12px;
		border: 0px solid red;
		padding-bottom: 0px;
		padding-top: 0px;
	}

	.btSend {
		width: 22px;
	}

	.ChartBox {
		height: 250px;
	}

	.lbHeadColor, .lbHead {
		font-size: 18px;
	}

	.lbTopicColor, .lbTopic, .lbtxt {
		font-size: 16px;
	}

	.MainContent {
		width: 98%;
	}

	.tChartUser, .tChartMe {
		font-size: 8px;
		margin-bottom: 5px;
	}

	.ChartUser, .ChartMe {
		margin-top: 2px;
	}

	.btGeneralColor, .btGeneral, .btGeneralS, .btCancel, .btSmall {
		font-size: 13px;
	}


	.btGeneralS, .lbSmall, .lbSmallB, .lbMSG {		
			font-size: 12px;
		}

	.btCancel, .btSmall, .btRemove, .FocusButton, .FocusButtonBlack, .btGeneralColorSFit, .btGeneralSFit {
		font-size: 10px;
		width: auto;
	}

		.ShowNHide {
			display: none;
		}

		.HideNShow {
			display: block;
		}

		.btsDel {
		width: 10px;
		margin-right: 5px;
		}

		.TwoColResponse {
			display: block;
			width: 100%;
		}

	.prev, .next {
		
		font-size: 20px;
		
	}

	.pnPad {
		padding-bottom: 10px;
		padding-top: 5px;
	}

	}