*{-webkit-appearance: none; box-sizing:border-box; font-family:Arial, helvetica, sans-serif;}
body { f font-size:16px; margin:0; padding:0; text-align:center; color:#ccc; 
			background: #181818 url(../images/pagebg.jpg) repeat center top; 
			background-attachment:fixed !important;}
/* default link color */
a { color:#40c8FF; text-decoration: none; }

/* default link hover color */
a:hover { color:#40c8FF; text-decoration: underline; }
hr { border:1px solid #333; border-bottom-color:#111; height:1px; clear:both; margin:10px 0px;}
h1{ 
	background: #1D3A74 url(https://www.totalweb.gr/assets/images/kataskevi-istoselidon_bg.jpg) no-repeat center top;
	background-attachment: fixed;
	text-align: center;
	padding: calc(10vh + 60px) 5px 10vh 5px;
	color:#fff;
	font-size:42px;
	font-weight:800; 
	text-shadow:1px 1px 5px #000;
	margin:0;
}
h2 { color:#fff; border-bottom:1px solid #444; padding:10px 3px; font-weight:normal;}
h3 { color: #fff; font-size: 16px; padding: 10px;}

/* input,select,textarea{ | font-family:Arial; border-width:0px;  padding:10px; width:70%; background-color:#555; color:#fff; box-shadow:inset 3px 3px 3px #000;}
input[type=button], input[type=submit], input[type=reset] { box-shadow:0 0 0 transparent; width:auto;}
 */
 
 
.button, button, input[type="button"], input[type="reset"], input[type="submit"]{ display: inline-block; padding: 12px 25px; margin:5px; text-align: center; cursor: pointer; background: transparent; color:#fff;  white-space:nowrap; vertical-align:middle;  position:relative; overflow:hidden; z-index:0; border-radius:100px; border-width:0;  text-transform:uppercase; font-size:0.8em; font-weight:bold; line-height:1.8em; } 
.button::before, button::before {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%;  z-index: -2; background-image: linear-gradient(45deg, #48B300, #3467AE); }
	 input[type="button"], input[type="button"], input[type="reset"], input[type="submit"]{ background:linear-gradient(45deg, #48B300, #3467AE);}
.button::after, button::after {content:""; display:block; position:absolute; left:-100%; top:0; width:100%; height:100% !important;  z-index: -1; transition:all 0.3s ease; background:rgba(0,0,0,0.3); }
.button:hover, button:hover {text-decoration: none;}
	input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { opacity:0.85}	
.button:hover::after, button:hover::after {left:0;}
input[type="button"], input[type="reset"] { background-image: linear-gradient( #111, #000);}
.button.small {padding: 6px 15px; font-weight:normal;}

input[type="text"],
	textarea,
	select,
	input[type="color"],
	input[type="password"],
	input[type="date"], 
	input[type="email"],
	input[type="number"] {background-color:rgba(255,255,255,0.85); color:#000; padding:15px 25px; vertical-align:middle; width:100%;border-width:0;  font-size: 16px; margin:2px 0; transition:all 0.3s ease; box-shadow:0 0 0 transparent; border-radius:25px;}
input[type="text"]:focus,
	textarea:focus,
	select:focus,
	input[type="color"]:focus,
	input[type="date"]:focus,
	input[type="email"]:focus,
	input[type="number"]:focus {background-color:rgba(255,255,255,1); box-shadow:0 0 30px #4a92f8}
label {margin:10px; display:inline-block; vertical-align:middle; max-width:calc(100% - 60px); }
textarea {min-height:280px;}
select>option{padding:3px;}
.captcha {width:160px !important;}

input[type="checkbox"],input[type="radio"]{width:20px; height:20px; vertical-align:middle; position:relative; left:auto!important; border:1px solid #fff; border-radius:3px; background:rgba(255,255,255,0.4) no-repeat center center;  transition:all 0.3s ease; }
	input[type="radio"] {border-radius:1000px;}
input[type="checkbox"]::before, input[type="checkbox"]::after{display:none!important; }
input[type="checkbox"]:checked, input[type="radio"]:checked{border-color:transparent; background:#2F66CD url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='11'><path d='M1 7l3 3 9-9' stroke='%23fff' stroke-width='2' fill='none'/></svg>") no-repeat center center; outline:0; }
	 input[type="radio"]:checked {background-image:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><circle cx='7' cy='7' r='3' fill='white' /></svg>")}
input[type="checkbox"]:focus, input[type="radio"]:focus{outline:0;  box-shadow:0 0 30px #4a92f8}
input[type="checkbox"]:disabled, input[type="radio"]:disabled{opacity:0.3; }

select {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='30'%3E%3Cpath d='M23.9604 10L15 18.9227 6.0396 10 5 11.042 15 21l10-9.958L23.9604 10z' fill='%23000000'/%3E%3C/svg%3E"); background-position:center right; background-repeat:no-repeat;}
 
.inline { width:auto !important;} 
img, fieldset { border:None; }
fieldset {  clear:both;  margin:0;  padding:2px 0 2px 0;}
p { line-height:24px;}
.btn, .btn a { display:block; width:134px !important; height:27px; border:none; font-family:Arial, helvetica, sans-serif !important; line-height:27px !important; background:url(../images/button.jpg) top left no-repeat; text-align:center; color:#fff !important; font-weight:bold; text-decoration:none; padding:0; margin:0; float:left; }
form .btn { padding-bottom:4px; }
th { font-weight:bold; text-align:left; padding-left:3.5px; }
.cols{display:table; width:100%;}
.cols>div {display:table-cell;}
.cols:after{content:" "; clear:both; display:clock;}
.cols3>div {width:32%; padding:0.5%; vertical-align:top;}
.cols2>div {width:49%; padding:0.5%; vertical-align:top;}
.container { max-width:1400px; margin:0px auto 0 auto; border:0px solid; text-align:left; }
.fixed {position:fixed; bottom:0; left:0; width:100%; z-index:10;}
#header {background: rgba(0,0,0,0.85); padding:0; min-height:60px; overflow:none; position:fixed; z-index:10; top:0; left:0; width:100%; }
	#header>.container{background: url(../images/logo.png) no-repeat 10px 10px; min-height:60px; background-size:190px auto;}
#footer { height:24px; line-height:24px; overflow:none; margin-bottom:15px; padding: 10px 0; }
#footer div { float:right; }
#logo {  height:60px; display:block; float:left; }
#motto { display:block; float:right; font-size:16px; text-align:center; width:50%; text-align:right;	margin:15px 10px 0px 0px; text-transform:uppercase; line-height:1em; display:none; }
#motto span{ color:#40c8FF; }
#nav {	display:table; 	margin:0; padding:0; float:right;  margin-top:15px; }
#nav li {	display:table-cell;  margin:0; padding:0 10px; list-style-type:none;	list-style-image:none;	list-style:none; border-right: 1px solid #777; border-left: 1px solid #000; text-align:center }
#nav li:first-child {border-left-width:0px}
#nav li:last-child{border-right-width:0px}
#nav li a {padding:5px ; 	color: #bbb;	text-decoration:none;	font-size:16px;display:block;}		
#nav li a span {background-color:#f00; color:#fff; font-size:9px;position:absolute;top:-5px; right:-5px; margin:1px; display:inline-block}
#nav a:hover {	 	color:#fff;	}

/* #nav a.home { background:url(../images/home.gif) 0 5px no-repeat; }
#nav a.new_ticket { background:url(../images/new_ticket.gif) 0 5px no-repeat; }
#nav a.my_tickets { background:url(../images/my_tickets.gif) 0 5px no-repeat; }
#nav a.ticket_status { background:url(../images/ticket_status.gif) 0 5px no-repeat; }
#nav a.log_out { background:url(../images/logout.gif) 0 5px no-repeat; }*/
#mobilenavbtn { display:none; background:url(../images/mobicon.png) no-repeat left center; width:25px; height:25px; margin-top:20px; margin-right:20px; float:right; cursor:pointer}

.content { clear:both;  }
.content form { margin:0; padding:0; }
.content form.status_form fieldset { clear:none; }
.content form label { display:block; width:60px; padding-right:10px; text-align:right; float:left; font-weight:bold; }
.content #bar { width:21px; height:auto; display:block; float:left; }
#ticketform { padding:20px 20px 50px 20px; width:600px; margin:20px auto 20px auto; border:1px solid; }
#loginform { padding:20px 20px 50px 20px; width:400px; margin:20px auto 20px auto; border:1px solid; }
#ticketform input, #ticketform select { width:300px; float:left; }
#loginform input { width:160px; float:left; }
#ticketform label { width:130px; text-align:right; display:block; float:left; padding-right:10px; }
#loginform label { width:130px; text-align:right; display:block; float:left; padding-right:10px; }
#ticketform textarea { width:400px; }
#ticketform .ticketsubmit { margin-left:410px; }
#loginform .ticketsubmit { margin-left:170px; }
.small { font-size:13px; color:#ccc; padding:5px 0;}
.paging {text-align:center;padding:20px 0; width:100%; overflow:auto; white-space:nowrap}
.paging a, .paging span{ border-radius:100px; background-color:#555; padding:5px 10px; color:#aaa; margin-right:10px; font-weight:bold;}
.paging span { background-color:transparent; color:#fff;}
.paging a:hover {text-decoration:none; background-color:#444;  color:#fff;}

/* Buttons  */
/* .button, .button2 { background-color: #4A92F8 !important; background-image: none !important; font-weight:normal; color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;  padding:10px !important; margin-right:10px; cursor:pointer; border-radius:3px;}
.button:hover { text-decoration:none; color:#fff;} */

/* Generic CSS based Icons. use=> <tag class="Icon iconname">text</tag> */
.Icon { width: auto; padding-left:20px; background-position: left center; background-repeat: no-repeat; text-decoration: none; }
a.Icon { }
a.Icon:hover { text-decoration: underline;}
.Icon.Ticket { background:url(../images/icons/ticket.gif) 0 0 no-repeat; }
.Icon.webTicket { background:url(../images/icons/ticket_source_web.gif) 0 0 no-repeat; }
.Icon.emailTicket { background:url(../images/icons/ticket_source_email.gif) 0 0 no-repeat; }
.Icon.phoneTicket { background:url(../images/icons/ticket_source_phone.gif) 0 0 no-repeat; }                
.Icon.otherTicket { background:url(../images/icons/ticket_source_other.gif) 0 0 no-repeat; }
.Icon.attachment { background-image: url(../images/icons/attachment.gif); }
.Icon.file { background-image: url(../images/icons/attachment.gif); }
.Icon.refresh { background-image: url(../images/icons/refresh.gif); }   
.Icon.thread { font-weight: bold; font-size: 1em; background-image: url(../images/icons/thread.gif); }

/* Ticket view (Messages and Responses) */
.tgrid th, .tgrid td {padding:10px;}
#ticketthread .message { margin:10px 0 5px 0; }
#ticketthread .response { margin-bottom:10px; }
.message, .response { border-bottom: none; width:100%; }
.message td, .message th, .response td, .response th {  padding:10px; }
.message tr.header td, .response tr.header td { padding:1px; padding-left:5px; }
.message th, .response th { line-height:24px; font-size:11pt; padding:8px; font-weight:bold; background-color:#444; overflow:hidden; position:relative; }
.response { clear:both;}
.response:after{content:" "; clear:both; display:block;}
.response th { background-color:#454; text-align:right; }
.message th:before, .response th:before,
.message th:after, .response th:after {content: "";
    width: 40px;
    height: 50%;
		background:url(../images/pagebg.jpg) repeat center center;
		background-attachment:fixed;
    right:-20px; 
		top:0;
		transform:skewX(45deg);
		position:absolute;
}
.message th:after {top:auto; bottom:0; transform:skewX(-45deg);}
.response th:before {left:-20px; right:auto; transform:skewX(-45deg); }
.response th:after {left:-20px; right:auto; top:auto; bottom:0;}

.message .info td{ background:  url(../images/icon-user.png) no-repeat top left; height:120px; vertical-align:top ; padding: 10px 30px 50px 10%; overflow:auto; background-size:9% auto;}
.response .info td{ background:  url(../images/icon-staff.png) no-repeat top right; height:120px; vertical-align:top;  padding: 10px 10% 50px 30px;overflow:auto;background-size:9% auto;}

/* Index page */
.big { font-size:13pt; line-height:1.4em; }
.lcol { width:48%; float:left; }
.rcol { width:48%; float:right; }
.clear { clear:both; }
.lcol .btn, .lcol .btn a, .rcol .btn, .rcol .btn a {  font-weight: bold; margin: 5px; border: 1px solid; }
.italic{ font-style:italic;}

/* Other */
.opaq a{opacity:0.2; filter:alpha(opacity=20);cursor:pointer;}
.opaq a:hover{opacity:1; filter:alpha(opacity=100);}

.tgrid, .tgrid td, .tgrid th {  border-color:#444;}
.tgrid th {|color:#FFF;}
.tgrid tr:hover td {  background-color: #393939; }
.row1 td{ border-top:1px solid #444; }
.row2 td{ border-top:1px solid #444;  }
.row1.highlight td,.row2.highlight td {background-color: #393939;}

.balance{ float:right; display:inline;}
.balance span {padding:2px 5px ;border-radius:100px;} 

/* msgs */
.error {  text-decoration: none; border: none;  color: #FF0000; }
.msg {  text-decoration: none; color:#fff; }
#infomessage, #warnmessage, #errormessage, #notification { padding: 0.3em; font-size:13px; border-top: 1px solid; border-bottom: 1px solid; text-align:center; }
#infomessage {border-color: #0f0;color: #0f0;background-color:#343;}
#errormessage {border-color: #f00;color: #f00;background-color:#200}
#warnmessage {border-color: #f80;color: #f80;background-color:#543}
#notification{border-color: #0af;color: #0af;background-color:#023;}

.tgrid2 td {padding:2px 0;}

@media only screen and (max-width: 800px) {	 
	.content {margin:0 10px;}
	#motto {font-size:0em; width:26%; margin-top:25px; line-height:12px;}
	#nav {clear:both;}
	#nav li {padding:0;	}
	#motto>strong {font-size:18px;}
	.cols>div{display:block;}
	.cols2>div, .cols3>div {width:99%; padding:0.5%;}
	.tgrid th:nth-child(6),.tgrid th:nth-child(7), .tgrid th:nth-child(4),
	.tgrid td:nth-child(6),.tgrid td:nth-child(7), .tgrid td:nth-child(4) { display:none;}		
	.lcol, .rcol{ width:100%; float:none; }
	.button, button, input[type=button], input[type=submit], input[type=reset] { width:100%; margin-bottom:10px; margin-right: 0}
	#mobilenavbtn { display:inline-block;}
	#nav { display:none; width:100%; float:none; margin-top:0;}
	#nav li {display:block; width:100%; float:none; border-width: 0 0 1px 0;}
	#nav li a { text-align:center; background-color:#444; margin-top:2px; padding:15px 0; display:block;}
	#nav li a span {position:relative;}
	#footer , #footer div { text-align:center; clear:both; width:100%;}
	h1{padding: calc(5vh + 60px) 5px 5vh 5px; font-size:32px;}
}

@media only screen and (max-width: 480px) {	 
		#motto{display:none;}
	#header { min-height:65px; }
	#header>.container{background-size:200px auto; min-height:65px;}
	#logo{height:auto;}
	h1{padding: calc(3vh + 60px) 5px 3vh 5px; font-size:24px;}
	
	.tgrid2 th, .tgrid2 td{display:block; clear:both; text-align:left; width:100%;  }
		.tgrid2 tr>th:last-child, .tgrid2 tr>td:last-child{ padding-bottom:10px;}
	.tgrid th:nth-child(2), .tgrid th:nth-child(3),
	.tgrid td:nth-child(2), .tgrid td:nth-child(3) { border-top-width: 0px; }
	.tgrid th:nth-child(1), .tgrid th:nth-child(2), .tgrid th:nth-child(3),
	.tgrid td:nth-child(1), .tgrid td:nth-child(2), .tgrid td:nth-child(3){display:inline-block; clear:both; text-align:center; width:100%;}
	
	.balance{float:none; display:block;}
}