BODY {
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px; /** Deploy: */
  background-color: #B6BCD2; /* */
/** Develop: background-color: #B6BC88; /* */
  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.7em; /* 11px */

  /**
   TODO: For IE (and Opera) only
   See http://www.websawards.org/faq/scrollbars.htm
  */
  scrollbar-arrow-color: #154A8A;
  scrollbar-3dlight-color: #D6DCF2;
  scrollbar-darkshadow-color: #C5CAC9; /** var annan färg */
  scrollbar-shadow-color: #C5CAC9; /** var annan färg */
  scrollbar-track-color: #B6BCD2;
  scrollbar-base-color: #D6DCF2;
  scrollbar-face-color: #D6DCF2; /** Avoid scrollbar if not needed */
  overflow: auto;
}

/** Background color "outside", before logging in */
BODY.outside {
  background-color: white;
}

TABLE {
  font-size: 1em; /* 11px */
}

/* IMAGES */
IMG {
  border: none;
}

/** Form posting buttons, such as Ok, Delete... TODO: Remove after usages removed */
IMG.formButton {
  border: none;
  vertical-align: bottom;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 20px;
}

/* TABLES */
TABLE.list {

  border-top: 1px solid #D3D3D3;
  border-left: 1px solid #D3D3D3;
  /*
border-right: 1px solid black;
border-bottom: 1px solid black;
/*  text-align: left; */
  font-weight: normal;
  padding: 2px
}

TABLE.list TH {
  background-color: #D6DCF2;
  /** background-color: #E5EAE9;
  */
  border-right: 1px solid #D3D3D3;
  border-bottom: 1px solid #D3D3D3;
  text-align: left;
  font-weight: normal;
  padding: 2px
}

/**
 For cells and cells cells in tables in layout tables...
 */
TABLE.list TD, TABLE.layout TABLE.list TD {
  background-color: #FFFFFF;
  border-right: 1px solid #D3D3D3;
  border-bottom: 1px solid #D3D3D3;
  /*text-align: left;
  */
  font-weight: normal;
  padding: 2px;
  vertical-align: top;
}

TABLE.layout, TABLE.layout TD {
  background: White;
  border: none;
  vertical-align: top;
}

.group {
  background: White;
  vertical-align: top;
  border-top: 1px solid #D3D3D3;
  border-left: 1px solid #D3D3D3;
  border-right: 1px solid #D3D3D3;
  border-bottom: 1px solid #D3D3D3;
  text-align: left;
  font-weight: normal;
  width: 100%;
}

HR.line {
  color: #D3D3D3;
  height: 1px;
}

/** Make cells bold */
TABLE.list TR.bold TH, TABLE.list TR.bold TD {
  font-weight: bold;
}

TH.right, TD.right {
  text-align: right;
}

/* FORMS */

/* Snygg färg!
INPUT.text {
font-weight: bold;
color: #154A8A;
font-family: Arial, Helvetica, sans-serif
}
*/

div.exder-logo-old-size {
  /* 536 x 72 pixels */
  /*background-image: url('/html/images/other/kofax-exder-logo.jpg');*/
  background-image: url('/html/images/other/exder_blue_mid.png');
  background-repeat: no-repeat;
  background-size: 372px 112px;
  background-position: center;
  /* background-color: white; */
  /* Old height=173 + vspace=15 */
  height: 203px;
  /* Old width=500 + hspace=50 */  
  width:  600px;
}

INPUT, SELECT, TEXTAREA {
  border-right: #3A3A3A 1px solid;
  border-top: #3A3A3A 1px solid;
  border-left: #3A3A3A 1px solid;
  border-bottom: #3A3A3A 1px solid;
  font-weight: normal;
  font-size: 1.18em; /* 10pt = 13px (?) */
  font-smooth: never; /* Disable anti-alias to avoid IE 9 problems*/
  color: Black; /* font-family: Arial, Helvetica, sans-serif; */
  font-family: Arial, Helvetica, sans-serif;
  background-color: #F9F8F6
}

INPUT.error, SELECT.error, TEXTAREA.error {
  border-right: #000000 1px solid;
  border-top: #000000 2px solid;
  border-left: #000000 1px solid;
  border-bottom: #000000 2px solid;
  background-color: #F0691C
}

INPUT.required, SELECT.required, TEXTAREA.required {
  border-right: #3A3A3A 1px solid;
  border-top: #3A3A3A 1px solid;
  border-left: #3A3A3A 1px solid;
  border-bottom: 2px solid #154A8A;
  /* border: black 2px solid;
  */
}

INPUT.readonly, TEXTAREA.readonly, select:disabled {
  background-color: #DBD8D1;

  /* color: #FFFFFF;
  background-color: #BBBBBB;
  border: #AAAAAA 1px solid;
  */
}

/** Use for INPUT type="image" */
INPUT.image {
  border: none;
}

/**
 * Submit buttons on outside pages. Such as "Log in".
 */
INPUT.loginButton {
  border: none;
  font-weight: bold;
  color: #154A8A;
  cursor: pointer;
  background-color: white;
}

/** Headings */
H1 {
  font-weight: bold;
  font-size: 1.45em; /* 16px */
}

H2 {
  font-weight: bold;
  font-size: 1.09em; /* 12px */
}

HR {
  color: black;
}

input+label {
  cursor: hand;
}

/*  The class for labels that has tooltip */
.hasToolTip {
/*color: #00807A;  */
/*  font-weight : bold; */
/*  cursor: help; */
  border-bottom: 1px dotted Gray;
}

/** Used for spans: warning, approved, failed */

.warning {
  color: #F0691C;
  font-weight: bold;
}

.approved {
  color: #FFB400;
}

.failed {
  color: red;
}

.received {
  color: green;
}

/* LINKS */
A:link, A:visited {
  font-weight: bold;
  text-decoration: none;
  color: #154A8A;
}

/* Active could also be grouped with the above */
A:hover, A:active {
  text-decoration: underline;
  color: gray;
}

/* SHOW AND HIDE CLASSES */
.shown {
  DISPLAY: block; /** visibility : visible; /** MJ 2001-12-19 */
}

.hidden {
  DISPLAY: none; /** visibility : hidden; /** MJ 2001-12-19 */
}

/* ///////////////////////////////////////////////////////////////// */
/** A row seperating areas. */
TR.separator {
  background-color: #DCDCDC;
  font: bold;
  height: 30px;
}

/* ////////////////////////////// THE TABS ////////////////////////////////// */
TD.tab {
  background-color: #D6CEC6;
  border-top: 1px solid #393939; /** Maybe change to same as menu */
}

/** No hover effekt on tab links */
TD.tab A:hover, TD.tab A:active {
  text-decoration: none;
  color: #154A8A;
}

TD.tabBefore {
  background-image: url( ../images/layout/tab_before.gif );
  background-repeat: no-repeat;
  width: 5px;
}

TD.tabBetween {
  background-image: url( ../images/layout/tab_between.gif );
  background-repeat: no-repeat;
  width: 17px;
}

TD.tabAfter {
  background-image: url( ../images/layout/tab_after.gif );
  background-repeat: no-repeat;
  width: 17px;
}

/* ///////////////// Frame images /////////////////////////// */

/* First the corners */

TD.frameTopLeft {
  background-image: url( "/html/images/layout/top_left.gif" );
  font-size: 1px;
  width: 6px;
  height: 6px;
  background-position: bottom;
  background-repeat: no-repeat;
}

TD.frameTopRight {
  background-image: url( "/html/images/layout/top_right.gif" );
  font-size: 1px;
  width: 6px;
  height: 6px;
  background-position: bottom;
  background-repeat: no-repeat;
}

TD.frameBottomLeft {
  background-image: url( "/html/images/layout/bottom_left.gif" );
  font-size: 1px;
  width: 6px;
  height: 6px;
  background-position: top;
  background-repeat: no-repeat;
}

TD.frameBottomRight {
  background-image: url( "/html/images/layout/bottom_right.gif" );
  font-size: 1px;
  width: 6px;
  height: 6px;
  background-position: top;
  background-repeat: no-repeat;
}

/* Now the straight edges */
TD.frameTop {
  background-image: url( "/html/images/layout/top.jpg" );
  font-size: 1px;
  height: 6px;
  background-position: bottom;
  background-repeat: repeat-x;
}

TD.frameBottom {
  background-image: url( "/html/images/layout/bottom.jpg" );
  font-size: 1px;
  height: 6px;
  background-position: top;
  background-repeat: repeat-x;
}

TD.frameLeft {
  background-image: url( "/html/images/layout/left.jpg" );
  width: 6px;
  font-size: 1px;
  background-repeat: repeat-y;
}

TD.frameRight {
  background-image: url( "/html/images/layout/right.jpg" );
  width: 6px;
  font-size: 1px;
  background-repeat: repeat-y;
}

/** The class for the frame cell with all the contents */
TD.frameContent {
  background-color: white;
}

/* ///////////////// Button images /////////////////////////// */

/** Seach button, calendar button, new row button etc */
.buttonLink, A:hover .buttonLink {
  vertical-align: top;
  background-repeat: no-repeat; /* Same height as text field, center on field  */
  height: 20px;
  background-position: center center;
  margin-right: 5px; /* Fix cursor in IE */
  cursor: pointer; /** Does not in Firefox: display: inline-block; */
/** Workaround for width in Firefox, see http://www.thescripts.com/forum/thread161350.html and http://www.quirksmode.org/css/display.html#inlineblock */
  display: -moz-inline-box; /* Needed for Opera */
  display: inline-block; /* TODO Avoid underline at link hover (doesn't work in Firefox) */
  text-decoration: none; /* margin-top: 1px; */
/* margin:    1px; */
/*background-position: 0 1;*/
}

.searchButton {
  background-image: url( "/html/images/buttons/search.jpg" );
  width: 19px;
}

.calendarButton {
  background-image: url( "/html/images/buttons/calendar.gif" );
  width: 23px;
}

.newRowButton {
  background-image: url( "/html/images/buttons/new_row.gif" );
  width: 26px;
}

.timeButton {
  background-image: url( "/html/images/icons/clock.gif" );
  width: 23px;
}

/* /////////////////  Language specific buttons served via servlet ///////////////////////////// */

/** Form posting buttons, such as Ok, Delete... TODO: Move below and use,  */
.formButton, A:hover .formButton {
  vertical-align: bottom;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 20px;

  background-position: center center;
  background-repeat: no-repeat; /* Fix cursor in IE */
  cursor: pointer; /** Does not in Firefox: display: inline-block; */
/** Workaround for width in Firefox, see http://www.thescripts.com/forum/thread161350.html and http://www.quirksmode.org/css/display.html#inlineblock */
  display: -moz-inline-box; /* Needed for Opera */
  display: inline-block; /* Avoid underline at link hover (doesn't work in Firefox) */
  text-decoration: none;
}

.cancelButton {
	background-image: url( "/button/cancel.png" );
  width: 70px;
  height: 13px;
}

.okButton {
  background-image: url( "/button/ok.jpg" );
  width: 44px;
  height: 13px;
}

.saveButton {
  background-image: url( "/button/save.gif" ); /** Maximum width */
  width: 49px;
  height: 13px;
}

.finishButton {
  background-image: url( "/button/finish.gif" ); /** Maximum width */
  width: 64px;
  height: 13px;
}

.obliterateButton {
  background-image: url( "/button/obliterate.gif" ); /** Maximum width */
  width: 80px;
  height: 13px;
}

.deleteButton {
  background-image: url( "/button/delete.jpg" ); /** Maximum width */
  width: 55px;
  height: 13px;
}

/* /////////////////  Search popup ///////////////////////////// */

#searchPopupDiv {
/** Hidden by default */
  visibility: hidden;
  position: absolute;
}

/* The search popup itself */
table#searchPopupTable {
  padding: 0px; /* border: none; */
  border-top: 1px solid black; /* #D3D3D3 */
  border-left: 1px solid black;

  font-weight: normal;
}

/* The title bar of the search popup */
table#searchPopupTable th {
  cursor: pointer; /* width: 99%; */

  background-color: #D6DCF2; /* background-color: #E5EAE9; */
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  padding: 2px
}

/* The cell with the actual search page */
table#searchPopupTable TD {
  background-color: white;
  border-right: 1px solid black;
  border-bottom: 1px solid black; /* padding: 2px; */
  padding: 0px;
  vertical-align: top;
}

/* The close button of the search popup */
table#searchPopupTable th#searchClose {
/* TODO: Width doesn't work with Opera */
  width: 20px;
  height: 20px;
  font-weight: bolder;
  text-align: center; /* Note: X can be replaced by image by using invisible text and background-image */
}

/* The IFRAME with the search results */
#searchPopupFrame {
  overflow: auto;
  border: none;
}

/* /////////////////  Calendar popup ///////////////////////////// */
TABLE.calendar {
  background: #eeeeee;
  font: bold 12pt sans-serif;
  border: thin groove;
}

.calendarControl {
    font: bold 14pt sans-serif;
}

TD.calMonth {
  background: transparent;
  font: bold 16pt sans-serif;
}

TH.calDays, TR.calDays {
  background: #ccccff;
}

TD.calPrev {
  background: #cccccc;
}

TD.calThis {
  background: white;
}

TD.calNow {
  border-top: black 1px solid;
  border-left: black 1px solid;
  border-right: black 2px solid;
  border-bottom: black 2px solid;
  font: bold 12pt sans-serif;
}

TD.calNext {
  background: #cccccc;
}

TD.calHoliday {
  background: #ffcccc;
}

/* Disabled menu link (Smartmenus)*/
.NOLINK:link, .NOROLL:visited, .NOROLL:hover {
  color: #777777;
}

/* Same as warning but this is hidden from begin with */
.warningHidden {
  display: none;
  color: #F0691C;
  font-weight: bold;   
}

/* Used to format the request-help link */
.requestHelpLink{
  font-size: 10px;
}

/** Class for expired codelist entries in select menus */
option.expired {
  background-color: red
}

/** Class for unused codelist entries in select menus - grey text */
option.unused {
  color: #A0A0A0;
}

/* ============ Bubble popup used from jQuery plugin ============== */

.bubblePopup {
  position: absolute;
  display: none;
  z-index: 50;
  border-collapse: collapse;

  margin: 0;
  padding: 0;
}

.bubblePopup td.corner {
  height: 15px;
  width: 19px;
}

.bubblePopup td.popupTopLeft  { background-image: url(/html/images/layout/popupTopLeft.png); }
.bubblePopup td.popupTop      { background-image: url(/html/images/layout/popupTop.png); }
.bubblePopup td.popupTopRight { background-image: url(/html/images/layout/popupTopRight.png); }
.bubblePopup td.popupLeft     { background-image: url(/html/images/layout/popupLeft.png); }
.bubblePopup td.popupContent  { background-color: #fff; }
.bubblePopup td.popupRight    { background-image: url(/html/images/layout/popupRight.png); }
.bubblePopup td.popupBottomLeft { background-image: url(/html/images/layout/popupBottomLeft.png); }
.bubblePopup td.bottom          { background-image: url(/html/images/layout/popupBottom.png); /* text-align: center; */}
/* .bubblePopup td.bottom img { display: block; margin: 0 auto; } */
.bubblePopup td.popupBottomRight { background-image: url(/html/images/layout/popupBottomRight.png); }

/* ============ Phone icons ============== */

/** Same as buttonLink */
.phoneIconCommon {
  vertical-align: top;
  background-repeat: no-repeat; /* Same height as text field, center on field  */
  height: 20px;
  background-position: center center;
  margin-right: 5px; /* Fix cursor in IE */
  cursor: pointer; /** Does not in Firefox: display: inline-block; */
  /** Workaround for width in Firefox, see http://www.thescripts.com/forum/thread161350.html and http://www.quirksmode.org/css/display.html#inlineblock */
  display: -moz-inline-box; /* Needed for Opera */
  display: inline-block; /* TODO Avoid underline at link hover (doesn't work in Firefox) */
  text-decoration: none; /* margin-top: 1px; */
}
  
.phoneIcon {
  background-image: url( "/html/images/buttons/phone.gif" );
  width: 19px;
  height: 19px;
}  

.skypeIcon {
  background-image: url( "/html/images/buttons/skype.gif" );
  width: 16px;
  height: 16px;
}  

.threeIcon {
  background-image: url( "/html/images/buttons/three.jpg" );
  width: 15px;
  height: 19px;
}  

table#phonePopupContents th {
  text-align: center;
}

table#phonePopupContents td {
  text-align: left;
}

/**
 * Style sheet for CalendarPickerControl
 */

div.calendarbutton{
	position: absolute;
	width: 15px;
	height: 15px;
	background: transparent url("/html/images/buttons/calendar.gif") no-repeat center;
}
/**
* The calendar "Button" ie the img
*/
img.calendarbutton {
    position: relative; 
    cursor: pointer;
    vertical-align: bottom;
    height: 19;
}

/**
* The background for widget in ie
*/

iframe.controlbg {
      zIndex:49999; // below calcontainer
      position: absolute;
      display: none;
      border: 0px solid transparent;
    }

/**
* The calendars Container
*/
 div.calcontainer {
    zIndex: 50000;
    position: absolute;
    display: none;
 }

/**
* The actual control
*/
#CalendarPickerControl {
	background-color: transparent;
  /* width: 250px; Moved to as a constant in the DatePickerControl*/
	height: 200px;
}

/**
* The calendars Frame
*/
#CalendarPickerControl table.calframe{
	width: 100%;
	border: 1px solid black;
  background-color: #F0F0F0 ;
	text-align: center;
}

/**
* MonthName
*/
#CalendarPickerControl td.monthname{
	width: 100%;
	font: bold 15px  sans-serif;
  color:black;
  font-weight: bold;
  background-color: #D6DCF2;
}

#CalendarPickerControl table.navigation{
	width: 100%;
	text-align: center;
}

#CalendarPickerControl td.navbutton{
	font: normal 15px  sans-serif;
    color:black;
	font-weight: bold;
    background-color: #F0F0F0 ;
	border-width: 1px;
	border-style: solid;
    border-color: white #A8A8A8	#A8A8A8  white;
	cursor: pointer;
}

#CalendarPickerControl td.navbutton:hover{
	text-decoration: underline;
	border-color:  #606060 white white  #606060;
	bckground-color: #A8A8A8;
    
}

#CalendarPickerControl span.yearbutton{
	cursor: pointer;
}

#CalendarPickerControl span.yearbutton:hover{
	text-decoration: underline;
}

#CalendarPickerControl td.dayname{
	font: normal 11px  sans-serif;
	color: black;
	font-weight: bold;
	background-color:  #B6BCD2;
}

#CalendarPickerControl td.today{
	font: bold 12px  sans-serif;
    background-color: #F0F0F0;
    color: green;
	text-decoration: none;
	cursor: pointer;
	border-width: thin;
	border-style: solid;
    /*border-color: white #A8A8A8	#A8A8A8 white;*/
    border-color: green; 
}

#CalendarPickerControl td.today:hover{
	text-decoration: underline;
    background-color: darkgray;
    border-color:  #606060 white white  #606060;
}

/**
* The currently selected day
*/
#CalendarPickerControl td.current{
	font: bold 12px  sans-serif;
    background-color: #0099FF;
    color: white;
    text-decoration: none;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
    border-color:  #606060 white white  #606060;
}

#CalendarPickerControl td.current:hover{
	text-decoration: underline;
}

#CalendarPickerControl td.day{
    font: normal 11pt sans-serif;
    border: thin groove;
	background-color: white;
	color: blue;
	text-decoration: none;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
    border-color: white #A8A8A8 #A8A8A8 white;
    
}

#CalendarPickerControl td.day:hover{
	text-decoration: underline;
	background-color: darkgray;
	border-color:  #606060 white white  #606060;
}

#CalendarPickerControl td.weekend{
	font: normal 11px  sans-serif;
	color:black;
	text-decoration: none;
	background-color: darkgray;
	font-style: italic;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	border-color: white #606060  #606060  white;
}

#CalendarPickerControl td.weekend:hover{
	background-color: #A8A8A8;
	text-decoration: underline;
	border-color:  #606060 white white  #606060
}

#CalendarPickerControl td.dayothermonth{
	/*font:normal 11px  sans-serif;*/
	/*background-color: #cccccc;*/
	/*color: black;*/
	/*border: 1px solid white;*/
    
    font: italic 10pt sans-serif;
    /*border: thin groove;*/
	background-color: white;
	color: gray;
	text-decoration: none;
	cursor: pointer;
	/*border-width: 1px;*/
	/*border-style: solid;*/
    
}

#CalendarPickerControl td.weeknumber{
	font:normal 9px  sans-serif;
	background-color: #F0F0F0 ;
	color: black;
	border-width: 0px;
}