@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --sw-black: #000000;
    --sw-blue-lightest: #e5f0f5;
    --sw-blue-lighter: #57a0c2;
    --sw-blue-light: #3481a4;
    --sw-blue-medium: #1b7199;
    --sw-blue-dark: #026C9E;
    --sw-blue-darker: #075D8C;
    --sw-blue-darkest: #134166;
    --sw-gray-light-border: #ededed;
    --sw-gray-lightest: #F7F7F7;
    --sw-gray-lighter2: #e7e7e7;
    --sw-gray-lighter: #D8D8D8;
    --sw-gray-light: #C6C6C6;
    --sw-gray-medium: #B7B7B7;
    --sw-gray-dark: #989898;
    --sw-gray-darker: #808080;
    --sw-gray-darkest: #585858;
    --sw-green-light: #588f41;
    --sw-green-medium: #438129;
    --sw-green-dark: #2F7412;
    --sw-red-medium: #dc3545;
    --sw-red-dark: #721c24;
    --sw-white: #ffffff;
    --sw-white-dark: #fcfcfc;
    --sw-white-darker: #f6f6f6;
    --sw-white-darkest: #f2f2f2;
}

html, body {
    /* 
    *   do NOT set the html & body to a height of 100% - it will break the iframeResizer code
    *       iframeResizer is used with public pages shown via iframe on the SpeakWrite WordPress site
    *   https://github.com/jquery/jquery/issues/2215
    *   https://stackoverflow.com/questions/18779708/scrolltop-with-animate-not-working
    *   https://github.com/davidjbradshaw/iframe-resizer 
    */
    font-family: 'Open Sans', Montserrat, Roboto, Arial, sans-serif;
    margin: 0;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.required-asterisk::after {
    content: '*';
    color: crimson;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1rem;
    padding: 0 0 0 .2rem
}
.validation-message {
    font-size: .9rem;
    line-height: 1rem;
    color: var(--sw-red-medium);
    padding: 3px 0 0 3px;
}

.progress {
    height: 2rem;
}
.progress-bar {
    font-size: 1rem;
    font-weight: bold;
    background-color: var(--sw-blue-light);
}

.header {
    color: var(--sw-blue-darkest);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.subheader {
    color: var(--sw-blue-darkest);
    font-weight: 600;
    font-size: 1.8rem;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.subheader2 {
    color: var(--sw-blue-darker);
    background-color: var(--sw-blue-lightest);
    border: solid 1px var(--sw-blue-darker);
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    margin: 1rem;
    padding: .5rem;
}
.sub-info {
    color: #6D6D6D;
    font-weight: normal;
    font-size: .95rem;
    border-top: solid 1px var(--sw-gray-light);
    border-bottom: solid 1px var(--sw-gray-light);
    padding: .3rem 0;
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
}

p {
    padding-bottom: 0;
}
.pt-01 {
    padding-top: .1rem;
}
.pt-015 {
    padding-top: .15rem;
}

a {
    text-decoration: underline;
    color: #007bff;
}

ol, ul {
    margin-left: 1.5rem;
}

.close,
.close:hover {
    font-size: 2rem;
    line-height: 1.5rem;
    font-weight: 500;
    opacity: 1;
    background-color: transparent;
    color: var(--sw-white) !important;
}

.default-blue {
    background-color: var(--sw-blue-darkest);
    color: var(--sw-white);
}

.mud-button,
.mud-button-root:not(.mud-snackbar-close-button),
.mud-dialog .mud-dialog-actions .mud-button-root,
.mud-button-filled,
.btn-submit-job,
.btn.default-blue {
    color: var(--sw-white);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .07rem !important;
    border-radius: 5px;
    border: solid 1px var(--sw-blue-darkest);
    background-color: var(--sw-blue-darkest);
    background-image: linear-gradient(180deg,var(--sw-blue-dark) 0%,var(--sw-blue-darkest) 100%);
    min-width: 7rem;
    display: flex;
    padding: 9px 30px 7px;
    margin: auto;
    justify-self: center;
    
}
    .mud-button:hover,
    .mud-button-root:not(.mud-snackbar-close-button):hover,
    .mud-dialog .mud-dialog-actions .mud-button-root:hover,
    .mud-button-filled:hover,
    .btn-submit-job:hover,
    .btn.default-blue:hover {
        color: var(--sw-white);
        background-color: var(--sw-blue-darkest);
    }

.mud-button:disabled,
.mud-button-root:not(.mud-snackbar-close-button):disabled,
.mud-dialog .mud-dialog-actions .mud-button-root:disabled,
.mud-button-filled:disabled,
.btn-submit-job:disabled,
.btn:disabled {
    color: var(--sw-white) !important;
    border: solid 1px var(--sw-gray-darker);
    background-color: var(--sw-gray-medium);
    background-image: linear-gradient(180deg,var(--sw-gray-light) 0%,var(--sw-gray-dark) 100%);
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
}
    .mud-button:disabled:hover,
    .mud-button-root:not(.mud-snackbar-close-button):disabled:hover,
    .mud-dialog .mud-dialog-actions .mud-button-root:disabled:hover,
    .mud-button-filled:disabled:hover,
    .btn-submit-job:disabled:hover,
    .btn:disabled:hover {
        color: var(--sw-white);
        background-color: var(--sw-gray-darker);
    }

.btn .mud-button-label,
button .mud-button-label {
    color: var(--sw-white) !important;
}

a.btn {
    text-decoration: none;
}
.btn-link {
    padding: 0;
    margin: 0;
    text-decoration: underline;
}
a.no-underline {
    text-decoration: none !important;
}

.supported-file-types,
.pricing-details {
    text-align: right;
}

.spinner-on-disabled:disabled:before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: top;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spinner-border;
    animation: .75s linear infinite spinner-border;
    border-width: .2em;
    margin: 0 10px 0 -5px;
}


.form-control:focus {
    box-shadow: none;
    border-color: var(--sw-gray-dark);
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:focus {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);
    /*font-size: 1.5rem;*/
    transition: background-color 600000s 0s, color 600000s 0s;
}

.select-placeholder,
select option[value=empty],
select option[value=null],
select option[value],
select option[value=""],
select option:not([value]),
.form-control::placeholder {
    opacity: 0.5;
}

option {
    padding: 0px 2px 1px;
}

.bold {
    font-weight: bold;
}


.form-check-inline {
    margin-right: 1rem;
}
.form-check-inline .form-check-input {
    margin-right: .5rem;
}

select.mud-select {
    font-size: 1.1rem;
    background-color: transparent;
    border: 1px solid var(--sw-gray-lighter);
    padding: .2rem .5rem;
    border-radius: 0.25rem;
    outline: none;
    vertical-align: middle;
    margin-top: 34px;
}
.mud-popover {
    /*margin-top: 37px;*/
    border: 1px solid var(--sw-gray-lighter);
}
.mud-input-control {
    margin: 0;
}
.mud-input.mud-input-outlined:focus-within
.mud-input-outlined-border {
    border: solid 1px var(--sw-gray-medium);
}
.mud-input > input.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined {
    padding: .563rem .8rem .5rem .8rem;
    font-size: 1rem;
    font-weight: normal;
}

.mud-list-item {
    padding: 2px 0;
}
.mud-list.mud-list-padding {
    padding: .2rem .1rem;
}
.mud-list-item-gutters {
    padding: 0 .8rem;
}

.daterangepicker .calendar-table th {
    color: var(--sw-white);
    border-radius: 0;
    border: none;
}
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    color: var(--sw-white);
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover
{
    background-color: inherit;
    color: red;
}

.drop-down-industry {
    width: 230px;
}

.border-light-gray {
    border: 1px solid #CED4DA;
}

.section-main {
    width: 100%;
    margin: .5rem 0;
}
.section-column {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.section-border {
    align-content: flex-start;
    border: solid 1px var(--sw-gray-light);
    border-radius: .5rem;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 25%);
    padding: 1.5rem 2rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.section-form {
    margin: 1rem;
}
.section-range {
    width: 100%;
    margin-bottom: 1.2rem;
}

i.fa-solid.fa-circle-question {
    font-size: 1.4rem;
    color: var(--sw-blue-lighter);
}
    i.fa-solid.fa-circle-question:hover {
        color: var(--sw-blue-medium);
    }

.minimize-last-margin-bottom .label-inline-div:last-of-type,
.minimize-last-margin-bottom .section-range:last-of-type {
    margin-bottom: .5rem;
}

.text-smallest {
    font-size: .8rem;
    line-height: .8rem;
}
.text-smaller {
    font-size: .9rem;
    line-height: .9rem;
}
.text-small {
    font-size: .95rem;
    line-height: .95rem;
}
.text-default {
    font-size: 1rem;
}
.text-large {
    font-size: 1.25rem;
}
.text-larger {
    font-size: 1.5rem;
}
.text-largest {
    font-size: 2rem;
}
.text-bold {
    font-weight: bold;
}
.text-unbold {
    font-weight: normal;
}
.text-italic {
    font-style: italic;
}

.lh-xs {
    line-height: 1.1;
}
.lh-sm {
    line-height: 1.3;
}
.lh-md {
    line-height: 1.5;
}
.lh-lg {
    line-height: 1.8;
}
.lh-xl {
    line-height: 2.1;
}
.ls-0 {
    letter-spacing: 0;
}

.label-only {
    width: 100%;
}
.label-inline-input {
    display: flex;
    flex-wrap: nowrap;
    margin-top: .25rem;
    margin-bottom: 1.2rem;
}
    .label-inline-input label {
        margin-top: .25rem;
        margin-right: 1.25rem;
    }
.label-inline-div {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 1.2rem;
    place-content: space-between;
    justify-content: flex-start;
}
    .label-inline-div label {
        padding-right: .25rem;
        align-self: center;
        width: 75%;
    }

.column-full {
}
.first-column {
    width: 100%;
}
.second-column {
    width: 100%;
}

.block-color {
    color: var(--sw-white);
    text-align: center;
    border: 1px solid #02628E;
    border-radius: .5rem;
    font-weight: 700;
    width: 12rem;
    padding: .3rem .8rem;
    margin: auto 0;
}

.form-control.is-valid,
.form-control.is-invalid,
.was-validated .form-control:valid,
.was-validated .form-control:invalid {
    /* undo the bootstrap styling */
    padding-right: .75rem;
    border: 1px solid #ced4da;
    background-image: none;
}

.braintree-badge-light {
    display: inline-block;
    width: 171px;
    height: 46px;
    border-radius: 6px;
    background-size: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url("../images/braintree-badge-light.png");
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.20);
}
.braintree-badge-wide-light {
    display: inline-block;
    width: 289px;
    height: 45px;
    border-radius: 6px;
    background-size: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url("../images/braintree-badge-wide-light.png");
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.20);
}
    .braintree-badge-light:hover,
    .braintree-badge-wide-light:hover {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }
.braintree-hosted-fields-focused {
    border-color: var(--sw-gray-dark);
    outline: 0;
}
.braintree-input-height {
    height: 38px;
}
.braintree-input-class {
    font-size: 1rem;
    color: #495057;
}
.invalid-feedback {
    margin-top: 0;
    color: var(--sw-red-medium);
    font-size: .9rem;
    line-height: .9rem;
    padding: 2px 0 0 3px;
}
.braintree-container ~ #braintree-error-message {
    display: none; /* default to not display */
}
.braintree-container:has(#cc-number.is-invalid, #cc-expiration.is-invalid, #cc-cvv.is-invalid) ~ #braintree-error-message {
    display: block !important; /* display only if a braintree cc field is invalid */
}

.nav-icon {
    font-size: 20px;
    margin-right: 5px;
}

.w-half {
    width: 50%
}
.w-third {
    width: 33.33%
}
.w-fourth {
    width: 25%
}
.w-fifth {
    width: 20%
}
.w-1 {
    width: .25rem;
}
.w-2 {
    width: .5rem;
}
.w-3 {
    width: .75rem;
}
.w-4 {
    width: 1rem;
}

.bg-dark-blue {
    background-color: var(--sw-blue-dark);
}

.bg-medium-blue {
    background-color: var(--sw-blue-medium);
}

.bg-light-blue {
    background-color: var(--sw-blue-light);
}

.bg-dark-green {
    background-color: var(--sw-green-dark);
}

.bg-medium-green {
    background-color: var(--sw-green-medium);
}

.bg-light-green {
    background-color: var(--sw-green-light);
}

.color-dark-green {
    color: var(--sw-green-dark);
}
.color-gray-dark {
    color: var(--sw-gray-dark);
}

.alert-blue {
    color: var(--sw-blue-medium);
    background-color: var(--sw-blue-lightest);
    border-color: var(--sw-blue-medium);
}
.alert-blue-gray {
    color: var(--sw-blue-medium);
    background-color: var(--sw-white);
    border-color: var(--sw-gray-lighter);
}
.alert-danger {
    border: solid 1px var(--sw-red-dark);
}
.alert-icon {
    font-size: 1.3rem;
    width: 1.5em;
    text-align: left;
}

.enterprise-account {
    display: inline-block;
    color: var(--sw-blue-dark);
    font-size: .95rem;
    letter-spacing: .03rem;
}
.enterprise-account i {
    margin: 0 .3rem 0 1rem;
}

.stepper-content {
    width: 100% !important;
    padding-left: 10px;
    padding-bottom: 5px;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 1rem;
}
    .stepper-content p {
        padding-bottom: .7rem;
    }
        .stepper-content p a {
            float: right;
        }
.stepper-cirle {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 6px;
    background-color: var(--sw-blue-dark);
    line-height: 30px;
    text-align: center;
    color: var(--sw-white);
}
.stepper {
    display: flex;
    flex-wrap: nowrap;
    counter-reset: step;
    font-size: .9rem;
    line-height: .9rem;
    letter-spacing: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
    .stepper li {
        float: left;
        position: relative;
        text-align: center;
    }
        .stepper li:last-child {
            margin-right: 0;
        }
        .stepper li:before {
            content: counter(step);
            counter-increment: step;
            width: 30px;
            height: 30px;
            border: 1px solid var(--sw-gray-light);
            display: block;
            margin: 0 auto 10px auto;
            border-radius: 50%;
            line-height: 29px;
            background: var(--sw-white);
            color: var(--sw-gray-light);
            text-align: center;
            font-weight: bold;
        }
        .stepper li:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background: var(--sw-gray-light);
            top: 16px;
            left: -50%;
            z-index: -1;
        }
        .stepper li.complete {
            font-weight: bold;
            color: #1b7199;
        }
            .stepper li.complete:before {
                border-color: #02628E;
                background: #3481a4;
                color: var(--sw-white);
                -webkit-box-shadow: 0 0 .9rem #02628E;
                -moz-box-shadow: 0 0 .9rem #02628E;
                box-shadow: 0 0 .9rem #02628E;
            }
            .stepper li.complete + li:after {
                background: #1b7199;
                height: 3px;
                top: 15px;
            }
        .stepper li.active:before {
            border-color: #02628E;
            color: #02628E;
            -webkit-box-shadow: 0 0 .9rem #02628E;
            -moz-box-shadow: 0 0 .9rem #02628E;
            box-shadow: 0 0 .9rem #02628E;
        }
        .stepper li.active {
            font-weight: bold;
            color: #02628E;
        }
        .stepper li:first-child:after {
            content: none;
        }

.password-complexity-list {
    margin: .4rem 0 0 1.3rem;
    line-height: 1.45;
}

input[type=file]::file-selector-button {
    margin: -6px 12px -3px -12px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--sw-white);
    background-color: var(--sw-blue-dark);
    border-radius: 0;
    border: 1px solid transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: contain;
}


.mud-dialog-container .mud-overlay .mud-overlay-scrim.mud-overlay-dark,
.modal-backdrop, 
.modal-dialog {
    border-color: transparent;
    background-color: transparent;
}
.mud-dialog-container {
    padding: 1rem;
}
.modal-dialog {
    padding: .5rem;
}
.mud-dialog,
.modal-content {
    border: solid 1px var(--sw-blue-darkest);
    -moz-box-shadow: 0 0 10px 0 var(--sw-gray-darkest);
    -webkit-box-shadow: 0 0 10px 0 var(--sw-gray-darkest);
    box-shadow: 0 0 10px 0 var(--sw-gray-darkest);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
@media (min-width: 576px) {
    .mud-dialog,
    .modal-content {
        -moz-box-shadow: 0 0 20px 0 var(--sw-gray-darkest);
        -webkit-box-shadow: 0 0 20px 0 var(--sw-gray-darkest);
        box-shadow: 0 0 20px 0 var(--sw-gray-darkest);
    }
}

.mud-dialog .mud-dialog-title,
.modal-header {
    color: var(--sw-white);
    text-decoration: none;
    background-color: var(--sw-blue-darkest);
    border-bottom: 1px solid #dee2e6;
    padding: .5rem 1rem;
}
    .mud-dialog .mud-dialog-title .mud-typography,
    .modal-header .modal-title {
        color: var(--sw-white);
        font-size: 1.3rem;
        font-weight: 500;
        letter-spacing: .05rem;
        line-height: 1.5;
    }
    .mud-dialog .mud-dialog-title .mud-button-root {
        top: 0;
        right: 0;
        position: absolute;
        margin: -1rem -1rem -1rem auto;
        padding: 3rem;
        justify-content: left;
    }
.mud-dialog .mud-dialog-content,
.modal-body {
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: 0.4px;
    padding: .8rem 1rem 1rem 1rem !important;
    margin: 0;
}
.mud-dialog .mud-dialog-actions,
.modal-footer {
    padding: 1rem;
    border-top: 1px solid var(--sw-gray-lighter);
    justify-content: center;
}
    
.modal-backdrop.show {
    opacity: 0;
}
.modal.show {
    opacity: 100%;
    transition: opacity 1s;
    background-color: transparent;
}

.blue-gray-design .submit-job-options {
    /* the div surrounding the div options */
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: .8rem 0 0 0;
    gap: 2rem 1rem;
}
    .blue-gray-design .submit-job-options .submit-job-option {
        /* the div option */
        min-width: 150px;
        max-width: 300px;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
    }
        .blue-gray-design .submit-job-options .submit-job-option .form-check-label,
        .blue-gray-design .submit-job-options .submit-job-option .submit-job-min,
        .blue-gray-design .submit-job-options .submit-job-option .submit-job-cost {
            /* the labels surrounding and after the radio button */
            width: 100%;
            height: 100%;
            text-align: center;
            cursor: pointer;
            padding: 0;
            margin: 0;
            z-index: 100;
        }
        .blue-gray-design .submit-job-options .submit-job-option .form-check-label {
            border: 1px solid var(--sw-gray-lighter);
            border-radius: 5px;
            background-color: transparent;
        }
            .blue-gray-design .submit-job-options .submit-job-option .form-check-label span {
                /* the span inside the label, after the radio button */
                display: block;
                padding: .1rem .5rem 1.1rem .5rem;
                margin: 0;
                line-height: 1.3;
                font-size: 1rem;
            }
            .blue-gray-design .submit-job-options .submit-job-option .form-check-label .form-check-input {
                /* the native radio button */
                position: relative;
                display: inline-block;
                top: -.9rem;
                width: 1.9rem;
                height: 1.9rem;
                text-align: center;
                cursor: pointer;
                padding: 0;
                margin: 0;
            }
                .blue-gray-design .submit-job-options .submit-job-option .form-check-label .form-check-input:before {
                    /* the newly styled radio button - overlaps the native radio button */
                    position: relative;
                    display: inline-block;
                    top: -.09rem;
                    font-family: "FontAwesome";
                    content: "\f00c";
                    font-size: 1rem;
                    line-height: 2rem;
                    color: var(--sw-gray-light) !important;
                    width: 2rem;
                    height: 2rem;
                    border: 1px solid var(--sw-gray-lighter);
                    border-radius: 1rem;
                    background-color: var(--sw-white) !important;
                    cursor: pointer;
                    padding: 0;
                    margin: 0;
                }
                .blue-gray-design .submit-job-options .submit-job-option .form-check-label .form-check-input:checked:before {
                    /* the new styled radio button that is selected/checked - overlaps the native radio button */
                    color: var(--sw-white) !important;
                    border: 1px solid var(--sw-blue-medium);
                    background-color: var(--sw-blue-medium) !important;
                    box-shadow: 0 0 0.9rem var(--sw-blue-medium);
                }

            .blue-gray-design .submit-job-options .submit-job-option .form-check-label:has(.form-check-input:checked) {
                /* the label that contains the selected/checked radio button */
                font-weight: bold;
                border: 1px solid var(--sw-gray-light);
                background-color: #ededed;
                z-index: 90;
            }

        .blue-gray-design .submit-job-options .submit-job-option .submit-job-min {
            /* the label that contains the minumum amount, after the radio button */
            padding: .2rem 0;
            margin: 0 0 0 0;
            position: relative;
            top: -4.43rem;
            vertical-align: middle;
            height: auto;
            background-color: var(--sw-blue-lighter);
            color: var(--sw-white-darkest);
            border-radius: 0;
            border-top: none;
            border-left: solid 1px var(--sw-gray-light);
            border-right: solid 1px var(--sw-gray-light);
            border-bottom: none;
            font-size: .8rem;
            letter-spacing: 0;
            font-style: italic;
            z-index: 95;
        }
        .blue-gray-design .submit-job-options .submit-job-option .submit-job-cost {
            /* the label that contains the job cost, after the radio button */
            padding: .4rem 0 .5rem 0;
            margin: 0 0 0 0;
            position: relative;
            top: -4.43rem;
            height: auto;
            background-color: var(--sw-blue-medium);
            color: white;
            border-radius: 0 0 5px 5px;
            border-top: none;
            border-left: solid 1px var(--sw-gray-light);
            border-right: solid 1px var(--sw-gray-light);
            border-bottom: solid 1px var(--sw-gray-light);
            z-index: 95;
        }
            .blue-gray-design .submit-job-options .submit-job-option .submit-job-cost .submit-job-cost-amount {
                font-size: 1.2rem;
            }
            .blue-gray-design .submit-job-options .submit-job-option .submit-job-cost .submit-job-cost-unit {
                font-size: .8rem;
            }
        .blue-gray-design .submit-job-options .submit-job-option .form-check-label:has(.form-check-input:checked) + .submit-job-min,
        .blue-gray-design .submit-job-options .submit-job-option .form-check-label:has(.form-check-input:checked) + .submit-job-min + .submit-job-cost {
            /*this style needs to be the last of the submit-job-min & submit-job-cost styles */
            font-weight: bold;
        }

.table.table-file-cost {
    font-size: .85rem;
    font-weight: normal;
    table-layout: auto;
    color: #0c5460;
    border-top: solid 1px #1c7631;
}
    .table.table-file-cost tr {
        border-bottom: solid 1px #1c7631;
    }
        .table.table-file-cost td {
            vertical-align: top;
        }
            .table.table-file-cost td:nth-child(1) {
                /* 1st column */
                word-break: break-word !important;
                word-wrap: break-word !important;
                padding: .3rem;
            }
            .table.table-file-cost td:nth-child(2) {
                /* 2nd column */
                white-space: nowrap;
                text-align: right;
                padding-left: .8rem;
            }
            .table.table-file-cost td:nth-child(3) {
                /* 3rd column */
                white-space: nowrap;
                text-align: right;
                padding-left: 1rem;
            }
            .table.table-file-cost td:nth-child(4) {
                /* 4th column */
                white-space: nowrap;
                text-align: center;
                width: 1.5rem;
            }
    .table.table-file-cost tr:first-of-type td {
        word-break: break-word !important;
        word-wrap: break-word !important;
        white-space: normal;
    }


.hide-from-public {
    display: none !important;
}

.stepper-instructions {
    display: none;
}

.supported-file-types {
    margin: 0 !important;
}

#fileTypesModal .modal-body {
    font-size: .95rem;
}
    #fileTypesModal .modal-body p {
        margin-bottom: 0;
    }
    #fileTypesModal .modal-body .overflow-auto {
        padding: .5rem;
        margin-bottom: -1rem;
        border: solid 1px var(--sw-gray-light);
        border-radius: .4rem;
    }
        #fileTypesModal .modal-body .overflow-auto p {
            display: list-item;
            margin-left: 1.5rem;
        }


.submit-job-timeline.mud-timeline-vertical {
    padding-top: 0 !important;
    width: 100% !important;
}
.submit-job-timeline.mud-timeline-vertical.mud-timeline-position-start::before {
    display: none !important;
}
.submit-job-timeline .mud-timeline-item-divider {
    display: none !important;
    min-width: 0 !important;
}
.submit-job-timeline .mud-timeline-item-content {
    max-width: 100% !important;
}
.submit-job-timeline .mud-timeline-item .mud-typography-h6 {
    display: none !important;
}


.container-playlist {
    display: flex;
    flex-direction: row;
    height: 100%;
}
.container-video-list {
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 9;
    flex: 1 1 35%;
    width: 100%;
    height: 100%;
    min-width: 250px;
    max-width: 450px;
    min-height: 200px;
    max-height: 450px;
    margin: 0 auto;
}
.container-video-player {
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 9;
    flex: 1 1 65%;
    width: 100%;
    height: 100%;
    min-width: 250px;
    max-width: 700px;
    max-height: 100vh;
    margin: 0 auto;
    border: 1px solid var(--sw-gray-light-border);
    background-color: var(--sw-gray-light-border) !important;
}




.video-list-header {
    font-variant: small-caps;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
    color: var(--sw-white);
    background-color: var(--sw-blue-darkest);
    border: solid 1px var(--sw-gray-lighter);
    padding: 15px 0 10px 40px;
}

.video-list-items {
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-color: var(--sw-white);
    border: solid 1px var(--sw-gray-lighter);
}

a.video-link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    cursor: pointer;
    text-decoration: none;
    background-color: var(--sw-white);
    border-bottom: 1px solid var(--sw-gray-light-border);
    padding: 10px 5px;
}
    a.video-link:hover {
        background-color: var(--sw-gray-lightest);
    }
    a.video-link.active {
        color: var(--sw-white);
        background-color: var(--sw-blue-medium);
    }

.video-link-icon {
    font-size: 20px;
    padding: 0 5px;
    color: var(--sw-blue-dark);
}
    a.video-link.active .video-link-icon {
        color: var(--sw-white);
    }

.video-link-title {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: .6px;
    color: var(--sw-blue-medium);
    padding: 1px 5px 0 5px;
    /*****/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
    a.video-link.active .video-link-title {
        color: var(--sw-white);
    }


@media (max-width: 767px) {

    .container-playlist {
        flex-direction: column;
    }

    .container-video-list {
        max-width: 700px;
        max-height: 230px;
    }

    .video-list-header {
        padding: 11px 0 9px 40px;
        font-size: medium;
    }

    a.video-link {
        padding: 6px 5px;
    }
    .video-link-icon {
        font-size: 18px;
    }
    .video-link-title {
        line-height: 1.2;
    }
}