.section-title p::after {
    position: absolute;
    display: block;
    width: 60px;
    height: 2px;
    background: #00708029;
    bottom: 0;
}

.view-more-links {
    font-size: 0.8rem;
    font-weight: 500;
    color: #00879b;
    cursor: pointer;
    margin-top: 6px;

    &:hover {
        color: #000;
    }
}

.list {
    position: relative;

    ul {
        padding-left: 0px;
        font-size: 0.9rem;
    }
}

.list h2 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.list ul {
    position: relative;
}

.list ul li {
    position: relative;
    left: 0;
    list-style: none;
    margin: 0px 0;
    border-left: 2px solid #00879b;
    transition: 0.5s ease-in-out;
    cursor: pointer;

}

.list ul li:hover {
    left: 10px;
    font-weight: 600;
}

.list ul li span {
    position: relative;
    padding: 8px;
    padding-left: 12px;
    display: inline-block;
    z-index: 1;
    transition: 0.5s;
}

.list ul li:hover span {
    color: #111;
}

.list ul li:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ebf7f9;
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.5s;
}

.list ul li:hover:before {
    transform: scaleX(1);
}

input.search {
    i {
        padding-bottom: 0.60rem;

        &:before {
            font-family: "Font Awesome 5 Free";
            content: "\f06a";
        }
    }
}

.form-label-group {
    position: relative;
}

.form-label-group .form-control {
    padding-left: 2.5rem;
    /* Add padding to the left for the icon */
}

.form-label-group .fa-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    /* Set icon color */
}

.form-control-feedback {
    pointer-events: none;
    /* Prevent clicking on the icon */
}

body {
    word-spacing: 0.0625rem !important;
    scrollbar-color: #00879b #e0e0e0;
    scrollbar-width: thin;
    overflow: auto !important;
}

body::-webkit-scrollbar {
    width: 1em;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #333;
}

h2,
.h2 {
    font-size: 1.5rem;
}

h4,
.h4 {
    font-size: 1.1rem;
}

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

a {
    color: blue;
    text-decoration: underline;
    background-color: transparent;

    &:hover {
        color: #000;
        text-decoration: underline;
    }
}

.a-blue {
    color: blue;
    text-decoration: underline;
    background-color: transparent;

    &:hover {
        color: #000;
        text-decoration: underline;
    }
}

.text-primary {
    color: #00879b !important;
}

.text-link {
    color: blue !important;
    text-decoration: underline !important;
}

.primary-message-text {
    font-weight: bold !important;
    color: #00879b;
  }

.screen-title {
    font-weight: 700 !important;
    color: #00879b;
    font-size: 20px !important;
}

.pageBtns {
    width: 50%;
    max-width: 10rem;
}

.btn-primary-mal,
.btn-default {
    color: #fff !important;
    background-color: #00879b !important;
    border-color: #00879b !important;
}

.btn-outline-primary {
    --bs-btn-color: #00879b;
    --bs-btn-border-color: #00879b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00879b;
    --bs-btn-hover-border-color: #00879b;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00879b;
    --bs-btn-active-border-color: #00879b;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #00879b;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #00879b;
    --bs-gradient: none;
}

.form-select:focus,
.form-check-input:focus,
.form-control:focus,
.btn-check:focus+.btn-primary-mal,
.btn-primary-mal:focus {
    border-color: #00879b !important;
    box-shadow: 0 0 0 0.15rem #00879b57;
}

ul.bullets {
    list-style: none;

    li::before {
        content: "\2022";
        color: #00879b !important;
        font-weight: 700;
        display: inline-block;
        width: 1.5em;
    }
}

ul.tick-mark {
    padding-left: 0px;
    margin-bottom: 0px;
    list-style: none;

    li {
        padding-bottom: 0.50rem;

        &:before {
            content: '✓';
            margin-right: 10px;
            color: #00879b;
        }
    }

    li.view-more-links {
        &:before {
            content: '';
        }
    }
}

ul.tick-mark.displayGrid,
ul.tick-mark-cross.displayGrid {
    display: grid;
    justify-content: center;
}

ul.tick-mark-cross {
    li {
        padding-bottom: 0.60rem;

        &:before {
            content: "\f00d";
            /* FontAwesome Unicode */
            font-family: FontAwesome;
            display: inline-block;
            margin-left: -1.3em;
            font-size: 16px;
            font-weight: 100;
        }
    }
}

ul.tick-mark-dash {
    li {
        padding-bottom: 0.60rem;

        &:before {
            content: "\f068";
            /* FontAwesome Unicode */
            font-family: FontAwesome;
            display: inline-block;
            margin-left: -1.3em;
            font-size: 16px;
            font-weight: 100;
        }
    }
}

.question-italic {
    font-style: italic;

    i {
        color: #00879b;
    }
}

.ans-p {
    padding-left: 1.2rem;
}

.required-mark {
    color: red;
}

.control-label {
    font-weight: 700;
}

.form-label {
    font-weight: 600;
}

.info-feedback {
    color: #8f6e25;
    width: 100%;
    margin-top: 0.25rem;
    font-size: .875em;
}

.warning-feedback {
    color: #dc3545;
    width: 100%;
    margin-top: 0.25rem;
    font-size: .875em;
}

.form-check-input:checked {
    background-color: #00879b !important;
    border-color: #00879b !important;
}

.form-check {
    margin-bottom: 0.30rem !important;
    margin-left: calc(var(--bs-gutter-x)* .5);
}

#summary {
    span {
        font-weight: bold;
        color: #00879b;
    }

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


.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #f2f2f2;
    background-clip: border-box;
    border: 1px solid #40a58a;
    border-radius: 0.25rem;

    .card-header {
        padding: 0.6rem 1.25rem;
        margin-bottom: 0;
        background-color: #40a58a;
        border-bottom: 1px solid #40a58a;
    }

    .card-title {
        margin-bottom: 0;
        font-size: 1rem;
        color: #fff;
        font-family: inherit;
    }

    .card-body {
        word-wrap: break-word;
        background-color: #f2f2f2;
        background-clip: border-box;
        border-radius: 0.25rem;
    }

    border: 1px solid #40a58a !important;
    border-radius: 0.25rem;
}

.message-error {
    margin-top: 0.25rem;
    font-size: .875em;
    color: #dc3545;
}

.accordion.theme1accordion {
    .accordion-item {
        margin-bottom: 15px;

        .accordion-body {
            padding: 0px !important;

            .accordion-sub-body {
                padding: 1.25rem;
            }
        }

        .accordion-button {
            padding: 0.6rem 1.25rem !important;
            color: #fff !important;
            background-color: #40a58a !important;

            &::after {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;

            }
        }
    }
}

.accordion.theme2accordion {
    .accordion-body {
        padding: 10px 20px;
        background-color: #fff;
    }

    .accordion-button:not(.collapsed) {
        background-color: #ebf7f9;
    }

    .accordion-button {
        padding: 10px;
        background-color: #ebf7f9;

        &:focus {
            box-shadow: none;
        }

        display: grid;
        grid-template-columns: 70% auto max-content;
        align-items: center;
        grid-gap: 10px;
    }

}

@media (min-width: 768px) {
    .text-md-right {
        text-align: right !important;
    }
}

.form-group {
    margin-bottom: 1rem;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.modal-title {
    color: #212529;
}

.text-primary {
    color: #40a58a;
}

.text-blue {
    color: #283992 !important;

    :hover {
        text-decoration: underline !important;
    }
}

a {
    color: #000 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    -webkit-text-decoration-skip: objects !important;
    cursor: pointer;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

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

.accordion-body {
    background: #F2F2F2;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.text-big {
    font-size: 2rem;
}

.txt-uppercase {
    text-transform: uppercase !important;
}

.col-max1 {
    padding: 2% 4% 1% 5% !important;
}

.jumbotron {
    padding: 2rem 1rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
}

.bg-green {
    background-color: #40a58a;
}

.border-green {
    border: 1px solid #40a58a;
}

.div-declined {
    margin: 0% 15%;
}

.error-block {
    border: 1px solid #00879b;
    padding: 70px;
    border-radius: 2%;
    box-shadow: 1px 1px 1px 1px #00879b;
}

.error-content {
    font-size: 24px;
}

.error-block i {
    color: #00879b;
}

.error-title {
    font-weight: 700 !important;
    color: #00879b;
    font-size: 40px;
}

.page-title {
    color: #00879b;
}

.btn-light {
    color: #00879b !important;
    font-weight: 500;
    background-color: #FFF !important;
    border-color: #00879b !important;

    &:hover {
        background-color: rgb(244 244 244) !important
    }
}

.icon-btn {
    padding: 0px;

    i {
        vertical-align: middle;
        font-size: 1.2rem;
    }

    text-decoration: none;
    font-weight: 500;
}

#ieTab {
    border-width: 2px;

    .nav-link {
        color: #212529;
    }


}

.list-message {
    white-space: nowrap;        /* Prevents wrapping to a new line */
    overflow: hidden;           /* Hides any overflow */
    text-overflow: ellipsis;    /* Adds "..." at the end of the visible text */
    max-width: 100%;            /* Restricts width to the container */
    display: block;             /* Ensures block-level formatting */
}

.nav-link.active {

    border: 2px solid #00879b;
    background-color: #00879b !important;
    color: #FFF !important;
    
}

#ieTabContent.tab-content {
    min-height: calc(100vh - 20%);
    background-color: #00879b;
    border: 2px solid #00879b;

    section {
        background-color: #FFF;
        margin: 10px;
        padding: 8px 24px;
        border-radius: 20px;
    }
}

table#existing-income-payment-table {
    td {
        color: #bc6713;
        font-style: italic;
        background-color: #FFF;
    }

}



.has-search .form-control {
    padding-left: 2.375rem !important;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.675rem;
    text-align: center;
    pointer-events: none;
    color: #cbcfd3;
}

header .has-search .form-control-feedback {
    line-height: 2.375rem;
}

.invalid-feedback {
    display: block !important;
    font-size: 14px !important;
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1450px;
    }
}

.card-section {
    border-radius: 13px;
    border-top: 3px solid #00879b;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
    margin-top: 20px;
    height: 100%;
}

.section-title {
    margin-top: -15px;
    color: #00879b;
    position: relative;
}

.section-title p {
    padding-bottom: 15px;
    margin-bottom: 0px;
    font-size: 1.4rem;
    font-weight: 600;

    small {
        font-size: 1rem;
        margin-top: 5px;
        float: right;

    }
}


.section-title.text-center p::after {
    left: calc(50% - 30px);
}

.form-control:disabled {
    background: var(--bs-secondary-bg) !important;
}

.icon-disabled {
    color: #e9ecef !important;
}

tfoot input {
    background: rgb(13 110 253 / 5%) !important;
}

.modal {

    /*From Right/Left */
    &.drawer {

        display: flex !important;

        pointer-events: none;

        * {
            pointer-events: none;
        }

        .modal-dialog {
            margin: 0px;
            display: flex;
            flex: auto;
            transform: translate(25%, 0);

            .modal-content {
                border: none;
                border-radius: 0px;

                .modal-body {
                    overflow: auto;
                }
            }

        }

        &.show {
            pointer-events: auto;

            * {
                pointer-events: auto;
            }

            .modal-dialog {
                transform: translate(0, 0);
            }
        }

        &.right-align {
            flex-direction: row-reverse;
        }

        &.left-align {
            &:not(.show) {
                .modal-dialog {
                    transform: translate(-25%, 0);
                }
            }
        }

    }


}

body.modal-open {
    padding-right: 0px !important;
}


.mtn-12 {
    margin-top: -12px;
}


.toast-success {
    background-color: #198754;
}



.form-control.is-valid,
.was-validated .form-control:valid {
    background-size: calc(0.55em + 0.375rem) calc(0.55em + 0.375rem);
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
    background-size: 16px 12px, calc(0.55em + 0.375rem) calc(0.55em + 0.375rem);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-size: calc(0.55em + 0.375rem) calc(0.55em + 0.375rem);
}

.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

.form-label-group input.form-control,
.form-label-group select.form-control {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 0.75rem 0.75rem;
    font-size: 0.9rem;
    width: 100%;
    background-color: white;
    -webkit-appearance: none; /* Remove default select styling */
    -moz-appearance: none;
    appearance: none;
}

.form-control{
    font-size:0.85rem;
}

.form-label-group label {
    position: absolute;
    top: 0;
    left: 10px;
    padding: 0 5px;
    background-color: white; /* Same as input background */
    color: #aaa;
    transition: 0.2s ease all;
    pointer-events: none;
    transform: translateY(50%); /* Start inside the input/select */
}

.form-label-group input:focus~label,
.form-label-group input:not(:placeholder-shown)~label,
.form-label-group select:focus~label,
.form-label-group select:not([value=""])~label {
    top: -10px;
    left: 10px;
    color: #00879b;
    font-weight: bold; /* Optional, bold for active labels */
    font-size: 0.85rem;
    transform: translateY(0); /* Float above */
    background-color: white;
}

.form-label-group input:focus,
.form-label-group select:focus {
    border-color: #00879b; /* Optional, change border color on focus */
}

.form-label-group select {
    appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"%3E%3Cpath d="M7 10l5 5 5-5H7z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1rem;
    cursor: pointer; /* Indicates it is clickable */
}


.h1-colour {
    color: #00879b;
}

.list-group-item.active {
    background-color: #00879b !important;
    border-color: #00879b !important;
    color: white;
}

.list-name {
    padding-top: 5px;
}

.list-time {
    font-size: 0.9rem !important;
    color: #A9A9A9;
    padding-bottom: 0 !important;
}

.list-message {
    font-size: 1rem !important;
    color: #989898;
    padding-bottom: 5px !important;
}

.hover-row {
    transition: background-color 0.3s, border-left 0.2s;
	border-style: none none groove none; 
	border-color: #787878; 
	border-width: 1px;
    width:100%;
}

.hover-row:hover {
    background-color: #E8E8E8; 
    border-left: 5px solid;

    .list-name {
        color: #00879b;
    }
}

.scroll-height {
    height: calc(100% - 10px)
}

.scrollable-section {
    overflow-y: auto;
    max-height: 30rem;
}

.fixed-banner {
    position: sticky;
    top:0;
    left:0;
    right:0;
    height: 3rem;
    width: 85vw; 
    color: rgb(0, 0, 0);
}

.btn-input {
    color: #fff !important;
    background-color: #00879b !important;
    border-color: #00879b !important;
}

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

.section-heading {
    font-size: 24px;
    font-weight: 500;
    color: #00879b;
}

.grey-separator {
    border: none;
    border-top: 1px solid #ccc;
    margin: 3px auto; 
    width: 95%;
}

.grey-separator-art {
    border: none;
    border-top: 1px solid #ccc;
    margin: 10px auto; 
    width: 95%;
}

th {
    font-weight: 600;
}

.income-col {
    padding-right: 0;
}

/* The £ prefixes still use the Bootstrap 4 .input-group-prepend wrapper. Bootstrap 5 only rounds/squares
   the direct children of .input-group, so the prefix keeps all four corners rounded and leaves a gap where
   it meets the input - square off the edge the two share */
.input-group > .input-group-prepend {
    display: flex;
}

.input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* The sub category the income came through on, it sits under the description as supporting detail so it is
   kept small and muted against the description itself. Long descriptions are cut off rather than pushing the
   row taller, the full text is on the title attribute */
.income-vendor-description {
    padding: 0.15rem 0.25rem 0 0.25rem;
    font-size: 0.75rem;
    color: #00879b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.income-type-group {
    margin-bottom: 1.5rem;
}

.income-type-group:last-child {
    margin-bottom: 0;
}

.income-type-heading {
    font-weight: 600;
    color: #00879b;
    padding-top: 0.25rem;
    margin-top: 0.25rem;
    border-top: 1px solid #e0e0e0;
}

/* Only the vertical padding is set here, the column's own horizontal padding is left alone so the placeholder
   lines up with the heading and the rows above it */
.income-type-empty {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-style: italic;
    color: #6c757d;
}

.income-type-add {
    padding: 0;
    border: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #28a745 !important;
    box-shadow: none !important;
}

.income-type-add:hover {
    text-decoration: underline;
}

/* The customer's own figures are shown for reference against what we identified, so they are toned down
   against the income rows they sit next to - they are still editable */
.customer-input-amount {
    background-color: #f2f2f2;
    color: #495057;
}

.customer-input-amount:focus {
    background-color: #fff;
    color: #212529;
}

.accordion {
    .accordion-item {
        margin-bottom: 15px;

        .accordion-body {
            padding: 0 10px !important;

            .accordion-sub-body {
                padding: 1.25rem;
            }
        }

        .accordion-button {
            padding: 0.6rem 1.25rem !important;
            background-color: #FFF;
            color:#000;
            &::after {
                font-family: "Font Awesome 5 Free";
                background-image: f0d7;
            }
        }
    }
}

.ob-flag {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 7px;
    font-weight: 700;
    color: #ff4c00;
    cursor: pointer;
}

.art-banner {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 10;
    color: #fff;
    width: 100%;
    padding: .5rem 5rem;
    box-shadow: 0 -20px 16px -16px #0000001a;
    border-bottom: 1px solid rgba(0, 135, 155, .2);
    align-items: center !important;
    display: grid !important;
}

.no-margin {
    margin-left: 20px;
    margin-right: 0;
    max-width: fit-content;
}

.hidden {
    display: none !important;
}

#modalBackdrop {
    position: fixed;
    z-index: 999; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    display: none; 
  }

#modalBackdrop.show {
    display: block; /* Show the backdrop */
  }

#_case_notes_modal {
    position: fixed;
    z-index: 1000;
    top: 60px;
    right: 0;
    left: 70%;
    width: 30%; /* Adjust the width as needed */
    height: calc(100% - 60px); /* Adjust height to exclude the header */
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.5s ease; /* Fade-in transition */
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Ensure content stacks vertically */
    justify-content: flex-start; /* Align modal content to the top */
    align-items: flex-end; /* Align modal to the right */
  }

#_case_notes_modal.show {
    opacity: 1; /* Fully visible */
    pointer-events: auto; /* Enable interaction */
  }

  #_art_modal {
    position: fixed;
    z-index: 1000;
    top: 60px;
    right: 0;
    left: 30%;
    width: 70%; /* Adjust the width as needed */
    height: calc(100% - 60px); /* Adjust height to exclude the header */
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.5s ease; /* Fade-in transition */
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Ensure content stacks vertically */
    justify-content: flex-start; /* Align modal content to the top */
    align-items: flex-end; /* Align modal to the right */
  }

#_art_modal.show {
    opacity: 1; /* Fully visible */
    pointer-events: auto; /* Enable interaction */
  }

  .modal-content {
    background-color: white;
    width: 100%; /* Take full width of the modal container */
    height: 100%; /* Take full height of the container */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto; /* Enable scrolling if content overflows */
  }

.cn_textarea {
    height: 5rem !important;
}

.art-section {
    border: 1px solid #dee2e6;
    padding: 15px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.art-small-header {
    font-size: 1.05rem;
    font-weight: 600;
    color: #00879b;
    margin-bottom: 10px;
    padding-left: 0;
}

.art-summary-item {
    font-size: 1.1rem;
    font-weight: 500;
    padding-left: 0;
}

.art-summary-response {
    font-size: 1.1rem;
    font-weight: 500;
    color: #00879b;
    padding-left: 0;
}

#pdfSection{
    width: 187px;
    font-size: 3.6px;
    letter-spacing: 0px;
    .pdf-card-section {
      border: 1px solid #f4f3f7a5;
      padding: 4px;
      margin-top: 2px;
    }
    p {
      margin-bottom: 0px;
    }
    table tr td p{
      font-size: 3.6px !important;
    }
    label {
      font-size: 3px;
      font-weight: 700;
      color: #00879b;
    }
    label + div {
      margin-top: -1px;
    }
    .col-md-6 {
      width: 50% !important;
    }
  }

  .bg-pass {
    background-color: #00879b;
  }

  .ml-mr-1 {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .pl-pr-1 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .large-grey-text {
    font-size: 1.2rem;
    color: #858383;
    font-weight: 500;
    margin-bottom: 0.4rem;
  }

  .large-red-text {
    font-size: 1.2rem;
    color: #dc3545;
    font-weight: 500;
    margin-bottom: 0.4rem;
  }

  .large-green-text {
    font-size: 1.2rem;
    color: #28a745;
    font-weight: 500;
    margin-bottom: 0.4rem;
  }

  .black-separator {
    border: none;
    border-top: 1px solid #000000;
    margin: 3px auto; 
    width: 95%;
}

.green-check {
    color: #28a745; 
    float: right;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: calc(1rem + 0.5vw); 
}

/* The delete bins, same red as the crosses */
.text-delete {
    color: #dc3545;
}

.red-cross {
    color: #dc3545;
    float: right;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: calc(1rem + 0.5vw); 
}