@font-face {
    font-family: 'Noa';
    src: url('fonts/NoaLTStd-Light.woff') format('woff'), url('fonts/NoaLTStd-Light.ttf') format('truetype'), url('fonts/NoaLTStd-Light.svg#Noa-LT-Std-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    src: url(fonts/fa-solid-900.woff2) format("woff2"), url(fonts/fa-solid-900.woff) format("woff"), url(fonts/fa-solid-900.ttf) format("truetype"), url(fonts/fa-solid-900.svg#fontawesome) format("svg");
}
.fa, .fas {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/open-sans-400.woff2) format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/open-sans-600.woff2) format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/open-sans-700.woff2) format('woff2');
}

body {
    --body-background: #fff;
    --header-color: #cb8e1a;
    --text-color: #6d8486;
    --text-info-color: #586b6b;
    --text-question-color: #247f79;
    --text-question-light-color: #8bc1ba;
    --text-question-answered-color: #23ba0d;
    --text-warning-color: #a36d16;
    --text-good-color: #359c1c;
    --text-error-color: #d00;

    --file-download-background: #fff;
    --file-download-dimmer-background: #f2f8f7;
    --file-download-hover-background: #d3e0df;

    --label-width: 140px;
    --label-thin-width: 100px;
    --label-wide-width: 200px;

    --panel-icon-size: 160px;
    --panel-icon-medium-size: 100px;
    --panel-icon-small-size: 60px;


    --button-color: #fff;

    --border-error-color: #d00;

    --input-color: #425655;
    --error-color: #f00;
    --link-color: #cb8e1a;
    --link-hover-color: #425655;
    --link-good-color: #2c7b17;
    --tab-text-color: #425655;

    --panel-background: #e9f2f1;
    --panel-info-background: #d3e0df;
    --panel-question-background: #d7eae9;
    --panel-warning-background: #ffe7d4;
    --panel-good-background: #e4f7d7;
    --panel-error-background: #f7d0d0;

    --panel-background-light: rgba(255, 255, 255, 0.41);
    --panel-background-dim: #d3e0df;
    --panel-background-dimmer: #b0ccca;
    --panel-background-dark: #759a9e;

    --panel-icon-link-hover: rgba(0, 0, 0, 0.2);

    --text-lighter: #9fccc8;
    --shadow-color: #759a9e;

    --page-content-top: 108px;
    --page-content-padding-bottom: 108px;

    --icon-up-color: #aabe49;
    --icon-down-color: #ba7a7a;

    --grid-good-background: #e4f7d7;
    --grid-good-hover-background: #c2eda6;

    --hr-background: #abbbbc;
}

body.dark {
    --body-background: #151f1e;
    --header-color: #a9782a;
    --text-color: #9fb2b2;
    --text-info-color: #9fb2b2;
    --text-question-color: #608986;
    --text-question-light-color: #608986;
    --text-question-answered-color: #1b7c0a;
    --text-warning-color: #f3b553;
    --text-good-color: #7eac73;
    --text-error-color: #b00;

    --file-download-background: #20302f;
    --file-download-dimmer-background: #213231;
    --file-download-hover-background: #20302f;

    --button-color: #fff;

    --border-error-color: #b00;

    --input-color: #8da0a0;
    --error-color: #f00;
    --link-color: #a9782a;
    --link-hover-color: #425655;
    --link-good-color: #a6e398;
    --tab-text-color: #425655;

    --panel-background: #20302f;
    --panel-info-background: #20302f;
    --panel-question-background: #132d2c;
    --panel-warning-background: #3c3529;
    --panel-good-background: #30422c;
    --panel-error-background: #481d1d;

    --panel-background-light: rgba(255, 255, 255, 0.41);
    --panel-background-dim: #263938;
    --panel-background-dimmer: #334d4b;
    --panel-background-dark: #2e4645;

    --panel-icon-link-hover: rgba(255, 255, 255, 0.2);

    --text-lighter: #9fccc8;
    --shadow-color: #151f1e;

    --icon-up-color: #78872e;
    --icon-down-color: #924848;

    --grid-good-background: #30422c;
    --grid-good-hover-background: #30422c;

    --hr-background: #526362;
}

body.dev, 
body.test, 
body.qa {
    --page-content-top: 141px;
    --page-content-padding-bottom: 141px;
}

 body.maintenanceMode, 
 body.impersonated {
    --page-content-top: 174px;
    --page-content-padding-bottom: 174px;
}

body .statusBarShown {
    --page-content-padding-bottom: 141px;
}

body.dev .statusBarShown, 
body.test .statusBarShown, 
body.qa .statusBarShown {
    --page-content-padding-bottom: 206px;
}

body.maintenanceMode .statusBarShown, 
body.impersonated .statusBarShown {
    --page-content-padding-bottom: 240px;
}



html, 
body {
    margin: 0;
    padding: 0;
    font-family: 'Open sans', Helvetica, Verdana, Sans-Serif;
    font-size: 1em;
}
body {
    transition: background 0.5s;
}
.hideDesktop {
    display: none;
}
.hide {
    display: none !important;
}
.inner {
    margin: 0 auto;
    width: 95%;
    max-width: 1240px;
    position: relative;
}


.noWrap {
    white-space: nowrap;
}
h1,
h2,
h3 {
    font-family: 'Noa', Helvetica, Verdana, Sans-Serif;
    font-weight: 400;
}
h1 {
    color: var(--header-color);
    font-size: 2.5em;
    margin: 0;
    padding: 0 0 0.5rem 0;
}

h1 small.ticketCustomerTitle {
    font-size: 1rem;
    display:block;
    color: var(--text-color);
}
p {
    line-height: 1.6em;
}
hr {
    background: transparent;
    border: 0;
    height: 20px;
    padding: 0;
}
select, 
input, 
textarea {
    background: #fff;
    border: 1px solid #d3e0df;
    padding: 0.5em;
    color: var(--input-color);
    font-family: 'Open sans', Helvetica, Verdana, Sans-Serif;
    font-size: 1em;
    border-radius: 0;
}
select {
    background-image: url("/images/select-arrow-tall.png");
    background-position: center right;
    background-repeat: no-repeat;
    text-indent: 1px;
    text-overflow: '';
    transition: all 0.25s;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    padding-right: 35px;
    position: relative;
    background-size: 38px 60px;
}

 select::-ms-expand {
     display: none;
}
 select:disabled, input:disabled, textarea:disabled {
     background-color: #e9f2f1;
     opacity: 0.5;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.75;
}
 select:hover {
     background-image: url("/images/select-arrow-tall-active.png");
}
 select:disabled:hover {
     background-image: url("/images/select-arrow-tall.png");
     background-position: center right;
     background-repeat: no-repeat;
}
select.littleSelect {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    background-size: 2em;
}
textarea {
    height: 6em;
    vertical-align: top;
}
 textarea.tall {
     height: 12em;
}
 textarea.taller {
     height: 24em;
}
 select.changed, 
 input.changed, 
 textarea.changed {
     border: 1px solid #cb8e1a;
}
 select.error, 
 input.error, 
 textarea.error {
    border: 1px solid var(--error-color);
}

 select.errorFlash, 
 input.errorFlash, 
 textarea.errorFlash {
    animation-name: errorFlash;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

select.hasErrorMessageNew,
input.hasErrorMessageNew,
textarea.hasErrorMessageNew {
    position: relaitve;
}

label.error,
.multiCol label.error {
    color: var(--error-color);
}

@keyframes errorFlash {
    0% {
        transform: scale(1.05);
        border: 1px solid var(--error-color);
    }
    100% {
        transform: scale(1);
        border: 1px solid #d3e0df;
    }
}

label.error,
.multiCol label.error {
    color: var(--error-color);
}

 label.checkbox.multiLine {
     line-height: 1.5em;
     padding: 0 0 1em 1.5em;
     position: relative;
     display: block;
}
 label.checkbox.multiLine input[type="checkbox"] {
     margin: 0;
     position: absolute;
     top: 0.25em;
     left: 0;
}
 .imageListContainer img {
     width: 150px;
     height: auto;
     display: block;
     border-radius: 5px;
}

.container {
/*
    box-shadow: 0 5px 5px rgba(0,0,0,0.125);    
*/
}

 .container .imageListContainer button {
     padding: 0;
     width: 150px;
     float: left;
     background: transparent;
}
 .container .imageListContainer button img {
     opacity: 0.5;
     border: 2px solid transparent;
}
 .container .imageListContainer button img:hover {
     opacity: 1;
}
 .container .imageListContainer button.selected img {
     opacity: 1;
     border: 2px solid #cb8e1a;
}
 .checkBoxList {
     height: 200px;
     width: 100%;
     overflow: auto;
     background: #fff;
     border: 1px solid #d3e0df;
     padding: 0;
     margin-top: 0.25em;
     box-sizing: border-box;
}
 .checkBoxList.small {
     height: 120px;
}
 .checkBoxList.large {
     height: 250px;
}
 .checkBoxList.integrated {
     width: auto;
     height: auto;
     max-height: 200px;
}
 .checkBoxList.autoSize {
     height: auto;
}
 .checkBoxList span {
     display: block;
     padding: 0.5em 0.5em 0.5em 32px;
     position: relative;
     box-sizing: border-box;
     border-bottom: 1px solid #e9f2f1;
     transition: background 0.25s, color 0.25s;
     font-size: 0.9em;
}
 .checkBoxList span:hover {
     color: #000;
     cursor: pointer;
     background-color: #d3e0df;
}
 .checkBoxList span:last-child {
     border-bottom: 1px solid transparent;
}
 .checkBoxList span img {
     top: 7px;
     left: 7px;
     position: absolute;
}
 .content .checkBoxList a {
     display: block;
     padding: 0.5em 0.5em 0.5em 32px;
     position: relative;
     box-sizing: border-box;
     border-bottom: 1px solid #e9f2f1;
     transition: background 0.25s, color 0.25s;
     color: var(--input-color);
     font-size: 0.9em;
     font-weight: normal;
     text-decoration: none;
}
 .content .checkBoxList a:hover {
     color: #000;
     cursor: pointer;
     text-decoration: none;
     background-color: #d3e0df;
}
 .content .checkBoxList a:last-child {
     border-bottom: 1px solid transparent;
}
 .content .checkBoxList a img {
     top: 7px;
     left: 7px;
     position: absolute;
}
 .checkBoxList.checkBoxListPopup {
     position: absolute;
     top: 34px;
     left: -1px;
     z-index: 20;
     display: none;
     margin-top: 0;
     min-width: 200px;
     border: 1px solid var(--panel-background-dark);
     box-shadow: 0px 3px 3px rgba(22,29,28,0.25);
     padding: 0;
     height: auto;
     max-height: 300px;
}
 .checkBoxList.checkBoxListPopup.popupWide {
     width: 450px;
}
 .checkBoxList.checkBoxListPopup.popupWide .twoThirdCol > div {
     width: 45%;
     margin-right: 0;
}
 .checkBoxList.checkBoxListPopup.popupWide .twoThirdCol > div:nth-child(2n) {
     width: 55%;
}
 .checkBoxList.checkBoxListPopup.popupFloatRight {
     left: auto;
     right: 0px;
}
 .checkBoxList.checkBoxListPopup.popupScreenWidth {
     width: auto;
     min-width: 0;
}
 .checkBoxList.checkBoxListPopup.shown {
     display: block;
}
 .checkBoxList.checkBoxListPopup span {
     font-size: 1em;
}
 .checkBoxList.checkBoxListPopup span.selected {
     background-color: #e9f2f1;
     border-bottom: 1px solid #fff;
}
 .checkBoxList.checkBoxListPopup span.selected:hover {
     background-color: #d3e0df;
}
 .star_rating_selector:before, 
 .star_rating_selector:after {
     content: " ";
     display: table;
}
 .star_rating_selector:after {
     clear: both;
}
 .star_rating_selector.active_star_rating:hover {
     cursor: pointer;
     opacity: 0.75;
}
 .star_rating_selector div {
     width: 30px;
     height: 30px;
     background-image: url("/images/star-off.png");
     background-size: 30px 30px;
     background-position: top left;
     float: left;
}
 .star_rating_selector div.selected {
     background-image: url("/images/star-on.png");
}
 input[type="submit"] {
     border-radius: 5px;
     background: #009de0;
     border: 0;
     padding: 15px 15px;
     color: #fff;
     font-size: 1em;
     display: inline-block;
     text-decoration: none;
     transition: all 0.25s;
    -webkit-appearance: none; /* Force iOS to show the button as we need */
}
 input[type="submit"]:hover {
     cursor: pointer;
     background: #0072a3;
}
 div.fileUploadButton {
     position: relative;
     overflow: hidden;
     display: inline-block;
     margin: 1em 0;
}
 div.fileUploadButton input[type="file"] {
     position: absolute;
     top: 0;
     right: 0;
     margin: 0;
     opacity: 0;
     font-size: 200px;
     cursor: pointer;
}
 div.fileUploadButton p.forIE {
     display: none;
}
 .packageFileEdit .fileUploadCell div.fileUploadButton {
     float: left;
}
 .packageFileEdit .fileUploadCell a.deletePackageFile {
     margin: 1em 0 0 1em;
}
 .packageFileEdit .fileUploadCell a.restorePackageFile {
     margin: 1em 0 0 0;
}

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

.installationTestReportFileContainer .fileUploadButton {
    margin: 0;
}
 div.fileUploadButton:hover a.button {
     cursor: pointer;
     background: #0072a3;
}
 tr.file td .fileUploadProgressContainer, 
 td.file .fileUploadProgressContainer {
     width: 100%;
     height: 30px;
     background: #759a9e;
     background: #436e70;
     display: block;
     position: relative;
}
 tr.file td .fileUploadProgress, 
 td.file .fileUploadProgress {
     position: absolute;
     z-index: 2;
     top: 0;
     left: 0;
     width: 0;
     height: 100%;
     background: #08a500;
     display: block;
     transition: width 0.25s;
}
 tr.file td .fileUploadText, 
 td.file .fileUploadText {
     position: absolute;
     z-index: 2;
     top: 5px;
     left: 0;
     width: 100%;
     height: 25px;
     color: #fff;
     text-align: center;
}
 .openTickets {
     max-height: 600px;
     overflow-y: auto;
}
 .openTickets table tbody tr td label.checkbox {
     padding: 0;
     display: block;
     min-width: 70px;
}
 .openTickets table tbody tr td label.checkbox input[type="checkbox"] {
     margin-bottom: 0;
     display: block;
     float: left;
     margin-right: 0.5em;
}
 .followedTickets .selectedTicket {
     background: #fff;
     padding: 0.75em 0.75em 1em 0.75em;
     margin-bottom: 1em;
     font-size: 0.8em;
}
 .followedTickets .selectedTicket strong {
     font-size: 1.1em;
}
 .followedTickets .selectedTicket div {
     float: left;
}
 .followedTickets .selectedTicket div:nth-child(2n+1) {
     width: 20%;
     clear: both;
}
 .followedTickets .selectedTicket div:nth-child(2n+2) {
     width: 80%;
}
 .followedTickets .selectedTicket div:nth-child(2n+2) a.button {
     float: right;
     padding: 5px 10px;
     margin: 0;
     margin-left: 1em;
}
 .followedTickets .selectedTicket:before, 
 .followedTickets .selectedTicket:after {
     content: "";
     display: table;
}
 .followedTickets .selectedTicket:after {
     clear: both;
}

 a.button, 
 button {
     border-radius: 5px;
     background: #009de0;
     border: 0;
     padding: 14px 18px;
     color: #fff;
     font-size: 1em;
     display: inline-block;
     text-decoration: none;
     transition: background 0.25s, color 0.25s;
     margin-bottom: 0.5em;
     margin-right: 0.5em;
}
 a.button:hover, 
 button:hover {
     cursor: pointer;
     background: #0072a3;
}
 a.button:focus, 
 button:focus {
     background: #0072a3;
}


 a.button.buttonSmall, 
 button.buttonSmall {
     padding: 7px 15px;
}
 a.button.buttonDisabled, 
 button.buttonDisabled {
     background: #d3e0df;
}
 a.button.buttonDisabled:hover, 
 button.buttonDisabled:hover {
     background: #d3e0df;
     cursor: default;
}
 a.button.buttonDisabled:focus, 
 button.buttonDisabled:focus {
     background: #d3e0df;
}
 a.button.buttonCancel, 
 button.buttonCancel {
     background: #354544;
}
 a.button.buttonCancel:hover, 
 button.buttonCancel:hover {
     background: #1c2323;
}
 a.button.buttonCancel:focus, 
 button.buttonCancel:focus {
     background: #1c2323;
}
 a.button.buttonBack, 
 button.buttonBack {
     background: #354544;
}
 a.button.buttonBack:hover, 
 button.buttonBack:hover {
     background: #1c2323;
}
 a.button.buttonBack:focus, 
 button.buttonBack:focus {
     background: #1c2323;
}
 a.button.buttonDelete, 
 button.buttonDelete {
     background: #ba0000;
}
 a.button.buttonDelete:hover, 
 button.buttonDelete:hover {
     background: #900000;
}
 a.button.buttonDelete:focus, 
 button.buttonDelete:focus {
     background: #900000;
}
 a.button.buttonSave, 
 button.buttonSave {
     background: #08a500;
}
 a.button.buttonSave:hover, 
 a.button.buttonSave:focus, 
 button.buttonSave:hover, 
 button.buttonSave:focus {
     background: #0a8400;
}

a.button.buttonMarginTop,
button.buttonMarginTop {
    margin-top: 0.5em;
}

 body #pageContentContainer span.buttonChecksum {
     display: inline-block;
     padding: 0 0 0 0.5em;
     font-style: normal;
}
 body #pageContentContainer span.buttonChecksum.checksumUnderButton {
     display: block;
     padding: 0;
}
 body #pageContentContainer span.buttonChecksum a.button {
     background: #e9f2f1;
     color: #86b3b8;
     font-size: 0.7em;
     padding: 0.25em 0.5em;
     position: relative;
     padding-left: 1.75em;
     font-weight: normal;
     margin: 0;
}
 body #pageContentContainer span.buttonChecksum a.button:hover, 
 body #pageContentContainer span.buttonChecksum a.button:focus {
     background: #759a9e;
     color: #fff;
}
 body #pageContentContainer span.buttonChecksum a.button:hover:before, 
 body #pageContentContainer span.buttonChecksum a.button:focus:before {
     color: #fff;
}
 body #pageContentContainer span.buttonChecksum a.button:before {
     position: absolute;
     font-family: "Font Awesome 5 Free";
     content: "\f0ea";
     top: 0.4em;
     left: 0.4em;
     font-size: 1em;
     line-height: 1em;
     color: #86b3b8;
}
 a.button.buttonAlert, 
 button.buttonAlert {
     background: #cb8e1a url("/images/alert-icon.png") no-repeat 15px 15px;
     padding-left: 50px;
}
 a.button.buttonAlert:hover, 
 a.button.buttonAlert:focus, 
 button.buttonAlert:hover, 
 button.buttonAlert:focus {
     background: #a36d16;
}
 a.button.disabled, 
 button.disabled {
     opacity: 0.5;
}
 a.button.disabled:hover, 
 button.disabled:hover {
     cursor: default;
}
 a.button.buttonSave.disabled:hover, 
 button.buttonSave.disabled:hover {
     background: #08a500;
}
 a.button.buttonSave.disabled:focus, 
 button.buttonSave.disabled:focus {
     background: #08a500;
}
 em.icon {
     font-family: "Font Awesome 5 Free";
     font-style: normal;
     font-weight: 900;
}
 em.icon.follow {
     color: #cb8e1a;
}
 em.icon.attachment {
     color: #759a9e;
}
 em.icon.purchaser {
     color: #8bae59;
}
 em.icon.inactive {
     color: #ebb;
}
 em.icon.hoster {
     color: #cb8e1a;
     left: -0.1em;
}
 em.icon.hosted {
     color: #ebd4a9;
     left: -0.1em;
}
em.icon.global {
    color: #91a8ec;
    top: 0.1em !important;
}
em.icon.subsidiary {
     color: #cfdbff;
}

 em.icon.customer {
     position: absolute;
     width: 1.3em;
     display: block;
     top: 0.05em;
}
 em.icon.customer em {
     position: absolute;
     display: block;
     top: 0.1em;
     left: 0.1em;
     width: 100%;
     text-align: center;
     font-style: normal;
     font-size: 0.9em;
}
 em.icon.customer.hosted em {
     color: #759a9e;
     left: 0em;
}
 em.icon.customer.subsidiary em {
     color: #759a9e;
     top: 0.4em;
}

 .past em.icon {
     color: #ba0000;
}
 em.blockIcon {
     display: inline-block;
     height: 1em;
     width: 1em;
     position: relative;
}
 em.blockIcon:before {
     font-family: "Font Awesome 5 Free";
     font-style: normal;
     font-weight: 900;
     position: absolute;
     top: 0;
     left: 0;
     width: 1em;
     height: 1em;
     content: "\f27a";
}
 em.blockIcon.add:before {
     color: #4d4;
     content: "\f067";
}
 em.blockIcon.remove:before, 
 em.blockIcon.subtract:before {
     color: #d44;
     content: "\f068";
}
 em.blockIcon.change:before {
     color: #994;
     content: "\f069";
}
#themeSwitcher {
  font-family: "Font Awesome 5 Free";
}
 a.button.buttonFollow {
     background: #354544;
}
 a.button.buttonFollow em {
     font-style: normal;
     position: relative;
     display: inline-block;
     padding-left: 1.6em;
     opacity: 0.5;
}
 a.button.buttonFollow em:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f27a";
     display: block;
     position: absolute;
     width: 1.6em;
     left: 0;
     top: 3px;
     text-align: left;
}
 a.button.buttonFollow:hover, 
 a.button.buttonFollow:focus {
     background: #0072a3;
}
 a.button.buttonFollow:hover em, 
 a.button.buttonFollow:focus em {
     opacity: 1;
}
 a.button.buttonFollow.following {
     background: #009de0;
}
 a.button.buttonFollow.following em {
     opacity: 1;
}
 a.button.buttonFollow.following:hover, 
 a.button.buttonFollow.following:focus {
     background: #0072a3;
}
 p.intro {
     margin: 0;
     padding-bottom: 1.5em;
     color: var(--text-color);
}
 #envBar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 33px;
     z-index: 110;
     background: #75a66c;
     color: #fff;
     text-align: center;
}
 #envBar p {
     margin: 0;
     padding: 0.25em;
     font-weight: bold;
}
 body.test #envBar {
     background: #27acbb;
}
 body.qa #envBar {
     background: #4d76b7;
}
 body.impersonated #envBar {
     background: #a71212 !important;
}
 body.impersonated #envBar em {
     width: 1em;
     height: 1em;
     font-style: normal;
     position: relative;
     display: inline-block;
}
 body.impersonated #envBar em:before {
     position: absolute;
     top: -2px;
     right: 0;
     font-size: 0.7em;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f500";
}
 body.impersonated #envBar a {
     color: #fff;
}
 body.dev.maintenanceMode #envBar, 
 body.test.maintenanceMode #envBar, 
 body.qa.maintenanceMode #envBar, 
 body.maintenanceMode #envBar {
     background: #730000;
}
 body.maintenanceMode #envBar, 
 body.impersonated #envBar {
     height: 66px;
}
 body.maintenanceMode #envBar p, 
 body.impersonated #envBar p {
     padding: 1.25em 0 0 0;
}


/* V8.0.0 - Updated Nav: START */
@media only screen and (min-width: 961px) {

    #mobHeader {
        display: none;
    }

    #header {
        position: fixed;
        z-index: 112;
        top: 0;
        left: 0;
        width: 100%;
        height: 69px;
        background: var(--panel-background);
        display: block;
        transition: background 0.5s, color 0.5s;
    }

    body.dev #header, body.test #header, body.qa #header {
        top: 33px;
    }
    body.maintenanceMode #header, body.impersonated #header {
         top: 66px;
    }

    .headerInner {
        width: 97%;
        max-width: 1240px;
        margin: 0 auto;
        position: relative;
    }

    .headerLogo {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
    }

    .headerLogo a {
        width: 200px;
        height: 45px;
        display: block;
        position: relative;
        top: 12px;
    }

    .headerLogo a img {
        width: 100%;
        height: 100%;
        display: block;
    }

    #mobNavClose {
        display: none;
    }

    .navMenuContainer {
        position: absolute;
        top: 0;
        left: 200px;
        width: calc(100% - 200px);
    }

    ul.navMenu {
        margin: 0;
        padding-left: 1.5em;
        list-style: none;
    }

    ul.navMenu li {
        float: left;
        position: relative;
        display: inline-block;
    }

    ul.navMenu li a {
        display: inline-block;
        height: 69px;
        padding: 27px 15px;
        text-decoration: none;
        color: var(--text-color);
        font-size: 15px;
        line-height: 15px;
        box-sizing: border-box;
        transition: background 0.5s, color 0.5s;
    }

    ul.navMenu li.selected a {
        background-color: var(--panel-background-dim);
    }

    ul.navMenu li a:hover,
    ul.navMenu li.selected a:hover {
        background-color: var(--panel-background-dark);
        color: #fff;
    }

    ul.navMenu li a.parent {
        padding-right: 36px;
    }

    ul.navMenu li a.parent:before {
        position: absolute;
        font-family: "Font Awesome 5 Free";
        height: 15px;
        font-size: 15px;
        line-height: 15px;
        content: "\f0d7";
        right: 20px;
        color: #ABBCBB;
        transform: rotate(0deg);
    }

    ul.navMenu + ul.navMenu {
        position: absolute;
        padding-left: 0;
        right: 0;
        top: 0;
    }

    ul.navMenu ul {
        display: none;
        border-bottom-left-radius: 0.75em;
        border-bottom-right-radius: 0.75em;
        box-shadow: 0px 5px 5px var(--shadow-color);
        position: absolute;
        top: 69px;
        left: 0;
        padding: 0;
        overflow-x: hidden;
        max-height: calc(100vh - 69px);
    }
    body.dev ul.navMenu ul, body.test ul.navMenu ul, body.qa ul.navMenu ul {
        max-height: calc(100vh - 69px - 33px);
    }
    body.maintenanceMode ul.navMenu ul, body.impersonated ul.navMenu ul {
        max-height: calc(100vh - 69px - 66px); 
    }

    ul.navMenu + ul ul {
        left: auto;
        right: 0;
    }

    ul.navMenu li:hover ul {
        display: block;
        overflow-y: auto;
    }

    ul.navMenu li ul li {
        float: none;
        width: 200px;
    }

    ul.navMenu li ul li a,
    ul.navMenu li.selected ul li a {
        background: var(--panel-background);
        width: 100%;
        min-height: 55px;
        padding: 16px 15px;
        line-height: 24px;
        height: auto;
    }

    ul.navMenu li ul li.selected a,
    ul.navMenu li.selected ul li.selected a {
        background: var(--panel-background-dim);
    }

    ul li.alerts a.alert {
         background: #759a9e url("/images/alert-icon.png") no-repeat 20px 22px;
         padding-left: 55px;
         color: #fff;
    }
    ul li.alerts a.alert:hover, 
    ul li.alerts a.alert:focus {
         background-color: #436e70;
    }
    ul li.alerts a.alert.warning {
         background-color: #cb8e1a;
    }
    ul li.alerts a.alert.warning:hover, 
    ul li.alerts a.alert.warning:focus {
         background-color: #a36d16;
    }
    ul li.alerts a.alert.issue {
         background-color: #ba0000;
    }
    ul li.alerts a.alert.issue:hover, 
    ul li.alerts a.alert.issue:focus {
         background-color: #900000;
    }
}


@media only screen and (max-width: 1120px) and (min-width: 961px) {

    ul.navMenu {
        padding-left: 0.5em;
    }

    ul.navMenu li a {
        font-size: 0.8em;
    }

    ul.navMenu li a.parent {
        padding-right: 30px;
    }

    ul.navMenu li a.parent:before {
        right: 12px;
    }

}

@media only screen and (max-width: 960px) {

    #mobHeader {
        position: fixed;
        z-index: 111;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: var(--panel-background);
        display: block;
        transition: background 0.5s;
    }

    body.dev #mobHeader, body.test #mobHeader, body.qa #mobHeader {
        top: 33px;
    }

    .mobHeaderLogo {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
    }

    .mobHeaderLogo a {
        width: 180px;
        height: 40.5px;
        display: block;
        position: relative;
        top: 10px;
    }

    .mobHeaderLogo a img {
        width: 100%;
        height: 100%;
        display: block;
    }

    ul.mobHeaderMenu {
        margin: 0;
        padding-left: 1.5em;
        list-style: none;
        float: right;
        font-size: 0.8em;   
    }

    ul.mobHeaderMenu li {
        float: left;
        position: relative;
        display: inline-block;
    }

    ul.mobHeaderMenu li a {
        display: inline-block;
        height: 60px;
        padding: 22.5px 15px;
        text-decoration: none;
        color: var(--text-color);
        font-size: 15px;
        line-height: 15px;
        box-sizing: border-box;
        transition: background 0.5s, color 0.5s;
    }

    li.alerts a.alert {
        background: #759a9e url("/images/alert-icon.png") no-repeat 12px 21px;
        background-size: 20px;
        padding: 22.5px 10px 22.5px 40px;
        color: #fff;
    }
    li.alerts a.alert:hover, 
    li.alerts a.alert:focus {
         background-color: #436e70;
    }
    li.alerts a.alert.warning {
         background-color: #cb8e1a;
    }
    li.alerts a.alert.warning:hover, 
    li.alerts a.alert.warning:focus {
         background-color: #a36d16;
    }
    li.alerts a.alert.issue {
         background-color: #ba0000;
    }
    li.alerts a.alert.issue:hover, 
    li.alerts a.alert.issue:focus {
         background-color: #900000;
    }

    ul.navMenu li.themeSwitcher,
    ul.navMenu li.alerts {
        display: none;
    }

    .mobileNavToggle,
    .rounding .mobileNavToggle {
        width: 40px;
        height: 40px;
        position: relative;
        top: 10px;
        margin-left: 10px;
        background: transparent;
        box-shadow: none;
    }

    .mobileNavToggle:before {
        position: absolute;
        font-family: "Font Awesome 5 Free";
        content: "\f0c9";
        top: 5px;
        left: 5px;
        height: 30px;
        font-size: 30px;
        line-height: 30px;
        width: 30px;
        color: var(--text-lighter);
    }

    #header {
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(22,29,28,0.65);
        display: none;
    }

    #header.shown {
        display: block;
        animation-name: navMenuIn;
        animation-duration: 0.25s;
        animation-iteration-count: 1;
    }

    #header.hidden {
        display: block;
        animation-name: navMenuOut;
        animation-duration: 0.25s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    @keyframes navMenuIn {
        0% {
            opacity: 0;
        }
        1% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes navMenuOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    .headerInner {
        position: absolute;
        top: 10px;
        right: 10px;
        bottom: 10px;
        width: 320px;
        background: var(--panel-background);
        border-radius: 1em;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        overflow:hidden;
    }

    .shown .headerInner {
        animation-name: navMenuIn_Inner;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
    }

    .hidden .headerInner {
        right: -330px;
        animation-name: navMenuOut_Inner;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
    }

    @keyframes navMenuIn_Inner {
        0% {
            opacity: 0;
            right: -330px;
        }
        100% {
            opacity: 1;
            right: 10px;
        }
    }

    @keyframes navMenuOut_Inner {
        0% {
            opacity: 1;
            right: 10px;
        }
        100% {
            opacity: 0;
            right: -330px;
        }
    }

    .headerLogo {
        height: 70px;
        border-bottom: 1px solid var(--panel-background-dim);
    }

    .headerLogo img {
        width: 200px;
        height: 45px;
        display: block;
        position: absolute;
        left: 14px;
        top: 12px;
    }

    #mobNavClose {
        background: transparent;
        box-shadow: none;
        color: #759a9e;
        padding: 0;
        position: absolute;
        top: 10px;
        right: 10px;
        height: 50px;
        width: 50px;
        font-family: "Font Awesome 5 Free";
        line-height: 50px;
        font-size: 20px;
    }

    #mobNavClose:hover {
        background: var(--panel-background-dim);
    }

    .navMenuContainer {
        overflow-y : scroll;
        overflow-x: hidden;
        height: calc(100% - 70px);
        border-bottom-right-radius: 1em;
    }

    ul.navMenu {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    ul.navMenu li {
        margin: 0;
        padding: 0;
    }

    ul.navMenu a {
        position: relative;
        display: block;
        height: 50px;
        line-height: 50px;
        padding-left: 40px;
        text-decoration: none;
        color: var(--text-color);
        border-top: 1px solid var(--panel-background-dim);
        border-bottom: 1px solid var(--panel-background-dim);
        overflow-y:hidden;
    }

    ul.navMenu a.parent {
        font-weight: bold;
    }

    ul.navMenu li.selected > a {
        background: var(--panel-background-dim);
        border-top-color: var(--panel-background-dimmer);
        border-bottom-color: var(--panel-background-dimmer);
    }

    ul.navMenu li li.selected > a {
        background: var(--panel-background-dim);
    }

    ul.navMenu a:hover,
    ul.navMenu li.selected > a:hover,
    ul.navMenu li li.selected > a:hover {
        background: var(--panel-background-dark);
        color: #fff;
    }

    ul.navMenu a:before {
        position: absolute;
        font-family: "Font Awesome 5 Free";
        content: "\f0da";
        top: 0;
        right: 15px;
        height: 50px;
        font-size: 1.5em;
        line-height: 50px;
        color: var(--text-lighter);
    }

    ul.navMenu a.parent:before {
        content: "\f0d7";
        left: 15px;
        right: auto;
        color: var(--text-color)
        transform: rotate(0deg);
    }

    ul.navMenu a.parent:hover:before {
        color: #fff;
    }

    ul.navMenu .expanded > a.parent:before {
        transform: rotate(180deg);
    }

    ul.navMenu ul {
        height: 0;
        overflow-y: hidden;
    }
    
    ul.navMenu li.expanded ul {
        height: auto;
    }

    ul.navMenu ul a {
        border-top: 0;
    }
}
/* V8.0.0 - Updated Nav: END */


 #subheader {
     position: fixed;
     z-index: 90;
     top: 69px;
     left: 0;
     width: 100%;
     height: 39px;
     background: var(--panel-background-dim);
     transition: background 0.5s, color 0.5s;
}
 #subheader .inner {
     width: 100%;
}
#subheader .nav {
     left: 0;
}
#subheader .nav {
     top: 0;
     position: absolute;
}
 #subheader .nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
 #subheader .nav ul li {
     float: left;
}
 #subheader .nav ul li a {
     display: block;
     height: 39px;
     padding: 12px 20px;
     text-decoration: none;
     color: var(--text-color);
     font-size: 15px;
     line-height: 15px;
     box-sizing: border-box;
     transition: all 0.5s;

}
 #subheader .nav ul li ul {
     display: none;
}
 #subheader .nav ul li.selected a {
     background: #759a9e;
     color: #fff;
}
 #subheader .nav ul li:hover a {
     background: #e9f2f1;
     color: var(--text-color);
}
 #header em.icon,
 #subheader em.icon {
    position: relative;
    top: -0.05em;
    font-size: 0.75em;
    padding-left: 0.2em;
    opacity: 0.5;
    padding-bottom: 0.05em;
 }
 body.dev #subheader, 
 body.test #subheader, 
 body.qa #subheader {
     top: 102px;
}
 body.maintenanceMode #subheader, 
 body.impersonated #subheader {
     top: 135px;
}
#pageContentContainer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: var(--page-content-top);
    padding-bottom: var(--page-content-padding-bottom);
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
    transition: padding 0.25s;
}

 #pageContentContainer > div {
     height: 100%;
     overflow-y: auto;
     overflow-y: scroll;
}
#pageContent > div > .footerButtons, 
#form1 > .footerButtons {
     display: none;
}
.expandableContainer #form1 > .footerButtons {
     display: block;
     margin-top: 1em;
     padding-bottom: 0;
}
.content {
     padding-top: 1em;
     padding-bottom: 1.5em;
     transition: all 0.25s;

}
.content a,
.modalPopup a {
     color: var(--link-color);
     text-decoration: none;
     font-weight: 600;
}
.content a:hover,
.modalPopup a:hover {
     color: var(--link-hover-color);
     text-decoration: underline;
}
.content a.showHelpPopup {
    color: var(--panel-background-dark);
}

.content a.button,
.modalPopup a.button {
     color: #fff;
     font-weight: 400;
}
.content a.button:hover, 
.content a.button:focus,
.modalPopup a.button:hover, 
.modalPopup a.button:focus {
     color: #fff;
     text-decoration: none;
}
button em,
a.button em {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
}


 .content label.help {
     transition: all 0.5s;

}
 .content label.help.helpShown {
     color: #cb8e1a;
}

.content .inner > h2,
.content .inner form > h2, 
.content .inner h2.webHeader {
    color: #cb8e1a;
    font-size: 2em;
    margin: 0;
    padding: 1em 0 0.5em 0;
}
.content .inner form > h2, 
.content .inner h2.webHeader {
    padding: 0 0 0.5em 0;
}
.content .inner > h3 {
    color: #cb8e1a;
    font-size: 1.5em;
}
.content .breadcrumbs {
    font-size: 0.9em;
    color: #a7b5b6;
}
 .content .breadcrumbs p {
     margin: 0;
     padding: 1em 0 1.5em 0;
}
 .content .titleAndCustomer {
     padding-bottom: 1em;
}
 .content .titleAndCustomer .title {
     width: 50%;
}
 .content .titleAndCustomer .customer {
     width: 50%;
     padding-top: 0.5em;
}
 .content .titleAndCustomer .customer select {
     width: 100%;
}
 .content .titleAndCustomer .customer select.gridColConfigList {
     width: auto;
     float: right;
}
 .content .titleAndCustomer.oneCol .title {
     width: 100%;
}
 .content .titleAndCustomer.oneCol .customer {
     width: 100%;
}
 .content label.radio, 
 .content span.radio {
     padding: 0.25em 0 0.5em 0;
}
 .content label.radio, 
 .content span.radio span {
     transition: background 0.25s, color 0.25s;

}
 .content label.radio:hover, 
 .content span.radio span:hover {
     cursor: pointer;
}
 .content span.radio span.fullWidth {
     padding-right: 0;
     display: block;
     padding-bottom: 0;
}
 .content label.radio input[type="radio"] {
     width: auto;
}
 .content span.checkbox {
     transition: background 0.25s, color 0.25s;

}
 .content label.checkbox.error {
     color: #dd0000;
}
 .content label.checkbox:hover, 
 .content span.checkbox:hover {
     cursor: pointer;
}
 .content span.checkbox span {
     padding-right: 1em;
}
 .content span.checkbox span.fullWidth {
     padding-right: 0;
     display: block;
}
 .content .checkBoxList span {
     width: 100%;
     display: block;
}
 .content span.inline {
     width: auto;
     padding-right: 1em;
}
 .content .listPages:before, 
 .content .listPages:after {
     content: " ";
     display: table;
}
 .content .listPages:after {
     clear: both;
}
 .content .listPages > span {
     display: inline-block;
     float: left;
}
 .content .listPages > span span {
     display: inline-block;
     min-width: 1.25em;
     text-align: center;
}
 .content .listPages > span.rowCount {
     padding-left: 1.5em;
}
 .content .listPages img {
     float: left;
     margin: 4px 0.75em 0 0;
}
 .content .listPages img.nextArrow {
     margin: 4px 0 0 0.5em;
}
 .content .listPages em {
     float: left;
     margin: 0 0.375em 0 0;
     font-size: 1.5em;
}
 .content .listPages em.inactive {
     opacity: 0.25;
}
 .content .listPages em.nextArrow {
     margin: 0 0 0 .375em;
}
 .content img.softwareLogo {
     width: 76px;
     height: 35px;
}
 .content #listClickAction {
     display: block;
     float: right;
     position: relative;
     padding-right: 0em;
     width: 1.5em;
     height: 1em;
     margin-left: 1em;
     box-sizing: border-box;
     transition: color 0.5s;
}
 .content #listClickAction:hover {
     cursor: pointer;
}
 .content #listClickAction:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f044";
     display: block;
     position: absolute;
     font-size: 1em;
     width: 1em;
     height: 1em;
     right: 0.25em;
     top: 0.15em;
}
 .content #listClickAction.view:before {
     content: "\f06e";
}
 .content #refreshSecondsRemaining {
     display: inline-block;
     float: right;
     position: relative;
     padding-left: 0.25em;
     transition: color 0.5s;
}
 .content #refreshSecondsRemaining:hover {
     cursor: pointer;
     color: #3c4849;
}
 .content #refreshSecondsRemaining:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f2f9";
     display: block;
     position: absolute;
     font-size: 1em;
     width: 1em;
     height: 1em;
     left: -1.2em;
     top: 0.15em;
     opacity: 0.5;
     transform: rotate(0deg);
     transition: transform 0.25s, opacity 0.25s;
}
 .content #refreshSecondsRemaining:hover:before {
     opacity: 1;
     transform: rotate(90deg);
}
 .content .textareaCheckboxContainer {
     position: relative;
}
 .content .textareaCheckbox {
     position: absolute;
     top: 0;
     right: 0;
     text-align: right;
     padding-right: 0;
}

 .qwTabGroup:before, .qwTabGroup:after {
     content: " ";
     display: table;
}
 .qwTabGroup:after {
     clear: both;
}
 .qwTabGroup {
     position: relative;
     height: 48px;
     overflow-y: hidden;
}
 .qwTabGroup .qwTabMobileWrapper {
     overflow-x: hidden;
}
 .qwTabGroup .qwTabMobileWrapper .qwTabContainer {
     margin-top: 0.5em;
}
 .qwTabGroup .qwTabMobileWrapper .qwTabContainer:before {
     content: " ";
     display: table;
}
 .qwTabGroup .qwTabMobileWrapper .qwTabContainer:after {
     clear: both;
}
 .qwTabGroup .leftArrow, .qwTabGroup .rightArrow {
     position: absolute;
     top: 0;
     height: 100%;
     width: 50px;
     display: none;
     font-weight: bold;
     font-size: 2em;
     line-height: 0.75em;
     margin-top: 0.25em;
     padding-top: 0.25em;
     color: #fff;
     box-sizing: border-box;
     transition: padding 0.25s;
}
 .qwTabGroup .leftArrow:hover, .qwTabGroup .rightArrow:hover {
     cursor: pointer;
}
 .qwTabGroup .leftArrow:before, .qwTabGroup .rightArrow:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f0d7";
     display: block;
     position: absolute;
     width: 50px;
     left: 0;
     text-align: center;
     transform: rotate(90deg);
}
 .qwTabGroup .leftArrow {
     background: linear-gradient(to left,rgba(166,191,190,0) 0%,#a6bfbe 35%,#a6bfbe 100%);
     left: 0;
     padding-left: 10px;
     text-align: left;
}
 .qwTabGroup .leftArrow:hover {
     padding-left: 5px;
}
 .qwTabGroup .rightArrow {
     background: linear-gradient(to right,rgba(166,191,190,0) 0%,#a6bfbe 35%,#a6bfbe 100%);
     right: 0;
     padding-right: 10px;
     text-align: right;
}
 .qwTabGroup .rightArrow:hover {
     padding-right: 5px;
}
 .qwTabGroup .rightArrow:before {
     transform: rotate(-90deg);
}
 .qwTabGroup .qwTab {
     float: left;
     background: #d3e0df;
     color: var(--tab-text-color);
     margin-right: 4px;
     margin-top: 0em;
     padding: 0;
     transition: all 0.25s;
}

 .qwTabGroup .qwTab a {
     font-weight: 400;
     font-family: 'Noa', Helvetica, Verdana, Sans-Serif;
     text-decoration: none;
     display: block;
     color: var(--tab-text-color);
     padding: 0.5rem 1em;
     font-size: 1.15em;
     margin: 0;
     white-space: nowrap;
     box-sizing: border-box;
     transition: all 0.25s;
     outline: none;
}
 .qwTabGroup .qwTab a:focus {
     background: rgba(233,242,241,0.51);
}
 .qwTabGroup .qwTab:hover,
 .qwTabGroup .qwTab:has(a:focus) {
     cursor: pointer;
     background: #e9f2f1;
     background: #deeeed;
     margin-top: -0.25em;
}
 .qwTabGroup .qwTab:hover a,
  .qwTabGroup .qwTab:has(a:focus) a {
     padding-bottom: 0.75rem;
}

 .qwTabGroup .qwTab.selected,
.qwTabGroup .qwTab.selected:hover,
 .qwTabGroup .qwTab.selected:has(a:focus) {
     margin-top: -0.5em;
     background: #e9f2f1;
}
.qwTabGroup .qwTab.selected a,
.qwTabGroup .qwTab.selected:hover a,
.qwTabGroup .qwTab.selected:has(a:focus) a {
     padding-bottom: 1rem;
}
 .qwTabGroup .qwTab.good {
     background: #e4f7d7;
}
 .qwTabGroup .qwTab.warning {
     background: #ffe7d4;
}
 .qwTabGroup .qwTab.error, .qwTabGroup .qwTab.issue {
     background: #f7d0d0;
}
 .qwTabContent {
     display: none;
}
 .qwTabContent.selected {
     display: block;
}
 .qwTabContent.expandableContainer .container {
     padding: 1.25em 1.5em 1.5em 1.5em;
}

 .qwTabContent.expandableContainer .container .invoices_container h2,
 .qwTabContent.expandableContainer .container table h2 {
     margin-top: 0.15em;
}

/* Nested Tabs: START */
.qwTabContent .qwTab {
    background: #d3e0df;
    color: var(--tab-text-color);
    padding: 0;
}
.qwTabContent .qwTab a {
    padding: 0.5rem 1em;
    font-size: 1.15em;
    margin: 0;
}
.qwTabContent .qwTab:hover,
.qwTabContent .qwTab:has(a:focus) {
    background: #f2f8f7;
    margin-top: -0.25em;
}
.qwTabContent .qwTab:hover a,
.qwTabContent .qwTab:has(a:focus) a {
    padding-bottom: 0.75rem;
}
.qwTabContent .qwTab.selected,
.qwTabContent .qwTab.selected:hover,
.qwTabContent .qwTab.selected:has(a:focus) {
    margin-top: -0.5em;
    background: #f2f8f7;
}
.qwTabContent .qwTab.selected a,
.qwTabContent .qwTab.selected:hover a,
.qwTabContent .qwTab.selected:has(a:focus) a {
    padding-bottom: 1rem;
}
/* Nested Tabs: END */

/* Double-nested Tabs: START */
.qwTabContent .qwTabContent .qwTab {
    background: #d3e0df;
    color: var(--tab-text-color);
    padding: 0;
}
.qwTabContent .qwTabContent .qwTab a {
    padding: 0.5rem 1em;
    font-size: 1.15em;
    margin: 0;
}
.qwTabContent .qwTabContent .qwTab:hover,
.qwTabContent .qwTabContent .qwTab:has(a:focus)  {
    background: #e9f2f1;
    margin-top: -0.25em;
}
.qwTabContent .qwTabContent .qwTab:hover a,
.qwTabContent .qwTabContent .qwTab:has(a:focus) a {
    padding-bottom: 0.75rem;
}
.qwTabContent .qwTabContent .qwTab.selected,
.qwTabContent .qwTabContent .qwTab.selected:hover,
.qwTabContent .qwTabContent .qwTab.selected:has(a:focus)  {
    margin-top: -0.5em;
    background: #e9f2f1;
}
.qwTabContent .qwTabContent .qwTab.selected a,
.qwTabContent .qwTabContent .qwTab.selected:hover a,
.qwTabContent .qwTabContent .qwTab.selected:has(a:focus) a {
    padding-bottom: 1rem;
}
/* Double-nested Tabs: END */

 .qwTabContent .qwTabContent .qwTabContent.expandableContainer .container {
     background: #e9f2f1;
}
 .qwTabContent .qwTabContent .qwTabContent.expandableContainer .container .expandableContainer > .container {
     background: #f2f8f7;
}
 .expandableContainer {
     margin-bottom: 1.5em;
     height: 46px;
     min-height: 46px;
     overflow: hidden;
}
 .expandableContainer .header{
     background: #e9f2f1;
     color: var(--input-color);
     position: relative;
     padding-left: 35px;
     transition: all 0.5s;
     min-height: 46px;
     display: block;
     text-decoration: none;
}
 .expandableContainer .header .expander {
     position: absolute;
     top: 0;
     left: 8px;
     font-size: 24px;
     font-weight: 400;
     font-family: 'Noa', Helvetica, Verdana, Sans-Serif;
     padding: 0.25em;
     transition: all 0.25s;

}
 .expandableContainer .header .expander:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f0d7";
}
 .expandableContainer .header div.questionStatus {
     position: absolute;
     top: 0;
     right: 10px;
     font-size: 24px;
     font-weight: 400;
     font-family: 'Noa', Helvetica, Verdana, Sans-Serif;
     padding: 0.25em;
     color: var(--input-color);
     box-sizing: border-box;
     width: 26px;
     height: 100%;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
}
 .expandableContainer .header div.questionStatus.answered {
     background-image: url("/images/header-icon-answered.png");
}
 .expandableContainer .header div.questionStatus.info {
     background-image: url("/images/header-icon-info.png");
}
 .expandableContainer .header div.help {
     position: absolute;
     display: none;
     top: 0;
     right: 8px;
     font-size: 24px;
     font-weight: 400;
     font-family: 'Noa', Helvetica, Verdana, Sans-Serif;
     padding: 0;
}
 .expandableContainer .header div.help a {
     color: var(--input-color);
     padding: 0.25em;
     display: block;
}
 .expandableContainer .header h2 {
     padding: 0.5em 0;
     font-size: 1.25em;
     margin: 0;
     box-sizing: border-box;
     padding-right: 40px;
}
 .expandableContainer .header:hover {
     cursor: pointer;
     background: #d3e0df;
     text-decoration: none;
}
 .expandableContainer .header:focus {
     background: #d3e0df;
}
 .expandableContainer .container {
     background: #e9f2f1;
     visibility: hidden;
     padding: 1em;
     position: relative;
     box-sizing: border-box;
     transition: all 0.5s;

     color: var(--text-color);
}
 .expandableContainer .container > .messageCloser {
     position: absolute;
     top: 5px;
     right: 5px;
     display: block;
     width: 25px;
     height: 25px;
     text-align: center;
     transition: background 0.25s, color 0.25s;

}
 .expandableContainer .container > .messageCloser:hover, 
 .expandableContainer .container > .messageCloser:focus {
     background: rgba(255,255,255,0.5);
     text-decoration: none;
}
 .expandableContainer .container a.button, 
 .expandableContainer .container button {
     padding: 10px 15px;
     margin-bottom: 0.5em;
}
 .expandableContainer .container a.button.buttonSmall, 
 .expandableContainer .container button.buttonSmall {
     padding: 7px 15px;
}
 .expandableContainer .container a.button.expandContractButton, 
 .expandableContainer .container button.expandContractButton {
     border-radius: 50%;
     box-sizing: border-box;
     padding: 7.5px;
     width: 30px;
     height: 30px;
     margin: 0;
}
 .expandableContainer .container a.button.expandContractButton span, 
 .expandableContainer .container button.expandContractButton span {
     display: block;
     width: 15px;
     height: 15px;
     font-size: 15px;
     margin: -3px 0 0 0;
     text-align: center;
     transform: rotate(0deg);
     transition: all 0.25s;

}
 .expandableContainer .container a.button.expandContractButton span:before, 
 .expandableContainer .container button.expandContractButton span:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f0d7";
     position: absolute;
     width: 15px;
     height: 15px;
     top: 0;
     left: 0;
     font-size: 20px;
}
 .expandableContainer .container button {
     padding: 12px 15px;
}
 .expandableContainer .container .tox button {
     padding: 0 4px;
     margin-bottom: 0;
     margin-top: 0;
}
 .expandableContainer .container .tox .tox-split-button {
     margin-top: 4px;
}
 .expandableContainer .container .tox .tox-menubar {
     border-bottom: 1px solid #d3e0df;
}
 .expandableContainer .container .tox .tox-toolbar__primary {
     background: transparent;
     border-bottom: 1px solid #d3e0df;
}
 .expandableContainer .container .tox .tox-tbtn svg {
     fill: #3c4849;
}
 .expandableContainer .container .tox .tox-tbtn--disabled svg, 
 .expandableContainer .container .tox .tox-tbtn--disabled:hover svg, 
 .expandableContainer .container .tox .tox-tbtn:disabled svg, 
 .expandableContainer .container .tox .tox-tbtn:disabled:hover svg {
     fill: rgba(34,47,62,0.25);
}
 .expandableContainer .container .packageEdit.expanded a.button.expandContractButton span {
     transform: rotate(-180deg);
}
 .expandableContainer .container > h2 {
     margin-top: 0;
}
 .expandableContainer .container h2.noTopMargin {
     margin-top: 0;
}
 .expandableContainer .container > h3 {
     margin: 0;
}
 .expandableContainer .container > h3 + table {
     margin-top: 1em;
}
 .expandableContainer .container > h3.alertHeader {
     padding-bottom: 0.5em;
}
 .expandableContainer .container #selectedSoftwareDescription h3 {
     margin: 0;
     font-weight: 600;
}
 .expandableContainer .container > p {
     margin: 0.5em 0 1em 0;
}
 .expandableContainer .container > p > a.button {
     margin-bottom: -0.5em;
}
 .expandableContainer .container > ul, 
 .expandableContainer .container > ol {
     padding-left: 1.25em;
}
 .expandableContainer .container > ul li, 
 .expandableContainer .container > ol li {
     text-indent: 0em;
     line-height: 1.6em;
}
 .expandableContainer .container ul.padded li, 
 .expandableContainer .container ol.padded li {
     padding-bottom: 0.5em;
}
 .expandableContainer .container ul.padded li:last-child, 
 .expandableContainer .container ol.padded li:last-child {
     padding-bottom: 0em;
}
 .expandableContainer .container .expandableContainer {
     height: 43px;
     min-height: 43px;
     overflow: hidden;
     margin-bottom: 1em;
}
 .expandableContainer .container .expandableContainer .header {

     background: rgba(211,224,223,0.41);
     color: var(--input-color);
     padding-left: 1.75em;
     min-height: auto;
}
 .expandableContainer .container .expandableContainer .header .expander {
     position: absolute;
     top: 3px;
     left: 0;
     font-size: 1.25em;
     padding: 0.25em 0.5em;
}
 .expandableContainer .container .expandableContainer .header h3 {
     padding: 0.5em 0.25em;
     margin: 0;
}
 .expandableContainer .container .expandableContainer .header:hover, 
 .expandableContainer .container .expandableContainer .header:focus {
     background: #d3e0df;
}
 .expandableContainer .container .expandableContainer .container {
     padding: 1em 1.25em 0.5em 1.25em;
     visibility: hidden;
     background: rgba(255,255,255,0.41);
}
 .expandableContainer .container .expandableContainer .container .expandableContainer .header h3 {
     font-size: 1em;
}
 .expandableContainer .container .expandableContainer .container .expandableContainer .container {
     padding-bottom: 1em;
}
 .expandableContainer .container .expandableContainer .container .expandableContainer {
     height: 30px;
}
 .expandableContainer .container .expandableContainer .container .expandableContainer.expanded {
     height: auto;
}
 .expandableContainer .container .expandableContainer.expanded {
     height: auto;
     overflow: visible;
}
 .expandableContainer .container .expandableContainer.expanded .header {
     background: rgba(255,255,255,0.41);
}
 .expandableContainer .container .expandableContainer:last-child {
     margin-bottom: 0;
}
 .expandableContainer .container .expandableContainer.good, 
 .expandableContainer .container .expandableContainer.info, 
 .expandableContainer .container .expandableContainer.warning, 
 .expandableContainer .container .expandableContainer.issue, 
 .expandableContainer .container .expandableContainer.question {
     margin-bottom: 1em;
}
 .expandableContainer .container .expandableContainer.good .header, 
 .expandableContainer .container .expandableContainer.info .header, 
 .expandableContainer .container .expandableContainer.warning .header, 
 .expandableContainer .container .expandableContainer.issue .header, 
 .expandableContainer .container .expandableContainer.question .header {
     background: #d3e0df;
     color: var(--input-color);
}
 .expandableContainer .container .expandableContainer.good .header h2, 
 .expandableContainer .container .expandableContainer.info .header h2, 
 .expandableContainer .container .expandableContainer.warning .header h2, 
 .expandableContainer .container .expandableContainer.issue .header h2, 
 .expandableContainer .container .expandableContainer.question .header h2 {
     font-size: 1.25em;
     padding: 0.5em 0;
}
 .expandableContainer .container .expandableContainer.good .container, 
 .expandableContainer .container .expandableContainer.info .container, 
 .expandableContainer .container .expandableContainer.warning .container, 
 .expandableContainer .container .expandableContainer.issue .container, 
 .expandableContainer .container .expandableContainer.question .container {
     padding-left: 80px;
     background-color: #d3e0df;
     background-image: url("/images/alert-icon-info.png");
     background-position: 10px 10px;
     background-repeat: no-repeat;
     min-height: 70px;
}
 .expandableContainer .container .expandableContainer.good .container p:first-child, 
 .expandableContainer .container .expandableContainer.info .container p:first-child, 
 .expandableContainer .container .expandableContainer.warning .container p:first-child, 
 .expandableContainer .container .expandableContainer.issue .container p:first-child, 
 .expandableContainer .container .expandableContainer.question .container p:first-child {
     margin-top: 0;
}
 .expandableContainer .container .expandableContainer .container.sideInfoCol {
     padding-left: 1.5em;
     padding-top: 1.3em;
     background-position: right 1em top 10px;
}
 .expandableContainer .container .expandableContainer .container.sideInfoCol h2 {
     padding-right: 50px;
}
 .expandableContainer .container .expandableContainer .container.sideInfoCol h3 {
     padding-bottom: 0.5em;
}
 .expandableContainer .container .expandableContainer .container.sideInfoCol #ticketAssignmentMessage {
     padding-right: 80px;
}
 .expandableContainer .container .expandableContainer .container.sideInfoCol div span {
     font-size: 0.9em;
     font-weight: 600;
}
 .expandableContainer .container .expandableContainer.good.noIcon, 
 .expandableContainer .container .expandableContainer.info.noIcon, 
 .expandableContainer .container .expandableContainer.warning.noIcon, 
 .expandableContainer .container .expandableContainer.issue.noIcon {
     margin-bottom: 1em;
}
 .expandableContainer .container .expandableContainer.good.noIcon > .container, 
 .expandableContainer .container .expandableContainer.info.noIcon > .container, 
 .expandableContainer .container .expandableContainer.warning.noIcon > .container, 
 .expandableContainer .container .expandableContainer.issue.noIcon > .container {
     padding-left: 1.25em;
     background-image: none !important;
}
 .expandableContainer .container .expandableContainer.info.expanded .header {
     background: #759a9e;
     color: #fff;
}
 .expandableContainer .container .expandableContainer.warning .header {
     background: #ffe7d4;
     color: #cb8e1a;
}
 .expandableContainer .container .expandableContainer.warning .header:hover,
 .expandableContainer .container .expandableContainer.warning .header:focus {
     background: #ffd2ad;
}
 .expandableContainer .container .expandableContainer.warning .container {
     background-color: #ffe7d4;
     background-image: url("/images/alert-icon-warning.png");
     color: #a36d16;
}
 .expandableContainer .container .expandableContainer.warning.expanded .header {
     background: #cb8e1a;
     color: #fff;
}
 .expandableContainer .container .expandableContainer.warning.expanded .header:hover,
 .expandableContainer .container .expandableContainer.warning.expanded .header:focus {
     background: #a36d16;
}
 .expandableContainer .container .expandableContainer.issue .header {
     background: #f7d0d0;
     color: #ba0000;
}
 .expandableContainer .container .expandableContainer.issue .header:hover,
 .expandableContainer .container .expandableContainer.issue .header:focus {
     background: #f2b5b5;
}
 .expandableContainer .container .expandableContainer.issue .container {
     background-color: #f7d0d0;
     background-image: url("/images/alert-icon-issue.png");
     color: #ba0000;
}
 .expandableContainer .container .expandableContainer.issue.expanded .header {
     background: #ba0000;
     color: #f7d0d0;
}
 .expandableContainer .container .expandableContainer.issue.expanded .header:hover,
 .expandableContainer .container .expandableContainer.issue.expanded .header:focus {
     background: #900000;
}
 .expandableContainer .container .expandableContainer.good .header {
     background: #e4f7d7;
     color: #359c1c;
}
 .expandableContainer .container .expandableContainer.good .header:hover,
 .expandableContainer .container .expandableContainer.good .header:focus {
     background: #c2eda6;
}
 .expandableContainer .container .expandableContainer.good .container {
     background-color: #e4f7d7;
     background-image: url("/images/alert-icon-good.png");
     color: #359c1c;
}
 .expandableContainer .container .expandableContainer.good.expanded .header {
     background: #359c1c;
     color: #e4f7d7;
}
 .expandableContainer .container .expandableContainer.good.expanded .header:hover,
 .expandableContainer .container .expandableContainer.good.expanded .header:focus {
     background: #2c8417;
}
 .expandableContainer .container .expandableContainer.question .header {
     background: #d7eae9;
     color: #247f79;
}
 .expandableContainer .container .expandableContainer.question .header:hover,
 .expandableContainer .container .expandableContainer.question .header:focus {
     background: #c2eda6;
}
 .expandableContainer .container .expandableContainer.question .container {
     background-color: #d7eae9;
     background-image: url("/images/alert-icon-question.png");
     color: #247f79;
     padding-bottom: 0.25em;
}
 .expandableContainer .container .expandableContainer.question .container span.radio,
 .expandableContainer .container .expandableContainer.question .container span.checkbox {
     margin-bottom: 0;
}
 .expandableContainer .container .expandableContainer .expandableContainer:last-child {
     margin-bottom: 0;
}

 .expandableContainer.expanded {
     height: auto;
     overflow: visible;
}
 .expandableContainer.expanded > .header {
     background: #759a9e;
     color: #fff;
}
 .expandableContainer.expanded > .header .expander {
     transform: rotate(-180deg);
}
 .expandableContainer.expanded > .header div.help a {
     color: #fff;
}
 .expandableContainer.expanded > .header div.questionStatus.answered {
     background-image: url("/images/header-icon-expanded-answered.png");
}
 .expandableContainer.expanded > .header div.questionStatus.info {
     background-image: url("/images/header-icon-expanded-info.png");
}
 .expandableContainer.expanded > .header:hover,
 .expandableContainer.expanded > .header:focus {
     background: #436e70;
}
 .expandableContainer.expanded .container {
     visibility: visible;
}
 .expandableContainer.expanded .expandableContainer .header:hover,
 .expandableContainer.expanded .expandableContainer .header:focus {
     background: #d3e0df;
}
 .expandableContainer.expanded .expandableContainer .container {
     visibility: hidden;
}
 .expandableContainer.expanded .expandableContainer.expanded .container {
     visibility: visible;
}

 .expandableContainer.good .container,
 .expandableContainer.info .container,
 .expandableContainer.warning .container,
 .expandableContainer.issue .container {
     padding-left: 80px;
     background: #d3e0df url("/images/alert-icon-info.png") no-repeat 10px 10px;
}
 .expandableContainer.good.noIcon > .container,
 .expandableContainer.info.noIcon > .container,
 .expandableContainer.warning.noIcon > .container,
 .expandableContainer.issue.noIcon > .container {
     padding-left: 1em;
     background-image: none !important;
}
 .expandableContainer.warning .header {
     background: #ffe7d4;
     color: #cb8e1a;
}
 .expandableContainer.warning .header:hover,
 .expandableContainer.warning .header:focus {
     background: #ffd2ad;
}
 .expandableContainer.warning .container {
     background: #ffe7d4 url("/images/alert-icon-warning.png") no-repeat 10px 10px;
     color: #cb8e1a;
     color: #a36d16;
}
 .expandableContainer.warning .container a {
     color: #cb8e1a;
     color: #ef9c00;
}
 .expandableContainer.warning .container a.button {
     color: #fff;
}
 .expandableContainer.warning .container table tr {
     border-bottom: 1px solid #ffe7d4;
}
 .expandableContainer.warning .container table tr.headerRow {
     background: #cb8e1a;
     background: #d7a447;
}
 .expandableContainer.warning.expanded .header {
     background: #cb8e1a;
     color: #fff;
}
 .expandableContainer.warning.expanded .header:hover,
 .expandableContainer.warning.expanded .header:focus {
     background: #a36d16;
}
 .expandableContainer.issue .header {
     background: #f7d0d0;
     color: #ba0000;
}
 .expandableContainer.issue .header:hover,
 .expandableContainer.issue .header:focus {
     background: #f2b5b5;
}
 .expandableContainer.issue .container {
     background: #f7d0d0 url("/images/alert-icon-issue.png") no-repeat 10px 10px;
     color: #ba0000;
}
 .expandableContainer.issue .container a {
     color: #880e0e;
}
 .expandableContainer.issue .container a.button {
     color: #fff;
}
 .expandableContainer.issue .container table tr {
     border-bottom: 1px solid #f7d0d0;
}
 .expandableContainer.issue .container table tr.headerRow {
     background: #ba0000;
     background: #de6363;
}
 .expandableContainer.issue.expanded .header {
     background: #ba0000;
     color: #f7d0d0;
}
 .expandableContainer.issue.expanded .header:hover,
 .expandableContainer.issue.expanded .header:focus {
     background: #900000;
}
 .expandableContainer.good .header {
     background: #e4f7d7;
     color: #359c1c;
}
 .expandableContainer.good .header:hover,
 .expandableContainer.good .header:focus {
     background: #c2eda6;
}
 .expandableContainer.good .container {
     background: #e4f7d7 url("/images/alert-icon-good.png") no-repeat 10px 10px;
     color: #359c1c;
}
 .expandableContainer.good .container a {
     color: #2c7b17;
}
 .expandableContainer.good .container a.button {
     color: #fff;
}
 .expandableContainer.good .container table tr {
     border-bottom: 1px solid #e4f7d7;
}
 .expandableContainer.good .container table tr.headerRow {
     background: #359c1c;
     background: #5cbb44;
}
 .expandableContainer.good .container .expandableContainer.question .container {
     background-color: #cbf0b2;
}
 .expandableContainer.good.expanded .header {
     background: #359c1c;
     color: #e4f7d7;
}
.expandableContainer.good.expanded .header:hover,
.expandableContainer.good.expanded .header:focus,{
    background: #2c8417;
}

.expandableContainer.info.hosterMessage .container {
    background-color: #f2f8f7;
    background-position: 10px;
    background-size: 40px;
    padding: 1em 1em 1em 60px;
}
.expandableContainer.info.hosterMessage .container p {
    margin: 0;
    color: #9fb2b2;
}
.expandableContainer.info.hosterMessage .container p a {
    color: #759a9e;
}
.expandableContainer.info.hosterMessage .container p a:hover {
    color: var(--input-color);
}
.expandableContainer.info.hoster .container {
    background-image: url("/images/alert-icon-hoster.png");
}
.expandableContainer.info.child .container {
    background-image: url("/images/alert-icon-child.png");
}
.expandableContainer.info.global .container {
    background-image: url("/images/alert-icon-hoster.png");
}
.expandableContainer.info.subsidiary .container {
    background-image: url("/images/alert-icon-child.png");
}

 .expandableContainer.ticketViewUnlocked .container {
     background-image: url("/images/alert-icon-ticket-view-eye.png");
}
 .expandableContainer.ticketViewUnlocked .container p,
 .expandableContainer.ticketViewUnlocked .container a {
     color: var(--text-color);
}
 .expandableContainer.ticketViewLocked .container {
     background-image: url("/images/alert-icon-ticket-view-locked.png");
}
 .expandableContainer.ticketEdit .container {
     background-image: url("/images/alert-icon-ticket-edit.png");
}
 .expandableContainer.ticketEditLockStolen .container {
     background-image: url("/images/alert-icon-ticket-edit-lock-stolen.png");
}
 .expandableContainer.ticketEditLockLost .container {
     background-image: url("/images/alert-icon-ticket-edit-lock-lost.png");
}
 .popupContent p a,
 .expandableContainer .container p a {
     text-decoration: none;
     font-weight: bold;
     color: #cb8e1a;
}
 .popupContent p a:hover,
 .expandableContainer .container p a:hover {
     text-decoration: underline;
}
 .popupContent p a.button,
 .expandableContainer .container p a.button {
     color: #fff;
}
 .popupContent p a.button:hover,
 .expandableContainer .container p a.button:hover {
     text-decoration: none;
}
 #ticket_description_display {
     overflow-x: auto;
}
 .expandableContainer.sideHeader {
     margin-bottom: 0;
}
 .expandableContainer.sideHeader .container {
     background-position: right center;
     background-color: transparent;
     padding: 1em 60px 1em 1em;
     margin-top: -1.25em;
}
 .expandableContainer.sideHeader .container p {
     margin: 0;
     text-align: right;
}
 .expandableContainer.alertList {
     margin-bottom: 1em;
}

.expandableContainer.containerOuter .container {
    padding: 1em 2em;
}

.expandableContainer.containerOuter .container .footerButtons {
    padding-top: 1em;
}

 .buttons {
     padding-bottom: 0.5em;
}
 .extensionButtons {
     padding-top: 1em;
}
 .footerButtons {
     padding-bottom: 1em;
}
 .footerButtons.paddingTop {
     padding-top: 1em;
     padding-bottom: 0em;
}
 .validatingPopupContainer {
     display: none;
}
 #ticketAssignmentMessage {
     margin-bottom: 1em;
}
 #ticketAssignmentMessage .container {
     padding-bottom: 1em;
}

.productIcon {
    width: 1em;
    height: 1em;
    text-align: center;
    padding-right: 0.25em;
    display: inline-block;
    position: relative;
    font-style: normal;
} 
.productIcon:before {
    position: relative;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    font-size: 0.9em;
    font-family: "Font Awesome 5 Free";
}
.productIcon.nextToInput:before {
    top: 8px;
}
.productIcon.nextToCheckbox:before {
    top: 3px;
}
.productIcon.petrolIcon:before {
    content : "\f043";
    color: #759a9e;
}
.productIcon.gasIcon:before {
    content : "\f06d";
    color: #cb8e1a;
}
.productIcon.condensateIcon:before {
    content : "\f043";
    color: #759a9e;
}
.productIcon.supplementIcon:before {
    content: "\f055";
    color: var(--text-question-light-color);
}
.productIcon.productIconMonoColor:before {
    color: var(--button-color);
}

.statusIcon {
    width: 1em;
    height: 1em;
    text-align: center;
    padding-right: 0.25em;
    display: inline-block;
    position: relative;
    font-style: normal;
}
.statusIcon.iconOnly {
    padding-right: 0;
}
.statusIcon:before {
    position: relative;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    font-size: 0.9em;
    content: "\f058";
    font-family: "Font Awesome 5 Free";
}
.statusIcon.ok:before {
  content: "\f058";
  color: #08a500;
}
.statusIcon.complete:before {
  content: "\f058";
  color: #08a500;
  color: #759a9e;
}
.statusIcon.completeWarning:before {
    content: "\f058";
    color: var(--link-color);
}
.statusIcon.warning:before {
    content: "\f071";
    color: var(--link-color);
}
.statusIcon.alert:before {
    content: "\f06a";
    color: var(--link-color);
}

.statusIcon.strongWarning:before {
  content: "\f071";
  color: #ba6900;
}
.statusIcon.issue:before {
  content: "\f057";
  color: #ba0000;
}
.statusIcon.test:before {
  content: "\f610";
  color: var(--text-color);
}
.statusIcon.trial:before {
  content: "\f610";
  color: #cb8e1a;
}
.statusIcon.new:before {
  content: "\f005";
  color: #009de0;
}
.statusIcon.delete:before {
  content: "\f057";
  color: #d00;
}
.statusIcon.inProgress:before {
  content: "\f110";
  color: var(--text-color);
}
.statusIcon.waiting:before {
  content: "\f2f2";
  color: var(--text-color);
}
.statusIcon.cancelled:before {
  content: "\f057";
  color: var(--text-color);
}
.statusIcon.delivered:before {
  content: "\f0e0";
  color: #cb8e1a;
}
.statusIcon.production:before {
  content: "\f233";
  color: var(--text-color);
}
.statusIcon.hoster:before {
  content: "\f64f";
  color: #759a9e;
}
.statusIcon.edit:before,
.statusIcon.draft:before {
  content: "\f044";
}
.statusIcon.back:before {
  content: "\f2ea";
  color: #08a500;
}
.statusIcon.star:before {
  content: "\f005";
  color: #cb8e1a;
}
.statusIcon.noStar:before {
  content: "\f005";
  color: #999999;
  opacity: 0.5;
}
.statusIcon.reload:before {
  content: "\f2ea";
}
.statusIcon.add:before {
    content: "\f055";
}
.statusIcon.addGreen:before {
    content: "\f055";
    color: #08a500;
}

.statusIcon.system:before {
    content: "\f233";
    color: var(--text-color);
}
.statusIcon.filter:before {
    content: "\f0b0";
}
.statusIcon.config:before {
    content: "\f013";
}
.statusIcon.systemConfig:before {
    content: "\f013";
    color: #74c0fc;
}
.statusIcon.maintenance:before {
    content: "\f0ad";
}
.statusIcon.help:before {
    content: "\f059";
}
.statusIcon.money:before {
    content: "\f51e";
    color: #8bae59;
}
.statusIcon.globe:before {
    content: "\f57d";
    color: #91a8ec;
}
.statusIcon.installation:before {
    content: "\f1ad";
    color: var(--text-color);
}
.statusIcon.note:before {
    content: "\f233";
    color: var(--text-color);
}
.statusIcon.statusIconMonoColor:before {
    color: var(--button-color);
}
.statusIcon.selected:before{
    content: "\f138";
    color: var(--text-good-color);
    color: var(--text-color);
    opacity: 0.5;
}
.statusIcon.unselected:before{
    content: "\f057";
    color: var(--text-question-light-color);
    opacity: 0.5;
    font-size: 0.75em;
    display: none;
}
.statusIcon.up:before {
    content: "\f35b";
    color: var(--icon-up-color);
}
.statusIcon.down:before {
    content: "\f358";
    color: var(--icon-down-color);
}
.statusIcon.grow:before {
    content: "\f31e";
    color: var(--icon-up-color);
}
.statusIcon.shrink:before {
    content: "\f78c";
    color: var(--icon-down-color);
}
.statusIcon.office:before {
    content: "\f1ad";
    color: var(--icon-up-color);
}
.statusIcon.home:before {
    content: "\f015";
    color: var(--icon-down-color);
}



.customerRating {
    font-size: 0.75em;
}

.customerRating .statusIcon {
    padding-right: 0;
    display: inline-block;
    top: -2px;
}

@media screen and (max-width: 960px) {
    body .multiCol span.statusIcon {
        width: auto !important;
    }
}

.templateButtons {
    padding-top: .5em;
}
#templateSelectorPopup {
    background: #e9f2f1;
    max-width: 800px;
    margin: 0 auto;
}
 #templateSelectorPopup .header {
     background: #759a9e;
     color: #ffffff;
     position: relative;
}
 #templateSelectorPopup .header h2 {
     padding: 0.75em 0.5em 0.5em 0.75em;
     font-size: 1.25em;
     margin: 0;
     box-sizing: border-box;
     line-height: 1em;
}

#templateSelectorPopup .header .closer {
    background: transparent;
    position: absolute;
    top: 0.55em;
    right: 0.55em;
    margin: 0;
    transition: background 0.25s;
    border: 2px solid transparent;
    width: 20px;
    height: 20px;
}

#templateSelectorPopup .header .closer:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    line-height: 20px;
    content: "\f00d";
    color: #e9f2f1;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 4px;
    top: 3px;
    text-align: center;
}
 #templateSelectorPopup .templatePanelContainer {
     width: 100%;
     height: 40rem;
     max-height: 100%;
     overflow: hidden;
     position: relative;
     box-sizing: border-box;
}

 #templateSelectorPopup .templatePanelContainer .templatePanel {
     position: absolute;
     width: 100%;
     height: 39rem;
     padding: 0.5em;
     box-sizing: border-box;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel h3 {
     margin: 0;
     padding: 0.5rem 0.5rem 0 0.5rem;
     font-size: 2em;
     left: 0;
     color: #436e70;
     height: 2.5rem;
     overflow-y: hidden;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .back {
     width: 100%;
     height: 3rem;
     overflow-x: hidden;
     position: relative;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .back a, 
 #templateSelectorPopup .templatePanelContainer .templatePanel .back p {
     width: 100%;
     height: 3rem;
     display: block;
     text-decoration: none;
     color: var(--text-color);
     font-size: 1em;
     line-height: 1em;
     padding: 1rem 0.5rem;
     margin: 0;
     box-sizing: border-box;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList {
     width: 100%;
     max-height: 32rem;
     overflow-y: auto;
     position: relative;
     padding: 0.5em;
     box-sizing: border-box;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow {
     width: 100%;
     height: 3rem;
     display: block;
     overflow: hidden;
     position: relative;
     background: #ffffff;
     margin-bottom: 0.25em;
     padding: 1em;
     font-size: 1em;
     line-height: 1rem;
     box-sizing: border-box;
     text-decoration: none;
     color: var(--text-color);
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow:hover, 
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow:focus {
     background: rgba(255,255,255,0.5);
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow .fileIcon {
     position: absolute;
     left: 0;
     top: 0;
     width: 2rem;
     height: 2rem;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow .fileIcon:before {
     position: absolute;
     top: 0.35rem;
     left: 0.75rem;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 1.5em;
     line-height: 1.5em;
     content: "\f07b";
     color: #cb8e1a;
     display: block;
     text-align: center;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow .fileIcon.fileIconFolder:before {
     content: "\f07b";
     color: #cb8e1a;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow .fileIcon.fileIconQuote:before {
     content: "\f075";
     color: #759a9e;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow .fileIcon.fileIconNotFound:before {
     content: "\f05a";
     color: #d3e0df;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow .fileName {
     padding-left: 1.75rem;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow .fileCaret {
     position: absolute;
     right: 0;
     top: 0;
     width: 2rem;
     height: 2rem;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .fileList a.fileRow .fileCaret:before {
     position: absolute;
     top: 0.35rem;
     right: 0.75rem;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 1.5em;
     line-height: 1.5em;
     content: "\f0da";
     color: #d0e2de;
     display: block;
     text-align: center;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .templatePreviewWrapper {
     width: 100%;
     overflow-y: auto;
     position: relative;
     padding: 0.5em;
     box-sizing: border-box;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .templatePreview {
     width: 100%;
     height: 27rem;
     max-height: 27rem;
     overflow-y: auto;
     background: #fff;
     color: var(--text-color);
     padding: 0.5em;
     box-sizing: border-box;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .templatePreview p {
     margin-top: 0;
}
 #templateSelectorPopup .templatePanelContainer .templatePanel .templateButtons {
     padding: 0.5rem;
}
 #ticket_description_display img {
     max-width: 100%;
     height: auto;
}
 #ticket_description_display hr {
     height: 1px;
     background: var(--hr-background);
}

 #pageUpdateMessage.popupMessage {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     z-index: 10;
     opacity: 0;
     margin-bottom: 0;
}
 #pageUpdateMessage.popupMessage > .container {
     max-width: 700px;
     margin: 0 auto;
     box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
     bottom: 0;
}

.portalPopup,
.modalPopup {
     position: fixed;
     display: none;
     z-index: 200;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(22,29,28,0.65);
     overflow-y: scroll;
}

.portalPopup.shown,
.modalPopup.shown {
    display: flex;
    align-items: center;
    align-content: center;
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: 0.25s;
}

.modalConfirm .expandableContainer.flexibleHeight .container .popupContent {
    max-height: 100%;
}

.modalConfirm .expandableContainer.flexibleHeight {
    max-height: 100vh;
    overflow: auto;
}


@keyframes fadeIn {
    0%   { opacity : 0 }
    100% { opacity : 1 }
}

.portalPopup.hiding,
.modalPopup.hiding {
    opacity: 0;
    animation-name: fadeOut;
    animation-duration: 0.25s;
}

@keyframes fadeOut {
    0%   { opacity : 1 }
    100% { opacity : 0 }
}
.portalPopup .inner,
.modalPopup .inner {
     margin-top: 0;
     padding:0;
     box-sizing: border-box;
     overflow-y: auto;
     max-height: 100%;
}
 .portalPopup .inner .popupWrapper,
 .modalPopup .inner .popupWrapper {
     background: #fff;
}
 .portalPopup .inner .popupWrapper > .header,
 .modalPopup .inner .popupWrapper > .header {
     background: #cb8e1a;
     background: #759a9e;
     color: #fff;
     position: relative;
     padding-left: 1em;
     transition: background 0.5s, color 0.5s;
}
 .portalPopup .inner .popupWrapper > .header h2,
 .modalPopup .inner .popupWrapper > .header h2 {
     padding: 0.5em 0;
     margin: 0;
}
 .portalPopup .inner .popupWrapper > .header .alertClose,
 .modalPopup .inner .popupWrapper > .header .alertClose {
     position: absolute;
     top: 1em;
     right: 1em;
     width: 25px;
     height: 25px;
     background-image: url("/images/navmenu-close-hover.png");
     background-size: 100%;
     transition: all 0.25s;
}
 .portalPopup .inner .popupWrapper > .header .alertClose:hover,
 .modalPopup .inner .popupWrapper > .header .alertClose:hover {
     background-color: #a36d16;
     cursor: pointer;
}
 .portalPopup .inner .popupWrapper > .container,
 .modalPopup .inner .popupWrapper > .container {
     height: 400px;
     height: auto;
     overflow: auto;
     padding: 0.5em 1.5em;
     box-sizing: border-box;
     transition: all 0.5s;

     color: var(--text-color);
}
 .portalPopup .inner .popupWrapper > .container > h2,
 .modalPopup .inner .popupWrapper > .container > h2 {
     font-weight: 600;
}
 .portalPopup .inner .popupWrapper > .container .expandableContainer,
 .modalPopup .inner .popupWrapper > .container .expandableContainer {
     margin-bottom: 1em;
}
 .portalPopup .inner .popupWrapper > .container .expandableContainer h2,
 .modalPopup .inner .popupWrapper > .container .expandableContainer h2 {
     font-size: 1.25em;
     padding: 0.5em 0;
}
 .portalPopup .inner .popupWrapper > .container .expandableContainer h3,
 .modalPopup .inner .popupWrapper > .container .expandableContainer h3 {
     padding-top: 0.15em;
     padding-bottom: 0.5em;
}
 .portalPopup .inner .popupWrapper > .container .expandableContainer table,
 .modalPopup .inner .popupWrapper > .container .expandableContainer table {
     margin: 1em 0;
}
 .portalPopup .inner .popupWrapper .footer,
 .modalPopup .inner .popupWrapper .footer {
     width: 100%;
     padding: 1em;
     background: #d3e0df;
     box-sizing: border-box;
     color: var(--text-color);
}
 .portalPopup .inner .popupWrapper .footer a.button,
 .modalPopup .inner .popupWrapper .footer a.button {
     margin-right: 1em;
}
 .portalPopup .inner .fullWidth,
 .modalPopup .inner .fullWidth {
     width: 100%;
     box-sizing: border-box;
}
 .portalPopup .inner span.error,
 .modalPopup .inner span.error {
     display: inline-block;
     padding: 0.5em 0 0 0;
     color: #dd0000;
     font-size: 0.9em;
}
 .portalPopup .inner label,
 .modalPopup .inner label {
     padding: 1em 0 0.5em 0;
     display: block;
}
 .portalPopup .inner button + label,
 .modalPopup .inner button + label {
     padding-top: 0;
}
 .portalPopup .inner span + p,
 .modalPopup .inner span + p {
     padding-top: 1em;
}
 #infoPopup,
 #dynamicInfoPopup,
 .modalPopup {
     z-index: 149;
}
 #validatingPopup {
     background: rgba(22,29,28,0.25);
}
 #submittingPopup {
     position: fixed;
     display: none;
     align-items: center;
     z-index: 150;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(22,29,28,0.65);
     overflow-y: scroll;
     color: #fff;
     text-align: center;
}

#submittingPopup.shown {
    display: flex;
    align-items: center;
    align-content: center;
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: 0.25s;
}

#submittingPopup.hiding {
    opacity: 0;
    animation-name: fadeOut;
    animation-duration: 0.25s;
}
 #submittingPopup .inner {
     padding: 0;
     max-height: 100%;
}
 #submittingPopup .inner > .container {
     padding: 0;
     overflow: auto;
     height: auto;
     box-sizing: border-box;
     background-image: url("/images/submit-icon-frame.png");
     background-position: center top;
     background-repeat: no-repeat;
     background-size: 100px 100px;
     position: relative;
}
 #submittingPopup .inner > .container .submittingDots {
     margin: 40px auto 45px auto;
     width: 80px;
     height: 20px;
     position: relative;
     line-height: 0.1em;
}
 #submittingPopup .inner > .container .submittingDots div {
     display: inline-block;
     width: 12px;
     height: 12px;
     margin: 0;
     overflow: hidden;
}
 #submittingPopup .inner > .container .submittingDots div div {
     width: 8px;
     height: 8px;
     margin: 2px;
     background-color: #cb8e1a;
     border-radius: 30%;
}
 #submittingPopup .inner > .container h2 {
     margin-top: 0;
}
 .portalPopup .inner > .container,
 .modalPopup .inner > .container {
     padding: 0;
     overflow: auto;
     height: auto;
}
 .portalPopup .inner > .container > .expandableContainer,
 .modalPopup .inner > .container > .expandableContainer {
     margin: 0;
}
 .portalPopup .inner > .container .footerButtons,
 .modalPopup .inner > .container .footerButtons {
     padding-top: 0.5em;
}
 .modalConfirm .expandableContainer .container {
     padding: 1.5em;
}
 .modalConfirm .expandableContainer .container .alertClose {
     background: transparent;
     position: absolute;
     top: 1.5em;
     right: 1.5em;
     margin: 0;
     transition: background 0.25s;
     border: 2px solid transparent;
     padding-left: 12px;
}
 .modalConfirm .expandableContainer .container .alertClose:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 20px;
     line-height: 20px;
     content: "\f00d";
     color: #759a9e;
     display: block;
     position: absolute;
     width: 20px;
     height: 20px;
     right: 4px;
     top: 3px;
     text-align: center;
}
 .modalConfirm .expandableContainer .container .alertClose:hover {
     background: rgba(0,0,0,0.15);
}
 .modalConfirm .expandableContainer .container .alertClose:focus {
     background: rgba(0,0,0,0.15);
     border: 2px solid rgba(0,0,0,0.5);
}
 .modalConfirm .expandableContainer .container:before, 
 .modalConfirm .expandableContainer .container:after {
     display: table;
     content: "";
}
 .modalConfirm .expandableContainer .container:after {
     clear: both;
}
 .modalConfirm .expandableContainer .container p {
     line-height: 1.5em;
}
 .modalConfirm .expandableContainer .container ul li,
 .modalConfirm .expandableContainer .container ol li {
     padding-bottom: 0.5em;
}
 .modalConfirm .expandableContainer .container .popupContent {
     max-height: 400px;
     overflow-y: auto;
     width: 100%;
}
 .modalConfirm .expandableContainer .container .popupContent p:first-child {
     margin-top: 0;
}
 .modalConfirm .expandableContainer.issue .container, 
 .modalConfirm .expandableContainer.warning .container, 
 .modalConfirm .expandableContainer.info .container, 
 .modalConfirm .expandableContainer.good .container {
     background-image: none;
}
 .modalConfirm .expandableContainer.issue .container .alertClose:before {
     color: #e09595;
}
 .modalConfirm .expandableContainer.issue .container button.buttonCancel {
     background: #b18a8a;
}
 .modalConfirm .expandableContainer.warning .container .alertClose:before {
     color: #d9b170;
}
 .modalConfirm .expandableContainer.warning .container button.buttonCancel {
     background: #ad9775;
}
 .modalConfirm .expandableContainer.good .container .alertClose:before {
     color: #91cd82;
}
 .modalConfirm .expandableContainer.good .container button.buttonCancel {
     background: #6c9163;
}
 .modalPopupButtons {
     float: right;
     padding-top: 1em;
     text-align: right;
}
 .modalPopupButtons button {
     margin: 0 0 0 0.5em;
     padding: 11px 20px;
     border: 2px solid transparent;
}
 .modalPopupButtons button.buttonCancel {
     background-color: #759a9e;
}
 .modalPopupButtons button.buttonCancel:hover, 
 .modalPopupButtons button.buttonCancel:focus {
     background-color: #547b78;
}
 .modalPopupButtons button:focus {
     border: 2px solid rgba(0,0,0,0.5);
}
 .helpBox {
     position: absolute;
     display: none;
     z-index: 5;
     top: 175px;
     left: 330px;
     width: 100%;
     max-width: 400px;
     min-height: 130px;
     max-height: 255px;
     background: #fff url("/images/portal-help-icon.png") no-repeat 0.75em 0.75em;
     border: 1px solid #436e70;
     padding-top: 0.75em;
     box-shadow: 0px 3px 7px #759a9e;
}
 .helpBox .helpTitle, 
 .helpBox .helpContent {
     margin-left: 130px;
     color: var(--text-color);
}
 .helpBox .helpTitle {
     font-weight: 600;
     height: 55px;
     overflow: hidden;
     margin-right: 45px;
}
 .helpBox .helpTitle small {
     color: #cb8e1a;
}
 .helpBox .helpTitle small.optional {
     color: #a7b5b6;
}
 .helpBox .helpContent {
     font-size: 0.9em;
     padding-bottom: 1em;
     max-height: 185px;
     overflow-y: auto;
     padding-right: 1em;
}
 .helpBox .helpContent ul {
     padding-left: 1.25em;
}
 .helpBox .helpClose {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 20px;
     height: 20px;
     background: url("/images/help-close.png");
}
 .helpBox .helpClose:hover {
     cursor: pointer;
     background: url("/images/help-close-hover.png");
}
.tox-tinymce .tox-promotion,
 .mce-tinymce .mce-branding {
     display: none;
}
.tox-statusbar__branding { visibility: hidden; }

 .mce-tinymce.mce-container.mce-panel.error {
     border: 1px solid var(--error-color);
}

/* Flex Cols: START */

.formCols {
    display : flex;
    margin: 1.25em 0;
    align-items: center;
    width: 100%;
}

.formCols + .formCols.tight {
    margin-top: -1em;
}

.formCols.inTable {
    margin: 0;
}

.formCols .formCols {
    margin: 0;
}

.formCols > * {
    box-sizing: border-box;
}

.formCols > *:first-child {
    width: 160px;
    padding-right: 1em;
}

.formCols > *:last-child {
    width: calc(100% - 160px);
    overflow-x: hidden;
}

.formCols.thin > *:first-child {
    width: 130px;
}

.formCols.thin > *:last-child {
    width: calc(100% - 130px);
}

.formCols.double > *:nth-child(2n+1) {
    width: 160px;
}

.formCols.double > *:nth-child(2n+2) {
    width: calc(50% - 160px);
}

.formCols.double > *:nth-child(4n+3) {
    padding-left: 1em;
}

.formCols > label,
.modalPopup .inner .formCols > label {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.9em;
}


.formCols > span > label.checkbox,
.formCols > span > label.radio {
    display: inline-block;
    padding-right: 1em;
    padding: 0 1em 0 0;
}

.formCols select {
    margin-bottom: 0 !important;
}

.formCols.hideDesktop {
    display: none;
}

.formCols.hideMobile {
    display: flex;
}


@media screen and (max-width: 600px) {

    .formCols > *:first-child {
        width: 130px;
    }

    .formCols > *:last-child {
        width: calc(100% - 130px);
    }

    .formCols.double {
        flex-wrap: wrap;
    }

    .formCols.double > *:nth-child(2n+1) {
        width: 130px;
    }

    .formCols.double > *:nth-child(2n+2) {
        width: calc(100% - 130px);
    }

    .formCols.double > *:nth-child(4n+3) {
        width: 130px;
        padding-left: 0;
        margin-top: 1.25em;
    }

    .formCols.double > *:nth-child(4n+4) {
        width: calc(100% - 130px);
        margin-top: 1.25em;
    }

    .formCols.hideDesktop {
        display: flex;
    }

    .formCols.hideMobile {
        display: none;
    }

    .formCols.inTable {
        display: block;
    }

    .formCols.inTable > * {
        width: 100%;
    }

}



/* Flex Cols: END */


/* Panels: START */


.panel {
    border-radius: 1em;
    box-sizing: border-box;
    padding: 2em;
    background-color: var(--panel-background);
    color: var(--text-color);
    margin: 0 0 2em 0;
    position: relative;
/*
    box-shadow: 0 1px 4px rgba(0,0,0,0.125);
*/
}

.panel + .panel {
    margin-top: 2em;
}

.panel > *:first-child {
    margin-top: 0;
}

.panel > *:last-child {
    margin-bottom: 0;
}

.panel .panel {
    border-radius: 0.75em;
}

.lightPanel {
    background: var(--panel-background-light);
}

.iconPanel {
    background-repeat: no-repeat;
    background-position: 2em 2em;
    background-position: calc(100% - 2em) 2em;
    background-size: var(--panel-icon-small-size);
    padding-right: calc(var(--panel-icon-small-size) + 2em + 2em);
    background-image: url(/images/icon-info.svg);
}

.iconPanel.widePanel {
    background-position: calc(100% - 2em) 1.5em;
    padding-right: 2em;
}

.infoPanel {
    background-color: var(--panel-info-background);
    color: var(--text-info-color);
}

.iconPanel.infoPanel {
    background-image: url(/images/icon-info.svg);
}

.warningPanel {
    background-color: var(--panel-warning-background);
    color: var(--text-warning-color);
}

.iconPanel.warningPanel {
    background-image: url(/images/icon-warning.svg);
}

.goodPanel {
    background-color: var(--panel-good-background);
    color: var(--text-good-color);
}

.iconPanel.goodPanel {
    background-image: url(/images/icon-good.svg);
}

.clockPanel {
    background-color: var(--panel-info-background);
    color: var(--text-info-color);
}

.iconPanel.clockPanel {
    background-image: url(/images/icon-clock.svg);
}

.errorPanel {
    background-color: var(--panel-error-background);
    color: var(--text-error-color);
}

.iconPanel.errorPanel {
    background-image: url(/images/icon-error.svg);
}

.iconPanel.pdfPanel {
    background-image: url(/images/icon-pdf.svg);
}




.questionPanel {
    background: var(--panel-question-background);
    color: var(--text-question-color);
}

.goodPanel a {
     color: var(--link-good-color);
}

.panel h2,
.panel h3,
.panel h4 {
    font-weight: 400;
    font-family: 'Noa', Helvetica, Verdana, Sans-Serif;
}

.panel h2 {
    font-size: 2.2em;
    padding: 0;
    margin-bottom: 0.5em;
    line-height: 1em;
}

.panel h3 {
    font-size: 1.7em;
    padding: 0;
    margin-bottom: 1em;
    line-height: 1em;
}

.panel h4 {
    font-size: 1.4em;
    padding: 0;
    margin-bottom: 0.5em;
    line-height: 1em;
    margin-top: 1em;
}

.panel p {
    margin: 1rem 0 1rem 0;
}

.panel p + div {
    margin-top: 1.5rem;
}




.panel .panel h2 {
    font-size: 1.75em;
    margin-bottom: 0.75em;
}

.panel ul {
    padding: 0;
    margin: 0 0 0 1em;
}

.panel li {
    line-height: 1.6em;
    margin-bottom: 0.5em;
}

.panel table {
    margin: 2em 0;
}

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

.panel .buttons {
    margin-top: 2em;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    justify-content: space-between;
    align-items: flex-end;
}

.panel .buttons.footerButtons {
    justify-content: flex-end;
}

.panel .buttons button {
    position: relative;
    font-weight: 500;
}

.panel .buttons.footerButtons button {
    margin-left: 2em;
}

.panel .buttons.footerButtons button:first-child {
    margin-left: 0;
}

.panel .buttons button.backButton {
    padding-left: 2em;
}

.panel .buttons button.backButton:before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f0d9";
    font-size: 1em;
    line-height: 1em;
    top: 1em;
    left: 1em;
    color: var(--button-color);
    transition: left 0.25s;
}

.panel .buttons button.backButton:hover:before {
    left: 0.85em;
}

.panel .buttons button.nextButton {
    padding-right: 2em;
}

.panel .buttons button.nextButton:before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-size: 1em;
    top: 1em;
    right: 1em;
    color: var(--button-color);
    transition: right 0.25s;
}

.panel .buttons button.nextButton:hover:before {
    right: 0.85em;
}

.panel .panelIconLink {
    position: absolute;
    width: var(--panel-icon-small-size);
    height: var(--panel-icon-small-size);
    top: 2em;
    right: 2em;
    background: transparent;
    border-radius: 0.25em;
    transition: background 0.25s;
}

.panel .panelIconLink:hover {
    background: var(--panel-icon-link-hover);
}

@media screen and (max-width: 580px) {
    .panel {
        padding: 1.75em;
    }

    .iconPanel {
        padding-right: 1.75em;
    }

    .iconPanel > *:first-child {
        padding-right: calc(var(--panel-icon-small-size) + 2rem);
    }
}


.cols {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.cols.mainAndAside > div:nth-child(2n+1) {
    width: calc(100% - 20em - 2em);
    margin-right: 2em;
}

.cols.mainAndAside > div:nth-child(2n+2) {
    width: 20em;
}

@media screen and (max-width: 960px) {
    .cols.mainAndAside {
        flex-direction: column;
    }

    .cols.mainAndAside > div:nth-child(2n+1) {
        width: calc(100%);
        margin-right: 0;
    }

    .cols.mainAndAside > div:nth-child(2n+2) {
        width: 100%;
    }

}

.cols.two > div:nth-child(2n+1) {
    width: calc(50% - 2%);
    margin-right: 2%;
}

.cols.two > div:nth-child(2n+2) {
    width: 50%;
}


/* Panels: END */

 .multiCol:before, .multiCol:after {
     display: table;
     content: " ";
}
 .multiCol:after {
     clear: both;
}
 .multiCol {
     padding-bottom: 0.5em;
}
 .multiCol > div:before, 
 .multiCol > div:after {
     display: table;
     content: " ";
}
 .multiCol > div:after {
     clear: both;
}
 .multiCol > div {
     float: left;
}
 .multiCol h3 {
     margin-top: 0;
}
 .multiCol label {
     width: 35%;
     margin: 0;
     padding: 0.4em 0.5em 0.4em 0;
     color: var(--text-color);
     font-size: 0.9em;
     display: block;
     float: left;
     box-sizing: border-box;
}
 .multiCol input, 
 .multiCol select, 
 .multiCol textarea, 
 .multiCol label + .mce-tinymce.mce-container.mce-panel {
     width: 65%;
     display: inline-block;
     margin: 0;
     margin-bottom: 1em;
     box-sizing: border-box;
     display: block;
     float: left;
     line-height: 20px;
}
 .multiCol input.hasErrorMessage.error, 
 .multiCol select.hasErrorMessage.error, 
 .multiCol textarea.hasErrorMessage.error, 
 .multiCol label + .mce-tinymce.mce-container.mce-panel.hasErrorMessage.error {
     margin-bottom: 0;
     transition: margin 0s;
}

.multiCol select.agreementProductSelect {
    width: 25%;
}
.multiCol select.agreementUsageSelect {
    width: 40%;
}

.multiCol select.agreementUsageSelectFull {
    width: 65%;
}

.multiCol .productAddons label {
    padding-top: 0;
    width: auto;
}

.twoCol .multiCol .productAddons label {
    width: auto;
    margin-right: 1em;
}

 .multiCol span.fieldErrorMessage {
     float: right;
     font-size: 0.85em;
     color: #d00;
     display: none;
}

 .multiCol label.fullWidth + span.fieldErrorMessage,
 .multiCol span.fullWidth + span.fieldErrorMessage,
 .multiCol select.fullWidth + span.fieldErrorMessage,
 .multiCol input.fullWidth + span.fieldErrorMessage {
    float: none;
 }

 .multiCol span.fieldErrorMessage.shown {
     display: block;
}
 .multiCol.sortByCol select {
     margin-bottom: 0;
}
 .multiCol label + .mce-tinymce.mce-container.mce-panel {
     width: 65% !important;
}
 .multiCol > div > span {
     vertical-align: top;
     display: inline-block;
     width: 65%;
     display: block;
     float: left;
     padding: 0.35em 0 0 0;
     margin-bottom: 1em;
}
 .multiCol > div > span.radio, 
 .multiCol > div > span.checkbox {
     margin-bottom: 0;
}
 .multiCol > div > span.fakeList, 
 .multiCol > div > button.fakeList {
     background: #fff;
     background-image: url("/images/select-arrow-tall.png");
     background-position: center right;
     background-repeat: no-repeat;
     text-indent: 1px;
     text-overflow: '';
     transition: all 0.25s;

     box-sizing: border-box;
     border: 1px solid #d3e0df;
     padding: 0.5em;
     padding-right: 35px;
     color: var(--input-color);
     font-family: 'Open sans', Helvetica, Verdana, Sans-Serif;
     font-size: 0.9em;
     border-radius: 0;
     position: relative;
     display: block;
     width: 100%;
     text-align: left;
}
 .multiCol > div > span.fakeList:hover, 
 .multiCol > div > button.fakeList:hover, 
 .multiCol > div > button.fakeList:focus {
     background-image: url("/images/select-arrow-tall-active.png");
}
 .multiCol > div > span.fakeList .fakeListDisplayValue, 
 .multiCol > div > button.fakeList .fakeListDisplayValue {
     width: 100%;
     white-space: nowrap;
     display: block;
     overflow-x: hidden;
}
 .multiCol div > span.fakeList .fakeListDisplayValue:hover, 
 .multiCol div > button.fakeList .fakeListDisplayValue:hover {
     cursor: default;
}
 .multiCol input.multiLineLabel {
     vertical-align: top;
}
 .multiCol input[type="checkbox"] {
     width: 20px;
     display: inline-block;
     float: none;
}
 .multiCol input[type="radio"] {
     width: auto;
     display: inline-block;
     float: none;
}
 .multiCol table span {
     width: auto;
     display: auto;
     float: none;
}
 .multiCol span.checkbox {
     padding-top: 0.25em;
     padding-bottom: 0.25em;
}
 .multiCol span.checkbox.answer {
     padding-bottom: 0;
}
 .multiCol span.radio span {
     padding: 0 1em 0.5em 0;
}
 .multiCol label.fullWidth {
     width: 100%;
     padding-bottom: 0.25em;
}
 .multiCol label.autoWidth {
     width: auto;
     padding-bottom: 0.25em;
}
 .multiCol input.fullWidth, 
 .multiCol select.fullWidth, 
 .multiCol textarea.fullWidth, 
 .multiCol span.fullWidth, 
 .multiCol label.fullWidth + .mce-tinymce.mce-container.mce-panel {
     width: 100%;
}
 .multiCol input[type="checkbox"].fullWidth {
     width: auto;
}
 .multiCol span.fullWidth {
     width: 100%;
}
 .multiCol input.halfWidth, 
 .multiCol select.halfWidth, 
 .multiCol textarea.halfWidth, 
 .multiCol span.halfWidth, 
 .multiCol label.halfWidth + .mce-tinymce.mce-container.mce-panel, 
 .multiCol span.halfWidth {
     width: 50%;
}
 .multiCol span.radio span {
     color: var(--text-color);
}
 .multiCol span.radio span:hover {
     color: #3c4849;
}
 .multiCol span.radio span.selected {
     color: #3c4849;
}
 .multiCol span.checkbox {
     color: var(--text-color);
}
 .multiCol span.checkbox label {
     width: auto;
     padding-right: 1em;
}
 .multiCol label.radio:hover, 
 .multiCol span.radio:hover, 
 .multiCol label.checkbox:hover, 
 .multiCol span.checkbox:hover {
     color: #3c4849;
}
 .multiCol label.radio.selected, 
 .multiCol span.radio.selected, 
 .multiCol label.checkbox.selected, 
 .multiCol span.checkbox.selected {
     color: #3c4849;
     font-weight: 600;
}
 .multiCol label.radio.disabled input[type="radio"], 
 .multiCol span.radio.disabled input[type="radio"], 
 .multiCol label.checkbox.disabled input[type="checkbox"], 
 .multiCol span.checkbox.disabled input[type="checkbox"] {
     opacity: 0.5;
}
 .multiCol label.checkbox.multiLine {
     line-height: 1.5em;
     padding: 0 0 1em 1.5em;
     position: relative;
}
 .multiCol label.checkbox.multiLine input[type="checkbox"] {
     margin: 0;
     position: absolute;
     top: 0.25em;
     left: 0;
}
 .multiCol .checkBoxList span {
     width: 100%;
     display: block;
}
 .multiCol .checkBoxList a {
     width: 100%;
     display: block;
}
 .multiCol span.inline {
     width: auto;
     padding-right: 1em;
}
 .multiCol span.readOnlyTextArea {
     background: rgba(117,154,158,0.14);
     padding: 0 1em;
     box-sizing: border-box;
}
 .gridCol {
     padding-top: 0.5em;
     padding: 0;
}
 .gridCol > a {
     margin-bottom: 2%;
     padding: 1.25em;
     box-sizing: border-box;
     background-color: #e9f2f1;
     background-position: bottom right;
     background-repeat: no-repeat;
     width: 23.5%;
     margin-right: 2%;
     height: 280px;
     display: block;
     float: left;
     position: relative;
     transition: background 0.25s, color 0.25s, margin 0.25s, padding 0.25s, width 0.25s, height 0.25s, font-size 0.25s;
     font-weight: normal;
     background-size: 121px 161px;
}
 .gridCol > a h3 {
     margin: 0;
     padding: 0;
     color: var(--text-color);
     font-size: 1.5em;
     transition: background 0.25s, color 0.25s, margin 0.25s, padding 0.25s, width 0.25s, height 0.25s, font-size 0.25s;
}
 .gridCol > a .gridInfo {
     position: absolute;
     box-sizing: border-box;
     bottom: 0;
     left: 0;
     padding: 0 120px 1.25em 1.25em;
     transition: background 0.25s, color 0.25s, margin 0.25s, padding 0.25s, width 0.25s, height 0.25s, font-size 0.25s;
}
 .gridCol > a .gridInfo p {
     margin: 0;
     font-size: 0.9em;
     color: var(--text-color);
     transition: background 0.25s, color 0.25s, margin 0.25s, padding 0.25s, width 0.25s, height 0.25s, font-size 0.25s;
}
 .gridCol > a .gridInfo p.gridBigNumber {
     font-size: 6em;
     font-weight: bold;
     line-height: 1em;
}
 .gridCol > a .gridInfo p.subText {
     padding-top: 0.4em;
}
 .gridCol > a:hover, 
 .gridCol > a:focus {
     text-decoration: none;
     background-color: #d3e0df;
}
 .gridCol > a:nth-child(4n) {
     margin-right: 0;
}
 .gridCol > a.gridIssue h3, 
 .gridCol > a.gridIssue .gridInfo p,
  .gridCol > a.gridWarning h3, 
  .gridCol > a.gridWarning .gridInfo p, 
  .gridCol > a.gridInfo h3, 
  .gridCol > a.gridInfo .gridInfo p {
     color: #fff;
}
 .gridCol > a.gridIssue {
     background-color: #ba0000;
}
 .gridCol > a.gridIssue:hover, 
 .gridCol > a.gridIssue:focus {
     background-color: #900000;
}
 .gridCol > a.gridWarning {
     background-color: #cb8e1a;
}
 .gridCol > a.gridWarning:hover, 
 .gridCol > a.gridWarning:focus {
     background-color: #a36d16;
}
 .gridCol > a.gridGood {
     background-color: var(--grid-good-background);
}
 .gridCol > a.gridGood:hover, 
 .gridCol > a.gridGood:focus {
     background-color: var(--grid-good-hover-background);
}

 .gridCol > a.gridInfo {
     background-color: #759a9e;
}
 .gridCol > a.gridInfo:hover, 
 .gridCol > a.gridInfo:focus {
     background-color: #436e70;
}
 .gridCol > a.gridAlert {
     background-image: url("/images/grid-icon-alert.png");
}
 .gridCol > a.gridAlertNone {
     background-image: url("/images/grid-icon-alert-none.png");
}
 .gridCol > a.gridMessage {
     background-image: url("/images/grid-icon-message.png");
}
 .gridCol > a.gridPerson {
     background-image: url("/images/grid-icon-person.png");
}
 .gridCol > a.gridHelp {
     background-image: url("/images/grid-icon-help.png");
}
 .gridCol > a.gridSettings {
     background-image: url("/images/grid-icon-settings.png");
}
 .gridCol > a.gridDownload {
     background-image: url("/images/grid-icon-download.png");
}
 .gridCol > a.gridSearch {
     background-image: url("/images/grid-icon-magglass.png");
}
 .gridCol > a.gridPhone {
     background-image: url("/images/grid-icon-phone.png");
}
 .gridCol > a.gridCRM {
     background-image: url("/images/grid-icon-crm.png");
}
 .gridCol > a.gridTicket {
     background-image: url("/images/grid-icon-ticket.png");
}
 .gridCol > a.gridServers {
     background-image: url("/images/grid-icon-servers.png");
}
 .gridCol > a.gridOffice {
     background-image: url("/images/grid-icon-office.png");
}
 .gridCol > a.gridContract {
     background-image: url("/images/grid-icon-contract.png");
}
 .gridCol > a.gridMoney {
     background-image: url("/images/grid-icon-money.png");
}
 .gridCol > a.gridPeople {
     background-image: url("/images/grid-icon-people.png");
}
 .gridCol > a.gridMoneyAlert {
     background-image: url("/images/grid-icon-money-white.png");
}
 .gridCol.fiveCol > a {
     width: 19%;
     height: 235px;
     margin-bottom: 1.25%;
     font-size: .85em;
     background-size: 103px 137px;
}
 .gridCol.fiveCol > a h3 {
     font-size: 1.5em;
}
 .gridCol.fiveCol > a .gridInfo {
     padding: 0 102px 1.125em 1.125em;
}
 .gridCol.fiveCol > a .gridInfo p {
     font-size: 0.9em;
}
 .gridCol.fiveCol > a .gridInfo p.gridBigNumber {
     font-size: 5em;
}
 .gridCol.fiveCol > a:nth-child(1n) {
     margin-right: 1.25%;
}
 .gridCol.fiveCol > a:nth-child(5n) {
     margin-right: 0;
}
 .gridCol.sixCol {
     padding-bottom: 0;
}
 .gridCol.sixCol > a {
     width: 16%;
     height: 200px;
     margin-bottom: .8%;
     font-size: .8em;
     background-size: 90px 119.8px;
}
 .gridCol.sixCol > a h3 {
     font-size: 1.3em;
}
 .gridCol.sixCol > a .gridInfo {
     padding: 0 94px 1em 1em;
}
 .gridCol.sixCol > a .gridInfo p {
     font-size: 0.8em;
}
 .gridCol.sixCol > a .gridInfo p.gridBigNumber {
     font-size: 4em;
}
 .gridCol.sixCol > a:nth-child(1n) {
     margin-right: 0.8%;
}
 .gridCol.sixCol > a:nth-child(6n) {
     margin-right: 0;
}
 .oneCol > div {
     padding-bottom: 1em;
     padding-bottom: 0;
     float: none;
}
 .oneCol label {
     width: 16.8%;
}
 .oneCol input, 
 .oneCol select, 
 .oneCol textarea, 
 .oneCol > div > span, 
 .oneCol label + .mce-tinymce.mce-container.mce-panel {
     width: 83.2%;
}
 .oneCol label + .mce-tinymce.mce-container.mce-panel {
     width: 83.2% !important;
}
 .oneCol input.fullWidth, 
 .oneCol select.fullWidth, 
 .oneCol textarea.fullWidth, 
 .oneCol span.fullWidth, 
 .oneCol label.fullWidth + .mce-tinymce.mce-container.mce-panel {
     width: 100% !important;
}
 .oneCol input.halfWidth,
 .oneCol select.halfWidth, 
 .oneCol textarea.halfWidth, 
 .oneCol span.halfWidth, 
 .oneCol label.halfWidth + .mce-tinymce.mce-container.mce-panel, 
 .oneCol span.halfWidth {
     width: 50%;
}
 .oneCol span p:first-child {
     margin-top: 0;
}
 .oneCol span.inline {
     width: auto;
     padding-right: 1em;
}
 .oneCol.statusCol label {
     width: 42%;
     width: 140px;
}

 .oneCol.statusCol.thinLabel label {
     width: 120px;
}

@media screen and (max-width: 480px) {
    .oneCol.statusCol label {
        padding-top: 0;
    }

    .twoCol .oneCol.statusCol > div,
    .oneCol.statusCol > div {
        padding-bottom: 1em;
    }


}

 .oneCol.statusCol label.fullWidth {
     width: 100%;
}

 .oneCol.statusCol input, 
 .oneCol.statusCol select, 
 .oneCol.statusCol textarea, 
 .oneCol.statusCol > div > span, 
 .oneCol.statusCol label + .mce-tinymce.mce-container.mce-panel {
     width: 58%;
     width: calc(100% - 140px);
}

 .oneCol.statusCol.thinLabel input, 
 .oneCol.statusCol.thinLabel select, 
 .oneCol.statusCol.thinLabel textarea, 
 .oneCol.statusCol.thinLabel > div > span, 
 .oneCol.statusCol.thinLabel label + .mce-tinymce.mce-container.mce-panel {
     width: 58%;
     width: calc(100% - 120px);
}

 .oneCol.invoiceSummaryCol label {
     width: 32%;
}
 .oneCol.invoiceSummaryCol label.fullWidth {
     width: 100%;
}

 .oneCol.invoiceSummaryCol input, 
 .oneCol.invoiceSummaryCol select, 
 .oneCol.invoiceSummaryCol textarea, 
 .oneCol.invoiceSummaryCol > div > span, 
 .oneCol.invoiceSummaryCol label + .mce-tinymce.mce-container.mce-panel {
     width: 68%;
}

 .oneCol.invoiceSummaryCol input.numberWithRevision {
    width: calc(68% - 90px);
    margin-left: 0;
    margin-right: 0;
 } 

 .oneCol.invoiceSummaryCol label.revisionLabel {
    width: 40px;
    text-align: right;
 }

 .oneCol.invoiceSummaryCol input.revision {
    width: 50px;
    margin-left: 0;
    margin-right: 0;
 } 

 .oneCol.sortByCol {
     padding-bottom: 0;
}
 .oneCol.sortByCol > div {
     padding-bottom: 0;
}
 .oneCol.timingsCol select {
     margin-bottom: 0.25em;
}
 .twoCol .oneCol > div {
     padding-bottom: 1em;
     padding-bottom: 0;
     float: none;
}
 .twoCol .oneCol label {
     width: 35%;
}
 .twoCol .oneCol input,
 .twoCol .oneCol select,
 .twoCol .oneCol textarea,
 .twoCol .oneCol > div > span,
 .twoCol .oneCol label + .mce-tinymce.mce-container.mce-panel {
     width: 65%;
}
 .twoCol .oneCol > div > span {
     min-height: 1em;
}
 .twoCol .oneCol label + .mce-tinymce.mce-container.mce-panel {
     width: 65% !important;
}
 .twoCol .oneCol input.fullWidth,
 .twoCol .oneCol select.fullWidth,
 .twoCol .oneCol textarea.fullWidth,
 .twoCol .oneCol span.fullWidth,
 .twoCol .oneCol label.fullWidth,
 .twoCol .oneCol label.fullWidth + .mce-tinymce.mce-container.mce-panel {
     width: 100% !important;
}
 .twoCol .oneCol input.halfWidth,
 .twoCol .oneCol select.halfWidth,
 .twoCol .oneCol textarea.halfWidth,
 .twoCol .oneCol span.halfWidth,
 .twoCol .oneCol label.halfWidth + .mce-tinymce.mce-container.mce-panel,
 .twoCol .oneCol span.halfWidth {
     width: 50%;
}
 .twoCol .oneCol input[type="checkbox"] {
     width: auto;
}

 .twoCol .oneCol.statusCol > div > label {
     width: 140px;
}
 .twoCol .oneCol.statusCol > div > input,
 .twoCol .oneCol.statusCol > div > select,
 .twoCol .oneCol.statusCol > div > textarea,
 .twoCol .oneCol.statusCol > div > span,
 .twoCol .oneCol.statusCol > div label + .mce-tinymce.mce-container.mce-panel {
     width: calc(100% - 140px);
}
 .twoCol .oneCol.statusCol > div > label + .mce-tinymce.mce-container.mce-panel {
     width: calc(100% - 140px) !important;
}



 .twoCol.invoiceSummaryCol input.numberWithRevision {
    width: calc(65% - 90px);
    margin-left: 0;
    margin-right: 0;
 } 

 .twoCol.invoiceSummaryCol label.revisionLabel {
    width: 40px;
    text-align: right;
 }

 .twoCol.invoiceSummaryCol input.revision {
    width: 50px;
    margin-left: 0;
    margin-right: 0;
 } 



 .twoCol > div {
     width: 48%;
     margin-right: 4%;
}
 .twoCol > div:nth-child(2n+2) {
     margin-right: 0;
}
 .twoCol > div:nth-child(2n+1) {
     clear: both;
     padding-bottom: 1em;
     padding-bottom: 0;
}
 .threeCol {
     padding-bottom: 1em;
}
 .threeCol > div {
     width: 31%;
     margin-right: 3.5%;
}
 .threeCol > div:nth-child(3n+3) {
     margin-right: 0;
}
 .threeCol > div:nth-child(3n+1) {
     clear: both;
     padding-bottom: 1em;
     padding-bottom: 0;
}

 .fourCol {
     padding-bottom: 1em;
}
 .fourCol > div {
     width: 23.5%;
     margin-right: 2%;
}
 .fourCol > div:nth-child(4n+4) {
     margin-right: 0;
}
 .fourCol > div:nth-child(4n+1) {
     clear: both;
     padding-bottom: 1em;
     padding-bottom: 0;
}

 .sixCol {
     padding-bottom: 1em;
}
 .sixCol > div {
     width: 15%;
     margin-right: 2%;
}
 .sixCol > div:nth-child(6n+6) {
     margin-right: 0;
}
 .sixCol > div:nth-child(6n+1) {
     clear: both;
     padding-bottom: 1em;
     padding-bottom: 0;
}
 .sevenCol {
     padding-bottom: 1em;
}
 .sevenCol > div {
     width: 13%;
     margin-right: 1.5%;
}
 .sevenCol > div:nth-child(7n+7) {
     margin-right: 0;
}
 .sevenCol > div:nth-child(7n+1) {
     clear: both;
     padding-bottom: 1em;
     padding-bottom: 0;
}
 .twoThirdCol > div {
     width: 65.5%;
     margin-right: 3.5%;
}
 .twoThirdCol > div.oneCol label.checkbox {
     padding-left: 1.25em;
     position: relative;
     padding-top: 0.2em;
}
 .twoThirdCol > div.oneCol label.checkbox input[type="checkbox"] {
     position: absolute;
     top: 0.5em;
     left: 0;
}
 .twoThirdCol > div:nth-child(2n+1) {
     clear: both;
     padding-bottom: 1em;
     padding-bottom: 0;
}
 .twoThirdCol > div:nth-child(2n+1).oneCol > div > label {
     width: 25.5%;
}
 .twoThirdCol > div:nth-child(2n+1).oneCol > div > input,
 .twoThirdCol > div:nth-child(2n+1).oneCol > div > select,
 .twoThirdCol > div:nth-child(2n+1).oneCol > div > textarea,
 .twoThirdCol > div:nth-child(2n+1).oneCol > div > span,
 .twoThirdCol > div:nth-child(2n+1).oneCol > div > label + .mce-tinymce.mce-container.mce-panel {
     width: 74.5%;
}
 .twoThirdCol > div:nth-child(2n+1).oneCol > div label + .mce-tinymce.mce-container.mce-panel {
     width: 74.5% !important;
}
 .twoThirdCol > div:nth-child(2n+2) {
     width: 31%;
     margin-right: 0;
}
 .twoThirdCol > div:nth-child(2n+2).oneCol > div > label {
     width: 35%;
}
 .twoThirdCol > div:nth-child(2n+2).oneCol > div > input,
 .twoThirdCol > div:nth-child(2n+2).oneCol > div > select,
 .twoThirdCol > div:nth-child(2n+2).oneCol > div > textarea,
 .twoThirdCol > div:nth-child(2n+2).oneCol > div > span,
 .twoThirdCol > div:nth-child(2n+2).oneCol > div label + .mce-tinymce.mce-container.mce-panel {
     width: 65%;
}
 .twoThirdCol > div:nth-child(2n+2).oneCol > div > label + .mce-tinymce.mce-container.mce-panel {
     width: 65% !important;
}
 .twoThirdCol.flipped > div {
     width: 31%;
     margin-right: 3.5%;
}
 .twoThirdCol.flipped > div:nth-child(2n+1).oneCol > div > label {
     width: 35%;
}

 .twoThirdCol.flipped > div:nth-child(2n+1).oneCol > div > input,
 .twoThirdCol.flipped > div:nth-child(2n+1).oneCol > div > select,
 .twoThirdCol.flipped > div:nth-child(2n+1).oneCol > div > textarea,
 .twoThirdCol.flipped > div:nth-child(2n+1).oneCol > div > span,
 .twoThirdCol.flipped > div:nth-child(2n+1).oneCol > div label + .mce-tinymce.mce-container.mce-panel {
     width: 65%;
}
 .twoThirdCol.flipped > div:nth-child(2n+1).oneCol > div > label + .mce-tinymce.mce-container.mce-panel {
     width: 65% !important;
}
 .twoThirdCol.flipped > div:nth-child(2n+2) {
     width: 65.5%;
     margin-right: 0;
}
 .twoThirdCol.flipped > div:nth-child(2n+2).oneCol > div > label {
     width: 25.5%;
}
 .twoThirdCol.flipped > div:nth-child(2n+2).oneCol > div > input,
 .twoThirdCol.flipped > div:nth-child(2n+2).oneCol > div > select,
 .twoThirdCol.flipped > div:nth-child(2n+2).oneCol > div > textarea,
 .twoThirdCol.flipped > div:nth-child(2n+2).oneCol > div > span,
 .twoThirdCol.flipped > div:nth-child(2n+2).oneCol > div > label + .mce-tinymce.mce-container.mce-panel {
     width: 74.5%;
}
 .twoThirdCol.flipped > div:nth-child(2n+2).oneCol > div label + .mce-tinymce.mce-container.mce-panel {
     width: 74.5% !important;
}

 .twoThirdCol.flipped > div:nth-child(1n+1).statusCol > div > label {
     width: 140px;
}
 .twoThirdCol.flipped > div:nth-child(1n+1).statusCol > div > input,
 .twoThirdCol.flipped > div:nth-child(1n+1).statusCol > div > select,
 .twoThirdCol.flipped > div:nth-child(1n+1).statusCol > div > textarea,
 .twoThirdCol.flipped > div:nth-child(1n+1).statusCol > div > span,
 .twoThirdCol.flipped > div:nth-child(1n+1).statusCol > div label + .mce-tinymce.mce-container.mce-panel {
     width: calc(100% - 140px);
}
 .twoThirdCol.flipped > div:nth-child(1n+1).statusCol > div > label + .mce-tinymce.mce-container.mce-panel {
     width: calc(100% - 140px) !important;
}


.uqResultsCol > div {
     width: 58%;
     margin-right: 4%;
}
.uqResultsCol > div:nth-child(2n+2) {
     margin-right: 0;
     width: 38%;
}
.uqResultsCol > div:nth-child(2n+1) {
     clear: both;
     padding-bottom: 0;
}

.uqResultsCol .oneCol > div > label {
    width: 35%;
}

.uqResultsCol .oneCol > div > span {
    width:60%;
}

.uqFootnotes {
    text-align: justify;
}

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


.checkbox.checkboxWithTextInput {
    padding-right: 0;
    padding: 0;
}

.checkbox.checkboxWithTextInput span {
    width: 1em;
    display: inline-block;
    padding-top: 0.7em;
    padding-bottom: 0;
}

.checkbox.checkboxWithTextInput input[type="text"],
.checkbox.checkboxWithTextInput input[type="number"] {
    float: right;
    display: inline-block;
    width: calc(100% - 1.5em);
    margin-bottom: 0;
}

.downloadsCol > div {
    width: 20.5%;
    margin-right: 3%;
}

.downloadsCol > div:nth-child(4n+1) {
    width: 26.5%;
}

.downloadsCol > div:nth-child(4n+2) {
    width: 23.5%;
}


.agreementCol {
    display: flex;
    flex-direction: row;
    align-items:flex-start;
    justify-content: space-between;
    padding: 0 0 1.5em 0;
}
.agreementCol > div {
    padding-right:1em;
    font-size: 0.95em;
}
.agreementCol label {
    display: block;
    font-size: 0.9em;
    padding-bottom: 0.5em;
}

.agreementCol select {
    min-width: 150px;
}

 .listSearchCol {
     padding-top: 0.25em;
     padding-bottom: 0.25em;
     position: relative;
}
 .listSearchCol > div.searchText {
     width: 100%;
     padding-right: 0;
}
 .listSearchCol > div.searchText input[type="text"] {
     margin-bottom: 0;
}
 .listSearchCol > div.searchCancel {
     width: 20px;
     position: absolute;
     top: 12px;
     right: 7px;
}
 .listSearchCol > div.searchCancel .button {
     width: 20px;
     height: 20px;
     padding: 5px;
     box-sizing: border-box;
     position: relative;
}
 .listSearchCol > div.searchCancel .button:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 10px;
     line-height: 10px;
     content: "\f00d";
     color: #fff;
     display: block;
     position: absolute;
     width: 10px;
     height: 10px;
     right: 5px;
     top: 5px;
     text-align: center;
}
 .listSearchCol > div.searchCancel .button span {
     display: none;
}
 .listSearchCol > div.searchButton {
     width: 3.5%;
     padding-right: 0;
     position: relative;
}
 .listSearchCol > div.searchButton .button {
     box-sizing: border-box;
     display: block;
     text-align: center;
     height: 36px;
     border: 1px solid #d3e0df;
     padding: 0.4em;
     border-radius: 0;
     position: absolute;
     z-index: 2;
     top: 0;
     right: 0;
     margin: 0;
     width: 35px;
}
 .listSearchCol > div.searchButton .button:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 1.2em;
     line-height: 1.2em;
     content: "\f002";
     color: #fff;
     display: block;
     position: absolute;
     width: 1.2em;
     height: 1.2em;
     right: 0.35em;
     top: 0.35em;
     text-align: center;
}
 .listSearchCol > div.searchButton .button span {
     display: none;
}
 .supportCol {
     position: relative;
     padding-bottom: 1em;
}
 .supportCol > div {
     padding-right: 1%;
}
 .supportCol > div:nth-child(1) {
     width: 10%;
}
 .supportCol > div:nth-child(1) input {
     height: 35px;
     margin-bottom: 0;
}
 .supportCol > div:nth-child(2) {
     width: 10%;
}
 .supportCol > div:nth-child(3) {
     width: 20%;
}
 .supportCol > div:nth-child(4) {
     width: 12.5%;
}
 .supportCol > div:nth-child(5) {
     width: 12.5%;
}
 .supportCol > div:nth-child(6) {
     width: 26.5%;
     padding-right: 0.5%;
}
 .supportCol > div:nth-child(7) {
     width: 3%;
     position: relative;
     padding-right: 0;
}
 .supportCol > div:nth-child(7) .filterIconContainer {
     display: block;
     width: 100%;
     height: 35px;
     margin-top: 1.8em;
}
 .supportCol > div:nth-child(7) .filterIconContainer img {
     display: block;
     width: 32px;
     height: 100%;
}
 .supportCol > div:nth-child(7) .filterIconContainer:hover {
     cursor: pointer;
     background: #d3e0df;
     text-decoration: none;
}
 .supportCol > div:nth-child(7) .filterIconContainer:focus {
     background: #d3e0df;
}
 .supportCol > div:nth-child(8) {
     width: 100%;
     padding-right: 0;
     position: relative;
}
 .supportCol > div:nth-child(8) .button {
     width: 20px;
     height: 20px;
     padding: 5px;
     box-sizing: border-box;
     position: absolute;
     right: 0;
     top: 7px;
}
 .supportCol > div:nth-child(8) .button:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 10px;
     line-height: 10px;
     content: "\f00d";
     color: #fff;
     display: block;
     position: absolute;
     width: 10px;
     height: 10px;
     right: 5px;
     top: 5px;
     text-align: center;
}
 .supportCol > div:nth-child(8) .button span {
     display: none;
}
 .supportCol > div.disabled:nth-child(9) {
     padding-right: 0.5%;
     width: 3.5%;
     padding-right: 0;
     position: relative;
}
 .supportCol > div.disabled:nth-child(9) .button {
     box-sizing: border-box;
     display: block;
     text-align: center;
     height: 36px;
     border: 1px solid #d3e0df;
     padding: 0.4em;
     border-radius: 0;
     position: absolute;
     z-index: 2;
     top: 0;
     right: 0;
     margin: 0;
     width: 35px;
}
 .supportCol > div.disabled:nth-child(9) .button:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 1.2em;
     line-height: 1.2em;
     content: "\f002";
     color: #fff;
     display: block;
     position: absolute;
     width: 1.2em;
     height: 1.2em;
     right: 0.35em;
     top: 0.35em;
     text-align: center;
}
 .supportCol > div.disabled:nth-child(9) .button span {
     display: none;
}
 .portalList {
     position: relative;
}
 .portalList #resultsPerPageSelectorContainer,
 .portalList .resultsPerPageSelectorContainer {
     position: absolute;
     right: 0;
     bottom: 0;
}
 .portalList#ticketList span.otherCols:before,
 .portalList#ticketList span.otherCols:after {
     display: table;
     content: "";
}
 .portalList#ticketList span.otherCols:after {
     clear: both;
}
 .portalList#ticketList span.otherCols > span {
     float: left;
     width: 47.5%;
     margin-right: 5%;
     display: block;
}
 .portalList#ticketList span.otherCols > span:first-child {
     width: 100%;
}
 .portalList#ticketList span.otherCols > span:nth-child(2n+1) {
     margin-right: 0;
}

span.iconSystemStatus {
     position: relative;
     padding-left: 30px;
     height: 1em;
}
 span.iconSystemStatus:before {
     position: absolute;
     top: 0;
     left: 0;
     content: " ";
     width: 24px;
     height: 24px;
     background-image: url("/images/icon-system-status-good.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: 16px 16px;
}
 span.iconSystemStatus.iconSystemStatus_issue:before {
     background-image: url("/images/icon-system-status-issue.png");
}
 span.iconSystemStatus.iconSystemStatus_warning:before {
     background-image: url("/images/icon-system-status-warning.png");
}
 span.iconSystemStatus.iconSystemStatus_none:before {
     background-image: url("/images/icon-system-status-none.png");
}
 span.iconSystemStatus.iconSystemStatus_requested:before {
     background-image: url("/images/icon-system-status-requested.png");
}
 span.iconSystemStatus.iconSystemStatus_new:before {
     background-image: url("/images/icon-system-status-new.png");
}
 span.iconSystemStatus.iconSystemStatus_delete:before {
     background-image: url("/images/icon-system-status-delete.png");
}
 span.iconSystemStatus.iconSystemStatus_trial:before {
     background-image: url("/images/icon-system-status-trial.png");
}
 table {
     border-spacing: 0;
     width: 100%;
     box-sizing: border-box;
     background: #fff;
     margin-bottom: 1em;
     display: block;
     overflow-x: auto;
    border-collapse: collapse;
    border-spacing: 0;
/*    display: table;
    table-layout: auto;
*/
}

table.biglist {
    display: block;
}

table span.fieldErrorMessage {
  font-size: 0.85em;
  color: #d00;
  display: none;
}
table span.fieldErrorMessage.shown {
  display: block;
}

table thead,
table tbody,
table tfoot {
     width: 100%;
     display: table;
     box-sizing: border-box;
}
 table tbody tr {
     border-bottom: 1px solid #ddd;
     vertical-align: top;
}
 table tbody tr.installation {
     border-bottom: 0;
     border-top: 1px solid #ddd;
}
 table tbody tr.installation select {
     margin-bottom: 0;
}
 table tbody tr.installationWarning {
     padding-top: 0.25em;
     border-bottom: 0;
}
 table tbody tr.headerRow + tr.installation{
     border-top: 0;
}
table thead tr.headerRow,
table tbody tr.headerRow {
     background: #759a9e;
     color: #fff;
     border-bottom: 0;
}
 table tbody tr.headerRow th.listHeader {
     padding-bottom: 20px;
     position: relative;
     background-repeat: no-repeat;
     background-position: 0.75em bottom;
     transition: all 0.25s;
}
 table tbody tr.headerRow th.listHeader.asc {
     background-image: url("/images/arrow-white-ascend.png");
     background-color: #436e70;
}
 table tbody tr.headerRow th.listHeader.desc {
     background-image: url("/images/arrow-white-descend.png");
     background-color: #436e70;
}
 table tbody tr.headerRow th.listHeader:hover {
     background-color: #436e70;
     cursor: pointer;
}
 table tbody tr.headerRow th.clearCell {
     background: #e9f2f1;
}
.info table tbody tr.headerRow th.clearCell {
    background: #d3e0df;
} 

 table tbody tr.headerRow.secondHeaderRow th,
 table tbody tr.headerRow.secondHeaderRow td {
     padding-top: 1em;
}
 table tbody tr.separatorRow {
     font-size: 0.1em;
     background: #e9f2f1;
}
 table tbody tr.showTablet {
     display: none;
}
 table tbody tr.showMobile {
     display: none;
}
 table tbody tr.package,
 table tbody tr.packageFileHeader,
 table tbody tr.packageContents .packageFiles tr:last-child{
     border-bottom: 0;
}
 table tbody tr.packageEdit {
     border-bottom: 0;
     transition: all 0.25s;
     vertical-align: middle;
}
 table tbody tr.packageEdit .packageExpander {
     text-align: right;
}
 table tbody tr.packageEdit .packageExpander.packageExpanderLeft {
     text-align: left;
}
table tbody tr.packageEdit .expanderCol {
    width: 30px;
    padding-right:0;
}

 table tbody tr.packageEdit:hover {
     background: #d3e0df;
     cursor: pointer;
}
 table tbody tr.packageContents > td {
     padding: 0 1em;
}
 table tbody tr.packageContents > td .packageFilesContainer table {
     margin: 1em 0 1em 0;
     box-sizing: border-box;
}
 table tbody tr.packageContents > td .packageFilesContainer table tr {
     border-bottom: 0;
}
 table tbody tr.packageContents > td .packageFilesContainer table.licenseHistory {
     margin-top: 0;
}
 table tbody tr.packageContents > td .packageFilesContainer table.licenseHistory tr.headerRow th {
     color: #fff;
     padding-top: 0.5em;
}
 table tbody tr.threeCol th,
 table tbody tr.threeCol td {
     width: 33.333333333333333%;
     box-sizing: border-box;
}
 table tbody tr.threeCol th select,
 table tbody tr.threeCol td select {
     width: 95%;
}
 table tbody tr.contactRoleHeader.contactRoleDeleted {
     color: #a7b5b6;
}
 table tbody tr.contactRoleHeader.contactRoleChanged td {
     font-weight: 700;
}
 table tbody tr.contactRoleHeader td em {
     font-style: normal;
     color: #a7b5b6;
}
 table tbody th,
 table tbody td {
     margin: 0;
     border: 0;
     padding: 0.75em 1em;
     font-size: 0.9em;
     font-weight: 400;
}
 table tbody th table th,
 table tbody th table td,
 table tbody td table th,
 table tbody td table td {
     font-size: 1em;
}
 table tbody th.subHeaderCell,
 table tbody td.subHeaderCell {
     background: #8eb4b8;
     color: #fff;
}
 table tbody th {
     text-align: left;
}
 table tbody td p:first-child {
     margin-top: 0;
}
 table tbody td p:last-child {
     margin-bottom: 0;
}
 table tbody td input,
 table tbody td textarea {
     width: 100%;
     display: inline-block;
     margin: 0;
     box-sizing: border-box;
}
 table tbody td input.halfWidth {
     width: 50%;
}
 table tbody td input.inline,
 table tbody td textarea.inline {
     width: auto;
}
 table tbody td label {
     width: 100%;
     display: block;
     margin: 0;
     padding: 0.25em 0 0.25em 0;
     color: var(--text-color);
     font-size: 0.9em;
}
 table tbody td label.checkbox {
     font-size: 1em;
}
 table tbody td label.checkbox input[type="checkbox"] {
     width: auto;
}
 table tbody td input,
 table tbody td select,
 table tbody td textarea {
     display: inline-block;
     margin: 0 0 0.25em 0;
     width: 100%;
     box-sizing: border-box;
}
 table tbody td.contactTitleAndName select.titleWidth {
     width: 20%;
}
 table tbody td.contactTitleAndName input.nameWidth {
     width: 40%;
}
 table tbody td input.twoThirdWidth,
 table tbody td select.twoThirdWidth,
 table tbody td textarea.twoThirdWidth {
     width: 66%;
     margin-right: 4%;
}
 table tbody td input.oneThirdWidth,
 table tbody td select.oneThirdWidth,
 table tbody td textarea.oneThirdWidth {
     width: 30%;
}
 table tbody td select.invoice_status_list {
     min-width: 100px;
}
 table tbody td span {
     display: block;
     padding-bottom: 0.5em;
}
 table tbody td span.inline,
 table tbody td span.mce-txt,
 table tbody td span.checkbox {
     display: inline-block;
     width: auto;
}
 table tbody td span.otherCols {
     padding-bottom: 0;
}
 table tbody td span.radio span {
     color: var(--text-color);
}
 table tbody td span.radio span:hover {
     color: #3c4849;
}
 table tbody td span.radio span.selected {
     color: #3c4849;
}
 table tbody td label.checkbox,
 table tbody td span.checkbox {
     display: inline-block;
     color: var(--text-color);
     transition: background 0.25s,
     color 0.25s;

}
 table tbody td label.checkbox:hover,
 table tbody td span.checkbox:hover {
     cursor: pointer;
     color: #3c4849;
}
 table tbody td label.checkbox.selected,
 table tbody td span.checkbox.selected {
     color: #3c4849;
     font-weight: bold;
}
 table tbody td label.checkbox input[type="checkbox"],
 table tbody td span.checkbox input[type="checkbox"] {
     width: auto;
     margin-top: 0.2em;
}
 table tbody td label.checkbox.disabled input[type="checkbox"],
 table tbody td span.checkbox.disabled input[type="checkbox"] {
     opacity: 0.25;
}
 table tbody td.comment span {
     display: inline;
     padding-bottom: 0;
}
 table tbody td.comment table {
     width: auto !important;
}
 table tbody td.comment table tr td {
     width: auto !important;
}
 table tbody td.noSpanPadding span.radio {
     padding-bottom: 0;
}
 table tbody td.noSpanPadding span.radio span {
     padding-bottom: 0;
}
 table tbody span.otherCols {
     display: block;
     font-size: 0.9em;
     padding-bottom: 0;
}
 table tbody span.otherCols > span {
     display: none;
}
 table tbody span.otherCols > span b {
     white-space: nowrap;
     font-weight: normal;
}
 table tbody span.otherCols > span.showDesktop {
     display: block;
}
 table tbody span.otherCols.withDesktopCols {
     padding-top: 1em;
}
 table tbody span.daysDue {
     display: block;
     padding-top: 0.5em;
}
 table.packages tbody th {
     vertical-align: middle;
}
 table.altCols tr th.roleCol {
     max-width: 1em;
     height: 15em;
     overflow: hidden;
     vertical-align: bottom;
     box-sizing: border-box;
}
 table.altCols tr th.roleCol span {
     transform: rotate(-90deg);
     display: block;
     white-space: nowrap;
}
 table.altCols tr td:nth-child(2n) {
     background: #f8f8f8;
}
 table.altCols tr td.changed {
     background: #dfd;
}
 table.altCols tr td.changed:nth-child(2n) {
     background: #cec;
}
 table.altCols tr td.roleColCheckbox {
     background: #759a9e;
}
 table.altCols tr td.roleColCheckbox.selected {
     font-weight: bold;
     background: var(--text-color);
}
 table.checkBoxAndListCols th:first-child, table.checkBoxAndListCols td:first-child {
     width: 80%;
}
 table.permissionsGridHeader {
     position: sticky;
     top: 0;
     z-index: 100;
}
 table.permissionsGrid {
     background: transparent;
     margin-bottom: 0em;
     box-shadow: 0 3px 3px rgba(0,0,0,0.25);
}
 table.permissionsGrid .permissionRow .permissionNameCell {
     background: #ffffff;
}
 table.permissionsGrid .permissionRow.selected .permissionNameCell {
     background: #eeffee;
     font-weight: bold;
}
 table.permissionsGrid .permissionRow.unselected {
     opacity: 0.3;
}
 table.permissionsGrid .checkboxRow {
     height: 0px;
     background: #759a9e;
}
 table.permissionsGrid.hideUnselected .permissionRow.unselected {
     display: none;
}
 table.permissionsGrid .roleCol.selected {
     font-weight: bold;
     background: var(--text-color);
}
 table.permissionsGrid .roleCol.unselected {
     opacity: 0.3;
}
 table.permissionsGrid .headerRow h2 {
     margin-bottom: 0.15em;
}
 table.permissionsGrid .permissionCell.selected {
     font-weight: bold;
     background: #d3e0df;
}

table.agreement tr {
    vertical-align: middle;
}

table.agreement tr.currentYear {
    background: #0dec0112;
}

table.agreement tr.currentYear td {
    font-weight: bold;
}

table.agreement tr.pastYear td {
    opacity: 0.7;
}

div.product,
table.agreement tr td.product div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}


div.product select.agreementProductSelect,
table.agreement tr td.product div select.agreementProductSelect {
    width: 120px;
}

div.product select.agreementUsageSelect,
table.agreement tr td.product div select.agreementUsageSelect {
    width: calc(100% - 120px - 1em);
}

div.product select.agreementUsageSelect.agreementUsageSelectFull,
table.agreement tr td.product div select.agreementUsageSelect.agreementUsageSelectFull {
    width: calc(100% - 1em);
}

div.product .productIconText,
table.agreement tr td.product div .productIconText {
    display: none;
}

table.poListTable tbody tr {
    vertical-align: middle;
}

table.poListTable tbody td input[type="checkbox"] {
    width: auto;
}

@media screen and (max-width: 480px) {

    div.product,
    table.agreement tr td.product div {
        display: block;
    }

    div.product:last-child,
    table.agreement tr td.product div:last-child {
        padding-top: 0.5em;
    }

    div.product select.agreementProductSelect,
    table.agreement tr td.product div select.agreementProductSelect {
        width: 100%;
    }

    div.product select.agreementUsageSelect,
    table.agreement tr td.product div select.agreementUsageSelect {
        width: 100%;
    }

    div.product .productIcon,
    table.agreement tr td.product div .productIcon {
        width: auto;
        display: inline-block;
        margin-bottom: 0.25em;
    }

    div.product .productIconText,
    table.agreement tr td.product div .productIcon .productIconText {
        display: inline;
        padding-left: 0.25em;
    }

    table.agreement tr td.product div .productIcon.nextToInput::before {
        top: 0;
    }

    .twoCol div span.productIcon { 
        width: 1em;
    }

}

.uqHowWeCalculate ul li:last-child,
.modalConfirm .expandableContainer .uqHowWeCalculate ul li:last-child {
    padding-bottom: 0;
}

.uqHowWeCalculate h2 {
    margin-top: 0.5em;
    margin-bottom: 0.75em;
}

.uqHowWeCalculate h2:first-child {
    margin-top: 0;
}

.uqHowWeCalculate h3 {
    font-size: 1.35em;
    margin-bottom: 0;
}

.modalConfirm .uqHowWeCalculate h3 {
    margin-bottom: 0.5em;
}


.uqHowWeCalculate p + h2 {
    margin-top: 1.5em;
}
.modalConfirm .expandableContainer .uqHowWeCalculate p + h2 {
    margin-top: 1em;
}

.modalConfirm .expandableContainer .uqHowWeCalculate p,
.modalConfirm .expandableContainer .uqHowWeCalculate li {
    font-size: 0.9em;
}


.modalConfirm table.pricingBands th,
.modalConfirm table.pricingBands td {
    padding: 0.4em 1em;    
}

table.pricingMatrix {
    margin-bottom: 1.5em;
}

.modalConfirm table.pricingMatrix th,
.modalConfirm table.pricingMatrix td {
    padding: 0.4em 1em;
}

table.pricingMatrix th:first-child,
table.pricingMatrix td:first-child {
    width: 25%;
}


table tbody td.colSide {
    width: 2em;
    padding: 0.5em;
    box-sizing: border-box;
    vertical-align: middle;
    background: rgba(117, 154, 158, 0.125);
}

table tbody tr.rowAdd {
background: rgba(117, 154, 158, 0.125);
text-align: center;
}


table tr.multiRow {
    border-bottom: 0;
}

.container table.agreement tr td button.buttonSmall,
table.agreement tr td button.buttonSmall {
    margin: 0;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
}

.expandableContainer .container button.buttonIcon,
button.buttonIcon {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  text-decoration: none;
  font-size: 12px;
  padding: 0;
  width: 15px;
  height: 15px;
}


.content table.responsive th,
.content table.responsive td {
    position: relative;
}

@media screen and (max-width: 720px) {

    .content table.responsive th,
    .content table.responsive td {
        display: block;
        text-align: right;
        width: 100% !important;
        padding: 0.5em 0 !important;
        box-sizing: border-box;
    }

    .content table.responsive.padded th,
    .content table.responsive.padded td {
        padding: 0.5em 0.5em !important;
    }

    .content table.responsive th:before,
    .content table.responsive td:before {
        content: attr(data-title) ": ";
        font-weight: 700;
        float: left;
        padding-right: 1.5em;
    }

    .content table.responsive tr.responsiveHeaderRow, 
    .content table.responsive th.responsiveHide,
    .content table.responsive td.responsiveHide {
        display: none;
    }
}

.content table.yourResults {
    background: transparent;
}


.content table.yourResults tr th,
.content table.yourResults tr td {
    padding: 0.75em 0.75em 0.75em 0;
    box-sizing: border-box;
    font-size: 1em;
    padding: 1em 0.75em 1em 0;
}

.content table.yourResults tr th {
    font-weight: bold;
}


.content table.yourResults tr th:nth-child(1),
.content table.yourResults tr td:nth-child(1) {
    width: 50%;
    width: calc(100% - 130px - 130px - 130px);
}

.content table.yourResults tr th:nth-child(2),
.content table.yourResults tr td:nth-child(2) {
    width: 130px;
}

.content table.yourResults tr th:nth-child(3),
.content table.yourResults tr td:nth-child(3) {
    width: 130px;
}

.content table.yourResults tr th:nth-child(4),
.content table.yourResults tr td:nth-child(4) {
    text-align: right;
    width: 130px;
    padding-right: 0;
}

.content table.yourResults tr.subTotals td {
    padding: 1.5em 0;
}

.content table.yourResults tr.totals {
    font-size: 1.2em;
}



 .content table.clearTable {
     background: transparent;
}
 .content table.clearTable tr {
     background: transparent;
     border-bottom: 0;
}
 .content table.clearTable tr th, 
 .content table.clearTable tr td {
     padding-left: 0;
     padding-bottom: 0;
}
 .content table.clearTable tr th a.button, 
 .content table.clearTable tr td a.button {
     padding: 0.5em 1em;
}
 .content table.clearTable tr th.buttonCol, 
 .content table.clearTable tr td.buttonCol {
     padding-right: 0;
}
 .content table.clearTable tr th {
     padding-top: 0;
     padding-bottom: 0.25em;
}
 .content table.clearTable tr.headerRow {
     background: transparent;
     color: var(--text-color);
}
 .packageFilesContainer {
     overflow-y: hidden;
     height: 0;
     display: none;
}
 table.biglist,
 table.invoicesTable {
     margin-top: 1em;
}
 table.biglist.trialLicenseList {
     margin-top: 0;
}
 table.biglist tbody tr {
     transition: background 0.25s, color 0.25s;

}
 table.biglist tbody tr td a {
     color: var(--text-color);
     font-weight: normal;
}
 table.biglist tbody tr td a:hover {
     text-decoration: none;
}
 table.biglist tbody tr td .date {
     white-space: nowrap;
}
 table.biglist tbody tr td span.attachmentIcon {
     width: 9px;
     height: 1em;
     display: block;
     float: left;
     padding: 0;
     margin-top: 0.15em;
     margin-right: 0.4em;
     background-image: url("/images/icon-attachment.png");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center bottom;
}
 table.biglist tbody tr:hover {
     background: #e9f2f1;
     cursor: pointer;
}
 table.biglist tbody tr.noHighlight:hover {
     background: transparent;
     cursor: default;
}
table.biglist tbody tr.listRowGood {
     background: rgba(0,255,0,0.08);
}
table.biglist tbody tr.listRowGood:hover {
     background: rgba(0,255,0,0.08) !important;
}
table.biglist tbody tr.listRowIssue {
     background: rgba(255,0,0,0.08);
}
table.biglist tbody tr.listRowIssue:hover {
     background: rgba(255,0,0,0.08) !important;
}
table.biglist tbody tr.listRowWarning {
     background: rgba(255,255,0,0.05);
}
table.biglist tbody tr.listRowWarning:hover {
     background: rgba(255,255,0,0.05) !important;
}
table.biglist tbody tr.listRowInfo {
     background: rgba(0,0,0,0.03);
}
table.biglist tbody tr.listRowInfo:hover {
     background: rgba(0,0,0,0.03) !important;
}

table.biglist tbody tr.listRowClosed {
     opacity: 0.5;
}
table.biglist tbody tr.listRowClosed:hover {
}

table.biglist tbody tr.linkRow a {
     position: relative;
     display: inline-block;
}
 table.biglist tbody tr.linkRow a small {
     font-size: 85%;
     opacity: 0.8;
     font-weight: normal;
}
 table.biglist tbody tr.linkRow a small.withIcon {
     padding-left: 1.8em;
     display: inline-block;
     padding-bottom: 0.5em;
}
 table.biglist tbody tr.linkRow a span.withIcon {
     padding-left: 1.5em;
     padding-bottom: 0.2em;
}
 table.biglist tbody tr.linkRow.closed {
     opacity: 0.5;
}
 table.biglist tbody tr.linkRow.issue {
     background: #f7d0d0;
     color: #ba0000;
}
 table.biglist tbody tr.headerRow:hover {
     background: #759a9e;
}
 table.biglist.noHighlight tbody tr td:hover {
     background: transparent;
     cursor: default;
}
 table.biglist.noHighlight tbody tr:hover {
     background: transparent;
}
 table.biglist.noHighlight tbody tr.headerRow:hover {
     background: #759a9e;
}
 table.biglist.linkRows tbody tr td a {
     color: #cb8e1a;
     font-weight: 600;
}
 table.biglist.linkRows tbody tr td.packageFileDescription a {
     font-weight: normal;
}
 table.biglist.linkRows tbody tr:hover td a {
     color: var(--input-color);
}
 table.biglist.linkRows tbody tr.selected td {
     font-weight: 600;
}
 table.biglist.linkRows tbody tr.noHighlight:hover td a {
     color: #cb8e1a;
}
 table.biglist.linkRows tbody tr.noHighlight:hover td a:hover {
     color: var(--input-color);
}
 table.biglist.searchResults tbody tr {
     border-bottom: 0;
     border-top: 1px solid #ddd;
}
 table.biglist.searchResults tbody tr:first-child {
     border-top: 0;
}
 table.biglist.searchResults tbody tr.linkRow.subRow {
     border-top: 0;
     font-size: 0.8em;
}
 table.biglist.searchResults tbody tr.linkRow.subRow td {
     padding: 1em 2em 2em 2em;
}
 table.biglist.searchResults tbody tr.linkRow.subRow td div {
     padding: 1.5em 1em;
     border: 2px solid #e9f2f1;
     background: #fff;
     transition: background 0.25s;
}
 table.biglist.searchResults tbody tr.linkRow.subRow td div:hover {
     background: #e9f2f1;
}
 table.biglist.searchResults tbody tr.linkRow.subRow h3 {
     margin: 0;
     font-size: 1.6em;
     color: #cb8e1a;
     color: var(--text-color);
     padding-bottom: 0.5em;
}
 table.biglist.searchResults tbody tr.linkRow.subRow ul {
     margin-top: 0;
     padding: 0 0 0 1em;
}
 table.biglist.searchResults tbody tr.linkRow.subRow ul li {
     padding-bottom: 0.5em;
}
 table.biglist.searchResults tbody tr.linkRow.subRow ul p {
     display: inline;
     margin: 0;
     padding: 0;
}
 table.biglist.searchResults tbody tr.linkRow.subRow:hover {
     background: transparent;
     cursor: auto;
}
 table.biglist.noLink tbody tr:hover {
     background: transparent;
     cursor: default;
}
 table.biglist.noLink tbody tr.headerRow:hover {
     background: #759a9e;
}
 table.biglist.noLink tbody tr td a {
     color: var(--input-color);
     font-weight: normal;
}
 table.biglist.noLink tbody tr.noHighlight:hover td a {
     color: var(--input-color);
     font-weight: normal;
}
 .biglistFilterText {
     font-size: 0.8em;
}
 table.permissionList tr td + td {
     width: 100px;
}
 table.packageFileEdit {
     background: #e9f2f1;
}
 table.packageFileEdit.systemEdit {
     background: #f2f8f7;
}
 table.smallTextList {
     font-size: 0.9em;
}

table.periodAssignmentList .disabled {
    opacity: 0.5;
}

table.periodAssignmentList .selected td {
    font-weight: bold;
}

/* Double Columns: START */

.doubleCol {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 4%;
    flex-wrap: wrap;
}

.doubleCol > div {
    width: 48%;
}

.doubleCol > div > h3:first-child{
    margin-top: 0;
}

@media screen and (max-width: 960px) {

    .doubleCol > div {
        width: 100%;
    }
}

/* Double Columns: END */

/* Field Columns: START */
.fieldCols {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 0;
    flex-wrap: wrap;
    padding-top: 2px;
}

.fieldCols > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 1.25em;
    transition: padding-bottom 0.25s;
    position: relative;
}

.fieldCols > div.topAlign {
    align-items: start;
}

.fieldCols > div.hasErrorMessage.error {
    padding-bottom: 2.5em;
}

.fieldCols > div.hasErrorMessage:before {
    content: attr(data-error-message);
    color: var(--text-error-color);
    position: absolute;
    bottom: 1em;
    left: var(--label-width);
    font-size: 0.9em;
    opacity: 0;
    transition: opacity 0.25s;
    right: 0;
}

.fieldCols > div.hasErrorMessage.error:before {
    opacity: 1;
}


.fieldCols.doubleCol {
    gap: 4%;
}

.fieldCols.doubleCol > div {
    width: 48%;
}

.fieldCols > div.topAlign {
    align-items: start;
}

.fieldCols > div > * {
    width: calc(100% - var(--label-width));
    box-sizing: border-box;
    float: none;
}

.fieldCols > div > *::placeholder {
     opacity: 0.25;
}

.fieldCols > div.error > *::placeholder {
     color: var(--text-error-color);
}


.fieldCols > div > label,
.modalPopup .fieldCols > div > label {
    width: var(--label-width);
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.9rem;
    color: var(--text-color);
}


.fieldCols > div > input {
    line-height: 20px;
    height: 3em;
}

.fieldCols > div > select {
    line-height: 20px;
    height: 3em;
    padding: 0.5em;
}

.fieldCols > div > textarea {
    padding: 0.5em;
}

.fieldCols > div > span {
    position: relative;
    min-height: 3em;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fieldCols.thin > div > span {
    min-height: 1.5em;
}

.fieldCols > div > span > label.checkbox,
.fieldCols > div > span > label.radio {
    display: inline-block;
    padding-right: 1em;
    padding: 0 1em 0 0;
}


.fieldCols.thinLabel > div > * {
    width: calc(100% - var(--label-thing-width));
}

.fieldCols.thinLabel > div > label {
    width: var(--label-thing-width);
}

.fieldCols.thinLabel > div.hasErrorMessage:before {
    left: var(--label-thing-width);
}

.fieldCols.wideLabel > div > * {
    width: calc(100% - var(--label-wide-width));
}

.fieldCols.wideLabel > div > label {
    width: var(--label-wide-width);
}

.fieldCols.wideLabel > div.hasErrorMessage:before {
    left: var(--label-wide-width);
}

.fieldCols > div.fullWidth {
    display: block;
}

.fieldCols > div.fullWidth > * {
    width: 100%;
}


.fieldCols > div > *.fullWidth {
    width: 100%;
    font-size: 1em;
    margin: 0.5em 0;
}

.fieldCols > div.error > label {
    color: var(--text-error-color);
}

.fieldCols > div.error > input,
.fieldCols > div.error > select,
.fieldCols > div.error > textarea {
    border: 1px solid var(--border-error-color);
}


.fieldCols > div > div,
.fieldCols.thinLabel > div > div,
.fieldCols.wideLabel > div > div {
    width: 100%;
}

/* Override the 100% div width for TinyMCE in a fieldcols section, to prevent it being too wide */
.fieldCols > div > div.tox {
    width: calc(100% - var(--label-width));
    margin-bottom: 0; /* Also stop there being a margin at the bottom so it fits better in a fieldcol form  */
}
.fieldCols.thinLabel > div > div.tox {
    width: calc(100% - var(--label-thing-width));
}
.fieldCols.wideLabel > div > div.tox {
    width: calc(100% - var(--label-wide-width));
}

.fieldCols > div.error > div.tox {
    border: 1px solid var(--border-error-color);
}


.fieldCols label.checkbox.multiLine {
    padding-bottom: 0;
}


@media screen and (max-width: 960px) {

    .fieldCols.doubleCol > div {
        width: 100%;
    }

    .fieldCols.thinLabel > div > * {
        width: calc(100% - var(--label-width));
    }

    .fieldCols.thinLabel > div > div {
        width: 100%;
    }

    .fieldCols.thinLabel > div > label {
        width: var(--label-width);
    }

}

@media screen and (max-width: 480px) {

    .fieldCols > div,
    .fieldCols.wideLabel > div,
    .fieldCols.thinLabel > div {
        display: block;
        padding-bottom: 1em;
    }

    .fieldCols > div.fieldCols {
        padding-bottom: 0;
    }

    .fieldCols > div > *,
    .fieldCols.wideLabel > div > *,
    .fieldCols.thinLabel > div > * {
        width: calc(100% - var(--label-width));
        width: 100%;
        overflow-x: hidden;
    }

    .fieldCols > div > div,
    .fieldCols.wideLabel > div > div,
    .fieldCols.thinLabel > div > div {
        width: 100%;
    }

    .fieldCols > div > label,
    .fieldCols.wideLabel > div > label,
    .fieldCols.thinLabel > div > label {
        width: var(--label-width);
        width: 100%;
        font-size: 0.8rem;
        display: block;
        margin-bottom: 0.5em;
    }

    .fieldCols > div > span,
    .fieldCols.wideLabel > div > span,
    .fieldCols.thinLabel > div > span {
        min-height: auto;
        display: block;
    }

    .fieldCols > div.hasErrorMessage:before,    
    .fieldCols.thinLabel > div.hasErrorMessage:before,
    .fieldCols.wideLabel > div.hasErrorMessage:before {
        left: 0;
    }

}

/* Field Columns: END */


 #statusBar {
     position: fixed;
     z-index: 100;
     bottom: -65px;
     left: 0;
     width: 100%;
     height: 65px;
     background: var(--input-color);
     display: block;
     transition: bottom 0.25s;
}

#statusBar.shown {
    bottom: 0;
}

 #statusBar .inner .alerts {
     position: absolute;
     left: 0;
     top: 0.5em;
}
 #statusBar .inner .helpLink {
     display: block;
     float: left;
     position: relative;
     box-sizing: border-box;
     width: 35px;
     height: 65px;
     margin-right: 1.5em;
     opacity: 0.5;
     transition: opacity 0.25s;
     text-decoration: none;
}
 #statusBar .inner .helpLink:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 35px;
     line-height: 35px;
     content: "\f059";
     color: #fff;
     display: block;
     position: absolute;
     width: 35px;
     height: 35px;
     left: 0;
     top: 15px;
     text-align: left;
}
 #statusBar .inner .helpLink:hover {
     cursor: pointer;
     opacity: 1;
}
 #statusBar .inner .timer {
     float: left;
     padding-top: 0.5em;
     text-align: left;
     position: relative;
     color: #fff;
     height: 65px;
     line-height: 1em;
     padding-left: 30px;
     padding-top: 25px;
     font-size: 0.8em;
     opacity: 0.25;
     box-sizing: border-box;
     transition: opacity 0.25s;
}
 #statusBar .inner .timer:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 25px;
     line-height: 25px;
     content: "\f252";
     color: #fff;
     display: block;
     position: absolute;
     width: 25px;
     height: 25px;
     left: 0;
     top: 20px;
     text-align: left;
}
 #statusBar .inner .timer:hover {
     cursor: pointer;
     opacity: 0.5;
}
 #statusBar .inner .buttonsMobile {
     float: right;
     padding-top: 0.5em;
     text-align: right;
     display: none;
}
 #statusBar .inner .buttonsMobile a.button {
     margin-left: 1em;
     margin-right: 0;
}
 #statusBar .inner .buttons {
     float: right;
     padding-top: 0.5em;
     text-align: right;
}
 #statusBar .inner .buttons a.button,
 #statusBar .inner .buttons button {
     margin-left: 1em;
     margin-right: 0;
}
 #statusBar .inner .buttons a.button span,
 #statusBar .inner .buttons button span {
     display: none;
}
 #statusBar .inner .buttons .buttonNotes {
     float: left;
     text-align: right;
     color: #fff;
     opacity: 0.5;
}
 #statusBar .inner .buttons .buttonNotes p {
     margin: 0.25em 0 0 0;
}
 #statusBar .inner .buttons #actionButtonCloseMobilePopup {
     display: none;
}
 #statusBar .inner #actionButtonsPopup .inner {
     width: 100%;
}

 #statusBar .inner #actionButtonsPopup .buttons h3 {
     display: none;
}
 #statusBar.sessionExpired {
     background: #900000;
}
 .timer.timerHidden {
     display: none;
}
 #footer {
     background: #e9f2f1;
     padding-bottom: 0.5em;
}
 #footer .nav ul,
 #footer .impressum ul,
 #footer .version ul,
 #footer .backToTop ul {
     margin: 0;
     padding: 1.5em 0 1em 0;
     list-style: none;
}
 #footer .nav ul li,
 #footer .impressum ul li,
 #footer .version ul li,
 #footer .backToTop ul li {
     color: var(--text-color);
     font-size: 0.9em;
}
 #footer .nav ul li a,
 #footer .impressum ul li a,
 #footer .version ul li a,
 #footer .backToTop ul li a {
     text-decoration: none;
     color: var(--text-color);
}
 #footer .nav ul li a:hover,
 #footer .impressum ul li a:hover,
 #footer .version ul li a:hover,
 #footer .backToTop ul li a:hover {
     color: var(--input-color);
}
 #footer .backToTop {
     display: none;
}
 #footer .logo {
     position: absolute;
     right: 0;
     top: 1.5em;
}
 #footer .logo a {
     display: block;
     width: 256px;
     height: 56px;
     background: url("/images/quantityware-logo-footer.png");
}
 #footer .version {
     position: absolute;
     right: 0;
     bottom: 0;
     text-align: right;
}
 .grecaptcha-badge {
     margin-bottom: 60px;
}
 .cmContainer input[type="checkbox"] {
     height: 1em;
     width: 1em;
     appearance: none;
     border: 1px solid #759a9e;
     outline: none;
     background-color: #fff;
     cursor: pointer;
     margin-bottom: 0;
}
 .cmContainer input[type="checkbox"]:checked {
     border: 1px solid var(--text-color);
     background-color: #fff;
     background-image: url("/images/checkbox-ticked.svg");
     background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;
}
 .cmContainer input[type="checkbox"]:hover,
 .cmContainer input[type="checkbox"]:focus {
     border: 1px solid var(--text-color);
     background-color: #e9f2f1;
}
 .cmContainer .cmRowTabs {
     position: relative;
     background: transparent;
}
 .cmContainer .cmRowTabs:before,
 .cmContainer .cmRowTabs:after {
     display: table;
     content: "";
}
 .cmContainer .cmRowTabs:after {
     clear: both;
}
 .cmContainer .cmRowTabs .cmColRoles {
     float: right;
}
 .cmContainer .cmRowTabs .cmColRoles .cmColRoleContainer {
     float: left;
     height: 2.4em;
}
 .cmContainer .cmRowTabs .cmColRoles .cmColRoleContainer.mandatory {
     background: #759a9e;
     position: relative;
}
 .cmContainer .cmRowTabs .cmColRoles .cmColRoleContainer.mandatory span {
     position: absolute;
     top: 0.5em;
     left: 0;
     width: 100%;
     height: 2.4em;
     color: #fff;
     text-align: center;
}
 .cmContainer .cmRowTabs .cmColRoles .cmColRole {
     float: left;
     width: 2.4em;
     height: 2.4em;
}
 .cmContainer .cmRowHeader {
     position: relative;
     background: #759a9e;
     color: #fff;
}
 .cmContainer .cmRowHeader:before,
 .cmContainer .cmRowHeader:after {
     display: table;
     content: "";
}
 .cmContainer .cmRowHeader:after {
     clear: both;
}
 .cmContainer .cmRowHeader .cmColSummary {
     float: left;
     padding: 1em;
}
 .cmContainer .cmRowHeader .cmColSummary h2 {
     margin: 0;
     font-size: 2em;
}
 .cmContainer .cmRowHeader .cmColSummary p {
     max-width: 450px;
     color: #d3e0df;
}
 .cmContainer .cmRowHeader .cmColSummary .cmActionButtons {
     position: absolute;
     bottom: 0;
     left: 0;
     padding: 1em;
}
 .cmContainer .cmRowHeader .cmColSummary .cmActionButtons button {
     background: #517478;
     padding: 8px 15px;
}
 .cmContainer .cmRowHeader .cmColRoles {
     float: right;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole {
     float: left;
     width: 2.4em;
     color: #d3e0df;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole.mandatory {
     background: #517478;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole.mandatory.error {
     background: #5d2b2b;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole.selected {
     font-weight: bold;
     color: #fff;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole span {
     display: block;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole .cmInfo {
     font-size: 14px;
     border-radius: 50%;
     box-sizing: border-box;
     width: 16px;
     height: 16px;
     padding: 0;
     text-align: center;
     font-weight: bold;
     background: #fff;
     color: var(--input-color);
     opacity: 0.3;
     margin: 0.5em auto;
     display: block;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole .cmName {
     height: 10em;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole .cmName span {
     transform: rotate(-90deg);
     white-space: nowrap;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole .cmCount {
     text-align: center;
     padding: 1.5em 0 0.5em 0;
     height: 1.5em;
}
 .cmContainer .cmRowHeader .cmColRoles .cmColRole.mandatory.error .cmCount {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     padding-top: 1.7em;
     padding-bottom: 0.3em;
}
 .cmContainer .cmRow {
     position: relative;
     background: #fff;
     border-bottom: 1px solid #ddd;
}
 .cmContainer .cmRow .cmRowSummary {
     background: #ffffff;
     transition: background 0.25s;
}
 .cmContainer .cmRow .cmRowSummary:hover {
     cursor: pointer;
     background: #f8f8f8;
}
 .cmContainer .cmRow .cmRowSummary:before,
 .cmContainer .cmRow .cmRowSummary:after {
     display: table;
     content: "";
}
 .cmContainer .cmRow .cmRowSummary:after {
     clear: both;
}
 .cmContainer .cmRow .cmRowSummary.child:hover {
     cursor: default;
     background: #fff;
}
 .cmContainer .cmRow .cmRowSummary.child .cmColSummary {
     padding-left: 0.75em;
}
 .cmContainer .cmRow .cmRowSummary .cmColSummary {
     float: left;
     padding: 0.5em 1em 0.5em 2em;
     position: relative;
}
 .cmContainer .cmRow .cmRowSummary .cmColSummary .cmExpander {
     position: absolute;
     top: 10px;
     left: 6px;
     font-size: 15px;
     border-radius: 50%;
     box-sizing: border-box;
     padding: 2px 0 0 2px;
     width: 20px;
     height: 20px;
     margin: 0;
}
 .cmContainer .cmRow .cmRowSummary .cmColSummary .cmExpander span {
     display: block;
     width: 15px;
     height: 15px;
     font-size: 15px;
     margin: -3px 0 0 0;
     text-align: center;
     transform: rotate(0deg);
     transition: all .25s;

}
 .cmContainer .cmRow .cmRowSummary .cmColSummary .cmExpander span:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f0d7";
}
 .cmContainer .cmRow .cmRowSummary .cmContactType {
     float: right;
     text-align: right;
     padding: 0.4em 1.8em 0.5em 0;
     position: relative;
}
 .cmContainer .cmRow .cmRowSummary .cmContactType:before {
     position: absolute;
     top: 0.75em;
     right: 0.6em;
     font-size: 0.9em;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
}
 .cmContainer .cmRow .cmRowSummary .cmContactType span {
     font-size: 0.8em;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles {
     float: right;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole {
     float: left;
     width: 2.4em;
     box-sizing: border-box;
     text-align: center;
     padding: 0;
     background: #f8f8f8;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole.selected {
     background: #c8ddde;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole.changed {
     background: #edd9b3;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole.selected.changed {
     background: #e4b65e;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole.error {
     background: #e2bfbf;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole.error.changed {
     background: #e3a091;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole label {
     display: block;
     width: 2.4em;
     padding: 0.5em 0;
     background: rgba(0,0,0,0);
     transition: background 0.25s;
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole label:hover {
     cursor: pointer;
     background: rgba(0,0,0,0.1);
}
 .cmContainer .cmRow .cmRowSummary .cmColRoles .cmColRole label.disabled:hover {
     cursor: default;
     background: transparent;
}
 .cmContainer .cmRow .cmRowDetailsContainer {
     margin: 0;
     padding: 0;
     overflow-y: hidden;
     display: none;
     height: 0;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails {
     background: #e9f2f1;
     margin: 1em;
     padding: 1em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails h3 {
     font-size: 1.6em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails p.cmOrgName {
     margin: 0;
     margin-top: -1em;
     margin-bottom: 1.25em;
     opacity: 0.5;
     font-weight: 600;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails p.cmRolesNote {
     font-size: 0.9em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .primary {
     display: none;
     opacity: 0.65;
     padding-bottom: 0.25em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .primary.shown {
     display: block;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .primary label {
     padding-top: 0.05em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .primary span {
     padding-top: 0em;
     font-size: 0.9em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails input.pairedFieldsMain,
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails select.pairedFieldsMain {
     width: 43%;
     margin-right: 2%;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails input.pairedFieldsSecondary,
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails select.pairedFieldsSecondary {
     width: 20%;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel {
     background: rgba(255,255,255,0.41);
     padding: 1em;
     box-sizing: border-box;
     position: relative;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .infoIcon {
     float: none;
     position: absolute;
     top: 0.8em;
     right: 0.8em;
     text-align: right;
     width: 1.5em;
     height: 1.5em;
     font-size: 1.25em;
     border-radius: 50%;
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     text-align: center;
     font-weight: bold;
     background: #009de0;
     color: #fff;
     opacity: 0.5;
     display: block;
     transition: opacity 0.25s;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .infoIcon:hover {
     cursor: pointer;
     opacity: 1;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel h3 {
     font-size: 1.6em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet {
     padding-bottom: 0.5em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet:before,
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet:after {
     display: table;
     content: "";
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet:after {
     clear: both;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet label {
     width: 50%;
     margin-right: 0;
     position: relative;
     padding: 0.75em 0;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet label.selected {
     font-weight: bold;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet label:hover {
     cursor: pointer;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet label.disabled {
     opacity: 0.5;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet label.disabled.selected {
     opacity: 1;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet label.disabled:hover {
     cursor: default;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet label input[type="checkbox"] {
     margin-right: 0.5em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet em {
     width: 1em;
     height: 1em;
     font-style: normal;
     position: relative;
     display: none;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet em:before {
     position: absolute;
     top: 0;
     right: 0;
     font-size: 0.7em;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet em.shown {
     display: inline-block;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet em.error {
     color: #d00;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet em.error:before {
     content: "\f071";
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet em.changed {
     color: #cb8e1a;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet em.changed:before {
     content: "\f303";
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet + .cmRoleSet {
     border-top: 1px solid #c8ddde;
     padding-top: 1em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .roleNotes {
     font-size: 0.7em;
     color: #d00;
     display: none;
     width: 100%;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .roleNotes .shown {
     display: block;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .roleNotes em.error {
     width: 1em;
     height: 1em;
     font-style: normal;
     color: #d00;
     position: relative;
     display: inline-block;
     padding-right: 0.25em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .roleNotes em.error:before {
     position: absolute;
     top: 0;
     left: 0;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f071";
}
 .cmContainer .cmRow.expanded .cmRowSummary .cmColSummary .cmExpander span {
     transform: rotate(-180deg);
     margin-top: 0px;
}
 .cmContainer .cmRow.expanded .cmRowSummary .cmColSummary .cmName {
     font-weight: bold;
}
 .cmContainer .cmRow.cmContactTypeCustomer .cmRowSummary .cmContactType {
     color: #bbb;
}
 .cmContainer .cmRow.cmContactTypeCustomer .cmRowSummary .cmContactType:before {
     content: "\f1ad";
}
 .cmContainer .cmRow.cmContactTypePurchaser .cmRowSummary .cmContactType {
     color: #8bae59;
}
 .cmContainer .cmRow.cmContactTypePurchaser .cmRowSummary .cmContactType:before {
     content: "\f51e";
}
 .cmContainer .cmRow.cmContactTypeNew .cmRowSummary {
     color: #cb8e1a;
}
 .cmContainer .cmRow.cmContactTypeNew .cmRowSummary .cmContactType {
     color: #cb8e1a;
}
 .cmContainer .cmRow.cmContactTypeNew .cmRowSummary .cmContactType:before {
     content: "\f005";
}
 .cmContainer .cmRow.cmContactTypeInfoChanged .cmRowSummary .cmContactType {
     color: #cb8e1a;
}
 .cmContainer .cmRow.cmContactTypeInfoChanged .cmRowSummary .cmContactType:before {
     content: "\f303";
}
 .cmContainer .cmRow.cmContactTypeError .cmRowSummary {
     color: #d00;
}
 .cmContainer .cmRow.cmContactTypeError .cmRowSummary .cmContactType {
     color: #d00;
}
 .cmContainer .cmRow.cmContactTypeError .cmRowSummary .cmContactType:before {
     content: "\f071";
}
 .cmContainer .cmRow.cmContactTypeDeleted .cmRowSummary {
     color: #ccc;
}
 .cmContainer .cmRow.cmContactTypeDeleted .cmRowSummary .cmContactType {
     color: #777;
}
 .cmContainer .cmRow.cmContactTypeDeleted .cmRowSummary .cmContactType:before {
     content: "\f057";
}
 .cmContainer.expandedInitial .cmRowDetailsContainer {
     display: block;
     height: auto;
}
 .cmContainer .cmRow {
     transition: background 0.25s, color 0.25s;
}
 .cmContainer .cmRow.cmContactTypePurchaser {
     background: #f8ffee;
}
 .cmContainer .cmRow.cmContactTypePurchaser .cmRowDetailsContainer .cmRowDetails {
     background: #dfe8d9;
}
 .cmContainer .cmRow.cmContactTypeError {
     background: #fbeaea;
}
 .cmContainer .cmRow.cmContactTypeError .cmRowDetailsContainer .cmRowDetails {
     background: #fbdada;
}
 .cmContainer .cmRow .cmRowSummary {
     background: transparent;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .roleNotes.shown {
     display: block;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .roleError {
     color: #d00;
     font-size: 0.9em;
     margin: 0;
     padding: 0;
     height: 0;
     overflow-y: hidden;
     transition: height 0.25s;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel h3 {
     margin-bottom: 0.5em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel.error h3 {
     color: #d00;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel.error .infoIcon {
     background: #d00;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel.error .roleError {
     height: 2em;
}
 .cmContainer .twoCol .oneCol input[type="checkbox"] {
     width: 1em;
     height: 1em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .original {
     opacity: 0.65;
     padding-bottom: 0.25em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .original label {
     padding-top: .05em;
}
 .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .original span {
     padding-top: 0;
     font-size: .9em;
}
 .modalConfirm .expandableContainer .container .popupContent p:first-of-type {
     margin-top: 0;
}
 .modalConfirm .expandableContainer .container .popupContent *:first-child {
     margin-top: 0;
}
 @media screen and (max-width: 960px) {
     .contractAll {
         display: block;
    }
}
 @media screen and (max-width: 480px) {
     .mobile {
         display: block;
    }
     .cmContainer .cmReadOnlyDetails {
         display: none;
    }
     .cmContainer .cmRolesContainer {
         padding: 0.5em;
         background: rgba(255,255,255,0.5);
    }
     .cmContainer .cmContactContainer {
         padding: 0.5em;
         background: rgba(255,255,255,0.5);
    }
     .cmContainer .cmRowHeader {
         background: transparent;
         color: inherit;
    }
     .cmContainer .cmRowHeader .cmColRoles {
         float: none;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole:before,
     .cmContainer .cmRowHeader .cmColRoles .cmColRole:after {
         display: table;
         content: "";
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole:after {
         clear: both;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole,
     .cmContainer .cmRowHeader .cmColRoles .cmColRole.mandatory,
     .cmContainer .cmRowHeader .cmColRoles .cmColRole.selected {
         float: none;
         width: auto;
         color: var(--text-color);
         background: #fff;
         border: 1px solid #ddd;
         border-top: none;
         padding: 0.5em;
         position: relative;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole.mandatory.error {
         background: #fbeaea;
         color: #d00;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole.mandatory.error .cmCount {
         padding-top: 0.2em;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole.cmColRoleSectionHeader {
         background: #759a9e;
         color: #fff;
         font-weight: bold;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole .cmInfo {
         float: left;
         background: var(--input-color);
         color: #fff;
         margin: 0.1em 0.5em 0 0;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole .cmName {
         height: auto;
         display: inline-block;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole .cmName span {
         transform: rotate(0deg);
         white-space: normal;
    }
     .cmContainer .cmRowHeader .cmColRoles .cmColRole .cmCount {
         position: absolute;
         top: 0.5em;
         right: 0.5em;
         padding: 0;
    }
     .cmContainer .cmRow {
         border: 1px solid #ddd;
    }
     .cmContainer .cmRow + .cmRow {
         border-top: none;
    }
     .cmContainer .cmRow .cmRowSummary .cmColRoles {
         display: none;
    }
     .cmContainer .cmRow .cmRowSummary .cmColSummary .cmExpander {
         font-size: 12px;
         padding: 1px 0 0 2px;
         width: 16px;
         height: 16px;
    }
     .cmContainer .cmRow .cmRowSummary .cmColSummary .cmExpander span {
         width: 12px;
         height: 12px;
         font-size: 12px;
    }
     .cmContainer .cmRow .cmRowSummary .cmColSummary .cmRoles {
         display: block;
         font-size: 0.9em;
         padding-top: 0.5em;
         opacity: 0.6;
    }
     .cmContainer .cmRow .cmRowSummary .cmContactType {
         width: 100%;
         box-sizing: border-box;
         text-align: left;
         padding-left: 28px;
    }
     .cmContainer .cmRow .cmRowSummary .cmContactType:before {
         right: auto;
         left: 28px;
    }
     .cmContainer .cmRow .cmRowSummary .cmContactType span {
         padding-left: 16px;
    }
     .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel {
         margin: 1.5em 0;
    }
     .cmContainer.cmChild .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel {
         margin: 0 0 0.5em 0;
    }
     .cmContainer .twoCol .oneCol label,
     .twoCol .oneCol input,
     .twoCol .oneCol select,
     .twoCol .oneCol textarea,
     .twoCol .oneCol > div > span,
     .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails .cmRolePanel .cmRoleSet label {
         width: 100%;
         padding-right: 0;
    }
     .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails input.pairedFieldsMain,
     .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails select.pairedFieldsMain {
         width: 63%;
    }
     .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails input.pairedFieldsSecondary,
     .cmContainer .cmRow .cmRowDetailsContainer .cmRowDetails select.pairedFieldsSecondary {
         width: 35%;
    }
     .twoCol .oneCol label,
     .twoCol .oneCol input,
     .twoCol .oneCol select,
     .twoCol .oneCol textarea,
     .twoCol .oneCol > div > span,
     .twoCol .oneCol label + .mce-tinymce.mce-container.mce-panel {
         width: 100%;
    }
}

 .convContainer:before, 
 .convContainer:after {
     content: "";
     display: table;
}
 .convContainer:after {
     clear: both;
}
 .convContainer .convHeader:before,
 .convContainer .convHeader:after {
     content: "";
     display: table;
}
 .convContainer .convHeader:after {
     clear: both;
}
 .convContainer .convHeader h2 {
     margin: 0;
     padding: 0.25em 0 0.25em 0;
     line-height: 1em;
     float: left;
}
 .convContainer .convHeader button.convButtonShowReplyPanel {
     float: left;
     margin-left: 1em;
     padding: 10px 15px;
}
 .convContainer .convHeader .buttons {
     float: right;
}
 .convContainer .convHeader .buttons button {
     padding: 10px 12px 10px 37px;
     border-radius: 10px;
     position: relative;
     margin-left: 10px;
     margin-right: 0;
}
 .convContainer .convHeader .buttons button i {
    font-style: normal;
 }

 .convContainer .convHeader .buttons button.off {
     background: #91b6b9;
     color: #fff;
}
 .convContainer .convHeader .buttons button.off:hover,
 .convContainer .convHeader .buttons button.off:focus {
     background: var(--text-color);
     color: #fff;
}
 .convContainer .convHeader .buttons button.disabled {
     background: #91b6b9;
     color: #e9f2f1;
}
 .convContainer .convHeader .buttons button.disabled:hover {
     background: #91b6b9;
     cursor: default;
}
 .convContainer .convHeader .buttons button:before {
     position: absolute;
     left: 12px;
     top: 10px;
     font-size: 1em;
     font-family: "Font Awesome 5 Free";
     content: "";
}
 .convContainer .convHeader .buttons button.follow:before {
     content: "\f024";
}
 .convContainer .convHeader .buttons button.copiedContacts:before {
     content: "\f500";
}
 .convContainer .convHeader .buttons button.copiedExternals:before {
     content: "\f0e0";
}
 .convContainer label.conv_confidential.checked {
     color: #cb8e1a;
     font-weight: bold;
}
 .conversationStreamPanel {
     transition: opacity 0.5s;
}
 .conversationStreamPanel.withFileUpload.dragOver {
     opacity: 0.5;
}
 .conv_fileContainer .convFileContainerInner {
     padding-top: 1em;
}
 .conv_fileContainer .fileUploadButton {
     margin: 0.5em 0 0 0;
     float: left;
}
 .conv_fileContainer .filesToolTip {
     display: inline-block;
     font-size: 0.9em;
}
 .conv_fileContainer .filesToolTip p {
     margin: 0;
     font-size: 0.95em;
     padding: 0;
}
 .convFileUploadForm {
     display: flex;
     align-items: center;
}
 .convFormContainer .reply .replyPanelIntro {
     padding-right: 50px;
}
 .convFormContainer .reply h2 {
     margin-top: 0;
}
 .convFormContainer .reply p {
     font-size: 0.9em;
}
 .convFormContainer .reply label {
     display: none;
}
 .convFormContainer .reply select {
     display: block;
     width: 100%;
     margin-bottom: 1em;
}
 .addFileButton {
     float: left;
}
 .queuedFile {
     border-radius: 1em;
     padding: 0.5em;
     box-sizing: border-box;
     margin: 0 auto 0 0;
     position: relative;
     background: #fff;
     margin-bottom: 1em;
     border: 1px solid #ccc;
}
 .queuedFile.uploading {
     background: #436e70;
     color: #fff;
     height: 2em;
}
 .queuedFile .queuedFileInnerContainer {
     display: flex;
     align-items: center;
     text-align: left;
     padding: 0.25em;
}
 .queuedFile .queuedFileInnerContainer .fileInfo {
     box-sizing: border-box;
     padding-right: 10px;
}
 .queuedFile p.uploading {
     position: relative;
     margin: 0;
     z-index: 2;
     line-height: 1em;
}
 .queuedFile p.fileName {
     margin: 0;
     z-index: 2;
     font-weight: bold;
     overflow-x: hidden;
}
 .queuedFile p.fileMeta {
     font-size: 0.8em;
     color: #b5c0bf;
     margin: 0.5em 0 0 0;
}
 .queuedFile p.fileMeta a {
     text-decoration: none;
     font-weight: normal;
     color: #b5c0bf;
}
 .queuedFile p.fileMeta a:hover, 
 .queuedFile p.fileMeta a:focus {
     text-decoration: underline;
}
 .queuedFile div.uploadBar {
     position: absolute;
     top: 0;
     left: 0;
     border-radius: 1em;
     background: #08a500;
     box-sizing: border-box;
     width: 40px;
     height: 2em;
     z-index: 1;
}
 .queuedFile button.deleteButton {
     background: #ba0000;
     position: relative;
     width: 30px;
     height: 30px;
}
 .queuedFile button.deleteButton:hover, 
 .queuedFile button.deleteButton:focus {
     background: #900000;
}
 .queuedFile button.deleteButton:before {
     top: 7px;
     right: 8px;
     position: absolute;
     width: 15px;
     height: 15px;
     font-family: "Font Awesome 5 Free";
     content: "\f00d";
     font-size: 15px;
     text-align: center;
     color: #fff;
     transition: background 0.25s;
}
 .convFormExpander {
     position: relative;
}
 .convFormExpander button.convButtonExpand {
     margin-bottom: 0;
}
 .convMessagesContainer {
     background: #d3e0df;
     box-sizing: border-box;
     padding: 1em;
}
 .messageContainer {
     padding-bottom: 0.5em;
}
 .messageContainer:before, 
 .messageContainer:after {
     content: "";
     display: table;
}
 .messageContainer:after {
     clear: both;
}
 .messageContainer.padded {
     padding-bottom: 1.5em;
}
 .messageContainer.messageAppearing {
     height: 0;
     overflow: hidden;
     opacity: 0;
}
 .message {
     border-radius: 1em;
     padding: 1em;
     box-sizing: border-box;
     margin: 0 auto 0 0;
     position: relative;
     min-height: 3.5rem;
     background: #e9f2f1;
     width: 90%;
     background: rgba(255,255,255,0.5);
     color: #8fa1a2;
     font-size: 0.9em;
}
 .message.me {
     margin: 0 0 0 auto;
}
 .message img {
     max-width: 100%;
     height: auto;
}
 .message .messageInnerContainer {
     display: flex;
     align-items: center;
}
 .message em.confidential {
     color: #cb8e1a;
}
 .message .action {
     margin-right: 150px;
}
 .message.fileAdd .file {
     display: block;
     text-decoration: none;
     margin-top: 10px;
     background: #fff;
     border-radius: 15px;
     transition: background 0.25s;
     padding: 15px 90px 20px 15px;
     position: relative;
}
 .message.fileAdd .file:hover, 
 .message.fileAdd .file:focus {
     background: #d3e0df;
     cursor: pointer;
}
 .message.fileAdd .file:before {
     top: 15px;
     right: 15px;
     position: absolute;
     width: 30px;
     height: 30px;
     font-family: "Font Awesome 5 Free";
     content: "\f019";
     font-size: 30px;
     text-align: center;
     color: #fff;
     background: #759a9e;
     border-radius: 10px;
     padding: 10px;
     transition: background 0.25s;
}
 .message.fileAdd .file:hover:before, 
 .message.fileAdd .file:focus:before {
     background: var(--text-color);
}
 .message.fileAdd .file.fileArchived {
     background: #d3e0df;
}
 .message.fileAdd .file.fileArchived:hover, 
 .message.fileAdd .file.fileArchived:focus {
     background: #d3e0df;
     cursor: default;
}
 .message.fileAdd .file.fileArchived:before {
     opacity: 0.25;
}
 .message.fileAdd .file.fileArchiving {
     background: #ffe7d4;
}
 .message.fileAdd .file.fileArchiving:hover, 
 .message.fileAdd .file.fileArchiving:focus {
     background: #ffe7d4;
     cursor: default;
}
 .message.fileAdd .file.fileArchiving:before {
     opacity: 0.25;
}
 .message.fileAdd .file .fileMeta {
     font-size: 0.9em;
}
 .message.fileAdd .file .fileName {
     padding-bottom: 0.5em;
}
 .message.fileRemove .file {
     display: block;
     text-decoration: none;
     margin-top: 10px;
     background: #fff;
     border-radius: 15px;
     transition: background 0.25s;
     padding: 15px 90px 20px 15px;
     position: relative;
}
 .message .icon {
     width: 30px;
     height: 30px;
     position: relative;
     padding-right: 15px;
     flex-shrink: 0;
}
 .message .icon:before {
     top: 0;
     left: 0;
     position: absolute;
     width: 30px;
     height: 30px;
     font-family: "Font Awesome 5 Free";
     content: "";
     font-size: 30px;
     text-align: center;
     color: #c3cfce;
}
 .message.comment {
     background: #fff;
     color: var(--text-color);
     overflow-x: auto;
}
.message.comment p a {
    word-wrap: anywhere;
}

 .message.comment .icon:before {
     content: "\f075";
}
 .message.comment.me .icon:before {
     color: var(--text-color);
     transform: scaleX(-1);
}
 .message.error {
     background: #f7d0d0;
     color: #ba0000;
     width: 100%;
}
 .message.error .icon:before {
     content: "\f057";
     color: #ba0000;
}
 .message.assign .icon:before {
     content: "\f007";
}
 .message.fileAdd .icon:before {
     content: "\f15b";
}
 .message.fileRemove .icon:before {
     content: "\f1c3";
}
 .message.copiedContactAdd .icon:before {
     content: "\f500";
}
 .message.other .icon:before {
     content: "\f013";
}
 .message.warning .icon:before {
     content: "\f071";
     color: #ba0000;
}
 .message.statusChange .icon:before {
     content: "\f013";
}
 .message.priorityChange .icon:before {
     content: "\f338";
}
 .message.categoryChange .icon:before {
     content: "\f013";
}
 .message.subjectChange .icon:before {
     content: "\f013";
}
 .message .person {
     font-weight: bold;
}
 .message .date {
     position: absolute;
     right: 15px;
     top: 15px;
     color: #b5c0bf;
}
 .message.error .date {
     color: #ba0000;
}
 .message.streamTitleShown {
     padding-top: 50px;
}
 .message.streamTitleShown .date {
     top: 50px;
}
 .message.streamTitleShown .streamTitle {
     color: #759a9e;
     background: #e9f2f1;
     position: absolute;
     top: 0px;
     left: 0;
     padding-top: 8px;
     padding-left: 32px;
     height: 40px;
     width: 100%;
     box-sizing: border-box;
     border-top-left-radius: 1em;
     border-top-right-radius: 1em;
}
 .message.streamTitleShown .streamTitle:before {
     top: 11px;
     left: 11px;
     position: absolute;
     width: 15px;
     height: 15px;
     font-family: "Font Awesome 5 Free";
     content: "\f21b";
     font-size: 15px;
     text-align: center;
     color: #759a9e;
}
 .convMessageSubmitting p {
     margin: 0;
}
 .convMessageSubmitting .message {
     width: 100%;
}
 .convMessageError p {
     margin: 0;
}
 .convMessageError .message {
     width: 100%;
}
 .convMessageError button.convButtonReconnect {
     position: absolute;
     top: 1em;
     right: 1em;
     padding: 7px 15px;
}
 .convFileManagerFiles td.file em {
     display: inline-block;
     width: 25px;
     height: 20px;
     position: relative;
     font-style: normal;
}
 .convFileManagerFiles td.file em:before {
     position: absolute;
     left: 2px;
     top: 0;
     font-size: 20px;
     font-family: "Font Awesome 5 Free";
     content: "\f15b";
}
 .convFileManagerFiles td.file.fileArchived em:before {
     color: #c3cfce;
     content: "\f1c3";
}
 a.button.addFile.goToAddFiles {
     margin-bottom: 1.5em;
}
 @keyframes newmessage {
     from {
         background-color: #ffeeab;
    }
     to {
         background-color: #e9f2f1;
    }
}
 @keyframes newmessagecomment {
     from {
         background-color: #ffeeab;
    }
     to {
         background-color: #fff;
    }
}
 .switcherOption {
     opacity: 0.5;
     transition: opacity 0.25s;
}
 .switcherOption.switcherOptionSelected {
     opacity: 1;
}
 .switcherOption:hover {
     cursor: pointer;
}

.multiCol > div > span.invoiceComment {
    background: rgba(255,255,255,0.25);
    padding: 0.5em;
    box-sizing: border-box;
}

.multiCol > div > span.invoiceComment:hover {
    background: rgba(255,255,255,0.5);
    cursor: pointer;
}

.invoiceAssignedPeriod {
    background: rgba(255,255,255,0.25);
    padding: 0.5em 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.invoiceAssignedPeriod p {
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 480px) {
    .invoiceAssignedPeriod {
        display: block;
    }
}


label.requiredField {
  position: relative;
}

label.requiredField:after {
    content: " *";
    color: #cb8e1a;    
}

.requiredFieldNote {
    font-size: 0.8em;
    color: #d00;
    color: #cb8e1a;
}


 .expandableContainer .container button.switcher, 
 button.switcher {
     height: 20px;
     border-radius: 10px;
     padding: 3px;
     line-height: 14px;
     font-size: 14px;
     width: 44px;
     position: relative;
     border: 1px solid #e9f2f1;
     background: #fff;
     margin-left: 5px;
     margin-right: 5px;
}
 button.switcher:hover {
     background: #d3e0df;
}
 button.switcher:after {
     content: "";
     position: absolute;
     top: 2px;
     left: 1px;
     width: 16px;
     height: 16px;
     background: #cb8e1a;
     border-radius: 50%;
     transition: left 0.25s;
}
 button.switcher.switcherOff:after {
     left: 26px;
}
 button.switcher span {
     visibility: hidden;
}


/* Invoice Popups: Start */
#signpopup_signatory_container > div,
#raisepopup_external_access_container > div {
    display: flex;
}

#signpopup_signatory_container input,
#raisepopup_external_access_container input, 
#signpopup_signatory_container select,
#raisepopup_external_access_container select,
#signpopup_signatory_container select,
#raisepopup_external_access_container button {
    float: none;
}

#signpopup_signatory_container input,
#raisepopup_external_access_container input,
#signpopup_signatory_container select,
#raisepopup_external_access_container select {
    margin-right: 0.5em;
}

#signpopup_signatory_container button,
#raisepopup_external_access_container button {
    width: 40px;
    padding: 12px 15px;
    height: 2.5em;
    line-height: 1em;
}

.modalPopup select.invoiceForm_datePickerYear {
    width: 27%;
}

.modalPopup select.invoiceForm_datePickerMonth {
    width: 20%;
}

.modalPopup select.invoiceForm_datePickerDay {
    width: 20%;
}
/* Invoice Popups: End */


/* Invoice List: START */
.invoices_container .packageFileEdit > tbody > tr > td {
    position: relative;
}
.expandableContainer .container .expandableContainer .expandableContainer.packageFileEdit.agreementPeriodDetails {
    margin-bottom: 1em;
}

.invoices_container span.iconInvoiceStatus {
    position: absolute;
    top: 0.75em;
    right: 0.75em;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.25em;
    font-family: "Noa";
        font-weight: 400;
} 

.invoices_container span.iconInvoiceStatus:before {
    left: auto;
    right: 0;
    top: 0.1em;
    background-size: 20px;
    width: 20px;
    height: 20px;
}

.invoices_container .invoiceName {
    position: relative;
    padding: .5em 1em .5em 2.2em;
}

.invoices_container .invoiceNumber {
    padding-bottom: 0;
    display: inline-block;
}

.invoices_container .invoiceDescription {
    position: relative;
}

.invoices_container .invoiceExpander {
    position: relative;
    padding-right: 0;
}
.invoices_container .invoiceNumberWithExpander {
    position: relative;
    padding: .5em 1em .5em 2.75em;       
}

.expandableContainer .invoices_container .cmExpander {
    border-radius: 50%;
    box-sizing: border-box;
    padding: 7.5px;
    width: 30px;
    height: 30px;
    margin: 0;
}

.invoices_container .cmExpander span {
    display: block;
    width: 15px;
    height: 15px;
    font-size: 15px;
    margin: -3px 0 0 0;
    text-align: center;
    transform: rotate(0deg);
    transition: all 0.25s;
}

.invoices_container .expanded .cmExpander span {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.invoices_container .cmExpander span:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0d7";
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    font-size: 20px;
}

@media screen and (max-width: 480px) {

    .invoices_container .invoiceNumberWithExpander {
        padding: .5em 1em .5em 2.75em;       
    }

    .expandableContainer .invoices_container .cmExpander {
        padding: 2px 0 0 5px;
        width: 20px;
        height: 20px;
    }

    .invoices_container .cmExpander span {
        width: 10px;
        height: 13px;
        font-size: 10px;
        margin: -1px 0 0 0;
    }

    .invoices_container .cmExpander span:before {
        width: 10px;
        height: 10px;
        top: 0;
        left: 0;
        font-size: 15px;
    }
}




.invoices_container table tr th {
    box-sizing: border-box;
    padding: 0.75em 1em;
}

.invoices_container table tr td {
    box-sizing: border-box;
    padding: 1.5em 1em;
}



.invoices_container table tr.invoiceRow_cancelled,
.invoices_container table tr.inactive
 {
    opacity: 0.5;
}

.invoices_container table tr th.invoiceColName {
    width: 40%;
}

.invoices_container table tr th.invoiceColPeriodStart {
    width: 15%;
}

.invoices_container table tr th.invoiceColRaiseDate {
    width: 15%;
}

.invoices_container table tr th.invoiceColStatus {
    width: 30%;
}

.invoices_container table tbody tr.packageContents > td .packageFilesContainer table {
    margin-top: 0;
}

.expandableContainer .container .expandableContainer.standard > .container {
    background: #e9f2f1;
}

.invoices_container .packageFilesContainer {
    padding-top: 1em;
}

.content .invoiceButtons {
    padding-bottom: 0.5em;
}

.content .invoiceButtons a.button {
    margin-bottom: 0;
}

.content .invoiceButtons .buttonSet {
    display: inline-block;
    border-right: 2px solid rgba(0,0,0,0.15);
    margin: 0;
    padding: 0;
    padding-right: 0em;
    margin-right: 0.5em;
}

.content .invoiceButtons .buttonSet:last-child {
    border-right: 0;
    margin-right: 0;
}

@media screen and (max-width: 480px) {

    .content .invoiceButtons {
        padding-bottom: 1em;
    }

    .content .invoiceButtons .buttonSet {
        display: inline;
    }

    .content .invoiceButtons a.button {
        margin-bottom: 0.75em;
    }
}

/* Invoice List: END */



#raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton, 
#pageContent button.copiedContactsButton {
    padding: 10px 12px 10px 37px;
    border-radius: 10px;
    position: relative;
}

#raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton.off,
#pageContent button.copiedContactsButton.off {
    background: #91b6b9;
    color: #fff;
}

#raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton.off:hover,
#raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton.off:focus,
#pageContent button.copiedContactsButton.off:hover,
#pageContent button.copiedContactsButton.off:focus {
    background: var(--text-color);
    color: #fff;
}

#raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton.disabled,
#pageContent button.copiedContactsButton.disabled {
    background: #91b6b9;
    color: #e9f2f1;
}

#raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton.disabled:hover,
#pageContent button.copiedContactsButton.disabled:hover {
    background: #91b6b9;
    cursor: default;
}

#raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton:before,
#pageContent button.copiedContactsButton:before {
    position: absolute;
    left: 12px;
    top: 10px;
    font-size: 1em;
    font-family: "Font Awesome 5 Free";
    content: "";
}

#raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton:before,
#pageContent button.copiedContacts:before {
    content: "\f500";
}


select.listWithButton {
    width: calc(100% - 45px);
}

select.listWithButton + button{
    width: 40px;
    padding: 12px 15px;
    height: 2.5em;
    line-height: 1em;
    margin-left: 5px;
}


/* Action Message: Start */

.actionMessage {
    position: relative;
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.actionMessage p {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actionMessage p:before {
    font-family: "Font Awesome 5 Free";
    left: 0;
    font-size:40px;
    line-height: 40px;
    width: 30px;
    height: 40px;
    margin-right: 20px;
    font-weight: 900;
    box-sizing: border-box;
    text-align: center;
    opacity: 0.5;
}

.actionMessage div {
    text-align: right;
    white-space: nowrap;
    margin-left: 10px;
}

.actionMessage div a.button {
    white-space: nowrap;
    margin: 0;
    margin-left: 10px;
    padding: 10px 20px;
}


.actionMessage {
    background: #d3e0df;
    color: var(--text-color);
}
.actionMessage div a.button {
    background: var(--text-color);
}
.actionMessage div a.button:hover {
    background: #394546;
}

.actionMessage.warning {
    background: #ffe7d4;
    color: #a5701b;
}
.actionMessage.warning div a.button {
    background: #a5701b;
}
.actionMessage.warning div a.button:hover {
    background: #845717;
}

.actionMessage.issue {
    background: #f7d0d0;
    color: #ba0d00;
}
.actionMessage.issue div a.button {
    background: #ba0d00;
}
.actionMessage.issue div a.button:hover {
    background: #770300;
}

.actionMessage.good {
    background: #e4f7d7;
    color: #359c1c;
}
.actionMessage.good div a.button {
    background: #359c1c;
}
.actionMessage.good div a.button:hover {
    background: #394546;
}

.actionMessage.info {
    background: #d3e0df;
    color: var(--text-color);
}
.actionMessage.info div a.button {
    background: var(--text-color);
}
.actionMessage.info div a.button:hover {
    background: #394546;
}


.actionMessage p:before {
    content: "\f0f3";
}
.actionMessage.alertIcon p:before {
    content: "\f06a";
}
.actionMessage.addIcon p:before {
    content: "\f055";
}
.actionMessage.infoIcon p:before {
    content: "\f05a";
}
.actionMessage.infoIcon p:before {
    content: "\f058";
}
.actionMessage.warningIcon p:before {
    content: "\f071";
}
.actionMessage.issueIcon p:before {
    content: "\f057";
}


@media screen and (max-width: 600px) {
    .actionMessage {
        display: block;
        padding: 5px 10px;
    }
    .actionMessage div {
        text-align: left;

    }

    .actionMessage p {
        align-items: start;
        margin-bottom: 0.75em;
    }

    .actionMessage p:before {
        left: 0;
        font-size: 30px;
        line-height: 30px;
        width: 20px;
        height: 30px;
        margin-right: 20px;
    }

    .actionMessage div a.button {
        margin-left: 30px;
        padding: 8px 15px;
        margin-bottom: 0.75em;
    }
}

/* Action Message: End */





/* Contract editor: START */
.contractEditor {
    background: #fff;
    padding: 0;
    border-radius: 1em;
}

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

.contractSection:after {
    clear: both;    
}


.contractSectionContainer.appeared {
    background: #fff;
    animation-name: fadeBackground;
    animation-duration: 1.5s;
}

@keyframes fadeBackground {
    0%   { background : #e4f7d7 }
    100% { background: #fff }
}

.contractSectionContent {
    float: right;
    box-sizing: border-box;
    padding: 0;
    width: calc(100% - 140px);
    transition: background 0.25s;
    min-height: 100px;
}

.contractSectionContent > :first-child {
    padding-top: 0;
    margin-top: 0;
}

.contractSectionContent:hover,
.contractSectionContent:focus {
    background: #e9f2f1;
    cursor: pointer;
}

.contractEditor.disabled .contractSectionContent:hover,
.contractEditor.disabled .contractSectionContent:focus {
    background: #fff;
    cursor: default;
}

.contractSectionContent .newPage {
    height: 2px;
    position: relative;
    background: #d3e0df;
    margin-top: 10px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.contractSectionContent .newPage:before {
    position: absolute;
    top: -6px;
    left: 0;
    font-size: 14px;
    line-height: 14px;
    width: 100%;
    text-align: center;
    content: '[NEW PAGE]';
    color: #888;
}


.contractSectionNumbering {
    float: right;
    width: 80px;
    opacity: 1;
    transition: opacity 0.25s;
    text-align: center;
    font-weight: bold;
    margin-right: 10px;
}

.contractSection:hover .contractSectionNumbering,
.contractSection:focus .contractSectionNumbering {
    opacity: 1;
}

.contractSection .contractSectionNumbering .sectionNumber_0 {
    font-size: 1.5em;
}

.contractSection .contractSectionNumbering .sectionNumber_0.numberHidden,
.contractSection .contractSectionNumbering .sectionNumber_1.numberHidden,
.contractSection .contractSectionNumbering .sectionNumber_2.numberHidden,
.contractSection .contractSectionNumbering .sectionNumber_3.numberHidden {
    text-decoration: line-through;
    opacity: 0.5;
}

.contractSection .contractSectionNumbering .sectionNumber_1 {
    font-size: 1.25em;
}

.expandableContainer .container .contractSectionNumbering button {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
}

.expandableContainer .container .contractSectionNumbering button.moveLevelUp,
.expandableContainer .container .contractSectionNumbering button.toggleSectionNumberShown {
    margin-right: 5px;
}



.contractSection .contractSectionNumbering button {
    opacity: 0.25;
    transition: opacity 0.25s;
}

.contractSection:hover .contractSectionNumbering button,
.contractSection:focus .contractSectionNumbering button {
    opacity: 1;
}

.contractSectionNumbering button.newPageOn {
    background-color: #0a8400;
}

.contractSectionNumbering button.sectionNumberHidden {
    background-color: #900000;
}

.contractSectionNumbering button.sectionNumberShown,
.contractSectionNumbering button.newPageOff {
    background-color: #e9f2f1;
}

.contractSectionNumbering button:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    font-family: "Font Awesome 5 Free";
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    content: "\f0d8";
}

.contractSectionNumbering button.moveLevelUp:before {
    content: "\f0d9";
}

.contractSectionNumbering button.moveLevelDown:before {
    content: "\f0da";
}

.contractSectionNumbering button.sectionNumberShown:before {
    content: "\f06e";
    content: "\f070";
}

.contractSectionNumbering button.sectionNumberHidden:before {
    content: "\f070";
}

.contractSectionNumbering button.newPageOn:before {
    content: "\f477";
}

.contractSectionNumbering button.newPageOff:before {
    content: "\f477";
}



.contractSectionMover {
    float: right;
    width: 50px;
    padding: 0 10px;
    box-sizing: border-box;
    clear: both;
    text-align: center;
}

.contractSectionMover > div {
    opacity: 0.25;
    transition: opacity 0.25s;        
}

.contractSection:hover .contractSectionMover > div,
.contractSection:focus .contractSectionMover > div {
    opacity: 1;
}

.expandableContainer .container .contractSectionMover button {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
}

.contractSectionMover button:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    font-family: "Font Awesome 5 Free";
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    content: "\f0d8";
}

.contractSectionMover button.moveSectionUp:before {
    content: "\f0d8";
}

.contractSectionMover button.moveSectionDown:before {
    content: "\f0d7";
}

.contractSectionMover button.deleteSection:before {
    content: "\f00d";
}

.contractSection.editorShown .contractSectionContent {
    width: calc(100% - 90px);
}

.contractSection.editorShown .contractSectionMover {
    display: none;
}

.contractSectionAdderButton {
    width: 100%;
    background: transparent;
    position: relative;
    opacity: 0.25;
}

.contractSectionAdderButton:hover,
.contractSectionAdderButton:focus {
    background: #e9f2f1;
    opacity: 1;
}


.contractEditor.disabled .contractSectionAdderButton:hover,
.contractEditor.disabled .contractSectionAdderButton:focus {
    background: #fff;
    cursor: default;
}

.contractSectionAdderLine {
    width: 100%;
    height: 2px;
    position: absolute;
    background: #d3e0df;
    left: 0;
}

.contractSectionAdderPlus {
    width: 20px;
    height: 20px;
    position: absolute;
    background: #d3e0df;
    left: calc(50% - 10px);
    top: -10px;
    background: #759a9e;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
}

#signatoriesList tr {
    vertical-align: middle;
}

.contractSignatoryMover {
    float: right;
    width: auto;
    padding: 0;
    box-sizing: border-box;
    clear: both;
    text-align: center;
}

.contractSignatoryMover > div {
    opacity: 0.25;
    transition: opacity 0.25s;        
}

.signatoriesTable .signatorySigField {
    opacity: 0.2;
    display: block;
    padding-bottom: 2em;
}

.signatoriesTable .signatoryDateField {
    opacity: 0.2;
    display: block;
    padding-bottom: 1em;
}

.signatoriesTable .signatoryField {
    font-weight: bold;
    display: block;
}


#signatoriesList tr:hover .contractSignatoryMover > div,
#signatoriesList tr:focus .contractSignatoryMover > div {
    opacity: 1;
}

.expandableContainer .container .contractSignatoryMover button {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
}

.contractSignatoryMover button:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    font-family: "Font Awesome 5 Free";
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    content: "\f0d8";
}

.contractSignatoryMover button.moveSignatoryUp:before {
    content: "\f0d8";
}

.contractSignatoryMover button.moveSignatoryDown:before {
    content: "\f0d7";
}

.contractSignatoryMover button.deleteSignatory:before {
    content: "\f00d";
}

#negotiators_customer tr:hover .contractSignatoryMover > div,
#negotiators_customer tr:focus .contractSignatoryMover > div,
#negotiators_qw tr:hover .contractSignatoryMover > div,
#negotiators_qw tr:focus .contractSignatoryMover > div {
    opacity: 1;
}

.contractSignatoryMover button.deleteNegotiator:before {
    content: "\f00d";
}


.contractConfig > div > h2:first-child {
    margin-top: 0;
}

#contract_templateComparison th,
#contract_templateComparison td {
    width: 45%;
}

#contract_templateComparison th.actions,
#contract_templateComparison td.actions {
    width: 10%;
}


#contract_templateComparison.hideNonChangedSections tr.contractCompareRow  {
    display: none;
}

#contract_templateComparison.hideNonChangedSections tr.contractCompareRow.changed{
    display: table;
}

.contractCompareRow.contentChanged {
    background: #ffe;
}

.contractCompareRow em {
    font-style: normal;
    background: #fe0;
    color: #000;
}

input.contractFieldChanged,
select.contractFieldChanged,
textarea.contractFieldChanged {
    border: 1px solid #cb8e1a;
}

/* Contract editor: END */

/* Questionnaire: START */
.questionnaireSummary {
    width: 100%;
}

.questionnaireSummary > div {
    display: flex;
    justify-content: space-between;
}

.questionnaireSummary > div > * + * {
    text-align: right;
}

.questionnaireSummary > div h3 {
    font-size: 1.5em;
    margin: 0 0 0.4em 0;
}

.questionnaireSummary > div p {
    margin: 0.5em 0 0 0;
    font-size: 0.9em;
}

.questionnaireSummary > div p small {
    font-size: 0.85em;
}

.questionnaireSummary > div span + span {
    margin-left: 1em;
}

.questionnaireActions > .multiCol:first-child {
    padding-top: 0.5em;
}


.uq_editor_answer_points {
    width: 100px;
} 

.uq_editor_answer_action {
    max-width: 170px;
}

.uq_editor_answer_name {
    max-width: 170px;
}

body .uq_editor_buttons button {
    width: 30px;
    height: 30px;
    padding: 0;
    position: relative;
}

body .uq_editor_buttons button.uq_editor_answer_delete {
    margin-left: 1em;
}

.uq_editor_buttons button:before {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    box-sizing: border-box;
    content: "\f00d";
    display: block;
    text-align: center;
    color: #fff;
}

.uq_editor_buttons button.uq_editor_answer_up:before {
    content: "\f0d8";
}

.uq_editor_buttons button.uq_editor_answer_down:before {
    content: "\f0d7";
}


.buttonDeleteAnswer {
     background: #ba0000;
}
.buttonDeleteAnswer:hover {
     background: #900000;
}
.buttonDeleteAnswer:focus {
     background: #900000;
}

.uq_editor_answer_delete.buttonRestoreAnswer:before {
    content: "\f2ea";
}

.questionnaireOldResults {
    width: 100%;
    max-width: 600px;
    padding-bottom: 1em;
}

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

.questionnaireOldResults:after {
    clear: both;
}

.questionnaireOldResults h2 {
    width: 100%;
    float: none;
    clear: both;
}

.questionnaireOldResults label {
    clear: both;
    width: 40%;
    float: left;
    padding-bottom: 1em;
}

.questionnaireOldResults span {
    width: 60%;
    float: left;
    padding-bottom: 1em;
}

.questionnaireOldResults span + h2 {
    padding-top: 0.5em;
}

/* Questionnaire: END */

 @media screen and (max-width: 1260px) {
     #subheader .nav ul li a, 
     #subheader .userNav ul li a {
         font-size: 0.8em;
         padding: 12px 15px;
    }
}
 @media screen and (max-width: 1120px) {
     #subheader .nav ul li a, 
     #subheader .userNav ul li a {
         font-size: 0.8em;
    }
     .gridCol > a {
         width: 32%;
    }
     .gridCol > a:nth-child(1n) {
         margin-right: 2%;
    }
     .gridCol > a:nth-child(3n) {
         margin-right: 0;
    }
     .gridCol.fiveCol > a {
         margin-bottom: 2%;
         padding: 1.25em;
         width: 23.5%;
         height: 230px;
    }
     .gridCol.fiveCol > a:nth-child(1n) {
         margin-right: 2%;
    }
     .gridCol.fiveCol > a:nth-child(4n) {
         margin-right: 0;
    }
     .gridCol.sixCol > a {
         margin-bottom: 2%;
         padding: 1.25em;
         width: 23.5%;
         height: 230px;
    }
     .gridCol.sixCol > a:nth-child(1n) {
         margin-right: 2%;
    }
     .gridCol.sixCol > a:nth-child(4n) {
         margin-right: 0;
    }
}
 @media screen and (max-width: 960px) {
     #pageUpdateMessage.popupMessage {
         width: 100%;
         max-width: 100%;
         left: 0;
    }
     #pageUpdateMessage.popupMessage > .container {
         max-width: 95%;
    }
     .hideDesktop {
         display: block;
    }
     .hideDesktop.invoiceDescription {
         display: inline;
    }
     .hideTablet {
         display: none;
    }
     .qwTabGroup .qwTabMobileWrapper {
         overflow-x: auto;
    }

     #subheader {
         display: none;
    }

    body {
        --page-content-top: 58px;
        --page-content-padding-bottom: 58px;
    }

    body.dev, 
    body.test, 
    body.qa {
        --page-content-top: 91px;
        --page-content-padding-bottom: 91px;
    }

     body.maintenanceMode, 
     body.impersonated {
        --page-content-top: 124px;
        --page-content-padding-bottom: 124px;
    }

    body .statusBarShown {
        --page-content-padding-bottom: 123px;
    }

    body.dev .statusBarShown, 
    body.test .statusBarShown, 
    body.qa .statusBarShown {
        --page-content-padding-bottom: 156px;
    }

    body.maintenanceMode .statusBarShown, 
    body.impersonated .statusBarShown {
        --page-content-padding-bottom: 189px;
    }

     .content .titleAndCustomer .title {
         width: 100%;
    }
     .content .titleAndCustomer .customer {
         width: 100%;
    }
     .content .titleAndCustomer .customer form {
         padding-bottom: 1em;
    }
     .content .listPages {
         margin-bottom: 1em;
    }
     .content .listPages > span.rowCount {
         padding-left: 0;
         display: block;
         display: none;
         clear: both;
         float: none;
    }
     .content .textareaCheckbox {
         position: relative;
         text-align: left;
    }

     .gridCol > a {
         width: 49%;
    }
     .gridCol > a:nth-child(1n) {
         margin-right: 2%;
    }
     .gridCol > a:nth-child(2n) {
         margin-right: 0;
    }
     .gridCol.fiveCol > a {
         margin-bottom: 2%;
         width: 32%;
         height: 200px;
    }
     .gridCol.fiveCol > a:nth-child(1n) {
         margin-right: 2%;
    }
     .gridCol.fiveCol > a:nth-child(3n) {
         margin-right: 0;
    }
     .gridCol.sixCol > a {
         margin-bottom: 2%;
         width: 32%;
         height: 180px;
    }
     .gridCol.sixCol > a:nth-child(1n) {
         margin-right: 2%;
    }
     .gridCol.sixCol > a:nth-child(3n) {
         margin-right: 0;
    }
     .oneCol label {
         width: 100%;
    }
     .oneCol label,
     .oneCol input,
     .oneCol select,
     .oneCol textarea,
     .oneCol > div > span,
     .oneCol label+.mce-tinymce.mce-container.mce-panel {
         width: 100%;
    }
     .oneCol label + .mce-tinymce.mce-container.mce-panel {
         width: 100% !important;
    }
     .oneCol span.mce-txt,
     .oneCol input[type="checkbox"] {
         width: auto;
    }
     .oneCol div {
         padding-bottom: 0.5em;
    }
     .oneCol .star_rating_selector div {
         padding-bottom: 0;
    }
     .oneCol h2 {
         margin-bottom: 0.25em;
    }


     .oneCol.invoiceStatusCol label {
        width: 42%;
     }

     .oneCol.invoiceStatusCol input, 
     .oneCol.invoiceStatusCol select, 
     .oneCol.invoiceStatusCol textarea, 
     .oneCol.invoiceStatusCol > div > span, 
     .oneCol.invoiceStatusCol label + .mce-tinymce.mce-container.mce-panel {
         width: 58%;
    }


     .twoCol > div {
         width: 100%;
         margin-right: 0%;
         float: none;
    }
     .twoCol > div:nth-child(1n+1) {
         clear: both;
         padding-bottom: 1em;
         padding-bottom: 0;
    }
     .twoThirdCol > div {
         width: 100%;
         margin-right: 0%;
         float: none;
    }
     .twoThirdCol > div:nth-child(1n+1),
     .twoThirdCol.flipped > div:nth-child(1n+1) {
         width: 100%;
         clear: both;
         padding-bottom: 1em;
         padding-bottom: 0;
    }
     .twoThirdCol > div:nth-child(2n+1).oneCol label,
     .twoThirdCol > div:nth-child(2n+2).oneCol label,
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol label,
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol label {
         width: 100%;
         padding-bottom: 0;
    }
     .twoThirdCol > div:nth-child(2n+1).oneCol input,
     .twoThirdCol > div:nth-child(2n+1).oneCol select,
     .twoThirdCol > div:nth-child(2n+1).oneCol textarea,
     .twoThirdCol > div:nth-child(2n+1).oneCol span,
     .twoThirdCol > div:nth-child(2n+1).oneCol label + .mce-tinymce.mce-container.mce-panel,
     .twoThirdCol > div:nth-child(2n+2).oneCol input,
     .twoThirdCol > div:nth-child(2n+2).oneCol select,
     .twoThirdCol > div:nth-child(2n+2).oneCol textarea,
     .twoThirdCol > div:nth-child(2n+2).oneCol span,
     .twoThirdCol > div:nth-child(2n+2).oneCol label + .mce-tinymce.mce-container.mce-panel,
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol input,
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol select,
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol textarea,
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol span,
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol label + .mce-tinymce.mce-container.mce-panel,
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol input,
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol select,
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol textarea,
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol span,
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol label + .mce-tinymce.mce-container.mce-panel {
         width: 100%;
    }
     .twoThirdCol > div:nth-child(2n+1).oneCol label + .mce-tinymce.mce-container.mce-panel,
     .twoThirdCol > div:nth-child(2n+2).oneCol label + .mce-tinymce.mce-container.mce-panel,
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol label + .mce-tinymce.mce-container.mce-panel,
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol label + .mce-tinymce.mce-container.mce-panel {
         width: 100% !important;
    }
     .twoThirdCol > div:nth-child(2n+1).oneCol span.mce-txt,
     .twoThirdCol > div:nth-child(2n+1).oneCol input[type="checkbox"],
     .twoThirdCol > div:nth-child(2n+2).oneCol span.mce-txt,
     .twoThirdCol > div:nth-child(2n+2).oneCol input[type="checkbox"],
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol span.mce-txt,
     .twoThirdCol.flipped > div:nth-child(2n+1).oneCol input[type="checkbox"],
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol span.mce-txt,
     .twoThirdCol.flipped > div:nth-child(2n+2).oneCol input[type="checkbox"] {
         width: auto;
    }
     .threeCol > div {
         width: 48%;
         margin-right: 4%;
    }
     .threeCol > div label,
     .threeCol > div input,
     .threeCol > div select,
     .threeCol > div textarea,
     .threeCol > div span {
         width: 100%;
    }
     .threeCol > div span.mce-txt,
     .threeCol > div input[type="checkbox"] {
         width: auto;
    }
     .threeCol > div:nth-child(3n+1) {
         clear: none;
         padding-bottom: 0;
    }
     .threeCol > div:nth-child(3n+3) {
         margin-right: 4%;
    }
     .threeCol > div:nth-child(2n+1) {
         clear: both;
         padding-bottom: 1em;
         padding-bottom: 0;
    }
     .threeCol > div:nth-child(2n+2) {
         margin-right: 0;
    }

     .fourCol > div {
         width: 48%;
         margin-right: 4%;
    }
     .fourCol > div label,
     .fourCol > div input,
     .fourCol > div select,
     .fourCol > div textarea,
     .fourCol > div span {
         width: 100%;
    }
     .fourCol > div span.mce-txt,
     .fourCol > div input[type="checkbox"] {
         width: auto;
    }
     .fourCol > div:nth-child(3n+1) {
         clear: none;
         padding-bottom: 0;
    }
     .fourCol > div:nth-child(3n+3) {
         margin-right: 4%;
    }
     .fourCol > div:nth-child(2n+1) {
         clear: both;
         padding-bottom: 1em;
         padding-bottom: 0;
    }
     .fourCol > div:nth-child(2n+2) {
         margin-right: 0;
    }


    .downloadsCol > div {
        width: 48%;
        margin-right: 4%;
    }

    .downloadsCol > div:nth-child(4n+1) {
         width: 48%;
    }

    .downloadsCol > div:nth-child(4n+2) {
         width: 48%;
    }

     .supportCol {
         padding-bottom: 0;
    }
     .supportCol > div {
         padding-right: 2%;
    }
     .supportCol > div:nth-child(1) {
         width: 23%;
    }
     .supportCol > div:nth-child(2) {
         width: 23%;
    }
     .supportCol > div:nth-child(3) {
         width: 50%;
         padding-right: 0;
    }
     .supportCol > div:nth-child(4) {
         width: 23%;
    }
     .supportCol > div:nth-child(5) {
         width: 23%;
    }
     .supportCol > div:nth-child(6) {
         width: 45%;
         padding-right: 1%;
    }
     .supportCol > div:nth-child(7) {
         width: 4%;
         position: relative;
         padding-right: 0;
    }

    .uqResultsCol > div {
         width: 100%;
         margin-right: 0;
    }
    .uqResultsCol > div:nth-child(1n+1) {
         margin-right: 0;
         width: 100%;
         clear: both;
    }

    .uqResultsCol .oneCol > div > label {
        width: 35%;
    }

    .uqResultsCol .oneCol > div > span {
        width:60%;
    }

     .expandableContainer.sideHeader {
         margin-bottom: 0;
    }
     .expandableContainer.sideHeader .container {
         background-position: -10px center;
         background-color: transparent;
         padding: 1em 1em 1em 50px;
         margin-top: -1.25em;
    }
     .expandableContainer.sideHeader .container p {
         margin: 0;
         text-align: left;
    }
    table thead tr.headerRow,
    table tbody tr.headerRow {
         background: #759a9e;
         color: #fff;
         border-bottom: 0;
    }
     table tbody tr.hideTablet {
         display: none;
    }
     table tbody tr.showTablet {
         display: block;
    }
     table tbody th.hideTablet,
     table tbody td.hideTablet {
         display: none;
    }
     table tbody span.otherCols > span {
         padding-top: 0.5em;
         padding-bottom: 0;
    }

     table tbody span.otherCols > span.showTablet {
         display: block;
    }
     table tbody span.otherCols > span.hideTablet {
         display: none;
    }

     table.checkBoxAndListCols th:first-child,
     table.checkBoxAndListCols td:first-child {
         width: 50%;
    }
     #footer .inner {
         width: 100%;
    }
     #footer .nav {
         display: none;
    }
     #footer .backToTop ul,
     #footer .impressum ul,
     #footer .version ul {
         padding: 0;
    }
     #footer .backToTop ul li a,
     #footer .impressum ul li a,
     #footer .version ul li a {
         text-decoration: none;
         color: var(--text-color);
         display: block;
         padding: 1em;
         margin: 0 auto;
         border-bottom: 1px solid #d3e0df;
    }
     #footer .backToTop ul li a:hover,
     #footer .impressum ul li a:hover,
     #footer .version ul li a:hover {
         color: inherit;
         background: #d3e0df;
    }
     #footer .backToTop {
         display: block;
    }
     #footer .logo {
         display: none;
    }
     #footer .version {
         position: relative;
         width: 95%;
         margin: 0 auto;
         padding: 1em 0;
         right: auto;
         bottom: auto;
         text-align: left;
    }
     .portalPopup .inner,
     .modalPopup .inner {
         margin-top: 0;
         height: 100%;
         padding: 2em 0 0 0;
         height: auto;
    }
     .portalPopup .inner .popupWrapper > .header h2,
     .modalPopup .inner .popupWrapper > .header h2 {
         padding: 0.25em 0;
    }
     .portalPopup .inner .popupWrapper > .header .alertClose,
     .modalPopup .inner .popupWrapper > .header .alertClose {
         top: 0.5em;
    }
     .portalPopup .inner .popupWrapper > .container,
     .modalPopup .inner .popupWrapper > .container {
         padding: 0.5em 1.5em;
    }
     #statusBar .inner .buttonsMobile {
         display: block;
    }

    #statusBar .inner #actionButtonShowButtons {
        position: relative;
        padding-left: 14px;
        padding-right: 34px;
    }

    #statusBar .inner #actionButtonShowButtons:before {
        position: absolute;
        width: 1em;
        height: 1em;
        line-height: 1em;
        right: 14px;
        top: 18px;
        padding: 0;
        text-align: center;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        box-sizing: border-box;
        content: "\f0d7";
        transform: rotate(180deg);
        transition: transform 0.25s, top 0.25s;
    }

    #statusBar .inner #actionButtonShowButtons.shown:before {
        transform: rotate(0deg);
    }
     #statusBar .inner #actionButtonsPopup {
        display: none;
         position: fixed;
         z-index: 90;
         right: 2.5%;
         bottom: 74px;
    }

    #statusBar .inner #actionButtonsPopup.shown {
        display: flex;
        opacity: 1;
        bottom: 74px;
        animation-name: fadeInAndUp;
        animation-duration: 0.5s;
    }

    @keyframes fadeInAndUp {
        0%   { opacity : 0;bottom: 54px; }
        100% { opacity : 1; bottom: 74px; }
    }

    #statusBar .inner #actionButtonsPopup .buttons h3 {
        color: #fff;
        display: block;
    }
        
     #statusBar .inner #actionButtonsPopup .inner {
         width: 100%;
         min-width: 300px;
         max-width: 400px;
         height: auto;
    }
     #statusBar .inner #actionButtonsPopup .inner > .container {
         width: 100%;
         padding: 0;
         height: auto;
         box-sizing: border-box;
         transition: all 0.5s;

         color: var(--text-color);
    }
     #statusBar .inner #actionButtonsPopup .inner > .container .buttons {
         float: none;
         padding: 0.5em 0.5em 1.5em 0.5em;
         text-align: center;
         margin: 0 auto;
         background: var(--input-color);
         box-sizing: border-box;
         max-width: 300px;
         position: relative;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5);

    }
     #statusBar .inner #actionButtonsPopup .inner > .container .buttons a.button,
     #statusBar .inner #actionButtonsPopup .inner > .container .buttons button {
         display: block;
         text-align: center;
         margin: 1em auto 0;
         padding: 12px;
         width: 90%;
         box-sizing: border-box;
    }
     #statusBar .inner #actionButtonsPopup .inner > .container .buttons a.button span, 
     #statusBar .inner #actionButtonsPopup .inner > .container .buttons button span {
         display: inline;
    }
     #statusBar .inner #actionButtonsPopup .inner > .container .buttons #actionButtonCloseMobilePopup {
         padding: 15px 20px;
         position: absolute;
         top: -20px;
         right: -20px;
         padding: 0;
         z-index: 10;
         width: 40px;
         height: 40px;
         margin: 0;
         display: block;
         border-radius: 50%;
         font-weight: bold;
    }
     .messageContent {
         padding-top: 22px;
    }
     .convHeader button.convButtonShowReplyPanel {
         float: right;
    }
     .convContainer .convHeader .buttons {
         float: none;
         clear: both;
         text-align: center;
         padding: 1em 0 1.5em 0;
    }
     .convContainer .convHeader .buttons button {
         padding: 35px 12px 10px 12px;
         box-sizing: border-box;
         width: 110px;
         margin: 0 5px 1em 5px;
    }

     .convContainer .convHeader .buttons button i {
        display: none;
     }


    #raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton, 
    #pageContent button.copiedContactsButton {
         padding: 35px 12px 10px 12px;
    }

     .convContainer .convHeader .buttons button:before {
         left: 0;
         width: 100%;
    }

    #raisepopup_copiedContactsButtonContainer button.invoiceCopiedContactsButton::before, 
    #pageContent button.copiedContactsButton::before {
        left: 0;
        width: 100%;
    }

     .convContainer .convHeader .buttons button.convButtonShowReplyPanel {
         float: right;
    }
     .message {
         width: 95%;
    }
     .message .date {
         right: auto;
         left: 60px;
         font-size: 0.9em;
    }
     .message.action {
         margin-right: 0;
    }
}

 .readOnlyTextArea img {
     max-width: 100%;
     height: auto;
}
 .modalPopup .inner label.checkboxLabel {
     position: relative;
     padding-left: 1.75em;
     padding-top: 0;
     margin: 0.5em 0 0.75em 0;
}
 .modalPopup .inner label.checkboxLabel input[type="checkbox"] {
     position: absolute;
     top: 0.25em;
     left: 0;
}
 .modalPopup .inner label.checkboxLabel span {
     display: block;
     font-size: 0.9em;
     padding-top: 0.25em;
}
 #pageUpdateMessage.popupMessage {
     left: calc(-300%);
     max-width: 700px;
}
 body .content .multiselect {
     width: 100%;
     background: #fff;
     border: 2px solid #b3bcbb;
     border: 2px solid #d3e0df;
     font-size: 0.9em;
     display: block;
     padding: 0;
}
 body .content .multiselectLabel {
     float: none;
     padding-bottom: 0.5em;
     display: block;
}
 .multiselect button.fakeSelect {
     display: block;
     border-radius: 0;
     width: 100%;
     box-sizing: border-box;
     box-shadow: none;
     margin: 0;
     padding: 0.5rem;
     background: #fff;
     color: var(--text-color);
     text-align: left;
     border-bottom: 1px solid #ddd;
     position: relative;
}
 .multiselect button.fakeSelect:before {
     position: absolute;
     top: 0;
     right: 0;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     padding: 0.6rem 0.6rem;
     box-sizing: border-box;
     height: 100%;
     width: 2.2rem;
     content: "\f0d7";
     display: block;
     background: #009de0;
     text-align: center;
     color: #fff;
}
 .multiselect button.fakeSelect:hover, 
 .multiselect button.fakeSelect:focus {
     background: #e9f2f1;
}
 .multiselect .multiselect_search_container {
     width: 100%;
     box-sizing: border-box;
     padding: 0.5em;
     background: #e9f2f1;
     border-bottom: 1px solid #ddd;
     position: relative;
}
 .multiselect .multiselect_search_container input.multiselect_search {
     width: 100%;
     float: none;
     margin: 0;
     box-sizing: border-box;
}
 .multiselect .multiselect_search_container input.multiselect_search::placeholder {
     opacity: 0.5;
}
 .multiselect button.multiselect_search_clear {
     background: #ba0000;
     padding: 3px 7px;
     font-weight: bold;
     position: absolute;
     z-index: 1;
     top: 13px;
     right: 6px;
     display: none;
}
 .multiselect button.multiselect_search_clear:hover, 
 .multiselect button.multiselect_search_clear:focus {
     background: #900000;
}
 .multiselect button.multiselect_search_clear.shown {
     display: block;
}
 .multiselect .multiselect_item_container {
     height: auto;
     max-height: 300px;
     overflow-x: hidden;
     overflow-y: auto;
}
 .multiselect .multiselect_item_container > p {
     padding: 1em;
     margin: 0;
     color: #d3e0df;
}
 .multiselect button.multiselect_item {
     display: block;
     border-radius: 0;
     width: 100%;
     box-sizing: border-box;
     box-shadow: none;
     margin: 0;
     padding: 0.5rem;
     background: #fff;
     color: var(--text-color);
     text-align: left;
     border-bottom: 1px solid #eee;
     position: relative;
     padding-left: 30px;
}
 .multiselect button.multiselect_item:hover, 
 .multiselect button.multiselect_item:focus {
     background: #e9f2f1;
}
 .multiselect button.multiselect_item:last-child {
     border-bottom: 0;
}
 .multiselect button.multiselect_item:before {
     position: absolute;
     top: 0.5rem;
     left: 0.5rem;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 1em;
     line-height: 1rem;
     content: "\f0c8";
     color: #ddd;
     display: block;
}
 .multiselect button.multiselect_item.selected {
     font-weight: bold;
}
 .multiselect button.multiselect_item.selected:before {
     content: "\f14a";
     color: #b57b2d;
}
 .multiselect button.multiselect_item.partSelected {
     font-weight: bold;
}
 .multiselect button.multiselect_item.partSelected:before {
     content: "\f0c8";
     color: #759a9e;
}
 .multiselect button.multiselect_item.multiselect_selectall {
     background: #e9f2f1;
}
 .multiselect button.multiselect_item.multiselect_selectall:hover, 
 .multiselect button.multiselect_item.multiselect_selectall:focus {
     background: #d6e5e3;
}
 .multiselect .multiselect_status {
     background: #e9f2f1;
     position: relative;
     height: 2rem;
     font-size: 0.9em;
     border-top: 1px solid #ddd;
}
 .multiselect .multiselect_status .multiselect_count_selected {
     position: absolute;
     top: 0.5rem;
     left: 0.5rem;
     width: 50%;
}
 .multiselect .multiselect_status .multiselect_count_shown {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
     width: 50%;
     text-align: right;
}
 .modalPopupInner .oneWiderCol label {
     width: 34%;
     padding-top: 0.4em;
}
 .modalPopupInner .oneWiderCol span, 
 .modalPopupInner .oneWiderCol input, 
 .modalPopupInner .oneWiderCol textarea, 
 .modalPopupInner .oneWiderCol select {
     width: 66%;
}
 .modalPopupInner .oneWiderCol span a {
     color: #cb8e1a;
     font-weight: 600;
}
 .modalPopup .inner .oneCol label {
     padding: .4em .5em .4em 0;
}
 .modalPopup .inner .oneCol {
     padding: 0.125em 0.125em 0 0;
}
 .portalListContainer {
     font-size: 0.9em;
}
 .portalListContainer .portalListRow:before, 
 .portalListContainer .portalListRow:after {
     content: "";
     display: table;
}
 .portalListContainer .portalListRow:after {
     clear: both;
}
 .portalListContainer .portalListRow {
     display: block;
     text-decoration: none;
     color: var(--text-color);
     font-weight: normal;
     transition: background 0.25s;
     background: #fff;
     margin-bottom: 2px;
}
 .portalListContainer a.portalListRow:hover {
     text-decoration: none;
     background: #e9f2f1;
}
 .portalListContainer .portalListRow.selected {
     background: rgba(255,255,255,0.25);
     font-weight: 600;
}
 .portalListContainer .portalListRow.archived {
     opacity: 0.5;
}
 .portalListContainer .portalListRow.fileHeader {
     background: #759a9e;
     color: #fff;
}


 .portalListContainer .portalListRow .portalListHeaderCell, 
 .portalListContainer .portalListRow .portalListCell {
     float: left;
     padding: 1em 0.75em;
     line-height: 1rem;
     box-sizing: border-box;
}
 .portalListContainer .portalListRow .portalListHeaderCell.sortable span {
     position: relative;
     display: inline-block;
     padding-right: 20px;
}
 .portalListContainer .portalListRow .portalListHeaderCell.sortable.sortActive span:after, 
 .portalListContainer .portalListRow .portalListHeaderCell.sortable.sortActive.sortDescDefault.sortAsc:hover span:after {
     position: absolute;
     top: 0;
     right: 0px;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 20px;
     line-height: 20px;
     content: "\f0d8";
     display: block;
     text-align: center;
}
 .portalListContainer .portalListRow .portalListHeaderCell.sortable.sortActive.sortDesc span:after, 
 .portalListContainer .portalListRow .portalListHeaderCell.sortable.sortActive.sortDesc:hover span:after {
     content: "\f0d7";
}
 .portalListContainer .portalListRow .portalListHeaderCell.sortable {
     transition: background 0.25s;
}
 .portalListContainer .portalListRow .portalListHeaderCell.sortable:hover {
     background: #436e70;
     cursor: pointer;
}
 .portalListContainer .portalListRow > div {
     position: relative;
     box-sizing: border-box;
}
 .portalListContainer .portalListRow .portalListCellName {
     width: 47%;
     padding-left: 2.75em;
     overflow-x:hidden;
}

 .portalListContainer .portalListRow .portalListCellName span > em {
    padding-top: 0.25em;
    font-style: normal;
    color: var(--text-color);
    font-weight: normal;
    font-size: 0.85em;
    display: none;
}
 .portalListContainer .portalListRow .portalListCellAdded {
     width: 12%;
}
 .portalListContainer .portalListRow .portalListCellAddedDateTime {
     width: 27%;
}

 .portalListContainer .portalListRow .portalListCellAddedBy {
     width: 15%;
}
 .portalListContainer .portalListRow .portalListCellAttachment {
     width: 15%;
}
 .portalListContainer .portalListRow .portalListCellSize {
     width: 10%;
}
 .portalListContainer .portalListRow .portalListCellSharing {
     width: 10%;
}
 .portalListContainer .portalListRow .portalListCellActions {
     width: 5%;
}

#invoiceList_list .portalListContainer .portalListRow .portalListCellName {
     width: 17%;
}
#invoiceList_list .portalListContainer .portalListRow .portalListCellDescription {
     width: 40%;
}

#quoteList_list .portalListContainer .portalListRow .portalListCellName {
     width: 17%;
}
#quoteList_list .portalListContainer .portalListRow .portalListCellDescription {
     width: 40%;
}

#creditNoteList_list .portalListContainer .portalListRow .portalListCellName {
     width: 17%;
}
#creditNoteList_list .portalListContainer .portalListRow .portalListCellDescription {
     width: 40%;
}

#contractList_list .portalListContainer .portalListRow .portalListCellName {
     width: 52%;
}
#contractList_list .portalListContainer .portalListRow .portalListCellDescription {
     width: 14%;
}
#contractList_list .portalListContainer .portalListRow .portalListCellAdded {
     width: 14%;
}
#contractList_list .portalListContainer .portalListRow .portalListCellAttachment {
     width: 14%;
}

#invoiceList_list,
#quoteList_list,
#creditNoteList_list,
#contractList_list {
    padding-bottom: 1em;
}


#poeList_list  .portalListContainer .portalListRow .portalListCellName {
     width: 32%;
}
#poeList_list .portalListContainer .portalListRow .portalListCellStartDate {
     width: 14%;
}
#poeList_list .portalListContainer .portalListRow .portalListCellEndDate {
     width: 14%;
}
#poeList_list .portalListContainer .portalListRow .portalListCellDuration {
     width: 14%;
}
#poeList_list .portalListContainer .portalListRow .portalListCellAttachment {
     width: 20%;
}


#systemsContainer {
    padding-bottom: 1em;
}
#systemsContainer .portalListContainer .portalListRow.updated {
    background-color: #fff;
    animation-name: updatedFade;
    animation-duration: 5s;
    animation-iteration-count: 1;
}

@keyframes updatedFade {
    0% {
        background-color: #e4f7d7;
    }
    10% {
        background-color: #e4f7d7;
    }
    100% {
        background-color: #fff;
    }
}

#systemsContainer .portalListContainer .portalListRow .portalListCell {
    padding: 1.25em 0.75em;
}
#systemsContainer .portalListContainer .portalListRow .portalListCellName {
    width: calc(100% - 860px - 10px);
    width: calc(100% - 790px - 10px);
}
#systemsContainer .portalListContainer .portalListRow .systemProduct {
     width: 90px;
}
#systemsContainer .portalListContainer .portalListRow .systemEnvironment {
     width: 160px;
}
#systemsContainer .portalListContainer .portalListRow .systemInstallation {
     width: 140px;
}
#systemsContainer .portalListContainer .portalListRow .systemSID {
     width: 70px;
}
#systemsContainer .portalListContainer .portalListRow .systemClient {
     width: 70px;
}
#systemsContainer .portalListContainer .portalListRow .systemBCS {
     width: 140px;
}
#systemsContainer .portalListContainer .portalListRow .systemExpiry {
     width: 130px;
}
#systemsContainer .portalListContainer .portalListRow .portalListCellActions {
    width: 60px;
}
#systemsContainer .portalListContainer .portalListRow .portalListCellName > span {
    min-height: 1em;
}

@media screen and (max-width: 1160px) {
    /* Hide some of the systems list info */
    #systemsContainer .portalListContainer .portalListRow .portalListCellName {
         width: calc(100% - 720px - 10px);
         width: calc(100% - 650px - 10px);
    }
    #systemsContainer .portalListContainer .portalListRow .systemBCS {
         display: none;
    }
}

@media screen and (max-width: 960px) {
    /* Hide some of the systems list info */
    #systemsContainer .portalListContainer .portalListRow .portalListCellName {
         width: calc(100% - 560px - 10px);
         width: calc(100% - 490px - 10px);
    }
    #systemsContainer .portalListContainer .portalListRow .systemEnvironment {
         display: none;
    }
}

@media screen and (max-width: 720px) {
    /* Hide all-but-the-name on the systems list info */
    #systemsContainer .portalListContainer .portalListRow .portalListCellName {
         width: calc(100% - 40px - 10px);
    }

    #systemsContainer .portalListContainer .portalListRow .portalListCellActions {
        width: 40px;
    }
 
}

.portalListContainer .portalListRow .portalListCellSharing.fileShared {
     font-weight: bold;
}
 .portalListContainer .portalListRow span.link:hover {
     text-decoration: underline;
}
 .portalListContainer .portalListRow .portalListCell .portalListSelectCheckboxContainer, 
 .portalListContainer .portalListRow .portalListHeaderCell .portalListSelectCheckboxContainer {
     position: absolute;
     top: 0.5em;
     left: 0.5em;
     box-sizing: border-box;
     display: inline-block;
     width: 2em;
     height: 2em;
     padding: 0.45em 0 0 0.55em;
}
 .portalListContainer .portalListRow .portalListCell .portalListSelectCheckboxContainer:hover {
     cursor: initial;
}
 .portalListContainer .portalListRow .portalListCell .portalListSelectCheckboxContainer input[type="checkbox"], 
 .portalListContainer .portalListRow .portalListHeaderCell .portalListSelectCheckboxContainer input[type="checkbox"] {
     margin-right: 0.5em;
}
 .portalListContainer .portalListRow.singleSelect .portalListCell .portalListSelectCheckboxContainer, 
 .portalListContainer .portalListRow.singleSelect .portalListHeaderCell .portalListSelectCheckboxContainer {
     display: none;
}
 .portalListContainer .portalListRow.singleSelect .portalListCellName {
     padding-left: 1em;
}
 .portalListContainer .portalListRow .portalListCell.portalListCellName > span {
     padding-left: 32px;
     position: relative;
     color: #cb8e1a;
     font-weight: 600;
     display: inline-block;
}
 .portalListContainer .portalListRow.archived .portalListCell.portalListCellName > span {
     padding-left: 32px;
     position: relative;
     color: var(--text-color);
     font-weight: normal;
}

 .portalListContainer.portalListSimple .portalListCell.portalListCellName > span {
    color: var(--text-color);
}

 .portalListContainer .portalListRow .portalListCell.portalListCellName > span:before {
     position: absolute;
     top: -1px;
     left: 0px;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 1.25em;
     line-height: 1em;
     content: "\f07b";
     color: #cb8e1a;
     display: block;
     text-align: center;
     width: 1em;
}
 .portalListContainer .portalListRow .portalListCell.portalListCellName > span:hover {
     text-decoration: underline;
}
 .portalListContainer .portalListRow.archived .portalListCell.portalListCellName > span:hover {
     text-decoration: none;
}
 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_file > span:before {
     content: "\f15b";
     color: var(--text-color);
}
 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_uq > span:before {
     content: "\f1c1";
     color: #359c1c;
}
 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_invoice > span:before {
     content: "\f571";
     color: #8bae59;
}

 .portalListContainer .portalListRow.archived .portalListCell.portalListCellName.itemIcon_file > span:before {
     content: "\f1c3";
}
 .portalListContainer .portalListRow.shared .portalListCell.portalListCellName.itemIcon_file > span:before {
     content: "\f14d";
     color: var(--text-color);
}
 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_customer > span:before {
     content: "\f1ad";
     color: #759a9e;
     color: #cb8e1a;
}
 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_customerGrey > span:before {
     content: "\f1ad";
     color: #759a9e;
}

.portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_warning > span:before {
  content: "\f071";
  color: #cb8e1a;
}

 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_hoster > span:before {
     content: "\f1ad";
     content: "\f64f";
     color: var(--text-color);
     color: #cb8e1a;
}

 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_system > span:before {
     content: "\f233";
     color: var(--text-color);
}

 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_systemConfig span:before {
    content: "\f013";
    color: #74c0fc;
}

 .portalListContainer .portalListRow .portalListCell.portalListCellName.itemIcon_systemConfig:after {
    content: attr(data-referenceclientnumber);
    display: block;
    padding-left: 32px;
    font-size: 0.8em;
    padding-top: 0.1em;
}


 .portalListContainer .portalListRow .portalListCellActions .portalListActionButton {
     padding: 0 10px;
     background: transparent;
     color: var(--text-color);
     transition: background 0.25s;
     position: absolute;
     top: 7px;
     right: 0;
     box-sizing: border-box;
     height: 30px;
     background: #009de0;
     color: #fff;
     margin: 0;
}
 .portalListContainer .portalListRow .portalListCellActions .portalListActionButton:hover {
     background: rgba(117,154,158,0.25);
     background: #0072a3;
}
 .portalListContainer .portalListRow em.mobileTitle {
     display: none;
}
 @media screen and (max-width: 720px) {

     .portalListContainer .portalListRow > div {
         display: none;
    }
     .portalListContainer .portalListRow .portalListCellName {
         display: block;
         width: calc(100% - 40px - 10px);
    }
     .portalListContainer .portalListRow .portalListCellActions {
         display: block;
         width: 40px;
         float: right;
         margin-right: 0.5em;
    }
     .portalListContainer .portalListRow .portalListHeaderCell.portalListCellActions span {
         display: none;
    }
     .portalListContainer .portalListRow .portalListCellActions .portalListActionButton {
         background: transparent;
         color: var(--text-color);
         transition: background 0.25s;
    }
     .portalListContainer .portalListRow .portalListCellActions .portalListActionButton:hover {
         background: rgba(117,154,158,0.25);
    }

     .portalListContainer .portalListRow .portalListCellName span > em {
        display: block;
    }

}


.client045SystemList tr .client045SystemListName {
    width: calc(100% - 740px);
}
.client045SystemList tr .client045SystemListProduct {
    width: 70px;
}
.client045SystemList tr .client045SystemListInstallation {
    width: 100px;
}
.client045SystemList tr .client045SystemListSID {
    width: 50px;
}
.client045SystemList tr .client045SystemListClient {
    width: 100px;
}
.client045SystemList tr .client045SystemListTestReport {
    width:310px;
}
.client045SystemList tr .client045SystemListStatus {
    width: 110px;
    position: relative;
}

.client045SystemList tr td.client045SystemListStatus {
    padding-left: 2.1em;
}

.client045SystemList tr td.client045SystemListStatus:before {
    position: absolute;
    top: 1.1em;
    left: 1em;
    width: 1em;
    height: 1em;
    font-size: 0.9em;
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    text-align: center;
}

@media screen and (max-width: 480px) {
    .client045SystemList tr .client045SystemListName {
        width: 50%;
    }
}

.client045SystemList tr td.client045SystemListStatus.client045SystemListStatus_none:before {
    content: "\f071";
    color: #cb8e1a;
    top: 1em;
}

.client045SystemList tr td.client045SystemListStatus.client045SystemListStatus_waiting:before {
    content: "\f2f2";
    color: var(--text-color);
}

.client045SystemList tr td.client045SystemListStatus.client045SystemListStatus_confirmed:before {
    content: "\f058";
    color: #08a500;
}

table.client045Table tbody tr {
    vertical-align: middle;
}

table.client045Table tbody tr td {
}



 #templateBrowser .fileBackLink {
     display: block;
     margin: 1em 0;
}
 #templateBrowser #folderTitle .fileBackLink {
     display: inline;
     margin: 0;
     color: var(--text-color);
     text-decoration: none;
}
 #templateBrowser #folderTitle .fileBackLink:hover, 
 #templateBrowser #folderTitle .fileBackLink:focus {
     text-decoration: underline;
}
 #templateBrowser .fileList {
     width: 100%;
     overflow-y: auto;
     position: relative;
     box-sizing: border-box;
}
 #templateBrowser .fileList .fileRow {
     width: 100%;
     height: 3rem;
     display: block;
     overflow: hidden;
     position: relative;
     margin-bottom: 0.25em;
     padding: 1em;
     font-size: 1em;
     line-height: 1rem;
     box-sizing: border-box;
     text-decoration: none;
     background: #ffffff;
     color: var(--text-color);
     transition: background 0.25s;
     font-weight: normal;
}
 #templateBrowser .fileList .fileRow:hover, 
 #templateBrowser .fileList .fileRow:focus {
     cursor: default;
     background: rgba(255,255,255,0.5);
}
 #templateBrowser .fileList .fileRow.selected {
     background: rgba(255,255,255,0.25);
     font-weight: bold;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon {
     position: absolute;
     top: 1rem;
     left: 0;
     width: 60%;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileIcon {
     position: absolute;
     left: 0;
     top: 0;
     width: 2rem;
     height: 2rem;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileIcon:before {
     position: absolute;
     top: -0.6rem;
     left: 0.75rem;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 1.5em;
     line-height: 1.5em;
     content: "\f07b";
     color: #cb8e1a;
     display: block;
     text-align: center;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileIcon.fileIconFolder:before {
     content: "\f07b";
     color: #cb8e1a;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileIcon.fileIconQuote:before {
     content: "\f075";
     color: #759a9e;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileIcon.fileIconNotFound:before {
     content: "\f05a";
     color: #d3e0df;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileName {
     padding-left: 3rem;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileName button {
     display: inline;
     border: 0;
     padding: 0;
     margin: 0;
     background: transparent;
     font-family: "Open Sans";
     color: var(--text-color);
     line-height: 1rem;
     box-shadow: none;
}
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileName button:hover, 
 #templateBrowser .fileList .fileRow .fileNameAndIcon .fileName button:focus {
     text-decoration: underline;
}
 #templateBrowser .fileList .fileRow.selected .fileNameAndIcon .fileName button {
     font-weight: bold;
}
 #templateBrowser .fileList .fileRow .fileUpdated {
     position: absolute;
     left: 60%;
     width: 20%;
     top: 1rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}
 #templateBrowser .fileList .fileRow .fileUpdatedBy {
     position: absolute;
     left: 80%;
     width: 15%;
     top: 1rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}
 #templateBrowser .fileList .fileRow .fileActions {
     position: absolute;
     right: 0%;
     width: 5%;
     top: 1rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}
 #templateBrowser .fileList .fileRow .message {
     top: -1rem;
}
 #templateBrowser .fileList .fileHeader {
     background: #759a9e;
     color: #fff;
     padding: 0;
}
 #templateBrowser .fileList .fileHeader:hover, 
 #templateBrowser .fileList .fileHeader:focus {
     background: #759a9e;
}

#templateBrowser .fileList .fileHeader .fileNameAndIcon,
#templateBrowser .fileList .fileHeader .fileUpdated,
#templateBrowser .fileList .fileHeader .fileUpdatedBy {
    top: 0;
    height: 3em;
    line-height: 3em;
    box-sizing: border-box;

 }
 #templateBrowser .fileList .fileHeader .fileNameAndIcon {
    padding-left: 0.75rem;

}

 #templateBrowser .fileList .fileHeader > div {
     position: relative;
 }


 #templateBrowser .fileList .fileHeader .sortable span {
     position: relative;
     display: inline;
     padding-right: 20px;
}
 #templateBrowser .fileList .fileHeader .sortable.sortActive span:after, 
 #templateBrowser .fileList .fileHeader .sortable.sortActive.sortDescDefault.sortAsc:hover span:after {
     position: absolute;
     top: 2px;
     right: 0px;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 20px;
     line-height: 20px;
     content: "\f0d8";
     display: block;
     text-align: center;
}
 #templateBrowser .fileList .fileHeader .sortable.sortActive.sortDesc span:after, 
 #templateBrowser .fileList .fileHeader .sortable.sortActive.sortDesc:hover span:after {
     content: "\f0d7";
}
 #templateBrowser .fileList .fileHeader .sortable {
     transition: background 0.25s;
}
 #templateBrowser .fileList .fileHeader .sortable:hover {
     background: #436e70;
     cursor: pointer;
}


 button.buttonRemoveShare {
     width: 1.5em;
     height: 1.5em;
     position: relative;
     font-size: 1.25em;
     border-radius: 50%;
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     text-align: center;
     font-weight: 700;
     color: #fff;
     display: block;
}
 button.buttonRemoveShare span {
     display: none;
}
 button.buttonRemoveShare:before {
     position: absolute;
     top: 0.25em;
     left: 0.5em;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 1em;
     line-height: 1em;
     content: "\f00d";
     display: block;
     text-align: center;
}
 .filesListButtons {
     padding-top: 1em;
     text-align: right;
}
 .filesListButtons button {
     margin-right: 0;
}
 .contextMenu {
     display: none;
     position: fixed;
     background: #e9f2f1;
     z-index: 1000;
     left: 0;
     top: 0;
     box-shadow: 0px 5px 5px #e9f2f1;
     border: 1px solid #e9f2f1;
     font-weight: normal;
}
 .contextMenu em {
     position: absolute;
     right: 2px;
     font-style: normal;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     color: var(--text-color);
     padding-top: 0.2em;
     display: inline-block;
     width: 1.2em;
     text-align: center;
     padding-right: 0.5em;
}
 .contextMenu .contextMenuHeader {
     position: relative;
     padding: 0.75em;
     padding-left: 35px;
     font-size: 0.9rem;
     display: block;
     min-width: 150px;
     text-decoration: none;
     font-weight: 600;
     color: #e9f2f1;
     background: #759a9e;
}
 .contextMenu .contextMenuHeader em {
     color: #fff;
}
 .contextMenu span {
     position: relative;
     padding: 1em 0.75em;
     padding-right: 35px;
     box-sizing: border-box;
     font-size: 0.9rem;
     display: block;
     min-width: 150px;
     text-decoration: none;
     color: var(--text-color);
}
 .contextMenu a {
     position: relative;
     padding: 1em 0.75em;
     padding-right: 35px;
     box-sizing: border-box;
     font-size: 0.9rem;
     display: block;
     min-width: 150px;
     text-decoration: none;
     color: var(--text-color);
     background: #fff;
}
 .contextMenu a.default {
     font-weight: bold;
}
 .contextMenu a:focus {
     background: #d3e0df;
     color: var(--text-color);
}
 .contextMenu a:focus em {
     color: var(--text-color);
}
 .contextMenu a:hover {
     background: #759a9e;
     color: #e9f2f1;
}
 .contextMenu a:hover em {
     color: #fff;
}
 .contextMenu .contextMenuSeparator {
     height: 1px;
     width: 100%;
     background: #e9f2f1;
}


.contextMenu span.icon {
    display: inline-block;
    position: relative;
    min-width: 0;
    padding: 0;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
}
.contextMenu span.icon:before {
    position: absolute;
    top: 0;
    left: 0px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.25em;
    line-height: 1em;
    content: "\f07b";
    color: #cb8e1a;
    display: block;
    text-align: center;
    width: 1em;
}

.contextMenu span.icon.system:before {
    content: "\f233";
    color: var(--text-color);
}


table.alertInvoiceInfo {
     background: transparent;
     padding-bottom: 0.5em;
}
table.alertInvoiceInfo tr {
     background: transparent;
     border-bottom: 0;
}
table.alertInvoiceInfo tr td {
     padding-left: 0;
     padding-bottom: 0;
    width: 100px;
    font-size: 1em;
}

table.alertInvoiceInfo tr td:last-child {
     width: calc(100% - 100px);
     font-weight: bold;
}


.invoiceFileUploadForm {
    display: flex;
    justify-content: flex-start;
}

.invoiceFileUploadForm div.fileUploadButton {
    margin: 0;
}

.invoiceFileUploadForm .filesToolTip {
    max-width:50%;
}


.contractFileUploadForm,
.poeFileUploadForm {
}

.contractFileUploadForm p,
.poeFileUploadForm p {
    margin: -0.25em 0 0.25em 0;
    font-size: 0.9em;
}

.contractFileUploadForm input,
.poeFileUploadForm input {
    float: none;
    margin-bottom: 0.25em;
}

.contractFileUploadForm .filesToolTip,
.poeFileUploadForm .filesToolTip {
    padding-top: 0.25em;
    display: block;
}

.fileContainerInner .file {
     display: block;
     text-decoration: none;
     margin-top: 0;
     background: var(--file-download-background);
     border-radius: 15px;
     transition: background 0.25s;
     padding: 15px 90px 20px 15px;
     position: relative;
}
.fileContainerInner .fileDimmer {
    background: var(--file-download-dimmer-background)
}
.fileContainerInner .file:hover, 
.fileContainerInner .file:focus {
     background: var(--file-download-hover-background);
     cursor: pointer;
     text-decoration: none;
}
.fileContainerInner .file:before {
     top: 15px;
     right: 15px;
     position: absolute;
     width: 30px;
     height: 30px;
     font-family: "Font Awesome 5 Free";
     content: "\f019";
     font-size: 30px;
     text-align: center;
     color: #fff;
     background: #759a9e;
     border-radius: 10px;
     padding: 10px;
     transition: background 0.25s;
}

.fileContainerInner .file:hover:before, 
.fileContainerInner .file:focus:before {
     background: var(--text-color);
}

.fileContainerInner .file.fileSmall {
    padding: 15px 90px 20px 15px;
}

.fileContainerInner .file.fileSmall:before {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

@media screen and (max-width: 480px) {

    .fileContainerInner .file.fileSmall {
        padding: 15px 15px 20px 15px;
    }

    .fileContainerInner .file.fileSmall:before {
        width: 15px;
        height: 15px;
        font-size: 15px;
    }

    .fileContainerInner .file.fileSmall .fileName {
        padding-right: 40px;
    }
    .fileContainerInner .file.fileSmall .fileMeta {
        font-size: 0.8em;
    }
}

.fileContainerInner .file.fileArchived {
     background: #d3e0df;
}
.fileContainerInner .file.fileArchived:hover, 
.fileContainerInner .file.fileArchived:focus {
     background: #d3e0df;
     cursor: default;
}
.fileContainerInner .file.fileArchived:before {
     opacity: 0.25;
}
.fileContainerInner .file.fileArchiving {
     background: #ffe7d4;
}
.fileContainerInner .file.fileArchiving:hover, 
.fileContainerInner .file.fileArchiving:focus {
     background: #ffe7d4;
     cursor: default;
}
.fileContainerInner .file.fileArchiving:before {
     opacity: 0.25;
}
.fileContainerInner .file .fileMeta {
     font-size: 0.9em;
}

.fileContainerInner .file .fileMeta span {
    font-size: 1em;
    display: inline;
}
.fileContainerInner .file .fileName {
     padding-bottom: 0.5em;
}

.fileContainerInner .file .fileName .fileNameOrig {
display: block;
  font-size: 0.75em;
  margin-top: 0.5em;
  margin-bottom: 0.25em;
  opacity: 0.75;
}


.expandableContainer .container .expandableContainer .container.sideInfoCol div .fileMeta span {
    font-size: 1em;
}




.statusCol .fileContainerInner .file {
    padding-right: 15px;
}

.statusCol .fileContainerInner .file:before {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.statusCol .fileContainerInner .file .fileName {
    padding-right: 30px;
    min-height: 2em;
}

 @media screen and (max-width: 480px) {
     body {
         font-size: 1em;
    }
     p {
         font-size: 0.9em;
    }
    input,
    select,
    textarea {
        font-size: 1rem;
    }

     .showDesktop {
         display: none;
    }
     .hideTablet {
         display: block;
    }
     .hideMobile {
         display: none;
    }
     .content .expandableContainer .container {
         padding: 0.5em;
    }
     .content .expandableContainer .container .expandableContainer .container {
         padding: 1em 0.5em 0.5em 0.5em;
    }

     .content .expandableContainer .container .expandableContainer.info .container,
     .content .expandableContainer .container .expandableContainer.warning .container,
     .content .expandableContainer .container .expandableContainer.issue .container,
     .content .expandableContainer .container .expandableContainer.good .container,
     .content .expandableContainer .container .expandableContainer.question .container {
         padding-left: 60px;
         background-position: 5px 7px;
         background-size: 45px;
    }

     .content .expandableContainer .container .expandableContainer.info .container p:first-child,
     .content .expandableContainer .container .expandableContainer.warning .container p:first-child,
     .content .expandableContainer .container .expandableContainer.issue .container p:first-child,
     .content .expandableContainer .container .expandableContainer.good .container p:first-child,
     .content .expandableContainer .container .expandableContainer.question .container p:first-child {
         margin-top: 0;
    }

     .content .expandableContainer .container .expandableContainer.info.noIcon .container,
     .content .expandableContainer .container .expandableContainer.warning.noIcon .container,
     .content .expandableContainer .container .expandableContainer.issue.noIcon .container,
     .content .expandableContainer .container .expandableContainer.good.noIcon .container,
     .content .expandableContainer .container .expandableContainer.question.noIcon .container {
         padding: 1em 0.5em 0.5em 0.5em;
    }
     .content .expandableContainer.info .container,
     .content .expandableContainer.warning .container,
     .content .expandableContainer.issue .container,
     .content .expandableContainer.good .container {
         padding-left: 60px;
         background-size: 45px;
         background-position: 5px 7px;
    }
     .content .expandableContainer.sideHeader .container {
         background-position: -10px center;
         padding-left: 40px;
    }
     .content .expandableContainer.good.noIcon > .container,
     .content .expandableContainer.info.noIcon > .container,
     .content .expandableContainer.warning.noIcon > .container,
     .content .expandableContainer.issue.noIcon > .container {
         padding-left: 0.5em;
    }
     .content .listPages > span.rowCount {
         display: none;
    }
     .content #refreshSecondsRemaining {
    }
     .content #listClickAction {
         margin: 1em 0 1em 1.2em;
    }
     .multiCol input,
     .multiCol select,
     .multiCol textarea,
     .multiCol label + .mce-tinymce.mce-container.mce-panel {
         margin-bottom: 0.25em;
    }
     .multiCol > div > span {
         padding-top: 0;
         margin-bottom: 0.25em;
    }


    #colSelect.gridColConfigList {
        display: none;
    }

     .gridCol > a,
     .gridCol.fiveCol > a,
     .gridCol.sixCol > a {
         width: 100%;
         float: none;
         height: 90px;
         background-size: 80px 106.4px;
         background-size: 70px 93.1px;
         font-size: 0.8em;
         padding: 1em 1.25em;
    }

     .gridCol > a .gridInfo,
     .gridCol.fiveCol > a .gridInfo,
     .gridCol.sixCol > a .gridInfo {
        padding: 0 80px 1em 1em;
    }

     .gridCol > a:nth-child(1n),
     .gridCol.fiveCol > a:nth-child(1n),
     .gridCol.sixCol > a:nth-child(1n) {
         margin-right: 0;
    }

    .gridCol > a h3,
    .gridCol.fiveCol > a h3,
    .gridCol.sixCol > a h3 {
        font-size: 1.3em;
    }

    .gridCol > a .gridInfo p.gridBigNumber,
    .gridCol.fiveCol > a .gridInfo p.gridBigNumber,
    .gridCol.sixCol > a .gridInfo p.gridBigNumber {
        font-size: 4em;
    }

    .gridCol > a .gridInfo p.subText,
    .gridCol.fiveCol > a .gridInfo p.subText,
    .gridCol.sixCol > a .gridInfo p.subText {
        padding-top: 0;
        display: none;
    }


     .twoCol div label,
     .twoCol div input,
     .twoCol div select,
     .twoCol div textarea,
     .twoCol div span,
     .twoCol div label+.mce-tinymce.mce-container.mce-panel {
         width: 100%;
    }
     .twoCol div label + .mce-tinymce.mce-container.mce-panel {
         width: 100% !important;
    }
     .threeCol > div {
         width: 100%;
         margin-right: 0%;
         float: none;
    }
     .threeCol > div:nth-child(1n+1) {
         clear: both;
         padding-bottom: 1em;
         padding-bottom: 0.25em;
    }
     .fourCol > div {
         width: 100%;
         margin-right: 0%;
         float: none;
    }
     .fourCol > div:nth-child(1n+1) {
         clear: both;
         width: 100%;
         padding-bottom: 1em;
         padding-bottom: 0.25em;
    }

     .downloadsCol > div {
         margin-right: 0%;
         float: none;
    }
     .downloadsCol > div:nth-child(1n+1) {
         clear: both;
         width: 100%;
         padding-bottom: 1em;
         padding-bottom: 0.25em;
    }

     .supportCol {
         padding-bottom: 0;
    }
     .supportCol > div {
         padding-right: 0%;
         padding-bottom: 8px;
    }

    .supportCol > div > label.fullWidth {
        width: 100px;
        float: left;
    }
    .supportCol > div > span.fakeList,
    .supportCol > div > input.fullWidth {
        width: calc(100% - 100px);
        float: left;
    }
     .supportCol > div:nth-child(1) {
         width: 100%;
         padding-right:0;
         padding-top: 5px;
         padding-bottom: 10px;
    }
     .supportCol > div:nth-child(2),
     .supportCol > div:nth-child(3),
     .supportCol > div:nth-child(4),
     .supportCol > div:nth-child(5) {
         width: 100%;
         padding-right: 0;
    }
     .supportCol > div:nth-child(6) {
         width: 88%;
         padding-right: 2%;
    }
     .supportCol > div:nth-child(7) {
         width: 10%;
         position: relative;
         padding-right: 0;
    }
    .supportCol > div:nth-child(7) .filterIconContainer {
         margin-top:0;
    }
    .supportCol > div:nth-child(8) {
         margin-top: 0;
         padding-left: 100px;
         padding-bottom: 1.5em;
         position: relative;
         box-sizing: border-box;
    }
    .supportCol > div:nth-child(8):before {
        content: "Search";
        position: absolute;
        left:0;
        font-size:0.9em;
        padding-top:0.6em;
    }
    .supportCol > div:nth-child(8) > input.fullWidth {
        width: 100%;
        float: left;
    }
     .supportCol > div:nth-child(9) {
         margin-top: 1em;
    }
     .listSearchCol > div.searchButton .button {
         height: 34px;
    }
    table thead tr.headerRow,
     table tbody tr.headerRow {
         background: #759a9e;
         color: #fff;
         border-bottom: 0;
    }
     table tbody tr.hideMobile {
         display: none;
    }
     table tbody tr.showMobile {
         display: block;
    }
     table tbody th.hideMobile, 
     table tbody td.hideMobile {
         display: none;
    }
     table tbody span.otherCols > span.showMobile {
         display: block;
    }
     table tbody span.otherCols > span.buttonSpan {
         padding-top: 1em;
    }
     #statusBar .inner .buttons a.button {
         margin-left: 0.5em;
    }
     #statusBar a.button {
         padding: 15px 10px;
    }
     #statusBar a.button.buttonAlert {
         background: #cb8e1a url("/images/alert-icon.png") no-repeat 15px 15px;
         padding-left: 50px;
    }
     .portalPopup .inner .popupWrapper > .container, 
     .modalPopup .inner .popupWrapper > .container {
         padding: 0.5em 1em;
    }
     .convContainer .convHeader .buttons button {
         width: 100px;
    }
}

/* Merged from normalize.css */
a:focus {
    outline: thin dotted;
}
a:active,
a:hover {
    outline: 0;
}
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
small {
    font-size: 75%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img,
figure,
form {
    border: 0;
}
button,
input,
select,
textarea {
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}
button,
input {
    line-height: normal; /* 1 */
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}
button[disabled],
input[disabled] {
    cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}
input[type="search"] {
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

.expandableContainer.warning > .container .imageCaptcha {
    background: rgba(255,255,255,0.5);
}

.prettyMessage {
    color: #436e70;
}

.prettyMessage ul li, 
.prettyMessage ol li {
    line-height: 1.6em;
    padding-bottom: 0.5em;
}

.prettyMessage ul,
.prettyMessage ol {
    margin-bottom: 0.5em;
}

.prettyMessage h1,
.prettyMessage h2,
.prettyMessage h3,
.prettyMessage h4 {
    color: #cb8e1a;
    font-weight: 400;
    font-family: 'Noa', Helvetica, Verdana, Sans-Serif;
    margin: 0 0 0.5em 0;
}

.prettyMessage h2 {
    font-size: 2em;
}

.prettyMessage h3 {
    font-size: 1.6em;
    margin-top: 1.25em;
}

.prettyMessage h4 {
    font-size: 1.3em;
}

.prettyMessage hr {
    height: 1px;
    background: #d3e0df;
    margin: 2.5em 0;
}

.prettyMessage table tbody tr {
    background: #e9f2f1;
    line-height: 1.6em;
}

.prettyMessage table tbody tr.headerRow {
    background: #759a9e;
}

.prettyMessage table tbody tr:last-child {
    border-bottom: 0;
}

.prettyMessage table tbody tr ul {
    margin: 0;
    padding-left: 1em;
}

@media print {

    body {
        font-size: 0.9em !important;
    }

    #envBar,
    #header,
    #subheader,
    #statusBar,
    #pageUpdateMessage {
        display: none !important;
    }

    #pageContentContainer {
        padding-bottom: 0;
        top: 0 !important;
        position: relative;
        height: auto;
        overflow: auto;
    }

    body #pageContentContainer, 
    body #pageContentContainer.statusBarShown, 
    body.dev #pageContentContainer.statusBarShown, 
    body.test #pageContentContainer.statusBarShown, 
    body.qa #pageContentContainer.statusBarShown {
        padding-bottom: 0;
    }

    .expandableContainer {
        border: 2px solid #e9f2f1 !important;
    }

    .gridCol > a {
        width: 100%;
        margin-right: 0;
        height: auto;
        border: 2px solid #e9f2f1 !important;
    }

    .gridCol > a .gridInfo {
        bottom: auto;
        left: auto;
        position: relative;
        padding: 0 120px 0 0;
    }

    .gridCol > a .gridInfo p.gridBigNumber {
        font-size: 3em;
    }

    .portalList #resultsPerPageSelectorContainer,
    .portalList .resultsPerPageSelectorContainer {
        display: none;
    }

    .prettyMessage hr {
        border: 1px solid #e9f2f1;
        height: 1px;
    }

    .qwTabGroup .qwTab {
        border: 2px solid #e9f2f1 !important;
        display: none !important;
        float: none;
    }

    .cmContainer .cmRowTabs .cmColRoles .cmColRoleContainer.mandatory,
    .cmContainer .cmRowHeader .cmColRoles .cmColRole.mandatory {
        border: 1px solid #e9f2f1 !important;
    }
}

.richSelect {
    position: relative;
    margin-bottom: 1em;
    margin-bottom: 0em;
    top: -8px;
}

.richSelect:hover {
}

.richSelect > button.richSelect_item:before {
    position: absolute;
    right: 15px;
    top: 4px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0d7";
    z-index: 5;
    font-size: 30px;
    line-height: 30px;
    opacity: 0.5;
    transform: rotate(0deg);
    transition: transform 0.25s, opacity 0.25s, top 0.25s;
}

.richSelect:hover > button.richSelect_item:before {
    opacity: 1;
}

.richSelect.shown > button.richSelect_item:before {
    transform: rotate(180deg);
    top: 5px;
}

button.richSelect_item,
.rounding button.richSelect_item {
    position: relative;
    background: #fff;
    color: var(--text-color);
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    text-align: left;
    padding: 0 48px 0 15px !important;
    overflow-y: hidden;
    display: block;
    margin: 0 !important;
    border: 1px solid #d3e0df;
    box-shadow: none;
    border-radius: 0.5em;
    transition: box-shadow 0.25s;
    box-shadow: 0 0px 5px rgba(0,0,0,0);
}

button.richSelect_item:hover {
    box-shadow: 0 5px 5px rgba(0,0,0,0.25);
}

.richSelect.shown > button.richSelect_item {
    opacity: 0.5;
}

.richSelect .richSelect_menu {
    position: absolute;
    top: 41px;
    display: block;
    left: 0;
    width: 100%;
    z-index: 10;
    display: none;
    border-radius: 0.5em;
    background: #fff;
    box-shadow: 0 0px 5px rgba(0,0,0,0.25);
    overflow-y: auto;
    max-height: 300px;
}

.richSelect.shown .richSelect_menu {
    display: block;
}

.richSelect .richSelect_menu button.richSelect_item  {
    background: transparent;
    border-radius: 0;
}

.richSelect .richSelect_menu button.richSelect_item:first-child {
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}

.richSelect .richSelect_menu button.richSelect_item:last-child {
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.richSelect .richSelect_menu button.richSelect_item.richSelect_selected {
    background: #e9f2f1;
}


.richSelect .richSelect_menu button.richSelect_item:hover,
.richSelect .richSelect_menu button.richSelect_item:active {
    background: #759a9e;
    color: #fff;
    box-shadow: 0 0px 5px rgba(0,0,0,0);
}

.rounding .richSelect .richSelect_menu button.richSelect_item  {
    box-shadow: none;
}

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

.systemSelect > div {
    box-sizing: border-box;
}

.systemSelect > div:nth-child(1) {
    width: 24px;
}

.systemSelect > div:nth-child(2) {
    width: calc(100% - 24px - 170px - 100px - 210px);
}
.systemSelect > div:nth-child(3) {
    width: 170px;
}
.systemSelect > div:nth-child(4) {
    width: 100px;
}
.systemSelect > div:nth-child(5) {
    font-weight: bold;
    width: 210px;
    text-align: right;
}

@media screen and (max-width: 960px) {

    .richSelect,
    .oneCol div.richSelect {
        top: 0px;
        padding-bottom: 0;
    }

    button.richSelect_item div,
    .rounding button.richSelect_item div {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 850px) {

    .systemSelect > div:nth-child(2) {
        width: calc(100% - 24px - 160px);
    }
    .systemSelect > div:nth-child(3) {
        display: none;
    }
    .systemSelect > div:nth-child(4) {
        display: none;
    }
    .systemSelect > div:nth-child(5) {
        width: 160px;
    }
}

@media screen and (max-width: 500px) {

    .systemSelect > div:nth-child(2) {
        width: calc(100% - 24px - 120px);
        width: calc(100% - 24px);
    }
    .systemSelect > div:nth-child(5) {
        width: 120px;
        display:none;
    }
}

#usageKeyContainer {
    position: relative;
}

#usageKeyCopiedText {
    position: absolute;
    right: 1.4em;
    top: 1em;
    opacity: 0;
}

#ticketStatusHeader {
    text-align: right;
    padding-right: 4em;
    position: relative;
    margin-top: -0.25em;
    color: var(--text-color);
}

#ticketStatusHeader p {
    margin: 0;
}

p#ticketStatusHeaderLastUpdated {
    font-size: 0.9em;
    margin-top: 0.125em;
}

#ticketStatusHeaderShowViewers {
    padding-right : 20px;
    position : relative;
}

#ticketStatusHeaderShowViewers:after {
    top: 2px;
    right: 0;
    position: absolute;
    width: 15px;
    height: 15px;
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    font-size: 15px;
    text-align: center;
}

.viewersShown #ticketStatusHeaderShowViewers:after {
    content: "\f0d8";
}

#ticketStatusHeader p strong {
    color: #cb8e1a;
}

#ticketStatusHeader.statusClosed p strong {
    color: var(--text-color);
}

#ticketStatusHeader.statusSolved p strong {
    color: #359c1c;
}

#ticketStatusHeader.statusRejected p strong {
    color: #ba0000;
}

#ticketStatusHeader:after {
    content: "";
    position: absolute;
    top: -0.25em;
    right: 0;
    width: 3.5rem;
    height: 3.5rem;
    background-image: url("/images/alert-icon_info.svg");
    background-size: contain;
    box-sizing: border-box;
}

#ticketStatusHeader.statusOpen:after {
    background-image: url("/images/alert-icon_warning.svg");
}

#ticketStatusHeader.statusSolved:after {
    background-image: url("/images/alert-icon_answer.svg");
}

#ticketStatusHeader.statusRejected:after {
    background-image: url("/images/alert-icon_issue.svg");
}

#ticketStatusHeader.statusClosed:after {
    background-image: url("/images/alert-icon_info.svg");
}


#ticketViewers {
    display: none;
    padding-top: 0.5em;
}

#ticketViewers:before,
#ticketViewers:after {
    content: "";
    display: table;
}

#ticketViewers:after {
    clear: both;
}

#ticketViewers ul {
    padding: 0;
    margin: 0;
    list-style: none;
    float: right;
    font-size : 0.9em;
}

#ticketViewers ul li {
    display: inline-block;
    padding-left: 22px;
    position: relative;
    color: var(--text-color);
    margin-left: 1em;
    padding-bottom: 0.5em;
}

#ticketViewers ul li:before {
    top: 2px;
    left: 0;
    position: absolute;
    width: 15px;
    height: 15px;
    font-family: "Font Awesome 5 Free";
    content: "\f007";
    font-size: 15px;
    text-align: center;
}

#ticketViewers ul li.qw:before {
    content:  "\f505";
    color: #cb8e1a;
}

#ticketViewers ul li.external:before {
    content:  "\f360";
}

#ticketViewers ul li.none:before {
    content:  "\f00d";
}

@media screen and (max-width: 960px) {

    #ticketStatusHeader {
        text-align: left;
        padding-right: 0;
        padding-left: 4.5em;
        margin-top: 0em;
        margin-bottom: 1em;
    }
    #ticketStatusHeader:after {
        right: auto;
        left: 0;
    }

    #ticketViewers {
        padding-top: 0.5em;
    }

    #ticketViewers ul {
        float: none;
    }

    #ticketViewers ul li {
        padding-bottom: 0.5em;
        margin: 0 1em 0 0;
    }
}