/*#########################################################################################

   Global Style 
	
#########################################################################################*/
body{
	margin:0;
	font-family: 'Amiko', sans-serif;

	position:relative;
	left:0px;

	max-width:1920px;
}

h1,h2{margin:10px 0 5px;}

.noscroll{overflow:hidden;}
.clear{clear:both;}
.hide{display:none;}

.icon{transition:color 250ms;}
.icon:hover{cursor:pointer; color:red;}

/*#########################################################################################

	Main Header
	
#########################################################################################*/
#M_Header{
	width:100%;
	height:40px;
	box-shadow:0px 0px 3px 3px #AAA;
	color:#333;
	
	background-color:rgba(255,200,0,0.5);
}





/* Header Logo */
#M_HeaderLogo{
	width:210px;
	margin:5px 0 0 10px;
	font-family: 'Holtwood One SC', serif;
	font-size:15px;
	font-weight:300;
	line-height:13px;
	text-shadow:1px 1px 1px #AAA;

	float:left;
}

#M_HeaderLogo>a{color:#000;}

#M_MainLogo>span{
	display:block;
	float:left;
}

#M_MainLogo>span:nth-of-type(1){
	font-size:30px;
	line-height:30px;
}

#M_MainLogo>span:nth-of-type(2){margin-top:1px;}

#M_Version{
	margin:2px 0 0 3px;
	
	font-family: 'Work Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	
	display:block;
	float:left;
}





/* Header Tool */
#M_HeaderTool{
	margin-top:1px;
	padding:5px 10px;
	font-size:28px;
	line-height:30px;
	float:right;
}

#M_HeaderTool>a{color:#333;}

#M_HeaderTool i{
	margin-left:10px;
	color:#333;
	transition:color 250ms;
}

#M_HeaderTool i:hover{
	color:rgb(155,155,100);
	cursor:pointer;
}

#M_HeaderTool_Task{text-decoration:none; position:relative;}
#M_HeaderTool_Task.HaveNewTask:after{
	content:'•';
	font-size:50px;
	position:absolute;
	right:-5px;
	top:12px;
	color:red;
	text-shadow:0 0 3px #000;
}






/* Header Nav */
#M_HeaderNav_L{float:left;}
#M_HeaderNav_R{float:right;}

.M_HeaderNav>ul{
	margin:0px;
	padding-left:10px;
	list-style:none;
}

.M_HeaderNav li{
	padding:10px 10px 10px 5px;

	display:block;
	float:left;
	position:relative;
	
	transition:text-shadow 250ms;
}

.M_HeaderNav li:hover{
	cursor:pointer;
	text-shadow:1px 1px 3px #AAA;
	text-decoration:underline;
}

.M_HeaderNav li>span{
	display:block;
	
	color:#333;
	
	transition:text-shadow 250ms;
}

.M_HeaderNav li:hover>span{
	cursor:pointer;
	text-shadow:1px 1px 3px #AAA;
	text-decoration:underline;
}

.M_HeaderNav a{
	color:#333;
	text-decoration:none;
}

.M_HeaderNav .fas{margin-right:5px;}





/*#########################################################################################

	Body
	
#########################################################################################*/
#M_PageWrapper{
	padding: 0 10px 10px;
}
#M_PageWrapper_S{
	width:960px;
	margin:0 auto;	
}

#M_IDGroup{
    margin: 12px 0 0;
    font-size: 13px;
    color: #BBB;
    font-weight: 300;
    line-height: 10px;	
}
#M_IDGroup+h1 {margin-top: 0;}


/*#########################################################################################

	Now Loading
	
#########################################################################################*/
#M_NowLoadingWrapper{display:none; z-index:100; padding:0;}

#M_NowLoading{
	width:100%;
	height:100%;
	
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color:#333;
	background-color:rgba(255,255,255,0.75);
}

#M_NowLoading>div>i {font-size: 20px;opacity: 0;display:inline-block;}

@keyframes lol{0%{opacity:0;transform:translateX(-300px);}33%{opacity:1;transform:translateX(0px);}66%{opacity:1;transform:translateX(0px);}100%{opacity:0;transform: translateX(300px);}}
@-webkit-keyframes lol{0%{opacity:0;-webkit-transform:translateX(-300px);}33%{opacity:1;-webkit-transform:translateX(0px);}66% {opacity:1;-webkit-transform:translateX(0px);}  100%{opacity:0;-webkit-transform:translateX(300px);}}

#M_NowLoading>div>i:nth-child(6) {-webkit-animation: lol 3s infinite ease-in-out;animation: lol 3s infinite ease-in-out;}
#M_NowLoading>div>i:nth-child(5) {-webkit-animation: lol 3s 100ms infinite ease-in-out;animation: lol 3s 100ms infinite ease-in-out;}
#M_NowLoading>div>i:nth-child(4) {-webkit-animation: lol 3s 200ms infinite ease-in-out;animation: lol 3s 200ms infinite ease-in-out;}
#M_NowLoading>div>i:nth-child(3) {-webkit-animation: lol 3s 300ms infinite ease-in-out;animation: lol 3s 300ms infinite ease-in-out;}
#M_NowLoading>div>i:nth-child(2) {-webkit-animation: lol 3s 400ms infinite ease-in-out;animation: lol 3s 400ms infinite ease-in-out;}
#M_NowLoading>div>i:nth-child(1) {-webkit-animation: lol 3s 500ms infinite ease-in-out;animation: lol 3s 500ms infinite ease-in-out;}





/*#########################################################################################

	M_Overlay

	<div id="WhateverID_OL" class="M_OL">
		<div id="WhateverIDWrapper" class="M_Overlay">
			<section id="WhateverID" class="M_Section">
				<h3>Title</h3>
				<p>Description</p>
				<hr>

				<h4>Case Type</h4>

				.
				.
				.

			</section>
			
			<i class="fas fa-times M_OL_Close"></i>
			<div id="WhateverID_Button" class="M_btn min">Create</div>
		</div>
	</div>
	
#########################################################################################*/
.M_OL{
	width:100%;
	height:100%;
	padding:50px;
	
	position:fixed;
	top:0;
	left:0;
	
    box-sizing: border-box;
    overflow: auto;
    z-index: 30;
	
	background-color: rgba(0,0,0,0.75);
	
	justify-content: center;
    align-items: center;
}

#M_OverlayWrapper{
	padding:50px;
	box-sizing:border-box;
	
	overflow:auto;

	z-index:30;
  
	background-color:rgba(0,0,0,0.75);
	
	
	justify-content:center;
	align-items:center;
	
	display:none;
}

#M_Overlay_LeaveArea{
	z-index:1;	
}

.M_Overlay{
	height:100%;
	
	position:relative;
	z-index:30;	
	
	display:flex;
	flex-direction:column;
	justify-content: center;
}

.M_Overlay .M_Section{
	max-height:85%;
	
	margin:0;
	padding:10px 15px;
	border-radius:5px;
	
	background-color:#FFF;
	
	display:flex;
	flex-direction:column;
	
	position:relative;
}

.M_OL_Close{
	position:absolute;
	top:-40px;
	right:0;
	
	font-size:36px;
	color:#FFF;
	
	transition:color 250ms;
}
.M_OL_Close:hover{cursor:pointer; color:red;}

.M_OL_Btn{width:150px;}
.M_OL_Btn.R{margin-right:0;float:right;}
.M_OL_Btn.L{margin-left:0;float:left;}
.M_OL_Btn.F{width:100%;box-sizing:border-box;}	
	


#OL_TA_Wrapper{
	width:800px;
	height:auto;
	margin:auto;
	justify-content:unset;
}

#OL_TA_Title{
	font-size:24px;
	color:#FFF;
	display:block;	
}

#OL_TA{
	width:800px;
	height:500px;
	padding:10px;
	box-sizing:border-box;
	
	font-family: 'Amiko', sans-serif;
	font-size: 16px;
	
	resize:none;
}

#OL_Save{
	margin:0;

	font-size:36px;
	color:rgba(20,20,20,0.5);
	
	position:absolute;
	bottom:6px;
	right:10px;

	transition:color 500ms;		
}
#OL_Save:hover{cursor:pointer; color:rgba(20,20,20,1.0);}

#OL_TA_Close{
	font-size:36px;
	color:#FFF;
	
	position:absolute;
	top:-5px;
	right:0px;
	
	transition:color 250ms;
}

#OL_TA_Close:hover{
	color:red;
	cursor:pointer;
}




/*#########################################################################################

	Footer Messager
	
#########################################################################################*/
#M_Footer{
	width:100%;

	position:fixed;
	bottom:0;
	z-index:101;
}

.M_Footer_Msg{
	width:100%;
	height:40px;
	padding:0 10px;
	
	font-size:22px;
	line-height:40px;
	position:relative;

	animation: FooterMsgInStage 250ms linear;
}

@keyframes FooterMsgInStage{
    0%   {height:0px;}
    100% {height:40px;}
}

/* GOOD NEWS */
.M_F_Msg_O{background-color:rgba(155,255,127,0.8);}
.M_F_Msg_O:before{
	content:"\f058";

	font-family:"Font Awesome 5 Free";
	font-size:24px;
	font-weight:700;
	
	margin-right:10px;
}

/* BAD NEWS */
.M_F_Msg_X{background-color:rgba(255,127,127,0.8);}
.M_F_Msg_X:before{
	content:"\f057";

	font-family:"Font Awesome 5 Free";
	font-size:24px;
	font-weight:700;
	
	margin-right:10px;
}
.M_F_Msg_Close{
	margin-right:10px;
	
	font-size:28px;
	
	position:absolute;
	right:20px;
	top:7px;
	
	transition: color 500ms;
}
.M_F_Msg_Close:hover{cursor:pointer; color:red;}

/* Notifications */
.M_F_Msg_N{background-color:rgb(255,255,200,0.8);}
.M_F_Msg_N:before{
	content:"\f0da";

	font-family:"Font Awesome 5 Free";
	font-size:24px;
	font-weight:700;
	
	margin-right:10px;
}

/* Task Notifications */
.M_F_Msg_TN{background-color:rgb(255,255,200,0.8);}
.M_F_Msg_TN:before{
	content:"\f12a";

	font-family:"Font Awesome 5 Free";
	font-size:24px;
	
	margin-right:10px;
}





/*#########################################################################################

	Confirmation
	
#########################################################################################*/
#M_Confirmation_Overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	
	background-color:rgba(255,255,255,0.8);
	
	display:none;
}

#M_Confirmation{
	width:300px;
	margin:10% auto;
	border-radius:5px;
	box-shadow:1px 1px 5px 1px #777;
	
	background-color:#FFF;
	position:relative;
}

#M_Confirmation>header{
	border-radius:5px 5px 0 0;
	background-color:#EEE;
}

#M_Confirmation h6{
	margin:0;
	padding:10px 15px 8px;
	
	font-size:24px;
	color:#777;
	text-shadow:1px 1px 1px white;
}

#M_C_question{margin-top:0;}

#M_C_close{
	font-size:32px;
	color:#000;
	text-shadow:1px 1px 1px white;
	
	position:absolute;
	top:8px;
	right:12px;
	
	transition:color 500ms;
}

#M_C_close:hover{
	color:red;
	cursor:pointer;
}

#M_Confirmation>div{padding:16px;}
#M_C_question{margin:0 0 16px;}






/*#########################################################################################

	Universal Button
	
#########################################################################################*/
.M_btn{
	min-width:150px;

	margin:10px;
	padding:10px;
	border:0;
	border-radius:3px;
	box-shadow:1px 1px 1px 1px #555;

	font-family: 'Amiko', sans-serif;
	font-size:16px;
	text-align:center;
	
	position:relative;
	top:0px;
	left:0px;
	
	background-color:#DEDEDE;
	transition: all 100ms;
}

.M_btn:hover{
	top:1px;
	left:1px;
	box-shadow:-1px -1px 1px 1px #555;
	cursor:pointer;
}

.M_btn.min{
	width:150px;
	margin:10px 0;
}

div.b{
	margin-top:15px;
	display:inline-block;
	background-color:#DDD;
	text-align:center;
}






/*#########################################################################################

	SDB Section Style
	
	This is universal style for form or data display purpose.
	HTML structure should be like this example

	<section class="M_Section">
		<h3>H3 should only use for section title</h3>
		<p>H3+P should only use for description.</p>
		<hr>

		<h4>H4 is the subtitle. Usually used as "label" for input fields. </h4>
		<input value="Please read SDB_Input for SDB styles">
	</section>	
	
#########################################################################################*/
.M_Section{margin-bottom:50px;}
.M_Section_C{margin-bottom:20px;}

.M_Section>h3,
.M_Section_C>h3{
	margin:7px 0 0 0; /* margin:70px 0 0 0; */
	font-size:18px;
	color:#777;
	text-shadow:1px 1px 1px white;
}

.M_Section>h3:first-of-type,
.M_Section_C>h3:first-of-type{margin-top:0;}

.M_Section>h3+p,
.M_Section_C>h3+p{
	margin:0 0 5px 0;
	font-size:13px;
	color:#777;
}

.M_Section>hr,
.M_Section_C>hr{
	width:100%;
	margin-top:0;
	margin-bottom:15px;
	border-bottom:0;
}

.M_Section h4,
.M_SubSection h4,
.M_InlineSubSection h4,
.M_Section_C h4{
	margin:20px 0 5px;
	font-size:14px;
	color:#777;
	text-decoration:underline;
	text-shadow:1px 1px 1px #CCC;
}

.M_Section h4+p,
.M_SubSection h4+p,
.M_InlineSubSection h4+p,
.M_Section_C h4+p{
	margin-top:-5px;
	margin-bottom: 5px;
	font-size:13px;
	color:#777;	
}

.M_Section h4+em,
.M_SubSection h4+em,
.M_InlineSubSection h4+em,
.M_Section_C h4+em{
	margin:0 auto 5px;
	font-size:13px;
	color:#777;	
	display:block;
}

/*=== Compact =====*/
.M_Section_C h4,
.M_Section_C .M_InlineSubSection h4{margin:5px 0; display:inline-block;}

.M_Section_C .M_SubSection h4{margin:5px 0;}

.M_Section_C>hr{margin-bottom:5px;}

/*=== Wrapper =====*/
.M_Section_W{
	border:1px solid #CCC;
	border-radius:5px;
	
	padding:7px 10px;
	
	background-color:#FAFAFA;
}

/*=== Sub Section =====*/
/*.M_SubSection{margin-bottom:50px;}*/

/*=== Inline Sub Section =====*/
.M_SubSection,
.M_InlineSubSection{margin-bottom:5px;}

/*=== Overlay Content Use =====*/
.M_Section_ContentWrapper{
	padding-right:15px;
	overflow:auto;
}

.M_Section_ContentWrapper h4:first-of-type{margin-top:0;}

/*=== Overlay Drag-n-Drop List Use =====*/
.M_Section_DnDWrapper{
	box-shadow: 0 0 3px 1px #BBB inset;
	border-radius:5px;
	overflow:auto;
}
.M_Section_DnDWrapper>ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.M_Section_DnDWrapper>ul>li{
	width: 90%;
    margin: 10px auto;
    padding: 3px 15px;
    border: 1px solid #AAA;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px #888;
	box-sizing: border-box;
    background-color: #FFF;
    user-select: none;
    position: relative;
    transition: background-color 250ms;
}

.M_Section_DnDWrapper>ul>li:hover{
	background-color:#DDD;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.M_Section_DnDWrapper>ul>li:active{    
	cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}