* {
    font-family: 'Nunito', sans-serif;
    line-height: 200%;
    font-weight: 500;
    color: #444444;
    user-select: none;
    font-size: 10pt;
}

*.allowTextSelect {
  user-select: text; }

html, body {
    padding: 0;
    margin: 0;
    font-size: 9pt;  
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #EE7203;
    width: 100vw;
    height: 100vh;
}
.shape-top-right {
    right: 0px;
    position: absolute;
    width: 200px;
    height: 200px;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('Top_Right_Shape.png');
}
.shape-bottom-left {
    bottom: 0px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 240px;
    height: 200px;
    background-image: url('Bottom_Left_Shape.png');
}
.img-style {
    width: 126px !important;
    height: auto;
}
.img-margin{
    margin-bottom: 25px;
    margin-top:20px;
}
.field-align {
    width: 300px;    
    margin-left: 25px;
}
a {
    text-decoration: none;
    color: #EE7203;
    cursor: default;
}
.link-color {
    text-decoration: none;
    color: #AAAAAA;
    cursor: default;
}
b, strong {
  font-weight: 700; }

i, em {
  font-style: italic; }

*:not(button).primary, *:not(button).primary * {
  color: #EE7203 !important; }

*:not(button).secondary, *:not(button).secondary * {
  color: #DD1155 !important; }

*:not(button).lightGrey, *:not(button).lightGrey * {
  color: #999999 !important; }

iframe {
  border: none; }

a:hover, a:focus {
  text-decoration: underline; }

*.right {
  float: right; }

*.left {
  float: left; }

*.clear {
  clear: both;
  height: 1px;
  display: block; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  font-size: initial;
  margin: 4px 0; }

img {
  pointer-events: none; }

ng-component {
  margin-top: 65px; }

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

*.alert, *.error, *.field-validation-error {
  color: #FF6B6B;
  display: block; }

.form-control.input-validation-error {
  border-color: #FF6B6B; }

div#login-page {
  /* background: #EE7203; */
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }

div#login-page img {
  width: 200px; }

div#login-page section {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); }

    *.panel, div#login-page section {
        background: white;
        padding: 24px;
        width: 100%;
        box-shadow: 0 1px 2px #00000066
    }

*.panel {
  padding: 0;
  background: transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 24px; }

*.panel > div.panelBody {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
  background: white;
  border-radius: 5px;
  height: 100%;
  display: flex;
  flex-direction: column; }

ng-component > *.row {
  flex: 1; }

*.panel > div.panelBody > header, *.panel > div.panelBody > form > header {
  width: 100%;
  left: 0;
  top: 0;
  padding: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 1px solid #EEEEEE;
  background: white; }

*.panel > div.panelBody > header.image {
  background-position: center;
  background-size: cover;
  height: 250px;
  border: none;
  color: white;
  text-shadow: 0 0 4px black;
  font-size: 18pt;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-weight: 700;
  text-align: center; }

*.panel > div.panelBody > article, *.panel > div.panelBody > form > article {
  padding: 16px;
  background: white; }

div#login-page section {
  width: 400px; }

*.panel > div.panelBody > footer, *.panel > div.panelBody > form > footer {
  margin: auto;
  margin-bottom: 0;
  width: 100%;
  padding: 8px;
  min-height: 38px;
  background: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; }

body > app-root > article {
  left: 275px;
  top: 65px;
  position: relative;
  width: calc(100% - 275px);
  padding: 55px; }

ul.bigList {
  margin: -16px;
  padding: 0;
  list-style: none;
  max-height: 700px;
  overflow-y: auto; }

ul.bigList > li {
  min-height: 60px;
  border-bottom: 1px solid #EEEEEE;
  padding: 24px;
  cursor: default;
  position: relative;
  background: white;
  transition: 125ms background-color cubic-bezier(0.03, 0.18, 0, 0.99); }

ul.bigList > li > header {
  border: none;
  padding: 0;
  padding-bottom: 12px;
  color: #999999;
  background: transparent; }

ul.bigList > li > article {
  border: none;
  padding: 0;
  background: transparent; }

ul.bigList > li:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 4px;
  background: #EE7203;
  top: 0;
  left: 0;
  transition: 125ms width cubic-bezier(0.03, 0.18, 0, 0.99); }

ul.bigList > li:hover:after {
  width: 16px; }

ul.bigList > li:hover {
  background: rgba(3, 206, 164, 0.125); }

div.notificationContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 8000; }

div.notification {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0 16px;
  text-align: center;
  background: #EE7203;
  color: white;
  z-index: 8000;
  outline: 1px solid rgba(255, 255, 255, 0.35);
  overflow: hidden;
  height: 0;
  line-height: 57px;
  animation: NotificationIn 5000ms forwards cubic-bezier(0.03, 0.18, 0, 0.99); }

@keyframes NotificationIn {
  0% {
    height: 0; }
  3% {
    height: 70px; }
  10% {
    height: 57px; }
  85% {
    height: 57px; }
  88% {
    height: 70px; }
  95% {
    height: 0; } }

@media (max-width: 800px) {
  div#login-page section {
    width: 96%;
    margin: 2px 0; }
  body > app-root > article {
    padding: 16px; } }

form {
  display: flex;
  flex-direction: column; }

fieldset {
  border: none; }

label {
  display: block;
  padding-top: 8px; }

*.form-control {
    display: block;
    width: 100%;
    padding: 14px;
    margin: 0 0 12px 0;
    border: 2px solid #AAAAAA;
    outline: none;
    height: 50px;
    transition: 175ms border-color cubic-bezier(0.03, 0.18, 0, 0.99);
    border-radius: 4px;
}
.form_group {
    position: relative;
    margin-bottom: 20px;
}
.floating-label {
    position: absolute;
    top: -8px;
    left: 12px;
    background-color: #fff;
    padding: 0 5px;
    font-size: 12px;
    color: #888;
    pointer-events: none;
}
input[type=checkbox].form-control {
  display: inline-block;
  width: 23px;
  height: 23px;
  position: relative;
  border-radius: 2px; }

input[type=checkbox].form-control:after {
  content: "";
  position: absolute;
  background: white;
  border: 1px solid #EEEEEE;
  width: 23px;
  height: 23px;
  border-radius: 2px; }

input[type=checkbox].form-control:checked:after {
  background-color: #EE7203;
  background-image: url("../assets/img/tick.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%; }

*.form-control:focus, *.form-control:hover,
input[type=checkbox].form-control:hover:after,
input[type=checkbox].form-control:focus:after,
input[type=checkbox].form-control:checked:after {
  border-color: #EE7203; }

button {
    margin: 0 auto;
    display: block;
    background: #EE7203 !important;
    border: 1px solid #EEEEEE;
    height: 38px;
    background: white;
    padding: 0 28px;
    outline: none;
    font-weight: 300;
    line-height: 30px !important;
    color:white;
}

button.primary, button.small.primary {
  border-color: #EE7203;
  color: #EE7203; }

button:active {
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.125); }

button:not(.small):hover, button:not(.small):focus {
  background: #dd1155;
  cursor: pointer;
}

button.primary:not(.small):hover, button.primary:not(.small):focus {
  background: #EE7203;
  color: white;
  border: 1px solid #EE7203; }

button.small {
  height: 30px;
  padding: 0 24px;
  border-radius: 0;
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  margin: -8px 0;
  border-radius: 2px;
  margin-bottom: 0;
  display: inline-block; }

button.small.right {
  margin-left: 4px; }

button.small.left {
  margin-right: 4px; }

button.small:hover, button.small:focus {
  background: #dd1155;
  color: white; }

button.primary.small:hover, button.primary.small:focus {
  background: #EE7203;
}

nav#main-bar {
  line-height: 65px;
  height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  font-size: 10pt;
  z-index: 10; }

nav#main-bar div.container {
  background: rgba(255, 255, 255, 0);
  padding: 0 30px; }

nav#main-bar, nav#main-bar div.container {
  transition: 225ms all cubic-bezier(0.03, 0.18, 0, 0.99); }

div#corporate-logo {
  width: 275px;
  float: left;
  text-align: center;
  height: 65px;
  background: #EE7203; }

div#corporate-logo img {
  max-height: 65px; }

button#menu-button {
  display: none;
  box-shadow: none !important; }

aside#main-menu {
  position: fixed;
  left: 0;
  top: 65px;
  height: calc(100vh - 65px);
  z-index: 5;
  width: 275px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); }

aside#main-menu ul {
  margin: 0;
  padding: 0;
  list-style: none; }

aside#main-menu ul li {
  cursor: default;
  background: white; }

aside#main-menu ul li a {
  color: #2A2A2A;
  text-decoration: none;
  display: block;
  padding: calc(24px / 2) 20px;
  transition: 175ms background-color cubic-bezier(0.03, 0.18, 0, 0.99);
  font-weight: 700; }

aside#main-menu ul li a:hover {
  background: rgba(3, 206, 164, 0.125);
  color: #015040; }

ul#account-menu {
  list-style: none;
  float: right;
  margin-right: 16px;
  height: 65px;
  margin: 0;
  padding: 0;
  position: relative; }

ul#account-menu > li {
  width: 65px;
  height: 65px;
  display: inline-block;
  text-align: center;
  cursor: default; }

ul#account-menu > li:hover {
  background: rgba(3, 206, 164, 0.125); }

ul#account-menu > li > img {
  width: 25px;
  height: 25px;
  margin-top: 20px;
  pointer-events: none; }

ul#account-menu ul.inner-menu {
  position: relative;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 11px;
  right: 140px;
  min-width: 200px;
  height: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); }

ul#account-menu ul.inner-menu > li > a {
  min-height: 45px;
  line-height: 45px;
  display: block;
  font-weight: 700;
  text-decoration: none;
  color: #2A2A2A;
  transition: 175ms all cubic-bezier(0.03, 0.18, 0, 0.99); }

ul#account-menu ul.inner-menu > li > a:hover {
  background: rgba(3, 206, 164, 0.125);
  color: #015040; }

ul#account-menu ul.inner-menu > li > header, ul#account-menu ul.inner-menu > li > footer {
  cursor: default; }

ul#account-menu ul.inner-menu > li > header {
  padding-top: 16px; }

ul#account-menu ul.inner-menu > li > footer {
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 16px; }

ul#account-menu > li > ul.inner-menu {
  opacity: 0;
  top: 0px;
  pointer-events: none;
  transition: 250ms all cubic-bezier(0.03, 0.18, 0, 0.99);
  transition-delay: 200ms;
  border-radius: 5px;
  overflow: hidden; }

ul#account-menu > li:hover > ul.inner-menu, ul#account-menu > li > *:hover {
  opacity: 1;
  top: 11px;
  pointer-events: all;
  transition-delay: 0ms; }

ul#account-menu ul.inner-menu > li > header div#user-image-container {
  overflow: hidden;
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 50%; }

ul#account-menu ul.inner-menu > li > header div#user-image-container img {
  display: block;
  width: 100px; }

@media (max-width: 800px) {
  button#menu-button {
    width: 65px;
    height: 65px;
    border: none;
    float: left;
    display: block;
    background: none;
    outline: none !important;
    padding: 0; }
  nav#main-bar .container {
    padding-left: 0 !important; }
  nav#main-bar {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); }
  nav#main-bar.detatch, nav#main-bar.detatch div.container {
    top: 0;
    box-shadow: none; }
  button#menu-button.open svg path {
    stroke-dashoffset: 70; }
  button#menu-button.open svg path:first-of-type {
    stroke-dashoffset: -78; }
  button#menu-button.open svg path:last-of-type {
    stroke-dashoffset: -130; }
  button#menu-button:not(.open) svg path {
    stroke-dashoffset: 8; }
  button#menu-button svg path {
    transition: 300ms all cubic-bezier(0.03, 0.18, 0, 0.99);
    stroke: #EE7203; }
  div#corporate-logo {
    background: transparent;
    width: auto; }
  aside#main-menu {
    left: -275px;
    transition: 350ms left cubic-bezier(0.03, 0.18, 0, 0.99); }
  aside#main-menu.open {
    left: 0; }
  body > app-root > article {
    width: 100%;
    left: 0; }
  aside#main-menu {
    background: #2A2A2A; }
  aside#main-menu ul li {
    background: transparent; }
  aside#main-menu ul li a:hover {
    background: black; }
  aside#main-menu ul li a {
    color: white; } }

@media (max-width: 600px) {
  nav#main-bar {
    transition: 250ms all cubic-bezier(0.03, 0.18, 0, 0.99);
    display: flex; }
  div#corporate-logo {
    width: calc(100% - 160px);
    max-width: 100%; }
  aside#main-menu {
    width: 100%;
    left: -100vw;
    background: #2A2A2A;
    opacity: 0;
    transition: 200ms all cubic-bezier(0.03, 0.18, 0, 0.99); }
  aside#main-menu ul li {
    background: transparent; }
  aside#main-menu ul li a:hover {
    background: black; }
  aside#main-menu ul li a {
    color: white; }
  aside#main-menu.open {
    left: 0;
    opacity: 1; } }

div.tableResponsive {
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: -16px;
  margin-top: 0;
  width: calc(100% + 32px); }

table.dataTable {
  width: 100%;
  border-collapse: collapse; }

table.dataTable thead {
  background: #2A2A2A;
  text-align: left; }

table.dataTable thead th {
  padding: 16px;
  color: white;
  white-space: nowrap;
  font-weight: 700; }

table.dataTable tbody td {
  padding: 16px;
  white-space: nowrap;
  border-bottom: 1px solid #EEEEEE; }

table.dataTable.striped tbody tr:nth-child(2n+2) {
  background: rgba(0, 0, 0, 0.03); }

table.dataTable.hover tbody tr:hover {
  background: rgba(3, 206, 164, 0.125); }

table.dataTable td > input.form-control[type=checkbox], table.dataTable th > input.form-control[type=checkbox] {
  margin-bottom: 0;
  margin-top: 5px; }

section#page-splash {
  height: 800px;
  background: #EE7203;
  position: relative;
  overflow: hidden; }

section#page-splash #layer-one, section#page-splash #layer-two {
  display: inline-block;
  position: relative;
  width: 500px;
  text-align: center;
  color: white;
  pointer-events: none;
  transform: perspective(500px) rotateX(0deg) rotateY(0deg); }

section#page-splash #layer-one {
  font-weight: 700;
  font-size: 36pt;
  padding: 20px 0;
  transform-origin: center bottom; }

section#container-3d {
  transform-origin: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 800px;
  max-height: 100vh;
  transform-origin: center top; }

section#loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #EE7203;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 9999; }

section#loader svg {
  margin: 0 auto; }

section#loader svg rect {
  opacity: 0;
  animation: loader-square 800ms ease infinite; }

section#loader svg rect:nth-of-type(1) {
  animation-delay: 0ms; }

section#loader svg rect:nth-of-type(2) {
  animation-delay: 50ms; }

section#loader svg rect:nth-of-type(3) {
  animation-delay: 100ms; }

section#loader svg rect:nth-of-type(4) {
  animation-delay: 150ms; }

section#loader svg rect:nth-of-type(5) {
  animation-delay: 200ms; }

section#loader svg rect:nth-of-type(6) {
  animation-delay: 250ms; }

section#loader svg rect:nth-of-type(7) {
  animation-delay: 300ms; }

section#loader svg rect:nth-of-type(8) {
  animation-delay: 350ms; }

section#loader svg rect:nth-of-type(9) {
  animation-delay: 400ms; }

@keyframes loader-square {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

section#loader.hide {
  animation: loader-hide 250ms ease forwards;
  animation-delay: 500ms; }

@keyframes loader-hide {
  from {
    opacity: 1;
    transform: scale(1); }
  to {
    opacity: 0;
    transform: scale(1.1); } }

.validation-summary-errors ul {
    list-style: none;
    padding-left: 0;
    color: red;
}

    .validation-summary-errors ul li {
        color: red;
    }

    .validation-summary-valid {
        display: none !important;
    }