/*
/*
=====================================================================
Common formatting
=====================================================================
*/

html
{
    width: 100%;
    height: 100%;
	height: -webkit-fill-available;
    margin: 0;
    padding: 0;
}

body
{
    height:100%;
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
	min-height: 100vh;
	min-height: -webkit-fill-available;
}

::placeholder,
::-ms-input-placeholder,
::-webkit-input-placeholder
{ 
  color: #B6B6B4;
  opacity: 1
}

p
{
    margin: 0;
}

/*
===================================================================== 
Default font (Language Based)
=====================================================================
*/

*:lang(en)
{
    font-family:  Verdana, Arial, Segoe, Roboto, sans-serif; 
    font-size: 12px;
}

*:lang(zh-HK)
{
    font-family: Microsoft JhengHei UI, PMingLiu, PingFang TC, PingFang HK, Noto Sans CJK, sans-serif;
    font-size: 13px;
	font-weight: normal;
}

/*
===================================================================== 
HTML Quirk Fix
=====================================================================
*/

*,
*:before,
*:after 
{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.clearfix:after
{
    content: "";
    display: table;
    clear: both;
}


/*
===================================================================== 
Window Frame Style
=====================================================================
*/

.nav_menu_btn
{
	display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; height: inherit; border-right: 2px solid #E5E4E2; cursor: pointer;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

.nav_menu_btn > img
{
	width: 25px;
}

#org_logo
{
	flex-direction: column; justify-content: center; align-items: center;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

#org_logo > img
{
	height: 45px; padding: 0 0 0 35px; object-fit: contain;
}

#org_name
{	
	flex-direction: column; justify-content: center; align-items: flex-start; font-weight: bolder;
	margin: 0 25px 0 15px; color: #474644; font-size: 1.3rem;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

.quick_access_btn
{
	display: flex; flex-direction: row; justify-content: center; align-items: center; height: inherit; cursor: pointer; margin: 0 10px 0 10px;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

.quick_access_btn > img
{
	width: 25px;
}

.quick_access_with_alert_btn
{
	display: flex; flex-direction: row; justify-content: center; align-items: center; height: inherit; cursor: pointer; margin: 0 10px 0 10px;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

.quick_access_with_alert_btn > div:nth-child(2)
{
	height: 5px;
	width: 5px;
	background-color: #FF0000;
	border-radius: 50%;
	display: none;
}

#user_info_plane
{
	display: flex; flex-direction: row; justify-content: center; align-items: center; height: inherit; cursor: pointer; padding: 0 10px 0 25px;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

#user_info_plane > div:nth-child(1)
{
	display: flex; flex-direction: column; justify-content: center; align-items: center; height: inherit; margin-right: 10px;
}

#user_info_plane > div:nth-child(1) > img
{
	width: 25px;
}

#user_info_plane > div:nth-child(2)
{
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: inherit;
}

#user_info_plane > div:nth-child(2) > div:nth-child(1)
{
	display: flex; flex-direction: row; justify-content: center; align-items: flex-start; font-weight: bolder; white-space: nowrap;
}

#user_info_plane > div:nth-child(2) > div:nth-child(2)
{
	display: flex; flex-direction: row; justify-content: center; align-items: flex-start; font-size: 0.9rem; color: #777674; white-space: nowrap;
}

#fragment_content
{
	position: absolute; top: 80px; left: 0; right: 0; bottom: 0; overflow: auto; background: #FFFFFF; box-shadow: inset 0 0 5px #A2A2A0;
}

.place_bar
{
	display: flex; flex-direction: row; width: inherit; height: 55px; background: #008499; padding: 0 25px; box-shadow: inset 0 5px 5px #007085;
}

.place_bar > div:nth-child(1)
{
	display: flex; flex-direction: row; justify-content: flex-start; height: inherit;
}

.place_bar > div:nth-child(1) > div
{
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-weight: bold; font-size: 1.3rem; color: #FFFFFF; white-space: nowrap;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

.status_bar
{
	display: flex; flex-direction: row; width: inherit; height: 55px; background: #EBEBEB; padding: 0 25px; border-bottom: 1px solid #C3C3C3; white-space: nowrap;
}

.status_bar > div:nth-child(1)
{
	display: flex; flex-direction: row; justify-content: flex-start; height: inherit;
}

.status_bar > div:nth-child(1) > div:nth-child(1)
{
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #414141;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

.status_bar > div:nth-child(2)
{
	display: flex; flex-direction: row; justify-content: flex-end; align-items: center; height: inherit; margin-left: auto;
}

.status_bar_blue_btn
{
	outline: none; appearance: none; text-decoration: none; cursor: pointer; white-space:nowrap;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
	min-width: 100px; height: 32px; padding: 0 25px 0 25px; margin: 0 5px;
	font-size: 0.8rem; background: #009ED4; color: #FFFFFF; border: 0; border-radius: 3px;
}

.status_bar_blue_btn:hover
{
	background: #1EBCF2;
}

.status_bar_green_btn
{
	outline: none; appearance: none; text-decoration: none; cursor: pointer; white-space:nowrap;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
	min-width: 100px; height: 32px; padding: 0 25px 0 25px; margin: 0 5px;
	font-size: 0.8rem; background: #32B2B2; color: #FFFFFF; border: 0; border-radius: 3px;
}

.status_bar_green_btn:hover
{
	background: #50D0D0;
}

.status_bar_red_btn
{
	outline: none; appearance: none; text-decoration: none; cursor: pointer; white-space:nowrap;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
	min-width: 100px; height: 32px; padding: 0 25px 0 25px; margin: 0 5px;
	font-size: 0.8rem; background: #DB5844; color: #FFFFFF; border: 0; border-radius: 3px;
}

.status_bar_red_btn:hover
{
	background: #F97662;
}


.status_bar_violet_btn
{
	outline: none; appearance: none; text-decoration: none; cursor: pointer; white-space:nowrap;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
	min-width: 100px; height: 32px; padding: 0 25px 0 25px; margin: 0 5px;
	font-size: 0.8rem; background: #800080; color: #FFFFFF; border: 0; border-radius: 3px;
}

.status_bar_violet_btn:hover
{
	background: #F97662;
}

.status_bar_default_btn
{
	outline: none; appearance: none; text-decoration: none; cursor: pointer; white-space:nowrap;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
	min-width: 100px; height: 32px; padding: 0 25px 0 25px; margin: 0 5px;
	font-size: 0.8rem; background: #FFFFFF; color: #000000; border: 1px solid #C3C3C3; border-radius: 3px;
}

.status_bar_default_btn:hover
{
	background: #B6B6B4;
	color: #FFFFFF;
}