﻿* {
  box-sizing: border-box; }

html {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  font-weight: 600;
  background-color: #ffffff;
  color: #202020;
  line-height: 1.125;
  margin: 0;
  height: 100%;
  background: #f0f0f0; }

body {
  padding: 0;
  margin: 0; }

a {
  white-space: nowrap;
  text-decoration: none;
  color: inherit; }

wl-horizontal-stack {
  display: flex; }

.full-height-children {
  align-items: stretch; }

.width-100pct {
  width: 100% !important; }

.width-80pct {
  width: 80% !important; }

.width-60pct {
  width: 60% !important; }

.width-50pct {
  width: 50% !important; }

.width-40pct {
  width: 40% !important; }

.width-20pct {
  width: 20% !important; }

.hidden {
  visibility: hidden; }

.nowrap {
  white-space: nowrap; }

.error {
  color: Red; }

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

.field-validation-error {
  color: #ff0000; }

.input-validation-error {
  border: 1px solid #ff0000;
  background-color: #ffeeee; }

.validation-summary-errors {
  font-weight: bold;
  color: #ff0000; }

.icon {
  height: 100%;
  margin: auto;
  width: auto; }

.icon-fill {
  fill: #606060; }

header {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: 100%;
  top: 0;
  left: 0;
  font-size: 1em;
  z-index: 1; }
  header wl-header-contentmenu {
    top: 4em;
    height: 2.25em;
    display: flex;
    width: 100%;
    left: 0;
    background-color: #c7d4fa;
    padding: 0 2.25em;
    border-bottom: 1px solid #c0c0c0; }
    header wl-header-contentmenu wl-menu-item:hover {
      background-color: #f0f0f0; }
    header wl-header-contentmenu wl-menu-item {
      display: flex;
      position: relative;
      height: 100%;
      padding: 0 0.75em; }
      header wl-header-contentmenu wl-menu-item wl-menu-item-downarrow {
        display: flex;
        height: 0.85em;
        margin: auto 0.1em;
        padding-top: 0.2em; }
      header wl-header-contentmenu wl-menu-item a {
        white-space: nowrap;
        margin: auto 0;
        font-weight: 700;
        color: #103ab2; }
      header wl-header-contentmenu wl-menu-item wl-submenu {
        position: absolute;
        visibility: hidden;
        top: 2em;
        right: 1em;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        box-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.25);
        border-radius: 0.25em;
        z-index: 1; }
        header wl-header-contentmenu wl-menu-item wl-submenu wl-submenu-item:hover {
          background: #e0e0e0; }
        header wl-header-contentmenu wl-menu-item wl-submenu wl-submenu-item {
          padding: 0.375em 1em;
          position: relative;
          background-color: #ffffff; }
          header wl-header-contentmenu wl-menu-item wl-submenu wl-submenu-item a {
            font-size: 1em;
            /*color: $gray_6_8;*/
            font-weight: 400;
            /*font-weight: inherit;*/
            color: #103ab2; }
  header wl-header-main {
    height: 4em;
    display: flex;
    align-items: stretch;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #ffffff;
    align-items: stretch;
    border-bottom: 1px solid #c0c0c0; }
    header wl-header-main wl-header-main-stretch {
      width: 100%; }
    header wl-header-main wl-header-main-title {
      margin: auto 0;
      font-size: 2em;
      font-weight: 900;
      padding: 0 1.5em;
      color: #103ab2; }
    header wl-header-main wl-header-main-user {
      display: flex;
      flex-wrap: nowrap;
      color: #103ab2;
      margin: 0 1.5em; }
      header wl-header-main wl-header-main-user wl-header-main-user-symbol {
        height: 1.25em;
        margin: auto 0.3em; }
        header wl-header-main wl-header-main-user wl-header-main-user-symbol .icon-fill {
          fill: #f5b00c; }
      header wl-header-main wl-header-main-user wl-header-main-user-firstname {
        margin: auto 0.1em;
        font-weight: 700;
        white-space: nowrap; }
      header wl-header-main wl-header-main-user wl-header-main-user-downarrow {
        display: flex;
        height: 0.85em;
        margin: auto 0.1em;
        padding-top: 0.2em; }
      header wl-header-main wl-header-main-user wl-submenu {
        position: absolute;
        visibility: hidden;
        top: 3em;
        right: 1.5em;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        box-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.25);
        border-radius: 0.25em;
        z-index: 1; }
        header wl-header-main wl-header-main-user wl-submenu wl-submenu-item:hover {
          background: #e0e0e0; }
        header wl-header-main wl-header-main-user wl-submenu wl-submenu-item {
          padding: 0.375em 1em;
          position: relative; }
          header wl-header-main wl-header-main-user wl-submenu wl-submenu-item a {
            font-size: 1em;
            /*color: $gray_6_8;*/
            font-weight: 600;
            /*font-weight: inherit;*/
            color: inherit; }
          header wl-header-main wl-header-main-user wl-submenu wl-submenu-item wl-submenu {
            visibility: hidden;
            top: 0;
            left: 100%; }
    header wl-header-main wl-header-main-menu {
      display: flex;
      flex-wrap: nowrap;
      /*margin: auto 0;*/ }
      header wl-header-main wl-header-main-menu wl-menu-item:hover > a {
        border-bottom: 0.1em solid #f5b00c; }
      header wl-header-main wl-header-main-menu wl-menu-item {
        display: flex;
        margin: auto 0.4em;
        position: relative; }
        header wl-header-main wl-header-main-menu wl-menu-item wl-menu-item-downarrow {
          display: flex;
          height: 0.85em;
          margin: auto 0.1em;
          padding-top: 0.2em; }
        header wl-header-main wl-header-main-menu wl-menu-item > a {
          font-weight: 700;
          font-size: 1.125em;
          white-space: nowrap;
          border: 0.1em solid transparent;
          color: inherit; }
        header wl-header-main wl-header-main-menu wl-menu-item wl-submenu {
          visibility: hidden;
          position: absolute;
          top: 2em;
          left: 0;
          display: flex;
          flex-direction: column;
          background: #ffffff;
          border: 1px solid #e0e0e0;
          box-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.25);
          border-radius: 0.25em;
          z-index: 1; }
          header wl-header-main wl-header-main-menu wl-menu-item wl-submenu wl-submenu-item:hover {
            background: #e0e0e0; }
          header wl-header-main wl-header-main-menu wl-menu-item wl-submenu wl-submenu-item {
            padding: 0.375em 1em;
            position: relative; }
            header wl-header-main wl-header-main-menu wl-menu-item wl-submenu wl-submenu-item a {
              font-size: 1em;
              /*color: $gray_6_8;*/
              /*font-weight: 600;*/
              font-weight: inherit;
              color: inherit; }
            header wl-header-main wl-header-main-menu wl-menu-item wl-submenu wl-submenu-item wl-submenu {
              top: 0;
              left: 100%; }

main {
  margin-top: 4em;
  display: flex;
  flex-direction: column;
  padding-top: 3em;
  padding-left: 3em;
  padding-right: 3em;
  padding-bottom: 6em;
  font-size: 1em;
  background: #f0f0f0; }
  main a {
    color: #103ab2;
    font-weight: 700; }
  main .left_section {
    margin-right: 1em !important; }
  main .right_section {
    margin-left: 1em !important; }
  main .section {
    margin: 1em 0 2em 0;
    display: flex;
    flex-direction: column; }
    main .section .section_header {
      font-size: 1.25em;
      color: #103ab2;
      font-weight: 700;
      border-bottom: thick solid #103ab2;
      margin-bottom: 1em;
      padding-bottom: 0.5em;
      margin-top: 0; }
    main .section .section_body {
      margin: 1em 0; }
      main .section .section_body .buttonSeparator {
        height: 1em; }
    main .section .section_body_details {
      padding: 1em;
      background: #ffffff;
      border-radius: 0.25em; }
  main .section_collapsible .section_header {
    display: flex;
    align-items: center;
    cursor: pointer; }
    main .section_collapsible .section_header wl-downarrow {
      height: 1em;
      padding-top: 0.125em;
      padding-right: 0.25em; }
      main .section_collapsible .section_header wl-downarrow .icon {
        transform: rotate(0deg);
        transition: transform 0.3s linear; }
        main .section_collapsible .section_header wl-downarrow .icon .icon-fill {
          fill: #103ab2; }
  main .section_collapsible .collapsed_header wl-downarrow .icon {
    transform: rotate(-180deg); }
  main .full-height-children .section {
    align-content: stretch; }
    main .full-height-children .section .section_body {
      flex-grow: 2; }
  main li.advon {
    background: url(../Icons/tick.png) 0.5em 50%;
    cursor: pointer; }
  main li.advon:hover {
    background-color: #fff; }
  main li.advoff {
    background: url(../Icons/cross.png) 0.5em 50%;
    cursor: pointer; }
  main li.advoff:hover {
    background-color: #fff; }
  main .selectcolumn_container {
    float: left;
    clear: none;
    position: relative;
    margin-right: 1em; }
  main .selectcolumn_container > img {
    cursor: pointer; }
  main .selectcolumn_container ul {
    position: fixed;
    visibility: hidden;
    border: 1px solid #5970B2;
    list-style: none;
    font-weight: bold;
    text-decoration: none;
    background-color: #e8eef4;
    color: #103ab2;
    padding: 0 0 0;
    margin: 0;
    width: auto;
    white-space: nowrap;
    text-align: left;
    display: block;
    z-index: 5; }
  main .selectcolumn_container li {
    /*position: relative;*/
    background-repeat: no-repeat;
    font-weight: 700;
    padding: 0.5em 1em;
    padding-left: 2em;
    /*margin-left: 0.5em;*/ }
  main table#InvoiceSpec {
    background: none;
    border: none; }
    main table#InvoiceSpec td {
      border: none; }
    main table#InvoiceSpec tfoot {
      border-top-color: #000000;
      border-top-style: double;
      border-top-width: 2.5pt; }
  main input[type="button"], main input[type="submit"], main button, main button.fat {
    background: #103ab2;
    color: #ffffff;
    font-weight: 700;
    border-radius: 0.25em;
    border: none;
    margin: 0.2em;
    padding: 0.75em 1em;
    font-size: 1em;
    cursor: pointer;
    -webkit-appearance: none; }
  main input[type="button"]:disabled, main input[type="submit"]:disabled, main button:disabled, main button.fat:disabled {
    background: #c0c0c0;
    color: #a0a0a0; }
  main button.skinny {
    background: none;
    color: #103ab2;
    border: none; }
  main button.skinny:disabled {
    background: none;
    color: #a0a0a0;
    border: none; }
  main > div > a {
    margin: 1em auto;
    display: block; }

/* Legacy stuff ... */
/* Pager   
----------------------------------------------------------*/
.pager {
  float: left;
  clear: none; }

.pager form * {
  margin: 0 2px; }

.pager .pagedisplay {
  width: 50px; }

/* forms need to visually improved*/
.bottom_submit {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  height: 5rem;
  display: flex;
  left: 0;
  border-top: thin solid #c0c0c0;
  align-items: center;
  padding: 0 4em;
  z-index: 2; }
  .bottom_submit > * {
    margin: auto 1em !important; }

fieldset {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #c0c0c0;
  clear: both; }

fieldset p, form p {
  margin: 1em 1em; }

fieldset label, form label {
  display: block;
  margin-bottom: 0.1875em;
  /*3/16em*/ }

fieldset label.inline {
  display: inline; }

legend {
  font-size: 1.1em;
  font-weight: 600;
  padding: 2px 4px 8px 4px;
  color: #034ac8; }

input[type="text"], input[type="password"], select {
  width: 20em;
  border: 1px solid #c0c0c0;
  padding: 0.35em;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1em;
  border-radius: 0.25em;
  -webkit-appearance: none; }

input[type="checkbox"] {
  padding: 0.35em;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1em; }

.details input[type="text"] {
  width: 8em; }

select.status {
  width: auto; }

textarea {
  font-family: inherit;
  padding: 0.35em;
  width: 20em;
  resize: none;
  font-size: 1em;
  border: 1px solid #c0c0c0;
  border-radius: 0.25em; }

input::placeholder {
  color: #c0c0c0; }

@media print {
  header {
    display: none; }
  main {
    font-size: 0.6em; } }
