/* Grid System to reflect Bootstrap v5 */

/* Bootstrap Grid xs - default mobile first */
.container {
    width: 100% !important;
}


/* Bootstrap Grid md */
@media (min-width: 768px) {
    .container {
        width: 720px !important;
        width: calc(100% - 30px) !important;
        padding-left: 5px;
    }
}

/* Bootstrap Grid lg */
@media (min-width: 992px) {
    .container {
        width: 992px !important;
        width: calc(100% - 15px) !important;
    }
}

/* Bootstrap Grid xl */
@media (min-width: 1200px) {
    .container {
        width: 1140px !important;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Bootstrap Grid xxl */
@media (min-width: 1400px) {
    .container {
        width: 1320px !important;
    }
}

/* Custom Grid xxxl */
@media (min-width: 1600px) {
    .container {
        width: 1500px !important;
    }
}

@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

#pageSpinner {
    display: flex;
    flex-direction: column;
}

.showPendingRequests {
    margin-bottom:32px;
    color: #777;
    font-style: italic;
}

    .showPendingRequests:hover {
        color: #999;
        text-decoration: none;
    }


#pageSpinner > pa-animated-logo {
    justify-content: center;
    margin: 16px;

    /*display: flex;
    flex-direction: column;
    flex-basis: 30%;*/
}

@media (min-width: 768px) {
    #pageSpinner > pa-animated-logo {
        flex-basis: 30%;
    }
}

#pageSpinner .svgSpinnerContainer {
    text-align: center;
}

    .svgSpinnerContainer > svg {
        max-width: 192px;
        max-height: 192px;
    }



.svgSpinnerContainer > svg .tickPath {
    stroke:transparent;
    fill:transparent;
}


.svgSpinnerContainer.animateTick > svg .tickPath {
    stroke-dasharray: 1000;

}    

.svgSpinnerContainer.ticked > svg .tickPath {
    stroke:#fff;
}


.svgSpinnerContainer > svg .st0{fill:#ABAFB4;}
.svgSpinnerContainer > svg .st1{fill:#27588D;}



.svgSpinnerContainer.animateViaCss.spin > svg #grey_cog {
    will-change: auto;

    -webkit-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite;
            
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@keyframes spin {
     100% { 
          transform:rotate3d(0, 0, 1,360deg); 

     } 

}
        



.svgSpinnerContainer.animateViaCss.animateTick > svg .tickPath {
    stroke-dashoffset: 1000;
    
}    

.svgSpinnerContainer.animateViaCss.ticked > svg .tickPath {
    stroke:#fff;
    animation: dash 5s linear forwards;
}


@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}


/*#region Slide Left animation*/

.slide-left-animation.ng-animate {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);

    
        position: absolute;
        left: 0;
        width: 100%;
}

.slide-left-animation.ng-leave.ng-leave-active { /* terminal animations for leave */
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    opacity: 0;
}


.slide-left-animation.ng-enter { /* starting animations for enter */
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    opacity: 0;
}


    .slide-left-animation.ng-leave, /* starting animations for leave */
    .slide-left-animation.ng-enter.ng-enter-active { /* terminal animations for enter */
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
/*#endregion Slide Left animation*/


/*#region Slide Right animation*/

.slide-right-animation.ng-animate {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);

    
        position: absolute;
        left: 0;
        width: 100%;
}

.slide-right-animation.ng-leave.ng-leave-active {
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    opacity: 0;
}

.slide-right-animation.ng-enter {
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    opacity: 0;
}

    .slide-right-animation.ng-leave,
    .slide-right-animation.ng-enter.ng-enter-active {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
/*#endregion Slide Right animation*/


/*#region Fade animation*/

.fade-animation.ng-animate {
}


.fade-animation.ng-enter {
    transition: 0.5s linear all;
    opacity: 0;
}
    .fade-animation.ng-enter.ng-enter-active {
        
        opacity: 1;
    }

.fade-animation.ng-leave {
    display: none;
}

/*#endregion fade animation*/

@-webkit-keyframes unitFlash {
    0% {
        color: transparent;
    }

    80% {
        color: black;
    }

    100% {
        color: transparent;
    }
}

@keyframes unitFlash {
    0% {
        color: transparent;
    }

    80% {
        color: black;
    }

    100% {
        color: transparent;
    }
}

.unitFlashRed-add {
    -webkit-animation: unitFlashRed linear 1s infinite;
    -moz-animation: unitFlashRed linear 1s infinite;
    -o-animation: unitFlashRed linear 1s infinite;
    animation: unitFlashRed linear 1s infinite;
}

.unitFlashRed-remove {
    -webkit-transition: 5s ease-in all;
    -moz-transition: 5s ease-in all;
    -o-transition: 5s ease-in all;
    transition: 5s ease-in all;
}

.unitFlashRed-remove-active {
    background-color: transparent;
}

@-webkit-keyframes unitFlashRed {
    0% {
        background-color: transparent;
    }

    80% {
        background-color: red;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes unitFlashRed {
    0% {
        background-color: transparent;
    }

    80% {
        background-color: red;
    }

    100% {
        background-color: transparent;
    }
}



.questionCountFlash {
    display: block !important;
}

.questionCountFlash-add {
    -webkit-animation: questionCountFlash ease-in 2.5s;
    -moz-animation: questionCountFlash ease-in 2.5s;
    -o-animation: questionCountFlash ease-in 2.5s;
    animation: questionCountFlash ease-in 2.5s;
}

@-webkit-keyframes questionCountFlash {
    0% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0.0;
    }
}

@keyframes questionCountFlash {
    0% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0.0;
    }
}


@keyframes shake {
    0% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    12.5% {
        -moz-transform: translateX(-6px) rotateY(-5deg);
        -ms-transform: translateX(-6px) rotateY(-5deg);
        -o-transform: translateX(-6px) rotateY(-5deg);
        -webkit-transform: translateX(-6px) rotateY(-5deg);
        transform: translateX(-6px) rotateY(-5deg);
    }

    37.5% {
        -moz-transform: translateX(5px) rotateY(4deg);
        -ms-transform: translateX(5px) rotateY(4deg);
        -o-transform: translateX(5px) rotateY(4deg);
        -webkit-transform: translateX(5px) rotateY(4deg);
         transform: translateX(5px) rotateY(4deg);
    }

    62.5% {
        -moz-transform: translateX(-3px) rotateY(-2deg);
        -ms-transform: translateX(-3px) rotateY(-2deg);
        -o-transform: translateX(-3px) rotateY(-2deg);
        -webkit-transform: translateX(-3px) rotateY(-2deg);
        transform: translateX(-3px) rotateY(-2deg);
    }

    87.5% {
        -moz-transform: translateX(2px) rotateY(1deg);
        -ms-transform: translateX(2px) rotateY(1deg);
        -o-transform: translateX(2px) rotateY(1deg);
        -webkit-transform: translateX(2px) rotateY(1deg);
        transform: translateX(2px) rotateY(1deg);
    }

    100% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    12.5% {
        -webkit-transform: translateX(-6px) rotateY(-5deg);
        -moz-transform: translateX(-6px) rotateY(-5deg);
        -ms-transform: translateX(-6px) rotateY(-5deg);
        -o-transform: translateX(-6px) rotateY(-5deg);
        transform: translateX(-6px) rotateY(-5deg);
    }

    37.5% {
        -webkit-transform: translateX(5px) rotateY(4deg);
        -moz-transform: translateX(5px) rotateY(4deg);
        -ms-transform: translateX(5px) rotateY(4deg);
        -o-transform: translateX(5px) rotateY(4deg);
        transform: translateX(5px) rotateY(4deg);
    }

    62.5% {
        -webkit-transform: translateX(-3px) rotateY(-2deg);
        -moz-transform: translateX(-3px) rotateY(-2deg);
        -ms-transform: translateX(-3px) rotateY(-2deg);
        -o-transform: translateX(-3px) rotateY(-2deg);
        transform: translateX(-3px) rotateY(-2deg);
    }

    87.5% {
        -webkit-transform: translateX(2px) rotateY(1deg);
        -moz-transform: translateX(2px) rotateY(1deg);
        -ms-transform: translateX(2px) rotateY(1deg);
        -o-transform: translateX(2px) rotateY(1deg);
        transform: translateX(2px) rotateY(1deg);
    }

    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

.shake {
    -webkit-animation: shake 400ms ease-in-out;
    -moz-animation: shake 400ms ease-in-out;
    -o-animation: shake 400ms ease-in-out;
    animation: shake 400ms ease-in-out;
}

.blink {
    -moz-animation: blink 2s linear infinite;
    -o-animation: blink 2s linear infinite;
    -webkit-animation: blink 2s linear infinite;
    animation: blink 2s linear infinite;
}

@keyframes blink {
    25% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }
}

button, .btn {
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    padding: 4px 8px 4px 8px;
    white-space: nowrap;
    min-height: 36px;
    min-width: 36px;
}

button.btn.filter {
    border:none;
    border-radius: 0;
    text-transform: uppercase;
    padding: 4px 8px 4px 2px;
    color: #777;
    white-space: nowrap;
    min-height: 30px;
    font-size: 12px;
}

button.btn.filter:hover {
    text-decoration: none;
    color: #444;
}

div.email-preop-search + button.btn 
{
    min-height: 30px;
}

@media(max-width: 767px) {
    div.email-preop-search + button.btn {
        min-height: 41px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    pa-standard-layout > div > pa-sidebar > sidebar > div > div > button.btn {        
        font-size: 0.7em;
        padding: 1px 2px;
        min-height: 28px;
    }
}

pa-sidebar > sidebar > div > button, pa-sidebar > sidebar > div > div > button {
    width: 100%;
}

button:hover, .btn:hover {
    border:none;
}

.btn-default:not(.mbsc-ms-item)
{
    color: white;
    background-color: #888;
}

.btn-default:not(.mbsc-ms-item):hover, .btn-default:not(.mbsc-ms-item):active
{
    color: white;
    background-color: #888;
}

.btn-operation:focus, .btn-link:focus {
    color: unset !important;
}

.dropdown-operations > div {
    color: #333333;
    background-color: #FFFFFF;
    padding: 7px;
    border: 1px solid #AAAAAA;
}

    .dropdown-operations > div > i, .btn-operation > i {
        font-size: 16px;
        padding-top: 2px;
        padding-right: 5px;
    }

    .dropdown-operations > div:hover, button.btn-operation:hover {
        border: 1px solid #AAAAAA;
    }

.dropdown-operations > .dropdown-menu > li > a:hover {
    background-color: #0069AA;
    color: #FFFFFF;
}

.dropdown-operations > .dropdown-menu > li > a {
    padding: 6px 10px;
}

.dropdown-operations.btn-group.open .dropdown-toggle, .dropdown-operations > div:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.dropdown-operations > .dropdown-menu {
    width: 100%;
    margin-top: 0px;
}

.btn-file {
    min-width: 128px;
}

.btn-primary:not(.mbsc-ms-item)
{
    background-color: #0069AA;
}

.btn-primary:hover, .btn-primary:active, .btn-primary.active
{
    background-color: #005991;
}

button.dropdown-toggle.btn-primary-green {
    border-left: 1px solid #007A39;
}

.btn-primary-green:not(.mbsc-ms-item)
{
    background-color: #009444;
    color: white;
    border: none;
}

.btn-primary-green:hover, .btn-primary-green:active, .btn-primary-green.active
{
    background-color: #007A39;
}

.btn-secondary {
    color: white;
    background-color: #888;
}

.btn-secondary:hover, .btn-secondary:active
{
    color: white;
    background-color: #777;
}

.btn-secondary:focus {
    color: white;
    text-decoration: none;
}

.btn:focus {
    outline: none;
}

.btn-action {
    background: #4fa0f8;
    color: white;
}

.btn-action:hover, .btn-action:active
{
    background-color: #3693f7;
    color: white;
}

.btn.btn-transparent, .btn.btn-transparent:hover {
    background-color: transparent;
    border:none;
    padding: 4px 8px 4px 8px;
}

.modal-footer .btn {
    min-height: 34px;
    margin-left: 5px;
}

.panel-heading button.btn {
    min-height: inherit;
}
@media (max-width : 1199px) {
    button.btn, a.btn, .modal-footer .btn {
        min-height: 42px;
        min-width: 48px;
    }

    a.btn > i {
        margin: 7px 0;
    }
}

.btn > svg, a > svg {
    max-width: 14px;
    min-width: 8px;
    max-height: 16px;
    vertical-align: middle;
}

button.transparent, .btn.transparent {
    color: #0F76BC;
    background-color: transparent;
}
button.transparent:hover, .btn.transparent:hover {
    background-color: #EDEFEF;
}

button.transparent.PremiumPreStart:hover {
    background-color: #DDDDDD !important;
}

button.dropdown-toggle.blue {
    border-left: 1px solid #005991
}
    
button.blue, .btn.blue {
    color: white;   
    background-color: #0069AA;
}

button.blue:hover, .btn.blue:hover {
    background-color: #005991;
}

button.dropdown-toggle.gray {
    border-left: 1px solid #AFB1B2
}

button.gray, .btn.gray {
    color: black;
	background-color: #D8DCDF;
}
button.gray:hover, .btn.gray:hover {
    background-color:  #AFB1B2;
}
    
button.dropdown-toggle.orange {
    border-left: 1px solid #E48A27
}

button.orange, .btn.orange {
    color: white;
	background-color: orange;
}
button.orange:hover, .btn.orange:hover {
	background-color: #E48A27;
}

button.dropdown-toggle.green {
    border-left: 1px solid #134C27
}

button.green, .btn.green {
    color: white;
	background-color: #116E37;
}
button.green:hover, .btn.green:hover {
	background-color: #134C27;
}

button.dropdown-toggle.lightGreen {
    border-left: 1px solid #0F6333
}

button.lightGreen, .btn.lightGreen {
    color: white;
	background-color: #0F8F46;
}
button.lightGreen:hover, .btn.lightGreen:hover {
	background-color: #0F6333;
}

button.dropdown-toggle.red {
    border-left: 1px solid #C42130
}

button.red, .btn.red {
    color: white;
	background-color: #E5202E;
}

button.red:hover, .btn.red:hover {
	background-color: #C42130;
}

button.dropdown-toggle.darkOrange {
    border-left: 1px solid #D86F27
}

button.darkOrange, .btn.darkOrange {
    color: white;
	background-color:  #f7941e;
}
button.darkOrange:hover, .btn.darkOrange:hover {
	background-color:  #D86F27;
}

button.dropdown-toggle.lightBlue {
    border-left: 1px solid #3D6Da0
}

button.lightBlue, .btn.lightBlue {
    color: white;
	background-color: dodgerblue;
}
button.lightBlue:hover, .btn.lightBlue:hover {
	background-color: #3D6Da0;
}

.buttonText {
    font-size: 65%;
}

@media (max-width: 768px) {
    .modal-footer .dropdown-toggle {
        max-width: 32px;
    }
}

.buttonEllipsis {
    transition: background-color ease 200ms;
    font-weight: normal;
    font-size: 250%;
    color: #0069AA;
    text-decoration: none !important;
    align-items: center;
    display: inline-flex;
    flex-direction: row !important;
    padding: 0;
}

.buttonEllipsis-sm {
    font-size: 175%;
}

.buttonEllipsis:hover {
    cursor: pointer;
    background-color: #EDEFEF;
}

.buttonEllipsis > a {
    flex-grow: 1;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.buttonEllipsis > a[data-toggle]::after {
    content: "⋮";
}

.collapsible > h4 > a:first-of-type:after {
    font-family: 'FontAwesome';
    content: "\f146";    
    float: right; 
    color: white; 
    font-size: large;
}

.collapsible > h4 > a.collapsed:first-of-type:after {
    content: "\f0fe";
}

.collapsible > .btn-group {
    padding-right: 12px;
    margin-top: -23px;
}

uib-accordion {
    background-color: #FFFFFF;
}

.sub-accordion .panel.panel-open {
    background-color: #F4F9FC;
}

    .sub-accordion .panel.panel-open .panel-body {
        margin-top: -10px;
    }

/* Double definition to make it more specific over the default bootstrap one*/
uib-accordion > .panel-group > .panel > .panel-heading, uib-accordion > .panel-group > .panel > .panel-heading {
    padding: 0;
}

    .panel-heading, uib-accordion > .panel-group > .panel > .panel-heading .fa-caret-up,
    .panel-heading, uib-accordion > .panel-group > .panel > .panel-heading .fa-caret-down {
        margin-right: 2px;
        font-size: 16px;
    }

.list-filter {
    border: 1px solid #AAAAAA;
}

.panel.questioncategory > .panel-heading + .panel-collapse {
    border: 1px solid #C0C0C0;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: none;
}

.panel:not(.questioncategory) > .panel-heading > .panel-title > a > span > div {
    padding: 10px;
    text-transform: uppercase;
}

    .panel:not(.questioncategory) > .panel-heading > .panel-title > a:hover, .panel:not(.questioncategory) > .panel-heading > .panel-title > a:focus {
        text-decoration: none;
    }


.panel.questioncategory > .panel-heading > .panel-title > a > span > div {
    border-top: 1px solid #C0C0C0;
}

.panel-group {
    margin-bottom: 8px;
}

    .panel-group .panel {
        border-radius: 0;
    }

    .panel-group > .panel > .panel-heading .badge {
        background-color: #0069AA;
        color: white;
        margin-top: -3px;
    }

.dashboard-chart.panel-group > .panel > .panel-heading, .panel.questioncategory > .panel-heading {
    background-color: #0069AA;
    color: white;
}

.panel-title {
    font-size: 14px;
}

div[data-toggle="collapse"] > H4 {
   cursor: pointer;
}

.panel:not(.mbsc-ms-c) {
    box-shadow: inherit;
    border: none;
    background-color: #FFFFFF;
}

.panel-collapse.in.collapse {
    padding: 0;
}

.clearAccordionHeaders .panel:not(.questioncategory) > .panel-heading > .panel-title > a > span > div {
    border-top: 1px solid #C0C0C0;
}

    .clearAccordionHeaders .panel:not(.questioncategory) > .panel-heading > .panel-title > a > span > div:hover {
        background-color: transparent;
    }

.clearAccordionHeaders > .panel-group > .panel > .panel-collapse {
    border: none;
}

.clearAccordionHeaders fieldset legend label {
    font-size: 16px;
}

.zeroAccordionMargin > .panel-group > .panel + .panel {
    margin: 0;
}

.zeroAccordionMargin > .panel-group {
    margin: 0;
}

.zeroAccordionPadding > .panel-group > .panel > .panel-collapse > .panel-body {
    padding: 0;
}

.zeroAccordionHeaderPadding > .panel-group  > .panel > .panel-heading > .panel-title > a > span > div {
    padding: 12px 0 3px 0;
}
    .zeroAccordionHeaderPadding > .panel-group > .panel > .panel-heading > .panel-title > a > span > div > i {
        padding: 3px 3px 3px 3px;
        font-size: 13px;
        margin-top: 0px;
    }

.primaryAccordion > .panel-group  > .panel > .panel-heading > .panel-title > a > span > div {
    color: #0069AA;
    font-weight:bold;
    border-top: none;
    padding: 12px 0 2px 2px;
    border-bottom: solid 2px #0069AA;
    background: white;
}

    .primaryAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span > div > i {
        background: #0069AA;
        color: white;
    }

.primaryAccordion > .panel-group  > .panel > .panel-heading > .panel-title > a:hover, .primaryAccordion .panel > .panel-heading > .panel-title > a:focus {
    text-decoration:none;
}

.form-container {
    padding:0;
    display: inline-block;
    width:100%;
}

.text-info
{
    color: black;
}

.control-label {
    margin-bottom: 0;
}

.control-label .text-left {
    text-align: left;
}

textarea.form-control {
    padding:4px 8px;
    resize: vertical;
}

select.form-control {
    padding-left: 4px;
    height: 34px;
    min-height: 34px;
    margin: 0;
}

select.form-control.topBorderOnly{
    padding-left: 8px;
    height:34px;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid silver !important;
}

select.form-control.placeholder {
    color: #999999;
}
    select.form-control.placeholder > option {
        color: #555555;
    }


.form-control {
    vertical-align: middle;
    border: 1px solid #aaa;
    border-radius: 0;
    padding: 0;
    padding-left: 8px;
    min-height: 36px;
    margin: 0;
}


.form-control.input[type="submit"] {
    background: #2d90df;
    color: #fff;
    border: #abb4ba solid 1px;
}

.form-control.input[type="submit"]:hover {
}

@media (max-width: 1199px) {
    input.form-control, select.form-control {
        min-height: 42px;
    }

    .form-control-height {
        min-height: 40px;
    }
}
.form-group > div > .checkbox{
    margin-top: 3px;
    margin-left: 0;
}

.checkbox.checkboxOffset {
    margin-top: -3px !important;
    margin-left: 1px;
}

@media (max-width: 991px) {
    .form-horizontal .radio, .form-horizontal .checkbox {
        min-height: 32px;
        margin: 8px 4px;
    }
}


@media (min-width: 992px) {
    .control-label {
        height: 35px;
        padding-top: 7px;
        padding-right: 8px;
    }
}

@media (max-width: 767px) {
    .checkbox-inline {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

@media (max-width: 1199px) {
    .form-control {
        font-size: 16px;
    }

    .control-label {
        font-size: 16px;
    }
}


/* Kendo UI Inputs*/
.k-input {
    height: 28px !important;
    padding: 0  !important;
}

.form-group .k-dropdown {
    width: 100%;
}

.form-group .k-dropdown-wrap {
    border-radius: 0;
}

.k-picker-wrap {
    border-radius: 0;
    border-width: 0;
    border: none;
}

.k-picker-wrap > .k-input {
    margin: 0 !important;
}

.form-control.k-datepicker {
    width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.noBoldLabels label {
    font-weight: normal;
}


.checkmarkChecked::after {
    color: green;
    content: "\f00c";
}
.checkmarkCrossed::after {
    content: "\f00d";
    color: Gainsboro;
}

.mediumWidthDropDown {
    flex: 0 1 50%;
}

.inputWithInnerButton > pa-filtered-dropdown, .inputWithInnerButton > div, .inputWithInnerButton > input {
    display: inline-block;
    position: static;
}

.inputWithInnerButton > pa-filtered-dropdown > .paFilteredDropdownInputContainer > input {
    padding-right: 36px;
}

.inputWithInnerButtonAdd > div , .inputWithInnerButtonAdd > input {
    margin-right: -61px;
}

.inputWithInnerButtonAdd > div > input {
    padding-right: 64px;
}





@media (max-width: 1199px) {
    .inputWithInnerButton button {
        min-height: 39px;

   }
}

.supplyMachineRow > div {
    padding-top: 7px;
    margin-bottom: 0;
}

.supplyMachineRow > div:nth-child(3) {
    text-align: end;
}

.siteRow > .locationButtonSupplyCombo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 0px !important;
}



button:focus, button:active {
    outline: 0;
}
/**
 * Flat Checkbox
 */
input[type=checkbox].flat {
	visibility: hidden;
	position: absolute;
}

/**
 * Create the box for the checkbox
 */
input[type=checkbox].flat + label, label > input[type=checkbox].flat {
	cursor: pointer;
	position: relative;
    width: 14px;
	height: 14px;
	top: 2px;
	left: 0;
	border: 1px solid #ddd;
	border-radius: 3px;

    margin:0;
}


/**
 * Create the box for the checkbox
 */
input[type=checkbox].flat.biggerCheckbox + label, label > input[type=checkbox].flat.biggerCheckbox {
	cursor: pointer;
	position: relative;

    width: 18px;
	height: 18px;
	top: 2px;
	left: 0;
	border: 1px solid #ddd;
	border-radius: 3px;

    margin:0;
}

input[type=checkbox].flat.biggerCheckbox + label:before {
	opacity: 0;
	content: '';
	position: absolute;
	width: 14px;
	height: 8px;
	background: transparent;
	top: 2px;
	left: 2px;
	border: 3px solid #0069AA;

	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


/**
 * Display the tick inside the checkbox
 */
input[type=checkbox].flat + label:before {
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 2px;
	left: 2px;
	border: 3px solid #0069AA;

	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/**
 * Create the hover event of the tick
 */
input[type=checkbox].flat + label:hover::before {
	opacity: 0.7;
}

/**
 * Create the checkbox state for the tick
 */
input[type=checkbox].flat:checked + label:before {
	opacity: 1;
}

input[type=checkbox].flat.biggerCheckbox + label:hover::before {
	opacity: 0.1;
}

/**
 * Create the checkbox state for the tick
 */
input[type=checkbox].flat.biggerCheckbox:checked + label:before {
	opacity: 1;
}

/* Hide the X button to clear inputs in IE,  as they wont work */
input[type=text]::-ms-clear {
   display: none;
}

input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-clear-button {
    -webkit-appearance: none;
    display: none;
}

.mobileShow {
    display: none;
}

@media
    (min-width: 375px) and (max-width: 667px),
    (min-width: 414px) and (max-width: 736px),
    (min-width: 375px) and (max-width: 812px),
    screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    .inputWithInnerButtonClear > pa-filtered-dropdown, .inputWithInnerButtonClear > input {
        margin-right: -78px;
    }


        .inputWithInnerButtonClear > pa-filtered-dropdown > input {
            padding-right: 82px;
        }




    .inputWithInnerButton button {
        margin-top: 1px;
    }

    .siteRow > .inputWithInnerButton {
        display: flex;
    }

    .siteRow > .inputWithInnerButton.desktopShow {
        display: none;
    }

    .siteRow > .locationButtonSupplyCombo {
        display: none;
    }

    .mobileShow {
        display: inline-flex;
        justify-content: space-between;
        width: 100%;
    }

        .mobileShow > div:first-of-type {
            display: flex;            
        }

    .desktopShow {
        display: none;
    }

    .mobileShow > .supplyMachineButton {
        width: 100%;
    }
}

.paFilteredDropdown {
    border: solid 1px black;
    overflow: auto;
    height: auto;
    padding: 8px;
    line-height: 26px;
    z-index: 11140;
    max-height: 384px;
    position: absolute;
    width: 100%;
    max-width: 32.4vw;
    min-width: 375px;
    font-size: 12px;
}

@media (min-width: 1200px) {
    .paFilteredDropdown {
        max-height: 276px;
    }

    pa-filtered-dropdown + .preOpClearButton {
        border: 1px solid #aaa !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    pa-filtered-dropdown + button.btn {
        max-height: 34px;
        min-height: 34px;
        border-left: 1px solid #aaa !important;
        border-right: 1px solid transparent;
        margin-left: -2px;
    }
}

@media (max-width: 767px) {
    .focussed[pa-filtered-dropdown] {
        width: 100%;
        max-height: 80vh;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        float: left;
    }

        .focussed[pa-filtered-dropdown] > .paFilteredDropdown {
            margin-top: 4px;
            width: 100%;
        }

        .focussed[pa-filtered-dropdown] button {
            position: absolute;
            top: 42px;
            right: 2px;
            border: none;
            vertical-align: top;
            height: 32px;
            z-index: 1070;
        }

        .focussed[pa-filtered-dropdown] > .paFilteredDropdown > div {
            padding: 4px;
        }

    .paFilteredDropdownInputContainer {
        min-height: 42px;
    }

    .paFilteredDropdownSelectContainer {
        -ms-flex: 1 auto; /* IE10 SUpport */
        flex-grow: 1;
    }

    pa-filtered-dropdown > button {
        margin-top: -40px;
    }
}

.paFilteredDropdown > div {
    width: 90%;
    cursor: pointer;
}

@media (max-width : 1199px) {
    .paFilteredDropdown > div {
        line-height: 42px;
    }
}

.paFilteredDropdown > div:hover:not(.disabled) {
    font-weight: bold;
}

.paFilteredDropdown > .selected {
    font-weight: bold;
}

.paFilteredDropdown > .disabled {
    color: #ccc;
}

.paFilteredDropdown > div > span {
    font-weight: bold;
}


@media (max-width : 767px) {
    .scaledPicLarge {
        width:100%;
        max-width: 64px;
    }
}

@media (min-width : 767px) {
    .scaledPicLarge {
        max-width: 100%;
    }
}

.profilePic {
    max-width:64px;
    max-height:64px;
}

.unitPhoto {
    max-width:192px;
    max-height:192px;
}


.logoPic {
    max-width: 40px;
    max-height: 40px;
}

.companyLogoCog {
    max-width: 64px;
    max-height: 64px;
}
.companyLogo {
    width:100%;
    max-width: 192px;
    max-height: 130px;
}

.assessmentDocumentThumbnail {
    max-width:64px;
    max-height:64px;
    font-size: 40px;
}

.img-responsive.imageGallery{
   display: inline-block;
}
.modalImageCloseButton{
    position:absolute;
    top:5px;
    right:5px;
}
.modalImageRightButton{
    position:absolute;
    top:50%;
    right:5px;
}
.modalImageLeftButton{
    position:absolute;
    top:50%;
    left:5px;
}
.galleryImageDesc{
    position: absolute;
    padding: 5px;
    top: 10%;
    color: white;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}

.imageGalleryBorder {
    border: solid 1px white;
    max-height: 100vh;
	overflow: auto;
}

@media (max-width : 767px) {
    .companyLogo {
        width: 192px;
        /*max-width: 64px;*/
        /*max-height: 44px;*/
    }

    img[src="content/images/placeholder.png"] {
        display: none;
    }
}


.imageContainer {
    float: left;
    margin-right: 10px;
    min-height: 40px;
    min-width: 64px;
    text-align: center;
}


.profile-pic-container{
    margin-bottom: 15px;
    text-align: center;
}

td > .placeholderImage {
    max-width: 40px;
}

.placeholderImage {
    max-width: 192px;
}

.profilePic.placeholderImage {
    max-height: 40px;
}

@media (min-width: 768px) {
    .nav-container{
        float:right;
    }
    .profile-pic-container{
        float: right;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

ul.galleryNav {
    background-color:black;
    list-style-type: none;
    text-align: center;
    bottom: 10px;
    display: block;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    width: 100%;
    z-index: 5;
}

ul.galleryNav li {
    border: 2px solid #ffffff;
    cursor: pointer;
    display: inline-table;
    height: 30px;
    margin: 0 8px;
    position: relative;
    width: 50px;
    bottom: 5%;
}
ul.galleryNav li.active{
    border: 2px solid #4cff00;
}
ul.galleryNav li img {
    width: 100%;
}

.text-center > .img-responsive {
    margin: auto;
}

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    height: 100%;
}

body {
    font-weight: 300;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #333;
    overflow-y: hidden;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
}


#main {
    flex-grow: 1;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    overflow-y: scroll;
    overflow-y: overlay;
    background-color: #F6F6F6;
    z-index: 1;
}

    #main > div > button {
        margin-top: 1em;
    }

pa-standard-layout > .row > .content {
    margin-bottom: 20px;
    margin-top: 20px;
}

@media (max-width: 767px) {
    pa-standard-layout > .row {
        background-color: white;
    }
}

@media (min-width: 768px) {
    pa-standard-layout > .row > .content > content {
        background-color: #FFFFFF;
    }

    pa-standard-layout > .row > .content > content > .action-header > .action-header-body {
        background-color: #FFFFFF;
    }
}
    pa-standard-layout > .row > .content > content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

        pa-standard-layout > .row > .content > content > .action-header > .action-header-body {
            display: flex;
            align-items: center;
        }

            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .links {
                width: 100%;
                border-bottom: 0px;
            }

            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .nav-tabs > li.active > a {
                border: 0px;
            }

            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .links > li > a {
                color: #333333;
            }

            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .links > li.active > a,
            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .links > li:hover > a,
            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .links > li:focus > a {
                color: #0069AA;
            }

            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .links > li.border-right {
                border-right: 1px solid #ACACAC;
            }

            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .links > li:not(.active),
            pa-standard-layout > .row > .content > content > .action-header > .action-header-body > .links > li:not(.active) > a {
                background-color: #EDEDED;
            }

        pa-standard-layout > .row > .content > content .content-body {
            margin-top: 1px;
            padding: 2px;
            border-top: 1px solid #BBBBBB;
            border-bottom: 1px solid #BBBBBB;
        }

    #unitManager .units-header .selectAllContainer, #preQualification .units-header .selectAllContainer, .sites-header .selectAllContainer, .actions-header .selectAllContainer {
        display: inline-flex;
        white-space: nowrap;
        margin-right: auto;
        width: auto;
        padding-left: 3px;
    }

    header {
        border: 0;
        z-index: 2;
    }

    footer {
        border-top: 1px solid #ccc;
        color: #777;
        line-height: 28px;
        font-size: 9px;
        font-size: 11px;
    }

    .title {
        display: inline;
        float: left;
    }

    .title-primary {
        color: #0069AA;
        font-weight: bold;
    }

    .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .contentBox {
        padding: 0;
        margin-top: 0;
        padding-bottom: 0;
    }

    .collapse-header {
        margin-top: 10px;
        padding: 5px 15px;
        background-color: #2d90df;
        color: #ffffff;
        cursor: pointer;
    }

    .info-container .info-title {
        font-weight: bold;
    }

    .info-container .info-detail {
        font-weight: bold;
    }

    .info-container .info-detail-title {
        margin-right: 5px;
        font-weight: normal;
    }

    .btn-file input[disabled] {
        cursor: not-allowed;
    }

    .minimalPadding {
        padding: 2px !important;
    }

    .minimalMargin {
        margin: 2px !important;
    }

    .minimalVerticalMargin {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    .smallVerticalMargin {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    .mediumVerticalMargin {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .largeVerticalMargin {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    fieldset legend {
        margin-bottom: 4px;
    }

    .mediumLeftPadding {
        padding-left: 12px;
    }

    .smallTopMargin {
        margin-top: 8px !important;
    }

    .smallMargin {
        margin: 8px !important;
    }

    .minimalHorizontalPadding {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .smallHorizontalPadding {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .minimalVerticalPadding {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .smallVerticalPadding {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .libraryTable > tbody > tr > td > div {
        width: 350px;
        overflow-wrap: break-word;
    }

    .libraryDocTable > tbody > tr > td > div {
        word-wrap: break-word;
    }

    .smallMarginBottom {
        margin-bottom: 4px;
    }

    .mediumMarginBottom {
        margin-bottom: 8px;
    }

    .mediumHorizontalPadding {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mediumHorizontalMarginLeft {
        margin-left: 10px !important;
    }

    .zeroPadding {
        padding: 0 !important;
    }

    .zeroHorizontalPadding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .zeroVerticalPadding {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .halfWidth {
        width: 50%;
    }

    .zeroMargin {
        margin: 0 !important;
    }

    .zeroBottomMargin {
        margin-bottom: 0 !important;
    }

    .MajorHeading {
        font-weight: bold;
        font-size: 24px;
        color: #0069aa;
    }

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

    .text-italic {
        font-style: italic;
    }

    @media (max-width: 1199px) {
        h4 {
            font-size: 16px;
        }
    }

    @media print {

        .mainbar {
            padding-top: 0 !important;
        }
    }

    .machineDetailsSiteDropdown {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        margin-right: -34px;
    }

        .machineDetailsSiteDropdown + button.btn {
            min-height: 36px;
        }

    .verticalAlign {
        position: relative;
        top: 50%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .vertical-align-bottom {
        vertical-align: bottom !important;
    }

    .vertical-align-middle {
        vertical-align: middle !important;
    }

    .background-red {
        color: red;
    }

    .background-black {
        color: black;
        background: black;
    }

    .background-orange {
        color: darkOrange;
    }

    .background-green {
        color: green;
    }

    input:-ms-input-placeholder {
        color: lightgray;
    }

    .form-group {
        margin-bottom: 8px;
    }

    .VerticalCenterOuter {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .VerticalCenterMiddle {
        display: table-cell;
        vertical-align: middle;
    }

    .VerticalCenterInner {
        margin-left: auto;
        margin-right: auto;
    }

    .VerticalAlignViaTable {
        display: inline-block;
        vertical-align: middle;
    }

    .clickable {
        cursor: pointer;
    }

        .clickable:hover {
            text-decoration: none;
        }

    .line-height-24 {
        line-height: 24px !important;
    }

    .line-height-32 {
        line-height: 32px !important;
    }

    .line-height-48 {
        line-height: 48px !important;
    }

    .line-height-64 {
        line-height: 64px !important;
    }

    .borderNone {
        border: none !important;
    }

    .borderRight {
        border-right: 1px solid !important;
    }

    .borderSingleSubtle {
        border: 1px solid silver;
    }

    .borderSingle {
        border: 1px solid black;
    }

    .borderGreen40x35 {
        border: 2px solid green;
        max-height: 40px;
        max-width: 35px;
        margin-left: auto;
        margin-right: auto;
    }

    .borderRed40x35 {
        border: 2px solid red;
        max-height: 40px;
        max-width: 35px;
        margin-left: auto;
        margin-right: auto;
    }

    .borderGray40x35 {
        border: 2px solid gray;
        max-height: 40px;
        max-width: 35px;
        margin-left: auto;
        margin-right: auto;
    }

    fieldset.zeroMargin > div.form-group {
        margin-left: 0;
        margin-right: 0;
    }

    .noTextWrapping {
        white-space: nowrap !important;
    }

    .allowTextWrapping {
        white-space: normal !important;
    }

    .redirectToLogin > .fa-lock {
        font-size: 1.1em;
    }

    .float-left {
        float: left !important;
    }

    .float-none {
        float: none !important;
    }

    .float-right {
        float: right !important;
    }

    .text-left {
        text-align: left !important;
    }

    .borderSolid {
        border: 1px solid #0069aa !important;
    }

    .borderTopSolid {
        border-top: 1px solid #0069aa !important;
    }

    .borderTopDashed {
        border-top: 1px dashed #0069AA !important;
    }

    .borderBottomSolid {
        border-bottom: 1px solid #0069aa !important;
    }

.borderRightSolid {
    border-right: 1px solid #0069aa !important;
}

.borderTopLight {
    border-top: 1px solid #ccc !important;
}

    .borderBottomLight {
        border-bottom: 1px solid #ccc !important;
    }

    .visibility-hidden {
        visibility: hidden;
    }

    .paBlueBorder {
        border-color: #0069aa;
    }

    .paBlue {
        color: #0069aa;
    }

    .paBlack {
        color: black;
    }

    .paRed {
        color: red;
    }

    .paGray {
        color: #808285;
    }

    .paGreen {
        color: rgba(17,154,72,1);
    }

    .paOrange {
        color: darkorange;
    }

    .paOveruse {
        color: #ef4136;
    }

    .fontSize10 {
        font-size: 10px;
    }

    .fontSize12 {
        font-size: 12px;
    }

    .fontSize16 {
        font-size: 16px;
    }

    .fontSize18 {
        font-size: 18px;
    }

    .fontSize24 {
        font-size: 24px;
    }

    .fontSize32 {
        font-size: 32px;
    }

    .fontSize36 {
        font-size: 36px;
    }

    .fontSize48 {
        font-size: 48px;
    }

    .fontSize1em {
        font-size: 1em;
    }

    .fontSize1pt5em {
        font-size: 1.5em;
    }

    .fontSize2em {
        font-size: 2em;
    }

    .fontSize4em {
        font-size: 4em;
    }

    .smaller {
        font-size: 75%;
    }

    .fontWeightNormal {
        font-weight: normal;
    }

    .opaque {
        opacity: 0 !important;
    }

    button > i.fa-warning, .machine-table-preop-button-WARNING > div > div > div > i.fa-warning {
        color: white;
    }

    .expiredDocument > i.fa-warning {
        color: darkorange;
    }

    .quickStartHeader {
        margin-top: 50px;
    }

    .min-height-16 {
        min-height: 16px;
    }

    .min-height-32 {
        min-height: 32px;
    }

    .max-height-32 {
        max-height: 32px;
    }

    .help-block {
        color: #29A4DC !important;
        margin-bottom: 0;
    }

    .inline-flex {
        display: inline-flex !important;
    }

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

    .flex-1 {
        flex-grow: 1;
        -ms-flex: 1 auto;
        -webkit-flex: 1 auto;
        flex: 1 auto; /* IE 10*/
    }

    .flex-2 {
        flex-grow: 2;
        -ms-flex: 2 auto;
        -webkit-flex: 2 auto;
        flex: 2 auto;
    }

    .flex-3 {
        flex-grow: 3;
        -ms-flex: 3 auto;
        -webkit-flex: 3 auto;
        flex: 3 auto;
    }

    .flex-4 {
        flex-grow: 4;
        -ms-flex: 4 auto;
        -webkit-flex: 4 auto;
        flex: 4 auto;
    }

    .flex-5 {
        flex-grow: 5;
        -ms-flex: 5 auto;
        -webkit-flex: 5 auto;
        flex: 5 auto;
    }

    .flex-6 {
        flex-grow: 6;
        -ms-flex: 6 auto;
        -webkit-flex: 6 auto;
        flex: 6 auto;
    }

    .flex-7 {
        flex-grow: 7;
        -ms-flex: 7 auto;
        -webkit-flex: 7 auto;
        flex: 7 auto;
    }

    .flex-8 {
        flex-grow: 8;
        -ms-flex: 8 auto;
        -webkit-flex: 8 auto;
        flex: 8 auto;
    }

    .flex-9 {
        flex-grow: 9;
        -ms-flex: 9 auto;
        -webkit-flex: 9 auto;
        flex: 9 auto;
    }

    .flex-10 {
        flex-grow: 10;
        -ms-flex: 10 auto;
        -webkit-flex: 10 auto;
        flex: 10 auto;
    }

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

    .pageHeader {
        display: flex;
        display: -ms-flexbox;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

        .pageHeader > div {
            font-size: 32px;
            display: flex;
            display: -ms-flexbox;
            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
            align-items: center;
        }

            .pageHeader > div.title {
                font-size: 40px;
            }

    .has-feedback .form-control-feedback {
        padding-top: 11px;
        padding-right: 8px;
        font-size: 16px;
        font-weight: normal;
    }


    @media (max-width: 1199px) {
        body > header {
            display: block;
            flex-shrink: 0;
        }
    }


    pa-page-header, sidebar, content {
        flex-shrink: 0;
    }

    @media (max-width: 320px) {
        .hide320 {
            display: none;
        }
    }


    .auto-horizontal-margins {
        margin-left: auto;
        margin-right: auto;
    }

    body {
        counter-reset: section-counter;
    }

    .section-counter::before {
        counter-increment: section-counter; /* Increment the value of section counter by 1 */
        content: counter(section-counter); /* Display the value of section counter */
    }

    ul.list-top-right {
        position: absolute;
        top: 45px;
        left: 80px;
        border: 1px solid #aaa;
        z-index: 1000;
        list-style-type: none;
        text-align: center;
        padding-inline-start: 0px;
        width: 125px;
        text-align: left;
    }

        ul.list-top-right > li {
            padding: 8px;
            background: white;
            color: #0069AA;
        }

            ul.list-top-right > li > a {
                text-decoration: none;
                color: inherit;
            }

            ul.list-top-right > li:hover {
                background-color: #eee;
                color: forestgreen;
            }

        ul.list-top-right > hr {
            margin: 0px 0px 0px 0px !important;
        }

    .min-width-105 {
        min-width: 105px;
    }

    .mobileRow {
        flex-direction: column;
    }

    .mobileRowIrAdded {
        display: none;
    }

    @media (max-width: 414px) {
        .mobileRowIrAdded {
            display: block;
        }

        .mobileRow {
            padding-top: 10px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

        .machineImage-alone {
            width: 100%;
        }

        .mobileColumn {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .machineImage {
            align-content: center;
            width: 90%;
        }

        ul.list-top-right {
            top: 52px;
            left: 195px;
        }
    }

    @media (min-width: 768px) and (max-width: 1199px) {
        ul.list-top-right > li {
            padding: 0px 0px 0px 0px;
            margin-left: 0px;
            margin-right: 0px;
            width: 120px;
            margin-left: 0px;
            text-align: left;
        }

        ul.list-top-right {
            padding: 0px 0px 0px 0px;
            text-align: left;
            margin-left: 0px;
            margin-right: 0px;
            left: 47px;
        }
    }

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

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

    .flex-align-center > div > select.form-control {
        border-radius: 4px;
    }

    @media (max-width: 767px) {

        pa-standard-layout > .row > .content {
            margin-top: 0;
            margin-bottom: 0;
        }

            pa-standard-layout > .row > .content > content .content-body {
                margin-right: 6px;
            }

        sidebar > div .mb-2 {
            margin-bottom: 10px !important;
        }

        .change-company-outer > .row {
            margin-left: 0;
            margin-right: -5px;
        }
    }

    @media print {
        .container {
            padding: 0;
        }

        footer {
            display: none;
        }
    }

    /* Modal .row workaround */
    .modal-body .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Inline Loader */
    .inline-loader {
        color: #333333;
        font-weight: bold;
    }

        .inline-loader:before {
            content: 'Loading';
        }

        .inline-loader:after {
            overflow: hidden;
            display: inline-block;
            vertical-align: bottom;
            -webkit-animation: inlineloader-ellipsis steps(4,end) 900ms infinite;
            animation: inlineloader-ellipsis steps(4,end) 900ms infinite;
            content: "\2026"; /* ascii code for the ellipsis character */
            width: 0px;
        }

    @keyframes inlineloader-ellipsis {
        to {
            width: 1.25em;
        }
    }

    @-webkit-keyframes inlineloader-ellipsis {
        to {
            width: 1.25em;
        }
    }


#loading-bar .bar.bar {
  background: white;
  z-index: 100000;
  height: 28px;
  top: 100%;
  margin: -28px 0;
  opacity: 0.4;

}

.navbar-default {
    background-color: #FFFFFF;
}

    .navbar-default .navbar-toggle {
        background-color: #F6F6F6;
    }

.navbar-fixed-top {
    border-bottom: solid 1px #ccc;
    position: relative;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.175);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.175);
    margin-bottom: 0;
}

.container .navbar-collapse.navbar-collapse {
    flex-grow: 1;
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 768px) {

    /* Silly CSS due to bad bootstap use of !important */
    .navbar-collapse.navbar-collapse.navbar-collapse.collapse {
        display: flex !important;
    }
        
    .navbar-collapse {
        flex-grow: 1;
    }

    .navbar-collapse .navbar-right {
        margin-left: auto;
    }

    .navbar-collapse > ul {
        display: flex;
        margin-top: auto;
    }
}

#navbar-bootstrap-overrides:hover {
    /*Prevent the nav dropdown menus showing behind the risk-management-survey-info-box.*/
    z-index: 15000;
}

#navbar-bootstrap-overrides > .container {
    display: flex;
    align-items: center;
}

.navbar-brand {
    padding: unset;
    margin-left: 0 !important;
}

#paTopMenu ul > li {
    cursor: pointer;
}

#paTopMenu ul.nav > li > a {
    color: #333333;
    margin: 0 0.5vw;
    padding: 5px 8px;
    border-top: none;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 3px solid transparent;
}

#paTopMenu ul > li:hover > a,
#paTopMenu ul > li:focus > a,
#paTopMenu ul > li.active > a,
#paTopMenu ul > li.open > a {
    color: #0069AA;
    background-color: transparent;
    border-bottom-color: #0069AA;
}

#paTopMenu ul > li.userInfoContainer > a {
    display: flex;
    display: -ms-flexbox;
}

    #paTopMenu ul > li.userInfoContainer > a .user-profile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }

    #paTopMenu ul > li.userInfoContainer > a > .user-meta {
        white-space: nowrap;
        font-size: 10px;

        display: flex;
        flex-direction: column;
        gap: 0.4em;
        margin: auto;

    }

        #paTopMenu ul > li.userInfoContainer > a > .user-meta .user-name {
            text-transform: none;
        }

        #paTopMenu ul > li.userInfoContainer > a > .user-meta .company-name {
            line-height: 1em;
        }

        #paTopMenu ul > li.userInfoContainer > a > .user-meta > div {
            display: block;
            overflow: hidden;
            white-space: pre-wrap;
        }

    #paTopMenu ul > li.userInfoContainer > a .dropdown-indicator {
        line-height: 54px;
        font-size: 16px;
    }

#paTopMenu ul > li.divider {
    height: unset;
    padding: 9px 0;
    margin: 0;
    background-color: transparent;
    border-top: 1px solid #e5e5e5;
}

#paTopMenu ul .dropdown-menu li > a {
    padding-top: 6px;
    padding-bottom: 6px;
}

#paTopMenu ul > li .dropdown-indicator {
    margin-left: 4px;
}

#paTopMenu ul > li .nav-menu-title {
    line-height: 54px;
    white-space: nowrap;
}

#paTopMenu ul > li.unavailable:hover {
    border-bottom-color: #888;
    color: #888;
}

    #paTopMenu ul > li.unavailable:hover > a > div > i,
    #paTopMenu ul > li.unavailable:hover > a > .nav-menu-title {
        color: #888;
    }

#paTopMenu ul > li.unavailable > ul.dropdown-menu > li > a {
    color: #888;
}

#paTopMenu ul.nav > li > ul.dropdown-menu {
    border-radius: 0;
    padding: 0;
    margin-right: 10px;
    min-width: 196px;
}

    #paTopMenu ul.nav > li > ul.dropdown-menu > li.upgrade-prompt {
        padding: 6px 0 0 0;
        text-align: center;
        background: #0069AA;
        font-size: small;
    }

        #paTopMenu ul.nav > li > ul.dropdown-menu > li.upgrade-prompt > a {
            display: flex;
            flex-direction: column;
            color: white;
        }

            #paTopMenu ul.nav > li > ul.dropdown-menu > li.upgrade-prompt > a > button {
                border-radius: 8px;
                margin: 8px;
                text-transform: unset;
                color: black;
                font-weight: bold;
            }

                #paTopMenu ul.nav > li > ul.dropdown-menu > li.upgrade-prompt > a > button:hover {
                    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
                    background-color: #ccc;
                }







    #paTopMenu ul.nav > li > ul.dropdown-menu > li > a:hover,
    #paTopMenu ul.nav > li > ul.dropdown-menu > li > a:focus {
        background-color: #0069AA;
        color: #FFFFFF;
    }


#paTopMenu .company-info-li {
    cursor: default;
}

    #paTopMenu .company-info-li a {
        cursor: pointer;
        text-decoration: none;
    }

    #paTopMenu .company-info-li > .company-logo {
        text-align: center;
    }

        #paTopMenu .company-info-li > .company-logo > img {
            width: auto;
            max-width: 225px;
            max-height: 110px;
        }

@media (max-width: 767px) {
    .navbar-header {
        margin-right: 0 !important;
    }

        .navbar-header .navbar-brand > img {
            margin-left: 24px;
        }

        .navbar-header .navbar-toggle {
            margin-right: 8px;
        }

    #paTopMenu ul > li.userInfoContainer > a > .user-meta {
        max-width: none;
        margin-left: 5px;
    }
}

@media (min-width: 1200px) {
    /* Allow for fixed menu bar */
    body {
        overflow-y: hidden;
    }

    #paTopMenu ul > li .nav-menu-title {
        font-size: 16px;
    }
}

@media (min-width: 1400px) {
    .container .navbar-collapse.navbar-collapse {
        margin-left: 48px;
    }
}

@media print {
    body {
        padding-top: 0 !important;
    }
}

@media (max-width: 1199px) {
    header .container {
        padding-left: 0;
        padding-right: 10px;
    }

    header .user-meta {
        margin-right: 5px;
        text-overflow: ellipsis;
        padding-right: 0 !important;
    }

    header .userInfoContainer > a {
        margin-left: 0 !important;
    }

    #navbar-bootstrap-overrides > .container {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 991px) {
    header .container {
        margin-left: 0;
        margin-right: 0;
        padding-right: 0;
    }

    header #paTopMenu ul.nav > li > a {
        margin: 0 5px;
        padding: 2px;
    }

    header .user-profile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .navbar-header {
        display: none;
    }
}

.modal {
    display: -ms-flexbox !important;
    display: flex !important;
}

.modal-dialog {
    display: -ms-flexbox;
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
    align-items: stretch;
}

.modal-content {
    border: none;
    border-radius: 0;
    width: 100%;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: stretch;
    display: -ms-flexbox;
    display: flex;
    max-height: 100vh;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .modal-content {
        margin: 4px;
    }
}

@media (min-width: 1200px) {
    .modal-content > section {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        border: 1px solid;
    }
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.modal-header {
    background-color: #FFF;
    color: #0069aa;
    padding: 2px;
    padding-left: 10px;
    border-bottom: none;
    flex-shrink: 0;
}

    .modal-header svg {
        vertical-align: middle;
        max-width: 32px;
    }

    .modal-header > nav {
        margin-bottom: 0;
    }


.modal-header-content {
    margin: 4px;
}

.modal-title {
    line-height: 40px;
}


.modal-body .form-horizontal .form-group {
    margin-top: 12px;
}


@media (min-width: 768px) {
    .modal-title {
        white-space: nowrap;
    }
}

.modal-header-icon {
    margin: 4px;
    font-size: 300%;
}

.modal-header-image {
    height: 91px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.modal-header-text {
    margin: 29px;
    margin-left: 15px;
    font-size: 200%;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
}

.modal-button-spacer {
    display: inline-block;
    margin-left: 32px; /* Needed to seperate Next/Save buttons on tablets */
}

@media (max-width: 767px) {
    .modal-button-spacer {
        width: 100%;
        margin-left: 0;
    }
}

/* Modal responsive widths */
@media (min-width: 768px) {
    .modal-xl > .modal-dialog {
        max-width: 1170px;
        width: 768px;
    }
}

@media (min-width: 992px) {
    .modal-xl > .modal-dialog {
        max-width: 1170px;
        width: 992px;
    }
}

@media (min-width: 1200px) {
    .modal-xl > .modal-dialog {
        max-width: 1170px;
        width: 1170px;
    }
}

@media (min-width: 1400px) {
    .modal-xl > .modal-dialog {
        max-width: 1350px;
        width: 1350px;
    }
}

@media (max-width: 767px) {
    .modal-dialog {
        margin: 0;
        width: 100vw;
    }

    section > .modal-header {
        padding: 0;
    }

    .modal-content > .mainbar {
        padding-top: 0;
    }
}

.modal-body {
    border-top: none;
    padding: 0;
    overflow-y: auto;
    background-color: white;
    -ms-flex: 1 auto;
    flex: 1 auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    position: relative;
}

.modal-content > section:first-of-type {
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    max-height: 100%;
}

.modal-body > fieldset {
    padding: 15px;
}

.modal-footer {
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FFF;
    color: inherit;
    border-color: #a9a9a9;
    text-align: right;
    flex-shrink: 0;
}

    .modal-footer .dropdown-menu {
        padding: 0;
    }

    .modal-footer .dropdown-menu > li > a:hover {
        background-color: #0069AA;
        color: #FFFFFF;
    }

.modal-footer-no-border {
    padding-top: 6px;
    padding-bottom: 2px;
    background-color: #FFF;
    color: inherit;
    border: none;
    text-align: right;
    flex-shrink: 0;
}
    .modal-footer.form-inline > div > .checkbox {
        font-size: 14px;
    }

        .modal-footer.form-inline > div > .checkbox input {
            margin-right: 5px;
        }

.modal-lg {
    max-width: 700px;
}

@media (max-width: 767px) {
    .modal-footer {
        padding-left: 20px !important;
        padding-right: 25px !important;
    }

    .modal-footer .btn {
        margin-left: 0;
    }
}


@media (max-width : 768px) {

    .modal-footer {
        padding: 4px;
        min-height: 47px;
    }
        /* button styles for phone widths */
        .modal-footer .btn, .modal-footer .btn + .btn {
            width: 100%;
        }

    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        padding-left: 2px;
        padding-right: 2px;
    }

    .form-horizontal .form-group {
        margin-right: -2px;
        margin-left: -2px;
    }
}

@media (min-width: 768px) {
    .modal-footer {
        min-height: 43px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .modal-footer .btn,
    .modal-footer .btn + .btn {
        width: auto;
    }
}

@media (min-width: 1200px) {
    .modal-footer {
        min-height: 39px;
    }
}

.modal.fade {
    align-items: center;
}

    .modal.fade.full-height {
        align-items: stretch;
    }

    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        max-width: 100vw;
        width: unset;
    }


@media (max-width: 767px) {
    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        width: 100vw;
    }
}

@media (min-width: 768px) {
    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        min-width: 730px;
    }
}

@media (min-width: 992px) {
    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        min-width: 960px;
    }
}

@media (min-width: 1200px) {
    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        min-width: 970px;
        max-height: 1160px;
    }
}

#wizardModal > .modal-body {
    overflow-x: hidden;
}

#featureUnavailable > main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#unavailableFeature {
    font-size: 1.2em;
}

    #unavailableFeature > main {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        padding: 5px 0 48px 0;
        min-height: 300px;
    }

#unavailableFeature > header > button {
    position: absolute;
    right: 0;
    top: 0;
}

    #unavailableFeature > header > h2 {
        margin-top: 64px;
        text-align: center;
        font-weight: bold;
        font-size: 2em;
    }

#unavailableFeature .btn-primary-green {
    margin-top: 24px;
    min-width: 128px;
}

#unavailableFeatureCols {
    display: flex;
    flex-flow: row wrap;
    width: 650px;
    justify-content: space-around;
    justify-content: space-evenly;
    font-size: 0.7em;
    text-align: justify;
    padding-top: 20px;
}

    #unavailableFeatureCols > div {
        width: 165px
    }

#unavailableFeatureDivider {
    border: none;
    height: 0.7px;
    background-color: #333;
    margin-top: 9px;
    margin-bottom: 10px;
}

    #unavailableFeatureDivider > hr {
        border: none;
        height: 1.0px;
        background-color: #333;
        margin-top: 9px;
        margin-bottom: 10px;
    }

.unavailableFeatureTitle {
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    color: #009444;
    height: auto;
}

.unavailableFeatureDescription{
    text-align: left;
}

#unavailableFeatureMobileDivider {
    display: none;
}

@media (max-width: 1024px) and (min-width: 768px) {
    #unavailableFeatureDivider {
        height: 1.0px;
    }

    #unavailableFeatureCols {
        display: flex;
        flex-flow: row wrap;
        width: 590px;
    }
}

@media (max-width: 750px) {
    #unavailableFeatureCols {
        display: flex;
        flex-flow: row wrap;
        width: 590px;
        padding-bottom: 0px;
    }

    #unavailableFeature {
        font-size: 0.9em;
    }

        #unavailableFeature > header > h2 {
            margin-top: 15px;
        }
}

@media (max-width: 568px) {
    #unavailableFeature {
        font-size: 0.9em;
    }

        #unavailableFeature > main {
            padding: 1px 0 1px;
            min-height: 270px;
        }

        #unavailableFeature > header > h2 {
            margin-top: 10px;
        }

        #unavailableFeature > header > button {
            max-height: 1px;
            position: absolute;
            top: 0;
            right: 0;
            margin-bottom: 10px;
        }

    #unavailableFeatureCols {
        display: flex;
        width: 100%;
        font-size: 0.9em;
        padding-top: 3px;
        text-align: left;
        padding-bottom: 0px;
    }

}

@media (max-width: 375px) {
    #unavailableFeature {
        font-size: 1.0em;
    }

        #unavailableFeature > main {
            padding: 5px 0 10px;
        }

        #unavailableFeature > header > button {
            max-height: 90px;
        }

    #unavailableFeatureCols {
        display: flex;
        flex-flow: column;
        width: 100%;
        font-size: 0.7em;
        padding-top: 3px;
        text-align: left;
    }

        #unavailableFeatureCols > div {
            width: 100%;
            text-align: center;
            padding-right: 40px;
            padding-left: 40px;
        }

    #unavailableFeatureDivider {
        display: none;
    }

    .unavailableFeatureTitle {
        font-size: 1.0em;
        font-weight: bold;
        text-align: center;
        color: #00a651;
        padding-top: 10px;
    }


    #unavailableFeatureMobileDivider {
        display: block;
        width: 100%;
        border: none;
        height: 1.0px;
        background-color: #333;
        margin-top: 1px;
        margin-bottom: 1px;
    }
}

.employeesDropdown {
    width: 100%;
}

    .employeesDropdown + button.btn {
        width: 50px;
        min-height: 36px;
        margin-top: -2px;
    }

    .employeesDropdown .paFilteredDropdownInputContainer {
        width: 305px;
        display: inline-block;
    }

    .employeesDropdown .paFilteredDropdown {
        min-width: 300px;
        max-width: 318px;
    }

.ng-pageslide {
	background: #ffffff;
    overflow: scroll;
	max-height: 100vh;
}


@media (min-width: 768px) {
    .ng-pageslide.open {
	    
        border-left: solid 1px black;
    }

    .ng-pageslide > div {
        padding: 8px 16px 8px 8px;
    }

    pageslide {
        overflow: overlay;
    }
}

pageslide > div {
    padding: 4px; 
}

.pa-pagination {
    margin: 0;
}

    .pa-pagination > li > a {
        margin-left: 5px;
        color: black;
        border-radius: 4px;
    }

@media (max-width: 767px) {
    .pa-pagination > li > a, .pa-pagination > label:not(.mbsc-ms-item) {
        padding: 8px 14px;
    }
}

.pa-pagination > li > a:hover, .pa-pagination > label:hover {
    background-color: #eee;
    border-color: #0069aa;
}

.pa-pagination > .active > a, .pa-pagination > .active > span, .pa-pagination > .active > a:hover, .pa-pagination > .active > span:hover, .pa-pagination > .active > a:focus, .pa-pagination > .active > span:focus {
    background-color: #0069aa;
    border-color: #0069aa;
}

body.highlightPaidFeatures .paidFeature:hover:after {
    content: "Premium Feature";
    background-color: #eeeeee;
    color: #009444;
    white-space: nowrap;
    border: 1px dashed #009444;
    position: relative;
    padding: 5px 8px;
    margin-top: -34px;
    box-shadow: 0px 0px 0px 2px #eeeeee;
    line-height: 22px;
    font-size: 16px;
    text-transform: capitalize;
    z-index: 800;    
}

body.highlightPaidFeatures .form-group.paidFeature:hover:after {
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

body.highlightPaidFeatures .paidFeature:hover {
    border: 1px dashed gray;
}

body.highlightPaidFeatures .paidFeature {
    border: 1px solid transparent;
}

.progressiveReveal > div > div > fieldset > legend {
    font-size: 18px;
    font-weight: bold;
    color: #0069AA;
    border-bottom: none;
}


.progressiveReveal > div > div > fieldset {
    border-bottom: dashed 1px #aaa;
    margin-top: 12px;
	padding-bottom: 16px;
}

.progressiveReveal > div > div > fieldset:disabled, .progressiveReveal fieldset[disabled] {
    opacity: 0.3;
}

pa-progress-path {
	display: block;
	text-align: center;
	margin: 8px auto;
}

.paProgressPath {
    display: flex;
    display: -ms-flexbox;
	flex-direction: row;
	align-items: stretch;
    -ms-align-content: space-around;
    -webkit-align-content: space-around;
	align-content: space-around;
    margin: 0;
    padding: 0;
}


.paProgressPath .node {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    display:inline-block;
    transition: all 1000ms ease;
    flex-shrink: 0;
}


.paProgressPath .divider {
    height: 5px;
    border-radius: 5px;
    transition: all 800ms ease;
}

.paProgressPath li p {
    display:inline-block;
}

.paProgressPath li {
    list-style: none;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    
    align-items: center;
    -ms-flex-align:center;
    -ms-align-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

.paProgressPath li > div.divider {
    width: 100%;
    box-shadow: 0 0 2px 1px rgba(17, 154, 72, 0);
    border: 1px solid rgba(17, 154, 72, 0.5);
}


.paProgressPath li:nth-of-type(2n + 1) {
  
    flex: 1 auto; /* IE10 SUpport */
    flex-grow: 1;

	padding: 5px 0;
}

.paProgressPath li:nth-of-type(2n + 2) {
    flex-shrink: 0;
    width: 32px;
}

.paProgressPath .node, .paProgressPath .divider {
    background-color: rgba(17, 154, 72, 0.1);
    border: 2px solid rgba(17, 154, 72, 0.4);
}

    .paProgressPath .node.activated {
        background-color: #119A48;
        box-shadow: 0 0 4px 3px rgba(17, 154, 72, 0.8);
        border: 2px solid white;
    }

    .paProgressPath .divider.activated {
        background-color: rgba(17, 154, 72, 1);
        box-shadow: 0 0 2px 1px rgba(17, 154, 72, 0.5);
        border: 1px solid white;
    }

    .paProgressPath .node:hover {
        border: 2px solid white;
        box-shadow: 0 0 4px 3px rgba(17, 154, 72, 0.8);
    }
    
    .paProgressPath > li > div.nodeIcon {
	    margin: 8px 0 0 0;
    }

    .paProgressPath > li > div.nodeIcon > img {
        height: 32px;
    }


    .paProgressPath .whiteDivider {
        background-color: white;
    }

pa-sidebar  {
    display: block;
    padding-top: 20px;
}

pa-sidebar > #companyImage {
    height: 77px;
}

pa-sidebar .checkbox-inline {
        width: 100%;
}

    pa-sidebar .checkbox-inline label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 767px) {
    pa-sidebar {
        padding-top: 10px;
    }
}

/* Margin Spacing */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 10px !important;
}

.m-2 {
    margin: 20px !important;
}

.m-3 {
    margin: 30px !important;
}

.m-4 {
    margin: 40px !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 10px !important;
}

.mt-n1 {
    margin-top: -10px !important;
}

.mt-2 {
    margin-top: 20px !important;
}

.mt-3 {
    margin-top: 30px !important;
}

.mt-4 {
    margin-top: 40px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 10px !important;
}

.mb-2 {
    margin-bottom: 20px !important;
}

.mb-3 {
    margin-bottom: 30px !important;
}

.mb-4 {
    margin-bottom: 40px !important;
}

.ml-0 {
    margin-right: 0 !important;
}

.ml-1 {
    margin-left: 10px !important;
}

.ml-2 {
    margin-left: 20px !important;
}

.ml-3 {
    margin-left: 30px !important;
}

.ml-4 {
    margin-left: 40px !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: 10px !important;
}

.mr-2 {
    margin-right: 20px !important;
}

.mr-3 {
    margin-right: 30px !important;
}

.mr-4 {
    margin-right: 40px !important;
}

/* Padding Spacing */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 10px !important;
}

.p-2 {
    padding: 20px !important;
}

.p-3 {
    padding: 30px !important;
}

.p-4 {
    padding: 40px !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 10px !important;
}

.pt-2 {
    padding-top: 20px !important;
}

.pt-3 {
    padding-top: 30px !important;
}

.pt-4 {
    padding-top: 40px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 10px !important;
}

.pb-2 {
    padding-bottom: 20px !important;
}

.pb-3 {
    padding-bottom: 30px !important;
}

.pb-4 {
    padding-bottom: 40px !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: 10px !important;
}

.pl-2 {
    padding-left: 20px !important;
}

.pl-3 {
    padding-left: 30px !important;
}

.pl-4 {
    padding-left: 40px !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-1 {
    padding-right: 10px !important;
}

.pr-2 {
    padding-right: 20px !important;
}

.pr-3 {
    padding-right: 30px !important;
}

.pr-4 {
    padding-right: 40px !important;
}

#splash-page {
    z-index: 99999 !important;
}

    #splash-page > .bar {
        width: 100%;
    }

.page-splash {
    z-index: 99998 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(48, 48, 48, .9);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

.page-spash-dark {
    opacity: .99;
}


.page-error-message {
    text-align: center;
    margin: 15% auto 0 auto;
    font-size: 150%;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: normal;
    -webkit-text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
    color: #FFF;
    padding: 0;
}

.page-splash-message {
    flex-grow: 1;
    text-align: center;
    font-size: 300%;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: normal;
    -webkit-text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #FFF;
    padding: 0;
}

.page-splash-message.page-splash-message-subtle {
    font-size: 150%;
}

.progress,
.page-progress-bar {
    margin: 30px 10% !important;
}


.page-error-bug  {
    margin: 30% auto 0 auto;
    z-index: 99999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color:white;
    text-align:right;
    overflow: hidden;
}

pa-star-rating {
    display: flex;
    flex-direction: row;

    align-items: center;
}

    pa-star-rating > svg  {
        margin: 2px;
    }
    
    pa-star-rating > svg.fa-star-o {
        fill: #ccc;
    }

    pa-star-rating > svg.fa-star {
        fill: orange;
    }

    pa-star-rating > span {
        min-width: 48px;
        text-align: right;
    }

/* svg file size and filling color setting*/
.size32svg > svg {
    vertical-align: middle;
    max-height: 32px;
    max-width: 100%;
    margin-bottom: 3px;
}

.size26svg > svg {
    vertical-align: middle;
    max-height: 26px;
    max-width: 100%;
    margin-bottom: 3px;
}

.size22svg >svg {
    vertical-align: middle;
    max-height: 22px;
    max-width: 100%;
}

.size18svg >svg {
    vertical-align: middle;
    max-height: 18px;
    max-width: 100%;
}

.svgBlueFillStroke {
   fill:none;
   stroke:#0069AA;
   stroke-width:11;
   stroke-miterlimit:10;
}

.svgGreenFillStroke {
    fill: none;
    stroke: #00a651;
    stroke-width: 11;
    stroke-miterlimit: 10;
}

.svgGreen2FillStroke {
    fill: none;
    stroke: #009444;
    stroke-width: 11;
    stroke-miterlimit: 10;
}

.svgWhiteFillStroke {
   fill:none;stroke:white;
   stroke-width:11;
   stroke-miterlimit:10;
}

.svgBlueFillText {
    fill: #0069AA;
    font-family:'OpenSans-Bold';
    font-size: 72px;
}

.svgWhiteFillText {
    fill: white;
    font-family:'OpenSans-Bold';
    font-size: 72px;
}

.svgTransparentFill {
    fill: transparent;
}

.svgWhiteStroke {
    stroke: white;
    fill: none;
}

.svgWhiteFill {
    fill: white;
}

.svgBlackFill {
    fill: black;
}


.svgBlackStroke {
    stroke: black;
}

.svgBlueFill {
    fill: #0069AA;
}

.svgGreenFill {
    fill: #00a651;
}

.svgGreen2Fill {
    fill: #009444;
}

.svgOrangeFill {
    fill: #f7941e;
}

.svgRedFill {
    fill: #ed1c24;
}

.svgLevel3-EFill {
    fill: #F44111;
}

    .svgLevel3-EFill:hover {
        fill: #CC3F23;
    }

.svgLevel3Fill {
    fill: #5D5AA8;
}

    .svgLevel3Fill:hover {
        fill: #3E4177;
    }

.svgLevel2Fill {
    fill: #2DC2F3;
}

    .svgLevel2Fill:hover {
        fill: #31A6C9;
    }

.svgLevelFFill {
    fill: #39B54A;
}

    .svgLevelFFill:hover {
        fill: #298E44;
    }

.svgFillGrey {
    fill: #808285;
}

/* svg size definition*/

.smallSvgSize {
    height: 24px;
    width: 28px;
}

.workOrderSvgSize {
    height: 20px;
    margin-bottom: 2px;
}


.table > tbody:last-child {
    border-bottom: solid 0 #0069aa;
}

.table > thead  {
    border: solid silver 0 ;
    background-color: #E8ECF2 ;
    font-weight:bold;
}

.table > thead > tr > th  {
     line-height: 26px;

    border: solid silver 0;
    background-color: transparent;
    color: #0069aa;
    font-weight: normal;
    text-transform: uppercase;
    padding: 2px 8px !important;
    vertical-align: middle;
}


.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #ecf2fa;
}
.table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {
    background-color: white;
}

.table-responsive {
    overflow: auto;
}

.table {
    border-top: solid 0 #0069aa;
}

.tableBottomBorderPadding {
    border-bottom: solid 1px transparent;
}

.alternateRows > tbody > tr:nth-of-type(2n) {
    background-color: #ecf2fa;
}

.alternateRowBodies > tbody:nth-of-type(2n) {
    background-color: #ecf2fa;
}

table.verticalAlignContent > tbody > tr > td{
    vertical-align: middle;
}

.toast-bottom-right {
    bottom: 86px;
}



@media (min-width: 480px) {
    .toast-bottom-right {
        bottom: 48px;
    }
}

.toast-message {
    margin: 0 15px 0 0;
}

#toast-container {
    transform: translate3d(0,0,0);
}
    

#toast-container > div {
    opacity:1;
    width: inherit;
    min-width: 250px;
    max-width: 768px;
}

@media (max-width: 768px) {
    #toast-container > div {
        max-width: 75%;
    }
}

@media print {
    #toast-container {
        display: none;
    }
}

#toast-container > div.toast.levelChangeToast:hover {
    cursor: default;
}

#toast-container > div.toast.levelChangeToast {
    background-color: white;
    color: black;

    padding: 15px 15px 6px 15px;
    border: 1px solid #777;
	border-radius: 0;
}

#toast-container > div.toast.levelChangeToast .toast-progress {
    background: -moz-linear-gradient(top, #ffffff 0, #939598 40%,black 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0, #939598 40%, black 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0, #939598 40%, black 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

#toast-container > div.toast.levelChangeToast .billingInfo {
        font-variant: normal;
        font-size: 10px;
        color: #939598;
    }

#toast-container > div.toast.levelChangeToast .billingInfo .identifier {
    margin-left: 16px;
}


#toast-container > div.toast.levelChangeToast .levelChangeInfoTitle{
    color: #009444;
    font-weight: bold;
    font-size: 18px;
    margin: 6px 0;
    max-width: 384px;

}

    #toast-container > div.toast.levelChangeToast .levelChangeInfoTitle.warning {
        color: red;
    }

#toast-container > div.toast.levelChangeToast .levelChangeDetails{
    font-weight: bold;
    margin: 8px 0;
}

#toast-container > div.toast.levelChangeToast .levelChangeDetails .machineLevel{
    margin: 6px 0;
	padding: 4px 24px;
	text-transform: uppercase;
    cursor: default;
}

    #toast-container > div.toast.levelChangeToast .levelChangeDetails .newLevel {
        border: 2px solid #0069AA;
        display: inline-block;
        margin: 0 24px;
        padding: 0 16px;
    }


    #toast-container > div.toast.levelChangeToast .toast-close-button {
        color: #939598;
        top: -0.6em;
    }

.tooltipList {
    padding-left: 16px;
    text-align: left;
}

.tooltip.noMaxWidth > .tooltip-inner {
    max-width: none !important;
}

.tooltip {
   opacity: 1 !important;
}


@media (max-width : 767px) {
    .tooltip {
        left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }
}

#unit-view .tooltip.bottom {
    margin-top: -6px;
}

.tooltip .tooltipClose {
    color: white;
    background-color: transparent;
    position: absolute;
    top: 4px;
    right: 4px;
}

#unitManager .units-header {
    border-bottom: 1px solid #BBBBBB;
    display: flex;
    height: 50px;
    justify-content: flex-end;
    align-items: center;
}

    #unitManager .units-header > div {
        width: 70px;
        margin-right: 5px;
        text-align: center;
    }

pa-unit {
    display: flex;
    width: 100%;
    border: 1px solid transparent;
}

    pa-unit:nth-child(even) {
        background-color: #F8F8F8;
    }

    pa-unit:hover {
        background-color: #F4F9FC;
        border: 1px solid #4F9ED7;
    }

    pa-unit.sample {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: 0.5;
    }

    pa-unit pa-unit-actions {
        align-self: stretch;
        display: flex;
    }

        pa-unit pa-unit-actions .premiumPlusSign {
            font-size: 1em;
            font-weight: bold;
            display: flex;
            position: absolute;
            top: 3px;
            right: 0px;
        }

        pa-unit pa-unit-actions .premiumPlusSignLarge {
            margin-bottom: 8px;
        }   

    pa-unit > .pa-unit-outer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
        flex-grow: 1;
        flex: 1;
        min-width: 0; /* Needed for elipsis truncation */
        padding-top: 4px;
        padding-bottom: 4px;
    }

        pa-unit > .pa-unit-outer > div {
            display: flex;
            flex-grow: 1;
            width: calc(100% - 375px);
            max-width: calc(100% - 375px);
        }

        pa-unit > .pa-unit-outer > div > .hidden-xs {
            align-self: center;
        }

pa-unit .machineSummary > div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

pa-unit .machineSummary > .ownerSummary {
    max-width: 400px;
}


pa-unit > .pa-unit-outer > div > .machineSummaryIcons {
    display: flex;
    flex-direction: column;
    margin: 2px 0;
}

pa-unit .supplyMachineSummary > svg {
    max-width: 12px;
    min-width: 8px;
    max-height: 16px;
    vertical-align: middle;
}

    pa-unit > .pa-unit-outer > div > .machineSummaryIcons > .iconRow {
        display: flex;
        flex-direction: row;
        min-width: 26px;
        min-height: 20px;
    }

        pa-unit > .pa-unit-outer > div > .machineSummaryIcons > .iconRow > svg {
            width: 18px;
            height: 18px;
            padding: 2px;
            margin-top: auto;
            margin-bottom: auto;
        }

            pa-unit > .pa-unit-outer > div > .machineSummaryIcons > .iconRow > svg.levelSO {
                transform: rotateX(180deg);
                height: 11px;
                width: 9px;
                margin-right: -0.8em;
                margin-top: 2px;
                padding: 0px 0;
                background-color: transparent;
                border: none;
            }

            pa-unit > .pa-unit-outer > div > .machineSummaryIcons > .iconRow > svg.levelSOThirdParty {
                transform: rotateX(180deg);
                border: solid 1px #f7941e;
                color: white;
                background-color: #f7941e;
            }

            pa-unit > .pa-unit-outer > div > .machineSummaryIcons > .iconRow > svg.suppliedFromIcon {
                background-color: #808285;
                border: none;
            }

            pa-unit > .pa-unit-outer > div > .machineSummaryIcons > .iconRow > svg.suppliedOn {
                transform: rotateX(180deg);
                height: 11px;
                width: 9px;
                margin-right: -0.8em;
                margin-top: 2px;
                padding: 0px 0;
                border: none;
                background-color: transparent;
            }

@media (min-width : 768px) {
    pa-unit > .pa-unit-outer > div > div {
        margin: 2px 2px;
    }

    pa-unit .machineImage {
        width: 64px;
        text-align: center;
    }

    pa-unit > .pa-unit-outer > div > div:last-of-type {
        margin-right: 0;
    }
}

.actionButton.dropdown > .dropdown-menu {
    padding: 0;
    border: none;
}

    .actionButton.dropdown > .dropdown-menu > hr {
        margin: 0;
    }

    .actionButton.dropdown > .dropdown-menu > li > a, .actionButton.dropdown > .dropdown-menu > li > button {
        background: white;
        color: #0069AA;
        line-height: 2.5em;
        text-transform: initial;
        padding-left: 1em;
        width: 100%;
        text-align: left;
    }

        .actionButton.dropdown > .dropdown-menu > li > a[disabled], .actionButton.dropdown > .dropdown-menu > li > button[disabled] {
            color: #cecece !important;
            cursor: not-allowed;
        }

        .actionButton.dropdown > .dropdown-menu > li > a:hover, .actionButton.dropdown > .dropdown-menu > li > button:hover {
            background-color: #0069AA;
            color: #FFFFFF;
        }

pa-unit .machineType, .unitManagerTable .machineType {
    background-color: #888;
    color: white;
    border-radius: 50%;
    padding: 1px 3px;
    cursor: help;
}

pa-unit .machineSummary {
    flex-grow: 1;
    justify-content: flex-start;
    align-self: stretch;
    overflow: hidden;
}

    pa-unit .machineSummary > div {
        width: 100%;
    }

    pa-unit .machineSummary > div > label {
        margin-bottom: 0;
    }

pa-unit .machineSummary > div {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

pa-unit .machineSummary > div > label {
    margin-bottom: 0;
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1;
    text-align: left;
}

.unitMessage {
    text-align: center;
    margin: 32px 0;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
}

.machineActions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    align-self: stretch;
    width: 375px;
    max-width: 375px;
    justify-content: flex-end;
}

.machineActions .splitButton {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
    font-size: 9px;
}

.machineActions .splitButton > button {
    min-height: 31px;
    -ms-flex: 1 auto;
    -webkit-flex: 1 auto;
    flex-grow: 1;
    width: 100%;
    font-size: 9px;
    flex-basis: 50%;
}

    .machineActions .splitButton > button:first-of-type {
        margin-bottom: 2px;
    }

    .machineActions .splitButton > button:last-of-type {
        margin-top: 1px;
    }

.machineActions button {
    padding: 2px;
}

@media (min-width: 768px) {
    pa-unit-actions .machineActions > button,
    pa-unit-actions .machineActions > .actionButton,
    pa-unit-actions .machineActions > .splitButton {
        width: 70px;
        flex-shrink: 0;
        margin-right: 5px;
    }

    pa-unit-actions .machineActions > .actionButton:last-child {
        margin-right: 1px;
    }
}

pa-unit button {
    -moz-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}

.machineLevel.level3-E {
    border: solid 1px #F44111;
    color: white;
    background-color: #F44111;
}

    .machineLevel.level3-E:hover {
        border: solid 1px #CC3F23;
        background-color: #CC3F23;
    }

.machineLevel.level3 {
    border: solid 1px #5D5AA8;
    color: white;
    background-color: #5D5AA8;
}

    .machineLevel.level3:hover {
        border: solid 1px #3E4177;
        background-color: #3E4177;
    }

.machineLevel.level3E {
    border: solid 1px #F15A2B;
    color: #F15A2B;
    background-color: WHITE;
    border-color: #F15A2B;
}

    .machineLevel.level3E:hover {
        border: solid 1px #CC3F23;
        color: #CC3F23;
        background-color: white;
        border-color: #CC3F23;
    }

.machineLevel.level2 {
    border: solid 1px #2DC2F3;
    color: white;
    background-color: #2DC2F3;
}

    .machineLevel.level2:hover {
        border: solid 1px #31A6C9;
        background-color: #31A6C9;
    }

.machineLevel.levelF {
    border: solid 1px #39B54A;
    color: white;
    background-color: #39B54A;
}

    .machineLevel.levelF:hover {
        border: solid 1px #298E44;
        background-color: #298E44;
    }

.machineLevel.levelSI {
    border: solid 1px #f7941e;
    color: white;
    background-color: #f7941e;
}

    .machineLevel.levelSI:hover {
        border: solid 1px #D86F27;
        background-color: #D86F27;
    }

.machineLevel.levelTR {
    border: 1px solid #0069AA;
    background-color: white;
    color: #0069AA;
}

    .machineLevel.levelTR:hover {
        border: 1px solid #015182;
    }

.machineActions button:focus {
    outline: none;
}

.machineActions button.preOpButton {
    border: none;
    font-weight: bold;
    position: relative;
}

    .machineActions button.preOpButton.PreOp-WARNING > i {
        color: orange;
        font-size: 26px;
    }

    .machineActions button.preOpButton.PreOp-STOPPER > i {
        font-size: 26px;
        color: red;
    }

    .machineActions button.preOpButton.PreOp-VALID > i {
        font-size: 26px;
        color: green;
    }

    .machineActions button.preOpButton.PremiumPreStart {
        background: #eeeeee;
    }

    .machineActions button.preOpButton.HasActionsCompleted {
        border: 2px solid red;
    }

.machineActions button.serviceStatusButton {
    border: none;
    font-weight: bold;
}

    .machineActions button.serviceStatusButton.serviceStatusUpcoming > i {
        color: grey;
        font-size: 26px;
    }

    .machineActions button.serviceStatusButton.serviceStatusOverdue > i {
        font-size: 26px;
        color: red;
    }
    
.buttonWithBadge {
    position: relative;
}

    .buttonWithBadge > .topRightIcon {
        position: absolute;
        top: 1px;
        right: 1px;
        font-size: 12px;
        background-color: transparent;
        color: white;
        min-width: 18px;
        padding: 2px 3px;
    }

.splitButton > button {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 auto;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.splitButton > button > i:first-of-type {
    margin-bottom: auto;
}

.splitButton > button > i.fa {
    margin-bottom: initial;
    line-height: 14px;
}

.buttonWithBadge > .topRightIcon.red {
    color: white;
    background-color: #E5202E;
}

.buttonWithBadge.red > .topRightIcon.red, .topRightIcon.redInvert {
    background-color: white;
    color: #E5202E;
}

.buttonWithBadge.darkOrange > .topRightIcon.darkOrange, .topRightIcon.darkOrangeInvert {
    background-color: white;
    color: #f7941e;
}

.buttonWithBadge > .topRightIcon.green {
    background-color: white;
    color: green;
    border: 1px solid green;
}

.buttonWithBadge > .topRightIcon.orange {
    color: #f7941e;
    background-color: white;
}

.machineActions > button > .buttonText {
    font-size: 9px;
    margin: 1em auto 0 auto;
}

.machineActions > button > .preOpButtonText {
    font-size: 9px;
    margin: auto;
    font-weight: 400;
    color: #0069aa;
}

pa-unit-actions .machineActions > button:not(.splitButton):not(.preOpButton):not(.serviceStatusButton):not(.buttonEllipsis) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
}

pa-unit-actions .machineActions > button:not(.splitButton):not(.preOpButton):not(.buttonEllipsis) > svg {
    height: 29px;
    max-height: 29px;
    max-width: 29px;
    margin: 0 auto;
}

pa-unit-actions .machineActions > button:not(.splitButton).serviceStatusOverdue > svg > path {
    fill: #E5202E;
}

pa-unit-actions .machineActions > button:not(.splitButton).serviceStatusUpcoming > svg > path {
    fill: orange;
}

pa-unit-actions .machineActions > button:not(.splitButton).serviceStatusOK > svg > path {
    fill: #0F8F46;
}

.vendorContactTooltip > div {
    margin-bottom: 8px;
}

    .vendorContactTooltip > div > a {
        color: #C0C0C0;
    }

.sampleMachineText {
    font-size: 20px;
    margin: 32px;
    text-align: center;
}

@media (max-width: 767px) {
    pa-unit {
        padding-left: 4px;
        margin-bottom: 8px;
    }

        pa-unit pa-unit-actions {
            flex-grow: 1;
        }

        pa-unit > .pa-unit-outer {
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }

            pa-unit > .pa-unit-outer > div {
                width: 100%;
                max-width: 100%;
            }

            pa-unit > .pa-unit-outer > div > div {
                margin: 0;
            }

        pa-unit .machineSummary {
            width: 75%;
        }

            pa-unit .machineSummary > div > label {
                max-width: 90vw;
            }

    .buttonWithBadge > .topRightIcon {
        font-size: 16px;
        min-width: 22px;
        line-height: 18px;
    }
}

@media only screen and (max-width : 767px) {
    pa-unit .machineImage {
        align-self: flex-start;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    pa-unit-actions .machineActions {
        width: 100%;
        max-width: 100%;
    }

        pa-unit-actions .machineActions > button,
        pa-unit-actions .machineActions > div {
            width: 20%;
        }
}

.warning {
    color: red;
}

.warning-text {
    color: red;
}

.z-required:after {
    color: red;
    content: "*";
    padding-left: 5px;
}

input:invalid, select:invalid {
    border: red solid 1px !important;
    border-left: 5px solid red !important;
}

.z-decorator{
    overflow: hidden;
    float: right;
}

.z-character-count {
    overflow: hidden;
    float: left;
    font-size: 12px;
    padding-left: 4px;
    padding-top: 2px;
    display:none;
}



textarea:focus ~ .z-character-count { display:inline; }


.errorContainer {
    margin: 0 -20px 0 20px;
    transform: skew(45deg);
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -o-transform: skew(45deg);
    background: red;
    overflow: hidden;
    position: relative;
    padding-left: 8px;
    transition: height ease-in-out .45s, height ease-in-out .45s;
}

.errorText {
    margin-left: 12px;
    margin-right: 26px;
    transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    text-align: left;
    color: white;
    display: inline-block;
    word-wrap: break-word;
}

.post-code .errorContainer
{
    transform: none;
    margin-right: -12px;
}

.post-code .errorText
{
    transform: none;
}

.z-warning {
    position: absolute;
    top: 8px;
    right: 23px;
    color: #eea236;
    cursor: pointer;
    opacity: 1;
}