:root {
	--color-primary: #059b72;
	--color-persistent-white: #ffffff;
	--color-persistent-black: #000000;
	--color-button-primary-normal: #07383e;
	--color-button-primary-hover: #054c54;
	--color-text-button-primary: #ffffff;
	--color-button-secondary-normal: #ffffff;
	--color-button-secondary-hover: #f7f9f9;
	--color-text-button-secondary: #07383e;
	--color-text-primary: #222222;
	--color-text-primary-inv: #ffffff;
	--color-text-link: #006774;
	--color-text-marked: #007f8f;
	--color-text-disabled: #6a6a6a;
	--color-text-tag-neutral: #3f3f3f;
	--color-disabled: #dedede;
	--color-border: #aeaeae;
	--color-surface-warning: #feead3;
	--color-surface-warning-system: #fedab3;
	--color-surface-subtle: #f7f7f7;
	--color-surface-discreet: #e5f8f2;
	--color-surface-elevated: #f2fcf8;
	--color-surface-offline: #dedede;
	--color-surface-offline-system: #3f3f3f;
	--color-surface-discreet-hover: #ccf3e6;
	--color-surface-discreet-b: #e5f8f2;
	--color-surface-error: #ffe8ee;
	--color-surface-error-lighter: #fff8fa;
	--color-error: #d0184d;
	--color-tag-neutral: #f1f1f1;
	--color-tag-neutral--80: #f1f1f1cb;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
	color: var(--color-text-primary);
	font-family: arial, sans-serif;
	font-size: 13px;
}

a {
	color: var(--color-text-link);
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Blue external icon. */
a[target="_blank"]:after {
	background: url(../images/icons.png) transparent no-repeat -48px -48px;
	content: "";
	display: inline-block;
	height: 9px;
	margin-left: 6px;
	width: 9px;
}

a.noExternal:after,
a.pdfIcon:after,
a.excelIcon:after {
	content: none;
}

.pdfIcon,
.excelIcon {
	background: url(../images/icons.png) transparent no-repeat 0 0;
	display: inline-block;
	height: 18px;
	width: 17px;
}

.pdfIcon {
	background-position: -23px -29px;
}

.excelIcon {
    background-position: -40px -29px;
}

/* Black external icon. */
nav a[target="_blank"]:after,
footer a[target="_blank"]:after {
	background-position: -57px -48px;
}

h1,
h2,
h3 {
	font-family: Roboto, sans-serif;
	margin: 10px 0;
}

h1 {
	font-size: 28px;
}

h2 {
	font-size: 24px;
	font-weight: normal;
}

h3 {
	font-size: 18px;
	font-weight: bold;
}

h4 {
	font-size: 14px;
	margin-bottom: -10px;
}

h5 {
	font-size: 13px;
	margin-bottom: 6px;
	margin-top: 17px;
}

hr {
	border: none;
	border-top: 1px solid var(--color-surface-offline);
}

p {
	margin: 1.538em 0;
}

.tableLink {
	margin-top: 10px;
	font-size: 12px;
}

.opening {
	font-size: 15px;
}

p:first-of-type {
	margin-top: 12px;
}

address {
	font-style: normal;
}

span.error {
	color: var(--color-error);;
}

.fLeft {
	float: left;
}

.fRight {
	float: right;
}

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

.clearfix:after {
	clear: both;
}

section h2 {
	margin-top: 30px;
}

.tableSection {
	margin-bottom: 34px;
}

.tableSection h2 {
	margin-top: 17px;
}

.tableButtons {
	margin-bottom: 15px;
	margin-top: 15px;
}

.icon {
    background: url(../images/icons.png) transparent no-repeat 0 0;
    display: inline-block;
}

.check {
    background-position: 0 -48px;
    width: 23px;
    height: 23px;
}

.checkSmall {
    background-position: -23px -48px;
    width: 16px;
    height: 16px;
}

.fixed {
	position: fixed;
	z-index: 100;
}

.fixedDummy {
	clear: both;
}

.loaderAnim {
	width: 35px;
	height: 35px;
	background: url(../images/aza_loader.gif) no-repeat;
	margin: 10px auto 0 auto;
}

/********
 * Grid
 ********/

.row {
	margin-left: -2.116%;
}

.login-row {
	margin-top: 10px;
}

.row:before,
.row:after {
	content: " ";
	display: table;
}

.row:after {
	clear: both;
}

.col {
	border-bottom: 1px solid transparent;  /* Prevent collapsing of empty columns. */
	float: left;
	margin-left: 2.116%;
}

.col1of1 {
	width: 97.884%;
}

.col1of2 {
	width: 47.884%;
}

.col1of3 {
	width: 31.217%;
}

.col2of3 {
	width: 64.55%;
}

.col1of4 {
	width: 22.884%;
}

.col3of4 {
	width: 72.884%;
}

.col1of6 {
	width: 14.55%;
}

.col5of6 {
	width: 81.217%;
}

.colOffset1of2 {
	margin-left: 50%;
}

.colOffset1of3 {
	margin-left: 33.333%;
}

.colOffset2of3 {
	margin-left: 66.666%;
}

.colOffset1of4 {
	margin-left: 25%;
}

.colOffset3of4 {
	margin-left: 75%;
}

.colOffset1of6 {
	margin-left: 16.666%;
}

.colOffset5of6 {
	margin-left: 83.333%;
}

.dividerCol {
	border-right: 1px solid var(--color-border);
	margin-bottom: -5000px;
	padding-bottom: 5000px;
}

/********
 * Page
 ********/

header,
nav > ul,
main,
footer,
.fullWidth {
	margin-left: auto;
	margin-right: auto;
	width: 945px;
}

/**********
 * Header
 **********/

header {
	padding: 5px 0 11px;
}

.topLinks {
	font-size: 12px;
	height: 18px;
	text-align: right;
}

.topLinks a {
	margin-left: 17px;
}

.topLinks button {
	margin-left: 6px;
	vertical-align: 1px;
}

.logo {
	background: url("../images/logo.svg") no-repeat 0 0;
	height: 29px;
	margin-top: 13px;
	text-indent: -9999px;
	width: 97px;
}

.headerDesc {
	color: var(--color-text-tag-neutral);
	float: right;
	font-weight: bold;
	margin-top: 28px;
}

/********
 * Menu
 ********/

nav {
	background: var(--color-surface-subtle);
}

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

nav > ul > li {
	display: inline-block;
	position: relative;
}

nav > ul > li:first-child {
	margin-left: -16px;
}

nav li.open,
nav li .subNavContent {
	background: var(--color-surface-elevated);
}

nav > ul > li > a {
	color: inherit;
	display: inline-block;
	line-height: 41px;
	padding: 0 16px;
}

nav > ul > li.active > a {
	color: var(--color-primary);
}

nav > ul > li > a:hover {
	text-decoration: none;
}

/* Sub navigations */

nav .subNav {
	display: none;
	font-size: 12px;
	left: 0;
	position: absolute;
	top: 100%;
	/* Just an arbitrary width that contain the whole sub menu but at the same
	 * time does not extend beyond the view port and introduce a scroll bar. */
	width: 500px;
	z-index: 1000;
}

nav li.open > .subNav {
	display: block;
}

nav .subNavContent {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 10px;
}

nav .subNav ul {
	border-left: 1px solid var(--color-surface-offline);
	float: left;
	margin: 0 0 -5000px;
	padding-bottom: 5000px;
	padding-right: 15px;
	width: auto;
}

nav .subNav ul:first-child {
	border-left: none;
}

nav .subNav .header {
	font-weight: bold;
	padding: 13px 15px 11px;
}

nav .subNav .noHeader {
	padding-top: 47px;
}

nav .subNav li {
	padding: 0 15px;
}

nav .subNav li:hover {
	background: transparent;
}

nav .subNav a {
	line-height: 22px;
	padding: 0;
}

/***********
 * Content
 ***********/

main {
	min-height: 400px;
	padding: 22px 0 40px;
}

/**********
 * Footer
 **********/

footer {
	border-top: 1px solid var(--color-surface-offline);
	font-size: 12px;
	padding: 27px 10px 29px;
}

footer a {
	color: inherit;
	font-weight: normal;
	margin-left: 19px;
}

footer .linkCopy,
footer .linkMainSite {
	margin-left: 0;
}

footer .linkMainSite {
	margin-right: 36px;
}

footer .linkMainSite:after {
	display: none;
}

/**********
 * Tables
 **********/

table {
	font-size: 13px;
	width: 100%;
}

tfoot {
	font-weight: bold;
}

th {
	background: var(--color-surface-offline-system);
	color: var(--color-persistent-white);
	font-size: 12px;
	text-align: left;
}

th,
td {
	padding: 7px 10px;
	vertical-align: top;
}

th.formFieldCell,
td.formFieldCell {
	padding-bottom: 3px;
	padding-top: 3px;
}

td {
	border-bottom: 1px solid var(--color-tag-neutral);
}

th label {
	font-size: inherit;
	line-height: inherit;
}

.tblColRight {
	text-align: right;
}

.tblColCenter {
	text-align: center;
}

tr.odd td {
	padding-bottom: 8px;
	padding-top: 8px;
}

tr.even td {
	background: var(--color-tag-neutral);
}

tr.odd.warning td {
	background: var(--color-surface-error);
}

tr.even.warning td {
	background: var(--color-surface-error-lighter);
}

tr.odd td.formFieldCell {
	padding-bottom: 4px;
	padding-top: 4px;
}

tr.even td.formFieldCell {
	padding-bottom: 3px;
	padding-top: 3px;
}

.staticRowHeader th {
	background-color: var(--color-persistent-white);
}

.staticRowHeader th > div {
	width: 100%;
}

.standardTable .firstColumn {
	width: 260px;
}

.standardTable .linkColumn {
	width: 190px;
}

.dataTable tr td {
	border-bottom: none;
	padding-bottom: 9px;
}

.dataTable tfoot tr td {
	border-bottom: 1px solid var(--color-tag-neutral);
}

.dataTable td:first-child {
	color: var(--color-text-primary);
	font-weight: bold;
	width: 253px;
}

.dataTable tfoot td:first-child {
	color: inherit;
}

.dataTable tr.odd td {
	background: var(--color-tag-neutral);
	padding-top: 8px;
}

.dataTable tr.even td {
	background: transparent;
}

.dataTable tr.odd td:first-child {
	background: var(--color-surface-discreet-hover);
}

.dataTable tr.even td:first-child {
	background: var(--color-surface-discreet-b);
}

tr.error.odd td {
	background: var(--color-surface-error);
}

tr.error.even td {
	background: var(--color-surface-error-lighter);
}

/*********
 * Forms
 *********/

label,
.labelBox,
div.labelRadioCheck {
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
}

div.labelRadioCheck {
	margin-bottom: 13px;
}

label.errorContainer {
	position: relative;
}

div.labelRadioCheck.errorContainer label {
	color: var(--color-error);
}

label.labelRadioCheck,
label.labelHidden {
	font-size: 13px;
	font-weight: normal;
	line-height: 16px;
	margin-bottom: 0;
	margin-top: 5px;
	padding-left: 18px;
}

label.labelHidden {
	padding-left: 0;
}

label.labelRadioCheck input {
	margin-left: -18px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
	border: 1px solid var(--color-border);
	border-radius: 3px;
	color: var(--color-text-tag-neutral);
	display: block;
	font-size: 12px;
	font-weight: normal;
	line-height: 15px;
	margin-bottom: 16px;
	margin-top: 6px;
	padding: 4px 9px;
	width: 100%;
}

table select,
table input[type="text"] {
	margin: 0;
}

textarea {
	line-height: 18px;
}

select {
	padding: 3px 4px 3px 2px;
}

label.horizontal {
	display: inline-block;
	margin-right: 5px;
	vertical-align: top;
	width: auto;
}

label.horizontal select {
	width: auto;
}

select.horizontal {
	display: inline-block;
	width: auto;
}

select.error,
textarea.error,
input[type="text"].error,
input[type="password"].error,
input[type="datetime"].error,
input[type="datetime-local"].error,
input[type="date"].error,
input[type="month"].error,
input[type="time"].error,
input[type="week"].error,
input[type="number"].error,
input[type="email"].error,
input[type="url"].error,
input[type="search"].error,
input[type="tel"].error,
input[type="color"].error {
	border-color: var(--color-error);
	color: var(--color-error);
}

.cancelLink {
	font-size: 12px;
	margin-left: 16px;
	text-decoration: underline;
}

fieldset {
	border-color: var(--color-border);
	margin-bottom: 15px;
}

legend {
	font-size: 16px;
	padding-left: 4px;
	padding-right: 4px;
}

/***********
 * Buttons
 ***********/

.btn {
	background: var(--color-button-primary-normal);
	border: none;
	border-radius: 500px;
	color: var(--color-text-button-primary);
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	line-height: 15px;
	padding: 5px 21px;
}

.floatRight {
    float: right;
}

.btn:hover,
.btn:focus {
	background: var(--color-button-primary-hover);
	text-decoration: none;
}

.btn:disabled {
	background: var(--color-disabled);
	color: var(--color-text-disabled);
}

.btnSmall {
	font-size: 11px;
	padding: 2px 10px 1px;
}

.btnLink {
	background: transparent;
	border: none;
	color: var(--color-text-link);
	display: inline;
	font-size: inherit;
	font-weight: bold;
	line-height: inherit;
	padding: 0;
}

.btnLink:disabled {
	color: var(--color-disabled);
}

.btnLink:hover {
	text-decoration: underline;
}

.btnLink:hover:disabled {
	text-decoration: none;
}

/********
 * Tabs
 ********/

.tabs {
	border-bottom: 1px solid var(--color-border);
	font-size: 12px;
	font-weight: bold;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tabs li {
	border: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-persistent-white);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	display: inline-block;
}

.tabs li.active {
	margin-bottom: -1px;
}

.tabs a {
	color: var(--color-text-tag-neutral);
	display: inline-block;
	padding: 4px 15px;
}

.tabs .active a {
	color: var(--color-primary);
	padding-bottom: 5px;
	padding-top: 6px;
}

.tabs a:hover {
	text-decoration: none;
}

.tabbedContent > div {
	display: none;
	padding-top: 14px;
}

.tabbedContent > div.active {
	display: block;
}

.tabbedContent > div.personalDataInfo {
	font-size: 12px;
}

/************
 * Lightbox
 ************/

.lightboxOverlay {
	background: var(--color-surface-offline);
	bottom: 0;
	left: 0;
	opacity: .65;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1010;
}

.lightbox {
	background: var(--color-persistent-white);
	border: 1px solid var(--color-border);
	display: none;
	left: 50%;
	margin-left: -175px;
	padding: 6px 20px 15px;
	position: absolute;
	top: 100px;
	min-width: 350px;
	z-index: 1011;
}

.lightboxLarge {
	margin-left: -400px;
	min-width: 800px;
	width: auto;
}

/********************
 * Company lightbox
 ********************/

.lightbox .companyList {
	line-height: 1.7em;
	list-style: none;
	margin: 0;
	padding: 0;
}

/************
 * Progress
 ************/

.progress {
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-tag-neutral);
	font-size: 12px;
	font-weight: bold;
	margin: 24px 0 17px;
	overflow: hidden;
	padding: 0 0 5px;
}

.progress li {
	float: left;
	margin-left: 19px;
	margin-right: 17px;
}

.progress .active {
	color: var(--color-primary);
}

/************************************
 * Tooltips and validation messages
 ************************************/

.tooltip {
	background: url(../images/icons.png) transparent no-repeat -57px -29px;
	display: inline-block;
	height: 16px;
	margin-left: 6px;
	position: relative;
	white-space: normal;
	vertical-align: bottom;
	width: 16px;
}

.tooltip--no-icon {
	background: unset;
	height: unset;
	width: unset;
	margin: unset;
	color: var(--color-text-link);
	border-bottom: 1px dotted var(--color-text-link);
}

.tooltip p,
.errorPopup {
	background: var(--color-persistent-white);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	color: var(--color-surface-offline-system);
	display: none;
	font-size: 12px;
	font-weight: normal;
	left: 50%;
	list-style: none;
	margin-left: -95px;
	padding: 9px 11px 8px 11px;
	position: absolute;
	text-align: left;
	top: 13px;
	width: 190px;
	z-index: 10;
}

.tooltip.anchorBottom p,
.errorPopup.anchorBottom {
	bottom: 7px;
	top: auto;
}

.tooltip.anchorMiddle p,
.errorPopup.anchorMiddle {
	left: -150px;
	margin-left: 50%;
}

.tooltip.anchorLeft p,
.errorPopup.anchorLeft {
	left: -12px;
	margin-left: auto;
}

.tooltip.anchorRight p,
.errorPopup.anchorRight {
	left: auto;
	margin-left: auto;
	right: -12px;
}

.tooltipLarge p {
	margin-left: -225px;
	width: 450px;
}

.tooltip p:before,
.tooltip p:after,
.errorPopup:before,
.errorPopup:after {
	border-bottom: 7px solid var(--color-border);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: none;
	top: -7px;
	content: "";
	margin-left: -7px;
	position: absolute;
	left: 50%;
}

.tooltip.anchorBottom p:before,
.tooltip.anchorBottom p:after,
.errorPopup.anchorBottom:before,
.errorPopup.anchorBottom:after {
	border-bottom: none;
	border-top: 7px solid var(--color-border);
	bottom: -7px;
	top: auto;
}

.tooltip.anchorMiddle p:before,
.tooltip.anchorMiddle p:after,
.errorPopup.anchorMiddle:before,
.errorPopup.anchorMiddle:after {
	left: 50%;
	margin-left: -7px;
}

.tooltip.anchorLeft p:before,
.tooltip.anchorLeft p:after,
.errorPopup.anchorLeft:before,
.errorPopup.anchorLeft:after {
	left: 11px;
	margin-left: auto;
}

.tooltip.anchorRight p:before,
.tooltip.anchorRight p:after,
.errorPopup.anchorRight:before,
.errorPopup.anchorRight:after {
	left: auto;
	margin-left: auto;
	right: 28px;
}

.tooltip p:after,
.errorPopup:after {
	border-bottom: 6px solid var(--color-persistent-white);
	border-left-width: 5px;
	border-right-width: 5px;
	top: -6px;
	margin-left: -5px;
}

.tooltip.anchorBottom p:after,
.errorPopup.anchorBottom:after {
	border-bottom: none;
	border-top: 6px solid var(--color-persistent-white);
	bottom: -6px;
	top: auto;
}

.tooltip.anchorMiddle p:after,
.errorPopup.anchorMiddle:after {
	margin-left: -5px;
}

.tooltip.anchorLeft p:after,
.errorPopup.anchorLeft:after {
	left: 13px;
	margin-left: auto;
}

.tooltip.anchorRight p:after,
.errorPopup.anchorRight:after {
	margin-left: auto;
	right: 30px;
}

.tooltip:hover p,
.errorPopup {
	display: inline-block;
}

.errorPopup {
	position: relative;
	left: 0;
	margin: 0;
	top: -7px;
	width: auto;
	z-index: 1;
}

div.labelRadioCheck .errorPopup {
	top: 9px;
}

.errorPopup.closable {
	background-image: url(../images/errorClose.png);
	background-position: right top;
	background-repeat: no-repeat;
	position: absolute;
	top: 32px;
	width: 300px;
}

.errorPopup.smallClosable {
	background-image: url(../images/errorClose.png);
	background-position: right top;
	background-repeat: no-repeat;
	position: absolute;
	left: -85px;
	top: 30px;
	width: 150px;
}

.errorPopup:before {
	left: 28px;
	margin-left: 0;
}

.errorPopup:after {
	left: 30px;
	margin-left: 0;
}

/***********
 * Filters
 ***********/

.filtersBox select {
	display: inline-block;
	margin-left: 6px;
	width: auto;
}

.filtersBox label {
	display: inline-block;
	font-size: 13px;
	font-weight: normal;
	margin-right: 40px;
}

/***************
 * Tablesorter
 ***************/

.tablesorterHeader > div {
	display: inline-block;
	position: relative;
}

.tablesorterHeader {
	outline: none;
}

.tablesorterHeader.sortable > div {
	cursor: pointer;
	text-decoration: underline;
}

.tablesorterHeaderAsc > div:after,
.tablesorterHeaderDesc > div:after {
	border-bottom: none;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid var(--color-persistent-white);
	content: "";
	height: 0;
	position: absolute;
	right: -13px;
	top: 7px;
	width: 0;
}

.tablesorterHeaderDesc > div:after {
	border-bottom: 4px solid var(--color-persistent-white);
	border-top: none;
	top: 7px;
}

/************************
 * Margins and paddings
 ************************/

.marginVertZero {
	margin-bottom: 0;
	margin-top: 0;
}

.marginVertSmall {
	margin-bottom: 10px;
	margin-top: 10px;
}

.marginVertMedium {
	margin-bottom: 20px;
	margin-top: 20px;
}

.marginTopZero {
	margin-bottom: 0;
}

.marginTopSmall {
	margin-top: 10px;
}

.marginTopMedium {
	margin-top: 20px;
}

.marginTopLarge {
	margin-top: 30px;
}

.marginTopXLarge {
	margin-top: 50px;
}

.marginBottomZero {
	margin-bottom: 0;
}

.marginBottomSmall {
	margin-bottom: 10px;
}

.marginBottomMedium {
	margin-bottom: 20px;
}

.marginBottomLarge {
	margin-bottom: 30px;
}

.marginBottomXLarge {
	margin-bottom: 50px;
}

.marginRightZero {
	margin-right: 0;
}

.marginRightSmall {
	margin-right: 10px;
}

.marginLeftZero {
	margin-left: 0;
}

.marginLeftSmall {
	margin-left: 10px;
}

.paddingTopZero {
	padding-bottom: 0;
}

.paddingTopSmall {
	padding-top: 10px;
}

.paddingTopMedium {
	padding-top: 20px;
}

.paddingTopLarge {
	padding-top: 30px;
}

.paddingBottomZero {
	padding-bottom: 0;
}

.paddingBottomSmall {
	padding-bottom: 10px;
}

.paddingBottomMedium {
	padding-bottom: 20px;
}

.paddingBottomLarge {
	padding-bottom: 30px;
}

.paddingRightZero {
	padding-right: 0;
}

.paddingLeftZero {
	padding-left: 0;
}

/*******************
 * Employee tables
 *******************/

.employeesTable {
	clear: both;
}

.exportExcelLink {
	line-height: 40px;
}

.employeesTable thead,
.editEmployeesTable thead {
	top: 0;
	z-index: 20;
}

.employeeEditButtons {
	bottom: 0;
	margin-top: 13px;
	padding: 10px 0;
	-webkit-transition: background-color .8s, padding .3s;
	   -moz-transition: background-color .8s, padding .3s;
	        transition: background-color .8s, padding .3s;
}

.employeeEditButtons.fixed {
	background-color: var(--color-tag-neutral--80);
	padding: 10px 10px;
}

.employeeEditButtons .labelBox {
	font-size: 13px;
	margin-bottom: 3px;
}

.employeeEditButtons .btn {
	margin-right: 6px;
}


/* Employee table columns */

.employeeColCheckbox {
	padding-left: 5px;
	padding-right: 5px;
	width: 35px;
}

.employeeColSsn {
	width: 12%;
}

.employeeColSalary {
	width: 9%;
}

.employeeColContractId {
	width: 9%;
}

.employeeColContractStatus {
	max-width: 8em;
	min-width: 4em;
}

.employeeColPremium {
	width: 7.2%;
}

.employeeColCostCenter {
	width: 14%;
}

.employeeColBenefit {
	width: 17%;
}

.employeeColNewBenefit {
	width: 17%;
}

.employeeColNewStatus {
	width: 110px;
}

.employeeColStartDate {
	width: 15.5em;
}

.oneTimePaymentTable .employeeColFirstName,
.oneTimePaymentTable .employeeColLastName {
	width: 16%;
}

.oneTimePaymentTable .employeeColCostCenter{
	width: 14%;
}

.oneTimePaymentTable .employeeColContractId {
	width: 10%;
}

.oneTimePaymentTable .employeeColComment {
	width: 30%;
}

.oneTimePaymentTable .employeeColPaymentAmount {
	width: 10%;
}

/* Edit employees table */

.editEmployeesTable input[name="workingCapacityFull"] {
	float: right;
}

.employeeNameHeader.tablesorterHeader > div {
	display: block;
}

.employeeNameHeader.tablesorterHeader > div:after {
	left: 3.2em;
	right: auto;
}

.editEmployeesTable tr.odd .updatedCol {
	background: var(--color-tag-neutral);
}

.editEmployeesTable tr.even .updatedCol {
	background: var(--color-surface-offline);
}

.editEmployeesTable tr.odd.warning .updatedCol {
	background: var(--color-surface-error);
}

.editEmployeesTable tr.even.warning .updatedCol {
	background: var(--color-surface-error-lighter);
}


.employeeSubmitButtons {
	bottom: 0;
	padding-top: 5px;
	-webkit-transition: background-color .8s, padding .3s;
	   -moz-transition: background-color .8s, padding .3s;
	        transition: background-color .8s, padding .3s;
}

.employeeSubmitButtons.fixed {
	background-color: var(--color-tag-neutral--80);
	padding: 0 10px;
}

/*****************
 * New insurance
 *****************/

.fieldsetDetailsBox {
	background: var(--color-tag-neutral);
	border-top: 1px solid var(--color-border);
	margin: 10px -8px -9px;
	padding: 8px 8px 5px;
	position: relative;
}

.fieldsetDetailsBox .fieldsetDetailsBox {
	margin-bottom: 0;
}

.fieldsetDetailsBox:before,
.fieldsetDetailsBox:after {
	border-bottom: 11px solid var(--color-border);
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-top: none;
	top: -11px;
	content: "";
	margin-left: -11px;
	position: absolute;
	left: 50%;
}

.fieldsetDetailsBox:after {
	border-bottom: 10px solid var(--color-tag-neutral);
	border-left-width: 9px;
	border-right-width: 9px;
	top: -10px;
	margin-left: -9px;
}

/*********************
 * New benefit group
 *********************/

div.premiumExemptionDetails,
div.healthInsuranceDetails,
div.investmentPlanDetails {
	font-size: inherit;
	font-weight: inherit;
	margin-top: 5px;
}

.premiumPlanColAge {
	width: 20%;
}

.investmentPlanOwnFundsDetails select {
	width: 170px;
}

.fundAlreadyAddedError {
	font-weight: normal;
}

.selectedFundColDistribution {
	width: 7em;
}

.selectedFundColRemove {
	width: 5.5em;
}

.selectedFundsTable.empty .selectedFundColRemove {
	color: transparent;
}

.selectedFundsTable .emptyTableMessageRow {
	display: none;
}

.selectedFundsTable.empty .emptyTableMessageRow {
	display: table-row;
}

.selectedFundsTable label {
	font-weight: normal;
}

.selectedFundColDistribution input {
	display: inline-block;
	width: 4.5em;
}

.removeButton {
	font-size: 20px;
	line-height: 16px;
}

.removeButton:hover {
	text-decoration: none;
}

.numberInput {
	width: 60px !important;
	display: inline !important;
}

.priceGroupContainer {
	background-color: var(--color-surface-discreet);
	border-radius: 4px;
	padding: 16px 8px 0;
	margin-top: 4px;
}

.maxSjukInfoContainer {
	background-color: var(--color-surface-discreet);
	border-radius: 4px;
	padding: 16px 8px;
	margin-top: 4px;
	margin-bottom: 4px;
}

/*****************************
 * Add premiun plan lightbox
 *****************************/

.addPremiumPlanTable,
.premiumPlanUserTable {
	margin-top: 10px;
	white-space: nowrap;
}

.addPremiumPlanTable label {
	display: inline-block;
	font-weight: normal;
}

.addPremiumPlanTable input[type="text"] {
	display: inline-block;
	font-size: 11px;
	padding: 2px;
	width: 4em;
}

.addPremiumPlanTable tr.highlight td,
.addPremiumPlanTable td.highlight,
.addPremiumPlanTable input.highlight {
	background: var(--color-surface-warning-system);
}

.addPremiumPlanTable .highlightInsertRow td {
	border-top: 3px solid var(--color-surface-warning-system);
	padding-top: 6px;
}

.addPremiumPlanTable td.highlightInsertColumn {
	border-left: 3px solid var(--color-surface-warning-system);
	padding-left: 9px;
}

.addPremiumPlanTable td {
	border-left: 1px solid var(--color-tag-neutral);
	text-align: center;
}

.addPremiumPlanTable .tblHeaderCell,
.premiumPlanUserTable .tblHeaderCell {
	font-weight: bold;
}

.addPremiumPlanRowSalary {
	background: var(--color-surface-offline);
}

.addPremiumPlanRowSalary td:first-child {
	background: var(--color-persistent-white);
	border-left: none;
}

.addPremiumPlanColAge {
	background: var(--color-surface-offline);
	width: 9.5em;
}

.addPremiumPlanColSalary {
	width: 8em;
}

.addPremiumPlanColAmount {
	min-width: 10em;
}

.addPremiumPlanColAdd {
	width: 6em;
}

/* Save table */

.premiumPlanUserRowSalary {
	background: var(--color-surface-offline-system);
}

.premiumPlanUserRowSalary td:first-child {
	background: var(--color-tag-neutral);
}

.newBenefitGroupConfirm .premiumPlanUserRowSalary td:first-child {
	background: var(--color-persistent-white);
}

.premiumPlanUserColAge {
	background: var(--color-surface-offline-system);
	width: 6em;
}

.premiumPlanUserColSalary {
	width: 6em;
}

.premiumPlanUserTable td {
	border-bottom: none;
	text-align: center;
}

.premiumPlanUserTable .tblHeaderCell {
	color: var(--color-persistent-white);
}

/*********
 * Other
 *********/

.hide,
div.hide {
	display: none;
}

.printLink:before {
	background: url(../images/icons.png) transparent no-repeat -73px -29px;
	content: "";
	display: inline-block;
	height: 13px;
	margin-right: 6px;
	width: 16px;
}

.puffArea {
	margin-bottom: 7px;
	margin-top: 50px;
}

.errorMessageContainer,
.infoMessageContainer {
	margin-bottom: 15px;
}

.errorMessage,
.infoMessage {
	background: var(--color-tag-neutral);
	display: block;
	padding: 18px 30px 19px 50px;
	position: relative;
}

.errorMessage:before,
.infoMessage:before {
	background: url(../images/icons.png) transparent no-repeat 0 0;
	content: "";
	left: 15px;
	position: absolute;
	top: 50%;
	width: 23px;
}

.errorMessage:before {
	background-position: 0 -29px;
	height: 19px;
	margin-top: -10px;
}

.infoMessage:before {
	background-position: 0 -48px;
	height: 23px;
	margin-top: -12px;
}

.errorMessage ul,
.infoMessage ul {
	padding-left: 0;
	list-style: none;
}

.loginButton {
	padding-left: 31px;
	padding-right: 31px;
}

.contactContent {
	overflow: hidden;
}

.contactOther h3 {
	margin-top: 2px;
}

.contactOther h4 {
	margin-top: 12px;
}

.contactOther p,
.contactOther address {
	line-height: 18px;
}

.invoiceColSpecification {
	text-align: center;
	word-spacing: 20px;
}

.premiumPlanTable td:first-child {
	width: 8%;
}

.historyTable .tblColAffects {
	white-space: nowrap;
}

.transactionColDate,
.transactionColAmount {
	width: 8em;
}

.employeeAbleBodied {
	float: right;
	line-height: 29px;
	margin: 12px 0 8px;
}

.employeeAbleBodied .icon {
	margin-left: 6px;
	vertical-align: -7px;
}

.annualExportLink {
	display: inline-block;
}

.annualExportLink > span {
	margin-right: 3px;
	vertical-align: -3px;
}

.pdfList {
	list-style: none;
	padding: 0;
}

p.changePlacementPlanInfoText {
	margin-bottom: 0;
}

/*********
 * 2020 Avanza styles
 *********/

.informationBox {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: var(--color-surface-subtle);
	border-radius: 12px;
	padding: 8px 16px;
}

.informationBox .warn {
	background-color: var(--color-surface-warning);
}

.informationIconContainer {
	background-color: var(--color-persistent-white);
	border-radius: 50%;
	padding: 4px;
	margin-left: 12px;
	margin-right: 24px;
}

.informationIcon {
	min-width: 30px;
	min-height: 30px;
	background-image: url(../images/avanza_exclamation_mark_medium.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.exclamationHexagonIcon {
	min-width: 30px;
	min-height: 30px;
	background-image: url(../images/avanza_exclamation_hexagon_medium.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.grayOut {
	background-color: var(--color-surface-offline-system);
	opacity: 0.2;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.bodyTextLarge {
	margin-bottom: 16px;
	margin-top: 0;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}

.fontRoboto {
	font-family: 'Roboto', sans-serif;
}

.centerText {
	text-align: center;
}

.overlayBox {
	background-color: var(--color-persistent-white);
	width: 60vw;
	max-width: 800px;
	opacity: 1;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 200;

	padding-left: 40px;
	padding-right: 40px;
}

.overlayBox h3 {
	margin-top: 32px;
}

.thumbPlusSpeechBubbleIcon {
	min-width: 140px;
	min-height: 140px;
	background-image: url(../images/avanza_thumb_plus_speech_bubble.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.primaryButton {
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	color: var(--color-text-button-primary);
	height: 48px;
	background-color: var(--color-button-primary-normal);
	border-radius: 500px;
	padding: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 16px;
	font-weight: normal;
	white-space: nowrap;
	font-family: 'Roboto', sans-serif;
}

.primaryButton:hover {
	text-decoration: none;
	color: var(--color-text-button-primary);
	background-color: var(--color-button-primary-hover);
}

.primaryButton[target="_blank"]:after {
	background: none;
}

.secondaryButton {
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	background-color: var(--color-button-secondary-normal);
	border: 1px solid var(--color-text-button-secondary);
	color: var(--color-text-button-secondary);
	border-radius: 500px;
	height: 48px;
	padding: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 16px;
	font-weight: normal;
	white-space: nowrap;
	font-family: 'Roboto', sans-serif;
}

.secondaryButton:hover {
	background-color: var(--color-button-secondary-hover);
	text-decoration: none;
	color: var(--color-text-button-secondary);
}

.textButton {
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	padding: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 12px;
	font-weight: normal;
	white-space: nowrap;
	font-family: 'Roboto', sans-serif;
	background-color: var(--color-text-primary-inv);
	border: none;
	color: var(--color-text-marked);
}

.textButton:hover {
	text-decoration: underline;
}

.textButton:active {
	outline: 0;
}

.buttonContainer {
	width: 280px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 8px;
}

.flexBox {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bottomButtonsContainer {
	margin-top: 24px;
	margin-bottom: 12px;
}

.siteMessage {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--color-surface-warning-system);
}

.siteMessageText {
	align-items: center;
	font-size: 12px;
	margin: 5px;
}

/*----------------------------------------------------------------------
 Typography
----------------------------------------------------------------------*/

@font-face {
	font-family: 'Avanza';
	src: local('Avanza'), url('../fonts/RobotoAvanzaSlab-Bold.woff') format('woff');
	font-style: normal;
	font-weight: bold;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
	url('../fonts/Roboto-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: local('Roboto Medium'), local('Roboto-Medium'),
	url('../fonts/Roboto-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Bold'), local('Roboto-Bold'),
	url('../fonts/Roboto-Bold.woff') format('woff');
}