/** html5doctor.com/html-5-reset-stylesheet/ **/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#grdChangeRequest_length, #grdTicket_length {
  float: none;
}

.buttons-colvis {
  width:90px;
  margin-right: 5px !important
}
.buttons-colvisRestore {
  margin-right: 5px !important
}

body, form, table, input, select, textarea {
  font-family: verdana, helevetica, sans-serif;
  font-size: 8pt;
  line-height: 1.5em;
}
body {
  background-color: #fff;
  color: #000;
}
#page {
  margin: 15px;
}

h1, h2, h3, h4 {
  font-weight: normal;
  margin: 0 5px 5px;
  color: #006;
  text-shadow: 0 1px 1px #ccc;
  line-height: 1.5em;
  clear: left;
}
h1 {
  margin-top: 5px;
  margin-bottom: 0px;
}
h2 {
  font-size: 18pt;
  padding-bottom: 10px;
}
h3 {
  font-size: 14pt;
  padding-bottom: 20px;
}
h4 {
  font-size: 11pt;
  padding-bottom: 10px;
}
p {
  margin: 0px 15px 10px 15px
}
a {
	-moz-transition: color 0.5s linear;
	-o-transition: color 0.5s linear;
	-webkit-transition: color 0.5s linear;
	transition: color 0.5s linear;
  background-color: inherit;
  color: #00f;
  text-decoration: none
}
a:hover {
  background-color: inherit;
  color: #f00
}
.disabled, a.disabled:hover {
  background-color: inherit;
  color: #666
}
a.btn,a.btn:hover,#btnPDF,#btnPDF:hover {
  background-color: inherit;
  color: #000
}
img {
  max-width: 100%;
  border: 0px none
}

em {
 font-style: italic
}
strong {
 font-weight: bold
}

/** Debug mode notice **/

.debugmode {
  margin-bottom: 5px;
  padding: 5px;
  border: solid 1px #000;
  background-color: #ff0;
  font-weight: bold;
  text-align: center
}

/** Docmail logo **/

.logo {
	width: 220px;
	float: right;
}
.logo a {
	display: block;
	padding: 2px 8px 0px;
}
.logo img {
	display: block;
}

/** Generic classes **/

.clear {
  clear: both;
}

.rtalign {
  text-align: right
}
.midalign {
  text-align: center
}
.midalign table, .midalign div {
  margin-left: auto;
  margin-right: auto
}

.border {
  border: solid 1px #000;
}

/** Button classes **/

.button {
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 1px solid #999;
  color: #000;
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
  margin-right: 0.1em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  padding: 0.6em 1em;
  line-height: 1em;
  background-color: #ddd;
  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.button:hover {
  text-decoration: none;
  background-color: #def;
  background: #def;
}
#btnApply {
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 1px solid #999;
  color: #000;
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
  margin-right: 0.1em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  padding: 0.6em 1em;
  line-height: 1em;
  background-color: #0d0;
  background: linear-gradient(to bottom, #9fc 0%, #0b0 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
#btnApply:hover {
  text-decoration: none;
  background-color: #9fc;
  background: #9fc;
}

/** Button area **/

.refreshButtons {
  clear: both;
  padding-top: 5px;
  margin-bottom: 5px;
}

/** Feedback messages **/

.errormsg {
  color: #d00
}
.errormsg ul {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: left
}

#resultmsg {
  text-align: center;
  font-weight: bold
}

/***************************
 ** Basic navigation menu **
 ***************************/

#navbar li {
  float: left;
  margin-bottom: 10px;
}
#navbar li a {
  background-color: #dd0;
  display: block;
  padding: 5px;
  width: 120px;
  text-align: center;
  border: solid 1px #fff;
}

/****************************
 ** Row background colours **
 ****************************/

tr.lightGreenRow td {
  background-color: #c3ffc3;
}
tr.lightYellowRow td {
  background-color: #ffa;
}
tr.lightPinkRow td {
  background-color: #ffd2cd;
}
tr.lightBlueRow td {
  background-color: #d2e6ff;
}
table.dataTable tr.selected td {
  background-color: #b0bed9;
}

/**********************************
 ** AJAX loading indicator image **
 **********************************/

.indimg {background: transparent url('../img/loader.gif') no-repeat center center; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0}
.indcover {position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: #fff; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6}
.othercover {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: #fff; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6}


/***************
 ** Grid view **
 ***************/

#gridView {position: relative}


/*****************************
 ** List view (attachments) **
 *****************************/

div#lstAttachments {
  width: 100%;
}

div.listview {
  position: relative;
  width: 100% !important;
}

.listview .list {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px #eee solid;
  padding: 2px 0;
  margin-bottom: 0;
  color: #000;
  /* position: relative; */
	-moz-transition: none;
	-o-transition: none;
	-webkit-transition: none;
	transition: none;
}

.list:hover {
  background-color: #e6f2fa;
  color: inherit;
}

.list.active {
  background-color: #cde6f7;
}

.list-content {
  margin: 2px 0;
  padding: 2px 20px;
  /* position: relative; */
}

.list-title, .list-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-title {
  font-size: 10pt;
  line-height: 2em;
}

.list-subtitle {
  font-weight: bold;
  line-height: 1.75em;
  color: #06c;
}

.list-info {
  width: auto;
  float: right;
}

.list-delete {
  clear: right;
  width: auto;
  float: right;
  margin: 10px 5px;
}

/************************
 ** Detail-view styles **
 ************************/

#detailsView {
  margin-bottom: 20px;
  border: solid 1px #ccc;
  border-radius: 10px;
  padding: 5px;
}

#detailsView.is-dragover {
  border: 2px dashed purple;
}

#detailsView label {
  font-size: 10pt
}

#detailsView hr {
  color: #ccc;
  background: #ccc;
  border: solid 1px #ccc;
  margin: 5px 0;
}

#detailsView input[type=text],
#detailsView input[type=text]:focus {
	border: 0 none;
}
#detailsView input.form,
#detailsView input.form:focus {
	border: 1px solid #7C7C7C;
	border-color: #7C7C7C #7C7C7C #C3C3C3 #C3C3C3;
}

.ticketDetails form > div > label {
	width: 50%;
}
.ticketDetails form > div > div,
.ticketDetails form > div > fieldset > div {
  width: 50%;
}

.ticketDetails form > div.uplForm > label {
  width: 25%;
}
.ticketDetails form > div.uplForm > div,
.ticketDetails form > div.uplForm > fieldset > div {
  width: 75%;
}

/*******************
 ** Filter styles **
 *******************/

.filterOptions {
  width: 100%;
  margin-top: 10px;
}
.filterOptions > div {
  float: left;
  margin-left: 5px;
  width: 24%;
}
.filterOptions select, .filterOptions input {
  width: 70%;
}
.filterOptions > div > label {
	width: 30%;
  float: left;
  padding-right: 5px;
  text-align: right;
}

/*****************
 ** Form styles **
 *****************/

form {
  padding: 20px 7%;
  box-sizing: border-box;
}
form > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 10px 0;
}

form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
	width: 25%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 75%;
  float: right;
}
form fieldset {
	border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
	width: 100%;
	border: 1px solid #7C7C7C;
	border-color: #7C7C7C #7C7C7C #C3C3C3 #C3C3C3;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #4697e4;

  border-color: rgba(41, 92, 161, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
  outline: 0 none;
}

form table {
  width: 90%;
  border-left: solid 1px #ddd;
  margin-top: 5px;
}
form thead {
  background-color: #ddd;
}
form th, form td {
  padding: 3px;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}
form table th {
  text-align: left;
}

/** jQuery DataTables styles (mobile-first) **/

.rowSeparator {
  border-bottom: solid 1px #000;
}
.dataTable th, .dataTable td {
  padding: 0.4em 0.5em;
  vertical-align: top;
  display: block;
}
.ie .dataTable th, .ie .dataTable td {
  display: table-row;
}
.dataTable thead th, .dataTable thead td {
  display: none;
}
.dataTable .firstcell {
  margin-top: 3em;
}
.dataTable th label, .dataTable td label {
  font-weight: bold;
  padding: 0.4em; 
  min-width: 30%; 
  display: inline-block;
  margin: -0.4em 1em -0.4em -0.4em;
}
.dataTables_length, .dataTables_filter,
.dataTables_info, .dataTables_paginate {
  float: none;
  text-align: left;
  margin-bottom: 1em;
}
.dataTables_info {
  margin-top: 1em;
}

/** narrow screens (mobile/tablet) **/
@media screen and (max-width: 600px) {
  /** filter combos **/
  .filterOptions > div {
    float: none;
    display: block;
    width: 100%;
  }
  .filterOptions select {
    width: 100%;
  }
  /** all forms **/
  form > div {
    margin: 0 0 15px 0; 
  }
  form > div > label,
  legend {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
  form {
    padding: 20px 3%;
  }
  /** jQuery DataTables **/
  .dataTable th, .dataTable td {
    text-align: left;
  }
  .dataTable td.midalign {
    text-align: center;
  }
}
/** narrow to medium-width screens **/
@media screen and (max-width: 1050px) {
  .filterOptions > div {
    margin: 0 0 15px 0; 
  }
  .filterOptions > div > label {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  .filterOptions form > div > div,
  .filterOptions form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  .filterOptions select {
    width: 90%; 
  }
}
/** medium to wide screens **/
@media screen and (min-width: 800px) {
  .rowSeparator {
    border: 0 none;
  }
  .dataTable thead th, .dataTable tbody th, .dataTable tbody td {
    display: table-cell;
    margin: 0;
  }
  .dataTable th label, .dataTable td label {
    display: none;
  }

  .dataTables_length, .dataTables_info {
    float: left;
  }
  .dataTables_filter, .dataTables_paginate {
    float: right;
    text-align: right;
  }
  .dataTables_length, .dataTables_filter {
    margin-top: 0;
    margin-bottom: 0.5em;
  }
  .dataTables_info, .dataTables_paginate {
    margin-top: 0.5em;
  }
  .logo {
    width: 30%;
  }
  form {
    padding: 20px 15%;
  }
}
/** wider screens **/
@media screen and (min-width: 1000px) {
  form > div > label,
	legend {
  	text-align: right;
  }
  .logo {
    width: 420px;
  }
}

@media print {
  .noprint {
    display: none !important;
  }
  .logo, #navbar, h2, h3, #detailsView, #gridView > div,
  .dataTables_filter, .dataTables_paginate, .dataTables_length {
    display: none;
  }
  .dataTables_wrapper, div#gridView > div.dataTables_wrapper {
    display: block;
  }
  .rowSeparator {
    border: 0 none;
  }
  .dataTable thead th, .dataTable tbody th, .dataTable tbody td {
    display: table-cell;
    margin: 0;
  }
  .dataTable th label, .dataTable td label {
    display: none;
  }
  .dataTables_info {
    margin-top: 0.5em;
  }
  .logo {
    width: 30%;
  }
}