#contentWrapper #content .row {
    width: 100%;
    padding: 1rem;
}

#contentWrapper #content .row h3.header {
    width: 100%;
    display: block;
}

#contentWrapper #content .row h4.emphasis {
    width: 100%;
    display: block;
    color: #8C8C8C;
    font-weight: bold;
}

#contentWrapper #content .row h5 {
    width: 100%;
    display: block;
    color: #373d3f;
}

#contentWrapper #content .row.none {
    display: none;
}

#contentWrapper #content .row.visible {
    display: block;
}

#contentWrapper #content .row p.separatorSpace {
    margin: 1rem 0;
    display: block;
    width: 100%;;
}

#contentWrapper #content .row .filterFlexColumn {
    flex: 0 0 26%;
    margin: 0 0.5rem;
}

#contentWrapper #content .row .filterFlexColumn.none {
    display: none;
}

#contentWrapper #content .row .filterFlexColumn.visible {
    display: block;
}


#contentWrapper #content .row p.filterFlexBreak {
    margin: 0;
    width: 100%;
    display: block;
}

#contentWrapper #content .row .actionColumn {
    width: 15%;
}

#contentWrapper #content .row .actionColumn .form-group input {
    float: right;
}

#contentWrapper #content .row .actionColumn .form-group button.none {
    display: none;
}

#contentWrapper #content .row .actionColumn.large {
    width: 100%;
}

#contentWrapper #content .row .actionColumn.large .form-group button.visible {
    display: inline-block;
    margin-right: 0.5em;
}

#contentWrapper #content .row .actionColumn.large .form-group button.none {
    display: none;
    margin-right: 0.5em;
}

#contentWrapper #content .row .cardFlexColumn {
    flex: 0 0 18%;
    max-width: 18%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: auto;
    margin-bottom: auto;
}

#contentWrapper #content .row .cardFlexColumn .card {
    width: 100%;
    border: 2px solid #005F86;
    padding: 1rem;
}

#contentWrapper #content .row .cardFlexColumn .card h4 {
    margin: 0;
    font-size: 2rem;
    color: #008B99;
    font-weight: bold;
}

#contentWrapper #content .row .cardFlexColumn .card p {
    margin: 0;
    font-size: 1rem;
    word-wrap: break-word;
}

#contentWrapper #content .row .tableRow {
    width: 100%;
    overflow-y: scroll;
    height: 50vh;
    white-space: nowrap;
}

#contentWrapper #content .row .tableColumn {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

#contentWrapper #content .row .tableColumn.none {
    display: none;
}

#contentWrapper #content .row .tableColumn tr.none {
    display: none;
}

#contentWrapper #content .row .tableColumn tr.row.visible {
    display: table-row;
}

#contentWrapper #content .row .tableColumn tr td.borderTop {
    border-top: 1px solid;
}

#contentWrapper #content .row .tableColumn tr td.borderBottom {
    border-bottom: 1px solid;
}

#contentWrapper #content .row .tableColumn tr td.borderBottomDouble {
    border-bottom: 3px double;
}

#contentWrapper #content .row .tableColumn tr td.borderLeft {
    border-left: 1px solid;
}

#contentWrapper #content .row .tableColumn tr td.borderRight {
    border-right: 1px solid;
}

#contentWrapper #content .row .tableColumn tr td.bold {
    font-weight: bold;
}

#contentWrapper #content .row .tableColumn tr td.italics {
    font-style: italic;
}

#contentWrapper #content .row .tableColumn tr td.textRight {
    text-align: right;
}

#contentWrapper #content .row .tableColumn tr td.textCenter {
    text-align: center;
}

#contentWrapper #content .row .tableColumn tr td.blankRow {
    color:white;
}

#contentWrapper #content .row .tableColumn tr td.greyLabel {
    color:grey;
}

#contentWrapper #content .row .tableColumn tr td.filledBackground {
    color:white;
    background-color:#003768;
}

#contentWrapper #content .row .tableColumn tr td.textFill {
    color:#003768;
}

#contentWrapper #content .row .tableColumn tr td.whiteBorders {
    border-color: white;
    border-width: 1px;
}

#contentWrapper #content .row .tableColumn tr td.grey {
    color: #8C8C8C;
}

#contentWrapper #content .row .tableColumn tr td label.form-label {
    display: block;
    width: 100%;
    font-size: medium;
}

#contentWrapper #content .row .tableColumn tr td label.form-label.editLabel,
#contentWrapper #content .row .tableColumn tr td.readLabel
{
    width: 100%;
    padding: 0.1vw 0vw;
    display: block;
    font-size: medium;
    overflow-x: auto;
}

#contentWrapper #content .row .tableColumn tr td label.form-label.editLabel.visible {
    display: block;
}

#contentWrapper #content .row .tableColumn tr td label.form-label.editLabel.none {
    display: none;
}

#contentWrapper #content .row .tableColumn tr td.readLabel.tableLabel {
    width: 20vw;
    display: inline-block;
}

#contentWrapper #content .row .tableColumn tr td div#editModal {
position: fixed;
z-index: 1; 
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}

#contentWrapper #content .row .tableColumn tr td div#editModal.visible {
display: block;
}

#contentWrapper #content .row .tableColumn tr td div#editModal.none {
display: none;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal p.none {
    display: none;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal .btn.cancel {
    margin-left: 1vw;
    float: right;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal .btn.cancel:hover {
    background-color: #f00;
    border-color: rgb(153, 0, 0);
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal .btn.confirm {
    margin-left: 1vw;
    float: right;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal .btn.confirm:hover {
    background-color: #00a100;
    border-color: #006300;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row {
    padding: 1rem 1rem 1rem 2rem;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p {
    text-align: left;
    font-size: normal;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.header {
    margin: 0;
    font-weight: bold;
    font-size: large;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.header.with-margin {
    margin-bottom: 1rem;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.top-margin {
    margin-top: 1rem;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.detail {
    margin-top: 0;
    margin-bottom: 1rem;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.detail.no-margin {
    margin: 0;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.small-detail {
    margin: 0;
    font-size: small;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.detail span.approved {
    color: #00a100;
    font-weight: bold;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.detail span.declined {
    color: #f00;
    font-weight: bold;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.detail span.italics {
    font-style: italic;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.feedback {
    margin: 0;
    color: gray;
    font-size: small;
    font-weight: bold;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.extra-detail {
    margin: 0;
    font-weight: bold;
    font-size: small;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.extra-detail.sunday {
    color: #0da2ff;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.extra-detail.sunday.none {
    display: none;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.extra-detail.sunday.visible {
    display: block;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.extra-detail.public-holiday {
    color: #1fd655;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.extra-detail.public-holiday.none {
    display: none;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.extra-detail.public-holiday.visible {
    display: block;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.extra-detail.pay-type {
    display: block;
    color: #bbb;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.shift-detail {
    margin: 0;
    font-size: small;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.shift-detail span.bold {
    font-weight: bold;
}

#contentWrapper #content .row .tableColumn tr td div#editModal div.innerModal div.modalContent div.row div.container p.shift-detail.hours {
    margin: 0;
}

#contentWrapper #content .row .tableColumn tr td.readLabel.noPadding {
    padding: 0;
}

#contentWrapper #content .row .tableColumn tr td.readLabel.noTopPadding {
    padding-top: 0;
}

#contentWrapper #content .row .tableColumn tr td.readLabel.total-padding {
    padding-bottom: 3vh;
}

#contentWrapper #content .row .tableColumn tr td label.form-label.editLabel.smalledit
{
    padding: 0.2vw 0vw;
}

#contentWrapper #content .row .tableColumn tr td .editContainer {
    width: 100%;
    position: relative;
    display: none;
}

#contentWrapper #content .row .tableColumn tr td .editContainer.visible {
    display: block;
}

#contentWrapper #content .row .tableColumn tr td .editContainer.none {
    display: none;
}

#contentWrapper #content .row .tableColumn tr td .editContainer .confirmation .btn.confirm {
    margin-left: 1vw;
    float: right;
}

#contentWrapper #content .row .tableColumn tr td .editContainer .confirmation .btn.confirm:hover {
    background-color: #00a100;
    border-color: #006300;
}

#contentWrapper #content .row .tableColumn tr td .editContainer .confirmation .btn.cancel {
    margin-left: 1vw;
    float: right;
}

#contentWrapper #content .row .tableColumn tr td .editContainer .confirmation .btn.cancel:hover {
    background-color: #f00;
    border-color: rgb(153, 0, 0);
}

#contentWrapper #content .row .tableColumn tr td .editContainer .confirmation .btn.add {
    margin-left: 1vw;
    float: right;
}

#contentWrapper #content .row .tableColumn tr td label.form-label.editLabel:hover {
    background-color: rgb(219, 219, 219);
    border-radius: 1vh;
}

#contentWrapper #content .row form {
    width: 100%;
}

#contentWrapper #content .row .tableColumn.one {
    width: 100%;
    margin: 1rem 0;
}

#contentWrapper #content .row .tableColumn.two {
    width: 48%;
    margin: 1rem 0;
}

#contentWrapper #content .row .tableColumn.two.leftMargin {
    margin-left: 1.4rem;
    margin-right: 0;
}

#contentWrapper #content .row .tableColumn.two.rightMargin {
    margin-right: 1rem;
    margin-left: 0;
}

#contentWrapper #content .row .tableRow .tableColumn.three {
    display:inline;
}

#contentWrapper #content .row .tableColumn.three {
    width: 32%;
}

#contentWrapper #content .row .tableColumn.three.leftMargin {
    margin-right: 0;
    margin-left: 0.5rem;
}

#contentWrapper #content .row .tableColumn.three.middleMargin {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

#contentWrapper #content .row .tableColumn.three.rightMargin {
    margin-right: 0.5rem;
    margin-left: 0;
}

#contentWrapper #content .row .graphColumn {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

#contentWrapper #content .row .graphColumn .chartBody {
    border: solid 1px #06345c;
    height: max-content;
    width: 100%;
    padding: 1rem;
}

#contentWrapper #content .row .graphColumn h6.graphHeader {
    padding: 1rem;
    background-color: #06345c;
    margin: 0;
    color: #fff !important;
    font-weight: bold;
    text-align: center;
}

#contentWrapper #content .row .graphColumn.one {
    width: 100%;
    margin: 1rem 0;
}

#contentWrapper #content .row .graphColumn.two {
    width: 48%;
    margin: 1rem 0;
}

#contentWrapper #content .row .graphColumn.two.leftMargin {
    margin-left: 1.4rem;
    margin-right: 0;
}

#contentWrapper #content .row .graphColumn.two.rightMargin {
    margin-right: 1rem;
    margin-left: 0;
}

#contentWrapper #content .row .graphColumn.three {
    width: 32%;
}

#contentWrapper #content .row .graphColumn.three.leftMargin {
    margin-right: 0;
    margin-left: 0.5rem;
}

#contentWrapper #content .row .graphColumn.three.middleMargin {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

#contentWrapper #content .row .graphColumn.three.rightMargin {
    margin-right: 0.5rem;
    margin-left: 0;
}

#contentWrapper #content .row .textFlexColumn {
    margin: auto 0.5rem;
    display: inline-block;
}

#contentWrapper #content .row .textFlexColumn.leftMargin {
    margin-right: 0;
    margin-left: 0.5rem;
}

#contentWrapper #content .row .textFlexColumn.middleMargin {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

#contentWrapper #content .row .textFlexColumn.rightMargin {
    margin-right: 0.5rem;
    margin-left: 0;
}

#contentWrapper #content .row .textFlexColumn .headingColumn {
    width: 100%;
    display: block;
}

#contentWrapper #content .row .textFlexColumn .headingColumn h4 {
    font-weight: bold;
    color: #008B99;
    font-size: large;
}

#contentWrapper #content .row .textFlexColumn .headingColumn h5 {
    font-weight: bold;
    color: #8C8C8C;
    font-size: medium;
}

#contentWrapper #content .row .textFlexColumn .content {
    width: 100%;
    display: block;
}

#contentWrapper #content .row .textFlexColumn .content h5 {
    font-weight: bold;
    color: grey;
    font-size: medium;
    width: 100%;
    display: block;
}

#contentWrapper #content .row .textFlexColumn .content h5.contentHeading {
    font-weight: bold;
    color: #373d3f;
    font-size: medium;
}

#contentWrapper #content .row .textFlexColumn .content p {
    font-weight: normal;
    color: #373d3f;
    font-size: medium;
    overflow-y: auto;
    width: 100%;
}

#contentWrapper #content .row .textFlexColumn.cardOne {
    flex: 0 0 100%;   
}

#contentWrapper #content .row .textFlexColumn.cardOne .content p {
    max-height: 15rem;
}

#contentWrapper #content .row .textFlexColumn.cardTwo {
    flex: 0 0 78%;
}

#contentWrapper #content .row .textFlexColumn.cardTwo .content p {
    max-height: 15rem;
}

#contentWrapper #content .row .textFlexColumn.cardThree {
    flex: 0 0 58%;
}

#contentWrapper #content .row .textFlexColumn.cardThree .content p {
    max-height: 15rem;
}

#contentWrapper #content .row .textFlexColumn.cardFour {
    flex: 0 0 38%;
}

#contentWrapper #content .row .textFlexColumn.cardFour .content p {
    max-height: 15rem;
}

#contentWrapper #content .row .textFlexColumn.cardFive {
    flex: 0 0 20%;
}

#contentWrapper #content .row .textFlexColumn.cardFive .content p {
    max-height: 15rem;
}

#contentWrapper #content .row .textFlexColumn.graphTwo {
    flex: 0 0 48%;
}

#contentWrapper #content .row .textFlexColumn.graphTwo .content p {
    max-height: 15rem;
}

#contentWrapper #content .row .textFlexColumn.graphThree.one {
    flex: 0 0 32%;
}

#contentWrapper #content .row .textFlexColumn.graphThree.one .content p {
    max-height: 15rem;
}

#contentWrapper #content .row .textFlexColumn.graphThree.two {
    flex: 0 0 66%;
}

#contentWrapper #content .row .textFlexColumn.graphThree.two .content p {
    max-height: 15rem;
}

#contentWrapper #content .row .toast {
    width: 100%;
}

#contentWrapper #content .row .toast p {
    width: 60%;
    margin-top: 1%;
    display: inline-block;
}

#contentWrapper #content .row .toast button.btn {
    float: right;
    max-width: 5vw;
    margin: 0 0 0 1vw;
    display: inline-block;
}

#contentWrapper #content .row .toast button.btn.confirm {
    max-height: 15rem;
}

#contentWrapper #content .row .toast button.btn.confirm:hover {
    background-color: #00a100;
    border-color: #006300;

}

#contentWrapper #content .row .toast button.btn.cancel {
    max-height: 15rem;
}

#contentWrapper #content .row .toast button.btn.cancel:hover {
    background-color: #f00;
    border-color: rgb(153, 0, 0);
}