@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter-Regular.ttf") format("truetype"), url("../../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter-Medium.ttf") format("truetype"), url("../../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter-SemiBold.ttf") format("truetype"), url("../../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Allocate-Icons";
  font-weight: normal;
  font-style: normal;
  src: url("../../fonts/glyphs/allocateicons-regular-webfont.woff2") format("woff2"), url("../../fonts/glyphs/allocateicons-regular-webfont.woff") format("woff"), url("../../fonts/glyphs/allocateicons-regular-webfont.ttf") format("truetype"), url("../../fonts/glyphs/allocateicons-regular-webfont.eot") format("eot"), url("../../fonts/glyphs/allocateicons-regular-webfont.svg") format("svg");
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
  margin: 0;
  padding: 0;
  border: 0 none;
  outline: 0;
  font-family: inherit;
  vertical-align: baseline;
}

html {
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-side-bar, #ededed);
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  color: var(--color-neutral, #000);
  margin: 0;
  padding: 0;
  background-image: url("../../Images/bg-app.png");
  background-repeat: repeat-y;
  position: relative;
  overflow: hidden;
}
@media print {
  body {
    background-color: var(--color-base, #fff);
    background-image: none;
  }
}

@media print {
  @page {
    size: 297mm 210mm; /* landscape */
    /* you can also specify margins here: */
    margin: 25mm;
    margin-right: 45mm; /* for compatibility with both A4 and Letter */
  }
}
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div, span, section, article {
  box-sizing: border-box;
}

table {
  font-size: inherit;
  font: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

.align-center {
  text-align: center;
}

.remove-m-b {
  margin-bottom: 0;
}

a, a:hover, a:active {
  outline: none;
}

a img {
  border: 0;
}

a, a:link, a:visited {
  color: var(--color-active, #317cd5);
  text-decoration: none;
}

a:focus, a:hover, a:active {
  color: #E06C1F;
}

p {
  line-height: 1.4em;
  margin-bottom: 1em;
}

em {
  color: #666666;
  font-style: normal;
}

abbr {
  border-bottom: 1px dotted #666666;
  cursor: help;
}

ul {
  list-style: none outside none;
}

ol {
  line-height: 1.6em;
}

ul {
  list-style-type: none;
}

ul > li {
  list-style-type: none;
}

ol {
  margin-left: 10px;
  padding-left: 10px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  font-weight: normal;
  text-align: left;
}

blockquote:before, blockquote:after {
  content: "";
}

q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

label {
  font-weight: normal;
}

fieldset {
  display: block;
  border: 0 none;
}

form {
  display: inline;
  padding: 0;
  margin: 0;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

/* FF fix */
sup, sub {
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  _vertical-align: bottom;
  color: #C00;
}

sup {
  bottom: 1ex;
  font-style: italic;
  font-weight: bold;
}

sub {
  top: 0.5ex;
}

input[type=radio] {
  vertical-align: text-bottom;
}

input[type=checkbox] {
  vertical-align: bottom;
  *vertical-align: baseline;
}

.ie6 input {
  vertical-align: text-bottom;
}

label, input[type=button], input[type=submit], button {
  cursor: pointer;
}

.clear {
  clear: both;
  line-height: 1px;
  font-size: 1px;
  height: 1px;
  margin-top: -1px;
  border: 0 none;
}

.bold {
  font-weight: 700 !important;
}

.mandatory {
  color: #cc0000;
  font-size: 1em;
  font-weight: 700;
}

.disabled {
  color: #9C9C9C !important;
}

.pointer {
  cursor: pointer;
}

.small {
  font-size: 0.9em;
  font-weight: 400;
  color: gray;
}

.error {
  color: #cc0000;
}

.red {
  color: #cc0000;
}

.first {
  margin-bottom: 5px;
}

.none {
  display: none;
}

section {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  width: 100%;
  background: none repeat scroll 0 0 #fff;
}

section .column {
  float: left;
  display: block;
  width: 50%;
}

* + html .colLeft {
  width: 385px;
}

* + html .colRight {
  width: 385px;
}

.section-content {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  background: none repeat scroll 0 0 #fff;
}
.section-content + .section-content {
  padding: 20px 0 0 0;
}
.section-content.padded {
  padding: 12px 16px 16px 16px !important;
  box-sizing: border-box;
}

article + article {
  margin-top: 16px;
}
article + article.column {
  margin-top: 0;
}

.row {
  display: inline-block;
  clear: both;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.row.ruled {
  border-top: 1px solid var(--color-divider-row, #bfe2f1);
  padding-top: 16px;
}
.row.ruled-bottom {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-divider-row, #bfe2f1);
}
.row.row-margin-top {
  margin-top: 24px;
}
.row.row-padding {
  padding: 16px;
}

.ui-dialog .row-padding-dialog {
  padding: 12px;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: block;
  height: 0;
  visibility: hidden;
}

.header-page {
  padding-bottom: 8px;
  display: inline-block;
  width: 100%;
}
.header-page .header-left {
  float: left;
}
.header-page .header-left.header-left-height {
  height: 50px;
}
.header-page .header-right {
  float: right;
}
.header-page h2 {
  line-height: 34px;
  padding: 0;
}
.header-page .header-page-title {
  color: var(--color-neutral-1, #333);
  font-weight: 600;
  font-size: 20px;
  font-family: Inter, Arial, sans-serif;
  padding: 0px 0 24px;
  line-height: 24px;
}

.header-position-right {
  position: absolute;
  right: 0;
}

.header-position-left {
  position: absolute;
  left: 0;
}

.section-RequestStudyLeave article h4,
.section-AnnualLeave article h4,
#requestAnnualLeave article h4,
#requestStudyLeave article h4 {
  padding-bottom: 4px;
  margin-bottom: 16px;
}

section h3 {
  box-sizing: border-box;
  background-color: var(--color-base, #fff);
  color: var(--color-header-level-1, #333);
  position: relative;
  font-size: 1.6em;
  line-height: 24px;
  font-weight: 500;
  margin: 0;
  padding: 0 24px 20px 0px;
  width: 100%;
}
section h3:after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: -16px;
  width: calc(100% + 32px);
  height: 1px;
  background-color: var(--color-header-level-3, #ddd);
}
@media print {
  section h3 {
    border-color: transparent;
    box-shadow: none;
  }
}
section h3 span.info {
  float: right;
  font-size: 0.8em;
  color: var(--color-neutral-5, #eee);
}
section .section-title-small {
  font-size: 16px;
  margin: 16px 0;
}
section .section-title-small + .ui-widget-body {
  padding-top: 0;
}
section .section-title-with-divider-small {
  font-size: 16px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gridRowBorderColor, #e0e0e0);
  font-weight: 500;
}

.section-title {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  width: calc(100% + 2 * 16px);
  font-weight: 600;
  font-size: 20px;
  text-shadow: none;
  background: none;
  color: var(--color-neutral-1, #333);
  padding-bottom: 24px;
  padding-top: 0;
  line-height: 24px;
  border-bottom: 1px solid var(--color-header-level-3, #ddd);
  box-shadow: none;
}

.borderradius section h3 span.info {
  color: var(--color-neutral-3, #888);
  font-size: 13px;
  text-shadow: none;
  text-indent: 4px;
  float: right;
  clear: none;
}

section div.ui-widget-body {
  background: none repeat scroll 0 0 #FFFFFF;
  border-color: #C5C5C5 #C5C5C5 #C5C5C5 #BAB9B9;
  border-style: none;
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  padding: 16px 0 8px 0;
}
section div.ui-widget-body.outlined-container {
  padding: 20px;
  border: 1px solid var(--color-header-level-3, #ddd);
  border-radius: 0;
}

section div.contentHolder {
  background: none repeat scroll 0 0 var(--color-base, #fff);
  border-color: transparent;
  border-style: none;
  border-width: 0;
  border-radius: 0 0 4px 4px;
  padding: 10px;
  padding: 8px 0;
}

h4,
.article h4,
article h4 {
  color: var(--color-neutral-1, #333);
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
  padding: 0;
}

section h4 {
  text-shadow: none;
}

.validation-message {
  position: relative;
  border: none;
  padding: 16px;
  margin-bottom: 14px;
}

.validation-message h3 {
  position: relative;
  font-size: 14px;
  color: #4e4e4e;
  text-transform: uppercase;
  line-height: 16px;
  font-weight: bold;
  margin: 0;
  padding: 3px 0;
}

.validation-message ul {
  margin-bottom: 5px !important;
  color: #4e4e4e;
  font-size: 14px;
}
.validation-message ul li span {
  white-space: pre-line;
}

.message-error {
  background: var(--color-error-box, #F8DDDD) url(../../Images/SVGs/Common/error-icon-red.svg) no-repeat 24px 16px;
  background-size: 20px 20px;
  padding-left: 52px;
}
.message-error h3, .message-error ul {
  color: var(--color-error, #DB5555);
  text-transform: initial;
}

.message-success {
  background: none repeat scroll 0 0 #CDE69C;
  border-color: rgb(194.7177419355, 224.8588709677, 135.6411290323);
}

.message-warning {
  background: none repeat scroll 0 0 #FFE9AD;
  border-color: rgb(255, 226.1585365854, 147.5);
}

.message-info {
  background: none repeat scroll 0 0 #D1E4F3;
  border-color: #99C4EA;
}

.validation-message .btn_close {
  position: absolute;
  display: block;
  right: 5px;
  top: 5px;
  width: 16px;
  height: 16px;
  z-index: 10002;
  background-image: url(../../Images/validation_close.png);
  background-position: 0 0;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.validation-message .btn_close:hover {
  background-position: 0 -16px !important;
}

.page-error {
  background: none repeat scroll 0 0 #FCCAC1;
  border-color: #E18B7C;
  position: relative;
  display: block;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px 3px 3px 3px;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.page-error h3 {
  position: relative;
  font-size: 1em;
  color: #4e4e4e;
  text-transform: uppercase;
  height: 21px;
  line-height: 21px;
  font-weight: bold;
  margin: 0;
  padding: 3px 0;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
}

.page-error ul {
  margin-bottom: 5px !important;
  color: #4e4e4e;
  font-size: 1em;
}

.content-message {
  position: relative;
  padding: 16px;
  margin: 0;
  font-size: 14px;
  color: var(--color-neutral-1, #333);
  line-height: 1.5em;
}

.msn-error {
  background: none repeat scroll 0 0 var(--color-error-box, #F8DDDD);
}

.msn-success {
  background: none repeat scroll 0 0 var(--color-success-box, #c4e7aa);
}

.msn-warning {
  background: none repeat scroll 0 0 var(--color-warning-box, #F9EDBE);
}

.msn-info {
  background: var(--color-message-box, #EAF2FB) url(../../Images/SVGs/Common/warning-icon-black.svg) no-repeat 24px 16px;
  background-size: 20px 20px;
  padding-left: 52px;
}

.msn-confirmation {
  background-color: var(--color-base, #fff);
  border: none;
  padding: 0;
}

#loading {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  border: solid 1px black;
  background-color: White;
  padding: 2px 5px 2px 5px;
}

.clearFix {
  display: inline-block;
  clear: both;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.busy, .loading-panel {
  background: url(../../Images/inputSpinner-32.gif) center center no-repeat !important;
  z-index: 999999;
  border-radius: 4px;
  box-shadow: 0 0 0 12px #fff;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .busy, .loading-panel {
    background: url(../../Images/inputSpinner-64.gif) center center no-repeat !important;
    background-size: 32px 32px !important;
  }
}

.busySmall {
  background: url(../../Images/smallSpinner.gif) center center no-repeat !important;
}

input.busySmall {
  border: none;
  color: transparent;
}

.busyOverlay {
  background: url(../../Images/inputSpinner-32.gif) center center no-repeat;
  position: absolute;
  background-color: white;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.loading-indicator {
  width: 16px;
  height: 16px;
  background: url(../../Images/inputSpinner-16.gif) center center no-repeat !important;
  background-position: center center;
  display: inline-block;
  clear: none;
  margin: 0;
  padding: 0 16px 0 16px;
}
.loading-indicator.next-to-button {
  float: right;
  height: 28px;
}

h1 {
  font-size: 2em;
  padding-bottom: 0;
  padding-top: 0px;
  margin: 0;
  float: left;
}

h2 {
  margin-top: 0;
  color: var(--color-base, #fff);
}

h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
  color: var(--color-base, #fff);
}

h2 a, h2 a:hover, h2 a:active {
  text-decoration: none;
  text-indent: 40px;
  width: 250px !important;
  display: block;
  padding-top: 5px;
}

h3 {
  font-size: 1.3em;
}

h4 {
  font-size: 1.2em;
}

h5, h6 {
  font-size: 1em;
}

.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
  margin-top: 0;
}

#second-background-image-ie6-fix {
  position: absolute;
  background: transparent url("../../Images/shortcutstrip_back.gif") repeat-y;
  width: 150px;
  font-family: Tahoma, sans-serif;
  height: 500px;
  z-index: -1;
  left: 0;
  top: 0;
}

.dialog-body {
  padding: 12px 12px 0 12px;
}
.dialog-body:before, .dialog-body:after {
  content: "";
  display: table;
  clear: both;
}

footer {
  color: var(--color-neutral-3, #888);
  padding: 10px 0;
  text-align: center;
  line-height: normal;
  margin: 0;
  font-size: 0.9em;
  display: block;
}
footer.ruled {
  border-top: 1px solid var(--color-divider, #888);
  padding-top: 16px;
}
footer.dialog-footer {
  overflow: auto;
  clear: both;
  border-top: 1px solid var(--color-header-level-3, #ddd);
  margin: 0 16px;
  padding: 16px 0 12px;
}

header.header-application {
  height: 60px;
  background-color: var(--color-base, #fff);
  position: relative;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  z-index: 1000;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
}
header.header-application.clearFix {
  display: block !important;
}
@media print {
  header.header-application {
    display: none !important;
  }
}

header.header-application.loop-primary {
  height: 70px;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  padding-right: 10px;
}

header.header-application.loop-primary .nav-horizontal span {
  font-size: small;
}

header .logo-wrapper {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  height: 56px;
  text-indent: -9999px;
  max-width: 240px;
  position: relative;
}
header .logo {
  background: transparent url("../../Images/site_en.png") no-repeat;
  background-position: 24px center;
  display: block;
  height: 100%;
  max-width: 240px;
  position: absolute;
  width: 100%;
  z-index: 2;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  header .logo {
    background-image: url("../../Images/site_en@2x.png");
    background-size: 293px 53px;
    background-size: auto 32px;
  }
}
header .logo.product-eol-es, header .logo.product-eol-fr, header .logo.product-eol-de, header .logo.product-eol-da, header .logo.product-eol-sv {
  background-position: 12px 8px;
}
header .logo.product-text {
  background-position: 44px 8px;
  background-size: contain;
}
header .logo.logo-es, header .logo.product-eol-es {
  background-image: url("../../Images/SVGs/Logos/app-optima.svg");
}
header .logo.logo-es.product-text, header .logo.product-eol-es.product-text {
  background-image: url("../../Images/SVGs/Logos/app-optima-text.svg");
}
header .logo.logo-fr, header .logo.product-eol-fr {
  background-image: url("../../Images/SVGs/Logos/app-optima.svg");
}
header .logo.logo-fr.product-text, header .logo.product-eol-fr.product-text {
  background-image: url("../../Images/SVGs/Logos/app-optima-text.svg");
}
header .logo.logo-de, header .logo.product-eol-de {
  background-image: url("../../Images/SVGs/Logos/app-optima.svg");
}
header .logo.logo-de.product-text, header .logo.product-eol-de.product-text {
  background-image: url("../../Images/SVGs/Logos/app-optima-text.svg");
}
header .logo.logo-da, header .logo.product-eol-da {
  background-image: url("../../Images/SVGs/Logos/app-optima.svg");
}
header .logo.logo-da.product-text, header .logo.product-eol-da.product-text {
  background-image: url("../../Images/SVGs/Logos/app-optima-text.svg");
}
header .logo.logo-sv, header .logo.product-eol-sv {
  background-image: url("../../Images/SVGs/Logos/app-optima.svg");
}
header .logo.logo-sv.product-text, header .logo.product-eol-sv.product-text {
  background-image: url("../../Images/SVGs/Logos/app-optima-text.svg");
}
header .logo.product-medicOnline-en {
  background-image: url("../../Images/SVGs/Logos/app-medics-en.svg");
}
header .logo.product-medicOnline-en.product-text {
  background-image: url("../../Images/SVGs/Logos/app-medics-text-en.svg");
}
header .logo.product-eol-en {
  background-image: url("../../Images/SVGs/Logos/app-eol-en.svg");
}
header .logo.product-eol-en.product-text {
  background-image: url("../../Images/SVGs/Logos/app-eol-text-en.svg");
}
header .logo.product-eol-medics-en {
  background-image: url("../../Images/SVGs/Logos/app-medics-en.svg");
}
header .logo.product-eol-medics-en.product-text {
  background-image: url("../../Images/SVGs/Logos/app-medics-text-en.svg");
}
header .logo.product-loop-en {
  background-image: var(--loop-icon, url("../../Images/SVGs/Logos/app-loop-en.svg"));
  background-size: var(--loop-background-size, auto 38px);
  padding: var(--loop-padding, 2px);
  background-position: var(--loop-background-position, 0 center);
  margin-left: var(--loop-margin-left, 23px);
  width: var(--loop-width, 100%);
}
header .logo.product-loop-en.product-text {
  background-image: var(--loop-icon, url("../../Images/SVGs/Logos/app-loop-en.svg"));
}
header .loginControls {
  display: flex;
  justify-content: flex-end;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 240px;
}

.user-avatar-wrapper, .loop-trust-primary-wrapper {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 6px;
  font-size: 1.5rem;
  justify-content: center;
  margin: 0;
  position: relative;
  outline: 0;
  overflow: visible;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  vertical-align: middle;
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.user-avatar-wrapper:hover, .loop-trust-primary-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.04);
  box-shadow: none;
  cursor: pointer;
}
.user-avatar-wrapper:active, .loop-trust-primary-wrapper:active {
  background-color: rgba(0, 0, 0, 0.2);
}
.user-avatar-wrapper .user-avatar, .loop-trust-primary-wrapper .user-avatar {
  align-items: center;
  background-color: var(--color-main-1, #8751bd);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 16px;
  height: 32px;
  justify-content: center;
  text-align: center;
  width: 32px;
}

.loop-trust-primary-wrapper {
  vertical-align: central;
  border-radius: 5%;
  height: 95%;
  font-size: 14px;
  font-weight: 500;
}

.titleBar {
  font-size: 16px;
  font-weight: normal;
  color: var(--color-neutral-2, #666);
  line-height: 1;
  margin: 0;
  padding: 0 0 16px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}

.main {
  padding-left: 240px;
  position: relative;
}
.main .content {
  padding: 16px;
  background-color: var(--color-base, #fff);
  min-height: 100%;
  min-height: calc(100vh - 60px);
}
@media print {
  .main {
    padding-left: 0;
  }
}

.bar {
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.editor-label, .display-label {
  float: left;
}

.ui-dialog {
  box-sizing: border-box;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: dialog-open-ani 300ms ease-in-out;
  animation: dialog-open-ani 300ms ease-in-out;
}
.ui-dialog .ui-dialog-content {
  padding: 10px;
  box-sizing: border-box;
  border-radius: 0 0 4px 4px;
}
.ui-dialog .ui-dialog-content .section-content {
  padding: 10px 0;
  padding: 0;
  box-sizing: border-box;
  margin: 0;
}
.ui-dialog .ui-dialog-content .section-content .column {
  display: block;
  float: left;
  width: 420px;
}
.ui-dialog .ui-dialog-content .section-content .column h4 {
  font-size: 16px;
  margin-bottom: 8px;
}
.ui-dialog .ui-dialog-content .section-content .column p {
  padding: 0 0 10px 0 !important;
}
.ui-dialog .ui-dialog-content .section-content .ui-buttonset input[type=radio] {
  display: none !important;
}
.ui-dialog .ui-dialog-content .section-content .ui-buttonset .ui-button {
  margin-left: 0;
}
.ui-dialog .ui-dialog-content .section-content .placeholder-field textarea {
  width: 350px;
}
.ui-dialog .ui-dialog-content .section-content .placeholder-field .paddingLeft {
  padding-left: 140px;
}
.ui-dialog .ui-dialog-content .section-content .placeholder-field input.first[type=button] {
  margin-left: 140px;
}
.ui-dialog .ui-dialog-content .section-content .placeholder-field input.second[type=button] {
  margin-left: 5px;
}
.ui-dialog .ui-dialog-content .section-content .field {
  display: inline-block;
  float: left;
  width: 99%;
}

@-webkit-keyframes dialog-open-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dialog-open-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.display-label,
.editor-label,
.display-field,
.editor-field {
  margin: 0.5em 0;
}

.text-box.multi-line {
  height: 6.5em;
}

.tri-state {
  width: 6em;
}

.ui-datepicker {
  position: absolute;
  top: -100px;
  z-index: 100 !important;
}

.ui-datepicker-dialog {
  z-index: 1005 !important;
}

#exposeMask {
  background-color: #123 !important;
}

ul.bullets li {
  list-style-type: none;
}

.bullet {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  top: 3px;
  background: url(../../Images/Sprites/Bullets.png) no-repeat;
}

.bullet.sprite-violation_16 {
  background-position: 0 0;
  width: 16px;
  height: 16px;
}

.bullet.sprite-violation_24 {
  background-position: 0 -66px;
  width: 24px;
  height: 24px;
}

.bullet.sprite-violation_32 {
  background-position: 0 -140px;
  width: 32px;
  height: 32px;
}

.bullet.sprite-warning_16 {
  background-position: 0 -222px;
  width: 16px;
  height: 16px;
}

.bullet.sprite-warning_24 {
  background-position: 0 -288px;
  width: 24px;
  height: 24px;
}

.bullet.sprite-warning_32 {
  background-position: 0 -362px;
  width: 32px;
  height: 32px;
}

ul.bullets li span.bullet {
  text-indent: 20px;
  width: 100%;
}

.rest .count.x1 {
  display: none;
}

ul.shifts {
  margin-bottom: 10px;
  margin-top: 0;
}

.shifts li {
  display: inline;
  list-style: none;
}

.editor-label:after,
.display-label:after {
  content: ":";
}

.breakdown {
  display: block;
  float: left;
  width: 385px;
}

.section-AnnualLeave dt {
  float: left;
  padding-bottom: 0.5em;
  width: 140px;
  font-weight: bold;
}

.section-AnnualLeave dd {
  float: left;
  padding-bottom: 0.5em;
  width: 50%;
}

.section-HumanResources dl {
  width: 100%;
  overflow: auto;
  margin-top: 5px;
  padding-bottom: 8px;
}
.section-HumanResources dt {
  float: left;
  padding-bottom: 8px;
  width: 25%;
  font-weight: bold;
}
.section-HumanResources dd {
  float: left;
  padding-bottom: 8px;
  width: 25%;
}
.section-HumanResources .ui-widget-body {
  padding: 8px 0 0 0;
}
.section-HumanResources article {
  margin-top: 0;
}

ul.listSelector {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
ul.listSelector > li {
  float: left;
  margin: 5px;
}
ul.listSelector > li a {
  -webkit-appearance: none;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  font-weight: 500;
  color: var(--color-button-text, #070707);
  cursor: pointer;
  display: block;
  transition: opacity 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  font-size: 12px;
  padding: 6px 20px;
  text-align: center;
  background-color: var(--color-button-bg, #fff);
  height: auto;
  border-color: var(--color-neutral-4, #ccc);
  outline: none;
  text-decoration: none;
  width: 160px;
  padding: 5px 10px 5px 10px;
  transition: background-color 200ms ease-in-out, box-shadow 150ms ease-in-out, background 200ms ease-in-out;
}
ul.listSelector > li a:hover {
  border-color: var(--color-neutral-3, #888);
  cursor: pointer;
  color: var(--color-neutral, #000);
  text-shadow: none;
}
ul.listSelector > li a:active {
  background-color: var(--color-active-lighten-8p, #5392DC);
  text-shadow: none;
}
ul.listSelector > li a[disabled=disabled], ul.listSelector > li a.disabled {
  background: transparent;
  border-color: var(--color-neutral-4, #ccc) !important;
  color: var(--color-neutral-4, #ccc) !important;
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
ul.listSelector > li a[disabled=disabled]:hover, ul.listSelector > li a.disabled:hover {
  box-shadow: none;
  text-shadow: none;
}
ul.listSelector > li a:hover {
  border-color: var(--color-active, #317cd5);
  box-shadow: 0 0 0 2px #eee;
  cursor: pointer;
  color: var(--color-neutral, #000);
  text-shadow: none;
}
ul.listSelector > li a.selected {
  background: var(--color-active-lighter, #EAF2FB);
  border-color: var(--color-active, #317cd5);
  color: var(--color-active, #317cd5) !important;
  font-weight: 600;
}

.section-BankShifts .bookButton img {
  vertical-align: middle;
  margin-right: 5px;
  float: none;
}

.section-BankShifts .disabledBookButton img {
  vertical-align: middle;
  margin-right: 5px;
}

.section-BankShifts .bookButton {
  min-width: 50px;
}

.section-BankShifts .disabledBookButton {
  min-width: 50px;
}

.section-UnconfirmedDuties .confirmButton {
  min-width: 50px;
  width: 50px;
  float: left;
  margin-right: 5px;
}
.section-UnconfirmedDuties .declineButton {
  min-width: 50px;
  width: 50px;
  float: left;
}
.section-UnconfirmedDuties .editButton {
  min-width: 21px;
  width: 21px;
}

* + html .section-BankShifts .bookButton {
  width: 50px;
}

* + html .section-BankShifts .disabledBookButton {
  width: 50px;
}

.section-BankShifts .bookButton,
.section-BankShifts .disabledBookButton,
.section-UnconfirmedDuties .confirmButton,
.section-UnconfirmedDuties .declineButton,
.section-UnconfirmedDuties .editButton {
  -webkit-appearance: none;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  font-weight: 500;
  color: var(--color-button-text, #070707);
  cursor: pointer;
  display: block;
  transition: opacity 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  font-size: 12px;
  padding: 6px 20px;
  text-align: center;
  background-color: var(--color-button-bg, #fff);
  height: auto;
  border-color: var(--color-neutral-4, #ccc);
  outline: none;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 600;
  padding: 4px 16px;
}
.section-BankShifts .bookButton:hover,
.section-BankShifts .disabledBookButton:hover,
.section-UnconfirmedDuties .confirmButton:hover,
.section-UnconfirmedDuties .declineButton:hover,
.section-UnconfirmedDuties .editButton:hover {
  border-color: var(--color-neutral-3, #888);
  cursor: pointer;
  color: var(--color-neutral, #000);
  text-shadow: none;
}
.section-BankShifts .bookButton:active,
.section-BankShifts .disabledBookButton:active,
.section-UnconfirmedDuties .confirmButton:active,
.section-UnconfirmedDuties .declineButton:active,
.section-UnconfirmedDuties .editButton:active {
  background-color: var(--color-active-lighten-8p, #5392DC);
  text-shadow: none;
}
.section-BankShifts .bookButton[disabled=disabled], .section-BankShifts .bookButton.disabled,
.section-BankShifts .disabledBookButton[disabled=disabled],
.section-BankShifts .disabledBookButton.disabled,
.section-UnconfirmedDuties .confirmButton[disabled=disabled],
.section-UnconfirmedDuties .confirmButton.disabled,
.section-UnconfirmedDuties .declineButton[disabled=disabled],
.section-UnconfirmedDuties .declineButton.disabled,
.section-UnconfirmedDuties .editButton[disabled=disabled],
.section-UnconfirmedDuties .editButton.disabled {
  background: transparent;
  border-color: var(--color-neutral-4, #ccc) !important;
  color: var(--color-neutral-4, #ccc) !important;
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
.section-BankShifts .bookButton[disabled=disabled]:hover, .section-BankShifts .bookButton.disabled:hover,
.section-BankShifts .disabledBookButton[disabled=disabled]:hover,
.section-BankShifts .disabledBookButton.disabled:hover,
.section-UnconfirmedDuties .confirmButton[disabled=disabled]:hover,
.section-UnconfirmedDuties .confirmButton.disabled:hover,
.section-UnconfirmedDuties .declineButton[disabled=disabled]:hover,
.section-UnconfirmedDuties .declineButton.disabled:hover,
.section-UnconfirmedDuties .editButton[disabled=disabled]:hover,
.section-UnconfirmedDuties .editButton.disabled:hover {
  box-shadow: none;
  text-shadow: none;
}

.section-BankShifts .disabledBookButton {
  background: transparent;
  border-color: var(--color-neutral-4, #ccc) !important;
  color: var(--color-neutral-4, #ccc) !important;
  box-shadow: none;
  text-shadow: none;
  cursor: default;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.section-BankShifts .disabledBookButton:hover {
  box-shadow: none;
  text-shadow: none;
}

#content {
  width: auto;
  margin: 0;
  box-sizing: border-box;
}

#content .apply-accordeon p {
  margin: 0 0 14px;
}

#content .apply-accordeon > h5 {
  color: #4C89B8;
  font-weight: normal !important;
  cursor: pointer;
  font: 600 15px/44px proxima-nova, Arial, Helveti, sans-serif;
  height: 37px;
  line-height: 37px;
  padding: 0 0 0 40px;
  position: relative;
  border-bottom: 1px solid #E6E0DC;
  border-top: 1px solid #E6E0DC;
  margin: -1px 0 0;
}

#content .apply-accordeon > h5 span {
  background: url("../../Images/h2_bg_accordeon.png") no-repeat scroll -27px 0 transparent;
  display: block;
  height: 27px;
  position: absolute;
  left: 5px;
  top: 4px;
  width: 27px;
}

#content .apply-accordeon > h5.active span {
  background-position: 0 0 !important;
}

#content .apply-accordeon > h5 a {
  text-decoration: none;
}

#content .apply-accordeon div.content {
  display: none;
  width: auto;
  height: auto;
  padding: 0 10px;
}

#content .apply-accordeon p {
  margin: 0;
  padding: 10px 0 0;
}

.ui-widget-padding {
  padding: 12px 12px !important;
}

.openrosters div.ui-widget-body .RequestDuty {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.openrosters div.ui-widget-body .RequestDuty .shiftDescription {
  display: block !important;
  float: left;
  width: 100%;
  margin-bottom: 5px;
}

.openrosters div.ui-widget-body .RequestDuty ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

.openrosters div.ui-widget-body .RequestDuty li {
  float: left;
  margin-right: 5px;
}

.openrosters div.ui-widget-body li {
  float: left;
  margin-right: 5px;
}

.openrosters div.ui-widget-body li .ui-button .ui-button-text {
  display: block;
  line-height: 1;
}

.ui-dialog-buttonpane.ui-widget-content {
  border-width: 1px 0 0 0;
  border-color: var(--gridRowBorderColor, #e0e0e0);
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
  border-radius: 0;
  margin: 16px 12px 0 12px;
}

.ui-dialog-padding .ui-dialog-buttonpane.ui-widget-content {
  padding: 0 0 8px 0 !important;
}

.ui-dialog .ui-dialog-buttonset {
  float: none;
  display: inline-block;
  white-space: nowrap;
  box-sizing: border-box;
  padding-top: 16px;
}
.ui-dialog .ui-dialog-buttonset > button, .ui-dialog .ui-dialog-buttonset .ui-button {
  margin: 0 4px;
  display: inline-block;
}

.ui-widget-content button.ui-button {
  -webkit-appearance: none;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  font-weight: 500;
  color: var(--color-button-text, #070707);
  cursor: pointer;
  display: block;
  transition: opacity 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  font-size: 12px;
  padding: 6px 20px;
  text-align: center;
  background-color: var(--color-button-bg, #fff);
  height: auto;
  border-color: var(--color-neutral-4, #ccc);
  outline: none;
}
.ui-widget-content button.ui-button:hover {
  border-color: var(--color-neutral-3, #888);
  cursor: pointer;
  color: var(--color-neutral, #000);
  text-shadow: none;
}
.ui-widget-content button.ui-button:active {
  background-color: var(--color-active-lighten-8p, #5392DC);
  text-shadow: none;
}
.ui-widget-content button.ui-button[disabled=disabled], .ui-widget-content button.ui-button.disabled {
  background: transparent;
  border-color: var(--color-neutral-4, #ccc) !important;
  color: var(--color-neutral-4, #ccc) !important;
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
.ui-widget-content button.ui-button[disabled=disabled]:hover, .ui-widget-content button.ui-button.disabled:hover {
  box-shadow: none;
  text-shadow: none;
}
.ui-widget-content button.ui-button > .ui-button-text {
  padding: 0;
  line-height: 1;
  white-space: nowrap;
}

.ui-button.ui-state-default {
  background: none;
}

.k-grid tr.k-alt > td {
  background-color: var(--gridBgRowAlt, #f7f9fb);
}
.k-grid.row-striped tr:nth-child(even) > td {
  background-color: var(--gridBgRowAlt, #f7f9fb);
}
.k-grid td, .k-grid th {
  border: none;
  box-shadow: inset 0 -1px 0 0 var(--gridRowBorderColor, #e0e0e0);
  height: 48px;
  width: auto;
  padding: 4px 10px 4px 10px;
  box-sizing: border-box;
}
.k-grid td.numeric, .k-grid th.numeric {
  text-align: center;
}
.k-grid td.nowrap > label, .k-grid td.nowrap span, .k-grid th.nowrap > label, .k-grid th.nowrap span {
  white-space: nowrap;
}
.k-grid td.icon, .k-grid th.icon {
  min-width: 32px;
  width: 44px;
}
.k-grid td:last-child {
  min-width: 54px;
  padding-right: 8px;
}
.k-grid td:last-child input, .k-grid td:last-child a {
  float: right;
}
.k-grid td.requestId span {
  padding-left: 4px;
}
.k-grid th:last-child {
  padding-right: 16px;
  text-align: right;
  width: 5%;
}
.k-grid.entitlementPeriods th:last-child {
  text-align: left;
}
.k-grid th.actions {
  text-align: right;
  padding-right: 16px;
  width: 5%;
}
.k-grid .end-row > td {
  border-width: 0 0 1px 0 !important;
}
.k-grid .k-detail-cell {
  padding: 0 !important;
}
.k-grid .k-grid-header th .k-link {
  float: left;
}

table.data-list {
  display: inline-block;
  min-width: 150px;
  margin-bottom: 16px;
}
table.data-list th, table.data-list td {
  line-height: 16px;
  padding: 0;
}
table.data-list th {
  font-weight: normal;
  padding-right: 4px;
}
table.data-list td {
  font-weight: bold;
}
table.data-list + table {
  border-left: 1px solid var(--borderDividerColor, #888);
  margin-left: 20px;
}
table.data-list + table th {
  padding-left: 20px;
}

.ui-widget-body > header {
  background-image: none;
  background-color: transparent;
  height: auto;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}
.ui-widget-body > footer {
  padding: 0;
  text-align: left;
  min-height: 28px;
}
.ui-widget-body > footer > input, .ui-widget-body > footer button, .ui-widget-body > footer select {
  float: left;
  display: inline-block;
  clear: none;
}
.ui-widget-body > footer > input.align-right, .ui-widget-body > footer button.align-right, .ui-widget-body > footer select.align-right {
  float: right;
}
.ui-widget-body > footer > .message {
  display: inline-block;
  line-height: 26px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 12px;
  color: #333;
  float: left;
  clear: none;
}
.ui-widget-body > footer > .message.align-right {
  float: right;
}
.ui-widget-body .grid tr:nth-child(even) > td {
  background-color: var(--gridBgRowAlt, #f7f9fb);
}
.ui-widget-body .grid tr.k-state-selected > td {
  background-color: var(--gridRowBgSelected, #e2f6ff);
  box-shadow: inset 0 -1px 0 0 var(--gridSelectedRowBorderColor, #22bcff), inset 0 0 0 0, inset 0 1px 0 0 var(--gridSelectedRowBorderColor, #22bcff);
}
.ui-widget-body > .grid-footer {
  padding: 8px 0 0 0;
}
.ui-widget-body > .grid-footer > p {
  text-align: left;
  font-size: 12px;
  padding: 0;
  margin: 0;
}

.hide-table-headers {
  border-width: 0 !important;
}
.hide-table-headers thead {
  display: none;
}

.h-line {
  border-top: 1px solid #ccc;
  padding-top: 16px;
  margin-top: 16px;
  display: inline-block;
  width: 100%;
}

ul.notes {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.notes > li {
  padding: 0 0 12px 0;
  margin: 0;
}
ul.notes > li > h5 {
  padding: 0;
  margin: 0 0 8px 0;
  font-size: 12px;
}
ul.notes > li .author {
  font-weight: bold;
  color: #000;
  margin-right: 8px;
}
ul.notes > li .date {
  font-weight: normal;
  color: #777;
}
ul.notes > li > .notes {
  font-weight: normal;
  color: #333;
  font-size: 11px;
  line-height: 1.4;
}

.loading-panel {
  position: absolute;
  top: 47%;
  left: 0;
  text-align: center;
  z-index: 99999999;
  width: 100%;
  height: 32px;
  padding: 0;
  margin: 0;
}

.overlay-processing {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 999999;
}

.infobox-list-container {
  padding: 16px;
}
.infobox-list-container h5 {
  margin-bottom: 8px;
}

.display-table-cell {
  display: table-cell;
}

.pull-right {
  float: right;
}

.display-none {
  display: none;
}

.fullwidth {
  width: 100% !important;
}

.actions.dialog-btn-wrapper {
  padding: 0;
}
.actions.dialog-btn-wrapper button {
  float: right;
}
.actions.dialog-btn-wrapper button:first-child {
  margin-left: 8px;
}
.actions.dialog-btn-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.icon-glyph {
  font-family: "Allocate-Icons";
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
  font-size: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
}
.icon-glyph.icon-glyph-small {
  font-size: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
}
.icon-glyph.icon-color-default {
  color: var(--color-glyph-default, rgba(0, 0, 0, 0.47));
}
.icon-glyph.icon-color-green {
  color: var(--color-positive, #3BBC66);
}
.icon-glyph.icon-color-brown {
  color: #CCAA66;
}
.icon-glyph.icon-color-orange {
  color: var(--color-warning, #FF950D);
}
.icon-glyph.icon-color-red {
  color: var(--color-error, #DB5555);
}
.icon-glyph.icon-color-blue {
  color: var(--color-active, #317cd5);
}
.icon-glyph.icon-obsolete {
  color: var(--color-glyph-obsolete, rgba(0, 0, 0, 0.2));
}
.icon-glyph:after {
  font-size: inherit;
}

.icon-glyph-annual-leave:after {
  content: "\ef0f";
}

.icon-glyph-study-leave:after {
  content: "\e80c";
}

.icon-glyph-other-leave:after {
  content: "\e615";
}

.icon-glyph-perosnal-roster:after {
  content: "\e7fd";
}

.icon-glyph-team-roster:after {
  content: "\ef0b";
}

.icon-glyph-pattern-roster:after {
  content: "\e8ec";
}

.icon-glyph-leave-request-pending:after {
  content: "\ec50";
}

.icon-glyph-question-warning:after {
  content: "\ec86";
}

.icon-glyph-leave-canceled:after {
  content: "\f07a";
}

.icon-glyph-approved:after {
  content: "\e876";
}

.icon-glyph-delete:after {
  content: "\e872";
}

.icon-glyph-add:after {
  content: "\e145";
}

.icon-glyph-edit:after {
  content: "\e150";
}

.icon-glyph-obsolete:after {
  content: "\e14b";
}

.icon-glyph-info:after {
  content: "\e88e";
}

.icon-glyph-import:after {
  content: "\e2c4";
}

.icon-glyph-posting:after {
  content: "\f268";
}

.icon-glyph-reject:after {
  content: "\e5cd";
}

.flex-row {
  display: flex;
}

.request-duty-posting-wrapper > h3:not(:first-child) {
  display: none;
}

.unitpreferences #unitPrefenceForm .placeholder-field {
  margin-bottom: 0;
}
.unitpreferences .dialog-body {
  margin: 0;
}
.unitpreferences .ui-dialog-buttonpane {
  padding-bottom: 8px;
}

.section-UnitPreferences .icon-column .icon-glyph {
  margin-right: 8px;
}