﻿@font-face {
	font-family: "Lato";
	src: url('/App_Themes/Default/Fonts/Lato/Lato-Regular.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-Italic.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-Thin.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-ThinItalic.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-Light.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-LightItalic.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-Black.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-BlackItalic.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-Bold.ttf') format('truetype'),url('/App_Themes/Default/Fonts/Lato/Lato-BoldItalic.ttf') format('truetype');
}

* {
	font-family: Lato,新細明體;
}

.tip_text {
	font-weight: 700;
	font-size: 12pt;
	word-break: break-all;
	display: inline-block;
}

body {
	font-size: 11pt;
	padding-top: 20px;
	background-color: #f4fbeb;
	font-weight: 400 !important;
	text-shadow: #7F7F7F 0.05px 0.05px 0.05px;
	border-radius: 2px;
}

input, select, textarea {
	border-radius: 2px;
}

	input[type=submit]
	{
		color: white;
		background-color: #5689DB;
		padding: 4px 6px 4px 6px;
		border: 1px solid #5689DB;
	}

		input[type=submit]:hover
		{
			color: wheat;
			background-color: #55ACEE;
			padding: 4px 6px 4px 6px;
			border: 1px solid #55ACEE;
		}

.TableMain
{
	width: 300px;
	background-color: whitesmoke;
	margin: 2px auto 2px;
	/*border: 1px solid darkgray;
    border-radius: 4px;*/
	/*border-collapse: separate;*/


}

.TDLeft {
	width: 85px;
	text-align: right;
	padding: 2px 8px 2px 2px;
	/*color: darkblue;*/
	background-color: #D7D7D7;
	margin: 0 0 0 0;
}

.TDRight {
	text-align: left;
	padding: 2px 2px 2px 4px;
	/*color: black;*/
	background-color: #D7D7D7;
	margin: 0 0 0 0;
}

.TableSay
{
	width: 380px;
}

.TableImage
{
	background-color: darkolivegreen;
}

.ImageFace
{
	border: 1px solid white;
	border-radius: 8px;
	height: 32px;
}

	.ImageFace:hover
	{
		border: 1px solid lightgreen;
		border-radius: 8px;
	}

.TableTalk
{
	width: 400px;
	background-color: whitesmoke;
	margin: 2px auto 2px;
	border: 1px solid darkgray;
	border-radius: 4px;
	border-collapse: separate;
}

.Lt
{
	text-align: left;
	color: black;
	vertical-align: top;
	margin: 6px auto 6px 0;
	border-radius: 2px;
}

.ToLt {
    text-align: left;
    color: black;
    border: 1px solid gray;
    background-color: #93ccea;
    padding: 6px 10px 6px 10px;
    margin: 0 2px 0 2px;
    font-size:10pt;
}

.ToLtImg
{
	text-align: left;
	background-color: transparent;
	padding: 0 2px 0 2px;
	margin: 0 2px 0 2px;
}

.ToLtAlarm
{
	text-align: left;
	color: black;
	font-weight: bold;
	border: 2px solid darkgray;
	background-color: lightpink;
	padding: 6px 10px 6px 10px;
	margin: 0 2px 0 2px;
}

.Rt
{
	text-align: right;
	color: gray;
	vertical-align: top;
	margin: 6px 0 6px auto;
	border-radius: 2px;
}

.ToRt {
	text-align: right;
	color: black;
	border: 1px solid green;
	background-color: lightgreen;
	padding: 6px 10px 6px 10px;
	margin: 0 2px 0 2px;
	font-size: 10pt;
}

.ToRtImg
{
	text-align: right;
	background-color: transparent;
	padding: 0 2px 0 2px;
	margin: 0 2px 0 2px;
}

.ToRtAlarm
{
	text-align: right;
	color: black;
	border: 2px solid darkgray;
	background-color: lightpink;
	padding: 6px 10px 6px 10px;
	margin: 0 2px 0 2px;
}

.DataHiding
{
	display: none;
}

.ModalBackground
{
	border: 1px solid #2F4F4F;
	color: White;
	background-color: #000000;
	font-weight: bold;
	opacity: 0.5;
	filter: Alpha(opacity:50);
}

.ModalClosed
{
	color: white;
	background-color: #5689DB;
	padding: 2px 3px 2px 3px;
	border: 1px solid #5689DB;
	border-radius: 2px;
}

	.ModalClosed:hover
	{
		color: wheat;
		background-color: #55ACEE;
		padding: 2px 3px 2px 3px;
		border: 1px solid #55ACEE;
		border-radius: 2px;
	}

@media screen and (max-width: 480px)
{
	.divSize
	{
		font-size: 14px;
	}
}

@media screen and (max-width: 640px)
{
	.divSize
	{
		font-size: 16px;
	}
}

@media screen and (min-width: 1024px)
{
	.divSize
	{
		font-size: 18px;
	}
}
