/*
Content:
I.  Colors
II. Fonts

1.  Tags
    1.1.  Body
    1.2.  Text elements
    1.3.  Form elements
    1.4.  Table Elements
    1.5.  Rest
2.  Common elements
    2.1.  Tooltips
    2.2.  Drop down menus
    2.3.  Errors, warnings and messages, multiselect
          2.3.1.  Colors
          2.3.2.  Structures
    2.4.  Tree themes
          2.4.1.  Default
          2.4.2.  Folder
    2.5.  Persistent filters
    2.6.  Tabs
    2.7.  Result tables
          2.7.1.  Common table attributes
          2.7.2.  Navigation
          2.7.3.  Ticket list rows
          2.7.4.  Filter area
          2.7.5.  Data area
          2.7.6.  List messages
    2.8.  Settings block
    2.9.  Special buttons
    2.10. Special inputs
    2.11. Main header
    2.12. Overview bar
    2.13. Header line
    2.14. Common elements
    2.15. Additional form styling
    2.16. Tree related stuff
    2.17. Main container
    2.18. Widgets
    2.19. Suggestion
    2.20. Breadcrumb navigation
3.  Pages
    3.1.  Login
    3.2.  Unit and role selection
    3.3.  Search
    3.4.  Mailhistory details
    3.5.  Template variables
    3.6.  Issue details
          3.6.1.  Ticket details
          3.6.2.  Common tab
          3.6.3.  Details tab
          3.6.4.  Dependencies tab
          3.6.5.  E-mail tab
          3.6.6.  Ticket history tab
    3.7.  Communication client
    3.8.  User settings
    3.9.  Quickticket
    3.10. Call
    3.11. Template Preview
    3.12. Service Requests
    3.13. User details
4.  Style blocks
    4.1.  Grid
    4.2.  Common
    4.3.  Wizards
5.  This and that
    5.1.  Image buttons
6.  Designsystem
    6.1.  Bar
    6.2.  Wizard
    6.3.  Pages
      6.3.1.  SlaWizard 
      6.3.2.  SLA list
      6.3.3.  Group types, groups and group memberships
      6.3.4.  Request Workflow
    6.4.  Common elements
*/

/*
I.  Colors
Code:
#E43117 (CHANGE FROM: #E57B17)
Name:
red (CHANGE FROM: orange)
Description:
Primary active color. Used for the text of active and hovered elements.

Code:
#204F7F 
Name:
ocean blue
Description:
First marker color. Used in particular for buttons (text and border) and headlines. Also used as background color for
list headers and detail bars and as hover color for input fields.

Code:
#F4F4F4
Name:
grey
Description:
First background color. Used for the header of the page and some table cells.

Code:
#E5ECFF
Name:
light blue
Description:
Background color. Used for table headers and overview bars.
*/

/*
II. Fonts

Font families are currently declared at two places only:
- 1.1.  Body: Inherited by all elements except for form controls
- 1.3.  Form elements 
 
The font stack used is Verdana, Helvetica, sans-serif.
(Arial, Helvetica, sans-serif in the standard css)
*/


/*
1.  Tags
*/
/*
1.1.  Body
*/
body {
  padding: 2px;
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 11px;
  background-color: #fff;
  margin: 0;
  position: relative;
  min-width: 1200px;
}

/*
1.2.  Text elements
*/
h1, h2 {
  font-weight: bold;
  font-size: 1.2em;
  margin: 5px 0;
}

/*
1.3.  Form elements
*/
/* Set Font for form elements */
input, textarea, select, button {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 11px;
}

form {
	margin:0;
}

fieldset {
  border: #204F7F 1px solid;
  padding: 10px 5px 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; 
  position: relative;
}  

legend {
  font-weight: bold;
  font-size: 12px;
  color: #204F7F;
  background: #fff;
  padding: 1px 5px;
  position: absolute;
  top: -10px;
}

/*
Buttons
*/
input[type=button], input[type=submit], button {
  vertical-align: middle;
  cursor: pointer;
  padding: 0;
  font-weight: bold;
  background-color: transparent;
}

  /* Mozilla has extra padding for button content */ 
  button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important; 
  } 

/*   input[type=button]:hover,input[type=submit]:hover, button:hover {
    color: #E57B17;
  } */

input[type=image],input.imageButton, .imageButton {
  background: transparent center no-repeat;
  border: 1px solid transparent;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

  input[type=image]:hover,input.imageButton:hover, .imageButton[hover] {
    background-color: #F0F9FF;
    border: 1px solid rgb(244,244,244);
  }

button.linkButton {
  border: none;
  text-decoration: underline;
}

/*
Input fields
*/
input[type=text],input[type=password],input[type=email],input[type=telephone], input[type=url], input[type=number],
select,select:active, textarea {
  border: 1px solid #bbb;
}

input[type=text],input[type=password],input[type=email],input[type=telephone], input[type=url], input[type=number],
 textarea {
  padding: 2px;
}

select {
  padding: 1px;
}

textarea {
  overflow: auto; /* otherwise ie always displays a scrollbar */
  min-height: 150px;
  min-width: 100px;
  max-height: 400px;
  /* max-width: 500px; */
}
.ie8 textarea {
  overflow-x: visible; /* otherwise ie 8 displays a horizontal scrollbar in certain situations */
}

  input[type=text]:hover,input[type=password]:hover, input[type=email]:hover,input[type=telephone]:hover,
  input[type=url]:hover, input[type=number]:hover, textarea:hover, select:hover {
    /*border-top-color: #999;
    outline: 1px solid #204F7F;*/
    border-color: #000;
  }
  input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=telephone]:focus,
  input[type=url]:focus, input[type=number]:focus, select:focus, textarea:focus, 
  input[type=image]:focus,input.imageButton:focus, .list:focus {
    border: 1px solid #bbb;
    border-top-color: #999;
    outline: 1px solid #E43117;
  }
  
  /*
  Validity
  */
  /* disable default style in firefox */
  :-moz-ui-invalid {  
    box-shadow:none; 
    outline: 2px solid rgb(255, 153, 153) !important;
    outline-color: rgba(255, 0, 0, 0.4) !important;
  }
  /*
  :invalid {  
  }
  */
  input[readonly], textarea[readonly] {
    background-color: #EEEEEE;
  }
    input[readonly]:hover, textarea[readonly]:hover {
      outline: none;
    }
    input[readonly]:focus, textarea[readonly]:focus {
      outline: none;
    }

/*
Radio buttons, checkboxes
*/
input[type=radio],input[type=checkbox] {
  cursor: pointer;
}

/*
1.4.  Table elements
*/
table {
  width: 100%;
}

th { /*white-space: nowrap;*/
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  padding: 3px;
  color: #000;
}

td {
  margin: 0;
}

/*
1.5.  Rest
*/
img {
  vertical-align: text-bottom;
  border: none;
}

button img {
  margin-right: 5px;
  vertical-align: middle;
}

hr {
  border: 0 none;
  background-color: #204F7F;
  color: #204F7F;
  height: 1px;
  margin: 10px 0;
}

a, a:visited {
  color: #204F7F;
}

ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

/*
4.  Style blocks
*/

/*
4.1.  Grid

The grid consists of 12 columns, each of which is 80px wide. A column has a 5px horizontal margin on both sides. That
leads to a 5px margin for the whole container and 10px gutters.
All columns have display: inline-block, so they do not float. Floating behavior can only be achieved with an parent container.
Currently the grid class does not have to be used but its use with a parent container is strongly recommended. 
*/
.grid {
  padding: 0;
  border: 0 none;
  margin: 0;
}
  
  .column {
    display: inline-block;
    vertical-align: top;
  }
  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    margin: 0 5px;
  }
    .column.first {
      margin-left: 0;
    }
    .column.last {
      margin-right: 0;
    }

  /* 90 x size - 10 */
  .col1 {
    width: 80px;
  }
  .col2 {
    width: 170px;
  }
  .col3 {
    width: 270px;
  }
  .col4 {
    width: 350px;
  }
  .col5 {
    width: 440px;
  }
  .col6 {
    width: 530px;
  }
  .col7 {
    width: 620px;
  }
  .col8 {
    width: 710px;
  }
  .col9 {
    width: 800px;
  }
  .col10 {
    width: 890px;
  }
  .col11 {
    width: 980px;
  }
  .col12 {
    width: 1070px;
  }

  /* Big displays. Wider columns would be too wide. */ 
  @media only screen and (min-device-width: 1400px) {
    .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
      margin: 0 10px;
    }
      .column > .column:first-child {
        margin: 0 10px 0 0;
      }
      .column > .column:last-child {
        margin: 0 0 0 10px;
      }
    
    /* 110 x size - 20 */
    .col1 {
      width: 90px;
    }
    .col2 {
      width: 200px;
    }
    .col3 {
      width: 310px;
    }
    .col4 {
      width: 420px;
    }
    .col5 {
      width: 530px;
    }
    .col6 {
      width: 640px;
    }
    .col7 {
      width: 750px;
    }
    .col8 {
      width: 860px;
    }
    .col9 {
      width: 970px;
    }
    .col10 {
      width: 1080px;
    }
    .col11 {
      width: 1190px;
    }
    .col12 {
      width: 1300px;
    } 
  }
  
    /* Small displays */ 
  @media only screen and (min-device-width: 1000px) and (max-device-width: 1200px){ 
    .col1, .col2, .col3, .col4, .col5, .col6,
    .col7, .col8, .col9, .col10, .col11, .col12 {
      margin: 0 5px;
    }
    
    /* 78 x size - 10 */
    .col1 {
      width: 68px;
    }
    .col2 {
      width: 146px;
    }
    .col3 {
      width: 224px;
    }
    .col4 {
      width: 302px;
    }
    .col5 {
      width: 380px;
    }
    .col6 {
      width: 458px;
    }
    .col7 {
      width: 536px;
    }
    .col8 {
      width: 614px;
    }
    .col9 {
      width: 692px;
    }
    .col10 {
      width: 770px;
    }
    .col11 {
      width: 848px;
    }
    .col12 {
      width: 926px;
    } 
  }
  
/*
4.2.  Common
*/
/* used for elements that should not be displayed */
.hidden {
  display: none;
}

/* used for elements that expose an active state */
.active, .active * {
  color: #E43117 !important;
}
/* used for containers that expose an active state. Contrary to the active class the child elements are not affected */
.activeContainer {}

.highlight {}

/* used for elements that have a border */
.framed {
  border: solid 1px #BBBBBB;
}
.framedBold {
  border: solid 2px #BBBBBB;
}  
  .framed.active, .framedBold.active,
  .framed.activeContainer, .framedBold.activeContainer {
    border-color: #E43117;
  }
  
/* used for elements that change their styles on hovering. This class is meant to be used in combination with other
selectors only */
.hover {}

/*
clearfix
*/
.floatGroup:before,
.floatGroup:after {
    content:"";
    display:table;
}

.floatGroup:after {
    clear:both;
}

/* a semantic shortcut for inline-blocks. flexible means "adjusts size to content" */
.flexible {
  display: inline-block;
}

/* a semantic shortcut for blocks whose children are inline-blocks. flexible means "adjusts size to content" */
.flexibleChildren>div {
  display: inline-block;
}

/*
This class is used for image replacement. An inline element gets prepared so that the image can be set with the
background-image attribute. 
*/
.symbol {
  width: 16px;
  height: 16px;
  text-indent: 16px;
  overflow: hidden;
  background: no-repeat left center;
  display: inline-block;
  border: 0 none;
}

/*
a subtle shadow
the ui-dialog class is used by jQuery UI.
 */
.shadow, .ui-dialog, .ui-datepicker, .ui-autocomplete, .timePicker, .categorySelection, .unitSelection {
  -moz-box-shadow: 2px 2px 2px #aaa;
  -webkit-box-shadow: 2px 2px 2px #aaa;  
  box-shadow: 2px 2px 2px #aaa;
}
  .ltie9 .shadow, .ltie9 .ui-dialog, .ltie9 .ui-datepicker, .ltie9 .ui-autocomplete, .ltie9 .timePicker,
  .ltie9 .categorySelection, .ltie9 .unitSelection  {
    background: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#AAAAAA', Direction=135, Strength=2)"
  }
  .ltie9 .shadow.hoverSafe {
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(enabled=false)"
  }

/* tables (or table styled blocks) that establish a an adaptable grid for ui designs, in particular for forms */
.uiGrid {}

  .uiGrid .top {
    vertical-align: top;
  }
  
  /*
  This class is meant for table style columns. The attributes of 1px and nowrap make let a column expand to exactly the
  size that is necessary to display the content. This is particularly interesting for layouts. 
  */
  .uiGrid .adaptiveColumn {
    width: 1px;
    white-space: nowrap;
  }
  
  .gutter {
    width: 10px;
  }


/*
4.3.  Wizards
*/
.wizard {
    margin-bottom: 20px;
    font-size: 1.2em;
}
  .steps {
    display: inline-block;
  }
    .step {
      display: inline-block;
      padding: 5px 10px;
      font-weight: bold;
    }
      .step > a {
        color: #bbbbbb;
        text-decoration: none;
      }
        .step > a:hover {
          text-decoration: underline;
        }
        
  .wizardProgressBar, .wizardProgress {
    height: 2px;
  }
  .wizardProgressBar {
    background-color: #bbbbbb;
  }
    .wizardProgress {
      background-color: rgb(255, 140, 0);
    }

/*
2.  Common elements
*/
/*
2.1.  Tooltips
*/
.tooltip {
  display: none;
  background-color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 4px 4px;
  max-width: 400px;
  white-space: normal;
}
  /* The tooltips are hidden in the table cells. The table has border-collapse: collapse. In this case ie9 does not
  render the shadow. */
  .ie9 .tooltip {
    border-collapse: separate;
  }

  .tooltip>h1 {
    text-align: center;
    font-size: 1.1em;
    margin: 0;
    padding: 5px;
    border: 0 none !important;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
  }
  
  .tooltip>div {
    margin: 0;
    padding: 5px;
    color: #000;
    max-height: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.ticketlinkactive, .ticketlinkinactive {
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.ticketlinkactive, .ticketlinkactive:visited, .ticketlinkinactive:hover {
  color: #E43117;
}

.ticketlinkinactive, .ticketlinkinactive:visited {
  color: #204F7F;
}

/*
2.2.  Drop down menus
*/
.dropDownMenu,.dropDownMenu>li>ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

.dropDownMenu>li>img {
  margin: 0 5px;
  display: block;
}

.dropDownMenu:hover>li>img {
  margin: 0 5px;
  display: block;
}

.dropDownMenu>li {
  margin: 0;
  padding: 0;
}

.dropDownMenu>li>ul {
  position: absolute;
  background-color: #fff;
  border: 1px solid #000;
  color: #204F7F;
  margin-left: 5px;
  display: none;
  z-index: 1000;
}

.dropDownMenu:hover>li ul {
  display: block;
}

.dropDownMenu li>ul>li {
  padding: 3px;
}

.dropDownMenu:hover>li>ul>li:hover {
  color: #E43117;
  cursor: pointer;
}

.dropDown-button {
  height: 21px;
  margin-top: -3px;
  width: 20px !important;
  border-left: 0 none !important;
}
.ie9 .dropDown-button {
  margin-top: -2px;
  height: 19px;
} 

.ui-autocomplete {
  max-height: 300px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  padding-right: 20px;
}

/*
2.3.  Errors, warnings and messages, multiselect
*/
.test > body {
  border: 3px solid rgb(226,0,26);
}
  .test > body:before {
    content: 'Testsystem (6.3-Dev) - Feedback bitte an asc@trueact.com';
    font-size: 16px;
    font-weight: bold;
    color: rgb(226,0,26);
    text-align:center;
  }

.messageArea, .multiSelectArea {
  text-align: center;
}
/*
2.3.1.  Colors
*/
.error, .warning, noscript {
  color: rgb(120,0,0);  
}
.error.infoBlock, .warning.infoBlock {
  border-color: rgb(120, 0, 0);
  background: #fff5f5;
  background: -moz-linear-gradient(top,  #fff5f5 0%, #ffe5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff5f5), color-stop(100%,#ffe5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #fff5f5 0%,#ffe5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #fff5f5 0%,#ffe5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #fff5f5 0%,#ffe5e5 100%); /* IE10+ */
  background: linear-gradient(top,  #fff5f5 0%,#ffe5e5 100%); /* W3C */
}

.ltie9 .error.infoBlock, .ltie9 .warning.infoBlock {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#AAAAAA', Direction=135, Strength=2) progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff5f5', endColorstr='#ffe5e5',GradientType=0 )";
}
.ie9 .error.infoBlock, .ie9 .warning.infoBlock {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjVmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}

.success {
  color: rgb(0, 50, 0);
}
.success.infoBlock {
  border-color: rgb(0, 50, 0);
  background: #f2fff2;
  background: -moz-linear-gradient(top,  #f2fff2 0%, #dcf2dc 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2fff2), color-stop(100%,#dcf2dc)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f2fff2 0%,#dcf2dc 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f2fff2 0%,#dcf2dc 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f2fff2 0%,#dcf2dc 100%); /* IE10+ */
  background: linear-gradient(top,  #f2fff2 0%,#dcf2dc 100%); /* W3C */
}
.ltie9 .success.infoBlock {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#AAAAAA', Direction=135, Strength=2) progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2fff2', endColorstr='#dcf2dc',GradientType=0 )";
}
.ie9 .success.infoBlock {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZmZmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkY2YyZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}

/*
2.3.2.  Structures
*/
.infoBlock {
  padding: 5px;
  font-size: 12px;
  text-align: center;
  border: 1px solid;  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; 
  
  -moz-box-shadow: 2px 2px 2px #aaa;
  -webkit-box-shadow: 2px 2px 2px #aaa;  
  box-shadow: 2px 2px 2px #aaa;
  margin: 5px 0;
}
  .infoBlock>h2 {
    margin: 0 0 0.5em;
  }
  
  .infoBlock>ul {
    list-style-type: none;
    margin: 0;
    list-style-position: inside;
    padding: 0;
  }

.infoLine, noscript {
  padding: 0px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}  

/*
2.4.  Tree themes
*/
.treeSearch>button {
  width: 22px;
  height: 22px;
  background: transparent url("../images/tree/viewmag.png") center no-repeat;
  border: 0 none;
  cursor: pointer;
}

/*
2.4.1.  Default
*/
.tree_default_theme,.tree_default_theme ul {
  padding: 0;
  margin: 0;
  /* The following is a bugfix for Firefox. It prevents the text from being selected when you click an element */
  -moz-user-select: none;
  list-style: inside none none;
}

.tree_default_theme ul {
  margin-left: 16px;
}

.tree_default_theme .tree_node {
  width: 16px;
  height: 16px;
  padding: 0;
  vertical-align: top;
}

.tree_default_theme .tree_expanded_node>.tree_node {
  background: -48px -128px no-repeat url("../images/tree/iconset.png");
  cursor: pointer;
}

.tree_default_theme .tree_collapsed_node>.tree_node {
  background: -16px -128px no-repeat url("../images/tree/iconset.png");
  cursor: pointer;
}

.tree_default_theme .tree_found_item {
  padding: 2px;
  background-color: rgb(255, 245, 245);
  border: 1px solid #f00;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;  
  border-radius: 4px;
  font-weight: bold;
}

.tree_default_theme .tree_found_item>ul {
  background-color: #fff;
  font-weight: normal;
}

.tree_default_theme input:checked + label {
  font-weight: bold;
}

/*
2.4.2.  Folder
*/
.tree_folder_theme,.tree_folder_theme ul {
  padding: 0;
  margin: 0;
  /* The following is a bugfix for Firefox. It prevents the text from being selected when you click an element */
  -moz-user-select: none;
  list-style: inside none none;
}

.tree_folder_theme ul {
  margin-left: 16px;
}

.tree_folder_theme .tree_node {
  width: 16px;
  height: 16px;
  padding: 0;
  vertical-align: top;
}

.tree_folder_theme .tree_node {
  background: -32px -96px no-repeat url("../images/tree/iconset.png");
}

.tree_folder_theme .tree_expanded_node>.tree_node {
  background: -16px -96px no-repeat url("../images/tree/iconset.png");
}

.tree_folder_theme .tree_collapsed_node>.tree_node {
  background: 0 -96px no-repeat url("../images/tree/iconset.png");
}

.tree_folder_theme .tree_found_item {
  padding: 2px;
  background-color: rgb(255, 245, 245);
  border: 1px solid #f00;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;  
  border-radius: 4px;
  font-weight: bold;
}

.tree_folder_theme .tree_found_item>ul {
  color: black;
  font-weight: normal;
}

.tree_folder_theme input:checked + label {
  font-weight: bold;
}
/*
2.5.  Persistent filters
*/
#doFilter,#doResetFilter,#doSaveFilter,#doRemoveFilter,#doAddFilter,#doAddFilterOpened,#doFilterControl {
  background: white center no-repeat;
  border: 0 none;
  padding: 0;
  cursor: pointer;
  height: 24px;
  width: 24px;
}

#doFilter:hover,#doResetFilter:hover,#doSaveFilter:hover,#doRemoveFilter:hover,#doAddFilter:hover,#doAddFilterOpened:hover,#doFilterControl:hover
  {
  background-color: #F0F9FF;
  border: solid 1px #204F7F;
}

#doFilter {
  background-image: url('../images/navigation/search.png');
}

#doSaveFilter {
  background-image: url('../images/navigation/search_save.png');
}

#doResetFilter {
  background-image: url('../images/navigation/search_reset.png');
}

#doRemoveFilter {
  background-image: url('../images/navigation/search_remove.png');
}

#doAddFilter {
  background-image: url('../images/navigation/search_add_closed.png');
}

#doAddFilterOpened {
  background-image: url('../images/navigation/search_add_opened.png');
  width: 37px;
}

#doFilterControl {
  background-image: url('../images/navigation/filter_control_closed.png');
  width: 37px;
}

#filterControlArea {
  height: 24px;
  width: auto;
}

#selectFilterBox {
    cursor: pointer;
    margin: 0 5px;
    width: 150px;
}
    
/* image icon */
#addNewFilter:hover {
  cursor: pointer;
}

#addNewFilterInformation {
  margin-right: 5px;
  font-weight: bold;
}

#newFilternameInput {
  margin: 2px 6px 0 0;
  vertical-align: top;
}

/*
2.6.  Tabs
*/
div.tabBar {
  /*background-color: rgb(244,244,244);*/
}

ul.tabBar {
  margin: 0;
  padding: 0;
}

.tab {
  background-color: #fff;
  margin: 0 3px 0 0;
  padding: 3px 10px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  border-radius: 4px 4px 0 0;
  border-bottom: 0 none;
}
  
  .tab * {
    color: #204F7F;
  }
  .tab button {
    background-color: #FFFFFF;
    border: none;
    cursor: pointer;
    padding: 0;
    /* for ie to render the correct width */
    width: auto;
    overflow: visible;
    /* end ie */
  }
  .tab a {
    text-decoration: none;
  }

  .tab.active {
    border-bottom: 0 none;
    position: relative;
    bottom: -2px;
  }
    .tab.active:after {
      position: absolute;
      content: "";
      height: 3px;
      width: 100%;
      left: 0;
      bottom: 0;
      background-color: #fff;
     }
    
  .tab.framed {
    border-color: #204F7F;
  }

.tabForm {
  margin-bottom: 0;
  display: inline;
}

/*
2.7.  Result tables
*/

/*
2.7.1.  Common table attributes
*/
.overflowContainer {
  overflow: auto;
  /* Hack for Chrome: shows horizontal scrollbar when child has 100% width and border */
  padding: 1px;
}
  .ie9 .overflowContainer {
    /*Hack for IE 9: page grows when hover effect on rows is active and rows are hovered */
    height: 100%;
  }

.listPage {
  padding: 10px;  
}

.resultTable {
  font-size: 10px;
  border-collapse: collapse;
}
  .resultTable th {
    border: solid 1px #BBB;
    border-width: 0 1px;
  }
 
  /* thead CHANGE FROM: blue gradient to grey gradient */
  .resultTable > thead, .mailFolder > thead {
  background-color: #fff; /* Important for ie < 9: otherwise shadow is rendered for text too */
  background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* IE10+ */
  background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* W3C */ 
  }
    .ie9 .resultTable > thead, .ie9 .mailFolder > theada {
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    }
    .ltie9 .resultTable > thead, .ltie9 .mailFolder > thead {
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#AAAAAA', Direction=135, Strength=2) progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 )";
    }
    
  .resultTable > tbody td {
    white-space: nowrap;
    border: 1px solid #6B78A9; /* CHANGE FROM #E5ECFF */
  }
  
  .resultTable td .tooltipCapable {
    display: inline-block;
  }
  .resultTable .sortable:hover {
    background: #deeaf7; /* Old browsers */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deeaf7', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
    background: -moz-linear-gradient(top,  #deeaf7 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deeaf7), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #deeaf7 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #deeaf7 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #deeaf7 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #deeaf7 0%,#ffffff 100%); /* W3C */
  }
    
    .resultTable .sortable > button {
      border: 0 none;
      text-decoration: underline;
      display: block;
      width: 100%;
      text-align: left;
      font-size: 10px; /* default for buttons is 11px */
      position: relative;
      top: -2px;
    }
    /* Display an icon as hint for the sort order */
    .resultTable .sortable > button:after {
      content: "";
      display: inline-block;
      width: 16px;
      height: 12px; /* only 12px to keep it somewhat in the middle */
    }
      .resultTable .sortable.asc > button:after,
      .resultTable .sortable.desc > button:after {
        background-image: url(images/ui-icons_000000_256x240.png);
      } 
      .resultTable .sortable.asc > button:after {
        background-position: 0 -16px;
      }
      .resultTable .sortable.desc > button:after {
        background-position: -64px -16px;
      }
        /* Display an icon as hint for the sort order after a click */
        .resultTable .sortable:hover {
          color: #E43117;   
        }
        .resultTable .sortable > button:hover:after  {
          background-image: url(images/ui-icons_ff8c00_256x240.png); 
        }
        .resultTable .sortable > button:hover:after,
        .resultTable .sortable.asc > button:hover:after  {
          background-position: -64px -16px;  
        }
      
        .resultTable .sortable.desc > button:hover:after {
          background-position: 0 -16px;
        }

.sortableHeader>table {
  width: auto;
}

.sortButtonsContainer {
  width: 10px;
  text-align: center;
  vertical-align: middle;
  padding: 0 3px;
}

.sortArrowUp, .sortArrowDown {
  margin: 1px;
}

.sortArrowUp:hover, .sortArrowDown:hover  {
  cursor: pointer;
}

    .symbol.sortArrowUp {
      background-image: url(../images/1uparrow.png);
    }
    .symbol.sortArrowUp.active {
      background-image: url(../images/1uparrowb.png);
    }
    .symbol.sortArrowDown {
      background-image: url(../images/1downarrow.png);
    }
    .symbol.sortArrowDown.active {
      background-image: url(../images/1downarrowb.png);
    }

table.hover > tbody > tr:hover {
  background-color: #F4F4F4;
  color: black;
}

.escalationLevel, .slaTooltip {
  width: 14px;
  height: 14px;
  background-image:url('../images/green.gif');
}
.slaTooltip {
  display: block;
}
.escalationLevel {
  display: inline-block;
  vertical-align: text-bottom;
  margin-left: 5px;
}
  .slaTooltip.warning, .escalationLevel.warning {
      color: black;
      background-image:url('../images/yellow.gif');
  }
  .slaTooltip.escalation, .escalationLevel.escalation {
      background-image:url('../images/red.gif');
  }
  .slaTooltip.extendedEscalation, .escalationLevel.extendedEscalation {
      background-image:url('../images/bomb.png');
  }
  
#slaTooltip > table > tbody > tr {
  white-space: nowrap;
}

#slaTooltip tr.oldEscalationDate, #issueSlaDetails tr.oldEscalationDate {
  font-style:italic;
}

/*
2.7.2.  Navigation
*/
.listNavigation {
  margin: 5px 0;
}

.listNaviButtons {
  vertical-align: top;
}

/*
2.7.3.  Ticket list rows
*/
.status11, .status21, .status41 {
  color: blue;
}

.status22, .status42, .status43 {
  color: #204F7F;
}

.status51 {
  color: green;
}

.status52 {
  color: #006400;
}

.status61, .status62, .status64{
  color: #B9A66D;
}

.markedLine {
  background-color: #316AC5;
  border-color: #316AC5;
  color: white;
}

/*
2.7.4.  Filter area
*/
.filterArea {
  margin-top: 10px !important;  
}

  .filterArea>div {
    width: 200px;
    margin: 5px;
  }

    .filterArea>div>label {
      display: block;
      width: 100%;
    }

  .filterArea input,.filterArea select {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

/*
2.7.5.  Data area
*/
.dataArea {
  background-color: #F4F4F4;
  margin-bottom: 20px;
  margin-top: 20px;
}

/*
2.7.6.  List messages
*/
.listWarningMessage {
  background: url(../images/warning.png) left center no-repeat;
  padding-left: 20px !important;
  text-align: left !important;
}

/*
2.8.  Settings block
*/

.settingsBlock, .filterArea {
  padding: 5px;
  margin: 15px 0;
  -moz-box-shadow: 2px 2px 2px #aaa;
  -webkit-box-shadow: 2px 2px 2px #aaa;  
  box-shadow: 2px 2px 2px #aaa;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; 
  border: 1px solid #bbb;
  
  background-color: #fff; /* Important for ie < 9: otherwise shadow is rendered for text too */
  background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* IE10+ */
  background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* W3C */ 
}
  .ie9 .settingsBlock, .ie9 .filterArea {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  }
  .ltie9 .settingsBlock, .ltie9 .filterArea {
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#AAAAAA', Direction=135, Strength=2) progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 )";
  }

fieldset.settingsBlock {
  padding: 10px 5px 5px;
  margin: 25px 0;
}
  
  .settingsBlock.framed {
    border-color: 1px solid #bbb;
  }

/* PasswordStrength */
.minifont {
  font-size: 10px;
  color: #FFFFFF;
  line-height: 1em;
  text-align: center;
  width: 278px;
}
 
.graph { 
  position: relative; /* IE */
  width: 100%; 
  border: 1px solid #204F7F;
  width: 278px;
  padding: 2px;
}
 
.graph .bar { 
  display: block;
  position: relative;
  background-color: #FFFFFF;
  background: url(../images/bar.jpg) repeat-y;
  opacity: 0.70;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  text-align: left; 
  height: 11px; 
}
 
.graph .bar span { 
  position: absolute;
  left: 1em; 
}

/*
2.9.  Special buttons
*/

/* "standard" buttons */
.tsubmit, .listButton {
  color: #000;
  background-color: #F5F5F5;
  border: 1px solid #BBBBBB;  
  font-weight: bold;
  padding: 3px 8px !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; 
  text-shadow: 0 1px 1px #FFFFFF;
  
  background: -moz-linear-gradient(top,  #f9f9f9 0%, #e7e7e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f9f9f9 0%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f9f9f9 0%,#e7e7e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f9f9f9 0%,#e7e7e7 100%); /* IE10+ */
  background: linear-gradient(top,  #f9f9f9 0%,#e7e7e7 100%); /* W3C */
  
  /*
  -moz-transition: all 0.2s; 
  -webkit-transition: all 0.2s;  
  -ms-transition: all 0.2s;  
  -o-transition: all 0.2s;  
  transition: all 0.2s;*/  
}
  .ltie9 .tsubmit, .ltie9 .listButton {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e7e7e7',GradientType=0 )";
  }
  /*
  This is a workaround for ie8. The shadow filter is inherited, so the button looks a bit weird. Setting position to
  relative would solve the problem. The bugfix does not work for when a z-index is set for a parent container, e.g. a 
  jQueryUI dialog. Therefor we fall back to the jquery ui theme instead of using filters. 
  */ 
  .ltie9 .shadow .tsubmit, .ltie9 .ui-dialog .tsubmit {
    -ms-filter: "none";
    background: #e7e7e7 url(images/ui-bg_highlight-soft_75_e7e7e7_1x100.png) 50% 50% repeat-x;
  }
  .ie9 .tsubmit, .ie9 .listButton {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlN2U3ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  }
  
  
  .tsubmit:hover, .listButton:hover {
    /*-moz-box-shadow: 1px 1px 2px #aaa;
    -webkit-box-shadow: 1px 1px 2px #aaa;  
    box-shadow: 1px 1px 2px #aaa;
    color: #000 !important;
    border-color: #bbb;*/
    
    border-color: #E43117;
    color: #E43117 !important; /* CHANGE FROM #000 */
    text-shadow: none; /* CHANGE FROM */
    
    /*
    CHANGE FROM: orange gradient
    */
  }
    
.tsubmit > .symbol {
     vertical-align: middle;
     margin-right: 5px;
 }   

/* This class is for submit buttons with an image and no text */
input.image {
  background: transparent center no-repeat;
  border: 0 none;
  padding: 0;
  overflow: hidden;
}

/*
list buttons
input specifier is necessary because input[type=submit] has a higher specifity and would override these rules
*/
input.listbutton_arrow,input.listbutton_mastertickettochildticket,input.listbutton_new_from_template,input.listbutton_open,
input.listbutton_open_normal_ticket,input.listbutton_open_master_ticket,input.listbutton_open_master_ticket_expanded,
input.listbutton_open_slave_ticket,input.listbutton_expand_master_ticket,input.listbutton_collapse_master_ticket,
input.listbutton_reject,input.listbutton_selectandclose_solution,input.listbutton_selectandsave_solution
  {
  background: transparent center no-repeat;
  border: 0 none;
  padding: 0;
  overflow: hidden;
  width: 16px;
  height: 16px;
}

input.listbutton_arrow {
  background-image: url(../images/select-arrow.gif);
}

input.listbutton_mastertickettochildticket {
  background-image: url(../images/mastertickettochildticket.gif);
}

input.listbutton_new_from_template {
  background-image: url(../images/new_from_template.gif);
}

input.listbutton_open, input.listbutton_open_normal_ticket {
  background-image: url(../images/open_normal_ticket.png);
}

input.listbutton_open_master_ticket {
  background-image: url(../images/open_master_ticket.png);
}

input.listbutton_open_master_ticket_expanded {
  background-image: url(../images/open_master_ticket_expanded.png);
}

input.listbutton_open_slave_ticket {
  background-image: url(../images/open_slave_ticket.png);
}

input.listbutton_expand_master_ticket {
  background-image: url(../images/expand_master_ticket.png);
}

input.listbutton_collapse_master_ticket {
  background-image: url(../images/collapse_master_ticket.png);
}

input.listbutton_reject {
  background-image: url(../images/reject.gif);
}

input.listbutton_open_slave_ticket:hover,input.listbutton_open_master_ticket_expanded:hover,input.listbutton_open_master_ticket:hover,input.listbutton_open_normal_ticket:hover,input.listbutton_open:hover,input.listbutton_collapse_master_ticket:hover,input.listbutton_expand_master_ticket:hover,input.listbutton_reject:hover {
  cursor: pointer;
}

a.icon {
  text-indent: -9999em;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  margin: 0 0.5em;
}
/*
2.10. Special inputs
*/

/* input type text for date fields in several jsps */
input.text_date {
  vertical-align: bottom;
  width: 80px;
}

/*
2.11. Main header
*/
#mainheader {
  position: relative;
  text-align: right;
  min-height: 44px;
  padding: 5px;
  
  background: #f2f2f2; /* Old browsers */
  background: -moz-linear-gradient(top,  #f2f2f2 0%, #ffffff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f2f2f2 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f2f2f2 0%,#ffffff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f2f2f2 0%,#ffffff 100%); /* IE10+ */
  background: linear-gradient(top,  #f2f2f2 0%,#ffffff 100%); /* W3C */
}
  .ltie9 #mainheader {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=0 )"; /* IE6-8 */
  }
  .ie9 #mainheader {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  }
  
#mainheaderLeftArea {
  position: absolute;
  left: 5px;
}

#mainheaderRightArea {
  margin-left: 360px;
}
/*
#mainheaderRightArea button {
  color: #204F7F;
  background-color: #F4F4F4;
  border: 0 none;
  height: 20px;
}

#mainheaderRightArea button > span {  
  text-decoration: underline;
}

#mainheaderRightArea button:hover {
  cursor: pointer;

}

#mainheaderRightArea button>span {
  margin: 0;
  text-decoration: underline;
}
*/
  #mainheaderRightArea button {
    margin: 5px;
  }
  #changeUnit > span {
    background-image: url(../images/changeUnit.png);
  }
  #logout > span{
    background-image: url(../images/logout.png);
  }

.userinfo {
  font-weight: bold;
}

#mainheaderRightArea form {
  display: inline;
}

/*
2.12. Overview bar
*/
.issuedetail_overviewbar {
  margin: 10px 0 !important;
}

.issuedetail_overviewbar td {
  color: #000000;
  white-space: nowrap;
  width: auto;
  vertical-align: bottom;  
}

/*
2.13. Header line
*/
.listHeader {
  margin: 5px 0;
  text-align: right;
  position: relative;
  min-height: 2.0em;
}

  .listHeader > h2 {
    display: inline-block;
    color: #204F7F;
    text-align: left;
    margin: 0;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  
  .listHeader>div, .masterSlaveHeader {
    display: inline-block;
    width: 80%;
    text-align: right;
  }
  
  .buttonList {
    display: inline-block;
  }
  
    .buttonList>li {
      display: inline-block;
      margin: 0 5px;
    }
    
    /* Small displays */ 
    @media only screen and (max-device-width: 1280px){
      .buttonList>li {
        display: inline-block;
        margin: 0 3px;
      }
    } 

/*
2.14. Common elements
*/
.spinner {
  background: no-repeat center url(../images/ajax-loader.gif);
  padding: 0 12px;
}

.dropZone {
  background: rgb(200,255,200);
  opacity: 0.7;
}
.ltie9 .dropZone {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
}


/*
2.15. Additional form styling
*/
.placeholder {
  color: rgb(128, 128, 128);
}

.mandatoryField, .inputError {
  outline: 2px solid rgb(255, 153, 153) !important;
  outline-color: rgba(255, 0, 0, 0.4) !important;
}

label.required:after, span.required {
  color: rgb(255,0,0);
  font-weight: bold;  
  margin-left: 0.3em;
}
label.required:after {
  content:'*';
}

.additionalFields, .additionalFieldsInline {
  display: none;  
}


input:checked ~ .additionalFields {
  display: block;
}

input:checked ~ .additionalFieldsInline {
  display: inline;
}

.markChecked input:checked ~ label{
  font-weight: bold;
}

.inputBlock {
  margin-bottom: 10px;  

  /* to compensate the border of the input fields. Otherwise the field would be wider than the container.
     -> obsolete with box-sizing
   padding-right: 4px; 
  */
}

  .inputBlock > label {
    font-weight: bold;
    color: #204F7F;
    white-space: nowrap;
  }

  .inputBlock.fullWidth > input, .inputBlock.fullWidth > textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  } 
  input.fullWidth, textarea.fullwidth, select.fullWidth {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
  }
  
  .inputBlock > p {
    margin: 0;
  }
  /*
   This is a design fix for ie 9 that makes the height of the fields 12,65 px.
   18 px = 2*2px padding, 2*1px border + 13px height
   */
  .ie9 .inputBlock.fullWidth > input, .ie9 input.fullWidth {
    height: 18px;
  }
  
  .inputBlock.fullWidth > label {
    display: block;
    margin-bottom: 3px;
  }

/*
2.16. Tree related stuff
*/
.categoryTreeArea {
  width: 31%;
  height: 600px;
  vertical-align: top;
  overflow: auto;
}

.unitDefinition {
  font-style: italic;
  color: #444;
}

.unitTreeArea {
  height: 600px;
  vertical-align: top;
  overflow: auto;
  padding: 5px;
}

.reportTreeArea {
  padding: 5px;
  width: 300px;
  height: 200px;
  overflow: auto;
}

.requestTreeArea {
  margin-bottom: 10px;
  height: 300px;
  overflow: auto;
}

.serviceCategoryNode {
 color: #204F7F;
 font-size: 110%; 
 font-weight:bold;
}

/*
2.17. Main container
*/
#div {
  margin: 0;
  padding: 5px;
  min-width: 900px;
}

/*
2.18. Widgets
*/
.categorySelection, .unitSelection {
  max-height: 300px;
  overflow: auto;
  position: absolute;
  z-index: 10;
}

/* the clear button */
.clear {
  background-image: url(../images/delete_black.gif);
}

.preview {
  top: 0;
  left: 0;
  padding: 20px !important;
  position: absolute;
  z-index: 1000;
  text-align: center;  
  overflow: hidden;
}

/*
A box that displays a list of items (e.g. templates). The structure of the box is
container
  header (h2), uses ui-state-default
  list (div, ul)   
*/
.itemList {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border:  1px solid #bbbbbb;
  border-radius: 5px;
  margin-bottom: 10px;
}

  .itemList > h2 {
    font-size: 1.0em;
    margin: 0;
    padding: 5px;
    border: 0 none !important;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
  }
  
  .itemList ul {
    padding: 5px;
    max-height: 200px;
    overflow: auto;
  }
  .itemListUl {
    max-height: 150px;
    overflow: auto;
  }

.imageLink {
  text-decoration: none;  
}

/*
2.19. Suggestion
*/
#suggestionDialog {
  padding: 10px;
  width: 540px; 
  max-height: 200px;
  z-index: 100;
}

.suggestionList {
  font-size: 11px;
  overflow:auto;
}
  .suggestionList > li {
    margin: 0 0 10px 0;
  }
    .suggestionList > li > input {
        margin-top: 5px;
    }
  
  .suggestionList h1 {
    font-size: 1.0em;
    font-weight: bold;
    margin: 0 0 5px 0;
  }
  .suggestionList p {
    margin: 0;
  }
  .suggestionList.large li {
    margin-bottom: 20px;
  }
  
  .suggestionList > li:hover {
    background-color: #F4F4F4;
    border: 1px solid #204F7F;
  }

#suggestCategory, #suggestSolution, #hideDialog, #suggestAllSolutions, .stopSLA {
  display:inline;
  border:none;
}

input.listbutton_selectandclose_solution {
  background-image: url(../images/apply.png);
}

input.listbutton_selectandsave_solution {
  background-image: url(../images/disk.png);
}

.suggestionToolbar {
  position: absolute;
}

/*
2.20. Breadcrumb navigation
*/
.breadcrumbs li {
  display: inline;
}

.breadcrumbs li:after {
  content: '>';
  margin: 0 0.5em;
}

.breadcrumbs li:last-child:after {
  content: none;
  margin: 0;
}



/*
3.  Pages
*/
/*
3.1.  Login
*/
#login {
  width: 250px;
  margin: 10px auto;
  padding: 10px;
  font-size: 12px;
  /*
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background-color: #f4f4f4;
  */
}

#login>h1 {
  font-size: 150%;
  margin-top: 0;
}

#login>label {
  font-weight: bold;
  display: block;
}

#login>input[type=text],#login>input[type=password] {
  width: 100%;
  font-size: 12px;
}

#login>a {
  margin-bottom: 10px;
  display: block;
  font-size: 10px;
  /*
  color: #0000FF;
  text-decoration: none;
  */
}

.loginTextHelp {
  color: #666666;
  margin: 2px 0 10px;
}

.captchareload {
  background-color: transparent;
  border: none;
  padding: 0;
  overflow: hidden;
  /* This part defines its new look. */
  background: url(../images/reload_captcha.gif) center no-repeat;
  width: 22px;
  height: 25px;
}

#captchatd {
  margin: 10px 0;
}

/*
3.2.  Unit and role selection
*/
#unitRoleSelectionContainer {
  text-align: center;
}

#dashBoardContainer {
  text-align: center;
}

#dashBoardContainer button {
  width: 120px;
}

.dash-board-site-container {
  font-size: 12px;
  margin-bottom: 10px;
}

.dash-board-site-container h1,.dash-board-site-container h2 {
  font-size: 1.0em;
  padding: 2px 5px;
  text-align: left;
}

.dash-board-site-container h1 {
  margin: 0 0 0 10px;
  font-size: 14px;
}

.dash-board-site-container h1>span,.dash-board-site-container h2>span {
  font-size: 1.0em;
  position: relative;
  bottom: -4px;
  background-color: #fff;
  padding: 2px 5px;
}

.dash-board-info-container,.dash-board-info-container_centered {
  border: solid #BBBBBB 1px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.dash-board-info-container {
  text-align: left;
}

.dash-board-info-container_centered {
  text-align: center;
}

.dash-board-site-container h2,.dash-board-info-container_centered h2 {
  border-bottom: 1px dotted #BBBBBB;
  margin: 5px 0;
}

.dash-board-info-container-roles {
  width: 130px;
  padding: 5px;
}
  .dash-board-info-container-roles > .tsubmit {
    margin: 3px 0;
  }

.dash-board-info-container-ticketLists {
  vertical-align: top;
  margin: 5px 5px 10px 0;
  background-color: white; 
}

  .dash-board-info-container-ticketLists > table {
    font-size: 12px;
    border-collapse: collapse;
    width: 270px;
    text-align: right;
    border: 1px solid #BBBBBB;
  }
  
    .dash-board-info-container-ticketLists td {
      padding: 2px 5px;
      font-weight: bold;
    }
    
    .dash-board-info-container-ticketLists th {
      font-weight: normal;
      width: 40%;
      padding: 2px;
      background-color: #FFF9E5; /*rgb(244, 244, 244);*/
    }

.escalation-ok {
  color: #316B20;
}

.escalation-warning {
  color: #B89819;
}

.escalation-nok {
  color: #fe4d1c;
}

.extended-eskalation-nok {
  color: #9B0004;
}

.unread-emails {
  color: #305ba6;
}

/*
3.3.  Search
 */
.searchArea {
  padding: 5px;
  margin: 15px 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ticketSearchAreaHeader,.customerSearchAreaHeader,.ticketRelatedSearchAreaHeader,.siteRelatedSearchAreaHeader,.emailSearchAreaHeader
  {
  text-align: left;
  background-position: top right;
  background-repeat: no-repeat;
  min-height: 36px;
  padding-right: 50px;
  vertical-align: top;
}

.ticketSearchAreaHeader {
  background-image: url(../images/search/big_yellow_ticket.png);
}

.customerSearchAreaHeader {
  background-image: url(../images/search/customer.png);
}

.ticketRelatedSearchAreaHeader {
  background-image: url(../images/search/ticket_related_search.png);
}

.emailSearchAreaHeader {
  background-image: url(../images/search/email_search_banner.png);
}

.siteRelatedSearchAreaHeader {
  background-image: url(../images/search/site_related_search.png);
}

.ticketSearchAreaHeader>input,.customerSearchAreaHeader>input,.ticketRelatedSearchAreaHeader>input,.siteRelatedSearchAreaHeader>input,.emailSearchAreaHeader>input
  {
  width: 250px;
  margin-right: 50px;
}

.ticketSearchAreaHeader>div,.customerSearchAreaHeader>div,.ticketRelatedSearchAreaHeader>div,
.siteRelatedSearchAreaHeader>div,.emailSearchAreaHeader>div
{
  width: 70%
}

.singlesearchcontent p {
  text-align: justify;
  line-height: 80%;
  margin-top: 3px;
}

div.searchBlock {
  text-align: left;
  margin-right: 30px;
  float: left;
  min-height: 15px;
}

div.innerSearchBlock {
  float: left;
  margin-right: 15px;
}

div.innerSearchBlockNO1 {
  float: left;
  margin-right: 2px;
}

div.outerSearchBlock {
  margin-right: 30px;
  min-height: 5px;
}

/* 
search buttons
input selector is necessary for specifity. otherwise input[type=submit] would override these rules
 */
input.buttonExpand32, input.buttonCollapse32 {
  font-size: 1.2em;
  color: #204F7F;
  border: 0;
  padding: 0 0 0 40px;
  overflow: hidden;
  background: transparent center left no-repeat;
  height: 32px;
  text-align: left;
  vertical-align: middle;
}

input.buttonExpand32 {
  background-image: url(../images/search/viewmag_plus.png);
}

input.buttonCollapse32 {
  background-image: url(../images/search/viewmag_minus.png);
}

input.buttonExpand32:focus, input.buttonCollapse32:focus {
  background-color: transparent;
}

/*
3.4.  Mailhistory details
/*
/*
issue_mailhistory_detail.jsp
the details
*/
.maildetail_detail_color {
  color: #204F7F;
}

.mailhistorybody {
  border: 1px solid #CCCCCC;
  padding: 5px;
}
.mailMenuEntry {
  height: 30px;
}
/*
3.5.  Template variables
*/
.variableName {
  margin-right: 10px;
}

/*
3.6.  Issue details
*/
/*
3.6.1.  Ticket details
*/
.issuenumber {
  text-align: center;
  font-size: 1.2em;
}

table.issuedetail_bottom {
  width: 99%;
  padding: 0px;
}

  .ticketlayer {
    z-index: 1000;
    width: 1210px;
    padding: 5px;
    border-color: #F4F4F4 !important; /* CHANGE FROM deafult color (.active) */
  }
  @media only screen and (min-device-width: 1400px) { 
    .ticketlayer {
      width: 1330px;
    }
  }
  @media only screen and (min-device-width: 1000px) and (max-device-width: 1200px){
  
  }

/*
3.6.2.  Common tab
*/
.issuedetail_common {
  padding: 5px;
  width: 50%;
  vertical-align: top;
}

.issuedetail_comment {
  width: 100%;
}

#userHistory>h2 {
  color: #204F7F;
  margin-left: 5px;
}

.chronology {
  color: #204F7F;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
  .chronology > thead {
    background-color: #E5ECFF;
    background: -moz-linear-gradient(top,  #ffffff 0%, #deeaf7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#deeaf7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#deeaf7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#deeaf7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#deeaf7 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#deeaf7 100%); /* W3C */
  }
  .ltie9 .chronology > thead {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#deeaf7',GradientType=0 )";
  }
  .ie9 .chronology > thead {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZWVhZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  }
  
  .chronology td {
    padding: 3px;
  }

.knowledgeLink {
  color: #204F7F !important;
}

/*
3.6.3.  Details tab
*/
.details {
  text-align: left;
  font-size: 10px;
}

  .details th {
    background-color: #f4f4f4;
    font-weight: normal;
    padding: 1px;
  }
  
  .details thead {
    font-weight: bold;
    font-size: 11px;
  }
    .details thead th{
      font-weight: bold;
      height: 30px;
      vertical-align: middle;
    }
    
.slaComment {
  width: 100%;
  height: 3.0em;
  min-height: 3.0em;
}

/*
3.6.4.  Dependencies tab
*/
.dependenciesBlock {
  margin-bottom: 20px;
  padding: 10px;
}

div.master_slave_ticket_description_text {
  margin-left: 30px;
  width: 475;
}


span.master_slave_function_link {
  text-decoration: underline;
  color: #0000FF;
  cursor: pointer;
  padding: 2px;
}

span.master_slave_function_link:hover {
  cursor: pointer;
  color: #E43117;
}

.regularTicketHeader,
.slaveTicketHeader,
.masterTicketHeader {
  padding-left: 37px;
  background: no-repeat left bottom;
  line-height: 32px;
}

.regularTicketHeader {
  background-image: url(../images/masterslave/big_yellow_ticket.png);
}

.slaveTicketHeader {
  background-image: url(../images/masterslave/big_blue_ticket.png);
  display: inline-block;
  text-align: left;
}

.masterTicketHeader {
  background-image: url(../images/masterslave/big_red_ticket.png);
}

input.master_slave_function_add_master_ticket, input.master_slave_function_add_slave_ticket {
  background-image: url(../images/masterslave/function_add_master_ticket.png);
  height: 16px;
  width: 17px;
  vertical-align: middle;
}

input.master_slave_list_remove_slave_ticket, input.master_slave_list_remove_master_ticket {
  background-image: url(../images/masterslave/list_remove_slave_ticket.png);
  height: 16px;
  width: 16px;
  vertical-align: middle;
}

/*
3.6.5.  E-mail tab
*/
.topAligned {
  vertical-align: top;
}

.communicationFolders li {
  margin-bottom: 0.5em;
}

.imageLinkButton {
  font-weight: bold;
  text-decoration: underline;
  color: #204F7F;  
  border: 0 none;
  padding: 0 0 0 21px;
  background-position: left center;
  background-repeat: no-repeat;
}
  .inbound {
    background-image: url(../images/email_inbound.gif);
  }
  .outbound {
    background-image: url(../images/email_outbound.gif);
  }
  .system {
    background-image: url(../images/email_system.gif);
  }
  .overview {
    background-image: url(../images/email_overview.gif);
  }
  .draft {
    background-image: url(../images/email_draft.gif);
  }

.unread {
  font-weight: bold;
}

.sendError {
  font-weight: bold;
  color: red;  
}

.email {
  background-image: url(../images/email_read_open.gif);
}
.unread .email {
    background-image: url(../images/email_unread_open.gif);
}

.priority_1, .priority_2 {
  background-image: url(../images/email_priority_high.gif);
}

.priority_4, .priority_5 {
  background-image: url(../images/email_priority_low.gif);
}

.attachment {
  background-image: url(../images/attach.png);
}

.recyclebin {
  background-image: url(../images/email_delete_draft.gif);
}


.ticketlink {
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  color: #204F7F;
}

.ticketlink:hover {
  color: #E43117;
}

.mailFolder {
  border-collapse: collapse;
}
  .mailFolder > thead {
    background-color: #E5ECFF;
  }
  .mailFolder > tbody:hover {
    cursor: pointer;
  }
    .mailFolder > tbody > tr {
      white-space: nowrap;
      vertical-align: top;
      background-color: white;
    }

.mailhistoryunreademailline {
  font-weight: bold;
}

.mailhistoryerroremailline {
  color: #D40000;
  font-weight: bold;
}

.emailedit {
  padding: 5px;
}

.emailpreview {
  padding: 5px;
  width: 1024px;
}

.editBlock {
  float: left;
  margin-right: 5px;
}
  .editBlock > h2 {
    margin-top: 0;
  }
  
.emailaddress {
  width: 600px;
  margin: 1px;
}

.phonenumbers {
  width: 250px;
}
  
#content {
  width:100%;
  max-height: none;
  height: 400px;
}
 #content.sms {
  max-height: 200px;
 }
@media only screen and (min-height: 900px) { 
  #content {
    height: 500px;
  }
}
  
/*
3.6.6.  Ticket history tab
*/
/*
ticketHistoryTable see userHistoryTable
*/

/*
3.7.  Communication client
*/
.addressBook {
  background-image: url(../images/bookopen.gif);
}

/*
3.8.  User settings
*/

#notificationDialog {
  width: 800px;
}
#userSettingsDetails thead td{
  background-color: transparent;
}

#userSettingsDetails td{
  background-color: #fff;
}

/*
3.9.  Quickticket
*/
/* issue_detail is right side */
.issue_detail label {
  color: #204F7F;
  font-weight: bold;
  display: block;
}

.issue_detail input,.issue_detail textarea,.issue_detail select {
  margin-bottom: 5px;
}

select.issuequick_categorydropdown {
  width: 393px;
}

/*
3.10. Call
*/
#selectedUserInformation > table {
  width: auto;
  margin: 0 auto;
}

/*
3.11. Template Preview
*/
.templateContent {
  margin: 5px 0;
  padding: 3px 3px 3px 23px;
}
  .templateContent.applied {
    background: url(../images/apply.png) 3px 50% no-repeat;
  }

  .templateContent:hover {
    outline: 1px solid #204F7F;
    background-color: #E5ECFF;
    cursor: pointer; 
  }

  .templateContent > p, .templateContent > h3 {
    margin: 0;
  }
  
  .templateContent > pre {
    font-family: Arial;
  }

/*
3.12. Service Requests
*/
.decline,
.confirm {
  color: white;
  border: 1px solid #BBBBBB;  
  font-weight: bold;
  padding: 3px 8px !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; 
  text-shadow: 0 1px 1px #000;
}
.decline {
  border-color: #a90329;
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
}
  .ie9 .decline {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5MDMyOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzhmMDIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDAwMTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  }
  .ie8 .decline {
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-8 */
  }
  
.confirm {
  border-color: #b4ddb4;
  background: #b4ddb4; /* Old browsers */
  background: -moz-linear-gradient(top,  #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(17%,#83c783), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* W3C */
}
  .ie9 .confirm {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZGRiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzgzYzc4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzUyYjE1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwOGEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iIzAwNTcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDI0MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  }
  .ie8 .confirm {
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-8 */
  }

.approved, .declined, .pending {
  padding-left: 20px;
  background: no-repeat left; 
  line-height: 16px; /* to have enough room for the icons */  
}

.approved {
  background-image: url(../images/apply.png);
}

.declined {
  background-image: url(../images/cross.png);
}

.pending {
  background-image: url(../images/zzz.gif);
}

/*
3.13. User details
*/
.defaultContact {
  display: none;
}
.defaultContact+label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/asterisk2.gif) center no-repeat;
  vertical-align: bottom;
}
.defaultContact:checked+label {
  background: url(../images/asterisk.gif) center no-repeat;
}
/* the class selectedContact is for compatibility with IE8, that does not support :checked. */
.defaultContact+label.selectedContact {
  background: url(../images/asterisk.gif) center no-repeat;
}

.contactGroup {
  background: none !important;
  margin-bottom: 1.0em;
}
  .contactGroup > h2 {
    font-size: 1.0em;
  }
  .contacts > li {
    margin: 3px 0;
  }

/*
5.  This and that
*/
/*
5.1.  Image buttons
*/

input.changecategoriesbutton { /* This part hides the original button. */
  background-image: url(../images/select.gif);
  width: 20px;
  height: 18px;
}

input.addticketemailaddress {
  font-size: 12px;
  font-weight: bold;
  color: #028000;
}

input.deleteAttachmentButton, input.deleteLinkButton {
  width: 16px;
  height: 16px;
  background-image: url(../images/delete_black.gif); /*url(images/ui-icons_469bdd_256x240.png);
  background-position: -32px  -192px;*/
  vertical-align: text-bottom;
  margin-left: 3px;
}

.issueAttachmentList, .mailAttachmentList {
  padding: 0;
  margin: 0 0 10px;
  list-style-type: none;
}
  .issueAttachmentList > li {
    line-height: 16px;
  }
  
.mailAttachmentList {
  margin: 0;
}

.mailAttachmentList > li{
  display: inline;
  margin-right: 5px;
}

button.iconButton {
  display:inline !important;
  border:none;
}


/******** asset properties **********/
.assetProperties {
  vertical-align: top;
}

#spStructure td {
  text-align: left;
}

.ctiheadline {
  color: #FF0000;
}

td.border-right, td.border-left {
  border: 1px solid #204F7F;
}

td.font {
  color: #204F7F;
}

/*
All jsps
TR of the 'header' (bar under the mainheader -> title, buttons)
*/
table.header {
  padding: 0px;
  width: 100%;
}

/*
  button for reports
*/
.reportbutton, input.reportbutton {
  width: 180px;
  height: 25px;
  margin: 3px 0;
}

/*
issue_detail.jsp, issue_detail_readonly.jsp
all detail titles (both 'common' and 'details')
*/
.detailname {
  font-weight: bold;
  color: #204F7F;
  /*white-space: nowrap;*/
  padding-top: 0px;
}

/*
All jsps
the title in the header bar
*/
.header_label {
  font-size: 12px;
  font-weight: bold;
  color: #204F7F;
  text-align: left;
}

td.label {
  font-weight: normal;
  color: #204F7F;
}

/*
issue_detail_readonly.jsp
the comment textarea
*/
textarea.multischedule_comment {
  width: 590px;
  height: 50px;
}

/*
details_issue_details.jsp, user_settings.jsp
*/
th.tableheader {
  background-color: #f4f4f4;
  font-weight: bold;
  height: 25px;
}

/*
Only used by language selection tag
*/
select.filter {
  width: 95px;
}

tr.visible {
  display: inline;
}

tr.hidden {
  display: none;
}

.list {
  background-color: transparent;
  border: 1px solid transparent;
}

.list:hover {
  cursor: pointer;
  background-color: #E5ECFF;
  border: 1px solid #204F7F;
}

#actionButtons {
  margin-top: 15px;
  text-align: center;
}

.mceButton {
  border-color: transparent !important;  
}

.mceToolbar {
  background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%) !important; /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)) !important; /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%) !important; /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%) !important; /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%) !important; /* IE10+ */
  background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%) !important; /* W3C */ 
}
  .ie9 .mceToolbar {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) !important;
  }
  .ltie9 .mceToolbar {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ) !important";
  }

/*
6.  Designsystem
*/
.designsystem h1 {
  font-size: 2.0em;  
}

.designsystem .tabBar, .designsystem .tab {
  background: url("../images/tabs.png") repeat-x left -50px;
}

.designsystem .tabBar {
  margin: 10px 0;
  height: 25px;
  font-size: 1.1em;
}

  .designsystem .tab {
    float: left; 
    margin: 0 5px;
    height: 25px;
    line-height: 25px;
    background-position: left -1px;  
    border: 1px solid #bbbbbb;
    border-bottom: 0 none;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-radius: 4px 4px 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    padding: 0 10px;
  }
    .designsystem .tab > a {
      color: #000;
    }

   .designsystem .tab.active {
    font-weight: bold;
    background-position: left -25px;
    position: static;  
   }  
   
.designsystem .tab button {
  background: transparent;
  color: #000;
  font-weight: normal;
  border: none;
  height: 25px;
  font-size: 1.0em;
}

.adminSection {
  padding: 10px 5px 20px;
}
  .adminSection h1 {
    margin: 0 0 1em;
    border-bottom: 1px solid #000;
  }

  .adminSection ul {
    display: inline-block;
  }

    .adminSection  li {
      display: inline-block;
      margin: 0 20px;
      width: 90px;
      text-align: center;
    }

/* .adminSection:nth-child(even) {
  background: #F8F8F8
}

.adminSection:nth-child(odd) {
  background: #F0F0F0
} */

/*
6.1.  Bar
*/
.controlPanelBar {
  border: 1px solid #BBBBBB;
  font-size: 1.2em;
  padding: 0 10px;
  margin-bottom: 10px;
  height: 30px;
  
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
   
  background: -moz-linear-gradient(top,  #f9f9f9 0%, #e7e7e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f9f9f9 0%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f9f9f9 0%,#e7e7e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f9f9f9 0%,#e7e7e7 100%); /* IE10+ */
  background: linear-gradient(top,  #f9f9f9 0%,#e7e7e7 100%); /* W3C */
}

  .ltie9 .controlPanelBar {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e7e7e7',GradientType=0 )";
  }
  .ie9 .controlPanelBar {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZmVmZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  }

  .controlPanelItemEntry {
    display: inline-block;
    font-weight: bold;
    vertical-align: center;
    line-height: 30px;
    margin-right: 5px;
    overflow: hidden;
  }
  
    .controlPanelItemEntry a {
      color: #000000;
      text-decoration: none;
      font-weight: normal;
      background: url("../images/separator.png") no-repeat right center;
      padding-right: 10px;
      line-height: 30px;
      padding: 10px 15px 10px 0;
    }

/*
6.2.  Wizard
*/
.step > button {
    border: 0px none;
}

.wizardButtons {
  margin: 10px 0;
  text-align: right;
}
  .wizardButtons > button {
    margin-left: 10px;
  }
  
/*
6.3.  Pages
*/
/*
6.3.2.  SLA list
*/
.slaList p {
  margin: 5px 0;
}

.slaList > li {
  margin-bottom: 2.5em;
}

/*
6.3.1.  SlaWizard
*/
.slaCondition {
  margin-bottom: 2.0em;  
}

  .slaCondition > h2 {
    font-size: 1.1em;
    font-weight: bold;
  }

#timeForm {
  position: relative;
}

.day {
  line-height: 20px;
}

  .day > h3 {
    display: inline-block;
    width: 100px;
    height: 20px;
    font-size: 1.0em;
    margin: 0;
  }

  .timeslots {
    width:240px;
    height: 20px;
    position: relative;
    display: inline-block;
  }

    .timeslot {
      display: block;
      position: absolute;
      height: 20px;
      border: 1px solid #000000;
      overflow: hidden;
      text-align: center;
      background-color: #aaffaa;
    }
    
      .timeslot > a {
        display: block;
        text-decoration: none;
      }
        .timeslot > a, .timeslot > a:visited  {
          color: #000;
        }

/*
6.3.3.  Group types, groups and group memberships
*/
#editGroup {
  border: 1px solid black; 
  margin: 5px; 
  padding: 10px
}

#groupTypes li, #groups li, #workflows li {
  font-size: 13px;
  margin-bottom: 5px;
  margin-left: 5px;
}

/*
6.3.4.  Request Workflow
*/
#availableApprover, #selectedApprover {
  margin-right: 10px; 
  background: #eee; 
  padding: 10px;
  border: 1px solid black;   
}

#availableApprover li, #selectedApprover li {
  cursor:move;
}

/*
6.4.  Common elements
*/