@import url("/static/work/css/sass/repetitive.e2207715ebd6.css");

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: 86px;
}

a img {
    border: 0 none;
    outline: medium none;
}

.clearing {
    clear: both;
    height: 0;
}

tbody {
    border: 0 none;
}

body {
    color: #505050;
    font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6em;
}

p.job_home_short_desc {
    line-height: 27px;
}

p {
    font-size: 14px;
    color: #464646;
}

ul {
    list-style-position: inside;
    font-size: 14px;
    color: #464646;
}

h1 {
    font-family: "open sans condensed", sans-serif;
    color: #000000;
    font-weight: 400;
    margin-bottom: 22px;
    letter-spacing: 1px;
}

h2 {
    color: #505050;
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 2px;
    font-family: "open sans condensed", Arial, Sans-Serif, sans-serif;
}

a {
    font-weight: 500;
    color: #468CAF;
    text-decoration: none;
}

a:hover {
    color: #1f5c7a;
    text-decoration: underline;
}

#header-container {
    height: 130px;
    margin-left: auto;
    margin-right: auto;
    min-width: 980px;
    border-top: 8px solid #000000;
    background-color: #FFFFFF;
}

#header {
    height: 130px;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    background-position: top left;
    background-repeat: no-repeat;
}

#logo {
    float: left;
    height: 133px;
    width: 282px;
}

#logo-block-sleeve {
    float: left;
    height: 133px;
    width: 505px;
}

#header-right {
    float: left;
    height: 130px;
    position: relative;
    width: 475px;
}

#header-right-top-nav {
    float: left;
    height: 50px;
    width: 475px;
}

span.make_bold {
    font-weight: 600;
}

div#home-top-container-left-main-banner img {
    box-shadow: 3px 3px 3px #D6D6D6;
}

h1.home-intro {
    font-size: 21px;
}

#header-right-contact-no {
    height: 83px;
    width: 475px;
    float: left;
    position: relative;
}

div#header-slogan {
    float: right;
    margin-right: 7px;
}

#header-right-contact-no-image {
    float: right;
}

#header-right-contact-no-image p {
    height: 24px;
    float: right;
    position: absolute;
    bottom: 25px;
    right: 0;
    font-size: 28px;
    width: 250px;
}

#header-right-contact-no-image span {
    color: #000;
    font-size: 28px;
}

#bottom-header {
    height: 49px;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

ul.header-top-nav {
    height: 50px;
    list-style-type: none;
    margin-left: 20px;
}

ul.header-top-nav + ul.header-top-nav {
    margin-left: auto;
    margin-right: 20px;
}

ul#header-top-nav li a {
    color: #505050;
    padding-left: 13px;
    padding-right: 13px;
    border-left: 1px solid #D6D6D6;
    font-size: 16px;
}

ul#header-top-nav li a:hover {
    color: #C5070F;
    text-decoration: underline;
}

ul li.header-top-nav-link {
    height: 36px;
    float: left;
    display: inline-block;
    font-size: 15px;
    color: #FFF;
    margin-top: 12px;
    font-weight: normal;
}

#header-bottom-container {
    background-color: #FFF;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    min-width: 980px;
    width: 100%;
}

#page-container {
    position: relative;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    min-width: 980px;
    width: 100%;
}

#tag-line-wrap {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 980px;
    background-color: #FFF;
    border-top: 1px solid #D6D6D6;
    padding-top: 19px;
}

#home-top-container {
    margin-right: auto;
    position: relative;
    width: 953px;
    margin-left: 27px;
    height: 514px;
}

a.rhs_all_link_new {
    background-color: #000000;
    width: 150px;
    height: 28px;
    color: #FFF;
    padding: 8px;
    font-size: 15px;
    font-weight: 400;
}

a.rhs_all_link_new:hover {
    background-color: #BF0000;
    color: #FFF;
}

span.read-more-new {
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
}

#home-middle-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 980px;
    margin-top: 27px;
    float: left;
}

#home-middle-container-left {
    position: relative;
    width: 648px;
    float: left;
    margin-right: 27px;
}

#home-middle-container-right {
    position: relative;
    width: 250px;
    margin-right: 15px;
    float: right;
}

#home-top-container-left {
    position: relative;
    width: 677px;
    float: left;
    height: 464px;
}

#home-top-container-right {
    position: relative;
    width: 268px;
    float: right;
    height: 464px;
}

#home-top-container-right-banner-box-1 {
    position: relative;
    width: 268px;
    float: left;
    height: 163px;
    margin-bottom: 8px;
}

#home-top-container-right-banner-box-2 {
    position: relative;
    width: 268px;
    float: left;
    height: 163px;
    margin-bottom: 8px;
    margin-top: 8px;
}

#home-top-container-right-banner-box-3 {
    position: relative;
    width: 268px;
    float: left;
    height: 163px;
}

.clearing {
    clear: both;
    height: 0;
}

h2.footer-solan-top {
    font-weight: 600;
    font-size: 22px;
    margin-top: 20px;
}

h2.footer-slogan-bottom {
    font-weight: 200;
    font-size: 22px;
    margin-left: 68px;
}

#footer-container {
    margin-left: auto;
    margin-right: auto;
    min-width: 980px;
    position: relative;
    width: 100%;
    background-color: #F5F5F5;
    border-top: 1px solid #E4E4E4;
    margin-top: 40px;
}

#footer-container-sleeve {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    min-width: 980px;
    top: 0;
}

#footer-details {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    min-width: 980px;
}

#footer-details-block {
    position: relative;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    min-width: 980px;
    line-height: 1.3em;
}

#footer-contact-details-block p {
    color: #505050;
    font-size: 13px;
}

div.red-cross {
    width: 50px;
    height: 89px;
    float: left;
    border-right: 1px solid #D4D4D4;
}

#footer-1 {
    min-width: 150px;
    float: left;
}

#footer-2 {
    min-width: 150px;
    float: left;
    padding-left: 25px;
}

#footer-3 {
    min-width: 266px;
    float: left;
    padding-left: 80px;
    position: relative;
}

/*! CSS Used from: Embedded */
.fb_reset {
    background: none;
    border: 0;
    border-spacing: 0;
    color: #000;
    cursor: auto;
    direction: ltr;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    margin: 0;
    overflow: visible;
    padding: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    visibility: visible;
    white-space: normal;
    word-spacing: normal;
}

.fb_reset>div {
    overflow: hidden;
}

.grid-padding-x .grid-padding-x {
    margin-right: -0.625rem;
    margin-left: -0.625rem; }
@media print, screen and (min-width: 40em) {
    .grid-padding-x .grid-padding-x {
        margin-right: -0.9375rem;
        margin-left: -0.9375rem; } }

.grid-container:not(.full) > .grid-padding-x {
    margin-right: -0.625rem;
    margin-left: -0.625rem; }
@media print, screen and (min-width: 40em) {
    .grid-container:not(.full) > .grid-padding-x {
        margin-right: -0.9375rem;
        margin-left: -0.9375rem; } }

.grid-padding-x > .cell {
    padding-right: 0.625rem;
    padding-left: 0.625rem; }
@media print, screen and (min-width: 40em) {
    .grid-padding-x > .cell {
        padding-right: 0.9375rem;
        padding-left: 0.9375rem; } }

.grid-x {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap; }

.large-offset-4 {
    margin-left: 33.33333%; }


.flex-row {
    display: flex;
    flex-direction: row;
}

.top-nav li a {
    color: #505050;
    padding-left: 13px;
    padding-right: 13px;
    border-left: 1px solid #D6D6D6;
    font-size: 16px;
}

.img-attachment {
    max-width: 200px;
    height: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
    border-radius: 0;
}

.cell {
    width: 100%;
}

div#attachment-pdf-container, embed.pdfobject {
    min-height: 1400px;
}

div.attachment-group {
    display: flex;
    flex-direction: row;
}

div.attachment {
    margin: 12px;
}

img.img-attachment {
    max-height: 64px;
    width: auto;
}

p.attachment-file-name {
    font-size: 12px;
}

div#note-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

div.note {
    margin: 12px;
    padding: 8px;
    background: #fcfcfc;
    border-radius: 4px;
    height: fit-content;
    word-wrap: break-word;
}

span.action-description {
    font-size: 13px;
    color: #636363;
}

span.action-footer {
    font-size: 12px;
    color: gray;
}

.note-channel {
    font-size: 12px;
    color: gray;
}

p.note-text {
    margin-bottom: auto;
}

.button.failure {
    background-color: #b94f4f;
}

.button.cancel {
    background-color: #b94f4f;
}

.button.continue {
    background-color: #92C34A;
}

.button.continue:hover {
    background-color: rgb(124, 169, 58);
}

tr.save-row input.button {
    min-width: 120px;
    min-height: 45px;
}

.button + .button {
    margin-right: 4px;
}

.button {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 4px 0;
    padding: 0.85em 1em;
    border: 1px solid transparent;
    border-radius: 0;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    font-family: inherit;
    font-size: 0.9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer; }
[data-whatinput='mouse'] .button {
    outline: 0; }
.button.tiny {
    font-size: 0.6rem; }
.button.small {
    font-size: 0.75rem; }
.button.large {
    font-size: 1.25rem; }
.button.expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
.button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus {
    background-color: #28b5f4;
    color: #fefefe; }
.button:hover, .button:focus {
    background-color: #0ca2e6;
    color: #fefefe; }
.button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover, .button.primary.disabled:focus, .button.primary[disabled]:focus {
    background-color: #28b5f4;
}
.button.primary:hover, .button.primary:focus {
    background-color: #0b99d8;
}
.button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus, .button.secondary[disabled]:focus {
    background-color: #4dd0e1;
}
.button.secondary:hover, .button.secondary:focus {
    background-color: #23bbcf;
}
.button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover, .button.success.disabled:focus, .button.success[disabled]:focus {
    background-color: #92C34A;
}
.button.success:hover, .button.success:focus {
    background-color: rgb(124, 169, 58);
}
.button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover, .button.warning[disabled]:hover, .button.warning.disabled:focus, .button.warning[disabled]:focus {
    background-color: #ffae00;
}
.button.warning:hover, .button.warning:focus {
    background-color: #cc8b00;
}
.button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover, .button.alert.disabled:focus, .button.alert[disabled]:focus {
    background-color: #cc4b37;
    color: #fefefe; }
.button.alert:hover, .button.alert:focus {
    background-color: #a53b2a;
    color: #fefefe; }
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[disabled], .button.hollow[disabled]:hover, .button.hollow[disabled]:focus {
    background-color: transparent; }
.button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover, .button.hollow[disabled]:hover, .button.hollow.disabled:focus, .button.hollow[disabled]:focus {
    border: 1px solid #28b5f4;
    color: #28b5f4; }
.button.hollow:hover, .button.hollow:focus {
    border-color: #076087;
    color: #076087; }
.button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[disabled], .button.hollow.primary.disabled:hover, .button.hollow.primary[disabled]:hover, .button.hollow.primary.disabled:focus, .button.hollow.primary[disabled]:focus {
    border: 1px solid #28b5f4;
    color: #28b5f4; }
.button.hollow.primary:hover, .button.hollow.primary:focus {
    border-color: #076087;
    color: #076087; }
.button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover, .button.hollow.secondary[disabled]:hover, .button.hollow.secondary.disabled:focus, .button.hollow.secondary[disabled]:focus {
    border: 1px solid #4dd0e1;
    color: #4dd0e1; }
.button.hollow.secondary:hover, .button.hollow.secondary:focus {
    border-color: #167581;
    color: #167581; }
.button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[disabled], .button.hollow.success.disabled:hover, .button.hollow.success[disabled]:hover, .button.hollow.success.disabled:focus, .button.hollow.success[disabled]:focus {
    border: 1px solid #4FB96C;
    color: #4FB96C; }
.button.hollow.success:hover, .button.hollow.success:focus {
    border-color: #265e35;
    color: #265e35; }
.button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[disabled], .button.hollow.warning.disabled:hover, .button.hollow.warning[disabled]:hover, .button.hollow.warning.disabled:focus, .button.hollow.warning[disabled]:focus {
    border: 1px solid #ffae00;
    color: #ffae00; }
.button.hollow.warning:hover, .button.hollow.warning:focus {
    border-color: #805700;
    color: #805700; }
.button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[disabled], .button.hollow.alert.disabled:hover, .button.hollow.alert[disabled]:hover, .button.hollow.alert.disabled:focus, .button.hollow.alert[disabled]:focus {
    border: 1px solid #cc4b37;
    color: #cc4b37; }
.button.hollow.alert:hover, .button.hollow.alert:focus {
    border-color: #67251a;
    color: #67251a; }
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[disabled], .button.clear[disabled]:hover, .button.clear[disabled]:focus {
    border-color: transparent;
    background-color: transparent; }
.button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear.disabled:hover, .button.clear[disabled]:hover, .button.clear.disabled:focus, .button.clear[disabled]:focus {
    color: #28b5f4; }
.button.clear:hover, .button.clear:focus {
    color: #076087; }
.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary.disabled:hover, .button.clear.primary[disabled]:hover, .button.clear.primary.disabled:focus, .button.clear.primary[disabled]:focus {
    color: #28b5f4; }
.button.clear.primary:hover, .button.clear.primary:focus {
    color: #076087; }
.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary.disabled:hover, .button.clear.secondary[disabled]:hover, .button.clear.secondary.disabled:focus, .button.clear.secondary[disabled]:focus {
    color: #4dd0e1; }
.button.clear.secondary:hover, .button.clear.secondary:focus {
    color: #167581; }
.button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success.disabled:hover, .button.clear.success[disabled]:hover, .button.clear.success.disabled:focus, .button.clear.success[disabled]:focus {
    color: #4fb96c; }
.button.clear.success:hover, .button.clear.success:focus {
    color: #319b4e; }
.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning.disabled:hover, .button.clear.warning[disabled]:hover, .button.clear.warning.disabled:focus, .button.clear.warning[disabled]:focus {
    color: #ffae00; }
.button.clear.warning:hover, .button.clear.warning:focus {
    color: #805700; }
.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert.disabled:hover, .button.clear.alert[disabled]:hover, .button.clear.alert.disabled:focus, .button.clear.alert[disabled]:focus {
    color: #cc4b37; }
.button.clear.alert:hover, .button.clear.alert:focus {
    color: #67251a; }
.button.disabled, .button[disabled] {
    opacity: 0.4;
    cursor: not-allowed; }
.button.dropdown::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 0.4em;
    content: '';
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #fefefe transparent transparent;
    position: relative;
    top: 0.4em;
    display: inline-block;
    float: right;
    margin-left: 1em; }
.button.dropdown.hollow::after, .button.dropdown.clear::after {
    border-top-color: #28b5f4; }
.button.dropdown.hollow.primary::after, .button.dropdown.clear.primary::after {
    border-top-color: #28b5f4; }
.button.dropdown.hollow.secondary::after, .button.dropdown.clear.secondary::after {
    border-top-color: #4dd0e1; }
.button.dropdown.hollow.success::after, .button.dropdown.clear.success::after {
    border-top-color: #4FB96C; }
.button.dropdown.hollow.warning::after, .button.dropdown.clear.warning::after {
    border-top-color: #ffae00; }
.button.dropdown.hollow.alert::after, .button.dropdown.clear.alert::after {
    border-top-color: #cc4b37; }
.button.arrow-only::after {
    top: -0.1em;
    float: none;
    margin-left: 0; }

.pagination li + li {
    margin-left: 8px;
}

div.responsive-wrapper {
    display: flex;
    flex-direction: column;
}

div.responsive-row {
    display: flex;
    height: 100%;
}

div.responsive-cell {
    display: flex;
    flex-direction: column;
}

p.th {
    font-weight: bold;
    font-size: 0.875rem;
}

@media screen and (orientation: landscape) {
    div.responsive-row {
        flex-direction: row;
    }

    div.responsive-cell + div.responsive-cell {
        margin-left: 20px;
    }

    div.responsive-cell {
        height: 100%;
    }

    div.responsive-cell textarea {
        height: 75%;
    }
}

@media screen and (orientation: portrait) {
    div.responsive-row {
        flex-direction: column;
    }

    div.responsive-row + div.responsive-row {
        border-top: 1px solid lightgray;
        margin-top: 16px;
        padding-top: 24px;
    }

    .mobile-hide {
        display: none;
    }

    div.nav-tile {
        min-width: 110px;
        width: 110px;
        min-height: 110px;
        height: 110px;
        font-size: 16px;
    }
}

.skill-magnitude {
    color: #ffffff;
    padding-left: 4px;
}

tr.odd {
    background-color: #efefef;
}

td, th {
    padding: 8px;
}

.table-image {
    width: 80px;
    height: 80px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

.candidate-face {
    border-radius: 50%;
}

.bold {
    font-weight: bold;
}

textarea {
    max-width: 100%;
    height: 140px;
}

label {
    margin-right: 8px;
    font-weight: 500;
    color: #5D7483;
}

img.logo {
    max-height: 50px;
    width: auto;
}

body {
    font-family: OpenSans, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

input, select, textarea {
    width: 100%;
    max-width: 500px;
    border: 1px solid #C7D1D7;
    background-color: #F5F8F8;
    padding: 8px;
}

input[type="submit"], input[type="checkbox"] {
    width: auto;
}

.search-input {
    width: 100%;
    margin-bottom: 8px;
}

div.ms-container {
    width: 100%;
    max-width: 500px;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100vw, 0, 0); /* The image width */
  }
}

nav.colourfix {
    background: transparent;
}

nav.colourfix:before {
  content: "";
  background-image: linear-gradient(
      90deg,
      rgba(255, 0, 0, 1) 0%,
      rgba(255, 154, 0, 1) 10%,
      rgba(208, 222, 33, 1) 20%,
      rgba(79, 220, 74, 1) 30%,
      rgba(63, 218, 216, 1) 40%,
      rgba(47, 201, 226, 1) 50%,
      rgba(28, 127, 238, 1) 60%,
      rgba(95, 21, 242, 1) 70%,
      rgba(186, 12, 248, 1) 80%,
      rgba(251, 7, 217, 1) 90%,
      rgba(255, 0, 0, 1) 100%
  );
  background-repeat: repeat-x;
  background-size: 100vw 100%;
  position: absolute;
  z-index: -1;
  width: 200vw;
  height: 100%;
  animation: slide 10s linear infinite;
}

select + textarea {
    margin-top: 8px;
}

.narrow {
    width: auto;
}

div.spacer {
    flex-grow: 100;
}

main, body {
    background-color: #BCC8CF;
}

.card {
    margin-bottom: 24px;
    padding: 24px;
}

div.attachment {
    padding: 8px;
}

.flex-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between
}

.footer-link + .footer-link {
    margin-left: 32px;
}

.alpha-fade {
    color: rgba(255,255,255,.4) !important;
}

div.search-bar input[type="submit"] {
    margin: 0 0 2px 16px;
}

ul.pagination {
    margin: 1rem 0 0;
}

ul.pagination li {
    border: 1px solid #468CAF;
    padding: 0;
}

ul.pagination li.active {
    background-color: #468CAF;
}

ul.pagination li.active a {
    color: white !important;
}

ul.pagination li a {
    display: block;
    padding: 0.25rem 0.75rem;
}

span.list-stats {
    padding-top: 18px;
    color: #468CAF;
}

table.dbform td {
    width: 50%;
}

table.dbform li {
    list-style: none;
}

img.tenant-logo {
    max-width: 250px;
    height: auto;
}

div.footer-wrapper{
    width: 100%;
    clear: both;
    padding: 12px 2px 12px 2px;
}

footer {
    background-color: black;
}

#footer-centre {
    margin-left: auto;
    margin-right: auto;
}

.login-name {
    margin-right: 8px;
}

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

h1.page-title {
    vertical-align: middle;
    display: inline-block;
}

#id_attachment-description {
    max-height: 100px !important;
}

.responsive-cell {
    margin-top: 16px;
}

div.responsive-cell input[type="number"] {
    max-width: 100px;
}

.nav-tile-image {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}

.action-incomplete {
    font-weight: 500;
    font-size: 14px;
    color: #464646;
}

#page-title-wrapper {
    width: auto;
}

h1.page-title {
    margin: 0;
    padding: 0 0 4px 0;
}

.button-icon {
    max-height: 30px;
    width: auto;
}

.action-wrapper {
    width: 100%;
    flex-wrap: wrap;
}

div.search-bar + label {
    margin-top: 16px;
}

input[type="checkbox"] {
    vertical-align:middle;
    margin-bottom: 3px;
}

.grid-cell {
    border-radius: 4px;
    margin: 2px;
}

.not-consultant-approved {
    background-color: #ffffba;
}

.not-client-approved {
    background-color: #fad8b7;
}

.not-client-approved.not-consultant-approved {
    background-color: #ffbcbc;
}

.all-approved {
    background-color: #c0ffc0;
}

table.grid-table {
    border-spacing: 8px;
    border-collapse: separate;
}

.responsive-cell textarea {
    max-width: 160px;
    max-height: 80px;
}

img.cell-icon {
    max-width: 20px;
    height: auto;
}

ul.errorlist, ul.error-detail .text-danger {
    color: #b94f4f !important;
    list-style: none;
    font-weight: normal;
}

.lbl-toggle {
    color: #fff;
    background: #6f9833;
    font-size: 1.2rem;
}

img.cell-icon + img.cell-icon {
    margin-left: 4px;
}

a.button {
    float: none;
    text-decoration: none;
}

img.logo {
    display: block;
}

img.logo.flipped {
    margin-top: 8px;
}

.day-event.complete {
    background-color: #d4ffd4;
}

.day-event.overdue {
    background-color: #ffbebe;
}

.white, .page-footer {
    background-color: #FFF;
}

th {
    font-weight: 500;
}

h3.incomplete {
    margin-bottom: 1rem;
}

form.contains-button {
    display: inline-block;
}

.right-align-content {
    display: flex;
    justify-content: flex-end;
}

.auto-margin-container {
    margin: -4px 0 0 -4px;
    width: max-content;
}

.auto-margin-container > * {
    margin: 4px 0 0 4px;
}

.auto-margin-container > form.contains-button .button {
    margin: 0;
}

.auto-margin-container .button + .button {
    margin-right: 0;
}

tr.save-row .button {
    float: right;
}

table.fixed-layout {
    table-layout: fixed;
    width: 100%;
}

table.fixed-layout.action-hours th,
table.fixed-layout.action-hours td {
    width: 9%;
}

table.fixed-layout.action-hours th:nth-child(1),
table.fixed-layout.action-hours td:nth-child(1) {
    width: 32%;
}

table.fixed-layout.action-hours th:nth-child(2),
table.fixed-layout.action-hours td:nth-child(2) {
    width: 15%;
}

table.fixed-layout.action-hours th:nth-child(3),
table.fixed-layout.action-hours td:nth-child(3) {
    width: 17%;
}

#confetti-canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.logo-missing {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    width: 4em;
    height: 4em;
    background-color: #0ca2e6;
    border-radius: 50%;
}

.logo-missing span {
    flex: 0 0;
    font-size: 2em;
}

#main-wrapper {
    display: flex;
    flex-direction: row;
    padding-top: 0  !important;
    margin-top: 86px !important;
}

div.sidebar {
    margin-top: 32px;
    padding: 16px;
    height: 100%;
    flex-grow: 0.8;
}

div.card.day-chart {
    min-height: 248px;
}

.select2-container {
    width: 100% !important;
    max-width: 500px;
    min-width: 150px !important;
}

.select2-container--default .select2-selection--single {
    min-height: 38px !important;
    height: unset !important;
    display: flex !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    white-space: normal !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered > :last-child {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 22px !important;
}

.select2-container--default .select2-selection__clear {
    order: 1 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top: 8px !important;
}

.form-header {
    display: flex;
    flex-direction: row;
}

.form-header .action-container {
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.form-header .heading {
    display: flex;
    align-items: center;
}

button.quick-time {
    margin-left: 16px;
}

a.quick-time-help {
    color: deepskyblue;
    margin: auto;
}

div.quick-time-help {
    margin-left: 24px;
    border: 1px solid #b1d5e6;
    background-color: rgba(200, 248, 255, 0.62);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
}

.button.add-task {
    height: 20px;
    width: 20px;
    padding: 0;
    margin-left: 8px;
}

ul.task-list {
    list-style-position: outside;
}

span.status-code.status-done {
    background-color: limegreen;
}

span.status-code.status-in-prg {
    background-color: yellow;
}

span.status-code.status-aw-cln, span.status-code.status-aw-3py {
    background-color: cornflowerblue;
}

span.status-code.status-aw-int {
    background-color: #edb664;
}

span.status-code {
    padding: 4px 8px 4px 8px;
    border-radius: 2px;
    background-color: grey;
    color: white;
    min-width: 100%;
    display: inline-block;
    text-align: center;
}

span.check-mark {
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: limegreen;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

span.check-mark a {
    color: white;
    text-decoration: none;
}

.pending-release {
    background-color: #ffece7;
}

.pending-release.odd {
    background-color: #ffe0d6;
}

.small-button .button {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.collapsible {
    float: left;
    margin-bottom: 1.5em;
}

.collapsible.unfloat {
    float: unset;
}

.collapsible, .collapsible > *, .collapsible > div.field-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.collapsible > .header {
    padding: 1em;
    transition: none;
    cursor: pointer;
    border-bottom: 1px solid #658D00FF;
}

.collapsible > .header h2 {
    margin: 0;
    padding: 0;
    text-align: right;
    color: #658D00FF;
    font-size: 1.3em;
}

.collapsible .header h2::before {
    content: ' ';
    display: inline-block;
    border-top: 0.4em solid transparent;
    border-bottom: 0.4em solid transparent;
    border-left: 0.4em solid currentColor;
    vertical-align: middle;
    margin-right: .5rem;
    width: 0.8em;
    height: 0.8em;
    overflow: visible;
    transform: translateY(-5px);
    transition: transform .2s ease-out;
}

.collapsible > .content {
    padding: 1em 1em;
    border: 1px solid #658D00FF;
    border-top: 0;
    transition: all 0.1s ease-out;
    float: left;
}

.collapsible.unfloat > .content {
    float: unset;
}

.collapsible.collapsed > .header h2::before {
    transform: rotate(90deg) translateX(0px);
}

.collapsible.collapsed > .content {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}

.flex.buttons {
    margin: 0;
    display: flex;
    flex-direction: row-reverse;
}

.element.note {
    border: 1px solid #CCC;
    padding: 1em;
}

.element .top-meta {
    margin-bottom: 1em;
    display: flex;
    justify-content: end;
}

.element .top-meta .text {
    display: flex;
    flex-direction: column;
    align-items: end;
    max-width: min(95%, 375px);
    text-align: right;
}

.element .top-meta a {
    font-weight: bold;
}

.element .title {
    margin-bottom: 0.5em;
}

.element .bottom {
    align-items: end;
    margin-top: 1em;
}

.element .details {
    font-size: 0.9em;
    line-height: 1.6em;
    cursor: pointer;
    width: max-content;
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

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

.element .detail + .detail {
    margin-top: 0.25em;
}

.element .detail .icon-container {
    margin-right: 0.5em;
}

.element .assigned-user-icons {
    flex-wrap: wrap;
    align-items: center;
}

.element .assigned-user-icons span {
    margin-right: 0.5em;
}

.element .detail .icon-container .rounded-icon {
    margin: 0;
}

.element .buttons-container {
    align-items: end;
}

.element .buttons-container .button {
    margin-bottom: 0;
}

.half-width {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}

.half-width .element-container {
    flex: 1 0;
    min-width: 445px;
    max-width: 50%;
}

.half-width.center {
    flex-direction: row;
}

.half-width.center .empty-container {
    height: 100%;
    width: 50%;
    border-right: 1px solid #CCC;
}

.half-width.left {
    flex-direction: row;
}

.half-width.right {
    flex-direction: row-reverse;
}

.half-width.left .element-container {
    padding-right: 1em;
    border-right: 1px solid #CCC;
}

.half-width.right .element-container {
    padding-left: 1em;
    border-left: 1px solid #CCC;
}

.day-heading {
    font-size: 1.5em;
    text-align: center;
}

.responsive-table {
    display: grid;
    grid-template-columns: minmax(min-content, max-content) 1fr;
}

.responsive-table > * {
    padding: 0.35rem;
}

.responsive-table .label {
    max-width: 300px;
    display: flex;
    align-items: center;
    padding-right: 2rem;
}

.responsive-table .label label {
    margin: 0;
}

.responsive-table .field {
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 100%;
}

.responsive-table .full-width {
    grid-column: span 2;
}

.responsive-table .field .errorlist {
    padding: 0;
    margin: 0;
}

.responsive-table.alternating-rows > *:nth-child(4n + 0):not(.no-bg),
.responsive-table.alternating-rows > *:nth-child(4n + 3):not(.no-bg) {
    background-color: #EEE;
}

.element .content.truncate {
    max-height: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

.element .content.truncate.generous {
    max-height: 360px;
}

.rjsf .required {
    color: red;
    margin-left: 0.25em;
}

.rjsf .form-group.field {
    display: flex;
    flex-direction: column;
}

.MuiInputBase-formControl {
    background-color: white;
}

.MuiOutlinedInput-notchedOutline legend {
    display: none;
}

.MuiInputBase-root input, .MuiInputBase-root select, .MuiInputBase-root textarea {
    max-width: unset;
}

button:focus {
    outline: none;
}

.element.incomplete {
    background-color: #ffe0e0;
}

.element .spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10em;
}

.MuiOutlinedInput-notchedOutline {
    top: 0 !important;
}

.MuiAutocomplete-tag {
    background-color: #f1f1f1 !important;
    border-radius: 0.5em !important;
}

.MuiSwitch-thumb {
    position: absolute;
    margin-left: 15px;
}

.element.for-review {
    background-color: #dbffe5;
}

a.stealthy {
    color: unset;
}

div.project-wrapper div.task-wrapper {
    margin-left: 16px;
}

div.task-wrapper ul {
    margin: 8px 0 0 16px;
}

.header-info {
    display: flex;
    padding: 10px;
    border: 1px solid #666;
    height: 70px;
    align-items: center;
}

.header-info .summary {
    margin-left: 2em;
    margin-bottom: 0;
}

.header-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-info.vertical {
    flex-direction: column;
}

.header-info ul.horizontal li {
    display: inline;
    margin-right: 2em;
}

.header-search {
    margin-left: 8px;
    flex: 1 1 auto;
}

.header-search .search-bar {
    margin-bottom: 0;
    padding: 0 1em;
    justify-content: center;
}

.sidebar-popout {
    width: 0;
    position: fixed;
    display: flex;
    z-index: 20;
    max-width: 95%;
    height: 82.5%;
    box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.15);
}

.sidebar-popout .card {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.sidebar-popout.show {
    width: var(--width, 600px);
    z-index: 30;
}

.sidebar-popout.show .card {
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-popout.show .card {
    height: 100%;
    padding: 24px;
}

.sidebar-popout.pointer .tab {
    cursor: pointer;
}

.sidebar-popout .tab {
    position: absolute;
    right: calc(-3em + 1px);
    margin-top: 3em;
    padding: 1em;
    width: 3em;
    height: min-content;
    margin-left: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-left: 0;
    font-size: 1.5em;
    z-index: 2;
}

.sidebar-popout .tab span {
    writing-mode: vertical-lr;
}

.navbar .container {
    max-width: unset !important;
    flex-wrap: nowrap !important;
}

#main-wrapper .container {
    max-width: unset !important;
    padding-left: 5em;
    padding-right: 2em;
}

form .rjsf {
    margin: auto;
    max-width: 900px;
}

.header-buttons {
    display: flex;
}

.header-buttons .button {
    margin: 0 0 0 0.5em;
    background-color: #000;
    border-radius: 4px;
}

.header-buttons .button:first-child {
    margin: 0;
}

@media (hover: hover) {
    .header-buttons .button:hover {
        background-color: #6f9833;
        transition-duration: 0.1s;
    }
}

.header-buttons .button.active {
    background-color: #6f9833;
    transition-duration: 0.1s;
}

.header-buttons .button .fa-solid {
    font-size: 1.5rem;
}

.table-container {
    overflow-x: auto;
}

img.camera-thumbnail {
    height: 70px;
    width: auto;
}

div.header-info + div.header-info {
    margin-left: 8px;
}

.parent {
    position: relative;
    top: 0;
    left: 0;
}

.image1 {
    position: relative;
    top: 0;
    left: 0;
}

.image2 {
    position: absolute;
    top: 0;
    left: 0;
}

.attachment-view img {
    width: auto;
    height: auto;
    max-width: 100%;
}

.multi-columns {
    display: flex;
    flex-direction: row;
    margin: -0.5em -0.5em 0 0;
    overflow-x: auto;
}

.multi-columns .column {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin: 0.5em 0.5em 0 0;
    border: 1px solid #333;
    background-color: #f6f8fa;
}

.multi-columns .column .heading h3 {
    font-size: 1.5em;
}

.multi-columns .column .heading h3 a {
    color: unset;
}

.multi-columns .column .elements {
    margin: -0.5em 0 -0.5em 0;
    display: flex;
    flex-direction: column;
}

.elements .element {
    background-color: #FFF;
    border: 1px solid #999;
    border-radius: 0.5em;
    padding: 0.5em;
}

.multi-columns .elements .element {
    margin: 0.5em -0.5em;
}

.elements .meta {
    line-height: 1.2em;
    margin-bottom: 0.5em;
}

.elements .tags {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -0.5em -0.5em 0.25em 0;
    line-height: 1em;
}

.elements .tags a {
    color: unset;
}

.elements .tags a:hover {
    text-decoration: none;
}

.elements .tag {
    margin: 0.5em 0.5em 0 0;
    padding: 0.2em 0.5em 0.2em 0.5em;
    background-color: #FFF;
    border: 1px solid #000;
    border-radius: 1em;
    font-weight: bold;
}

@keyframes flash {
    0% {
        background-color: red;
        color: white;
        animation-timing-function: steps(1, end);
    }

    50% {
        background-color: white;
        color: black;
        animation-timing-function: steps(1, end);
    }
}

.element .project {
    background-color: #efefef;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    margin: -0.5em -0.5em 0 -0.5em;
    padding: 0 0.5em 0 0.5em;
}

.task .status {
    background-color: #E6E6E6;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    margin: 0.5em -0.5em -0.5em -0.5em;
    padding: 0 0.5em 0 0.5em;
    display: flex;
    justify-content: center;
    font-weight: bold;
}

.project-icon {
    max-width: 100%;
    max-height: 100px;
    display: block;
    margin-bottom: 0.2em;
}

.task .status.stale {
    background-color: #ffdcdc;
}

.elements .element.priority-1 {
    border-width: 2px;
    border-color: #F00;
}

.elements .element.priority-2 {
    border-width: 2px;
    border-color: #ffb700;
}

.elements .element.focused {
    background-color: #ffffe0;
}

tr.action-row.incomplete.even {
    background-color: #fff4f4;
}

tr.action-row.incomplete.odd {
    background-color: #ffe9e9;
}

.my-day {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid lightgrey;
    float: right;
    border-radius: 2px;
}

.project + .my-day {
    margin-top: 2px;
}

.my-day {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.my-day.nobody {
    background-image: url("/static/images/icons/nobody.5ef3d73f0997.svg");
}

.my-day.untouched {
    background-image: url("/static/images/icons/untouched.9cd2e64cef1b.svg");
}

.my-day.assigned {
    background-image: url("/static/images/icons/assigned.e27552aef932.svg");
}

.my-day.picked {
    background-image: url("/static/images/icons/picked.8a7ce007bd9e.svg");
}

.my-day.last-assigned-to-other {
    background-color: grey;
}

.my-day.last-assigned-to-me {
    background-color: #bb6700;
}

.my-day.last-picked-by-other {
    background-color: #bdbd00;
}

.my-day.last-picked-by-me {
    background-color: darkseagreen;
    background-image: url("/static/images/icons/mine-before.cfbe21dee3b3.svg");
}

.my-day.assigned-to-other-today {
    background-color: lightgrey;
}

.my-day.assigned-to-me-today {
    background-color: orange;
}

.my-day.picked-by-other-today {
    background-color: yellow;
}

.my-day.picked-by-me-today {
    background-color: lightgreen;
    background-image: url("/static/images/icons/mine-today.09ac74c79288.svg");
}

.my-day.picked-by-me-today.worked-on-by-me-today {
    background-color: #00ff00;
    background-image: url("/static/images/icons/worked-on-today.aedd1dcee121.svg");
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.modal-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-left: 32px;
    line-height: 28px;
    display: inline-block;
    padding: 0.1em 0.4em;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

h3.task-name {
    display: inline-block;
}

div.modal-header {
    display: flex;
    flex-direction: row;
    margin-bottom: 1em;
}

h3.task-number {
    margin-left: auto;
}

.internal-notes {
    font-style: italic;
}

span div.my-day {
    margin-left: 12px;
}

:root {
  --alert-bg: #fce8e5;
  --alert-border: #c12c00;
  --alert-color: #c12c00;
  --notice-bg: #FFF6BF;
  --notice-border: #FFD324;
  --notice-color: #514721;
  --success-bg: #b1eeb2;
  --success-border: #81C784;
  --success-color: #0b440f;
}

.flash-message {
  width: calc(100% - 2em);
  padding: 0.8em;
  margin: 1em 1em;
  border: 2px solid #ddd;
  text-align: center;
  border-radius: 0.4em;
}

.flash-message, .flash-message a {
    font-weight: bold;
}

.flash-message.error {
  background: var(--alert-bg);
  border-color: var(--alert-border);
  color: var(--alert-color);
}

.flash-message.warning {
  background: var(--notice-bg);
  border-color: var(--notice-border);
  color: var(--notice-color);
}

.flash-message.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-color);
}

.flashes {
  margin: -1em;
  padding: 0;
}

.table-metadata {
    display: flex;
}

.table-metadata .left {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin: -1em -1em 0 0;
}

.table-metadata .left > * {
    margin: 1em 1em 0 0;
}

.table-metadata .right {
    flex: 0 0 auto;
}

.table-metadata .form {
    display: flex;
}

.table-metadata .form-container {
    display: flex;
    align-items: center;
}

.table-metadata label, .table-metadata input {
    margin: 0;
}

.table-metadata label {
    margin-right: 0.5em;
}

.ultra-time-clients {
    display: flex;
    flex-wrap: wrap;
    margin: -1em -1em 1em 0;
}

.ultra-time-client {
    margin: 1em 1em 0 0;
    padding: 0.75em;
    min-width: 10em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    font-size: 1.5em;
    font-weight: bold;
    opacity: 0.4;
    cursor: pointer;
}

.ultra-time-client.active {
    opacity: 1;
    cursor: unset;
}

.quota-plots {
    display: flex;
    flex-wrap: wrap;
}

.parking_lot {
    padding: 0 0 0 10px;
    display: flex;
    align-items: center;
}

.parking_lot span {
    margin-right: 0.5em;
}

.above-table {
    display: flex;
    justify-content: space-between;
}

.w-0 {
    width: 0;
}

.w-max-content {
    width: max-content;
}

.project .assigned-to, .project .tasks {
    display: flex;
    flex-wrap: wrap;
}

.rounded-icon {
    margin: 0.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-x: center;
    background-position-y: center;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
    border: #404040 1px solid;
}

.rounded-icon.person {
    width: 30px;
    height: 30px;
}

.rounded-icon.task, .rounded-icon.project, .rounded-icon.condition {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.rounded-icon a {
    width: 100%;
    height: 100%;
    display: block;
}

a:hover .rounded-icon {
    text-decoration: none;
}

.rounded-icon.simple-status-completed {
    background-color: #b5e800;
}

.rounded-icon.simple-status-in-progress {
    background-color: #8edaff;
}

.rounded-icon.simple-status-planned {
    background-color: #FFF;
}

#scope-picker {
    display: flex;
    align-items: center;
}

#scope-picker > * {
    margin-right: 2em;
}

#scope-picker > *:last-child {
    margin-right: 0;
}

#scope-picker label {
    margin-bottom: 0;
}

#scope-picker button.private-mode {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    margin: 0;
    background-color: #b267ff;
    border-radius: 4px;
}

#scope-picker button.private-mode.activated {
    background-color: #AAA;
    color: white;
}

#scope-picker input[type=checkbox] {
    width: unset;
}

header nav {
    min-height: 86px;
    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.15);
}

.card.thin-pad {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 8px 24px;
    background-color: #F6F6F6;
    margin-bottom: 0;
}

.milestone-elements {
    display: flex;
    flex-wrap: wrap;
}

.milestone-elements .element {
    flex: 1 0;
    min-width: 200px;
    max-width: 350px;
    margin: 0.5em;
    background-color: #FFF;
    border: 1px solid #999;
    border-radius: 0.5em;
    padding: 0.5em;
}

.milestone-elements .assigned-to {
    display: flex;
    flex-wrap: wrap;
}

.milestone-elements .tasks ul {
    list-style: none;
}

.milestone-elements .tasks ul li {
    display: flex;
}

.milestone-elements .tasks .rounded-icon {
    margin-right: 0.5em;
}

.navbar .container {
    display: flex;
}

.navbar .header-right {
    flex: 0 0 auto;
}

.navbar .navbar-nav {
    display: flex;
    justify-content: flex-end;
    flex-direction: row !important;
}

.navbar-nav .nav-link {
    padding: .5rem 1rem !important;
    background-color: transparent;
    border: 0;
}

.page-title-outer-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-title-outer-wrapper .inpage-search {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin-right: 0.25rem;
    background-color: #f6f6f6;
    border-radius: 0.25rem;
}

#breadcrumbs {
    margin-top: 0.5rem;
}

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

.page-title h1 {
    margin-bottom: 0;
}

.page-title .spacer {
    margin-right: 1em;
}

.inpage-search label {
    margin: 0 0.5em 0 0;
}

.inpage-search input {
    background-color: white;
    border-color: #aaa;
    border-radius: 4px;
}

.no-results {
    display: none;
    font-style: italic;
}

.half-width.empty {
    height: 2em;
}

.event {
    margin-bottom: 1em;
}

.generic {
    border: 1px solid #CCC;
    padding: 1em;
}

.generic.expandable:not(.closed) {
    border: 0;
    padding: 0;
}

.generic > .condensed {
    display: flex;
    align-items: center;
    margin-right: -1em;
}

.generic > .header {
    display: flex;
}

.generic > .condensed .time, .generic > .condensed .icon {
    flex: 0 0;
}

.generic > .condensed > * {
    margin-right: 1em;
}

.generic > .condensed .message {
    flex: 1 1;
    overflow-wrap: anywhere;
}

.element .content {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.generic.expandable.closed {
    cursor: pointer;
}

.generic.expandable.closed:hover {
    border-color: #005d88;
}

.generic > .header {
    display: flex;
    justify-content: space-between;
    padding: 0.25em 1em;
    border: 1px solid #CCC;
    border-bottom: none;
}

.generic.closed > .header, .generic.closed > .raw {
    display: none;
}

.generic.expandable:not(.closed) > .condensed {
    display: none;
}

.generic .datetime {
    margin: 0;
}

.generic .note {
    margin: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

b a {
    font-weight: bold;
}

.event .auto-truncate {
    white-space: pre-wrap;
    position: relative;
}

.event .auto-truncate.fade-out {
    --max-height: 151px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    max-height: var(--max-height);
    overflow: hidden;
}

.activity-memo {
    background-color: #fffde3;
}

.activity-note {
    background-color: #e9f5ff;
}

.quick-filters {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5em -1em 0 0;
    box-sizing: border-box;
}

.quick-filters > * {
    display: block;
    margin: 0.5em 1em 0 0;
    border: 1px solid #CCC;
    box-sizing: border-box;
}

.quick-filters .quick-filter {
    width: unset;
    height: 100%;
    padding: 0.5em 1em;
    display: flex;
    align-items: center;
}

.quick-filters .quick-filter.selected {
    background-color: #CFDEEA;
}

.quick-filters .quick-filter .icon {
    margin-right: 1em;
}

.quick-filters .quick-filter img {
    width: 2em;
    height: 2em;
}

.quick-filter-row {
    display: flex;
    align-items: center;
}

.quick-filter-row + .quick-filter-row {
    margin-top: 0.5em;
}

.quick-filter-row > .label {
    margin-right: 1em;
    min-width: 5em;
    font-weight: bold;
}

.table-block-sort ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.table-block-sort li {
    margin-right: 2em;
}

.table-block-sort li:last-child {
    margin-right: 0;
}

.table-blocks {
    display: flex;
    flex-direction: column;
    margin: -0.5em 0 1em;
}

.table-block {
    margin: 0.5em 0;
}

.table-block table {
    border: 1px solid black;
    border-radius: 4px;
}

.table-block .column-label {
    width: 0;
    white-space: nowrap;
    font-weight: bold;
    border-left: 1px solid black;
}

.table-block td:last-child {
    border-right: 1px solid black;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.table-block .auto-margin-container {
    width: 100%;
}

.feature-request-plots {
    flex-wrap: wrap;
    margin: -0.5em;
}

.feature-request-plots > * {
    flex: 1 1 auto;
    margin: 0.5em;
    min-width: min(500px, 100%);
}

.search-bar {
    margin-bottom: 1em;
    align-items: center;
}

.search-bar input {
    margin-right: 1em;
}

.search-bar button {
    margin: 0;
}

.search-row .button {
    margin: 0 0 0 0.5rem;
}

.button.options {
    background-color: #888;
}

.button.options:hover, .button.options:active {
    background-color: #666;
}

.option-section {
    position: relative;
}

.option-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: max-content;
    padding: 4px;
    border: 1px solid #999;
    margin-top: 4px;
    z-index: 15;
    background-color: #FFF;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
}

.option-container .button {
    width: 100%;
    margin: 0 !important;
}

.option-container > *, .option-container > .button {
    flex: 1 0 auto;
    margin: 0 0 4px !important;
}

.option-container > *:last-child {
    margin: 0 !important;
}

#title {
    position: sticky;
    top: 86px;
    z-index: 10;
    padding-top: 16px;
    padding-bottom: 16px;
}

.under-page-title:not(:empty) {
    margin-top: 0.5em;
}

.title-status {
    padding: 0.1em 0.5em;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: bold;
    background-color: #5fcafc;
    color: black;
    text-align: center;
    min-width: min(150px, 100%);
    width: max-content;
    max-width: 100%;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

div.nav-tile {
    overflow: hidden;
}

div.nav-tile-top {
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

.note-text {
    word-break: break-word;
}

.detail-table {
    width: max-content;
    max-width: 100%;
}

.detail-table td, .detail-table th {
    padding: 0.5em;
}

.detail-table th {
    width: 0;
    font-weight: bold;
    color: #333;
    padding-right: 1em;
    white-space: nowrap;
}

.detail-table td {
    word-break: break-word;
    overflow-wrap: break-word;
}

.calendar {
    border-collapse: collapse;
    height: fit-content;
}

.calendar.month th, .calendar.month td {
    width: calc(100% / 7);
}

.calendar.day .time {
    width: 0;
    white-space: nowrap;
}

.calendar th {
    font-weight: bold;
}

.calendar tr {
    height: 100%;
}

.calendar tr:nth-child(2n) {
    background-color: #F4F4F4;
}

.calendar td {
    border: 1px solid #CCC;
}

.calendar .inner {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.calendar .date {
    font-size: 1.25em;
    margin-right: 0.5em;
}

.calendar .items {
    display: flex;
    flex-direction: column;
}

.calendar .day:not(.current-month) {
    opacity: 0.4;
}

.calendar .item {
    padding: 0.5em;
    border-radius: 0.25em;
    margin: 0.5em 0 0;
    border: 1px solid #AAA;
}

.calendar .item:first-child {
    margin: 0;
}

.calendar .item.simple-status-planned {
    background-color: #FFF;
}

.calendar .item.simple-status-in-progress {
    background-color: #E1F3FF;
}

.calendar .item.simple-status-completed {
    background-color: #ecffe4;
}

.calendar .day.today {
    background-color: #ffebeb;
}

.calendar .day.today .date {
    font-weight: bold;
}

.calendar a.overdue {
    color: #c20000;
}

.calendar a.overdue:hover {
    color: #8d0000;
}

.flex-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flex-tiles .element {
    max-width: 300px;
    margin: 0 1em 1em 0;
}

.flex-tiles .element .project.overdue,
.milestone-elements .element .project.overdue {
    background-color: #ffe8e8;
}

.flex-tiles .element .overdue,
.flex-tiles .element .overdue a,
.milestone-elements .element .overdue,
.milestone-elements .element .overdue a {
    color: #8d0000;
}

.condition.condition-new, .condition.condition-good {
    background-color: #20CB6F;
}

.condition.condition-unknown {
    background-color: #ffa13d;
}

.condition.condition-advisory {
    background-color: #ff44b4;
}

.new-attachments .attachment {
    flex-basis: 250px;
    max-width: 100%;
}

.gifs-container img {
    flex-basis: 120px;
    max-width: 25%;
}

.popup-search:not(.force-show) {
    display: none;
}

.popup-search {
    position: fixed;
    top: 86px;
    width: 100%;
    z-index: 35;
    background-color: #FFF;
    border-top: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
}

.popup-search .search-bar {
    margin-bottom: 0;
    padding: 1em;
    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.15);
}

.rounded-icon.tiny {
    width: 1.5rem;
    height: 1.5rem;
}

b.highlight {
    background-color: #FFD324;
    padding: 0.2rem;
    border-radius: 0.2rem;
}

/* don't display popover content during page load */
.popover-content {
    display: none;
}

.popover-trigger {
    cursor: pointer;
}

.popover {
    min-width: 300px;
}

.popover ul ul {
    padding-left: 0.5rem;
}

.popover .h3:empty {
    margin-bottom: 0;
}

.popover ul .h3:empty + ul {
    padding-left: 0;
}

.popover ul {
    list-style: none;
    margin-bottom: 0;
}

.popover li {
    display: block;
}

.popover li + li {
    margin-top: 0.5rem;
}

.rounded-icon.popover-trigger {
    color: #FFF;
    background-color: #999;
    font-size: 0.9em;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.05rem;
}

.rounded-icon.popover-trigger.tiny {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.75rem;
}

.tag {
    --colour: #CCC;
    --text-colour: #000;
    border-radius: 0.8rem;
    padding: 0.1em 0.75em;
    background-color: var(--colour);
    color: var(--text-colour);
    margin: 0;
    box-shadow: 0 0 1px transparent;
    font-weight: bold;
}

.tag.outline {
    background-color: transparent;
    border: 1px solid var(--colour);
    color: #000;
    padding: calc(0.1em - 1px) calc(0.75em - 1px);
    clip: auto;
    position: relative;
    overflow: hidden;
}

.tag.text-truncate {
    max-width: 150px;
}

.tag.max-content {
    width: max-content;
}

.tag.small {
    font-size: 10px;
    padding: 0 0.5rem;
}

.tag.large {
    font-size: 1.2rem;
    padding: 0.2em 0.8em;
}

.tag .fa-solid {
    line-height: unset !important;
}

.inline-tag {
    display: inline-flex;
    color: #FFF;
    width: max-content;
    align-items: center;
}

.one-one-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.one-one-grid > * {
    flex: 1 1;
    margin: 0 !important;
}

table th.asc a::after, .table-block-sort .asc a::after {
    display: inline-block;
    content: "▼";
    margin-left: 0.25rem;
}

table th.desc a::after, .table-block-sort .desc a::after {
    display: inline-block;
    content: "▲";
    margin-left: 0.25rem;
}

.plain-link-button {
    padding: 0.65em 1em;
}

.action-container {
  margin: 0;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  padding: 8px;
}

.action-container .button {
  margin: 0;
}

.action-container .button + .button {
  margin: 0;
}

#id_method-method input {
    width: unset;
}

.input-group input {
    background-color: #FFF;
    font-size: 16px;
}

.input-group-addon:hover {
    cursor: pointer;
}

@media screen and (orientation: landscape) {
    .orientation-portrait {
        display: none;
    }
}

@media screen and (orientation: portrait) {
    .orientation-landscape {
        display: none;
    }

    input, textarea, select {
        font-size: 16px;
    }

    a.nav-tile-content {
        display: block;
        font-size: 0.8rem;
        line-height: 1.35em;
    }
}

/* max-width X - 0.02px is a hack copied from bootstrap that fixes issues at the exact width */
@media screen and (max-width: 767.98px) {
    .desktop {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .mobile {
        display: none;
    }
}

@media (max-width: 1200px) {
    .header-info {
        display: none;
    }

    h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 960px) {
    .one-one-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 719.98px) {
    .header-search {
        display: none;
    }

    .header-right {
        display: none;
    }

    #primary-nav-group {
        margin-top: 2em;
    }

    #primary-nav-group ul {
        flex-direction: row !important;
    }
}

@media (min-width: 720px) {
    .mobile-toggles {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .responsive-form .row {
        flex-direction: column;
    }

    .responsive-form .row .label {
        max-width: unset;
    }

    #main-wrapper .container {
        padding-left: 0;
        padding-right: 0;
    }

    .card {
        border-radius: 0;
    }

    .sidebar-popout .tab {
        display: none;
    }

    .header-info {
        display: none;
    }

    .flashes {
        margin-left: 0;
        margin-right: 0;
    }

    .flash-message {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .card {
        padding: 12px;
        margin-bottom: 12px;
    }

    .one-one-grid {
        gap: 12px;
        margin-bottom: 12px;
    }

    .collapsible .content {
        padding: 12px;
    }

    .page-title-outer-wrapper {
        flex-direction: column;
        align-items: start;
    }

    .page-title-outer-wrapper .opposite-title:not(:empty) {
        margin-top: 0.5rem;
    }
}

@media (max-width: 500px) {
    .responsive-table {
        grid-template-columns: 1fr;
    }

    .responsive-table > .label {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .responsive-table > .field {
        padding-left: 0;
        padding-right: 0;
    }

    .half-width .element-container {
        min-width: 100%;
    }

    .half-width.right {
        flex-direction: row;
    }

    .half-width.right .element-container {
        padding-left: 0;
        border: 0;
    }

    .half-width.right > .element-container > .element, .half-width.right > .element-container .event {
        border-left: 0.5em solid #CCC;
    }

    .half-width.left .element-container {
        padding-right: 0;
        border: 0;
    }

    .half-width.left > .element-container > .element, .half-width.left > .element-container .event {
        border-right: 0.5em solid #CCC;
    }

    .element-container .event .condensed {
        flex-wrap: wrap;
    }

    .element-container .event .condensed .icon {
        order: 0;
        flex: 1 0;
    }

    .element-container .event .condensed .time {
        order: 1;
        flex: 0 0;
    }

    .element-container .event .condensed .message {
        order: 2;
        flex: 1 0 90%;
    }

    .feature-request-plots > * {
        margin: 0;
        flex: 1 0 100%;
        min-width: unset;
    }
}

@media (max-width: 440px) {
    header .mobile-toggles .button .fa-solid {
        font-size: 1rem;
    }

    .navbar-brand {
        margin-right: 0;
    }
}