:root {
    --clear: transparent;
    --white: #fbf9f4;
    --black: #000000;

    --green: #0e5447; 
    --green-2:#51756c;  
    --green-dark: #053b33;  
    --green-3: #7d9891;  
    --green-4: #062d28;  
    --error-red: #DF1616;  
    --mint: #b8e0d5;  
    --mint-light: #E6F2EE;
    --orange: #ff7540;  
    --gold: #ffa700;  
    --yellow: #f6c544;  
    --yellow-light: #F8E9BE;

    --cream-light:#f5ead9;
    --cream:#928d86;
    --cream-dark:#5e5a54;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/* Sections
     ========================================================================== */

/**
   * Remove the margin in all browsers.
   */

body {
    margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */

main {
    display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
     ========================================================================== */

/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Text-level semantics
     ========================================================================== */

/**
   * Remove the gray background on active links in IE 10.
   */

a {
    background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
strong {
    font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */

small {
    font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
     ========================================================================== */

/**
   * Remove the border on images inside links in IE 10.
   */

img {
    border-style: none;
}

/* Forms
     ========================================================================== */

/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

    /**
   * Remove the inner border and padding in Firefox.
   */

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
   * Restore the focus styles unset by the previous rule.
   */

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

/**
   * Correct the padding in Firefox.
   */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */

progress {
    vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */

textarea {
    overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

    /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/* Interactive
     ========================================================================== */

/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */

details {
    display: block;
}

/*
   * Add the correct display in all browsers.
   */

summary {
    display: list-item;
}

/* Misc
     ========================================================================== */

/**
   * Add the correct display in IE 10+.
   */

template {
    display: none;
}

/**
   * Add the correct display in IE 10.
   */

[hidden] {
    display: none;
}

/* ================================================================
      Globals
================================================================ */

*,
*:after,
*:before {
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: "Arial", Arial, Helvetica, sans-serif;
}

ul {
    padding: 0;
    list-style: none;
}

body {
    font-size: 1.6rem;
    box-sizing: border-box;
}

/* input[type=text],
input[type=password],
input[type=tel],
input[type=email],
select,
textarea {
    vertical-align: top;
    border: 0;
    font-family: Roboto, sans-serif;
    border-bottom: 1px solid #bbb;
    box-shadow: inset 0 0 0 transparent;
    transition: box-shadow .3s ease-out;
} */

button,
a {
    cursor: pointer;
}

    a:hover,
    a:focus {
        text-decoration: underline;
    }

/* -------------------------------------------------------------------------- */
/*                          Boilerplate - Base Styles                         */
/* -------------------------------------------------------------------------- */

html {
    height: 100%;
}

body {
    height: 100%;
}

hr {
    display: block;
    margin: 1em 0;
    padding: 0;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--cream);
}

img {
    vertical-align: middle;
    width: auto;
    height: auto;
    max-width: 100%;
}

.svg-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    fill: currentColor;
    transition: all 0.3s ease-in-out;
}

.image-fluid,
.image-fluid img {
    max-width: none;
    width: 100%;
    height: auto;
}

.image-fixed,
.image-fixed img {
    max-width: none;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden,
.visually-hidden,
.visuallyHidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    border: 0;
    width: 1px;
    height: 1px;
}

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus,
    .visually-hidden.focusable:active,
    .visually-hidden.focusable:focus,
    .visuallyHidden.focusable:active,
    .visuallyHidden.focusable:focus {
        position: static;
        overflow: visible;
        clip: auto;
        margin: 0;
        width: auto;
        height: auto;
    }

    .visuallyhidden.skip-link:focus,
    .visuallyhidden.skip-link:active,
    .visually-hidden.skip-link:focus,
    .visually-hidden.skip-link:active,
    .visuallyHidden.skip-link:focus,
    .visuallyHidden.skip-link:active {
        position: fixed;
        z-index: 9000;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        text-align: center;
        font-family: "Roboto", sans-serif;
        font-size: 20px;
        font-size: 1.8rem;
        background: var(--green-3);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        color: var(--black);
        transition: all 0.3s ease-in-out;
    }

.invisible {
    visibility: hidden;
}

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

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

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

.breakforprint {
    page-break-after: always;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

table {
    margin: 0;
    border: 1px solid var(--cream);
}

td {
    padding: 0.2em 0.4em;
    border: 1px solid var(--cream);
    background: hsl(0, 0%, 90%);
}

tr:nth-child(2n) td {
    background: var(--white);
}

button {
    background: none;
    border: none;
}

.button,
.btn {
    display: inline-block;
    padding: 0.64em 1.2em 0.56em;
    border: 0;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    line-height: 1.1;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.js-click-user *:focus,
.js-click-user *:active {
    outline: 0;
}

.scroll-cover {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: auto !important;
    z-index: 10000;
}

.svg-legend {
    position: absolute;
    top: -9999em;
    left: -9999em;
    width: 0;
    height: 0;
    overflow: hidden;
}

.svg-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    fill: currentColor;
    transition: all 0.3s ease-in-out;
}

/* ---------------------------- Personal Globals ---------------------------- */
svg {
    max-height: 50px;
    max-width: 150px;
}

a:hover,
a:focus {
    text-decoration: underline;
    cursor: pointer;
}

button:hover,
button:focus {
    cursor: pointer;
}

input,
button,
.dropdown {
    box-sizing: border-box;
    border: 3px solid transparent;
}

    input:hover,
    textarea:hover,
    input:focus,
    textarea:focus {
        cursor: pointer;
        border: 3px solid var(--black);
        margin: 0;
    }

    button:hover,
    button:focus {
        cursor: pointer;
        border: 3px solid var(--black);
    }

.slice__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 20px;
}

@media screen and (min-width: 768px) {
    .slice__container {
        padding: 20px 50px;
    }
}

/* -------------------------------------------------------------------------- */
/*                               End Boilerplate                              */
/* -------------------------------------------------------------------------- */

/* Notes and Reminders */
/* Use pixels for width or percentages
REM for spacing and font sizes. Top and bottom sizes. Margins and paddings
Check in Firefox and Edge. Chrome is the bulk of the work
Responsiveness. 768px and under is a good breakpoint for mobile. Then 768 and above is good for desktop 
*/
/* End Notes and Reminders */

/* ------------------------------ Mobile First ------------------------------ */

/* ------------------------------ Global Styles ----------------------------- */
svg {
    max-height: 50px;
    max-width: 150px;
}

header .slice__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 20px 50px;
}

.header-top .slice__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0;
    z-index: 1;
}

/* ------------------------------ Header Mobile ----------------------------- */
.header-flex-mobile {
    display: flex;
    justify-content: space-between;
}

.header-mobile__hamburger,
.right {
    width: 24px;
    height: 24px;
}

.header-mobile__logo {
    color: var(--green);
}

.header-mobile__toggle {
    padding: 0;
}

.right {
    visibility: hidden;
}

.header-bottom {
    display: none;
}

.header-mobile__hamburger {
    fill: var(--orange);
}

    .header-mobile__hamburger:hover,
    .header-mobile__hamburger:focus {
        fill: var(--green);
    }

.header-mobile__dtcc {
    height: 30px;
    width: 120px;
}

.desktop-only {
    display: none;
}

.header-top__link {
    text-decoration: none;
    display: flex;
    padding: 20px 25px;
    border-bottom: 3px solid var(--cream);
    position: relative;
    background-color: var(--orange);
}

    .header-top__link:hover,
    .header-top__link:focus {
        background-color: var(--green);
        text-decoration: none;
    }

.header-top-section {
    display: none;
}

    .header-top-section.active {
        display: block;
    }

.slice-theme-header {
    position: relative;
}

.header-p-dropdown {
    position: absolute;
    width: 100%;
    top: 74px;
    -webkit-box-shadow: 0 8px 20px -15px var(--black);
    -moz-box-shadow: 0 8px 20px -15px var(--black);
    box-shadow: 0 8px 20px -15px var(--black);
}

.header-dropdown .header-top__link:before,
.header-top__link:after {
    content: "";
    position: absolute;
    background: var(--white);
}

/* the vertical line */
.header-dropdown .header-top__link:before {
    right: 25px;
    top: 20px;
    width: 4px;
    transform: translateX(-50%);
    height: 18px;
}

/* the horizontal line */
.header-dropdown .header-top__link:after {
    top: 29px;
    right: 20px;
    height: 4px;
    width: 18px;
    transform: translateY(-50%);
}

.header-top__text {
    color: var(--white);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 19px;
}

.header-top-section--user {
    display: flex;
    background-color: var(--cream-light);
    padding: 20px 25px;
    justify-content: space-between;
    align-items: center;
}

.header-top-section--user .username {
    font-size: 12px;
}

.header-top-section--user a {
    color: var(--green);
}

.header-portals-icon,
.header-learning-icon {
    width: 20px;
    height: 20px;
    margin-right: 20px;
}

.header-client-icon {
    width: 24px;
    height: 24px;
    margin-right: 20px;
}

#client-icon path,
#client-icon circle {
    fill: var(--white);
}

#dtcc-learning {
    fill: var(--white);
}

#portals-icon path {
    fill: var(--white);
}

/* Dropdown */
.dropdown {
    background-color: var(--cream-light);
    border-radius: 3px;
    padding: 10px 0;
    box-sizing: border-box;
    margin: 0;
    display: none;
}

.dropdown__item {
    border-bottom: 1px solid var(--cream);
}

.dropdown__link {
    color: var(--green-dark);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0;
    line-height: 43px;
    text-decoration: none;
    padding-bottom: 13px;
    padding-top: 15px;
    margin: 0 33px;
    margin-left: 50px;
    position: relative;
    box-sizing: border-box;
}

.dropdown__item:last-child {
    border-bottom: none;
}

    .dropdown__item:last-child .dropdown__link::after {
        border-bottom: none;
    }

/* ------------------------------ Active State ------------------------------ */

.dropdown.open {
    display: block;
}

.header-dropdown .header-top__link.active:before {
    display: none;
}

.site-content {
    display: flex;
    flex-direction: column;
}

.page-wrapper {
    flex-grow: 1;
}

.site-main.active {
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    /* Black background with opacity */
    z-index: 2;
    /* Specify a stack order in case you're using a different order for other elements */
}

/* Turn off active state of the display:block when responsiveness changes */
@media screen and (min-width: 768px) {
    .slice-theme-header {
        position: static;
    }

    .header-top {
        background-color: transparent;
    }

    .desktop-only {
        display: block;
    }

    .header-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .header-mobile {
        display: none;
    }

    /* ------------------------------- Header Top ------------------------------- */
    .header-top {
        display: flex;
        justify-content: space-between;
    }

    .header-top-section {
        display: flex;
        justify-content: flex-start;
    }

    .header-portals {
        margin-right: 20px;
    }

    .header-portals-icon,
    .header-learning-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .header-portals-icon {
        margin-bottom: -2px;
    }

    .header-client-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        margin-top: -3px;
    }

    #client-icon path,
    #client-icon circle {
        fill: var(--orange);
    }

    #dtcc-learning {
        fill: var(--orange);
    }

    #portals-icon path {
        fill: var(--orange);
    }

    .header-top__link {
        text-decoration: none;
        margin-right: 30px;
    }

        .header-top__link:hover,
        .header-top__link:focus {
            background-color: transparent;
        }

    .header-top .slice__container {
        max-width: 1340px;
        margin: 0 auto;
        padding: 20px 50px;
    }

    .header-top__link {
        text-decoration: none;
        display: flex;
        padding: 0;
        position: static;
        border-bottom: none;
        background-color: transparent;
    }

    .header-top-section:last-child .header-top__link {
        margin-right: 0;
    }

    .header-top-section:last-child .header-top__text {
        margin-right: 0;
    }

    .header-top__link--left {
        padding-right: 40px;
    }

    .header-top__text {
        color: var(--green);
        font-family: "Arial", Arial, Helvetica, sans-serif, sans serif;
        font-size: 1.4rem;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 17px;
        margin-right: 10px;
        white-space: pre;
    }

    .header-portals-arrow,
    .header-regions-arrow {
        width: 14px;
        height: 10px;
        margin-top: 6px;
    }

    /* Dropdown */

    .header-p-dropdown {
        position: relative;
        width: 100%;
        top: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .header-top-section--user {
        display: none;
    }

    .dropdown {
        background-color: var(--cream-light);
        position: absolute;
        top: 100%;
        border-radius: 3px;
        box-shadow: 0 0 10px rgb(150, 150, 150);
        display: block;
        padding: 10px 0;
        box-sizing: border-box;
        margin-top: 0;
        margin-top: 2px;
        display: none;
    }

    .dropdown__item {
        border-bottom: none;
    }

    .dropdown__link {
        color: var(--green-dark);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        font-size: 1.6rem;
        letter-spacing: 0;
        line-height: 43px;
        text-decoration: none;
        padding-bottom: 13px;
        padding-top: 15px;
        margin: 0 33px;
        box-sizing: border-box;
        top: 0;
    }

        .dropdown__link::after {
            border-bottom: 1px solid var(--cream);
            position: absolute;
            content: "";
            width: 120px;
            left: 0;
            bottom: 0;
        }

    /* ------------------------------ Active state ------------------------------ */
    .header-top__link.active {
        position: relative;
    }

        .header-top__link.active::after {
            content: "";
            position: absolute;
            background-color: var(--orange);
            color: var(--white)
            top: 215%;
            left: 0;
            height: 4px;
            width: 100%;
            transform: translateY(-50%);
        }

    .dropdown.open {
        display: block;
    }

    .header-top__link.active > .dropdown-arrow {
        /* transform: rotate(180deg); */
        transform: scaleY(-1);
        margin-top: 3px;
    }

    /* ------------------------------ Header Bottom ----------------------------- */

    .header-bottom {
        color: var(--green);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--cream);
        padding: 1.5rem 0;
    }

    .header-bottom__right-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-bottom__right-wrapper > * {
        margin: 0 20px;
    }

    .header-bottom__logo,
    .header-bottom__logo svg {
        color: var(--green) !important;
    }

    .header-bottom__logout {
        color: var(--white);
        display: inline-flex;
        align-items: center;
        background-color: var(--orange);
        padding: 20px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 30px;
    }

    .header-bottom__logout:hover {
        text-decoration: none;
        background-color: var(--green);
    }

    .header-bottom__username {
        display: inline-flex;
        align-items: center;
    }

    .header-bottom__arrow {
        height: 24px;
        width: 24px;
        margin-bottom: 4px;
    }

    .header-bottom__back {
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .header-bottom__arrow {
        fill: var(--green);
        margin-right: 15px;
    }

    .header-bottom__text {
        color: var(--green);
        font-size: 1.8rem;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 26px;
    }

    .header-desktop__dtcc {
        height: 30px;
        width: 160px;
    }
}

/* ------------------ Footer ------------------------ */

/* Notes and Reminders */
/* Use pixels for width or percentages
REM for spacing and font sizes. Top and bottom sizes. Margins and paddings
Check in Firefox and Edge. Chrome is the bulk of the work
Responsiveness. 768px and under is a good breakpoint for mobile. Then 768 and above is good for desktop 
--In this case I made it 800 and up for desktop to make it smoother 
*/
/* End Notes and Reminders */

/* ------------------------------ Mobile First ------------------------------ */

.slice-theme-footer {
    background-color: var(--green);
}

footer .slice__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 40px 20px;
}

.footer svg:hover,
.footer svg:focus {
    fill: var(--white);
}

.footer a:hover,
.footer a:focus {
    text-decoration: none;
}

.footer__list {
    list-style-type: none;
    vertical-align: middle;
    text-align: center;
}

.footer-social__icon {
    fill: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 30px;
}

.footer-logo__dtcc {
    height: 30px;
    width: 120px;
    fill: var(--white) !important;
    color: var(--white);
    margin-bottom: 20px;
}

.footer__info {
    color: white;
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    text-align: center;
}

.footer-terms {
    list-style-type: none;
    line-height: 3.2rem;
    text-align: center;
    padding-top: 10px;
}

.footer-terms__item {
    display: inline-block;
    margin-left: 1rem;
    text-align: center;
}

.footer-terms__text {
    color: white;
    font-weight: bold;
}

.footer-social {
    display: flex;
    justify-content: space-between;
}

.footer-social__list {
    margin-left: 20px;
}

.footer-copyright {
    line-height: 20px;
    text-align: center;
    letter-spacing: 0;
}

@media screen and (min-width: 500px) and (max-width: 800px) {
    .footer-social {
        display: flex;
        justify-content: center;
    }
}

@media screen and (min-width: 800px) and (max-width: 990px) {
    .footer__info {
        max-width: 400px;
    }

    .footer-social {
        display: flex;
        justify-content: center;
    }
}

/* Breakpoint for desktop */
@media screen and (min-width: 800px) {
    /* Added in the paddings? */
    footer .slice__container {
        max-width: 1340px;
        margin: 0 auto;
        padding: 0 20px;
    }

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

    .footer__list {
        list-style-type: none;
        vertical-align: middle;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 30%;
    }

    .footer-logo__dtcc {
        margin-bottom: 0;
    }

    .footer-terms {
        padding-top: 0;
        margin-top: 0;
    }

    .footer-social {
        display: flex;
    }

    .footer-social__list {
        margin-left: 20px;
    }

    .footer-social__link {
        text-align: center;
    }

    .footer-social__icon {
        display: block;
        height: 24px;
        width: 30px;
        margin: auto;
    }

    .footer__info {
        margin: 32px 0;
    }

    .footer-terms {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    .footer-terms__item {
        margin-left: 2.5rem;
    }

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

/* -------------------------------- Select Dropdown -------------------------------- */

.form-dropdown {
    height: 19px;
    width: 190px;
    padding: 6px 25px 5px 10px;
    border: 1px solid var(--cream-light);
    border-radius: 3px;
    display: block;
    cursor: pointer;
    position: relative;
}

.form-dropdown__sub-menu {
    display: none;
    width: 90%;
    padding: 6px 0;
    list-style: none;
    margin: 0;
    background-color: var(--white);
    border-right: 1px solid var(--cream-dark);
    border-bottom: 1px solid var(--cream-dark);
    border-left: 1px solid var(--cream-dark);
    border-top: 1px solid var(--cream-dark);
    position: absolute;
    z-index: 200;
    left: 7px;
    top: 80%;
}

.form-dropdownToggle {
    display: block;
}

.form-dropdown__item {
    color: var(--black);
    padding: 2px 10px;
    position: relative;
    z-index: 50;
}

.form-dropdown__label {
    width: 100%;
    display: inline-block;
    height: 100%;
}

.form-dropdown__item:hover {
    background-color: var(--cream-light);
}

.form-dropdown__title:before {
    content: "";
    position: absolute;
    z-index: 5;
    height: 30px;
    width: 35px;
    top: 0;
    right: 0;
}

.form-dropdown__title:after {
    content: "";
    position: absolute;
    top: 23px;
    right: 20px;
    z-index: 10;
    padding-top: 5px;
    padding-right: 12px;
    font-size: 16px;
    color: var(--black);
    border: solid var(--black);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

input.form-dropdown__input {
    opacity: 0;
    /*   visibility:hidden; */
}

.form-dropdown__item {
    list-style-type: none;
    display: flex;
}

.form-dropdown__title {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    line-height: 42px;
}

.form-dropdown {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

    .form-dropdown:hover,
    .form-dropdown:focus {
        cursor: pointer;
        border: 3px solid var(--black);
    }

.form-dropdown__label {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 22px;
    vertical-align: middle;
}

/* ------------------------------- Main Banner ------------------------------ */
.slice-theme-banner {
    background-color: var(--green);
}

input,
label {
    display: block;
}

input {
    padding-left: 30px;
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 22px;
}

    input::placeholder {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 19px;
    }

.main-banner {
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 36px;
    text-align: left;
    padding: 10px 0;
}

.main-banner-testing {
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 36px;
    text-align: left;
    padding: 10px 0;
}

.reg-description {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 26px;
    width: 100%;
    text-align: left;
    padding: 15px 0;
}

.reg-title {
    text-transform: uppercase;
    color: var(--green);
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;
    text-align: left;
    margin-bottom: 10px;
}

/* ------------------------ Start Client Registration ----------------------- */

.form-container {
    background-color: var(--cream-light);
    width: 100%;
    margin: auto;
}

.form-label {
    color: var(--black);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 42px;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.form-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dropdown__label {
    white-space: nowrap;
    margin-right: 1rem;
}

.textinput__container {
    padding: 1rem 0;
}

.form-grid__label {
    color: var(--black);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    margin: 0;
}

.textinput__container.indent {
    padding-left: 30px;
}

.textinput__label {
    margin-right: 1rem;
    line-height: 1.4;
}

.textinput__input {
    border: 1px solid var(--black);
    padding: 4px;
    margin: 2px 0;
    line-height: 1.2;
}

textarea.textinput__input {
    resize: none;
}

.field-area {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 15px 0;
}

    .field-area.inline {
        flex-direction: row;
        align-items: center;
    }

.form-input {
    box-sizing: border-box;
    height: 60px;
    width: 100%;
    border: 1px solid var(--cream-dark);
    border-radius: 30px;
    background-color: var(--white);
}

    .form-input.empty,
    .form-input:disabled {
        opacity: 0.5;
        border: 1px solid var(--cream-dark) !important;
    }

        .form-input.empty:hover,
        .form-input.empty:focus,
        .form-input.loading:hover,
        .form-input.loading:focus {
            cursor: default !important;
            border: 1px solid var(--cream-dark) !important;
        }

    .form-input .loader {
        display: none;
    }

    .form-input.loading .loader {
        display: block;
    }

    .form-input.loading .form-dropdown__title {
        display: none;
    }

.submit-button {
    margin: 40px auto !important;
    background-color: var(--orange);
    border-radius: 30px;
    padding: 20px 0;
    width: 100%;
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 20px;
    letter-spacing: 0.27px;
    line-height: 19px;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
}

    .submit-button:disabled {
        opacity: 0.5;
        border-color: transparent !important;
    }

.form-link {
    color: var(--green);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 24px;
    text-align: left;
    text-decoration: none;
    margin: auto;
    margin-bottom: 25px;
    margin-top: 10px;
}

.main-arrow {
    height: 17px;
    width: 24px;
}

/* ----------------------------- Start Internal Status ---------------------------- */
.content-container {
    background-color: var(--cream-light);
    width: 100%;
    margin: auto;
}

.data-list {
    margin-top: 40px;
    margin-bottom: 0;
}

.data-list__term {
    box-sizing: border-box;
    border: 1px solid var(--cream-dark);
    border-radius: 30px;
    width: 100%;
    padding: 20px;
    background-color: var(--white);
    display: inline-block;
    margin-bottom: 25px;
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 19px;
}

.data-list__description {
    border-radius: 30px;
    background-color: var(--gold);
    padding: 20px;
    width: 100%;
    display: inline-block;
    color: var(--black);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 0.25px;
    line-height: 20px;
    text-align: center;
    margin-left: 0;
    margin-bottom: 60px;
    position: relative;
    text-transform: uppercase;
}

    .data-list__description::after {
        bottom: -30px;
        height: 1px;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        content: "";
        position: absolute;
        background: var(--cream);
    }

    .data-list__description:last-child::after {
        display: none;
    }

/* ----------------------------- Start Client Testing ----------------------------- */

.survey__personal-info .textinput__label {
    min-width: 150px;
}

.form-container-testing {
    background-color: var(--cream-light);
    width: 100%;
    margin: auto;
    padding: 30px 20px;
    border-radius: 3px;
    -webkit-box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
    -moz-box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
    box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
}

.testing-status {
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.25px;
    line-height: 20px;
    text-align: center;
    border-radius: 30px;
    background-color: var(--orange);
    text-transform: uppercase;
    padding: 10px 20px;
    margin: 10px 0;
    width: 100%;
    display: flex;
    align-items: center;
}

.survey__title {
    color: var(--black);
    font-family: "Times New Roman", Times, serif;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 42px;
    margin: 0;
}

.testing-status:empty {
    visibility: hidden;
}

.section__title {
    color: var(--green);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;
    text-transform: uppercase;
}

.group__category {
    color: var(--black);
    font-family: "Times New Roman", Times, serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 42px;
    margin: 0;
}

.group.noline {
    margin: 0;
}

    .group.noline:after {
        display: none;
    }

.form-grid__container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.form-grid__item {
    flex: 1 0 50%;
    padding-right: 20px;
}

.checkbox__grid,
.checkbox__list {
    display: flex;
    flex-wrap: wrap;
}

.checkbox__list {
    justify-content: space-between;
}

.checkbox__grid .checkbox__container {
    flex: 1 0 33.3%;
}

.checkbox__legend {
    color: var(--black);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 24px;
    margin-bottom: 10px;
}

.group__information {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 19px;
}

.meeting__title {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 28px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
}

.meeting__info {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 28px;
}

.meeting__schedule {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    margin: 10px 0;
}

.meeting__join,
.testing-download-btn {
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 20px;
    letter-spacing: 0.27px;
    line-height: 19px;
    text-align: center;
    border-radius: 30px;
    text-transform: uppercase;
    background-color: var(--orange);
    padding: 17px 0;
    width: 100%;
    margin: 15px 0 0 0;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    display: block;
    text-decoration: none;
}

.testing-download-wrapper {
    text-align: center;
}

.testing-download-btn {
    display: inline-block;
    width: auto;
    margin: 25px 0 0 0;
    padding: 17px 24px;
}

.meeting__joinby {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 0;
}

.meeting__joinby__info {
    font-weight: normal;
}

.meeting__joinby__link,
.group__link,
.checkbox__link {
    text-decoration: underline;
    color: var(--green);
}

    .meeting__joinby__link:hover,
    .meeting__joinby__link:focus,
    .group__link:hover,
    .group__link:focus {
        text-decoration: none;
    }

.group {
    position: relative;
    margin-bottom: 35px;
}

    .group::after {
        height: 1px;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        content: "";
        position: absolute;
        background: var(--cream);
        bottom: -20px;
    }

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

.group__list,
.group__sub {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
}

.group__list__item--alphabet {
    list-style-type: lower-alpha;
}

.phone-icon {
    width: 20px;
    height: 21px;
    vertical-align: middle;
}

.checkbox__label {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 19px;
    padding-left: 40px;
    cursor: pointer;
}

.checkbox__container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 15px;
}

.checkbox__container-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.checkbox__input {
    visibility: hidden;
    display: none;
}

.checkbox__input__disabled {
    visibility: hidden;
    display: none;
}

.checkbox__container.disabled .checkbox__image {
    background-color: var(--cream);
}

.checkbox__image {
    position: absolute;
    left: 0;
}

.checkbox__image--top {
    position: absolute;
    left: 85%;
}

.checkbox__container > input + img {
    display: inline-block;
    padding: 0px;
    height: 21px;
    width: 21px;
    box-sizing: border-box;
    border: 1px solid var(--cream);
    background-color: var(--cream-light);
    pointer-events: none;
}

.form-container-testing .checkbox__container > input + img {
    background-color: var(--white);
}

.checkbox__container-2 > input + img {
    display: inline-block;
    padding: 0px;
    height: 21px;
    width: 21px;
    box-sizing: border-box;
    border: 1px solid var(--cream);
    background-color: var(--cream-light);
    z-index: 1;
}

.checkbox__container > input:checked + img {
    background: url(../../../../graphics/SVG/main/check.svg);
    background-color: var(--orange);
    background-repeat: no-repeat;
    background-position: center center;
    box-sizing: border-box;
    background-size: 17px 17px;
    border: none;
}

.checkbox__container-2 > input:checked + .checkbox__image--top {
    background: url(../../../../graphics/SVG/main/check.svg);
    background-color: var(--orange);
    background-repeat: no-repeat;
    background-position: center center;
    box-sizing: border-box;
    background-size: 17px 17px;
    border: none;
    z-index: 10;
}

.checkbox__label-complete {
    color: var(--black);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 22px;
    letter-spacing: 0;
    line-height: 28px;
    padding-right: 100px;
    z-index: 11;
}

.customer-service__text {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
}

.customer-service__link {
    font-size: 18px;
    letter-spacing: 0;
    line-height: 26px;
    text-align: center;
    color: var(--green);
    text-decoration: none;
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    margin: 30px 0;
    display: block;
    position: relative;
    box-sizing: border-box;
}

    .customer-service__link:after {
        height: 1px;
        width: 30px;
        left: 50%;
        transform: translate(-50%, -50%);
        content: "";
        position: absolute;
        background: var(--cream);
        bottom: -20px;
        box-sizing: border-box;
        text-align: center;
    }

.customer-service__phone {
    text-decoration: none;
}

.customer-service__extra {
    display: none;
}

.customer-service__support {
    color: var(--green);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 36px;
    padding-top: 10px;
    text-align: center;
}

.phone-icon {
    margin: 0 10px;
}

.table {
    border-collapse: collapse;
    width: 909px;
}

ol .table-wrapper {
    margin-bottom: 20px;
}

.group__sub {
    margin: 0;
}

table,
th,
td {
    border: 1px solid var(--cream);
}

.table-wrapper {
    overflow: auto;
    /* overflow: scroll; */
}

.table__heading {
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 0.25px;
    line-height: 19px;
    text-transform: uppercase;
    background-color: var(--green);
    padding: 20px 20px;
    text-align: left;
}

.table__data {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    background-color: transparent;
    padding: 16px 20px;
    text-align: left;
}

    .table__data.center {
        text-align: center;
    }

    .table__data .checkbox__container {
        position: relative;
        margin-bottom: 0;
    }

    .table__data .checkbox__image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .table__data .checkbox__label {
        width: 20px;
        height: 20px;
        margin-left: 25px;
    }

.table__row td:nth-child(1) {
    background-color: var(--cream-light);
}

.evidence-form .table td:nth-child(11) {
    min-width: 320px;
}

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

.upload-form {
    display: flex;
    color: var(--green);
    align-items: center;
    flex-wrap: wrap;
}

    .upload-form input[type="file"] {
        display: none;
    }

    .upload-form label {
        white-space: nowrap;
    }

    .upload-form .files-text {
        padding: 0 1.2rem;
    }

    .upload-form input[type="file"]:hover,
    .upload-form input[type="file"]:focus,
    .upload-form input[type="file"]:active {
        border: 3px solid transparent;
    }

    .upload-form label {
        text-decoration: underline;
    }

    .upload-form .submit-btn {
        color: var(--white);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        font-size: 20px;
        line-height: 19px;
        text-align: center;
        border-radius: 30px;
        text-transform: uppercase;
        background-color: var(--orange);
        padding: 17px 23px;
        margin: 10px 0 0 15px;
        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
        text-decoration: none;
        display: inline-block;
    }

.signal-mark-notification {
    text-align: center;
    padding: 20px 0;
    display: none;
}

.group__list .success-wrapper {
    margin-left: -40px;
}

.signal-mark-notification.active {
    display: block;
}

.signal-mark .checkmark {
    width: 20px;
    height: 15px;
    fill: var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mark-text {
    color: var(--black);
    font-family: "Arial", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: middle;
    line-height: 28px;
}

.signal-mark {
    background: var(--gold);
    border-radius: 50%;
    padding: 4px;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    vertical-align: middle;
    margin-left: 10px;
}

/* ------------------------- Breakpoint for Desktop ------------------------- */

@media screen and (min-width: 768px) {
    /* -------------------------- Start Client Testing ------------------------- */

    .table {
        width: 100%;
    }

    .section__title {
        font-size: 36px;
        color: var(--green);
        font-weight: bold;
        letter-spacing: 0;
        line-height: 60px;
        text-align: center;
        padding-top: 35px;
    }

    .section__title--first {
        padding-top: 0;
    }

    .group__category {
        color: var(--black);
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 42px;
    }

    .form-grid__label {
        font-size: 20px;
        line-height: 42px;
    }

    .group__information {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 22px;
    }

    .group__sub {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 28px;
    }

    .group__list__item,
    .group__list__item--alphabet {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 28px;
    }

    .checkbox__legend {
        color: var(--black);
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 42px;
    }

    .checkbox__label {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 22px;
    }

    .meeting__title,
    .meeting__info {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 20px;
        letter-spacing: 0;
        line-height: 30px;
    }

    .meeting__schedule {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 28px;
    }

    .meeting__joinby {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 28px;
    }

    .checkbox__label-complete {
        color: var(--black);
        font-size: 24px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 42px;
    }

    .customer-service__text {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 28px;
    }

    .customer-service-container {
        text-align: center;
    }

    .customer-service__link {
        color: var(--green);
        font-size: 20px;
        font-weight: bold;
        flex-basis: 50%;
        letter-spacing: 0;
        line-height: 26px;
        margin: 30px 0 20px;
        text-align: center;
    }

    .customer-service__extra {
        display: block;
    }

    .customer-service__support {
        color: var(--green);
        flex-basis: 50%;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 36px;
    }

    .section {
        max-width: 910px;
        margin: 0 auto;
    }

    .form-container-testing {
        max-width: 910px;
        background-color: var(--cream-light);
        padding: 0 35px 30px 35px;
        margin: auto;
        margin-bottom: 0;
        border-radius: 3px;
        -webkit-box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
        -moz-box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
        box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
        margin-top: 30px;
    }

        .form-container-testing .field-area {
            width: 66%;
            display: inline-flex;
        }

            .form-container-testing .field-area.full {
                width: 100%;
            }

        .form-container-testing .form-area {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }

    .form-area {
        display: flex;
    }

    .form-container__title {
        font-family: "Times New Roman", Times, serif;
        color: var(--black);
        font-size: 20px;
        font-weight: bold;
    }

    .testing-status {
        width: 31%;
        height: 60px;
        margin: 0;
        display: inline-flex;
        margin-bottom: 15px;
    }

    .meeting__join {
        max-width: 160px;
    }

    .checkbox__label-complete {
        text-align: center;
    }

    .customer-service__support {
        padding: 0;
        margin: 20px;
    }

    .customer-service__link:after {
        display: none;
    }

    .checkbox__image--top {
        left: 83%;
    }

    /* ----------------------------- End Client Testing ----------------------------- */

    /* ------------------------ Start Main Banners ----------------------- */

    input,
    label {
        display: block;
    }

    input {
        padding-left: 30px;
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 22px;
    }

        input::placeholder {
            color: var(--cream-dark);
            font-family: "Arial", Arial, Helvetica, sans-serif;
            font-size: 18px;
            letter-spacing: 0;
            line-height: 22px;
        }

    .main-banner,
    .main-banner-testing {
        color: var(--white);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        font-size: 60px;
        text-transform: uppercase;
        letter-spacing: 0;
        line-height: 60px;
        text-align: center;
        padding: 10px 0;
    }

    .reg-description {
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 28px;
        width: 75%;
        margin: auto;
        text-align: left;
        margin-top: 15px;
        padding: 15px 0;
    }

    .reg-title {
        text-transform: uppercase;
        color: var(--green);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        font-size: 36px;
        letter-spacing: 0;
        line-height: 60px;
        margin-bottom: 10px;
        text-align: center;
    }

    /* --------------------------- Start Client Registration --------------------------- */
    .form-container {
        background-color: var(--cream-light);
        padding: 30px 10px;
        width: 60%;
        margin: auto;
        margin-bottom: 70px;
        border-radius: 3px;
        -webkit-box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
        -moz-box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
        box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
    }

    .form-label {
        color: var(--black);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        font-size: 20px;
        letter-spacing: 0;
        line-height: 42px;
        padding-bottom: 5px;
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .field-area {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        margin: 15px 0;
    }

    #companyemail,
    input::placeholder {
        line-height: 50px;
    }

    .form-input {
        box-sizing: border-box;
        height: 60px;
        width: 100%;
        border: 1px solid var(--cream-dark);
        border-radius: 30px;
        background-color: var(--white);
    }

    .submit-button {
        margin: 40px auto !important;
        background-color: var(--orange);
        border-radius: 30px;
        width: 45%;
        padding: 20px 0;
        color: var(--white);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        font-size: 20px;
        letter-spacing: 0.27px;
        line-height: 19px;
        text-align: center;
        text-transform: uppercase;
        margin-top: 40px;
        margin-bottom: 40px;
        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    }

    .form-link {
        color: var(--green);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        font-size: 20px;
        letter-spacing: 0;
        line-height: 26px;
        text-align: center;
        text-decoration: none;
        margin: auto;
        margin-bottom: 25px;
        margin-top: 10px;
    }

    .main-arrow {
        height: 17px;
        width: 24px;
    }

    /* ------------------------- End Client Registration ------------------------ */

    /* ----------------------------- Start Internal Status ---------------------------- */
    .content-container {
        background-color: var(--cream-light);
        width: 80%;
        max-width: 910px;
        margin: auto;
        margin-bottom: 70px;
        margin-top: 80px;
        border-radius: 3px;
        -webkit-box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
        -moz-box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
        box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
    }

    .data-list {
        margin-top: 40px;
        margin-bottom: 0;
    }

    .data-list__term {
        box-sizing: border-box;
        border: 1px solid var(--cream-dark);
        border-radius: 30px;
        width: 60%;
        padding: 20px;
        background-color: var(--white);
        display: inline-block;
        margin-bottom: 40px;
        color: var(--black);
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 22px;
    }

    .data-list__description {
        border-radius: 30px;
        background-color: var(--gold);
        padding: 20px;
        width: 37%;
        display: inline-block;
        color: var(--black);
        font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 0.25px;
        line-height: 20px;
        text-align: center;
        margin-left: 0;
        margin-bottom: 0;
        float: right;
        position: static;
    }

        .data-list__description::after {
            display: none;
        }

    /* --------------------------- End Internal Status -------------------------- */
}

/* --------------------------- Begin Client Survey -------------------------- */

.client-survey .checkbox__container {
    min-width: 150px;
}

.client-survey__submit-wrapper {
    padding: 10px 0;
    text-align: center;
    display: none;
}

.survey-submit {
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 20px;
    letter-spacing: 0.27px;
    line-height: 19px;
    text-align: center;
    border-radius: 30px;
    text-transform: uppercase;
    background-color: var(--orange);
    padding: 17px 34px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-decoration: none;
    margin-top: 30px;
}

    .survey-submit:hover,
    .survey-submit:focus {
        color: var(--white);
        background-color: var(--green-dark);
        border: 3px solid transparent;
    }

.form-container__list-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .form-container__list-row.title-wrapper {
        align-items: flex-end;
        display: none;
    }

.form-container__list-item.interface-container {
    flex-basis: 18rem;
}

.form-container__list-item.tooltip__container {
    flex-basis: 16rem;
    padding-right: 25px;
}

.form-container__list-item .checkbox__container {
    margin-bottom: 0;
}

.form-container__listitem .textinput__container {
    padding: 0.4rem 0;
}

.tooltip-wrapper {
    border-radius: 50%;
    background-color: var(--orange);
    width: 25px;
    height: 25px;
    position: relative;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 12px));
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    display: none;
}

    .tooltip.active {
        display: block;
    }

.tooltip-icon {
    font-size: 20px;
    color: white;
    line-height: 24px;
    font-weight: bold;
}

.tooltip:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    margin-left: -8px;
    margin-bottom: -8px;
}

.tooltip__text {
    white-space: nowrap;
    line-height: 1.2;
}

.test-wrapper {
    display: none;
    padding: 20px 0;
}

.success-wrapper {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: bold;
    max-width: 910px;
    background-color: var(--cream-light);
    margin: 50px auto;
    padding: 30px;
    text-align: center;
    border-radius: 3px;
    box-shadow: 1px 31px 16px -30px rgba(112, 111, 112, 1);
    text-transform: uppercase;
}

    .success-wrapper .checkmark-wrapper {
        background: var(--gold);
        border-radius: 50%;
        padding: 4px;
        display: inline-block;
        width: 30px;
        height: 30px;
        position: relative;
        vertical-align: middle;
        margin-right: 10px;
    }

    .success-wrapper .checkmark {
        width: 20px;
        height: 15px;
        fill: var(--white);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .success-wrapper .success-text {
        vertical-align: middle;
    }

.checkmark-wrapper.cancel {
    background: var(--error-red);
}

/* ------------------------- Breakpoint for Desktop ------------------------- */

@media screen and (min-width: 768px) {
    .form-container__list-row.title-wrapper {
        display: flex;
    }
}
/* --------------------------- Begin Client Status -------------------------- */
.client-status .table td:last-child {
    text-align: center;
}

.client-status .table .status-checkmark {
    width: 21px;
    height: 15px;
    fill: var(--orange);
}

.client-status .form-container-testing {
    max-width: 720px;
}

.client-status .form-label {
    font-weight: normal;
}

.cs-content {
    max-width: 720px;
    text-align: center;
    margin: 30px auto 50px;
}

.cs-content__title {
    font-size: 20px;
    font-family: "Times New Roman", Times, serif;
    color: var(--green);
    margin-bottom: 0.75em;
    text-transform: uppercase;
}

.cs-content__copy {
    font-size: 16px;
    line-height: 1.22;
    font-family: "Arial", Arial, Helvetica, sans-serif;
}

.client-status .form-container-testing .field-area {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .client-status .slice__container {
        padding: 20px 0;
    }

    .cs-content__title {
        font-size: 36px;
    }

    .cs-content__copy {
        font-size: 18px;
    }

    .textinput__container {
        display: flex;
        align-items: center;
        padding: 1rem 0;
    }
}

/* --------------------------- End Client Status -------------------------- */

/* --------------------------- Form Validation ---------------------------- */

.field-area.error .form-label {
    color: var(--error-red);
}

.field-area.error .form-dropdown {
    border-color: var(--error-red);
}

.form-input.error {
    border-color: var(--error-red);
}

label.error {
    font-size: 14px;
    margin-top: 1em;
    color: var(--error-red);
}

.form-input.valid {
    border-color: var(--gold) !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAPCAYAAAALWoRrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALFJREFUeNpiZKAC0FmgYwCk5gPxhSsJVxIZqWTgfiAWgAotYKaygWDARGUDLwCxIxNUgQAQB1DDQGCYfmACGQhVsB7ITqDUQJj3QQoMoJLz8RlMjIEwQy+g6cVqMLEGggAjVAMojaEblAhUvIBUA+GG4jMYiB+AwhvNwAWgRI4rmBjRvIjNYHSA10CMdApVXEiJgRguRXJxAjQvk2wgTkOxGEy0gcTknAQg7idVH0CAAQD4Plo6jyu+swAAAABJRU5ErkJggg==") no-repeat;
    background: var(--white) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA3CAYAAAC/+UKPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NBQjEwQzA5RUJFQTExQjQ3QkRDMTAzRDMyNURGNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNURDNjNCN0VCMDkxMUVBQTc5NEQzNzZFNTQwRDcwQiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNURDNjNCNkVCMDkxMUVBQTc5NEQzNzZFNTQwRDcwQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhDQ0FCMTBDMDlFQkVBMTFCNDdCREMxMDNEMzI1REY1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhDQ0FCMTBDMDlFQkVBMTFCNDdCREMxMDNEMzI1REY1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+uSA8OgAAASVJREFUeNrs2O0JgzAQgGFTHMBBhLpCN+gIOoIT6QYdwRX84QAdoRvYS4kgQYXWpBp9Dw4/fgQfz5gjqu/76GxxiU4YoEGDBg0aNGjQoEGDBg0aNGjQoOcidj2gUmr1GGmdZnKoJNsu7wrX+3jx3qpgwI1kIpnJtb5dHPbztsBDZIed0zPgVvIWBFoAieTdBVjm9Gv3aA02gIec53sD+6p0M5qH1RJ8C7AvdGtdT8K3AntB63VVDvUSfEvwp5dwvfAPzYnAdHNhV1i/kKee7xa4Ni9rMpw/oy/0AtyORbAPtNd12mDKNeCgPm/rp5WbXvoncFCVHlW8tvrnTSr810pbFb8KuPxmzN3/yNhEAA0aNGjQoEGDBg0aNGjQoEGDBh1YvAUYALkTfsr1UyFvAAAAAElFTkSuQmCC") no-repeat center right;
}

.loader {
    font-size: 10px;
    margin: 0;
    text-indent: -9999em;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--green);
    background: -moz-linear-gradient(left, var(--green) 10%, rgba(0, 57, 86, 0) 42%);
    background: -webkit-linear-gradient( left, var(--green) 10%, rgba(0, 57, 86, 0) 42% );
    background: -o-linear-gradient(left, var(--green) 10%, rgba(0, 57, 86, 0) 42%);
    background: -ms-linear-gradient(left, var(--green) 10%, rgba(0, 57, 86, 0) 42%);
    background: linear-gradient(to right, var(--green) 10%, rgba(0, 57, 86, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

    .loader:before {
        width: 50%;
        height: 50%;
        background: var(--green);
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
    }

    .loader:after {
        background: var(--white);
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: "";
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

.client-survey-test .emailButton1,
.client-survey-test .emailButton2,
.client-survey-test .emailButton3,
.client-survey-test .emailButton4 {
    background-color: var(--orange);
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    padding: 6px 24px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    border-radius: 30px;
    /* margin-left: 16px; */
}

    .client-survey-test .emailButton1:hover,
    .client-survey-test .emailButton2:hover,
    .client-survey-test .emailButton3:hover,
    .client-survey-test .emailButton4:hover,
    .client-survey-test .emailButton1:focus,
    .client-survey-test .emailButton2:focus,
    .client-survey-test .emailButton3:focus,
    .client-survey-test .emailButton4:focus {
        background-color: var(--green-dark);
        color: var(--white);
        border: 3px solid transparent;
    }

.client-survey-test .textinput__label {
    font-size: 18px;
    /* margin-right: 16px; */
}

.client-survey-test .textinput__input {
    margin: 3px 16px;
}

.client-survey-test textarea {
    width: 100%;
}

.client-survey-test .textinput__input:hover,
.client-survey-test .textinput__input:focus {
    margin: 1px 14px;
}

.client-survey-test .textinput__container:not(:first-of-type) {
    /* display: none; */
}

.client-survey-test .form-container__list-item.textinput__container {
    flex-grow: 1;
}

.client-survey-test .form-container__list-item.textinput__container .textinput__input {
    width: 100%;
}

.em1,
.em2,
.em3,
.em4,
.em5 {
    justify-content: center;
}

.em2,
.em3,
.em4,
.em5 {
    display: none;
}

.form-container__list-row .form-container__list-item {
    flex-direction: column;
}

.form-container__list-row.web-interface {
    align-items: baseline;
}

.form-container__list-row.other-sh1 .form-container__list-item.interface-container,
.form-container__list-row.other-sh2 .form-container__list-item.interface-container {
    flex-basis: 34rem;
}

.form-container-testing .form-container__list-row {
    border-top: 1px solid var(--cream);
}

.form-container__list-row.other-sh1,
.form-container__list-row.other-sh2 {
    border-top: none;
}

.form-container__list-item.tooltip__container .tooltip-wrapper {
    left: 50%;
    transform: translateX(-50%);
}

.form-container__list-row.title-wrapper {
    padding: 14px 0;
}

.client-survey__submit-wrapper {
    margin: auto;
    max-width: 910px;
}

.client-survey-test .survey__title {
    font-size: 46px;
    line-height: 64px;
    color: var(--green);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-weight: normal;
}

.client-survey-test .survey__personal-info .textinput__label {
    min-width: 200px;
}

.client-survey-test .survey-submit-wrapper {
    text-align: center;
}

.client-survey-test .form-dropdown {
    height: 40px;
    border: 1px solid var(--cream);
}

    .client-survey-test .form-dropdown:focus,
    .client-survey-test .form-dropdown:active,
    .client-survey-test .form-dropdown:hover {
        border-color: var(--cream);
    }

.client-survey-test .form-dropdown__title {
    line-height: 1.4;
}

    .client-survey-test .form-dropdown__title::after {
        top: 12px;
    }

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


@media screen and (min-width: 768px) {
    .section.client-status {
        max-width: 1240px;
    }
}

.table-wrapper {
    max-height: calc(100vh - 180px);
    min-height: 500px;
}

    .table-wrapper table thead {
        position: sticky;
        top: 0;
        z-index: 1;
    }

.filter-container {
    max-width: 720px;
    background-color: var(--cream-light);
    padding: 10px 35px;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 3px;
}

.filter-container-flex > div {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.filter-container .filter-checkbox {
    position: absolute;
    left: 0;
    top: 2px;
}

    .filter-container .filter-checkbox[disabled] {
        cursor: not-allowed;
    }

.filter-container label {
    font-weight: bold;
    display: inline;
}

@media screen and (min-width: 768px) {
    .filter-container-flex {
        display: flex;
        flex-wrap: wrap;
    }

        .filter-container-flex > div {
            margin-left: -5px;
            margin-right: -5px;
        }

        .filter-container-flex > div {
            width: 50%;
            padding: 0 5px 0 25px;
        }

            .filter-container-flex > div + div ~ div {
                padding-bottom: 0;
                border-bottom: 0;
                margin-bottom: 0;
            }

    .filter-container .filter-checkbox {
        left: 5px;
    }
}

/* Cleint Landing Page */
.client-landing-title h2 {
    text-transform: uppercase;
    color: var(--green);
}

.client-landing-title h3 {
    text-transform: uppercase;
}

.client-landing-table {
    overflow: auto;
}

.client-landing-table td {
    overflow-x: auto;
}

@media screen and (min-width: 768px) {
    .client-landing-table table {
        table-layout: fixed;
    }

    .client-landing-table th:nth-child(2) {
        width: 30%;
    }

    .client-landing-table th:nth-child(4),
    .client-landing-table th:nth-child(5) {
        width: 15%;
    }
}

    .client-landing-table table td:first-child {
        background-color: var(--cream-light);
    }

.client-landing-cta {
    text-align: center;
    padding-top: 20px;
}

    .client-landing-cta .submit-button {
        text-decoration: none;
        width: auto;
        min-width: 280px;
        padding: 20px 40px;
        display: inline-block;
        margin: 0 0 20px;
        border: 3px solid transparent;
    }

        .client-landing-cta .submit-button:hover, 
        .client-landing-cta .submit-button:focus {
            border: 3px solid var(--black);
        }

.done,
.not-done {
    display: inline-block;
    width: 40px;
    height: 40px;    
    border-radius: 50%;
    position: relative;
}

.done {
    background: var(--green-2);
}

    .done:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        margin-top: -2px;
        display: block;
        width: 8px;
        height: 14px;
        border: 2px solid transparent;
        border-radius: 2px;
        border-right-color: var(--white);
        border-bottom-color: var(--white);
    }

.not-done {
    background: var(--error-red);
}

    .not-done:before,
    .not-done:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;        
        display: block;
        width: 2px;
        height: 14px;
        background: var(--white);
    }

    .not-done:before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .not-done:after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }


.validation-summary-errors {
    color: var(--error-red);
}

.validation-summary-errors ul {
    list-style-type: disc;
}