html {
  overflow-y:scroll; 
} 
body {padding:0em; margin:2em 3em; background-color:#fff;}

table.top_toolbar td,
table.toolbar td  {font-size:8.5pt;}

.clickable {cursor:pointer;}
.float_left {float:left;}
.float_right {float:right;}
.clear {clear:both; //font-size:0px; //line-height:0px; //height:0px;}
.wide {width:100%;}
.half {width:50%;}
.hhalf {width:50%; display:none;}
.nowrap {white-space:nowrap;}

.link {color: #3565AB; text-decoration:underline; cursor:pointer;}
.dlink {color: #3565AB; text-decoration:underline; /*border-bottom:1px dashed #3565AB;*/ cursor:pointer;}
.gray {color:gray !important; border-bottom-color:gray;}
.white {color:white !important; border-bottom-color:white;}
.red {color:#c33 !important; border-bottom-color:#c33;}

/* Forms -------------------------------------------------------------------- */
.form {margin:0px; padding:0px; font-size:8.5pt;}
.form_next_follow 

.form textarea {vertical-align: top;}
.form input,
.form label,
.form select,
.form button {
  font-size:8.5pt;
  vertical-align: middle; 
  overflow: visible; 
}
.form input[type='button'],
.form input[type='submit'],
.form input[type='reset'] {padding-left:.5em; padding-right:.5em; margin-right:1em;}

.form input {scrollbar-face-color: expression(runtimeStyle.scrollbarFaceColor = '#fff', className += (className) ? ' type-'+type : 'type-'+type);}
.form input.type-reset,
.form input.type-submit,
.form input.type-button {padding-left:1em; padding-right:1em; margin-right:1em;}

.form dl {margin:0px; clear:left; width:100%; zoom:1;}
.form dd {margin:0px 0px 1em 0px;}

.form dl.row {clear: both; width:100%; overflow:visible;}
.form dl.row dt {
  text-align: right;
  display: block;
  clear: left;
  float: left;
  margin-right: -10em;
  margin-bottom:1em;
  width: 9.5em;
  zoom:1;
  }
.form dl.row dd {margin-left: 10em; zoom:1;}

.form dl.row dt label {vertical-align:top; display:block; padding-top:3px; }
.form dl.row dd div span {vertical-align:middle;}

.form .error {color:#c33;}
.form .wide {width: 100%!important; //width:99%!important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box;}


/* Backgrounds -------------------------------------------------------------- */
.bg-c_paleblue  {background-color:#a5bce8;}
.bg-c_lavender  {background-color:#d8e1f4;}
.bg-c_orange		{background-color:orange;}
.bg-c_silver    {background-color:#ebedf2;}
.bg-c_white	    {background-color:white;}
.bg-odd,
.from_user			{background-color:#eef2fb;}
.from_support		{background-color:#fdf3d2;}

/* Sprite PNG32bit ---------------------------------------------------------- */
/*  Usage:
    <ins class="sprite32bit size16x16 i_del"></ins>
*/
.sprite32bit {
  position: relative; overflow: hidden; display:block;
  background-color:transparent;
  background-image:url(/_i/sprite32bit.png); background-repeat: no-repeat;
  filter:expression((runtimeStyle.backgroundImage != 'none') ? (function(o){var ins=o.appendChild(document.createElement('i')); ins.runtimeStyle.top=o.currentStyle.backgroundPositionY; ins.runtimeStyle.left=o.currentStyle.backgroundPositionX; ins.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+o.currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=crop)'; o.runtimeStyle.filter=''; o.runtimeStyle.backgroundImage='none'})(this) : runtimeStyle.filter);
  }
.sprite32bit i {width: 96px; height: 96px; position: absolute; top: 0px; left: 0px; display: block; background:none;}
.size16x16 {width:16px; height:16px;}

.i_status_open {background-position:-48px 0px;}
.i_status_done {background-position:-32px 0px;}
.i_status_wait {background-position:-16px 0px;}
.i_status_hold {background-position:-64px 0px;}
.i_status_stop {background-position:-80px 0px;}
.i_clip {background-position:-16px -16px;}
.i_enter {background-position:-48px -16px;}
.i_edit {background-position:-48px -32px;}
.fade_right {background-position:-16px -64px; width:32px; height:32px; position:absolute; left:auto; right:0px; //right:-1px; top:50%; margin-top:-16px;}
.bg-odd .fade_right {background-position:-48px -64px; }
img.i_status_wait {width:16px; height:16px; border:none; position: relative; display:block;}

div.fade {position:relative; white-space:nowrap; overflow:hidden; //width:100%;}

/* Tables ------------------------------------------------------------------- */
table.data {width:100%; empty-cells:show; border-collapse:collapse; border:hidden;}
table.data td {vertical-align:top; padding:6px 10px; font-size:8.5pt;}

table.fixed {width:100%; table-layout:fixed;}
table.fixed td {white-space:nowrap; overflow:hidden;}
table.fixed div.fade {margin-right:-10px;}

table.data thead td {border-bottom:1px solid black; padding-top:8px;}

table.data td.r {text-align:right; padding-left:0px;}
/* table.data td div.fade {//padding-right:16px;} */
table.data td .i_clip {position:absolute; left:auto; right:0px; top:50%; margin-top:-8px; z-index:2;}

/* Tabs --------------------------------------------------------------------- */
/*  Usage:
    <ul class="tabs">
      <li class="current"><span>Selected Item <var>number</var></span></li>
      <li class="current"><span><a href="">Selected Item with link <var>number</var></a></span></li>
      <li><span><a href="">Item <var>number</var></a></span></li>
    </ul>
*/
ul.tabs,
ul.tabs li,
ul.tabs span {background-image:url(/_i/tabs.png); background-repeat:no-repeat;}
ul.tabs {margin:0px; padding:0px 0px 4px 0px; list-style-type:none; width:100%; overflow:hidden; background-repeat:repeat-x; background-position:0px 100%;}
ul.tabs li {float:left; white-space:nowrap; background-position:0px -62px; margin:0px 1px 0px 0px; padding:0px 0px 0px 8px;}
ul.tabs span {display:block; background-position:100% -62px; padding:6px 8px 5px 0px; font-weight:bold;}
ul.tabs a {display:block; text-decoration:none;}
ul.tabs var {color:gray; font-weight:normal; font-style:normal;}
ul.tabs li.current {background-position:0px 0px;}
ul.tabs li.current span {background-position:100% 0px; color:white;}
ul.tabs li.current var {color:#d8e1f4;}


/* Rounded frame ------------------------------------------------------------ */
/*  Usage:
    <div class="round_frame" style="background:red; width:10em;">
      <ins class="tl sprite32bit"></ins><ins class="tr sprite32bit"></ins>
      <div class="content">Block content</div>
      <ins class="bl sprite32bit"></ins><ins class="br sprite32bit"></ins>
    </div>
*/
.round_frame {position:relative; zoom:1;}
.round_frame ins.tl,
.round_frame ins.tr,
.round_frame ins.bl,
.round_frame ins.br {z-index:1; position: absolute; display: block; overflow: hidden; width:3px; height:3px; font-size:0; line-height:0;}
.round_frame ins.tl {left:0px; top:0px; background-position:-16px -48px;}
.round_frame ins.tr {right:0px; top:0px; left:auto; background-position:-29px -48px;}
.round_frame ins.bl {left:0px; bottom:0px; background-position:-16px -61px;}
.round_frame ins.br {right:0px; bottom:0px; left:auto; background-position:-29px -61px;}
.round_frame ins.tr, .round_frame ins.br {//right: expression(parentNode&&parentNode.offsetWidth % 2?-1:0);}
.round_frame ins.br, .round_frame ins.bl {//bottom: expression(parentNode&&parentNode.offsetHeight % 2?-1:0);}
.round_frame .content {position:relative; zoom:1;}

.from_support .round_frame ins.tl,
.from_support .round_frame ins.tr,
.from_support .round_frame ins.bl,
.from_support .round_frame ins.br {width:5px; height:5px;}
.from_support .round_frame ins.tl {background-position:-32px -48px;}
.from_support .round_frame ins.tr {background-position:-43px -48px;}
.from_support .round_frame ins.bl {background-position:-32px -59px;}
.from_support .round_frame ins.br {background-position:-43px -59px;}
 
/* -------------------------------------------------------------------------- */
.table_legend {margin-top:1px;}
.table_legend ul.content {margin:0px; padding:0px; list-style-type:none; overflow:hidden; width:100%; font-size:8.5pt; }
.table_legend li {float:left; margin:0px; padding:4px 0px 4px 28px; position:relative; color:gray; vertical-align:middle; height:1.75em; line-height:1.75em;}
.table_legend .size16x16 {position:absolute; top:50%; margin-top:-8px; left:10px;}
.table_legend .page_nav {float:left; white-space:nowrap; color:black; padding-left:60px; padding-right:1em;}
.table_legend .page_nav a {padding:0px 4px;}
.table_legend .page_nav a.current {background-color:#3565AB; color:white; text-decoration:none; font-weight:bold;}
.table_legend li.find {float:right; margin:0px; padding-left:0em; padding-right:24px;}
.table_legend li.find input {width:6em;}
.table_legend li.find .size16x16 {left:auto; right:7px;}

.toggle_form {width:100%; overflow:hidden; margin-bottom:3em;}
.round_frame.button {padding:8px 10px; margin-top:1px; float:left;}
.round_frame.button .content {position:relative; padding:0px; //float:left; font-weight:bold; line-height:normal;}
.round_frame.button .content.icon_left {margin-left:22px;}
.round_frame.button .content.icon_left .size16x16 {position:absolute; left:-22px; top:50%; margin-top:-8px;}
.toggle_form .form {clear:both; padding:10px;}
.toggle_form_active .button .bl,
.toggle_form_active .button .br {display:none;}
.toggle_form_active .form {display:block;}
.toggle_form .form dl.row dt {margin-right:-12em; width:11.5em; }
.toggle_form .form dl.row dd {margin-left:12em;}

div.attachments {margin:0px; padding:0px 1em .75em 1em; zoom:1; overflow:hidden;}
div.attachments div {margin:.75em 0px 0px; padding:0px 20px; position:relative; zoom:1; line-height:2em; height:2em; vertical-align:middle;}
div.attachments div input {vertical-align:middle; margin-right:.5em;}
div.attachments div .size16x16 {position:absolute; top:4px; left:0px; }

div.message {padding:10px; border-top:1px solid white; border-bottom:1px solid #a5a7aa; font-size:8.5pt; zoom:1;}
/*
div.message .content {margin:0px; padding:1em 2em 1em 2em;}
*/
div.message .content {margin:0px; padding:.5em 1em .5em 1em;}
div.message dl.details {width:100%; overflow:hidden; margin:0px; padding:0px;}
div.message dl.details dt {
	color: gray;
  text-align: right;
  display: block;
  float: left;
  margin:0px -5em 0em 0px;
	padding:0px 0px 1px;
  /* width: 4.5em; */
  width: 3.2em;
  zoom:1;
  }
div.message dl.details dd {margin:0px 0px 0em 3.75em; zoom:1; padding:0px 0px 1px;}
div.message div.message_body {margin:0; padding:.5em 0px 0px 0px;}

ul.attachments {margin:.75em 0px 0em 0px; padding:0px; list-style-type:none;}
ul.attachments li {position:relative; margin:0px 0px .25em 0px; padding:0px 0px 0px 20px; zoom:1;}
ul.attachments li .size16x16 {position:absolute; left:0px; top:50%; margin-top:-8px;}

.form_account_setting .form {padding:2em;}
.form_account_setting .form dl.row dt {margin-right: -13em; width: 12.5em;}
.form_account_setting .form dl.row dd {margin-left: 13em;}
.form_account_setting .next_form_follow {padding:2em 2em 0em;}

form.find_ticket {padding:.5em .5em 1em;}
form.find_ticket table {margin:0px;}
form.find_ticket td {vertical-align:bottom; padding:0px 5px;}
form.find_ticket label {display:block; margin:.25em 0px;}
form.find_ticket select {//margin:1px 0px;}
form.find_ticket input[type="button"] {margin:0px;}
form.find_ticket input.type-button {margin:0px;}

div.admin_tickets_layout {position:relative; zoom:1;}
div.admin_tickets_layout div.left_col {position:absolute; width:14em; top:0px; left:0px;}
div.admin_tickets_layout div.right_col {margin-left: 15em; zoom:1;}

ul.side_nav {margin:0px; padding:0px;}
ul.side_nav li {position:relative; margin:0px 0px .5em 0px; padding:0px; list-style-type:none; background-color:#ebedf2;}
ul.side_nav li div.content {padding:8px 10px; font-weight:bold;}
ul.side_nav li div.content var {top:8pt; margin-top:-2pt; font-weight:normal;}
ul.side_nav ul {z-index:2; position:relative; display:none; margin:0px; padding:0px; border:1px solid #a5bce8; border-top-color:#8496ba;}
ul.side_nav ul li {background-color:white; margin:0px; padding:4px 9px; font-size:8.5pt; border-top:1px solid #eee;}
ul.side_nav ul li.selected {background-color:#d8e1f4; border-top-color:#d8e1f4;}
ul.side_nav ul li.over {background-color:#ffd;}
ul.side_nav var {font-style:normal; color:gray; position:absolute; left:auto; top:8.5pt; margin-top:-4.5pt; right:10px; font-size:8.5pt;}

ul.side_nav li.selected {background-color:#a5bce8;}
ul.side_nav li.selected ul {display:block;}
ul.side_nav li.selected div.content {color:white; padding-bottom:6px;}
ul.side_nav li.selected div.content var {color:#d8e1f4;}
ul.side_nav li.selected div.content a {color:white !important;}
ul.side_nav li.selected ins.bl,
ul.side_nav li.selected ins.br {z-index:0;}

ul.ticket_header {margin:0px; padding:0px; list-style-type:none; width:100%; overflow:hidden;  font-size:8.5pt;}
ul.ticket_header li {float:left; zoom:1; white-space:nowrap; padding:0px; margin:6px 0px; line-height:1.75em; height:1.75em; vertical-align:middle;}
ul.ticket_header li span {padding:0px .25em 0px .75em;}
ul.ticket_header li.form {float:right; margin-left:1em; }
ul.ticket_header li.form select {width:6em; margin-right:1em}
ul.ticket_header li.form label {padding-right:.5em;}
ul.ticket_header li.form input {width:8em;}