@import "reset.css";

html, body { width:100%;height:100%;font-family: 'Open Sans',Helvetica, Arial, sans-serif;font-size:13px; }
body { background-color: #434a54; }

.w60 { width:30px; }
.w90 { width:70px; }

.ta-c { text-align:center; }

.clear { clear:both; }
#header { height:140px; background-color: #3c424b; }
	#logo { padding-top:80px;height:60px;font-size:25px;line-height:60px;text-align:center;color:#fff;font-family: 'Montserrat', sans-serif; }
		#logo span { color:#e9573f; }
	
#support { padding:20px 0;width:1000px;margin:0 auto; }

	#support .notification { padding:10px 20px;color:#fff;margin:0 10px 20px;min-height:20px;line-height:20px;border-radius:3px; }
	#support .notification.success { background-color:#8cc152; }
	#support .notification.error { background-color:#e9573f; }
	#support .notification h3 { font-weight:bold;margin-right:20px;float:left; }
	#support .notification ul { display:inline-block; }
	
	#support #message { width:255px;border-left:5px solid #e9573f;padding:20px;background-color:#fff;margin-bottom:20px;position:relative; }
		#support #message .close { position:absolute;width:10px;height:10px;background: url('../img/icons/px10/cross.png') no-repeat center center;top:20px;right:20px;cursor:pointer; }
		#support #message label { display:block;font-weight:bold;margin-bottom:10px; }
		
	#support .col6 { width:480px;margin:0 10px;float:left; }
		#support .col6 input { border-radius:3px;padding:15px;width:450px;height:24px;margin-bottom:20px;background-color:#fff;border:none; }
		#support .col6 input:read-only { background:#ccc; }
		#support .col6 textarea { border-radius:3px;padding:15px;min-width:450px;max-width:450px;width:450px;min-height:245px;height:245px;margin-bottom:20px;background-color:#fff;border:none; }

	#support .footer { margin:0 auto;text-align:center; }
	#support button { border-radius:3px;width:300px;height:46px;background-color: #e9573f;border: none;color: #fff;font-size: 12px;text-transsupport:uppercase;letter-spacing:1px;cursor:pointer;font-weight:bold;margin:0 auto; }

.fastdrop { border:2px dotted #ccc;background-color:#E5E5E5;padding:20px;border-radius:5px;text-align:center;font-weight:bold;color:#aaa;cursor:pointer;margin-bottom:15px; }
	.statusbar { margin:0 10px; padding:10px 0 20px;border-top:1px solid #ccc;color:#fff; }
	.statusbar .filename { font-weight:bold; }
	.statusbar .progressBar { height:4px;padding:0;margin-top:7px; }
	.statusbar .progressBar div { background-color:#DD4A29;height:4px;line-height:22px;font-size:11px; }
	.statusbar .filesize { width:70px;height:16px;line-height:16px;display:inline-block;font-size:11px;float:right;text-align:right;padding-bottom:4px; }
	.statusbar .abort { width:16px;height:16px;display:inline-block;float:right;cursor:pointer;background: url('../img/icons/px16/cross-script.png');margin:2px 0 0 5px; }
	
.block h2 { height: 40px; line-height: 40px; padding: 0 15px; color: #fff; text-align: center; font-weight: bold; background-color: #e9573f; }
#ticket .block .block_in { background-color:#fff;margin-bottom:20px;padding:10px;line-height:18px; }

#ticket .line { margin-top:5px; }
#ticket .line label { font-weight:bold; }
.status_flag { padding:3px 7px;font-size:10px;border-radius:3px;color:#fff;background-color:#ccc;white-space: nowrap; }
	.status_flag.red { background-color:#e9573f; }
	.status_flag.yellow { background-color:#e9ac3f; }
	.status_flag.green { background-color:#8cc152; }
	.status_flag.blue { background-color:#0056ce;color:#fff !important; }
	
#support table { width: 100%; border-collapse: collapse; }
#support table th { font-weight:bold; }
#support table th, #support table td { padding: 7px; border-bottom: 1px solid #ccc; font-size: 13px; background: #fff; }
#files_ticket tr:hover td{ background-color:#eee;}
.files a { color:#000;text-decoration:none; }
.files a:hover { text-decoration:underline; }
.files .remove { display: none; width: 12px; height: 12px; cursor: pointer; margin-left: 5px; float: right; background: url('../img/icons/px16/cross-script.png'); background-size: auto; background-size: 12px; position: relative; top: 2px; }
.files td:hover .remove { display: inline-block; }

@media (max-width: 800px) {
	.wrapper{ max-width: 100%; }
	#support{ width: 380px; max-width: 100%; }
	#support .col6{ float: none; margin: 0 auto; display: block; max-width: 100%; }
	#support .col6:first-child{ margin-bottom: 20px; }
	#support .col6 input{ max-width: calc(100% - 30px); }
	#support .col6 textarea{ max-width: calc(100% - 30px); min-width: unset; }
	#support button{ width: 100%; }
}