*{
	
	font-family: arial,sans-serif;

}

.top
{
	vertical-align:top !important;
}

.middle
{
	vertical-align:middle !important;
}

.bottom
{
	vertical-align:bottom !important;
}

.left
{
	text-align:left !important;
}

.right
{
	text-align:right !important;
}

.center
{
	text-align: center !important;
}

.clickanimation
{
  animation-name: example;
  animation-duration: 4s;
}


@keyframes example {
  from {padding: 1px;}
  to {padding: 20px;}
}


.invisible
{
	position:relative;
	
	display:none !important;
}



.half
{
	position:relative;
	width:50%;
}


.fullheight
{
	height:100%;
}

.third
{
	position:relative;
	width:33%;
}


.quarter
{
	position:relative;
	width:25%;
}


.abox
{
	display:inline-block;
}

.top
{
	vertical-align:top;
}

.middle
{
	vertical-align:middle;
}

.bottom
{
	vertical-align:bottom;
}

.left
{
	text-align:left;
}

.right
{
	text-align:right;
}



	
	
@media screen and (min-width: 771px) {
  
  
  	div.request_date
  	{
		position:relative;
		
		color:plum;
		
		text-shadow: -1px -1px violet;
	
		font-size: 12px;
		
		border-bottom: 1px dotted plum;	   	
  	}
  
  	div.request_box
  	{
		position:relative;
		
		border-radius:10px;
		
		display: inline-block;
		
		padding:5px 10px;
		
		color: indigo;

		border:2px solid blueviolet;
		
		background:thistle;
		 	
  	} 

	div.remark
	{
		position: relative;
		
		background:lavender;
		
		color: plum;
			
	}
	
	div.answer_line
	{
	
		position: relative;
		
		margin:20px auto;	
		
		padding:5px 5px 20px 5px;
		
		border-bottom: 1px dotted thistle;
	}
	
				
	div.answer_simple_line
	{
		position: relative;
		
		margin:10px auto;	
		
		padding:5px 5px 10px 5px;
		

	}
	
	
	div.request_line
	{
	
		position: relative;
		
		margin:10px auto;	
		
		padding:5px;
	}
		
		
  	#prompt_typing
  	{
		position:relative;
		
		width:calc(100% - 10px);
		width:-webkit-calc(100% - 10px);
		
		height:calc(100% - 10px);
		height:-webkit-calc(100% - 10px);
		
		padding:5px;
		
		color: white;
		  	
  	}
  	
	#prompt_footer
	{
		position: absolute;
		
		bottom: 0px;
		
		right: 0px;
		
		z-index: 1200;
					
	}
	
	img.prompt_footer
	{
		position: relative;
		
		max-height: 32px;
			
		max-width: 32px;	

		cursor: pointer;
		
		margin:5px 10px;
	}
	
	
  	#promt
  	{
		position:relative;
		
		height:120px;
		
		 background: #0f2b42;
		 
		 
		 
	}
	#maincontent
	{
		position: relative;
		
		height: calc(100% - 160px);
		height: -webkit-calc(100% - 160px);
		
		
	}

	#basdepage
	{
		position: relative;
		
		height: 50px;
		
		background:silver;
			
	}	
	
	
	body{
	
	
	}
	
	#menubar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		min-height:30px;
		z-index:500;
		background:rgba(30,144,255,1);
		
		box-shadow:0px 0px 2px 1px transparent;
	}
	
	#menubar:hover
	{
		
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#general
	{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	
	}
	
	#main
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
	
	}
	
	.page
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
		
	
	}
	
	
	
	img.submenu
	{
		position: relative;
		
		max-height: 32px;
		
		max-width: 32px;
		
		vertical-align: middle;
	}
	
	
	label.submenu
	{
		position: relative;
		
		vertical-align: middle;
	}
	
	
	
	span.submenu
	{
		position: relative;
		
		vertical-align: middle;
	}
	
	
	div.submenu
	{
		position: relative;
		
		display: inline-block;
		
		vertical-align: middle;
		
		padding:5px;
		
		margin:0px 10px;
		
		cursor: pointer;
		
		
		user-select: none;
		
		-webkit-user-select: none;
		
	}
	
}
/*****************************************************************************************************/

/* Tablet **/
@media screen and (max-width: 770px) and (min-width: 361px) {
  
  
  
  	#prompt_typing
  	{
		position:relative;
		
		width:calc(100% - 10px);
		width:-webkit-calc(100% - 10px);
		
		height:calc(100% - 10px);
		height:-webkit-calc(100% - 10px);
		
		padding:5px;
		
		  	
  	}
  	
	#prompt_footer
	{
		position: absolute;
		
		bottom: 0px;
		
		right: 0px;
		
		z-index: 1200;
					
	}
	
	img.prompt_footer
	{
		position: relative;
		
		max-height: 32px;
			
		max-width: 32px;	

		cursor: pointer;
		
		margin:5px 10px;
	}
	
	#promt
  	{
		position:relative;
		
		height:70px;
		
		 background: #efefef;
		 
	}
	#maincontent
	{
		position: relative;
		
		height: calc(100% - 160px);
		height: -webkit-calc(100% - 160px);
		
		
	}

	#basdepage
	{
		position: relative;
		
		height: 50px;
		
		background:silver;
			
	}	
	
	
	body{
	
	
	}
	
	#menubar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		min-height:30px;
		z-index:500;
		background:rgba(30,144,255,1);
		
		box-shadow:0px 0px 2px 1px transparent;
	}
	
	#menubar:hover
	{
		
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#general
	{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	
	}
	
	#main
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
	
	}
	
	.page
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
		
	
	}
	
	
	
	img.submenu
	{
		position: relative;
		
		max-height: 32px;
		
		max-width: 32px;
		
		vertical-align: middle;
	}
	
	
	label.submenu
	{
		position: relative;
		
		vertical-align: middle;
	}
	
	
	
	span.submenu
	{
		position: relative;
		
		vertical-align: middle;
	}
	
	
	div.submenu
	{
		position: relative;
		
		display: inline-block;
		
		vertical-align: middle;
		
		padding:5px;
		
		margin:0px 10px;
		
		cursor: pointer;
		
		
		user-select: none;
		
		-webkit-user-select: none;
		
	}
	
}

/* Mobile */
@media only screen and (min-width: 230px)  and (max-width: 360px) {

	
	
  	#prompt_typing
  	{
		position:relative;
		
		width:calc(100% - 10px);
		width:-webkit-calc(100% - 10px);
		
		height:calc(100% - 10px);
		height:-webkit-calc(100% - 10px);
		
		padding:5px;
		
		  	
  	}
  	
	#prompt_footer
	{
		position: absolute;
		
		bottom: 0px;
		
		right: 0px;
		
		z-index: 1200;
					
	}
	
	img.prompt_footer
	{
		position: relative;
		
		max-height: 32px;
			
		max-width: 32px;	

		cursor: pointer;
		
		margin:5px 10px;
	}
	
	#promt
  	{
		position:relative;
		
		height:70px;
		
		 background: #efefef;
		 
	}
	#maincontent
	{
		position: relative;
		
		height: calc(100% - 160px);
		height: -webkit-calc(100% - 160px);
		
		
	}

	#basdepage
	{
		position: relative;
		
		height: 50px;
		
		background:silver;
			
	}	
	
	
	body{
	
	
	}
	
	#menubar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		min-height:30px;
		z-index:500;
		background:rgba(30,144,255,1);
		
		box-shadow:0px 0px 2px 1px transparent;
	}
	
	#menubar:hover
	{
		
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#general
	{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	
	}
	
	#main
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
	
	}
	
	.page
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
		
	
	}
	
	
	
	img.submenu
	{
		position: relative;
		
		max-height: 32px;
		
		max-width: 32px;
		
		vertical-align: middle;
	}
	
	
	label.submenu
	{
		position: relative;
		
		vertical-align: middle;
	}
	
	
	
	span.submenu
	{
		position: relative;
		
		vertical-align: middle;
	}
	
	
	div.submenu
	{
		position: relative;
		
		display: inline-block;
		
		vertical-align: middle;
		
		padding:5px;
		
		margin:0px 10px;
		
		cursor: pointer;
		
		
		user-select: none;
		
		-webkit-user-select: none;
		
	}
	
}
 
 
/* Mobile */
@media only screen and (max-width: 229px) {
	
	
	
	
  	#prompt_typing
  	{
		position:relative;
		
		width:calc(100% - 10px);
		width:-webkit-calc(100% - 10px);
		
		height:calc(100% - 10px);
		height:-webkit-calc(100% - 10px);
		
		padding:5px;
		
		  	
  	}
  	
	#prompt_footer
	{
		position: absolute;
		
		bottom: 0px;
		
		right: 0px;
		
		z-index: 1200;
					
	}
	
	img.prompt_footer
	{
		position: relative;
		
		max-height: 32px;
			
		max-width: 32px;	

		cursor: pointer;
		
		margin:5px 10px;
	}
	
	#promt
  	{
		position:relative;
		
		height:70px;
		
		 background: #efefef;
		 
	}
	#maincontent
	{
		position: relative;
		
		height: calc(100% - 160px);
		height: -webkit-calc(100% - 160px);
		
		
	}

	#basdepage
	{
		position: relative;
		
		height: 50px;
		
		background:silver;
			
	}	
	
	
	body{
	
	
	}
	
	#menubar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		min-height:30px;
		z-index:500;
		background:rgba(30,144,255,1);
		
		box-shadow:0px 0px 2px 1px transparent;
	}
	
	#menubar:hover
	{
		
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#general
	{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	
	}
	
	#main
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
	
	}
	
	.page
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
		
	
	}
	
	
	
	img.submenu
	{
		position: relative;
		
		max-height: 32px;
		
		max-width: 32px;
		
		vertical-align: middle;
	}
	
	
	label.submenu
	{
		position: relative;
		
		vertical-align: middle;
	}
	
	
	
	span.submenu
	{
		position: relative;
		
		vertical-align: middle;
	}
	
	
	div.submenu
	{
		position: relative;
		
		display: inline-block;
		
		vertical-align: middle;
		
		padding:5px;
		
		margin:0px 10px;
		
		cursor: pointer;
		
		
		user-select: none;
		
		-webkit-user-select: none;
		
	}
	
}