body { background: #a6a6a6 url(../images/bg.jpg) repeat-x top left;}
#body { background: rgb(133,197,237) url(../images/bgrad.png) repeat-x top left;}

fieldset { padding-bottom: 5px; padding-top: 0px; }
fieldset legend { margin-left: 5px; padding: 0 5px; font-weight: normal; }

pre.pre-wrap {
  white-space: pre-wrap;       /* CSS 3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;  
}

input.demo-button { background: orange; }

.search-options { font-weight: bold; font-size: 14px; }

table.single-column-settings { width: 100%; }
table.single-column-settings th { width: 305px; text-align: left; white-space: nowrap; font-weight: normal; }
table.single-column-settings input[type=text] { width: 300px; }
table.single-column-settings input.date { width: 4.8em; }
table.single-column-settings input.medium { width: 144px; }
table.single-column-settings input.mini { width: 50px; }
table.single-column-settings input.narrow { width: 80px; }
table.single-column-settings label { font-weight: normal; }
table.single-column-settings select { width: 300px; }
table.single-column-settings select.mini { width: 60px; }
table.single-column-settings select.narrow { width: 80px; }

table.hovering-vacations-table input { margin-top: 2px; }
table.hovering-vacations-table tbody th.employee-name,
table.hovering-vacations-table tbody tr > th:first-child[align="left"] {  /* freezepanes for vacation calendar */
	position: sticky;
	left: 0;
	z-index: 2;
	background: white;
	box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

table.hovering-vacations-table tbody tr > th:first-child[align="left"]:not(.employee-name) {
	display: revert !important; /* no flex for freezepanes */
	text-align: start;
}

.underline { text-decoration: underline; }
.play-stop { width: 33px; height: 34px; display: block; }
.play-button { background: url(/images/playstop.png) -36px 0 no-repeat; }
.stop-button { background: url(/images/playstop.png) no-repeat; }

.dragcursor { cursor: move; }
.applicationstate .null { color: rgb(72,173,64); }
.applicationstate .omitted { color: rgb(139,139,139); }
.applicationstate .pending { color: rgb(250,177,4); }
.applicationstate .message_sent { color: rgb(193,53,201); }
.applicationstate .interview_invitation_sent { color: rgb(5,255,28); }
.applicationstate .interviewed { color: rgb(255,239,64); }
.applicationstate .phone_interviewed { color: rgb(255,100,216); }
.applicationstate .introduced_to_customer { color: rgb(122,96,63); }
.applicationstate .potential { color: rgb(20,210,189); }
.applicationstate .summer_employee { color: rgb(20,97,207); }
.applicationstate .other { color: rgb(200,191,231); }
.applicationstate .not_potential { color: rgb(204,0,0); }
.applicationstate .not_potential_notified { color: rgb(101,15,113); }
.applicationstate .recruited { color: black; }
.applicationstate .recruited_and_paid_for { color: rgb(54,54,54); }
.applicationstate .old_employee { color: rgb(185,122,87); }
.applicationstate .additional_info_requested { color: rgb(255, 204, 153); }
.applicationstate .additional_info_received { color: rgb(136, 244, 208); }
.applicationstate .found_work { color: rgb(255, 163, 176); }
.applicationstate .will_contact { color: rgb(228, 209, 239); }
.applicationstate .invalid_application { color: rgb(217, 227, 243); }
#select.applicationstate option.null { color: rgb(72,173,64); }
#select.applicationstate option.omitted { color: rgb(139,139,139); }
#select.applicationstate option.pending { color: rgb(250,177,4); }
#select.applicationstate option.message_sent { color: rgb(193,53,201); }
#select.applicationstate option.interview_invitation_sent { color: rgb(5,255,28); }
#select.applicationstate option.interviewed { color: rgb(255,239,64); }
#select.applicationstate option.phone_interviewed { color: rgb(255,100,216); }
#select.applicationstate option.introduced_to_customer { color: rgb(122,96,63); }
#select.applicationstate option.potential { color: rgb(20,210,189); }
#select.applicationstate option.summer_employee { color: rgb(20,97,207); }
#select.applicationstate option.other { color: rgb(200,191,231); }
#select.applicationstate option.not_potential { color: rgb(204,0,0); }
#select.applicationstate option.not_potential_notified { color: rgb(101,15,113); }
#select.applicationstate option.recruited { color: black; }
#select.applicationstate option.recruited_and_paid_for { color: rgb(54,54,54); }
#select.applicationstate option.old_employee { color: rgb(185,122,87); }
#select.applicationstate option.additional_info_requested { color: rgb(255, 204, 153); }
#select.applicationstate option.additional_info_received { color: rgb(136, 244, 208); }
#select.applicationstate option.found_work { color: rgb(255, 163, 176); }
#select.applicationstate option.will_contact { color: rgb(228, 209, 239); }
#select.applicationstate option.invalid_application { color: rgb(217, 227, 243); }

option {overflow: visible; clip: auto;}

#content { width: 1120px; margin: 0 auto 50px; background: #fff; padding: 59px 0 150px; position: relative; overflow-x: hidden; overflow-y: visible; }

div.status_bar { width: 220px; }

span.report-info { margin-bottom: 5px; margin-top: 5px; display: block; }
div.inline-help { margin-bottom: 5px; margin-top: 5px; display: block; }

div.content-box { float: left; display: inline; margin: 0 10px; }
p.copyright { float: right; color: #c8c8c8; font-weight: bold; margin: 10px 20px 0 0; }

table.summary .description { margin: 5px 20px 10px 20px; }

/* debug 

div.content-box { border: magenta 2px solid; }
p.copyright { border: red solid 40px; background: red; }
#content { border: red 1px solid; } 
div.section { border: blue 1px solid; }
*/

h1 { display: none; }
a { color: #2b98c9; text-decoration: none; }
a[disabled=disabled] { color: black; text-decoration: none; cursor: default; }
a:hover { cursor: pointer; text-decoration: underline; }
a img { cursor: pointer; }
a[disabled=disabled]:hover { cursor: default; }
ul { list-style: none; }
a.low-profile { color: inherit; }

#fifteenth {
  position: absolute;
  border: 2px solid black;
  padding: 2px;
  background-color: #CCFFFF;
  visibility: hidden;
  z-index: 100000;
  float: left;
  filter: progid:DXImageTransform.Microsoft.Shadow(color = gray, direction = 135);
}

.inline { display: inline; }
.inline-block { display: inline-block; }

.overflow { overflow: visible; }

.anchor {
  position: relative;
}

/*#logo { position: absolute; right: 10px; top: 12px; }*/
#customer-logo { position: absolute; left: 10px; top: 9px; width: 400px; height: 40px; }
#busy-symbol { position: absolute; top: 0px; left: 0px; margin: 0px; width: 100%; z-index: 100000; cursor: wait;
/*background: url(../images/rasteri.png) repeat; */
/* background: url(../images/transparent.png) repeat !important; */
background: rgba(0, 0, 0, 0.099) !important; /* firefoxissa taustavari toimii luotettavammin kuin taustakuva */
background: none;
height: 100%;
}
#busy-symbol div { width: fit-content; margin-left: auto; margin-right: auto; padding: 3px; color: black; font-size: 18px; 
 border: 1px solid black;
 background: white;
 /*background: url(/resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/indicator.gif) center no-repeat;*/
 /* background: url(../images/activityanimation.gif) center no-repeat;*/ 
}
#busy-symbol div span { text-decoration: blink; }
/* #busy-symbol div { font-size: 18px; width: 100px; background: #f8f8f8; font-weight: bold; color: orange; text-decoration: blink; z-index: 100000; text-align: center; margin: 10% auto auto auto; } */
img.preload {
	height: 0; width: 0; border-width: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -30;
}

div.travel-compensation-placeholder { margin-left: -300px; margin-top: 5px;}
div.travel-compensation-placeholder_mobile { margin-left: -175px; margin-top: 5px;}

#navi { height: 46px; overflow: hidden; background: url(../images/bg_navi.png) repeat-x left top; margin-bottom: 5px; }
#navi li { float: left; height: 39px; line-height: 39px; }
#navi li.greeting { float: right; color: #fff; font-size: 14px; font-weight: bold; width: 190px; text-align: right; }
#navi li.extras { float: right; width: 140px; }
#navi li a { float: left; height: 39px; line-height: 39px; background: url(../images/navi.png) no-repeat left top; }
#navi li.normalTab a#TimeManagementPanel { width: 115px; background-position: -20px top; border-right: dotted rgb(124,205,232) 1px; }
#navi li.normalTab a#ReportingPanel, #navi li.adminTab a#ReportingPanel { width: 110px; background-position: -165px top; border-right: dotted rgb(124,205,232) 1px; }
#navi li.normalTab a#SalaryTabsPanel, #navi li.adminTab a#SalaryTabsPanel { width: 148px; background-position: -515px top; border-right: dotted rgb(124,205,232) 1px; }
#navi li.normalTab a#SettingsPanel { width: 100px; background-position: -305px top; border-right: dotted rgb(124,205,232) 1px; }
#navi li.normalTab a#InstructionsPanel { width: 70px; background-position: -428px top; border-right: dotted rgb(124,205,232) 1px; }
#navi li.normalTab a#OverviewPagePanel { width: 77px; background-position: -690px top; border-right: dotted rgb(124,205,232) 1px; }
#navi li.adminTab a#OverviewPagePanel { width: 77px; background-position: -690px top; border-right: dotted rgb(124,205,232) 1px; }
#navi li a#logout { float: right; width: 118px; background-position: -842px top; margin: 0 10px 0 12px; }
#navi li a#login { width: 168px; background-position: -509px top; }
#navi li a#preview { width: 101px; background-position: -677px top; }
#navi li.selected_normalTab a#TimeManagementPanel, #navi li a#TimeManagementPanel:hover { background-position: -20px -39px; }
#navi li.selected_normalTab a#ReportingPanel, #navi li.selected_adminTab a#ReportingPanel, #navi li a#ReportingPanel:hover { background-position: -165px -39px; }
#navi li.selected_normalTab a#SalaryTabsPanel, #navi li.selected_adminTab a#SalaryTabsPanel, #navi li a#SalaryTabsPanel:hover { background-position: -515px -39px; }
#navi li.selected_normalTab a#SettingsPanel, #navi li a#SettingsPanel:hover { background-position: -305px -39px; }
#navi li.selected_normalTab a#InstructionsPanel, #navi li a#InstructionsPanel:hover { background-position: -428px -39px; }
#navi li.selected_normalTab a#OverviewPagePanel, #navi li a#OverviewPagePanel:hover { background-position: -690px -39px; }
#navi li.selected_adminTab a#OverviewPagePanel, #navi li a#OverviewPagePanel:hover { background-position: -690px -39px; }
#navi li.selected_normalTab a#login, #navi li a#login:hover { background-position: -509px -39px; }
#navi li.selected_normalTab a#preview, #navi li a#preview:hover { background-position: -677px -39px; }
#navi li a#logout:hover { background-position: -842px -39px; }
#navi li a span { display: none; }

div.printIcons { position: absolute; margin-top: 10px; right: 20px; }

#offset { float: right; margin-right: 5px; margin-top: 10px; color: #a7a7a7; font-size: 11px; font-weight: bold; }

#second-tabs { float: left; width: 930px; font-weight: bold; padding-left: 10px; background: #f8f8f8; }
#second-tabs li { float: left; padding-top: 5px; padding-bottom: 4px; }
#second-tabs li a { color: black; padding: 5px; background: rgb(209, 206, 206); }
#second-tabs li.normalTab a:hover, #second-tabs li.selected_normalTab a, #second-tabs li.adminTab a:hover, #second-tabs li.selected_adminTab a { padding: 4px; background: rgb(237, 237, 237); border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; }
#tabs { float: left; overflow: hidden; margin-left: 10px; }
#tabs li { float: left; background: #ededed; margin-right: 1px; font-weight: bold; font-size: 14px; }
#tabs li a { float: left; height: 30px; line-height: 30px; text-decoration: none; padding-left: 6px; background: url(../images/tabs.png) no-repeat left top; }
#tabs li a span { float: left; background: url(../images/tabs.png) no-repeat right top; padding-right: 5px; }
#tabs li.normalTab a:hover, #tabs li.selected_normalTab a { background-position: left -30px; }
#tabs li.normalTab a:hover span, #tabs li.selected_normalTab a span { background-position: right -30px; }
#tabs li.adminTab a { background-position: left -90px; color: #fff; }
#tabs li.adminTab a span { background-position: right -90px; }
#tabs li.adminTab a:hover, #tabs li.selected_adminTab a { background-position: left -60px; color: #fff; }
#tabs li.adminTab a:hover span, #tabs li.selected_adminTab a span { background-position: right -60px; }

.masthead { background: rgb(228,228,228); padding: 10px; }
/*body.settings .masthead { padding: 20px 0 10px 45px; }*/
.masthead ul { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
/*.masthead ul li .ui-widget { font-size: 1em; }*/
.masthead ul li, .section ul li { margin-bottom: 4px; clear: both; }
.masthead ul li label { float: left; width: 250px; }
.masthead ul li .secondary label { float: none; }
.masthead ul li .smallfont { font-size: 12px; font-weight: normal; }
.masthead ul #first { margin-bottom: 3px; } 
.masthead label { font-size: 12px; font-weight: bold; } 
.masthead #drop-projects optgroup { font-style: normal; }
.masthead .secondary { margin-left: 250px; }
.sections { background: white; padding: 0px 10px; }
.section h2 { font-weight: bold; font-size: 14px; margin-top: 4px; clear: both;}
.section h3 { font-weight: bold; font-size: 12px; margin-top: 4px; }
.section h4 { font-weight: bold; font-size: 11px; margin-top: 3px; }
label.feedback { font-weight: bold; font-size: 12px; margin-top: 14px; display: block; clear: both;}
div.section { border-bottom: 1px dotted #a1a1a1; padding: 10px 0; padding-left: 1px; background: white; }
div.section-plain { padding: 3px 0 25px; padding-left: 1px; background: white; }
.section-plain h2 { font-weight: bold; font-size: 14px; margin-top: 4px; clear: both; }
/*.section label { font-weight: bold; font-size: 14px; }*/
.section label.option { width: 400px; font-weight: normal; font-size: 12px; }
.section label { font-weight: bold; }
.section input.secondary { margin-left: 60px; }
input.control { float: right; width: 150px; }
input.widebutton { width: 220px; }
input.verywidebutton { width: 360px; }
input.veryverywidebutton { width: 420px; }
input.autowidebutton { width: auto; }
.last { border: 0; }
.margin { margin-left: 5px; }
input.text { width: 300px; font-size: 14px; }

div.w_content a.facelift_toggle_new_old { width: 220px; font-size: 14px; font-weight: bold; background-color: lightgreen; color: black;padding: 3px 20px; margin: 5px;}

/* tämän on oltava input.text:in jalkeen */
input.travel-text, input.travel-text-middle { width: 200px;}

.masthead select, .section select { width: 300px; font-size: 12px; }
input.mini { width: 50px; }
.section ul li label { float: left; width: 150px; }
.section ul.bullets { list-style-type: disc; list-style-position: outside; padding-left: 15px; }
.section ul.bullets label { font-weight: bold; float: none; width: auto; }
.section ul.help-bullets { list-style-type: disc; list-style-position: outside; padding-left: 15px; }
.section ul.help-bullets li { margin-top: 5px; font-weight: bold; }
.section ul.help-bullets li p { margin-top: 2px; font-weight: normal; }
.employee-amend th { white-space: nowrap; text-align: left; width: 150px; }

.highlight { color: blue; }

.full-width {
  width: 100%;
}

#general.section p.large { overflow: hidden; margin-bottom: 5px; }
#general.section p.large label { float: left; font-weight: bold; font-size: 14px; width: 120px; padding-top: 3px; }
#general.section p.large input, #general.section p.large select  { width: 300px; }
#general.section p.large input { font-size: 14px; }

div.small { float: right; clear: right; background: rgb(228,228,228) url(../images/bg_small.png) no-repeat left top; padding: 10px 10px 7px 33px; width: 350px; overflow: hidden; margin-top: 10px; }
div.smaller { float: right; clear: right; background: rgb(228,228,228) url(../images/bg_small.png) no-repeat left top; padding: 10px 10px 7px 33px; width: 170px; overflow: hidden; margin-top: 10px; }
div.small-narrow { float: right; clear: right; background: rgb(228,228,228) url(../images/bg_small.png) no-repeat left top; padding: 10px 10px 7px 33px; width: 250px; overflow: hidden; margin-top: 10px; }
div.small-narrower { float: right; clear: right; background: rgb(228,228,228) url(../images/bg_small.png) no-repeat left top; padding: 10px 10px 7px 33px; width: 200px; overflow: hidden; margin-top: 10px; }
div.small label, div.small p { font-weight: bold; font-size: 12px; color: #747475; }
div.small input { margin-top: 5px; }
#add-workgroup input { width: 285px; margin-right: 5px; }
#add-client input { width: 135px; margin-right: 5px; }
.large { font-weight: bold; font-size: 14px; }
a.large, label.like_a_large { color: rgb(55,105,140); }
a[disabled=disabled].large { color: black; }
a.large:hover { color: #2b98c9; }
h2.section-heading { display: block; border-bottom: 1px dotted #a1a1a1; margin-bottom: 6px; } 
h3.section-heading { display: block; border-bottom: 1px dotted #a1a1a1; margin-bottom: 4px; margin-top: 5px; } 

div.wide { width: 745px; background: rgb(228,228,228) url(../images/bg_wide.png) no-repeat left top; padding: 33px 10px 7px 10px; margin-top: 10px; }
div.wide label { font-weight: bold; }
div.wide ul { margin-top: 5px; }

div.wide-on-top { width: 745px; background: rgb(228,228,228) url(../images/bg_wide-on-top.png) no-repeat left bottom; padding: 7px 10px 33px 10px; margin-bottom: 10px; }
div.wide-on-top label { font-weight: bold; }
div.wide-on-top ul { margin-top: 5px; }

/* debug
div.content-box { border: 1px solid magenta; }
#offset { border: black 1px solid;  }
#left-container { border: red 1px solid; }
#sidebar { border: blue 1px solid; } 
*/

table.setting { text-align: left; }
table.setting table.setting { margin-bottom: 10px; }
table.setting th { font-size: 12px; font-weight: bold; padding: 5px 0px 0px 5px; }
table.setting tr.datarow_odd { background: #e1edf3; }
table.setting tr.new_datarow { color: blue; }
table.setting tr.deactivated { color: #adadae; }
table.setting tr.nested_datarow { background: #ededed; }
table.setting tr.nested { background: #ededed; }
table.setting td.skip, table.setting th.skip { background: #f8f8f8; }

table.setting td { padding: 1px 0 1px 5px; }
table.setting td.links { width: 100px; }
table.setting td.number { width: 70px; }
table.setting input.medium { width: 120px; }
table.setting input.moderate, .masthead input.moderate { width: 180px; }
th.moderate { width: 180px; }
input.semi { width: 150px; }
table.setting input.phonelength, .masthead input.phonelength { width: 120px; }
table.setting input.narrow, #time-tracking-table input.narrow, .section input.narrow, .masthead input.narrow, .wide input.narrow, .masthead select.mini { width: 4.8em; }
table.setting input.wide { width: 300px; }
table.setting select.mini, div.section select.mini { width: 100px; }
select.semi { width: 150px; }
table.setting select.nano { width: 50px; }
table.setting select.narrow, .masthead select.narrow, .wide select.narrow, .wide-on-top select.narrow { width: 200px; }
table.setting select.wide, select.wide { width: 400px; }
select.extrawide { width: 600px; }
input.extrawide { width: 600px; }

input.number { width: 50px; }
input.micro { width: 20px; }
input.single-number { width: 10px; }
input.global-time { width: 3em; }
input.short-time { width: 32px; }
input.nano { width: 15px; }
input.date { width: 4.8em; }
input.price { width: 50px; text-align: right; }
input.shortname { width: 100px; }
input.medium { width: 180px; }
input.global-moderate { width: 200px; }
select.medium { width: 180px; }
select.wide { width: 250px; }
input.global-wide { width: 250px; }
input.global-narrow { width: 60px; }
select.narrow { width: 80px; }
select.micro { width: 60px; }
select.global-wide { width: 250px; }
.global-more-wide { width: 300px; }
select.global-small { width: 150px; }
select.extra-wide,
.content-panel #full-container input.extra-wide,
.content-panel #full-container select.extra-wide,
.wicket-modal input.extra-wide { width: 560px; }
input.longdescription { width: 400px; }
input.verylongdescription { width: 800px; }
textarea.moderate { width: 300px; height: 60px; }
textarea.sufficient { width: 350px; height: 130px; }
textarea.widelong { width: 700px; height: 240px; }
textarea.wide { width: 600px; height: 50px; }
textarea.widemoderate { width: 600px; height: 60px; }

.rightalign { text-align: right; padding-right: 2px; }

table#contracts { text-align: left; width: 890px; }
table#contracts td.selections { padding-bottom: 10px; }
table#contracts td { padding: 5px; }
table#contracts td.name { width: 140px; }
table#contracts td.links { width: 220px; }
table#contracts th { font-size: 14px; font-weight: bold; padding: 0 0 5px 5px; }
table#contracts tr.even { background: #e1edf3; }

table.workshift-options th { padding: 3px 3px 0px 3px; }
table.workshift-options tr { margin-bottom: 1px; padding: 0px; }
table.workshift-options tr.even { background: #e1edf3; }

body.settings p.continue { margin: 20px 0 0 5px; font-size: 14px; }
div#sidebar-memo { margin-left: 10px; padding: 10px 10px 10px 15px; margin-bottom: 10px; background: url(/images/muistilappu.png) no-repeat; overflow: hidden; width: 160px; height: 150px; }
div.calendar ul { overflow: hidden; margin-bottom: 10px; }
div.calendar ul li { float: left; padding: 0 3px; }
div.calendar ul a { text-decoration: none; font-weight: bold; font-size: 14px; }
table.calendar { width: 200px; margin-bottom: 10px; border-bottom: 10px solid #f8f8f8; }
table.calendar th { background: #e6e6e6; text-transform: uppercase; font-size: 10px; text-align: center; padding: 4px 2px; } 
table.calendar td { background: #f8f8f8; text-align: right; color: #6a6a6a; padding: 5px 2px; }
/*table.calendar tr.first td { padding-top: 7px; }*/
table.calendar td a { text-decoration: none; }
table.calendar td a:hover { color: #2b98c9; }
table.calendar td.calendar_fg_holiday_weekend a { color: red; }
table.calendar td.calendar_fg_weekend a { color: #c7c6c6; }
table.calendar td.calendar_fg_weekend a:hover { color: #6a6a6a; }
table.calendar td.previous { color: #e4e2e2; }
table.calendar th.calendar_weeknumber { padding: 0px; border-right: 1px solid #6a6a6a; font-weight: bold; }
table.calendar td.calendar_weeknumber, table.calendar td.calendar_weeknumber_selected { padding: 5px 5px; border-right: 1px solid #e5e5e5; font-weight: bold; }
table.calendar td.calendar_weeknumber a { color: #6a6a6a; text-decoration: none; }
table.calendar td.calendar_today a { background: #c2dbeb; }
table.calendar tr.calendar_selected td, table.calendar tr.calendar_selected td a { color: #0376bf; font-weight: bold; }
table.calendar td.calendar_bg_othermonth_normal, table.calendar td.calendar_bg_othermonth_normal_weekend { background: rgb(252,252,252); }
table.calendar td.calendar_locked { font-style: italic; }
table.calendar tr.calendar_selected td.weekend { color: #88bada; }
table.calendar td.month { background: #fff; }

#left-container { float: left; width: 729px; margin-left: 3px; margin-top: 3px; }
#full-container { float: left; width: 100%; }
#sidebar { float: right; width: 195px; padding-right: 10px; margin-left: 3px; margin-top: 3px; }
#sidebar h5 { color: #252525; font-size: 10px; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; }
#sidebar p { margin-bottom: 5px; } 
input.lock_button { background: rgb(153, 204, 0); font-weight: bold; cursor: pointer; }
input.lockable_button { background: rgb(255, 201, 14); font-weight: bold; cursor: pointer; }
input.bill_button { background: rgb(242, 242, 140); font-weight: bold; cursor: pointer; }

input.invite_style { background: rgb(153, 204, 0); font-weight: bold; }

div.new-block {
  clear: left;
  display: block; 
}

option.customer_approved_hours  { background: rgb(186,255,186); }
option.customer_unapproved_hours { background: rgb(255,255,159); }

option.approved_salary_calculation  { background: rgb(186,255,186); }
option.unapproved_salary_calculation { background: rgb(255,255,159); }

.inframe { overflow-x: auto; position: relative; overflow-y: visible; }

#time-tracking-table { margin-bottom: 10px; width: 100%; }
#time-tracking-table th { background: #ededed; text-transform: uppercase; font-size: 10px; padding: 4px 2px; }
#time-tracking-table th.date a { text-decoration: none; background: #ededed url(../images/date.png) no-repeat right -12px; padding-right: 12px; }
#time-tracking-table th.date a.desc { background-position: right 3px; }
#time-tracking-table td { border-bottom: 1px dotted #cbcbcb; font-size: 11px; padding-right: 5px; padding-top: 1px; }
#time-tracking-table tr.last_of_the_day td, #time-tracking-table td.last_of_the_day { border-bottom: 1px solid rgb(205,205,205); padding-bottom: 3px; }
#time-tracking-table td.odd, #mixed-mode-work-time-editor td.odd { background: #f8f8f8; }
#time-tracking-table td.even, #mixed-mode-work-time-editor td.even { background: white; }
#time-tracking-table td.combo { border-bottom: 0; }
/*#time-tracking-table tr.combo td { border: 0; }
#time-tracking-table tr.combo td.combo { border-bottom: 1px dotted #cbcbcb; }*/
#time-tracking-table td p.separate { float: right; }
#time-tracking-table td.date { width: 8%; font-size: 10px; font-weight: bold; text-transform: uppercase; padding-left: 2px; padding-right: 5px; }
#time-tracking-table td.date div div { float: left; }
#time-tracking-table td.date div p { float: right; text-align: right; }
#time-tracking-table h6 { font-size: 11px; font-weight: bold; margin-left: 3px; }
#time-tracking-table td.activity-locked ul { list-style-type: disc; list-style-position: inside; margin-left: 3px; }
#time-tracking-table td.links { padding-right: 10px; }
#time-tracking-table td.notes { padding: 0 10px; }
#time-tracking-table td.display-total-hours { text-align: right; font-size: 18px; font-weight: bold; padding-left: 5px; padding-right: 3px; }
#time-tracking-table td.display-task-hours { text-align: right; font-size: 16px; font-weight: bold; padding-right: 3px; }
#time-tracking-table table { clear: both; }
#time-tracking-table table td.detailed-hour-descriptions { border: none; color:#949393; font-size: 10px; font-weight: normal; }
#time-tracking-table table td.detailed-hours { border: none; color: #696868; text-align: right; }
/*#time-tracking-table td.buttons*/ 
input.submit { font-weight: bold; background-color: lightgreen; }
#time-tracking-table td.sickday { background: #fae6e6; }
#time-tracking-table td.holiday { background: #dbfbe6; }
#time-tracking-table td.weekend { background: #f2f2f2; }
#time-tracking-table td div.relative-container { position: relative; }
#time-tracking-table img.accepted { position: absolute; right: 0px; top: 0px; }
#time-tracking-table td.full-width-input input { width: 100%; }
#time-tracking-table input.hoursField { border: 1px dotted rgb(127,157,185); text-align: right; width: 40px; height: 30px; padding-right: 2px; padding-top: 10px; font: 12px/1.2 arial,sans-serif; color: #3c3c3d; font-weight: bold; }
#time-tracking-table input.lunchbreak { width: 100%; }
#time-tracking-table select.shadow { border: none; }
#time-tracking-table td.activity select { border: 1px dotted rgb(127,157,185); width: 160px; display: block; }
#time-tracking-table select.inline { border: 1px dotted rgb(127,157,185); width: 160px; display: inline; }
#time-tracking-table textarea { border: 1px dotted rgb(127,157,185); font: 14px arial,sans-serif; color: #3c3c3d; width: 100%; height: 40px; }
#time-tracking-table td.activity.odd select, #time-tracking-table td.odd textarea, #time-tracking-table td.odd input.hoursField { background: #f8f8f8; }
td.error input, td.error textarea { border: 2px solid red; }
.input-font { font: 11px/1.2 arial,sans-serif; }
.compensation-editor .compensation-explanation-container { min-width: 164px; }

#next-prev { overflow: hidden; float: right; margin-top: 10px; }
#next-prev li { float: left; margin-left: 8px; font-weight: bold; }

.popper { border: 3px solid #484848; background: #fff; width: 480px; padding: 10px; position: absolute; }
.popper select.multiple { width: 480px; height: 120px; font-size: 12px; margin: 10px 0 5px; }
.popper .title-tab { border: 3px solid #484848; border-bottom: 3px solid #fff; background: #fff; text-align: center; font-size: 11px; font-weight: bold; margin: -28px 0 0 370px; }
#choose-custom-timeframe { border: 3px solid #484848; width: 420px; height: 235px; padding: 10px; position: absolute; top: 140px; left: 316px; background: #fff; }
#choose-custom-timeframe table.calendar { float: left; margin-right: 10px; }
#choose-custom-timeframe table.calendar a { text-decoration: none; }
#choose-custom-timeframe p { clear: both; }
#customers-add-list { left: 50px; top: 480px; }

select.compensation-country { width: 140px; }

.section p { margin-bottom: 10px; }

#loginForm, .loginStyle { margin-left: 10px; }
#loginForm p, .loginStyle p { font-size: 14px; margin-bottom: 10px; color: rgb(108,108,108); }
#loginForm h2, .loginStyle h2 { margin: 20px 0 10px; font-size: 24px; }
#loginForm fieldset, .loginStyle fieldset { border: 0; }
#loginForm label, .loginStyle label { display: block; font-size: 14px; margin-bottom: 3px; }
#loginForm input.text, #loginForm select.text, .loginStyle input.text, .loginStyle select.text { color: #7f7f7f; font: 14px/1.2 arial,sans-serif; padding: 2px; margin-bottom: 5px; width: 250px; }
#passwordForm input.submit, #loginForm input.submit, .loginStyle input.submit { font-size: 16px; margin: 7px 0px 20px 0px; _margin-left:-10px; }
#loginForm a, .loginStyle a { font-size: 11px; }
#logoutForm a { font-size: 11px; float: right; clear: both; }

input.iedummylong { width: auto; padding: 0px 5px; overflow: visible; }

div.error { z-index: 1000; position: absolute; width: 116px; background: url(../images/error_bottom.png) no-repeat left bottom; padding-bottom: 15px; font-size: 11px; color: #ff0000; }
div.error .wrapper { background: url(../images/error.png) no-repeat left top; padding: 12px 10px 10px 10px; }
div.tooltip { z-index: 1000; position: absolute; width: 220px; background: url(../images/tooltip_bottom.png) no-repeat left bottom; padding-bottom: 20px; font-size: 11px; }
div.tooltip .wrapper { background: url(../images/tooltip.png) no-repeat left top; padding: 15px 15px 10px 15px; }
div.tooltip h3 { margin-bottom: 5px; }

ul.feedbackPanel { font-size: 14px; font-weight: bold; text-align: left; margin-bottom: 10px; width: 800px; margin-left: auto; margin-right: auto; overflow: hidden; }
ul.feedbackPanel li.feedbackPanelWARNING, ul.wizard-feedbackPanel li.feedbackPanelWARNING { background: rgb(254,233,92) url(/images/warning_z.gif) no-repeat; color: rgb(105, 66, 0); line-height: 20px; padding: 0px 5px 0px 20px; vertical-align: middle; }
ul.feedbackPanel li.feedbackPanelERROR, ul.wizard-feedbackPanel li.feedbackPanelERROR { background: rgb(254,233,92) url(/images/error_z.gif) no-repeat; color: red; line-height: 20px; padding: 0px 5px 0px 20px; vertical-align: middle; }
ul.feedbackPanel li.feedbackPanelINFO, ul.wizard-feedbackPanel li.feedbackPanelINFO { background: rgb(204,255,204) url(/images/accepted_s.png) no-repeat; color: rgb(105, 66, 0); line-height: 20px; padding: 0px 5px 0px 20px; vertical-align: middle; }

.componentFeedbackERROR { background: rgb(254,233,92) url(/images/error_z.gif) no-repeat; color: red; line-height: 20px; padding: 0px 5px 0px 20px; vertical-align: middle; }
.componentFeedback { display: inline; margin-left: 5px; }

/*
#feedback-panel li.feedbackPanelERROR   { background: rgb(254,233,92); color: red; margin: 0px 8% 0px 8%; padding: 0px 5px 0px 5px; }
*/

/* HUOM! virhekuplan/tooltipin kulloistakin sijaintia varmasti kannattaa paivittaa mielummin javascriptilla dynaamisesti ja poistaa alla oleva sijoittelu */
div.error { left: 470px; top: 293px; }
#example1 { left: 465px; top: 275px; }
#example2 { left: 90px; top: 405px; }

form.filter-form a.reload-button { float: right; }
form.filter-form fieldset.filter-form-fieldset { float: left; clear: both; width: 100%; }
form.filter-form fieldset.filter-form-fieldset legend { font-weight: bold; }
div#status-options { padding: 24px 12px 0 0; }
.multiple-filtering-form div#status-options { padding: 8px 0; }
.status-options-flexbox { display: flex; width: 100%; }
.multiple-filtering-form .status-options-flexbox { width: unset; }
form.filter-form div#range_selection { float: right; clear: right; }
form.filter-form div#range_selection input[type=text] { width: 5.1em; }
form.filter-form div#range_selection select { width: 130px; }
form.filter-form div#selectors { float: left; }


table.reservations-table { margin-bottom: 10px; }
table.reservations-table th { background: #ededed; text-transform: uppercase; font-size: 10px; padding: 4px 2px; }
table.reservations-table td { border-bottom: 1px dotted #cbcbcb; font-size: 11px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; }
table.reservations-table td.odd { background: #f8f8f8; }
table.reservations-table td.even { background: white; }
table.reservations-table .new_reservation { background: yellow; }
table.reservations-table .order_confirmed { background: rgb(0,255,0); }
table.reservations-table .order_cancelled { background: rgb(150,150,150); }
table.reservations-table .order_abrupted { background: red; }
table.reservations-table .order_confirmed_becoming_obsolete { background: rgb(248, 152,0); }
table.reservations-table .unconfirmed_replacement_order { background: rgb(248, 204,0); }
table.reservations-table input.workshift { width: 4.8em; font-weight: bold; }
a.employees_available { color: blue; }
a.employees_unavailable { color: red; }
date_unfulfilled { color: red; }

table.service-demand-organizer { margin-bottom: 10px; }
table.service-demand-organizer .new_reservation { background: yellow; }
table.service-demand-organizer .order_confirmed { background: rgb(0,255,0); }
table.service-demand-organizer .order_cancelled { background: rgb(150,150,150); }
table.service-demand-organizer .order_abrupted { background: red; }
table.service-demand-organizer .order_confirmed_becoming_obsolete { background: rgb(248, 152,0); }
table.service-demand-organizer .unconfirmed_replacement_order { background: rgb(248, 204,0); }

input.edit-button-icon { background-image: url(/images/edit.png); width: 20px; height: 20px; background-repeat: no-repeat; }
input.notify-button-icon { background-image: url(/images/notify.png); width: 20px; height: 20px; background-repeat: no-repeat; }

/*.workshiftstate_booking { background: yellow; } */
/*.workshiftstate_auctioned_to_one_or_more_employees { background: rgb(248, 152,0); }*/
/*.workshiftstate_proposed_to_specific_employee { background: rgb(248, 204,0); }*/
/*.workshiftstate_reservation_confirmed { background: rgb(0,255,0); }*/
/*.workshiftstate_reservation_cancelled { background: red; }*/
/*.workshiftstate_booking_cencelled { background: rgb(150,150,150); }*/

.workshift-locked { background-image: url(/images/lockedstate.gif); background-repeat: no-repeat; background-position: top right; } 

table.workshifts-table { margin-bottom: 10px; }
table.workshifts-table th { background: #ededed; text-transform: uppercase; font-size: 10px; padding: 4px 2px; }
table.workshifts-table td { border-bottom: 1px dotted #cbcbcb; font-size: 11px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; }
table.workshifts-table td.odd { background: #f8f8f8; }
table.workshifts-table input.workshift { width: 4.8em; font-weight: bold; }
table.workshifts-table td input.check { width: auto; }
table.workshifts-table td select { width: 30px; }
table.workshifts-table td.even { background: white; }
table.workshifts-table .sickleave { background: red; } /* kuten order_abrupted */

.work-shifts-editor-sticky-left-labels {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #f8f8f8;
	box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.work-shifts-editor-sticky-top-labels {
	position: sticky;
	top: 0;
	z-index: 3;
	background: #f8f8f8;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.work-shifts-drag-scrollable-sticky {
	max-height: 95vh;
}

.work-shift-printout-sheets-panel .table-overflow-container {
	height: 100%;
	overflow-x: auto;
}

.work-shift-printout-sheets-panel table.time-report tr[class^="date"] > th[align="right"]:first-child,
.work-shift-printout-sheets-panel table.time-report th.corner {
    position: sticky;
    left: 0;
    z-index: 2;
    background: white;    
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/*
input.new_reservation_unavailable { background: salmon; }
input.processing_reservation_unavailable { background: rgb(255, 194, 180); }
input.processing_reservation_available { background: rgb(255, 255, 203); }
input.processing_reservation_planned { background: rgb(0,255,0); }
*/
select.special option { max-width: 600px; }

table.search_panel tr.odd { background: #f8f8f8; }
table.search_panel tr.even { background: white; }
tr.warn{ background-color: rgb(254,233,92); color: rgb(105, 66, 0); }

.overridden { text-decoration: line-through; }
.overriding { color: red; }
.warning {background-color: rgb(254,233,92); color: rgb(105, 66, 0); font-weight: bold;} /* esim. vuosiloman selityspaneeli */
.infotext {font-weight: bold;} /* Esim. VacationEarnedEditFormPanel */

.contractPeriod_ended { background-color : #9cadbe; }
.contractPeriod_ended_without_reason { background-color : #f4cccc; }

.erroneous_data { color: red; }

.warning_data { color: orange; }

table.listing tr.noReport {
    background: #FF5C33;
}

table.listing tr.noTask {
    background: #FF5C33;
}

table.wide-selection-table,
select.wide-unit-selection { width: 100%; }
select.narrow-unit-selection { width: 65%; }
.bold-message { font-weight: bold; }
.search-box-field { display: block; }
.content-panel #full-container .unset-width { width: unset; }

.content-panel #full-container .vacation-wishes {
  max-width: 400px;
  display: inline-block;
  font-weight: 300;
}

.bold-message { font-weight: bold; }

#full-container .yui-calendar .outside_period { background-color: rgb(140, 153, 172); }